@esri/calcite-components 5.2.0-next.4 → 5.2.0-next.40

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

@@ -5,11 +5,12 @@ import { css, html, nothing } from "lit";
 import { LitElement, createEvent, stringOrBoolean, setAttribute, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { g as guid } from "../../chunks/guid.js";
-import { j as isPrimaryPointerButton, z as intersects } from "../../chunks/dom.js";
+import { k as isPrimaryPointerButton, A as intersects } from "../../chunks/dom.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { i as isActivationKey } from "../../chunks/key.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { n as numberStringFormatter, B as BigDecimal } from "../../chunks/locale.js";
 import { d as decimalPlaces, c as clamp } from "../../chunks/math.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -131,6 +132,7 @@ class Slider extends LitElement {
     this.trackRef = createRef();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
+    this.labelable = useLabel(this);
     this._value = defaultValue;
     this.activeProp = "value";
     this.tickValues = [];
@@ -156,7 +158,7 @@ class Slider extends LitElement {
     this.listen("touchstart", this.handleTouchStart);
   }
   static {
-    this.properties = { activeProp: [16, {}, { state: true }], maxValueDragRange: [16, {}, { state: true }], minMaxValueRange: [16, {}, { state: true }], minValueDragRange: [16, {}, { state: true }], tickValues: [16, {}, { state: true }], disabled: [7, {}, { reflect: true, type: Boolean }], fillPlacement: [3, {}, { reflect: true }], form: [3, {}, { reflect: true }], groupSeparator: [7, {}, { reflect: true, type: Boolean }], hasHistogram: [7, {}, { reflect: true, type: Boolean }], histogram: [0, {}, { attribute: false }], histogramStops: [0, {}, { attribute: false }], labelFormatter: [0, {}, { attribute: false }], labelHandles: [7, {}, { reflect: true, type: Boolean }], labelTicks: [7, {}, { reflect: true, type: Boolean }], max: [11, {}, { reflect: true, type: Number }], maxLabel: 1, maxValue: [9, {}, { type: Number }], min: [11, {}, { reflect: true, type: Number }], minLabel: 1, labelText: 1, messageOverrides: [0, {}, { attribute: false }], minValue: [9, {}, { type: Number }], mirrored: [7, {}, { reflect: true, type: Boolean }], name: [3, {}, { reflect: true }], numberingSystem: 1, pageStep: [11, {}, { reflect: true, type: Number }], precise: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], snap: [7, {}, { reflect: true, type: Boolean }], status: [3, {}, { reflect: true }], step: [11, {}, { reflect: true, type: Number }], ticks: [11, {}, { reflect: true, type: Number }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: [11, {}, { reflect: true, type: Number }] };
+    this.properties = { activeProp: [16, {}, { state: true }], maxValueDragRange: [16, {}, { state: true }], minMaxValueRange: [16, {}, { state: true }], minValueDragRange: [16, {}, { state: true }], tickValues: [16, {}, { state: true }], disabled: [7, {}, { reflect: true, type: Boolean }], fillPlacement: [3, {}, { reflect: true }], form: [3, {}, { reflect: true }], groupSeparator: [7, {}, { reflect: true, type: Boolean }], hasHistogram: [7, {}, { reflect: true, type: Boolean }], histogram: [0, {}, { attribute: false }], histogramStops: [0, {}, { attribute: false }], label: 1, labelFormatter: [0, {}, { attribute: false }], labelHandles: [7, {}, { reflect: true, type: Boolean }], labelTicks: [7, {}, { reflect: true, type: Boolean }], max: [11, {}, { reflect: true, type: Number }], maxLabel: 1, maxValue: [9, {}, { type: Number }], min: [11, {}, { reflect: true, type: Number }], minLabel: 1, labelText: 1, messageOverrides: [0, {}, { attribute: false }], minValue: [9, {}, { type: Number }], mirrored: [7, {}, { reflect: true, type: Boolean }], name: [3, {}, { reflect: true }], numberingSystem: 1, pageStep: [11, {}, { reflect: true, type: Number }], precise: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], snap: [7, {}, { reflect: true, type: Boolean }], status: [3, {}, { reflect: true }], step: [11, {}, { reflect: true, type: Number }], ticks: [11, {}, { reflect: true, type: Number }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: [11, {}, { reflect: true, type: Number }] };
   }
   static {
     this.formAssociated = true;
@@ -191,7 +193,6 @@ class Slider extends LitElement {
     super.connectedCallback();
     this.setMinMaxFromValue();
     this.setValueFromMinMax();
-    connectLabel(this);
     this.previousEmittedValue = this.value;
   }
   load() {
@@ -225,7 +226,6 @@ class Slider extends LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    disconnectLabel(this);
     this.removeDragListeners();
   }
   setInitialValue() {
@@ -625,10 +625,13 @@ class Slider extends LitElement {
     const maxInterval = this.getUnitInterval(value) * 100;
     const mirror = this.shouldMirror();
     const valueIsRange = isRange(this.value);
+    const containerAriaLabel = getLabelText(this);
+    const useGroupRole = valueIsRange && !!containerAriaLabel;
     const thumbTypes = this.buildThumbType("max");
     const thumb = this.renderThumb({
       type: thumbTypes,
       thumbPlacement: thumbTypes.includes("histogram") ? "below" : "above",
+      labelFallback: containerAriaLabel,
       maxInterval,
       minInterval,
       mirror
@@ -637,6 +640,7 @@ class Slider extends LitElement {
     const minThumb = valueIsRange ? this.renderThumb({
       type: minThumbTypes,
       thumbPlacement: minThumbTypes.includes("histogram") || minThumbTypes.includes("precise") ? "below" : "above",
+      labelFallback: containerAriaLabel,
       maxInterval,
       minInterval,
       mirror
@@ -656,11 +660,11 @@ class Slider extends LitElement {
       }
     );
     setAttribute(this.el, "id", id);
-    return this.interactiveContainer({ disabled: this.disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} .ariaRequired=${this.required} class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${containerAriaLabel} .ariaRequired=${this.required} class=${safeClassMap({
       [CSS.container]: true,
       [CSS.containerRange]: valueIsRange,
       [CSS.scale(this.scale)]: true
-    })}>${this.renderGraph()}<div class=${safeClassMap(CSS.track)} ${ref(this.trackRef)}><div class=${safeClassMap(CSS.trackRange)} @pointerdown=${this.onTrackPointerDown} style=${safeStyleMap(trackRangePlacementStyles)}></div><div class=${safeClassMap(CSS.ticks)}>${this.tickValues.map((tick) => {
+    })} .role=${useGroupRole ? "group" : void 0}>${this.renderGraph()}<div class=${safeClassMap(CSS.track)} ${ref(this.trackRef)}><div class=${safeClassMap(CSS.trackRange)} @pointerdown=${this.onTrackPointerDown} style=${safeStyleMap(trackRangePlacementStyles)}></div><div class=${safeClassMap(CSS.ticks)}>${this.tickValues.map((tick) => {
       const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
       let activeTicks = false;
       if (fillPlacement === "start" || fillPlacement === "end") {
@@ -681,14 +685,14 @@ class Slider extends LitElement {
       })}>${this.renderTickLabel(tick)}</span>`;
     })}</div></div><div class=${safeClassMap(CSS.thumbContainer)}>${minThumb}${thumb}</div></div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
-  renderThumb({ type, mirror, thumbPlacement, minInterval, maxInterval }) {
+  renderThumb({ type, mirror, thumbPlacement, minInterval, maxInterval, labelFallback }) {
     const isLabeled = type.includes("labeled");
     const isPrecise = type.includes("precise");
     const isMinThumb = type.includes("min");
     const valueIsRange = isRange(this.value);
     const value = isMinThumb ? this.minValue : valueIsRange ? this.maxValue : this.value;
     const valueProp = isMinThumb ? "minValue" : valueIsRange ? "maxValue" : "value";
-    const ariaLabel = isMinThumb ? this.minLabel : valueIsRange ? this.maxLabel : this.minLabel;
+    const ariaLabel = isMinThumb ? this.minLabel || labelFallback : valueIsRange ? this.maxLabel || labelFallback : this.minLabel || labelFallback;
     const ariaValuenow = isMinThumb ? this.minValue : value;
     const displayedValue = valueProp === "minValue" ? this.internalLabelFormatter(this.minValue, "min") : valueProp === "maxValue" ? this.internalLabelFormatter(this.maxValue, "max") : this.internalLabelFormatter(value, "value");
     const thumbStyle = isMinThumb ? { left: `${mirror ? 100 - minInterval : minInterval}%` } : { right: `${mirror ? maxInterval : 100 - maxInterval}%` };

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

@@ -14,20 +14,24 @@ export abstract class SortHandle extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
-  accessor flipPlacements: FlipPlacement[];
+  accessor flipPlacements: FlipPlacement[] | undefined;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
-  /** Overrides individual strings used by the component. */
+  accessor label: string | undefined;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      reorder?: string;
-      addTo?: string;
-      moveTo?: string;
-      moveToTop?: string;
-      moveToBottom?: string;
-      moveUp?: string;
-      moveDown?: string;
-      repositionLabel?: string;
-      reposition?: string;
+      reorder?: string | undefined;
+      addTo?: string | undefined;
+      moveTo?: string | undefined;
+      moveToTop?: string | undefined;
+      moveToBottom?: string | undefined;
+      moveUp?: string | undefined;
+      moveDown?: string | undefined;
+      repositionLabel?: string | undefined;
+      reposition?: string | undefined;
   };
   /** Defines the "Move to" items. */
   accessor moveToItems: SortMenuItem[];
@@ -38,11 +42,11 @@ export abstract class SortHandle extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */
@@ -60,9 +64,9 @@ export abstract class SortHandle extends LitElement {
    */
   accessor scale: Scale;
   /** Specifies the handle's current position. */
-  accessor setPosition: number;
+  accessor setPosition: number | undefined;
   /** Specifies the total number of sortable items. */
-  accessor setSize: number;
+  accessor setSize: number | undefined;
   /**
    * When `true`, prevents sorting of items.
    *
@@ -77,7 +81,7 @@ export abstract class SortHandle extends LitElement {
    */
   accessor topLayerDisabled: boolean;
   /** Specifies the width of the component. */
-  accessor widthScale: Scale;
+  accessor widthScale: Scale | undefined;
   /**
    * Sets focus on the component.
    *

package/dist/components/calcite-sort-handle/customElement.js

@@ -95,11 +95,11 @@ class SortHandle extends LitElement {
     return this.setPosition === 1;
   }
   get isDownReorderDisabled() {
-    return this.setPosition === this.setSize;
+    return this.hasSetInfo && this.setPosition === this.setSize;
   }
   get isBottomReorderDisabled() {
     const { setPosition, setSize } = this;
-    return setPosition === setSize || setPosition === setSize - 1;
+    return this.hasSetInfo && (setPosition === setSize || setPosition === setSize - 1);
   }
   async setFocus(options) {
     return this.focusSetter(() => this.dropdownEl, options);

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

@@ -9,9 +9,9 @@ import type { DragDetail } from "../../controllers/useSortable.js";
  */
 export abstract class SortableList extends LitElement {
   /** When provided, the method will be called to determine whether the element can move from the list. */
-  accessor canPull: (detail: DragDetail) => boolean;
+  accessor canPull: ((detail: DragDetail) => boolean) | undefined;
   /** When provided, the method will be called to determine whether the element can be added from another list. */
-  accessor canPut: (detail: DragDetail) => boolean;
+  accessor canPut: ((detail: DragDetail) => boolean) | undefined;
   /**
    * When `true`, disabled prevents interaction. This state shows items with lower opacity/grayed.
    *

package/dist/components/calcite-sortable-list/customElement.js

@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { c as createObserver } from "../../chunks/observers.js";
-import { i as focusElement } from "../../chunks/dom.js";
+import { j as focusElement } from "../../chunks/dom.js";
 import { l as logger } from "../../chunks/logger.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useSortable } from "../../chunks/useSortable.js";
@@ -74,10 +74,10 @@ class SortableList extends LitElement {
     const { direction } = event.detail;
     const handle = event.composedPath().find((el) => el.matches(this.handleSelector));
     const sortItem = this.items.find((item) => {
-      return item.contains(handle) || event.composedPath().includes(item);
+      return handle && item.contains(handle) || event.composedPath().includes(item);
     });
     const lastIndex = this.items.length - 1;
-    const startingIndex = this.items.indexOf(sortItem);
+    const startingIndex = sortItem ? this.items.indexOf(sortItem) : -1;
     let appendInstead = false;
     let buddyIndex;
     if (direction === "up") {
@@ -104,7 +104,7 @@ class SortableList extends LitElement {
     this.items = Array.from(this.el.children);
     this.beginObserving();
     requestAnimationFrame(() => focusElement(handle));
-    if ("selected" in handle) {
+    if (handle && "selected" in handle) {
       handle.selected = true;
     }
   }

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

@@ -70,11 +70,11 @@ export abstract class SplitButton extends LitElement {
    */
   accessor loading: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */
@@ -121,7 +121,9 @@ export abstract class SplitButton extends LitElement {
    */
   accessor topLayerDisabled: boolean;
   /**
-   * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
+   * Specifies the width of the component.
+   *
+   * [Deprecated] The `"half"` value is deprecated in v3.0.0, removal target v6.0.0 - use `"full"` instead.
    *
    * @default "auto"
    */

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

@@ -40,7 +40,7 @@ class SplitButton extends LitElement {
     this.calciteSplitButtonSecondaryClick = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { active: [7, {}, { reflect: true, type: Boolean }], appearance: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], download: [3, { converter: stringOrBoolean }, { reflect: true }], dropdownIconType: [3, {}, { reflect: true }], dropdownLabel: [3, {}, { reflect: true }], flipPlacements: [0, {}, { attribute: false }], href: [3, {}, { reflect: true }], kind: [3, {}, { reflect: true }], loading: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], rel: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], primaryIconEnd: [3, { type: String }, { reflect: true }], primaryIconFlipRtl: [3, {}, { reflect: true }], primaryIconStart: [3, { type: String }, { reflect: true }], primaryLabel: [3, {}, { reflect: true }], primaryText: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], target: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], width: [3, {}, { reflect: true }] };
+    this.properties = { active: [7, {}, { reflect: true, type: Boolean }], appearance: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], download: [3, { converter: stringOrBoolean }, { reflect: true }], dropdownIconType: [3, {}, { reflect: true }], dropdownLabel: [3, {}, { reflect: true }], flipPlacements: [0, {}, { attribute: false }], href: [3, {}, { reflect: true }], kind: [3, {}, { reflect: true }], loading: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], rel: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], primaryIconEnd: [3, {}, { reflect: true }], primaryIconFlipRtl: [3, {}, { reflect: true }], primaryIconStart: [3, {}, { reflect: true }], primaryLabel: [3, {}, { reflect: true }], primaryText: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], target: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], width: [3, {}, { reflect: true }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };

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

@@ -26,11 +26,15 @@ export abstract class Stepper extends LitElement {
    * @default "horizontal"
    */
   accessor layout: StepperLayout;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      label?: string;
-      previousStep?: string;
-      nextStep?: string;
+      label?: string | undefined;
+      previousStep?: string | undefined;
+      nextStep?: string | undefined;
   };
   /**
    * When `true`, displays the step number in the `calcite-stepper-item` heading.

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

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

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

@@ -7,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 { m as slotChangeHasContent } from "../../chunks/dom.js";
+import { n 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";
 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}`;

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

@@ -29,15 +29,12 @@ export abstract class SwatchGroup extends LitElement {
   /** Specifies the component's selected items. */
   get selectedItems(): Swatch[];
   /**
-   * Specifies the selection mode of the component, where:
+   * Specifies the selection mode of the component.
    *
-   * `"multiple"` allows any number of selections,
-   *
-   * `"single"` allows only one selection,
-   *
-   * `"single-persist"` allows one selection and prevents de-selection, and
-   *
-   * `"none"` does not allow any selections.
+   * - `"multiple"` allows any number of selections.
+   * - `"single"` allows only one selection.
+   * - `"single-persist"` allows one selection and prevents de-selection.
+   * - `"none"` does not allow any selections.
    *
    * @default "none"
    */

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

@@ -32,14 +32,31 @@ export abstract class Switch extends LitElement {
   accessor labelTextEnd: string | undefined;
   /** Specifies the component's start label text. */
   accessor labelTextStart: string | undefined;
-  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
+  /**
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
+   */
   accessor name: string | undefined;
+  /**
+   * When `true` and the component resides in a form,
+   * the component must have a value in order for the form to submit.
+   *
+   * @default false
+   */
+  accessor required: boolean;
   /**
    * Specifies the component's size.
    *
    * @default "m"
    */
   accessor scale: Scale;
+  /**
+   * The component's current validation state.
+   *
+   * @see [MDN - ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
+   */
+  get validity(): ValidityState;
   /** The component's value. */
   accessor value: any;
   /**

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

@@ -4,7 +4,8 @@ import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { i as isActivationKey } from "../../chunks/key.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
@@ -24,15 +25,17 @@ class Switch extends LitElement {
     this.switchRef = createRef();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
+    this.labelable = useLabel(this);
     this.checked = false;
     this.disabled = false;
+    this.required = false;
     this.scale = "m";
     this.calciteSwitchChange = createEvent({ cancelable: false });
     this.listen("click", this.clickHandler);
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { checked: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], label: 1, labelTextEnd: 1, labelTextStart: 1, name: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], value: 1 };
+    this.properties = { checked: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], label: 1, labelTextEnd: 1, labelTextStart: 1, name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
   }
   static {
     this.formAssociated = true;
@@ -43,14 +46,6 @@ class Switch extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.switchRef.value, options);
   }
-  connectedCallback() {
-    super.connectedCallback();
-    connectLabel(this);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    disconnectLabel(this);
-  }
   keyDownHandler(event) {
     if (!this.disabled && isActivationKey(event.key)) {
       this.toggle();

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

@@ -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 { n as nodeListToArray } from "../../chunks/dom.js";
+import { o 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.d.ts

@@ -10,10 +10,14 @@ import type { TabTitle } from "../calcite-tab-title/customElement.js";
  * @slot  - A slot for adding `calcite-tab-title`s.
  */
 export abstract class TabNav extends LitElement {
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      nextTabTitles?: string;
-      previousTabTitles?: string;
+      nextTabTitles?: string | undefined;
+      previousTabTitles?: string | undefined;
   };
   /**
    * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`.