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)
  ...

Author: benelan

.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"

.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"

.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"

.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"

.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"
 }

.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"
     }
   ]
 }

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",

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
 

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"
 />
 ```
 

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

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;

packages/calcite-components/src/components/alert/alert.scss

@@ -18,9 +18,9 @@ $border-style: 1px solid var(--calcite-color-border-3);
   box-border
   fixed
   flex
-  flex-wrap
   items-center
   justify-center
+  min-w-min
   mx-auto
   my-0
   opacity-0
@@ -64,20 +64,15 @@ $border-style: 1px solid var(--calcite-color-border-3);
   }
 }
 
-.content {
-  @apply box-border flex flex-auto flex-col transition-default;
-  padding-block: var(--calcite-alert-spacing-token-small);
-  padding-inline: var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small);
-}
-
 .icon {
-  @apply flex flex-col items-center justify-start p-0;
-  margin-block-end: var(--calcite-alert-spacing-token-large);
+  @apply flex flex-col items-center justify-center p-0;
+  margin-block: auto;
   margin-inline-end: auto;
+  padding-inline-start: var(--calcite-alert-spacing-token-large);
 }
 
 .close {
-  @apply bg-transparent border-none cursor-pointer flex items-start justify-end outline-none self-start text-color-3;
+  @apply bg-transparent border-none cursor-pointer flex items-center justify-end outline-none self-stretch text-color-3;
   -webkit-appearance: none;
   padding: var(--calcite-alert-spacing-token-large);
 
@@ -97,19 +92,20 @@ $border-style: 1px solid var(--calcite-color-border-3);
 }
 
 .queue-count {
-  @apply text-color-2
-  bg-foreground-1
-  transition-default
-  invisible
-  flex
+  @apply bg-foreground-1
   cursor-default
+  flex
+  font-medium
+  invisible
   items-center
   justify-around
-  self-stretch
+  min-w-min
+  opacity-0
   overflow-hidden
+  self-stretch
   text-center
-  font-medium
-  opacity-0;
+  text-color-2
+  transition-default;
   border-inline: 0 solid transparent;
   border-start-end-radius: 0;
 
@@ -143,23 +139,14 @@ $border-style: 1px solid var(--calcite-color-border-3);
 }
 
 .text-container {
-  @apply flex flex-1 min-w-0 flex-col break-words;
-}
-
-.content-container {
-  @apply flex flex-1;
+  @apply box-border flex flex-auto min-w-0 flex-col break-words;
+  padding-block: var(--calcite-alert-spacing-token-small);
+  padding-inline: var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small);
 }
 
 .footer {
-  @apply flex justify-end order-1 pt-px relative w-full;
-  block-size: var(--calcite-alert-footer-height);
-
-  &:before {
-    content: "";
-    @apply absolute top-0;
-    inset-inline: var(--calcite-alert-footer-divider-gap);
-    border-block-start: $border-style;
-  }
+  @apply flex justify-end pt-px relative self-stretch w-auto;
+  block-size: inherit;
 }
 
 // scale variables

packages/calcite-components/src/components/alert/alert.stories.ts

@@ -1,11 +1,9 @@
 import { select } from "@storybook/addon-knobs";
 import { boolean, iconNames, storyFilters } from "../../../.storybook/helpers";
-import { createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils";
+import { modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import readme from "./readme.md";
 
-const openAlertScreenshotDelay = 1000;
-
 export default {
   title: "Components/Alert",
   parameters: {
@@ -220,121 +218,3 @@ export const autoClosableRetainsCloseButton_TestOnly = (): string => html`
     <calcite-link slot="link" title="my action" role="presentation"> Take action </calcite-link>
   </calcite-alert>
 `;
-
-// we use individual stories since we can't display multiple open alerts at the same time
-
-const breakpointsStoryTemplate = html`
-  <style>
-    .breakpoint-stories-container {
-      height: 600px;
-
-      /* force fixed container placement on the breakpoint-sized stories container */
-      contain: layout;
-    }
-  </style>
-  <calcite-alert icon open scale="{scale}">
-    <div slot="title">title</div>
-    <div slot="message">message</div>
-    <calcite-action scale="{scale}" slot="actions-end" title="Tips" icon="lightbulb"></calcite-action>
-    <calcite-action scale="{scale}" slot="actions-end" title="Get info" icon="attachment"></calcite-action>
-  </calcite-alert>
-  <calcite-alert icon scale="{scale}">
-    <div slot="title">title</div>
-    <div slot="message">message</div>
-    <calcite-action scale="{scale}" slot="actions-end" title="Tips" icon="lightbulb"></calcite-action>
-    <calcite-action scale="{scale}" slot="actions-end" title="Get info" icon="attachment"></calcite-action>
-  </calcite-alert>
-  <script>
-    (async function () {
-      await customElements.whenDefined("calcite-alert");
-      const alert2 = document.querySelectorAll("calcite-alert")[1];
-      await alert2.componentOnReady();
-
-      requestAnimationFrame(() => (alert2.open = true));
-    })();
-  </script>
-`;
-
-export const breakpointsXsmallScaleS_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "xsmall", scale: "s" });
-
-breakpointsXsmallScaleS_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsSmallScaleS_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "small", scale: "s" });
-
-breakpointsSmallScaleS_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsMediumScaleS_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "medium", scale: "s" });
-
-breakpointsMediumScaleS_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsLargeScaleS_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "large", scale: "s" });
-
-breakpointsLargeScaleS_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsXsmallScaleM_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "xsmall", scale: "m" });
-
-breakpointsXsmallScaleM_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsSmallScaleM_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "small", scale: "m" });
-
-breakpointsSmallScaleM_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsMediumScaleM_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "medium", scale: "m" });
-
-breakpointsMediumScaleM_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsLargeScaleM_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "large", scale: "m" });
-
-breakpointsLargeScaleM_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsXsmallScaleL_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "xsmall", scale: "l" });
-
-breakpointsXsmallScaleL_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsSmallScaleL_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "small", scale: "l" });
-
-breakpointsSmallScaleL_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsMediumScaleL_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "medium", scale: "l" });
-
-breakpointsMediumScaleL_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};
-
-export const breakpointsLargeScaleL_TestOnly = (): string =>
-  createBreakpointStories(breakpointsStoryTemplate, { breakpoint: "large", scale: "l" });
-
-breakpointsLargeScaleL_TestOnly.parameters = {
-  chromatic: { delay: openAlertScreenshotDelay },
-};