@esri/calcite-components 5.2.0-next.50 → 5.2.0-next.51

package/dist/components/calcite-radio-button-group/customElement.d.ts

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Layout, Scale, Status } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Layout, Scale, Status } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 import type { RadioButton } from "../calcite-radio-button/customElement.js";
 
 /**

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

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale, Status } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Scale, Status } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 
 /**
  * @cssproperty [--calcite-rating-spacing] - Specifies the amount of left and right margin spacing between each item.

package/dist/components/calcite-segmented-control/customElement.d.ts

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Appearance, Layout, Scale, Status, Width } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Appearance, Layout, Scale, Status, Width } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 import type { SegmentedControlItem } from "../calcite-segmented-control-item/customElement.js";
 
 /**

package/dist/components/calcite-segmented-control-item/customElement.d.ts

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

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

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale, Status, Width } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Scale, Status, Width } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 import type { Option } from "../calcite-option/customElement.js";
 
 /**

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

@@ -1,8 +1,8 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Height, LogicalFlowPosition, Scale, Width } from "../interfaces.js";
+import type { Height, LogicalFlowPosition, Scale, Width } from "../types.js";
 import type { FocusTrapOptions } from "../../controllers/useFocusTrap.js";
-import type { DisplayMode } from "./interfaces.js";
+import type { DisplayMode } from "./types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 /**

package/dist/components/calcite-shell-panel/customElement.d.ts

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Height, Layout, Position, Scale, Width } from "../interfaces.js";
-import type { DisplayMode } from "./interfaces.js";
+import type { Height, Layout, Position, Scale, Width } from "../types.js";
+import type { DisplayMode } from "./types.js";
 
 /**
  * @cssproperty [--calcite-shell-panel-background-color] - Specifies the component's background color.

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

@@ -1,9 +1,9 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { NumberingSystem } from "../../utils/locale.js";
-import type { ColorStop, DataSeries } from "../calcite-graph/interfaces.js";
-import type { Scale, Status } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { ColorStop, DataSeries } from "../calcite-graph/types.js";
+import type { Scale, Status } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 
 /**
  * @cssproperty [--calcite-slider-text-color] - Specifies the component's text color.
@@ -50,7 +50,7 @@ export abstract class Slider extends LitElement {
   /**
    * Specifies a list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track.
    *
-   * @see [DataSeries](https://github.com/Esri/calcite-design-system/blob/dev/packages/components/src/components/graph/interfaces.ts#L5).
+   * @see [DataSeries](https://github.com/Esri/calcite-design-system/blob/dev/packages/components/src/components/graph/types.ts#L5).
    */
   accessor histogram: DataSeries | undefined;
   /** Specifies a list of single color stops for a histogram, sorted by offset in ascending order. */

package/dist/components/calcite-sort-handle/customElement.d.ts

@@ -1,8 +1,8 @@
 /// <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 { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
-import type { MoveEventDetail, SortMenuItem, ReorderEventDetail, AddEventDetail } from "./interfaces.js";
+import type { MoveEventDetail, SortMenuItem, ReorderEventDetail, AddEventDetail } from "./types.js";
 
 export abstract class SortHandle extends LitElement {
   /** Defines the "Add to" items. */

package/dist/components/calcite-sortable-list/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Layout } from "../interfaces.js";
+import type { Layout } from "../types.js";
 import type { DragDetail } from "../../controllers/useSortable.js";
 
 /**

package/dist/components/calcite-split-button/customElement.d.ts

@@ -1,9 +1,9 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
-import type { DropdownIconType } from "../calcite-button/interfaces.js";
-import type { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { DropdownIconType } from "../calcite-button/types.js";
+import type { Appearance, FlipContext, Kind, Scale, Width } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 
 /**
  * @cssproperty [--calcite-split-button-background-color] - Specifies the component's background color.

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.

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

@@ -7,7 +7,7 @@ import { d as focusElementInGroup, a as slotChangeGetAssignedElements } from "..
 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/resources13.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.js

@@ -9,7 +9,8 @@ import { i as isHidden } from "../../chunks/component.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.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/resources13.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

@@ -9,34 +9,8 @@ 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 { 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/resources14.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";
 
 /**

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

@@ -6,6 +6,7 @@ import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { d as focusElementInGroup, a 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/resources14.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);
@@ -41,25 +42,33 @@ class SwatchGroup extends LitElement {
       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.

package/dist/components/calcite-tab-nav/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { TabPosition } from "../calcite-tabs/interfaces.js";
+import type { TabPosition } from "../calcite-tabs/types.js";
 import type { TabTitle } from "../calcite-tab-title/customElement.js";
 
 /**

package/dist/components/calcite-tab-title/customElement.d.ts

@@ -1,8 +1,8 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { FlipContext } from "../interfaces.js";
-import type { TabPosition } from "../calcite-tabs/interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { FlipContext } from "../types.js";
+import type { TabPosition } from "../calcite-tabs/types.js";
+import type { IconName } from "../calcite-icon/types.js";
 
 /**
  * Tab-titles are optionally individually closable.

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

@@ -1,9 +1,9 @@
 /// <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 { NumberingSystem } from "../../utils/locale.js";
 import type { TableRow } from "../calcite-table-row/customElement.js";
-import type { TableInteractionMode, TableLayout, TableSelectionDisplay } from "./interfaces.js";
+import type { TableInteractionMode, TableLayout, TableSelectionDisplay } from "./types.js";
 
 /**
  * @cssproperty [--calcite-table-border-color] - Specifies the component's border color.

package/dist/components/calcite-table-cell/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Alignment } from "../interfaces.js";
+import type { Alignment } from "../types.js";
 
 /**
  * @cssproperty [--calcite-table-cell-background] - [Deprecated] in v3.3.0, removal target v6.0.0 - Use `--calcite-table-cell-background-color` instead. Specifies the component's background color.

package/dist/components/calcite-table-header/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Alignment } from "../interfaces.js";
+import type { Alignment } from "../types.js";
 
 /**
  * @cssproperty [--calcite-table-header-background] - [Deprecated] in v3.3.0, removal target v6.0.0 - Use `--calcite-table-header-background-color` instead. Specifies the component's background color.

package/dist/components/calcite-table-row/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Alignment } from "../interfaces.js";
+import type { Alignment } from "../types.js";
 
 /**
  * @cssproperty [--calcite-table-row-background] - [Deprecated] in v3.3.0, removal target v6.0.0 - Use `--calcite-table-row-background-color` instead. Specifies the background color of the component.

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

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

package/dist/components/calcite-text-area/customElement.d.ts

@@ -1,8 +1,8 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { NumberingSystem } from "../../utils/locale.js";
-import type { Status } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Status } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 
 /**
  * @cssproperty [--calcite-text-area-background-color] - Specifies the component's background color.

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

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Alignment, Scale } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Alignment, Scale } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 import type { HeadingLevel } from "../functional/Heading.js";
 
 /**

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

@@ -7,6 +7,7 @@ import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { H as Heading } from "../../chunks/Heading.js";
+import { i as isActivationKey } from "../../chunks/key.js";
 const CSS = {
   container: "container",
   contentContainer: "content-container",
@@ -52,7 +53,6 @@ class Tile extends LitElement {
     this.selected = false;
     this.selectionAppearance = "icon";
     this.selectionMode = "none";
-    this.calciteInternalTileKeyEvent = createEvent({ cancelable: false });
     this.calciteTileSelect = createEvent();
     this.listen("keydown", this.keyDownHandler);
   }
@@ -85,23 +85,9 @@ class Tile extends LitElement {
     this.containerEl = el;
   }
   keyDownHandler(event) {
-    if (event.target === this.el) {
-      switch (event.key) {
-        case " ":
-        case "Enter":
-          this.handleSelectEvent();
-          event.preventDefault();
-          break;
-        case "ArrowDown":
-        case "ArrowLeft":
-        case "ArrowRight":
-        case "ArrowUp":
-        case "Home":
-        case "End":
-          this.calciteInternalTileKeyEvent.emit(event);
-          event.preventDefault();
-          break;
-      }
+    if (event.target === this.el && isActivationKey(event.key)) {
+      this.handleSelectEvent();
+      event.preventDefault();
     }
   }
   renderSelectionIcon() {

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

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Alignment, Layout, Scale, SelectionAppearance, SelectionMode } from "../interfaces.js";
+import type { Alignment, Layout, Scale, SelectionAppearance, SelectionMode } from "../types.js";
 import type { Tile } from "../calcite-tile/customElement.js";
 
 /** @slot  - A slot for adding `calcite-tile` elements. */