@esri/calcite-components 5.1.0-next.2 → 5.1.0-next.20

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

@@ -3,11 +3,10 @@ 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, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { f as focusElementInGroup, a 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 isHidden } from "../../chunks/component.js";
 const CSS$1 = {
   actionIcon: "action-icon",
   actionContainer: "action-container",
@@ -39,14 +38,14 @@ const StepBar = ({ disabled, active, complete, error }) => html`<svg class=${saf
   [CSS.stepBarError]: error,
   [CSS.stepBarInActive]: true
 })} width=100% x=0 y=0 />`}</svg>`;
-const styles = css`:host([scale=s]){--calcite-internal-stepper-item-spacing-unit-s: .25rem;--calcite-internal-stepper-action-block-size: 2.75rem;--calcite-internal-stepper-action-inline-size: 2rem;--calcite-internal-step-bar-gap: .25rem}:host([scale=m]){--calcite-internal-stepper-item-spacing-unit-s: .5rem;--calcite-internal-stepper-action-block-size: 3.25rem;--calcite-internal-stepper-action-inline-size: 2.5rem}:host([scale=l]){--calcite-internal-stepper-item-spacing-unit-s: .75rem;--calcite-internal-stepper-action-block-size: 4rem;--calcite-internal-stepper-action-inline-size: 3rem;--calcite-internal-step-bar-gap: .75rem}:host{display:flex}.container{position:relative;display:flex;inline-size:100%;min-inline-size:fit-content;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:space-between}:host([layout=vertical]) .container{flex:1 1 auto;flex-direction:column}:host([layout=horizontal]) .container,:host([layout=horizontal-single]) .container{display:grid;grid-template-areas:"items" "content";gap:.5rem var(--calcite-stepper-bar-gap, var(--calcite-internal-stepper-item-spacing-unit-s))}:host([layout=horizontal][scale=s]) .container,:host([layout=horizontal-single][scale=s]) .container{gap:.25rem var(--calcite-stepper-bar-gap, var(--calcite-internal-stepper-item-spacing-unit-s))}:host([layout=horizontal][scale=l]) .container,:host([layout=horizontal-single][scale=l]) .container{gap:.75rem var(--calcite-stepper-bar-gap, var(--calcite-internal-stepper-item-spacing-unit-s))}:host([layout=horizontal]) .container.single-view{display:flex;grid-template-columns:none}.action-icon{position:relative;display:flex;flex-grow:0;block-size:var(--calcite-internal-stepper-action-block-size);inline-size:var(--calcite-internal-stepper-action-inline-size)}.action-container{position:absolute;display:flex;justify-content:space-between;padding-block:.25rem;inline-size:100%}.step-bar{display:flex;block-size:100%;inline-size:100%}.step-bar-container{position:absolute;display:flex;align-items:flex-start;justify-content:space-between;block-size:.125rem;inline-size:100%;gap:var(--calcite-stepper-bar-gap, var(--calcite-internal-step-bar-gap, .5rem))}.step-bar--inactive{fill:var(--calcite-stepper-bar-inactive-fill-color, var(--calcite-color-border-3, #dfdfdf));fill-opacity:1;block-size:100%}.step-bar--active{fill:var(--calcite-stepper-bar-active-fill-color, var(--calcite-color-brand))}.step-bar--complete{fill:var(--calcite-stepper-bar-complete-fill-color, var(--calcite-color-brand));fill-opacity:.5}.step-bar--error{fill:var(--calcite-stepper-bar-error-fill-color, var(--calcite-color-status-danger))}.step-bar--disabled{opacity:.5}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([scale=s]){--calcite-internal-stepper-item-spacing-unit-s: .25rem;--calcite-internal-stepper-action-block-size: 2.75rem;--calcite-internal-stepper-action-inline-size: 2rem;--calcite-internal-step-bar-gap: .25rem}:host([scale=m]){--calcite-internal-stepper-item-spacing-unit-s: .5rem;--calcite-internal-stepper-action-block-size: 3.25rem;--calcite-internal-stepper-action-inline-size: 2.5rem}:host([scale=l]){--calcite-internal-stepper-item-spacing-unit-s: .75rem;--calcite-internal-stepper-action-block-size: 4rem;--calcite-internal-stepper-action-inline-size: 3rem;--calcite-internal-step-bar-gap: .75rem}:host{display:flex}.container{position:relative;display:flex;inline-size:100%;min-inline-size:fit-content;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:space-between}:host([layout=vertical]) .container{flex:1 1 auto;flex-direction:column}:host([layout=horizontal]) .container,:host([layout=horizontal-single]) .container{display:grid;grid-template-areas:"items" "content";gap:.5rem var(--calcite-stepper-bar-gap, var(--calcite-internal-stepper-item-spacing-unit-s));grid-template-rows:auto 1fr}:host([layout=horizontal][scale=s]) .container,:host([layout=horizontal-single][scale=s]) .container{gap:.25rem var(--calcite-stepper-bar-gap, var(--calcite-internal-stepper-item-spacing-unit-s))}:host([layout=horizontal][scale=l]) .container,:host([layout=horizontal-single][scale=l]) .container{gap:.75rem var(--calcite-stepper-bar-gap, var(--calcite-internal-stepper-item-spacing-unit-s))}:host([layout=horizontal]) .container.single-view{display:flex;grid-template-columns:none}.action-icon{position:relative;display:flex;flex-grow:0;block-size:var(--calcite-internal-stepper-action-block-size);inline-size:var(--calcite-internal-stepper-action-inline-size)}.action-container{position:absolute;display:flex;justify-content:space-between;padding-block:.25rem;inline-size:100%}.step-bar{display:flex;block-size:100%;inline-size:100%}.step-bar-container{position:absolute;display:flex;align-items:flex-start;justify-content:space-between;block-size:.125rem;inline-size:100%;gap:var(--calcite-stepper-bar-gap, var(--calcite-internal-step-bar-gap, .5rem))}.step-bar--inactive{fill:var(--calcite-stepper-bar-inactive-fill-color, var(--calcite-color-border-3, #dfdfdf));fill-opacity:1;block-size:100%}.step-bar--active{fill:var(--calcite-stepper-bar-active-fill-color, var(--calcite-color-brand))}.step-bar--complete{fill:var(--calcite-stepper-bar-complete-fill-color, var(--calcite-color-brand));fill-opacity:.5}.step-bar--error{fill:var(--calcite-stepper-bar-error-fill-color, var(--calcite-color-status-danger))}.step-bar--disabled{opacity:.5}:host([hidden]){display:none}[hidden]{display:none}`;
 class Stepper extends LitElement {
   constructor() {
     super();
     this.containerRef = createRef();
-    this.enabledItems = [];
+    this.visibleItems = [];
+    this.focusableItems = [];
     this.guid = guid();
-    this.itemMap = /* @__PURE__ */ new Map();
     this.items = [];
     this.multipleViewMode = false;
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
@@ -61,7 +60,10 @@ class Stepper extends LitElement {
     });
     this.calciteStepperChange = createEvent({ cancelable: false });
     this.listen("calciteInternalStepperItemKeyEvent", this.calciteInternalStepperItemKeyEvent);
-    this.listen("calciteInternalStepperItemRegister", this.registerItem);
+    this.listen("calciteInternalStepperItemUpdate", (event) => {
+      event.stopPropagation();
+      this.updateItems();
+    });
     this.listen("calciteInternalStepperItemSelect", this.updateItem);
     this.listen("calciteStepperItemSelect", this.handleItemSelect);
   }
@@ -72,7 +74,7 @@ class Stepper extends LitElement {
     this.styles = styles;
   }
   async endStep() {
-    const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, "previous");
+    const enabledStepIndex = this.getEnabledStepIndex(this.visibleItems.length - 1, "previous");
     if (typeof enabledStepIndex !== "number") {
       return;
     }
@@ -111,12 +113,8 @@ class Stepper extends LitElement {
     this.updateItems();
   }
   willUpdate(changes) {
-    if (changes.has("icon") && (this.hasUpdated || this.icon !== false) || changes.has("layout") && (this.hasUpdated || this.layout !== "horizontal") || changes.has("numbered") && (this.hasUpdated || this.numbered !== false) || changes.has("scale") && (this.hasUpdated || this.scale !== "m")) {
+    if (changes.has("layout") && (this.hasUpdated || this.layout !== "horizontal") || changes.has("icon") && (this.hasUpdated || this.icon !== false) || changes.has("numbered") && (this.hasUpdated || this.numbered !== false) || changes.has("scale") && (this.hasUpdated || this.scale !== "m") || changes.has("numberingSystem") && (this.hasUpdated || this.numberingSystem !== void 0)) {
       this.updateItems();
-      this.determineActiveStepper();
-    }
-    if (changes.has("numberingSystem")) {
-      this.setStepperItemNumberingSystem();
     }
     if (changes.has("currentActivePosition")) {
       requestAnimationFrame(() => {
@@ -145,28 +143,21 @@ class Stepper extends LitElement {
     switch (item.key) {
       case "ArrowDown":
       case "ArrowRight":
-        focusElementInGroup(this.enabledItems, itemToFocus, "next");
+        focusElementInGroup(this.focusableItems, itemToFocus, "next");
         break;
       case "ArrowUp":
       case "ArrowLeft":
-        focusElementInGroup(this.enabledItems, itemToFocus, "previous");
+        focusElementInGroup(this.focusableItems, itemToFocus, "previous");
         break;
       case "Home":
-        focusElementInGroup(this.enabledItems, itemToFocus, "first");
+        focusElementInGroup(this.focusableItems, itemToFocus, "first");
         break;
       case "End":
-        focusElementInGroup(this.enabledItems, itemToFocus, "last");
+        focusElementInGroup(this.focusableItems, itemToFocus, "last");
         break;
     }
     event.stopPropagation();
   }
-  registerItem(event) {
-    const item = event.target;
-    const { content, position } = event.detail;
-    this.itemMap.set(item, { position, content });
-    this.enabledItems = this.filterItems();
-    event.stopPropagation();
-  }
   updateItem(event) {
     const { position } = event.detail;
     if (typeof position === "number") {
@@ -184,31 +175,35 @@ class Stepper extends LitElement {
     this.calciteStepperChange.emit();
   }
   updateItems() {
-    this.el.querySelectorAll("calcite-stepper-item").forEach((item) => {
+    this.visibleItems = this.items.filter((item) => !item.hidden);
+    this.determineActiveStepper();
+    this.focusableItems = this.visibleItems.filter((item) => !item.disabled && !item.itemHidden);
+    this.items.forEach((item) => {
       item.icon = this.icon;
       item.numbered = this.numbered;
       item.layout = this.layout;
       item.scale = this.scale;
+      item.numberingSystem = this.numberingSystem;
     });
   }
   determineActiveStepper() {
-    const { items } = this;
-    if (items.length < 2) {
+    const { visibleItems } = this;
+    if (visibleItems.length < 2) {
       return;
     }
     const { currentActivePosition, layout } = this;
     this.multipleViewMode = layout !== "horizontal-single";
-    items.forEach((item, index) => {
+    visibleItems.forEach((item, index) => {
       item.itemHidden = layout === "horizontal-single" && index !== (currentActivePosition || 0);
     });
   }
   getEnabledStepIndex(startIndex, direction = "next") {
-    const { items, currentActivePosition } = this;
+    const { visibleItems, currentActivePosition } = this;
     let newIndex = startIndex;
-    while (newIndex >= 0 && newIndex < items.length && items[newIndex]?.disabled) {
+    while (newIndex >= 0 && newIndex < visibleItems.length && visibleItems[newIndex]?.disabled) {
       newIndex = newIndex + (direction === "previous" ? -1 : 1);
     }
-    return newIndex !== currentActivePosition && newIndex < items.length && newIndex >= 0 ? newIndex : null;
+    return newIndex !== currentActivePosition && newIndex < visibleItems.length && newIndex >= 0 ? newIndex : null;
   }
   updateStep(position) {
     this.currentActivePosition = position;
@@ -216,14 +211,6 @@ class Stepper extends LitElement {
       position
     });
   }
-  filterItems() {
-    return this.items.filter((item) => !item.disabled && !isHidden(item));
-  }
-  setStepperItemNumberingSystem() {
-    this.items.forEach((item) => {
-      item.numberingSystem = this.numberingSystem;
-    });
-  }
   handleActionClick(event) {
     const currentActivePosition = this.currentActivePosition;
     const target = event.target;
@@ -232,29 +219,29 @@ class Stepper extends LitElement {
     } else {
       this.nextStep();
     }
-    if (typeof this.currentActivePosition === "number" && currentActivePosition !== this.currentActivePosition && !this.items[this.currentActivePosition].disabled) {
+    if (typeof this.currentActivePosition === "number" && currentActivePosition !== this.currentActivePosition && this.visibleItems[this.currentActivePosition] && !this.visibleItems[this.currentActivePosition].disabled) {
       this.emitItemSelect();
     }
   }
   getFirstEnabledStepperPosition() {
-    const enabledStepIndex = this.items.findIndex((item) => !item.disabled);
+    const enabledStepIndex = this.visibleItems.findIndex((item) => !item.disabled);
     if (enabledStepIndex > -1) {
       return enabledStepIndex;
     }
     return 0;
   }
   handleDefaultSlotChange(event) {
-    const items = slotChangeGetAssignedElements(event).filter((el) => el?.tagName === "CALCITE-STEPPER-ITEM" && !isHidden(el));
+    const items = slotChangeGetAssignedElements(event).filter((el) => el?.tagName === "CALCITE-STEPPER-ITEM");
     this.items = items;
-    const spacing = Array(items.length).fill("1fr").join(" ");
+    this.updateItems();
+    const spacing = Array(this.visibleItems.length).fill("1fr").join(" ");
     this.containerRef.value.style.gridTemplateAreas = spacing;
     this.containerRef.value.style.gridTemplateColumns = spacing;
-    this.setStepperItemNumberingSystem();
   }
   render() {
     this.el.ariaLabel = this.messages.label;
     this.el.role = "region";
-    return html`<div class=${safeClassMap({ container: true, [CSS$1.singleView]: this.layout === "horizontal-single" })} ${ref(this.containerRef)}>${this.layout === "horizontal-single" && html`<div class=${safeClassMap({ [CSS$1.stepBarContainer]: true })}>${this.items.map((item, index) => StepBar({ active: index === this.currentActivePosition, complete: item.complete && index !== this.currentActivePosition && !item.error, disabled: item.disabled && index !== this.currentActivePosition, error: item.error && index !== this.currentActivePosition }))}</div>` || ""}${this.layout === "horizontal-single" && html`<div class=${safeClassMap({ [CSS$1.actionContainer]: true })}>${this.renderAction("start")}${this.renderAction("end")}</div>` || ""}<slot @slotchange=${this.handleDefaultSlotChange}></slot></div>`;
+    return html`<div class=${safeClassMap({ container: true, [CSS$1.singleView]: this.layout === "horizontal-single" })} ${ref(this.containerRef)}>${this.layout === "horizontal-single" && html`<div class=${safeClassMap({ [CSS$1.stepBarContainer]: true })}>${this.visibleItems.map((item, index) => StepBar({ active: index === this.currentActivePosition, complete: item.complete && index !== this.currentActivePosition && !item.error, disabled: item.disabled && index !== this.currentActivePosition, error: item.error && index !== this.currentActivePosition }))}</div>` || ""}${this.layout === "horizontal-single" && html`<div class=${safeClassMap({ [CSS$1.actionContainer]: true })}>${this.renderAction("start")}${this.renderAction("end")}</div>` || ""}<slot @slotchange=${this.handleDefaultSlotChange}></slot></div>`;
   }
   renderAction(position) {
     const isPositionStart = position === "start";

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

@@ -7,7 +7,7 @@ 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 { n as slotChangeHasContent } from "../../chunks/dom.js";
+import { m as slotChangeHasContent } from "../../chunks/dom.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   container: "container",
@@ -27,7 +27,7 @@ const ICONS = {
   exclamationMarkCircleF: "exclamationMarkCircleF",
   checkCircleF: "checkCircleF"
 };
-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{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;box-sizing:border-box;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}`;
+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() {
     super();
@@ -47,7 +47,7 @@ class StepperItem extends LitElement {
     this.calciteInternalStepperItemKeyEvent = createEvent({
       cancelable: false
     });
-    this.calciteInternalStepperItemRegister = createEvent({ cancelable: false });
+    this.calciteInternalStepperItemUpdate = createEvent({ cancelable: false });
     this.calciteInternalStepperItemSelect = createEvent({ cancelable: false });
     this.calciteStepperItemSelect = createEvent({ cancelable: false });
     this.listenOn(document.body, "calciteInternalStepperItemChange", this.updateActiveItemOnChange);
@@ -66,7 +66,6 @@ class StepperItem extends LitElement {
   async load() {
     this.parentStepperEl = this.el.parentElement;
     this.itemPosition = this.getItemPosition();
-    this.registerStepperItem();
     if (this.selected) {
       this.emitRequestedItem();
     }
@@ -76,7 +75,7 @@ class StepperItem extends LitElement {
       this.selectedHandler();
     }
     if (changes.has("disabled") && (this.hasUpdated || this.disabled !== false)) {
-      this.registerStepperItem();
+      this.calciteInternalStepperItemUpdate.emit();
     }
     if (changes.has("messages")) {
       this.effectiveLocaleWatcher(this.messages._lang);
@@ -126,11 +125,6 @@ class StepperItem extends LitElement {
   determineSelectedItem() {
     this.selected = !this.disabled && this.itemPosition === this.selectedPosition;
   }
-  registerStepperItem() {
-    this.calciteInternalStepperItemRegister.emit({
-      position: this.itemPosition
-    });
-  }
   handleItemClick(event) {
     if (this.disabled || isHidden(this.el) || this.layout === "horizontal" && event.composedPath().some((el) => el.classList?.contains("stepper-item-content"))) {
       return;

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

@@ -3,7 +3,7 @@ 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, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { f 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";
 const CSS = {

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

@@ -5,11 +5,11 @@ import type { Scale } from "../interfaces.js";
 /**
  * @cssproperty [--calcite-switch-background-color] - Specifies the component's background color.
  * @cssproperty [--calcite-switch-background-color-hover] - Specifies the component's background color when hovered or pressed.
- * @cssproperty [--calcite-switch-border-color] - [Deprecated] No longer necessary. Specifies the component's border color.
+ * @cssproperty [--calcite-switch-border-color] - [Deprecated] in v3.2.0, removal target v6.0.0 - No longer necessary. Specifies the component's border color.
  * @cssproperty [--calcite-switch-corner-radius] - Specifies the component's corner radius.
  * @cssproperty [--calcite-switch-handle-background-color] - Specifies the handle's background color.
- * @cssproperty [--calcite-switch-handle-border-color] - [Deprecated] No longer necessary. Specifies the handle's border color.
- * @cssproperty [--calcite-switch-handle-shadow] - [Deprecated] No longer necessary. Specifies the handle's shadow.
+ * @cssproperty [--calcite-switch-handle-border-color] - [Deprecated] in v3.2.0, removal target v6.0.0 - No longer necessary. Specifies the handle's border color.
+ * @cssproperty [--calcite-switch-handle-shadow] - [Deprecated] in v3.2.0, removal target v6.0.0 - No longer necessary. Specifies the handle's shadow.
  */
 export abstract class Switch extends LitElement {
   /**

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

@@ -3,12 +3,12 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.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";
+import { u as useForm } from "../../chunks/useForm.js";
 const CSS = {
   container: "container",
   track: "track",
@@ -18,6 +18,9 @@ const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;use
 class Switch extends LitElement {
   constructor() {
     super();
+    this.formSupport = useForm({
+      inputType: "checkbox"
+    })(this);
     this.switchRef = createRef();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
@@ -31,6 +34,9 @@ class Switch extends LitElement {
   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 };
   }
+  static {
+    this.formAssociated = true;
+  }
   static {
     this.styles = styles;
   }
@@ -40,15 +46,10 @@ class Switch extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     connectLabel(this);
-    connectForm(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     disconnectLabel(this);
-    disconnectForm(this);
-  }
-  syncHiddenFormInput(input) {
-    input.type = "checkbox";
   }
   keyDownHandler(event) {
     if (!this.disabled && isActivationKey(event.key)) {
@@ -73,7 +74,7 @@ class Switch extends LitElement {
     this.toggle();
   }
   render() {
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.checked} .ariaLabel=${getLabelText(this)} class=${safeClassMap(CSS.container)} role=switch tabindex=0 ${ref(this.switchRef)}>${this.labelTextStart && InternalLabel({ alignmentCenter: true, bottomSpacingDisabled: true, labelText: this.labelTextStart, spacingInlineEnd: true }) || ""}<div class=${safeClassMap(CSS.track)}><div class=${safeClassMap(CSS.handle)}></div></div>${this.labelTextEnd && InternalLabel({ alignmentCenter: true, bottomSpacingDisabled: true, labelText: this.labelTextEnd, spacingInlineStart: true }) || ""}${HiddenFormInputSlot({ component: this })}</div>` });
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.checked} .ariaLabel=${getLabelText(this)} class=${safeClassMap(CSS.container)} role=switch tabindex=0 ${ref(this.switchRef)}>${this.labelTextStart && InternalLabel({ alignmentCenter: true, bottomSpacingDisabled: true, labelText: this.labelTextStart, spacingInlineEnd: true }) || ""}<div class=${safeClassMap(CSS.track)}><div class=${safeClassMap(CSS.handle)}></div></div>${this.labelTextEnd && InternalLabel({ alignmentCenter: true, bottomSpacingDisabled: true, labelText: this.labelTextEnd, spacingInlineStart: true }) || ""}</div>` });
   }
 }
 customElement("calcite-switch", Switch);

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

@@ -3,7 +3,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
 /**
  * @cssproperty [--calcite-tab-content-space-y] - Specifies the vertical space between the component's content in the `default` slot.
- * @cssproperty [--calcite-tab-content-block-padding] - [Deprecated] Use `--calcite-tab-content-space-y` instead. Specifies the block padding of the component's content in the `default` slot.
+ * @cssproperty [--calcite-tab-content-block-padding] - [Deprecated] in v3.2.0, removal target v6.0.0 - Use `--calcite-tab-content-space-y` instead. Specifies the block padding of the component's content in the `default` slot.
  * @slot  - A slot for adding custom content.
  */
 export abstract class Tab extends LitElement {

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

@@ -2,7 +2,7 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, setAttribute, safeClassMap } from "@arcgis/lumina";
-import { o as nodeListToArray } from "../../chunks/dom.js";
+import { n as nodeListToArray } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 const CSS = {
   container: "container",

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

@@ -5,7 +5,8 @@ import { keyed } from "lit/directives/keyed.js";
 import { a as calciteSize24, b as calciteSize32, d as calciteSize44 } from "../../chunks/core.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { g as getElementDir, A as filterDirectChildren, f as focusElementInGroup, j as focusElement } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
+import { B as filterDirectChildren, f as focusElementInGroup, i as focusElement } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const ICON = {
@@ -26,6 +27,7 @@ const styles = css`:host{position:relative;display:flex}:host([bordered]) .scrol
 class TabNav extends LitElement {
   constructor() {
     super();
+    this.direction = useDirection();
     this.effectiveDir = "ltr";
     this.lastScrollWheelAxis = "x";
     this.resizeObserver = createObserver("resize", () => {
@@ -82,7 +84,7 @@ class TabNav extends LitElement {
     const { parentTabsEl } = this;
     this.layout = parentTabsEl?.layout;
     this.bordered = parentTabsEl?.bordered;
-    this.effectiveDir = getElementDir(this.el);
+    this.effectiveDir = this.direction;
   }
   loaded() {
     this.scrollTabTitleIntoView(this.selectedTitle, "instant");

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

@@ -4,7 +4,8 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, isServer, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
-import { o as nodeListToArray, g as getElementDir } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
+import { n as nodeListToArray } from "../../chunks/dom.js";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { g as guid } from "../../chunks/guid.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
@@ -33,6 +34,7 @@ class TabTitle extends LitElement {
   constructor() {
     super();
     this.closeButtonRef = createRef();
+    this.direction = useDirection();
     this.guid = IDS.host(guid());
     this.mutationObserver = createObserver("mutation", () => this.updateHasText());
     this.resizeObserver = createObserver("resize", () => {
@@ -153,7 +155,7 @@ class TabTitle extends LitElement {
         break;
       case "ArrowRight":
         event.preventDefault();
-        if (getElementDir(this.el) === "ltr") {
+        if (this.direction === "ltr") {
           this.calciteInternalTabsFocusNext.emit();
         } else {
           this.calciteInternalTabsFocusPrevious.emit();
@@ -161,7 +163,7 @@ class TabTitle extends LitElement {
         break;
       case "ArrowLeft":
         event.preventDefault();
-        if (getElementDir(this.el) === "ltr") {
+        if (this.direction === "ltr") {
           this.calciteInternalTabsFocusPrevious.emit();
         } else {
           this.calciteInternalTabsFocusNext.emit();

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

@@ -3,7 +3,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Alignment } from "../interfaces.js";
 
 /**
- * @cssproperty [--calcite-table-cell-background] - [Deprecated] Use `--calcite-table-cell-background-color` instead. Specifies the component's background color.
+ * @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.
  * @cssproperty [--calcite-table-cell-background-color] - Specifies the component's background color.
  * @cssproperty [--calcite-table-cell-border-color] - Specifies the component's border color.
  * @cssproperty [--calcite-table-cell-text-color] - Specifies the component's text color.
@@ -11,7 +11,10 @@ import type { Alignment } from "../interfaces.js";
  */
 export abstract class TableCell extends LitElement {
   /**
-   * Specifies the alignment of the component.
+   * Specifies the horizontal alignment of content within the component, where:
+   * `"start"` positions content at the start of the component,
+   * `"center"` positions content in the middle of the component, and
+   * `"end"` positions content at the end of the component.
    *
    * @default "start"
    */

package/dist/components/calcite-table-cell/customElement.js

@@ -3,7 +3,7 @@ import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
-import { g as getElementDir } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
@@ -22,6 +22,7 @@ class TableCell extends LitElement {
   constructor() {
     super(...arguments);
     this.containerRef = createRef();
+    this.direction = useDirection();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
@@ -66,7 +67,7 @@ class TableCell extends LitElement {
     this.focused = true;
   }
   render() {
-    const dir = getElementDir(this.el);
+    const dir = this.direction;
     const staticCell = this.disabled || this.interactionMode === "static" && (!this.selectionCell || this.selectionCell && this.parentRowType === "foot");
     return this.interactiveContainer({ disabled: this.disabled, children: html`<td class=${safeClassMap({
       [CSS.footerCell]: this.parentRowType === "foot",

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

@@ -3,7 +3,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Alignment } from "../interfaces.js";
 
 /**
- * @cssproperty [--calcite-table-header-background] - [Deprecated] Use the `--calcite-table-header-background-color` property instead. Specifies the component's background color.
+ * @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.
  * @cssproperty [--calcite-table-header-background-color] - Specifies the component's background color.
  * @cssproperty [--calcite-table-header-border-color] - Specifies the component's border color.
  * @cssproperty [--calcite-table-header-heading-text-color] - Specifies the component's `heading` text color.

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

@@ -3,7 +3,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Alignment } from "../interfaces.js";
 
 /**
- * @cssproperty [--calcite-table-row-background] - [Deprecated] Use `--calcite-table-row-background-color` instead. Specifies the background color of the component.
+ * @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.
  * @cssproperty [--calcite-table-row-background-color] - Specifies the component's background color.
  * @cssproperty [--calcite-table-row-background-color-striped] - When `striped` is `true` on `calcite-table`, specifies the background color of the component's `striped` rows.
  * @cssproperty [--calcite-table-row-background-color-selected] - When `selected`, specifies the background color of the component's `selected` rows.
@@ -12,7 +12,12 @@ import type { Alignment } from "../interfaces.js";
  * @slot  - A slot for adding `calcite-table-cell` or `calcite-table-header` elements.
  */
 export abstract class TableRow extends LitElement {
-  /** Specifies the alignment of the component. */
+  /**
+   * Specifies the vertical alignment of content within child `calcite-table-cell`s, where:
+   * `"start"` positions content at the top of a `calcite-table-cell`,
+   * `"center"` positions content in the middle of a `calcite-table-cell`, and
+   * `"end"` positions content at the bottom of a `calcite-table-cell`.
+   */
   accessor alignment: Alignment;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.

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

@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { b as slotChangeGetAssignedElements, B as getSlotAssignedElements } from "../../chunks/dom.js";
+import { a as slotChangeGetAssignedElements, C as getSlotAssignedElements } from "../../chunks/dom.js";
 const CSS = {
   section: "section"
 };

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

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