@esri/calcite-components 5.2.0-next.7 → 5.2.0-next.70

package/dist/components/calcite-split-button/customElement.js

@@ -18,7 +18,7 @@ const ICONS = {
   ellipsis: "ellipsis",
   handleVertical: "handle-vertical"
 };
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}:host([kind=brand]){--calcite-internal-split-button-divider-border-color: var(--calcite-color-brand);--calcite-internal-split-button-divider-color: var(--calcite-color-foreground-1)}:host([kind=danger]){--calcite-internal-split-button-divider-border-color: var(--calcite-color-status-danger);--calcite-internal-split-button-divider-color: var(--calcite-color-foreground-1)}:host([kind=neutral]){--calcite-internal-split-button-divider-border-color: var(--calcite-color-foreground-3);--calcite-internal-split-button-divider-color: var(--calcite-color-text-1)}:host([kind=inverse]){--calcite-internal-split-button-divider-border-color: var(--calcite-color-inverse);--calcite-internal-split-button-divider-color: var(--calcite-color-foreground-1)}:host([appearance=transparent]){--calcite-internal-split-button-divider-border-color: transparent}:host([appearance=transparent]):host([kind=brand]){--calcite-internal-split-button-divider-color: var(--calcite-color-brand)}:host([appearance=transparent]):host([kind=danger]){--calcite-internal-split-button-divider-color: var(--calcite-color-status-danger)}:host([appearance=transparent]):host([kind=neutral]){--calcite-internal-split-button-divider-color: var(--calcite-color-text-1)}:host([appearance=transparent]):host([kind=inverse]){--calcite-internal-split-button-divider-color: var(--calcite-color-foreground-1)}:host([appearance=outline]):host([kind=brand]),:host([appearance=outline]):host([kind=danger]),:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline]):host([kind=inverse]){--calcite-internal-split-button-divider-border-color: transparent}:host([appearance=outline-fill]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=danger]),:host([appearance=outline-fill]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-internal-split-button-divider-border-color: var(--calcite-color-background)}:host([appearance=outline]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-internal-split-button-divider-color: var(--calcite-color-brand)}:host([appearance=outline]):host([kind=danger]),:host([appearance=outline-fill]):host([kind=danger]){--calcite-internal-split-button-divider-color: var(--calcite-color-status-danger)}:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=neutral]){--calcite-internal-split-button-divider-color: var(--calcite-color-border-1)}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-internal-split-button-divider-color: var(--calcite-color-inverse)}.container{display:flex;align-items:stretch}.container>calcite-dropdown>calcite-button{block-size:100%;vertical-align:top}.divider-container{display:flex;inline-size:1px;align-items:stretch;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;background-color:var(--calcite-split-button-divider-color, var(--calcite-internal-split-button-divider-border-color))}.divider{margin-block:.25rem;display:inline-block;inline-size:1px;background-color:var(--calcite-split-button-divider-border-color, var(--calcite-internal-split-button-divider-color))}:host([appearance=outline-fill]) .divider-container,:host([appearance=outline]) .divider-container{border-block:1px solid var(--calcite-internal-split-button-divider-color)}:host([appearance=outline-fill]):hover .divider-container,:host([appearance=outline]):hover .divider-container{background-color:var(--calcite-internal-split-button-divider-color)}:host([appearance=outline-fill]:hover) .divider-container,:host([appearance=outline]:hover) .divider-container{background-color:var(--calcite-internal-split-button-divider-color)}:host([appearance=outline-fill]:focus-within):host([kind=brand]),:host([appearance=outline]:focus-within):host([kind=brand]){--calcite-internal-split-button-divider-color: var(--calcite-color-brand-press)}:host([appearance=outline-fill]:focus-within):host([kind=danger]),:host([appearance=outline]:focus-within):host([kind=danger]){--calcite-internal-split-button-divider-color: var(--calcite-color-danger-press)}:host([appearance=outline-fill]:focus-within) .divider-container,:host([appearance=outline]:focus-within) .divider-container{background-color:var(--calcite-internal-split-button-divider-color)}calcite-button[split-child=primary],calcite-button[split-child=secondary]{--calcite-button-background-color: var(--calcite-split-button-background-color);--calcite-button-border-color: var(--calcite-split-button-border-color);--calcite-button-text-color: var(--calcite-split-button-text-color);--calcite-button-icon-color: var(--calcite-split-button-icon-color);--calcite-button-loading-color: var(--calcite-split-button-loading-color);--calcite-button-shadow: var(--calcite-split-button-shadow)}calcite-button[split-child=primary]:hover,calcite-button[split-child=secondary]:hover{--calcite-button-background-color: var(--calcite-split-button-background-color-hover)}calcite-button[split-child=primary]:focus,calcite-button[split-child=secondary]:focus{--calcite-button-background-color: var(--calcite-split-button-background-color-focus)}calcite-button[split-child=primary]:active,calcite-button[split-child=secondary]:active{--calcite-button-background-color: var(--calcite-split-button-background-color-press)}calcite-button[split-child=primary]{--calcite-button-corner-radius: var(--calcite-split-button-corner-radius) var(--calcite-corner-radius-none) var(--calcite-corner-radius-none) var(--calcite-split-button-corner-radius)}calcite-button[split-child=secondary]{--calcite-button-corner-radius: var(--calcite-corner-radius-none) var(--calcite-split-button-corner-radius) var(--calcite-split-button-corner-radius) var(--calcite-corner-radius-none)}calcite-dropdown{--calcite-dropdown-shadow: var(--calcite-split-button-dropdown-shadow);--calcite-dropdown-background-color: var(--calcite-split-button-dropdown-background-color);--calcite-dropdown-width: var(--calcite-split-button-dropdown-width)}:host([disabled]) calcite-dropdown>calcite-button{pointer-events:none}:host([disabled]):host([appearance=outline-fill]) .divider-container{background-color:var(--calcite-color-background)}:host([disabled]):host([appearance=outline]) .divider-container{background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}:host([kind=brand]){--calcite-internal-split-button-divider-border-color: var(--calcite-color-brand);--calcite-internal-split-button-divider-color: var(--calcite-color-foreground-1)}:host([kind=danger]){--calcite-internal-split-button-divider-border-color: var(--calcite-color-status-danger);--calcite-internal-split-button-divider-color: var(--calcite-color-foreground-1)}:host([kind=neutral]){--calcite-internal-split-button-divider-border-color: var(--calcite-color-foreground-3);--calcite-internal-split-button-divider-color: var(--calcite-color-text-1)}:host([kind=inverse]){--calcite-internal-split-button-divider-border-color: var(--calcite-color-inverse);--calcite-internal-split-button-divider-color: var(--calcite-color-foreground-1)}:host([appearance=transparent]){--calcite-internal-split-button-divider-border-color: transparent}:host([appearance=transparent]):host([kind=brand]){--calcite-internal-split-button-divider-color: var(--calcite-color-brand)}:host([appearance=transparent]):host([kind=danger]){--calcite-internal-split-button-divider-color: var(--calcite-color-status-danger)}:host([appearance=transparent]):host([kind=neutral]){--calcite-internal-split-button-divider-color: var(--calcite-color-text-1)}:host([appearance=transparent]):host([kind=inverse]){--calcite-internal-split-button-divider-color: var(--calcite-color-foreground-1)}:host([appearance=outline]):host([kind=brand]),:host([appearance=outline]):host([kind=danger]),:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline]):host([kind=inverse]){--calcite-internal-split-button-divider-border-color: transparent}:host([appearance=outline-fill]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=danger]),:host([appearance=outline-fill]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-internal-split-button-divider-border-color: var(--calcite-color-background)}:host([appearance=outline]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-internal-split-button-divider-color: var(--calcite-color-brand)}:host([appearance=outline]):host([kind=danger]),:host([appearance=outline-fill]):host([kind=danger]){--calcite-internal-split-button-divider-color: var(--calcite-color-status-danger)}:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=neutral]){--calcite-internal-split-button-divider-color: var(--calcite-color-border-1)}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-internal-split-button-divider-color: var(--calcite-color-inverse)}.container{display:flex;align-items:stretch}.container>calcite-dropdown>calcite-button{block-size:100%;vertical-align:top}.divider-container{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;display:flex;inline-size:1px;align-items:stretch;background-color:var(--calcite-split-button-divider-color, var(--calcite-internal-split-button-divider-border-color))}.divider{margin-block:.25rem;display:inline-block;inline-size:1px;background-color:var(--calcite-split-button-divider-border-color, var(--calcite-internal-split-button-divider-color))}:host([appearance=outline-fill]) .divider-container,:host([appearance=outline]) .divider-container{border-block:1px solid var(--calcite-internal-split-button-divider-color)}:host([appearance=outline-fill]):hover .divider-container,:host([appearance=outline]):hover .divider-container{background-color:var(--calcite-internal-split-button-divider-color)}:host([appearance=outline-fill]:hover) .divider-container,:host([appearance=outline]:hover) .divider-container{background-color:var(--calcite-internal-split-button-divider-color)}:host([appearance=outline-fill]:focus-within):host([kind=brand]),:host([appearance=outline]:focus-within):host([kind=brand]){--calcite-internal-split-button-divider-color: var(--calcite-color-brand-press)}:host([appearance=outline-fill]:focus-within):host([kind=danger]),:host([appearance=outline]:focus-within):host([kind=danger]){--calcite-internal-split-button-divider-color: var(--calcite-color-danger-press)}:host([appearance=outline-fill]:focus-within) .divider-container,:host([appearance=outline]:focus-within) .divider-container{background-color:var(--calcite-internal-split-button-divider-color)}calcite-button[split-child=primary],calcite-button[split-child=secondary]{--calcite-button-background-color: var(--calcite-split-button-background-color);--calcite-button-border-color: var(--calcite-split-button-border-color);--calcite-button-text-color: var(--calcite-split-button-text-color);--calcite-button-icon-color: var(--calcite-split-button-icon-color);--calcite-button-loading-color: var(--calcite-split-button-loading-color);--calcite-button-shadow: var(--calcite-split-button-shadow)}calcite-button[split-child=primary]:hover,calcite-button[split-child=secondary]:hover{--calcite-button-background-color: var(--calcite-split-button-background-color-hover)}calcite-button[split-child=primary]:focus,calcite-button[split-child=secondary]:focus{--calcite-button-background-color: var(--calcite-split-button-background-color-focus)}calcite-button[split-child=primary]:active,calcite-button[split-child=secondary]:active{--calcite-button-background-color: var(--calcite-split-button-background-color-press)}calcite-button[split-child=primary]{--calcite-button-corner-radius: var(--calcite-split-button-corner-radius, var(--calcite-corner-radius)) var(--calcite-corner-radius-none) var(--calcite-corner-radius-none) var(--calcite-split-button-corner-radius, var(--calcite-corner-radius))}calcite-button[split-child=secondary]{--calcite-button-corner-radius: var(--calcite-corner-radius-none) var(--calcite-split-button-corner-radius, var(--calcite-corner-radius)) var(--calcite-split-button-corner-radius, var(--calcite-corner-radius)) var(--calcite-corner-radius-none)}calcite-dropdown{--calcite-dropdown-shadow: var(--calcite-split-button-dropdown-shadow);--calcite-dropdown-background-color: var(--calcite-split-button-dropdown-background-color);--calcite-dropdown-width: var(--calcite-split-button-dropdown-width)}:host([disabled]) calcite-dropdown>calcite-button{pointer-events:none}:host([disabled]):host([appearance=outline-fill]) .divider-container{background-color:var(--calcite-color-background)}:host([disabled]):host([appearance=outline]) .divider-container{background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 class SplitButton extends LitElement {
   constructor() {
     super(...arguments);
@@ -40,7 +40,7 @@ class SplitButton extends LitElement {
     this.calciteSplitButtonSecondaryClick = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { active: [7, {}, { reflect: true, type: Boolean }], appearance: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], download: [3, { converter: stringOrBoolean }, { reflect: true }], dropdownIconType: [3, {}, { reflect: true }], dropdownLabel: [3, {}, { reflect: true }], flipPlacements: [0, {}, { attribute: false }], href: [3, {}, { reflect: true }], kind: [3, {}, { reflect: true }], loading: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], rel: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], primaryIconEnd: [3, { type: String }, { reflect: true }], primaryIconFlipRtl: [3, {}, { reflect: true }], primaryIconStart: [3, { type: String }, { reflect: true }], primaryLabel: [3, {}, { reflect: true }], primaryText: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], target: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], width: [3, {}, { reflect: true }] };
+    this.properties = { active: [7, {}, { reflect: true, type: Boolean }], appearance: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], download: [3, { converter: stringOrBoolean }, { reflect: true }], dropdownIconType: [3, {}, { reflect: true }], dropdownLabel: [3, {}, { reflect: true }], flipPlacements: [0, {}, { attribute: false }], href: [3, {}, { reflect: true }], kind: [3, {}, { reflect: true }], loading: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], rel: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], primaryIconEnd: [3, {}, { reflect: true }], primaryIconFlipRtl: [3, {}, { reflect: true }], primaryIconStart: [3, {}, { reflect: true }], primaryLabel: [3, {}, { reflect: true }], primaryText: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], target: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], width: [3, {}, { reflect: true }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };

package/dist/components/calcite-stack/customElement.js

@@ -4,7 +4,7 @@ import { css, html } from "lit";
 import { keyed } from "lit/directives/keyed.js";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
-import { S as SLOTS, C as CSS } from "../../chunks/resources10.js";
+import { S as SLOTS, C as CSS } from "../../chunks/resources19.js";
 const styles = css`:host([disabled]) .content{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) .content *,:host([disabled]) .content ::slotted(*){pointer-events:none}:host{display:flex;flex:1 1 0%;flex-direction:column}.container{display:flex;flex:1 1 auto;align-items:stretch;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}.content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);padding-inline:var(--calcite-stack-padding-inline, .75rem);padding-block:var(--calcite-stack-padding-block, .5rem)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:0 1 auto}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:.75rem;align-self:center}.actions-start,.actions-end,.content-start,.content-end{display:flex;align-items:center}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}:host([hidden]){display:none}[hidden]{display:none}`;
 class Stack extends LitElement {
   constructor() {

package/dist/components/calcite-stepper/customElement.d.ts

@@ -1,9 +1,9 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 import type { NumberingSystem } from "../../utils/locale.js";
 import type { StepperItem } from "../calcite-stepper-item/customElement.js";
-import type { StepperLayout } from "./interfaces.js";
+import type { StepperLayout } from "./types.js";
 
 /**
  * @cssproperty [--calcite-stepper-bar-gap] - Specifies the space between the component's `calcite-stepper-item`s.
@@ -26,11 +26,15 @@ export abstract class Stepper extends LitElement {
    * @default "horizontal"
    */
   accessor layout: StepperLayout;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      label?: string;
-      previousStep?: string;
-      nextStep?: string;
+      label?: string | undefined;
+      previousStep?: string | undefined;
+      nextStep?: string | undefined;
   };
   /**
    * When `true`, displays the step number in the `calcite-stepper-item` heading.

package/dist/components/calcite-stepper/customElement.js

@@ -3,11 +3,11 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { svg, html, css, nothing } from "lit";
 import { safeClassMap, LitElement, createEvent } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { f as focusElementInGroup, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { d as focusElementInGroup, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { g as guid } from "../../chunks/guid.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { i as isStepperItem } from "../../chunks/resources12.js";
+import { i as isStepperItem } from "../../chunks/resources26.js";
 const CSS$1 = {
   actionIcon: "action-icon",
   actionContainer: "action-container",
@@ -61,7 +61,7 @@ class Stepper extends LitElement {
       cancelable: false
     });
     this.calciteStepperChange = createEvent({ cancelable: false });
-    this.listen("calciteInternalStepperItemKeyEvent", this.calciteInternalStepperItemKeyEvent);
+    this.listen("keydown", this.keyDownHandler);
     this.listen("calciteInternalStepperItemUpdate", (event) => {
       event.stopPropagation();
       this.updateItems();
@@ -137,26 +137,34 @@ class Stepper extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
   }
-  calciteInternalStepperItemKeyEvent(event) {
-    const item = event.detail.item;
-    const itemToFocus = event.target;
-    switch (item.key) {
+  keyDownHandler(event) {
+    if (event.defaultPrevented || !event.composedPath().includes(this.el)) {
+      return;
+    }
+    const item = this.items.find((item2) => item2 === event.target);
+    if (!item || item.disabled) {
+      return;
+    }
+    switch (event.key) {
       case "ArrowDown":
       case "ArrowRight":
-        focusElementInGroup(this.focusableItems, itemToFocus, "next");
+        focusElementInGroup(this.focusableItems, item, "next");
+        event.preventDefault();
         break;
       case "ArrowUp":
       case "ArrowLeft":
-        focusElementInGroup(this.focusableItems, itemToFocus, "previous");
+        focusElementInGroup(this.focusableItems, item, "previous");
+        event.preventDefault();
         break;
       case "Home":
-        focusElementInGroup(this.focusableItems, itemToFocus, "first");
+        focusElementInGroup(this.focusableItems, item, "first");
+        event.preventDefault();
         break;
       case "End":
-        focusElementInGroup(this.focusableItems, itemToFocus, "last");
+        focusElementInGroup(this.focusableItems, item, "last");
+        event.preventDefault();
         break;
     }
-    event.stopPropagation();
   }
   updateItem(event) {
     const { position } = event.detail;

package/dist/components/calcite-stepper-item/customElement.d.ts

@@ -51,11 +51,15 @@ export abstract class StepperItem extends LitElement {
    * @default false
    */
   accessor iconFlipRtl: boolean;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      complete?: string;
-      previousStep?: string;
-      nextStep?: string;
+      complete?: string | undefined;
+      previousStep?: string | undefined;
+      nextStep?: string | undefined;
   };
   /**
    * When `true`, the component is selected.

package/dist/components/calcite-stepper-item/customElement.js

@@ -7,9 +7,10 @@ import { n as numberStringFormatter } from "../../chunks/locale.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { i as isHidden } from "../../chunks/component.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-import { m as slotChangeHasContent } from "../../chunks/dom.js";
+import { o as slotChangeHasContent } from "../../chunks/dom.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-import { C as CSS, I as ICONS } from "../../chunks/resources12.js";
+import { C as CSS, I as ICONS } from "../../chunks/resources26.js";
+import { i as isActivationKey } from "../../chunks/key.js";
 const styles = css`:host([disabled]),:host([layout=horizontal][disabled]) .stepper-item-header,:host([layout=horizontal-single][disabled]) .stepper-item-header{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([layout=horizontal][disabled]) .stepper-item-header *,:host([layout=horizontal-single][disabled]) .stepper-item-header *,:host([disabled]) ::slotted(*),:host([layout=horizontal][disabled]) .stepper-item-header ::slotted(*),:host([layout=horizontal-single][disabled]) .stepper-item-header ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-internal-stepper-item-spacing-unit-s: .25rem;--calcite-internal-stepper-item-spacing-unit-m: .75rem;--calcite-internal-stepper-item-spacing-unit-l: 1rem;--calcite-internal-stepper-item-header-padding: var(--calcite-spacing-md);--calcite-internal-stepper-action-inline-size: 2rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);margin-inline-end:.25rem}:host([scale=s]) .stepper-item-description{font-size:var(--calcite-font-size-relative-sm)}:host([scale=m]){--calcite-internal-stepper-item-spacing-unit-s: .5rem;--calcite-internal-stepper-item-spacing-unit-m: 1rem;--calcite-internal-stepper-item-spacing-unit-l: 1.25rem;--calcite-internal-stepper-item-header-padding: var(--calcite-spacing-lg);--calcite-internal-stepper-action-inline-size: 2.5rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);margin-inline-end:.5rem}:host([scale=m]) .stepper-item-description{font-size:var(--calcite-font-size-relative-base)}:host([scale=l]){--calcite-internal-stepper-item-spacing-unit-s: .75rem;--calcite-internal-stepper-item-spacing-unit-m: 1.25rem;--calcite-internal-stepper-item-spacing-unit-l: 1.5rem;--calcite-internal-stepper-item-header-padding: var(--calcite-spacing-xl);--calcite-internal-stepper-action-inline-size: 3rem;font-size:var(--calcite-font-size-relative-lg);line-height:var(--calcite-font-line-height-lg);margin-inline-end:.75rem}:host([scale=l]) .stepper-item-description{font-size:var(--calcite-font-size-relative-md)}:host{position:relative;display:flex;flex-grow:1;flex-direction:column;align-self:flex-start;margin-block-end:var(--calcite-stepper-bar-gap, var(--calcite-internal-stepper-item-spacing-unit-s))}:host .container{position:relative;display:flex;flex-grow:1;cursor:pointer;flex-direction:column;border-width:0px;border-block-start-width:2px;border-style:solid;border-color:var(--calcite-color-border-3);color:var(--calcite-color-text-3);text-decoration-line:none;outline:2px solid transparent;outline-offset:2px}:host .container:active{background-color:var(--calcite-stepper-item-background-color-press, var(--calcite-color-foreground-3))}:host{outline-color:transparent}:host(:focus){outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host .stepper-item-content,:host .stepper-item-header{box-sizing:border-box;padding-block:var(--calcite-internal-stepper-item-spacing-unit-l);padding-inline-end:var(--calcite-internal-stepper-item-spacing-unit-m);text-align:start}:host .stepper-item-header{display:flex;cursor:pointer;align-items:flex-start;padding-block:var(--calcite-internal-stepper-item-header-padding)}:host .stepper-item-header:active{background-color:var(--calcite-stepper-item-background-color-press, var(--calcite-color-foreground-3))}:host .stepper-item-header *{display:inline-flex;align-items:center}:host .stepper-item-content{display:none;inline-size:100%;flex-direction:column;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}:host .stepper-item-icon{margin-inline-end:var(--calcite-internal-stepper-item-spacing-unit-m);display:inline-flex;block-size:.75rem;flex-shrink:0;align-self:flex-start;margin-block-start:var(--calcite-spacing-base);color:var(--calcite-stepper-item-icon-color, var(--calcite-color-border-input))}:host([complete]) .stepper-item-icon{opacity:var(--calcite-opacity-disabled)}:host .stepper-item-header-text{flex-direction:column;text-align:initial;margin-inline-end:auto}:host .stepper-item-heading,:host .stepper-item-description{display:flex;inline-size:100%}.stepper-item-heading,.stepper-item-description,.stepper-item-number{line-height:var(--calcite-font-line-height-relative-snug)}:host .stepper-item-heading{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-stepper-item-header-text-color, var(--calcite-color-text-1))}:host .stepper-item-description{color:var(--calcite-stepper-item-description-text-color, var(--calcite-color-text-3))}:host .stepper-item-number{font-weight:var(--calcite-font-weight-normal);margin-inline-end:var(--calcite-internal-stepper-item-spacing-unit-m);color:var(--calcite-stepper-item-description-text-color, var(--calcite-color-text-1))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([complete]) .container{border-color:#007ac280}:host([complete]) .container .stepper-item-icon{color:var(--calcite-stepper-item-complete-icon-color, var(--calcite-color-brand))}:host([error]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([error]) .container .stepper-item-number{color:var(--calcite-stepper-item-error-icon-color, var(--calcite-color-status-danger))}:host([error]) .container .stepper-item-icon{opacity:1;color:var(--calcite-stepper-item-error-icon-color, var(--calcite-color-status-danger))}:host(:hover:not([disabled]):not([selected])) .container,:host(:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-color-brand)}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-heading,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-heading{color:var(--calcite-stepper-item-header-text-color-hover, var(--calcite-color-text-1))}:host(:hover:not([disabled]):not([selected])) .container .stepper-item-description,:host(:focus:not([disabled]):not([selected])) .container .stepper-item-description{color:var(--calcite-stepper-item-description-text-color-hover, var(--calcite-color-text-2))}:host([error]:hover:not([disabled]):not([selected])) .container,:host([error]:focus:not([disabled]):not([selected])) .container{border-block-start-color:var(--calcite-color-status-danger-hover)}:host([selected]) .container{border-block-start-color:var(--calcite-color-brand)}:host([selected]) .container .stepper-item-heading{color:var(--calcite-stepper-item-selected-header-text-color, var(--calcite-color-text-1));font-weight:var(--calcite-font-weight-medium)}:host([selected]) .container .stepper-item-description{color:var(--calcite-stepper-item-description-text-color-hover, var(--calcite-color-text-2))}:host([selected]) .container .stepper-item-number{color:var(--calcite-stepper-item-selected-icon-color, var(--calcite-color-brand));font-weight:var(--calcite-font-weight-medium)}:host([selected]) .container .stepper-item-icon{color:var(--calcite-stepper-item-selected-icon-color, var(--calcite-color-brand));opacity:1}:host([selected]) .container .stepper-item-content{display:flex}:host([layout=vertical]){inline-size:100%}:host([layout=vertical]) .container{margin-inline:0px;margin-block-start:0px;flex:1 1 auto;border-block-start-width:0px;border-style:solid;padding-block:0px;border-inline-start-width:2px;padding-inline-start:var(--calcite-internal-stepper-item-spacing-unit-l);border-color:var(--calcite-stepper-bar-fill-color, var(--calcite-color-border-2))}:host([layout=vertical]) .container .stepper-item-icon{order:3;margin-block:1px 0px;padding-inline-start:var(--calcite-internal-stepper-item-spacing-unit-s);margin-inline-start:auto}:host([layout=vertical]) .container .stepper-item-header{padding-inline-end:0px}:host([layout=vertical]) .container .stepper-item-content{padding:0}:host([layout=vertical][complete]) .container{border-color:var(--calcite-stepper-bar-complete-fill-color, rgba(0, 122, 194, .5))}:host([layout=vertical][complete]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][complete]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-stepper-bar-complete-fill-color-hover, var(--calcite-color-brand))}:host([layout=vertical][error]) .container{border-color:var(--calcite-stepper-bar-error-fill-color, var(--calcite-color-status-danger))}:host([layout=vertical][selected]) .container{border-color:var(--calcite-stepper-bar-selected-fill-color, var(--calcite-color-brand))}:host([layout=vertical][selected]) .container .stepper-item-content.has-slotted-content{margin-block-end:var(--calcite-internal-stepper-item-spacing-unit-l)}:host([layout=vertical]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-stepper-bar-fill-color-hover, rgba(0, 122, 194, .5))}:host([layout=vertical][error]:hover:not([disabled]):not([selected])) .container,:host([layout=vertical][error]:focus:not([disabled]):not([selected])) .container{border-color:var(--calcite-stepper-bar-error-fill-color-hover, var(--calcite-color-status-danger-hover))}:host([layout=horizontal]),:host([layout=horizontal-single]){display:contents}:host([layout=horizontal]) .container,:host([layout=horizontal-single]) .container{display:contents}:host([layout=horizontal]) .stepper-item-header,:host([layout=horizontal-single]) .stepper-item-header{border-width:0px;border-block-start-width:2px;border-style:solid;outline-color:transparent;grid-row:items;border-color:var(--calcite-stepper-bar-fill-color, var(--calcite-color-border-2))}:host([layout=horizontal]) .stepper-item-header:focus,:host([layout=horizontal-single]) .stepper-item-header:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([layout=horizontal]) .stepper-item-content,:host([layout=horizontal-single]) .stepper-item-content{cursor:auto;transition-timing-function:cubic-bezier(.4,0,.2,1);padding-block:0;padding-inline-end:var(--calcite-internal-stepper-item-spacing-unit-m);text-align:start}:host([layout=horizontal-single]) .stepper-item-header{grid-area:1/1/1/-1}:host([layout=horizontal]) .stepper-item-content,:host([layout=horizontal-single]) .stepper-item-content{grid-area:2/1/2/-1}:host([layout=horizontal][complete]) .stepper-item-header,:host([layout=horizontal-single][complete]) .stepper-item-header{border-color:var(--calcite-stepper-bar-complete-fill-color, rgba(0, 122, 194, .5))}:host([layout=horizontal][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][complete]:focus:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][complete]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-stepper-bar-complete-fill-color-hover, var(--calcite-color-brand))}:host([layout=horizontal][error]) .stepper-item-header,:host([layout=horizontal-single][error]) .stepper-item-header{border-color:var(--calcite-stepper-bar-error-fill-color, var(--calcite-color-status-danger))}:host([layout=horizontal][selected]) .stepper-item-header,:host([layout=horizontal-single][selected]) .stepper-item-header{border-color:var(--calcite-stepper-bar-selected-fill-color, var(--calcite-color-brand))}:host([layout=horizontal]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal]:focus:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-stepper-bar-fill-color-hover, rgba(0, 122, 194, .5))}:host([layout=horizontal][error]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal][error]:focus:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][error]:hover:not([disabled]):not([selected])) .stepper-item-header,:host([layout=horizontal-single][error]:focus:not([disabled]):not([selected])) .stepper-item-header{border-color:var(--calcite-stepper-bar-error-fill-color-hover, var(--calcite-color-status-danger-hover))}@media(forced-colors:active){:host .container{outline-width:0;outline-offset:0}:host(:focus),:host(:focus-visible){outline-color:canvasText}:host([selected]) .container{border-block-start-color:highlight}:host([selected]) .container .stepper-item-number{color:highlight}:host([selected]) .container .stepper-item-icon{color:highlight}:host([layout=vertical][selected]) .container{border-color:highlight}}:host([layout=horizontal-single]) .stepper-item-header{margin-inline-end:0px;border-style:none;inline-size:100%;padding-inline:calc(var(--calcite-internal-stepper-action-inline-size) + .5rem)}:host([layout=horizontal-single][error]) .container .stepper-item-number{color:var(--calcite-stepper-item-error-icon-color, var(--calcite-color-status-danger))}:host([layout=horizontal-single][error]) .container .stepper-item-icon{opacity:1;color:var(--calcite-stepper-item-error-icon-color, var(--calcite-color-status-danger))}:host([layout=horizontal-single][error][selected]),:host([layout=horizontal-single][complete][selected]) .container{color:var(--calcite-color-text-3)}:host([layout=horizontal-single][error][selected]) .stepper-item-heading,:host([layout=horizontal-single][complete][selected]) .container .stepper-item-heading{color:var(--calcite-stepper-item-header-text-color, var(--calcite-color-text-2))}:host([layout=horizontal-single][complete][selected]) .container .stepper-item-icon{opacity:var(--calcite-opacity-disabled)}:host([layout=horizontal-single][complete][selected]) .container .stepper-item-number{color:var(--calcite-stepper-item-selected-icon-color, var(--calcite-color-text-3))}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}:host([item-hidden]){display:none}`;
 class StepperItem extends LitElement {
   constructor() {
@@ -30,9 +31,6 @@ class StepperItem extends LitElement {
     this.numbered = false;
     this.scale = "m";
     this.selected = false;
-    this.calciteInternalStepperItemKeyEvent = createEvent({
-      cancelable: false
-    });
     this.calciteInternalStepperItemUpdate = createEvent({ cancelable: false });
     this.calciteInternalStepperItemSelect = createEvent({ cancelable: false });
     this.calciteStepperItemSelect = createEvent({ cancelable: false });
@@ -89,23 +87,9 @@ class StepperItem extends LitElement {
     }
   }
   keyDownHandler(event) {
-    if (!this.disabled && event.target === this.el) {
-      switch (event.key) {
-        case " ":
-        case "Enter":
-          this.emitUserRequestedItem();
-          event.preventDefault();
-          break;
-        case "ArrowUp":
-        case "ArrowDown":
-        case "ArrowLeft":
-        case "ArrowRight":
-        case "Home":
-        case "End":
-          this.calciteInternalStepperItemKeyEvent.emit({ item: event });
-          event.preventDefault();
-          break;
-      }
+    if (!this.disabled && event.target === this.el && isActivationKey(event.key)) {
+      this.emitUserRequestedItem();
+      event.preventDefault();
     }
   }
   determineSelectedItem() {

package/dist/components/calcite-swatch/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 
 /**
  * @cssproperty [--calcite-swatch-corner-radius] - Specifies the component's corner radius.

package/dist/components/calcite-swatch/customElement.js

@@ -7,36 +7,10 @@ import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import Color from "color";
 import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-import { b as hexify } from "../../chunks/utils.js";
+import { h as hexify } from "../../chunks/utils3.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-const CSS = {
-  imageContainer: "image-container",
-  container: "container",
-  selectable: "selectable",
-  nonInteractive: "non-interactive",
-  selected: "selected",
-  internalSvgContainer: "internal-svg-container",
-  internalSvgDisabled: "internal-svg-disabled",
-  internalSvgEmpty: "internal-svg-empty",
-  swatch: "swatch",
-  checker: "checker",
-  noColorSwatch: "swatch--no-color"
-};
-const SLOTS = {
-  image: "image"
-};
-const checkerSquareSize = 4;
-const CHECKER_DIMENSIONS = {
-  squareSize: checkerSquareSize,
-  size: checkerSquareSize * 2
-};
-const IDS = {
-  checker: "checker",
-  shape: "shape",
-  swatchRect: "swatch-rect",
-  swatchSolid: "swatch-solid",
-  swatchTransparent: "swatch-transparent"
-};
+import { S as SLOTS, C as CSS, I as IDS, a as CHECKER_DIMENSIONS } from "../../chunks/resources27.js";
+import { i as isActivationKey } from "../../chunks/key.js";
 const styles = css`:host{display:block;--calcite-internal-swatch-inset: var(--calcite-spacing-xxs)}:host([scale=s]) .container{--calcite-internal-swatch-size: var(--calcite-spacing-xl)}:host([scale=m]) .container{--calcite-internal-swatch-size: var(--calcite-spacing-xxl)}:host([scale=l]) .container{--calcite-internal-swatch-size: var(--calcite-spacing-xxxl)}.container{position:relative;box-sizing:border-box;justify-content:center;overflow:hidden;outline-color:transparent;font-size:var(--calcite-internal-swatch-font-size, var(--calcite-font-size));block-size:var(--calcite-internal-swatch-size, auto);inline-size:var(--calcite-internal-swatch-size, auto);min-inline-size:var(--calcite-internal-swatch-size, auto);border-radius:var(--calcite-swatch-corner-radius, 0)}.container:not(.non-interactive):hover{cursor:pointer;box-shadow:0 0 0 var(--calcite-border-width-md) var(--calcite-color-border-1)}.container.selectable{cursor:pointer}.container:not(.non-interactive):focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.swatch{position:absolute;display:inline-flex;overflow:hidden;z-index:calc(var(--calcite-z-index) + 1);block-size:var(--calcite-internal-swatch-size, auto);inline-size:var(--calcite-internal-swatch-size, auto);min-inline-size:var(--calcite-internal-swatch-size, auto);border-radius:var(--calcite-swatch-corner-radius, 0)}:host([selected]) .swatch{inset:var(--calcite-internal-swatch-inset);block-size:calc(var(--calcite-internal-swatch-size, auto) - 2 * var(--calcite-internal-swatch-inset));inline-size:calc(var(--calcite-internal-swatch-size, auto) - 2 * var(--calcite-internal-swatch-inset));min-inline-size:calc(var(--calcite-internal-swatch-size, auto) - 2 * var(--calcite-internal-swatch-inset))}:host([selected]) .container{box-shadow:inset 0 0 0 var(--calcite-border-width-md) var(--calcite-color-text-1),inset 0 0 0 var(--calcite-border-width-lg) var(--calcite-color-foreground-1)}:host([selected]) .image-container{inset:var(--calcite-internal-swatch-inset)}.image-container{position:absolute;display:inline-flex;overflow:hidden;z-index:calc(var(--calcite-z-index) + 2);inset:var(--calcite-spacing-px);display:flex;align-items:center;justify-content:center;pointer-events:none;border-radius:var(--calcite-swatch-corner-radius, 0)}.internal-svg-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:calc(var(--calcite-z-index) + 2)}.swatch{overflow:hidden;block-size:inherit;inline-size:inherit}.swatch--no-color rect{fill:var(--calcite-color-foreground-1)}:host([selected]) #swatch-rect,:host([selected]) #swatch-solid,:host([selected]) #swatch-transparent{stroke-width:0}#swatch-rect,#swatch-solid,#swatch-transparent{stroke:var(--calcite-color-text-1);stroke-width:var(--calcite-border-width-md);stroke-opacity:.3;rx:var(--calcite-swatch-corner-radius)}.internal-svg-disabled{stroke:#6a6a6a;fill:#fff}.internal-svg-empty{stroke:var(--calcite-color-status-danger);stroke-width:3}.checker{fill:#cacaca}:host([hidden]){display:none}[hidden]{display:none}`;
 class Swatch extends LitElement {
   constructor() {
@@ -50,7 +24,6 @@ class Swatch extends LitElement {
     this.scale = "m";
     this.selected = false;
     this.selectionMode = "none";
-    this.calciteInternalSwatchKeyEvent = createEvent({ cancelable: false });
     this.calciteInternalSwatchSelect = createEvent({ cancelable: false });
     this.calciteInternalSyncSelectedSwatches = createEvent({ cancelable: false });
     this.calciteSwatchSelect = createEvent({ cancelable: false });
@@ -88,21 +61,9 @@ class Swatch extends LitElement {
     this.handleSelectionPropertyChange(selected);
   }
   keyDownHandler(event) {
-    if (event.target === this.el) {
-      switch (event.key) {
-        case " ":
-        case "Enter":
-          this.handleEmittingEvent();
-          event.preventDefault();
-          break;
-        case "ArrowRight":
-        case "ArrowLeft":
-        case "Home":
-        case "End":
-          this.calciteInternalSwatchKeyEvent.emit(event);
-          event.preventDefault();
-          break;
-      }
+    if (event.target === this.el && isActivationKey(event.key)) {
+      this.handleEmittingEvent();
+      event.preventDefault();
     }
   }
   handleSlotImageChange(event) {

package/dist/components/calcite-swatch-group/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale, SelectionMode } from "../interfaces.js";
+import type { Scale, SelectionMode } from "../types.js";
 import type { Swatch } from "../calcite-swatch/customElement.js";
 
 /**
@@ -29,15 +29,12 @@ export abstract class SwatchGroup extends LitElement {
   /** Specifies the component's selected items. */
   get selectedItems(): Swatch[];
   /**
-   * Specifies the selection mode of the component, where:
+   * Specifies the selection mode of the component.
    *
-   * `"multiple"` allows any number of selections,
-   *
-   * `"single"` allows only one selection,
-   *
-   * `"single-persist"` allows one selection and prevents de-selection, and
-   *
-   * `"none"` does not allow any selections.
+   * - `"multiple"` allows any number of selections.
+   * - `"single"` allows only one selection.
+   * - `"single-persist"` allows one selection and prevents de-selection.
+   * - `"none"` does not allow any selections.
    *
    * @default "none"
    */

package/dist/components/calcite-swatch-group/customElement.js

@@ -3,9 +3,10 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { f as focusElementInGroup, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { d as focusElementInGroup, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { i as isSwatch } from "../../chunks/resources27.js";
 const CSS = {
   container: "container"
 };
@@ -22,7 +23,7 @@ class SwatchGroup extends LitElement {
     this.selectedItems = [];
     this.selectionMode = "none";
     this.calciteSwatchGroupSelect = createEvent({ cancelable: false });
-    this.listen("calciteInternalSwatchKeyEvent", this.calciteInternalSwatchKeyEventListener);
+    this.listen("keydown", this.keyDownHandler);
     this.listen("calciteSwatchSelect", this.calciteSwatchSelectListener);
     this.listen("calciteInternalSwatchSelect", this.calciteInternalSwatchSelectListener);
     this.listen("calciteInternalSyncSelectedSwatches", this.calciteInternalSyncSelectedSwatches);
@@ -37,29 +38,37 @@ class SwatchGroup extends LitElement {
     return this.focusSetter(() => this.el, options);
   }
   willUpdate(changes) {
-    if (changes.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "none")) {
+    if ((changes.has("scale") || changes.has("selectionMode")) && (this.hasUpdated || this.selectionMode !== "none")) {
       this.updateItems();
     }
   }
-  calciteInternalSwatchKeyEventListener(event) {
-    if (event.composedPath().includes(this.el)) {
-      const interactiveItems = this.items?.filter((el) => !el.disabled);
-      switch (event.detail.key) {
-        case "ArrowRight":
-          focusElementInGroup(interactiveItems, event.detail.target, "next");
-          break;
-        case "ArrowLeft":
-          focusElementInGroup(interactiveItems, event.detail.target, "previous");
-          break;
-        case "Home":
-          focusElementInGroup(interactiveItems, event.detail.target, "first");
-          break;
-        case "End":
-          focusElementInGroup(interactiveItems, event.detail.target, "last");
-          break;
-      }
+  keyDownHandler(event) {
+    const target = event.composedPath().find(isSwatch);
+    if (event.defaultPrevented || !target || !this.el.contains(target)) {
+      return;
+    }
+    const interactiveItems = this.items.filter((el) => !el.disabled);
+    if (!interactiveItems.includes(target)) {
+      return;
+    }
+    switch (event.key) {
+      case "ArrowRight":
+        focusElementInGroup(interactiveItems, target, "next");
+        event.preventDefault();
+        break;
+      case "ArrowLeft":
+        focusElementInGroup(interactiveItems, target, "previous");
+        event.preventDefault();
+        break;
+      case "Home":
+        focusElementInGroup(interactiveItems, target, "first");
+        event.preventDefault();
+        break;
+      case "End":
+        focusElementInGroup(interactiveItems, target, "last");
+        event.preventDefault();
+        break;
     }
-    event.stopPropagation();
   }
   calciteSwatchSelectListener(event) {
     if (event.composedPath().includes(this.el)) {
@@ -99,11 +108,11 @@ class SwatchGroup extends LitElement {
     this.setSelectedItems(false);
   }
   updateSelectedItems() {
-    this.selectedItems = this.items?.filter((el) => el.selected);
+    this.selectedItems = this.items.filter((el) => el.selected);
   }
   setSelectedItems(emit, elToMatch) {
     if (elToMatch) {
-      this.items?.forEach((el) => {
+      this.items.forEach((el) => {
         const matchingEl = elToMatch === el;
         switch (this.selectionMode) {
           case "multiple":

package/dist/components/calcite-switch/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 
 /**
  * @cssproperty [--calcite-switch-background-color] - Specifies the component's background color.
@@ -32,14 +32,31 @@ export abstract class Switch extends LitElement {
   accessor labelTextEnd: string | undefined;
   /** Specifies the component's start label text. */
   accessor labelTextStart: string | undefined;
-  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
+  /**
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
+   */
   accessor name: string | undefined;
+  /**
+   * When `true` and the component resides in a form,
+   * the component must have a value in order for the form to submit.
+   *
+   * @default false
+   */
+  accessor required: boolean;
   /**
    * Specifies the component's size.
    *
    * @default "m"
    */
   accessor scale: Scale;
+  /**
+   * The component's current validation state.
+   *
+   * @see [MDN - ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
+   */
+  get validity(): ValidityState;
   /** The component's value. */
   accessor value: any;
   /**

package/dist/components/calcite-switch/customElement.js

@@ -4,7 +4,8 @@ import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { i as isActivationKey } from "../../chunks/key.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
@@ -14,7 +15,7 @@ const CSS = {
   track: "track",
   handle: "handle"
 };
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .container{block-size:.75rem}:host([scale=s]) .track{block-size:.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:.5rem;inline-size:.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:.75rem;inline-size:.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline:none;display:flex}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;outline-color:transparent;border-radius:var(--calcite-switch-corner-radius, 9999px);border-color:var(--calcite-switch-border-color);background-color:var(--calcite-switch-background-color, var(--calcite-color-border-input))}.container:focus .track{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container:hover .track{background-color:var(--calcite-switch-background-color-hover, var(--calcite-color-text-3))}.handle{pointer-events:none;position:absolute;display:block;transition-property:all;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);inset-block-start:var(--calcite-spacing-base);inset-inline:var(--calcite-spacing-base) auto;background-color:var(--calcite-switch-handle-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-switch-handle-border-color);border-radius:var(--calcite-switch-corner-radius, 9999px);box-shadow:var(--calcite-switch-handle-shadow)}:host([checked]) .track{background-color:var(--calcite-switch-background-color, var(--calcite-color-brand))}:host([checked]) .handle{inset-inline:auto var(--calcite-spacing-base)}:host([checked]):host(:hover:not([disabled])) .track{background-color:var(--calcite-switch-background-color-hover, var(--calcite-color-brand-hover))}@media(forced-colors:active){:host([checked]) .track{background-color:canvasText}}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]) .container{block-size:.75rem}:host([scale=s]) .track{block-size:.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:.5rem;inline-size:.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:.75rem;inline-size:.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline:none;display:flex}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;outline-color:transparent;border-radius:var(--calcite-switch-corner-radius, 9999px);border-color:var(--calcite-switch-border-color);background-color:var(--calcite-switch-background-color, var(--calcite-color-border-input))}.container:focus .track{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container:hover .track{background-color:var(--calcite-switch-background-color-hover, var(--calcite-color-text-3))}.handle{pointer-events:none;position:absolute;display:block;transition-property:all;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);inset-block-start:var(--calcite-spacing-base);inset-inline:var(--calcite-spacing-base) auto;background-color:var(--calcite-switch-handle-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-switch-handle-border-color);border-radius:var(--calcite-switch-corner-radius, 9999px);box-shadow:var(--calcite-switch-handle-shadow)}:host([checked]) .track{background-color:var(--calcite-switch-background-color, var(--calcite-color-brand))}:host([checked]) .handle{inset-inline:auto var(--calcite-spacing-base)}:host([checked]):host(:hover:not([disabled])) .track{background-color:var(--calcite-switch-background-color-hover, var(--calcite-color-brand-hover))}@media(forced-colors:active){:host([checked]) .track{background-color:canvasText}}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}:host([hidden]){display:none}[hidden]{display:none}`;
 class Switch extends LitElement {
   constructor() {
     super();
@@ -26,13 +27,15 @@ class Switch extends LitElement {
     this.interactiveContainer = useInteractive(this);
     this.checked = false;
     this.disabled = false;
+    this.required = false;
     this.scale = "m";
     this.calciteSwitchChange = createEvent({ cancelable: false });
+    useLabel(this);
     this.listen("click", this.clickHandler);
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { checked: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], label: 1, labelTextEnd: 1, labelTextStart: 1, name: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], value: 1 };
+    this.properties = { checked: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], label: 1, labelTextEnd: 1, labelTextStart: 1, name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
   }
   static {
     this.formAssociated = true;
@@ -43,14 +46,6 @@ class Switch extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.switchRef.value, options);
   }
-  connectedCallback() {
-    super.connectedCallback();
-    connectLabel(this);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    disconnectLabel(this);
-  }
   keyDownHandler(event) {
     if (!this.disabled && isActivationKey(event.key)) {
       this.toggle();

package/dist/components/calcite-tab/customElement.js

@@ -4,6 +4,8 @@ import { css, html } from "lit";
 import { LitElement, setAttribute, safeClassMap } from "@arcgis/lumina";
 import { n as nodeListToArray } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
+import { i as isTabs } from "../../chunks/resources28.js";
+import { i as isTag } from "../../chunks/resources3.js";
 const CSS = {
   container: "container",
   content: "content",
@@ -12,6 +14,7 @@ const CSS = {
 const IDS = {
   tabTitleId: (id) => `calcite-tab-title-${id}`
 };
+const isTab = isTag("calcite-tab");
 const styles = css`:host{display:none}:host,.container,.content{block-size:100%;inline-size:100%}:host([selected]),:host([selected]) .container{display:flex;flex-direction:column}.content{box-sizing:border-box;padding-block:var(--calcite-tab-content-space-y, var(--calcite-tab-content-block-padding, var(--calcite-internal-tab-content-space-y)))}.scale-s{--calcite-internal-tab-content-space-y: .25rem;font-size:var(--calcite-font-size-sm);line-height:1rem}.scale-m{--calcite-internal-tab-content-space-y: .5rem;font-size:var(--calcite-font-size);line-height:1rem}.scale-l{--calcite-internal-tab-content-space-y: var(--calcite-space-sm-plus);font-size:var(--calcite-font-size-md);line-height:1.25rem}.container{display:none;block-size:100%;inline-size:100%;overflow:auto;outline-color:transparent}.container:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([hidden]){display:none}[hidden]{display:none}`;
 class Tab extends LitElement {
   constructor() {
@@ -29,7 +32,7 @@ class Tab extends LitElement {
     this.styles = styles;
   }
   async getTabIndex() {
-    return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter((el) => el.matches("calcite-tab")), this.el);
+    return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter(isTab), this.el);
   }
   _updateAriaInfo(tabIds = [], titleIds = []) {
     this.labeledBy = titleIds[tabIds.indexOf(this.el.id)] || void 0;
@@ -45,7 +48,7 @@ class Tab extends LitElement {
     }));
   }
   internalTabChangeHandler(event) {
-    const targetTabsEl = event.composedPath().find((el) => el.tagName === "CALCITE-TABS");
+    const targetTabsEl = event.composedPath().find(isTabs);
     if (targetTabsEl !== this.parentTabsEl) {
       return;
     }