chore: sync with main

* origin/main: (30 commits) test: add token snapshot tests (#8050) chore: release next fix(color-picker, popover, shell-panel, slider, tooltip): Register events on the window instead of the document (#8247) fix(list-item): Reserve space for empty open lists. (#8239) fix: dragging floating ui components (#8230) fix(list-item): an item with an empty slotted list should be openable. (#8240) fix(input): prevents mutating value on `blur` when `type="number"` (#8245) chore: release main (#8092) chore: downgrade eslint plugin after reverting breaking change (#8238) refactor(combobox): fix linting errors (#8235) chore: downgrade packages after reverting 2.0.0-next.0 change (#8237) chore: release next revert: feat(stepper-item)!: remove support for previousStep and nextStep in messages (#8222) (#8232) feat(stepper): enable responsive layout (#7744) feat(combobox): limit display of selected items with new selection-display prop (#7912) chore: release next build: update browserslist db (#8218) fix(list-item): fix rendering of open icon. (#8207) revert: feat(alert): make component responsive (#8195) fix(input-number): prevents mutating value on blur (#8226) ...
Esri · Nov 23, 2023 · 82cd085 · 82cd085
2 parents 897a777 + a7aeb37
commit 82cd085
Show file tree

Hide file tree

Showing 116 changed files with 90,424 additions and 9,391 deletions.
diff --git a/.github/ISSUE_TEMPLATE/accessibility.yml b/.github/ISSUE_TEMPLATE/accessibility.yml
@@ -103,6 +103,7 @@ body:
       description: Select the relevant [package(s)](https://github.com/Esri/calcite-design-system/tree/main/packages) related to the request.
       options:
         - label: "@esri/calcite-components"
+        - label: "@esri/calcite-components-angular"
         - label: "@esri/calcite-components-react"
         - label: "@esri/calcite-design-tokens"
         - label: "@esri/eslint-plugin-calcite-components"

diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml
@@ -97,6 +97,7 @@ body:
       description: Select the relevant [package(s)](https://github.com/Esri/calcite-design-system/tree/main/packages) related to the request.
       options:
         - label: "@esri/calcite-components"
+        - label: "@esri/calcite-components-angular"
         - label: "@esri/calcite-components-react"
         - label: "@esri/calcite-design-tokens"
         - label: "@esri/eslint-plugin-calcite-components"

diff --git a/.github/ISSUE_TEMPLATE/enhancement.yml b/.github/ISSUE_TEMPLATE/enhancement.yml
@@ -65,6 +65,7 @@ body:
       description: Select the relevant [package(s)](https://github.com/Esri/calcite-design-system/tree/main/packages) related to the request.
       options:
         - label: "@esri/calcite-components"
+        - label: "@esri/calcite-components-angular"
         - label: "@esri/calcite-components-react"
         - label: "@esri/calcite-design-tokens"
         - label: "@esri/eslint-plugin-calcite-components"

diff --git a/.github/ISSUE_TEMPLATE/refactor.yml b/.github/ISSUE_TEMPLATE/refactor.yml
@@ -41,6 +41,7 @@ body:
       description: Select the relevant [package(s)](https://github.com/Esri/calcite-design-system/tree/main/packages) related to the request.
       options:
         - label: "@esri/calcite-components"
+        - label: "@esri/calcite-components-angular"
         - label: "@esri/calcite-components-react"
         - label: "@esri/calcite-design-tokens"
         - label: "@esri/eslint-plugin-calcite-components"

diff --git a/.release-please-manifest.json b/.release-please-manifest.json
@@ -1,7 +1,7 @@
 {
-  "packages/calcite-components": "1.10.0",
-  "packages/calcite-components-angular": "1.10.0",
-  "packages/calcite-components-react": "1.10.0",
+  "packages/calcite-components": "1.11.0",
+  "packages/calcite-components-react": "1.11.0",
   "packages/calcite-design-tokens": "1.1.0",
-  "packages/eslint-plugin-calcite-components": "0.2.2"
+  "packages/eslint-plugin-calcite-components": "0.2.3",
+  "packages/calcite-components-angular/projects/component-library": "1.11.0"
 }
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -66,6 +66,17 @@
       "skipFiles": ["<node_internals>/**"],
       "internalConsoleOptions": "neverOpen",
       "console": "integratedTerminal"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug Tokens --spec {currentFile}",
+      "cwd": "${workspaceFolder}/packages/calcite-design-tokens",
+      "sourceMaps": true,
+      "runtimeArgs": ["--inspect-brk", "${workspaceRoot}/node_modules/jest/bin/jest.js", "--runInBand", "${file}"],
+      "skipFiles": ["<node_internals>/**"],
+      "internalConsoleOptions": "neverOpen",
+      "console": "integratedTerminal"
     }
   ]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/calcite-components/calcite-preset.ts b/packages/calcite-components/calcite-preset.ts
@@ -165,6 +165,7 @@ export default {
         "2-lg": "var(--calcite-box-shadow-md)",
         "2-sm": "0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16)",
         "border-bottom": "0 1px 0 var(--calcite-color-border-3)",
+        "border-top": "0 -1px 0 var(--calcite-color-border-3)",
         "outline-active": "0 0 0 1px var(--calcite-color-brand)",
         none: "none",
         xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
@@ -220,6 +221,7 @@ export default {
         4.5: "1.125rem",
         9: "2.25rem",
         11: "2.75rem",
+        13: "3.25rem",
       },
       transitionProperty: {
         margin: "margin",

diff --git a/packages/calcite-components/conventions/README.md b/packages/calcite-components/conventions/README.md
@@ -7,7 +7,7 @@ This is a living document defining our best practices and reasoning for authorin
 Generally adhere to and follow these best practices for authoring components.
 
 - [Google Web Component Best Practices](https://developers.google.com/web/fundamentals/web-components/best-practices)
-- [Custom Element Conformance - W3C Editor's Draft](https://w3c.github.io/webcomponents/spec/custom/#custom-element-conformance)
+- [Custom Element Conformance - W3C Editor's Draft](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance)
 
 ## Structure
 

diff --git a/packages/calcite-components/readme.md b/packages/calcite-components/readme.md
@@ -17,12 +17,12 @@ The most common approach for loading Calcite Components is to use the version ho
 ```html
 <script
   type="module"
-  src="https://cdn.jsdelivr.net/npm/@esri/calcite-components@1.10.0/dist/calcite/calcite.esm.js"
+  src="https://cdn.jsdelivr.net/npm/@esri/calcite-components@1.11.0/dist/calcite/calcite.esm.js"
 ></script>
 <link
   rel="stylesheet"
   type="text/css"
-  href="https://cdn.jsdelivr.net/npm/@esri/calcite-components@1.10.0/dist/calcite/calcite.css"
+  href="https://cdn.jsdelivr.net/npm/@esri/calcite-components@1.11.0/dist/calcite/calcite.css"
 />
 ```
 

diff --git a/packages/calcite-components/src/assets/styles/_sortable.scss b/packages/calcite-components/src/assets/styles/_sortable.scss
@@ -1,4 +1,9 @@
 @mixin sortable-helper-classes() {
+  .calcite-sortable--ghost,
+  .calcite-sortable--drag {
+    overflow: hidden;
+  }
+
   .calcite-sortable--ghost::before {
     content: "";
     @apply box-border

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -46,8 +46,8 @@ import { ChipMessages } from "./components/chip/assets/chip/t9n";
 import { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 import { Format } from "./components/color-picker/utils";
 import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
+import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
 import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
-import { ComboboxChildElement } from "./components/combobox/interfaces";
 import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 import { DateLocaleData } from "./components/date-picker/utils";
 import { HoverRange } from "./utils/date";
@@ -154,8 +154,8 @@ export { ChipMessages } from "./components/chip/assets/chip/t9n";
 export { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 export { Format } from "./components/color-picker/utils";
 export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
+export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
 export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
-export { ComboboxChildElement } from "./components/combobox/interfaces";
 export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 export { DateLocaleData } from "./components/date-picker/utils";
 export { HoverRange } from "./utils/date";
@@ -1143,7 +1143,8 @@ export namespace Components {
     placeholderIconFlipRtl: boolean;
     /**
      * Updates the position of the component.
-     * @param delayed
+     * @param delayed Reposition the component after a delay
+     * @returns Promise
      */
     reposition: (delayed?: boolean) => Promise<void>;
     /**
@@ -1159,6 +1160,10 @@ export namespace Components {
      * @readonly
      */
     selectedItems: HTMLCalciteComboboxItemElement[];
+    /**
+     * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections - `"all"` (displays all selections with individual `calcite-chip`s), `"fit"` (displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed), or `"single"` (display one `calcite-chip` with the total number of selections).
+     */
+    selectionDisplay: SelectionDisplay;
     /**
      * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.
      */
@@ -1500,7 +1505,7 @@ export namespace Components {
     /**
      * Specifies the width of the component.
      */
-    width: Scale;
+    widthScale: Scale;
   }
   interface CalciteDropdownGroup {
     /**
@@ -3083,7 +3088,7 @@ export namespace Components {
     /**
      * Specifies the width of the component.
      */
-    width: Scale;
+    widthScale: Scale;
   }
   interface CalciteNavigation {
     /**
@@ -4328,6 +4333,10 @@ export namespace Components {
      * Made into a prop for testing purposes only
      */
     messages: StepperItemMessages;
+    /**
+     * Specifies if the user is viewing one `stepper-item` at a time. Helps in determining if header region is tabbable.
+     */
+    multipleViewMode: boolean;
     /**
      * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.
      */
@@ -11019,6 +11028,10 @@ declare namespace LocalJSX {
      * @readonly
      */
     selectedItems?: HTMLCalciteComboboxItemElement[];
+    /**
+     * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections - `"all"` (displays all selections with individual `calcite-chip`s), `"fit"` (displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed), or `"single"` (display one `calcite-chip` with the total number of selections).
+     */
+    selectionDisplay?: SelectionDisplay;
     /**
      * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.
      */
@@ -11396,7 +11409,7 @@ declare namespace LocalJSX {
     /**
      * Specifies the width of the component.
      */
-    width?: Scale;
+    widthScale?: Scale;
   }
   interface CalciteDropdownGroup {
     /**
@@ -13040,7 +13053,7 @@ declare namespace LocalJSX {
     /**
      * Specifies the width of the component.
      */
-    width?: Scale;
+    widthScale?: Scale;
   }
   interface CalciteNavigation {
     /**
@@ -14327,6 +14340,10 @@ declare namespace LocalJSX {
      * Made into a prop for testing purposes only
      */
     messages?: StepperItemMessages;
+    /**
+     * Specifies if the user is viewing one `stepper-item` at a time. Helps in determining if header region is tabbable.
+     */
+    multipleViewMode?: boolean;
     /**
      * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.
      */

diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss
@@ -160,32 +160,26 @@
 }
 
 :host([appearance="transparent"]) .button {
-  @apply bg-transparent
-    transition-shadow
-    duration-150
-    ease-in-out;
+  @apply bg-transparent;
 }
 
+:host([appearance="transparent"][active]) .button,
 :host([appearance="transparent"]) .button:hover,
 :host([appearance="transparent"]) .button:focus {
-  @apply bg-transparent;
-  box-shadow: 0 0 0 2px theme("borderColor.color.1") inset;
+  background-color: var(--calcite-button-transparent-hover);
 }
 
-:host([active][appearance="transparent"]) .button,
-:host([active][appearance="transparent"]) .button:hover,
-:host([active][appearance="transparent"]) .button:focus {
-  @apply text-color-1 fill-color-1 bg-foreground-3;
+:host([appearance="transparent"]) .button:active {
+  background-color: var(--calcite-button-transparent-press);
 }
 
-:host([appearance="transparent"][loading]) .button,
 :host([appearance="transparent"][disabled]) .button {
   @apply bg-transparent;
 }
 
-:host([loading]) .button,
-:host([loading]) .button:hover,
-:host([loading]) .button:focus {
+:host([loading][appearance="solid"]) .button,
+:host([loading][appearance="solid"]) .button:hover,
+:host([loading][appearance="solid"]) .button:focus {
   @apply bg-foreground-1;
   .text-container {
     @apply opacity-disabled;