@esri/calcite-components 5.1.0-next.3 → 5.1.0-next.31

package/dist/components/calcite-input-time-picker/customElement.d.ts

@@ -1,7 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
-import type { MutableValidityState } from "../../utils/form.js";
 import type { NumberingSystem } from "../../utils/locale.js";
 import type { HourFormat } from "../../utils/time.js";
 import type { Scale, Status } from "../interfaces.js";
@@ -65,7 +64,7 @@ export abstract class InputTimePicker extends LitElement {
    * When the component resides in a form,
    * specifies the maximum `value`.
    *
-   * @mdn [max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#max)
+   * @see [MDN - max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#max)
    */
   accessor max: string;
   /** Overrides individual strings used by the component. */
@@ -92,7 +91,7 @@ export abstract class InputTimePicker extends LitElement {
    * When the component resides in a form,
    * specifies the minimum `value`.
    *
-   * @mdn [min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#min)
+   * @see [MDN - min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#min)
    */
   accessor min: string;
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
@@ -125,7 +124,7 @@ export abstract class InputTimePicker extends LitElement {
    * When `true`, the component's `value` can be read, but controls are not accessible and the `value` cannot be modified.
    *
    * @default false
-   * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
+   * @see [MDN - readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
    */
   accessor readOnly: boolean;
   /**
@@ -160,9 +159,9 @@ export abstract class InputTimePicker extends LitElement {
   /**
    * The component's current validation state.
    *
-   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
+   * @see [MDN - ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
    */
-  get validity(): MutableValidityState;
+  get validity(): ValidityState;
   /** The time value in ISO (24-hour) format. */
   accessor value: string;
   /**
@@ -175,7 +174,7 @@ export abstract class InputTimePicker extends LitElement {
    * Sets focus on the component.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the component is requested to be closed and before the closing transition begins. */

package/dist/components/calcite-input-time-picker/customElement.js

@@ -3,19 +3,18 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { c as connectForm, d as disconnectForm, s as submitForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { d as decimalPlaces } from "../../chunks/math.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
-import { g as getElementDir } from "../../chunks/dom.js";
-import { s as syncHiddenFormInput } from "../../chunks/input.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { i as isValidNumber } from "../../chunks/locale.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useTime } from "../../chunks/useTime.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { u as useForm } from "../../chunks/useForm.js";
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}calcite-time-picker{--calcite-time-picker-color: var(--calcite-input-time-picker-digit-text-color);--calcite-time-picker-icon-color: var(--calcite-input-time-picker-digit-icon-color);--calcite-time-picker-border-color: var(--calcite-input-time-picker-border-color);--calcite-time-picker-button-background-color-hover: var(--calcite-input-time-picker-action-background-color-hover);--calcite-time-picker-button-background-color-press: var(--calcite-input-time-picker-action-background-color-press);--calcite-time-picker-input-border-color-hover: var(--calcite-input-time-picker-digit-border-color-hover);--calcite-time-picker-input-border-color-press: var(--calcite-input-time-picker-digit-border-color-press)}.container{--calcite-icon-color: var( --calcite-input-time-picker-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-3)) );align-items:center;background-color:var(--calcite-input-time-picker-input-background-color, var(--calcite-color-foreground-1));border:1px solid var(--calcite-input-time-picker-input-border-color, var(--calcite-color-border-input));border-radius:var(--calcite-input-time-picker-input-corner-radius, var(--calcite-corner-radius-none));box-shadow:var(--calcite-input-time-picker-input-shadow, var(--calcite-shadow-none));box-sizing:border-box;display:flex;color:var(--calcite-input-time-picker-input-text-color, var(--calcite-color-text-1));flex-wrap:nowrap;font-weight:var(--calcite-font-weight-normal);inline-size:100%;padding-block:var(--calcite-spacing-base);-webkit-user-select:none;user-select:none}.container:focus-within{border-color:var(--calcite-color-brand);outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container.read-only{background-color:var(--calcite-color-background);font-weight:var(--calcite-font-weight-medium)}.clock-icon{--calcite-icon-color: var( --calcite-input-time-picker-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-3)) )}.hour-suffix,.minute-suffix,.second-suffix{white-space:pre}.input-container{display:flex;flex-grow:1}.input{align-items:center;display:flex;block-size:100%;justify-content:center;min-inline-size:max-content}.input.empty{inline-size:var(--calcite-spacing-xl)}.input:focus,.input:hover:focus{background-color:Highlight;color:HighlightText;outline:2px solid transparent;outline-offset:2px}.toggle-icon{--calcite-icon-color: var(--calcite-input-time-picker-icon-color, var(--calcite-color-text-3));align-items:center;block-size:24px;cursor:pointer;display:flex;inline-size:24px;justify-content:center}.toggle-icon:hover{--calcite-icon-color: var(--calcite-input-time-picker-icon-color-hover, var(--calcite-color-text-1))}:host([scale=s]) .container{block-size:1.5rem;font-size:var(--calcite-font-size-sm);gap:var(--calcite-spacing-sm);padding-inline-start:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s]) .input-container{line-height:1rem}:host([scale=m]) .container{block-size:2rem;font-size:var(--calcite-font-size);gap:var(--calcite-spacing-md);padding-inline-start:var(--calcite-spacing-md);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .input-container{line-height:1.5rem}:host([scale=l]) .container{block-size:2.75rem;font-size:var(--calcite-font-size-md);gap:var(--calcite-spacing-lg);padding-inline:var(--calcite-spacing-lg)}:host([scale=l]) .input-container{line-height:2.25rem}:host([status=invalid]) .container{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) .container:focus-within{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}calcite-time-picker{--calcite-time-picker-background-color: var(--calcite-input-time-picker-background-color);--calcite-time-picker-border-color: var(--calcite-input-time-picker-border-color, transparent);--calcite-time-picker-corner-radius: var( --calcite-input-time-picker-corner-radius, var(--calcite-corner-radius-round) )}calcite-popover{--calcite-popover-corner-radius: var(--calcite-input-time-picker-corner-radius, var(--calcite-corner-radius-round))}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   clockIcon: "clock-icon",
@@ -49,7 +48,11 @@ class InputTimePicker extends LitElement {
     super();
     this.messages = useT9n();
     this.containerRef = createRef();
+    this.direction = useDirection();
     this.focusSetter = useSetFocus()(this);
+    this.formSupport = useForm({
+      inputType: "time"
+    })(this);
     this.fractionalSecondRef = createRef();
     this.hourRef = createRef();
     this.meridiemRef = createRef();
@@ -69,19 +72,6 @@ class InputTimePicker extends LitElement {
     this.scale = "m";
     this.status = "idle";
     this.step = 60;
-    this.validity = {
-      valid: false,
-      badInput: false,
-      customError: false,
-      patternMismatch: false,
-      rangeOverflow: false,
-      rangeUnderflow: false,
-      stepMismatch: false,
-      tooLong: false,
-      tooShort: false,
-      typeMismatch: false,
-      valueMissing: false
-    };
     this.calciteInputTimePickerBeforeClose = createEvent({ cancelable: false });
     this.calciteInputTimePickerBeforeOpen = createEvent({ cancelable: false });
     this.calciteInputTimePickerChange = createEvent();
@@ -92,7 +82,10 @@ class InputTimePicker extends LitElement {
     this.listen("calciteTimeChange", this.timeChangeHandler);
   }
   static {
-    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], hourFormat: [3, {}, { reflect: true }], label: 1, labelText: 1, max: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], min: [3, {}, { reflect: true }], name: 1, numberingSystem: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: 1, placement: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], step: [11, {}, { reflect: true, type: Number }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1 };
+    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], hourFormat: [3, {}, { reflect: true }], label: 1, labelText: 1, max: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], min: [3, {}, { reflect: true }], name: 1, numberingSystem: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: 1, placement: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], step: [11, {}, { reflect: true, type: Number }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
+  }
+  static {
+    this.formAssociated = true;
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -109,7 +102,6 @@ class InputTimePicker extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     connectLabel(this);
-    connectForm(this);
   }
   willUpdate(changes) {
     if (changes.has("open") && (this.hasUpdated || this.open !== false)) {
@@ -140,7 +132,6 @@ class InputTimePicker extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     disconnectLabel(this);
-    disconnectForm(this);
   }
   blurHandler() {
     this.changeEventHandler();
@@ -163,7 +154,8 @@ class InputTimePicker extends LitElement {
       return;
     }
     if (key === "Enter") {
-      if (submitForm(this)) {
+      if (this.formSupport.active) {
+        this.formSupport.requestSubmit();
         event.preventDefault();
       }
       this.changeEventHandler();
@@ -276,9 +268,6 @@ class InputTimePicker extends LitElement {
     const ref2 = target === "hour" ? this.hourRef : target === "minute" ? this.minuteRef : target === "second" ? this.secondRef : target === "fractionalSecond" ? this.fractionalSecondRef : this.meridiemRef;
     ref2.value?.focus();
   }
-  syncHiddenFormInput(input) {
-    syncHiddenFormInput("time", this, input);
-  }
   timeChangeHandler(event) {
     event.stopPropagation();
     if (this.disabled) {
@@ -311,7 +300,7 @@ class InputTimePicker extends LitElement {
     const showFractionalSecond = decimalPlaces(this.step) > 0;
     const showMeridiem = hourFormat === "12";
     const showSecond = this.step < 60;
-    const meridiemStart = meridiemOrder === 0 || getElementDir(this.el) === "rtl";
+    const meridiemStart = meridiemOrder === 0 || this.direction === "rtl";
     const isInteractive = !this.disabled && !this.readOnly;
     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-controls=${IDS.inputContainer} aria-labelledby=${IDS.inputContainer} class=${safeClassMap({
       [CSS.container]: true,
@@ -332,7 +321,7 @@ class InputTimePicker extends LitElement {
       [CSS.empty]: !localizedFractionalSecond,
       [CSS.fractionalSecond]: true,
       [CSS.input]: true
-    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleFractionalSecondKeyDownEvent : void 0} role=spinbutton tabindex=0 ${ref(this.fractionalSecondRef)}>${localizedFractionalSecond || "".padStart(decimalPlaces(this.step), "-")}</span>` || ""}${localizedSecondSuffix && html`<span class=${safeClassMap(CSS.secondSuffix)}>${localizedSecondSuffix}</span>` || ""}${showMeridiem && !meridiemStart && this.renderMeridiem() || ""}</div>${!this.readOnly && this.renderToggleIcon(this.open) || ""}</div><calcite-popover auto-close .focusTrapDisabled=${this.focusTrapDisabled} .focusTrapOptions=${{ initialFocus: false }} .label=${messages.chooseTime} lang=${this.messages._lang ?? nothing} offset-distance=0 @calcitePopoverBeforeClose=${this.popoverBeforeCloseHandler} @calcitePopoverBeforeOpen=${this.popoverBeforeOpenHandler} @calcitePopoverClose=${this.popoverCloseHandler} @calcitePopoverOpen=${this.popoverOpenHandler} .overlayPositioning=${this.overlayPositioning} .placement=${this.placement} pointer-disabled .referenceElement=${this.containerRef.value} trigger-disabled ${ref(this.setCalcitePopoverEl)}><calcite-time-picker .hourFormat=${this.time.hourFormat} lang=${this.messages._lang ?? nothing} .messageOverrides=${this.messageOverrides} .numberingSystem=${this.numberingSystem} @calciteTimePickerChange=${this.timePickerChangeHandler} .scale=${this.scale} .step=${this.step} tabindex=${(this.open ? void 0 : -1) ?? nothing} .time=${this.time} .value=${this.value} ${ref(this.timePickerRef)}></calcite-time-picker></calcite-popover>${HiddenFormInputSlot({ component: this })}${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    })} @focus=${this.timePartFocusHandler} @keydown=${isInteractive ? handleFractionalSecondKeyDownEvent : void 0} role=spinbutton tabindex=0 ${ref(this.fractionalSecondRef)}>${localizedFractionalSecond || "".padStart(decimalPlaces(this.step), "-")}</span>` || ""}${localizedSecondSuffix && html`<span class=${safeClassMap(CSS.secondSuffix)}>${localizedSecondSuffix}</span>` || ""}${showMeridiem && !meridiemStart && this.renderMeridiem() || ""}</div>${!this.readOnly && this.renderToggleIcon(this.open) || ""}</div><calcite-popover auto-close .focusTrapDisabled=${this.focusTrapDisabled} .focusTrapOptions=${{ initialFocus: false }} .label=${messages.chooseTime} lang=${this.messages._lang ?? nothing} offset-distance=0 @calcitePopoverBeforeClose=${this.popoverBeforeCloseHandler} @calcitePopoverBeforeOpen=${this.popoverBeforeOpenHandler} @calcitePopoverClose=${this.popoverCloseHandler} @calcitePopoverOpen=${this.popoverOpenHandler} .overlayPositioning=${this.overlayPositioning} .placement=${this.placement} pointer-disabled .referenceElement=${this.containerRef.value} trigger-disabled ${ref(this.setCalcitePopoverEl)}><calcite-time-picker .hourFormat=${this.time.hourFormat} lang=${this.messages._lang ?? nothing} .messageOverrides=${this.messageOverrides} .numberingSystem=${this.numberingSystem} @calciteTimePickerChange=${this.timePickerChangeHandler} .scale=${this.scale} .step=${this.step} tabindex=${(this.open ? void 0 : -1) ?? nothing} .time=${this.time} .value=${this.value} ${ref(this.timePickerRef)}></calcite-time-picker></calcite-popover>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
   renderMeridiem() {
     const { handleMeridiemKeyDownEvent, localizedMeridiem, meridiem } = this.time;

package/dist/components/calcite-input-time-zone/customElement.d.ts

@@ -2,7 +2,6 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Scale, Status } from "../interfaces.js";
 import type { OverlayPositioning } from "../../utils/floating-ui.js";
-import type { MutableValidityState } from "../../utils/form.js";
 import type { IconName } from "../calcite-icon/interfaces.js";
 import type { OffsetStyle, TimeZoneMode } from "./interfaces.js";
 
@@ -694,7 +693,7 @@ export abstract class InputTimeZone extends LitElement {
    *
    * It can be either a Date instance or a string in ISO format (`"YYYY-MM-DD"`, `"YYYY-MM-DDTHH:MM:SS.SSSZ"`).
    *
-   * @see [Date.prototype.toISOString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
+   * @see [MDN - Date.prototype.toISOString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
    */
   accessor referenceDate: Date | string;
   /**
@@ -715,7 +714,7 @@ export abstract class InputTimeZone extends LitElement {
    * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
-   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
    */
   accessor topLayerDisabled: boolean;
   /** Specifies the validation icon to display under the component. */
@@ -725,9 +724,9 @@ export abstract class InputTimeZone extends LitElement {
   /**
    * The component's current validation state.
    *
-   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
+   * @see [MDN - ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
    */
-  get validity(): MutableValidityState;
+  get validity(): ValidityState;
   /**
    * The component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC.
    *
@@ -740,7 +739,7 @@ export abstract class InputTimeZone extends LitElement {
    * Sets focus on the component.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the component is requested to be closed and before the closing transition begins. */

package/dist/components/calcite-input-time-zone/customElement.js

@@ -6,11 +6,11 @@ import { css, nothing, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { c as connectLabel, d as disconnectLabel } from "../../chunks/label.js";
-import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { S as SLOTS$1 } from "../../chunks/resources5.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";
 import { g as getDateTimeFormat } from "../../chunks/locale.js";
 const CSS = {
   offset: "offset"
@@ -202,9 +202,13 @@ class InputTimeZone extends LitElement {
   constructor() {
     super(...arguments);
     this.comboboxRef = createRef();
+    this.formSupport = useForm({
+      inputType: "text"
+    })(this);
     this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
+    this.#valueUpdateContext = null;
     this.clearable = false;
     this.disabled = false;
     this.maxItems = 0;
@@ -217,19 +221,6 @@ class InputTimeZone extends LitElement {
     this.scale = "m";
     this.status = "idle";
     this.topLayerDisabled = false;
-    this.validity = {
-      valid: false,
-      badInput: false,
-      customError: false,
-      patternMismatch: false,
-      rangeOverflow: false,
-      rangeUnderflow: false,
-      stepMismatch: false,
-      tooLong: false,
-      tooShort: false,
-      typeMismatch: false,
-      valueMissing: false
-    };
     this.calciteInputTimeZoneBeforeClose = createEvent({ cancelable: false });
     this.calciteInputTimeZoneBeforeOpen = createEvent({ cancelable: false });
     this.calciteInputTimeZoneChange = createEvent({ cancelable: false });
@@ -237,7 +228,10 @@ class InputTimeZone extends LitElement {
     this.calciteInputTimeZoneOpen = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], labelText: 1, maxItems: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], mode: [3, {}, { reflect: true }], name: [3, {}, { reflect: true }], offsetStyle: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], referenceDate: 1, required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1 };
+    this.properties = { clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], labelText: 1, maxItems: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], mode: [3, {}, { reflect: true }], name: [3, {}, { reflect: true }], offsetStyle: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], referenceDate: 1, required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
+  }
+  static {
+    this.formAssociated = true;
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -245,10 +239,12 @@ class InputTimeZone extends LitElement {
   static {
     this.styles = styles;
   }
+  #valueUpdateContext;
   get value() {
     return this._value;
   }
   set value(value) {
+    this.#valueUpdateContext = "internal";
     this._value = value;
   }
   async setFocus(options) {
@@ -256,7 +252,6 @@ class InputTimeZone extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    connectForm(this);
     connectLabel(this);
   }
   async load() {
@@ -267,7 +262,6 @@ class InputTimeZone extends LitElement {
     this.value = normalized || (initialValue === "" ? normalized : void 0);
     this.updateTimeZoneSelection();
     const selectedValue = this.selectedTimeZoneItem ? `${this.selectedTimeZoneItem.value}` : "";
-    afterConnectDefaultValueSet(this, selectedValue);
     this.value = selectedValue;
   }
   willUpdate(changes) {
@@ -286,7 +280,6 @@ class InputTimeZone extends LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    disconnectForm(this);
     disconnectLabel(this);
   }
   async handleTimeZoneItemPropsChange() {
@@ -302,6 +295,11 @@ class InputTimeZone extends LitElement {
     }
   }
   async handleValueChange(value, oldValue) {
+    const userUpdated = this.#valueUpdateContext === "user";
+    this.#valueUpdateContext = null;
+    if (userUpdated) {
+      return;
+    }
     const normalized = this.normalizeValue(value);
     if (!normalized) {
       if (this.clearable) {
@@ -344,8 +342,10 @@ class InputTimeZone extends LitElement {
     event.stopPropagation();
     const combobox = event.target;
     const selectedItem = combobox.selectedItems[0];
+    const previousValue = this._value;
     if (!selectedItem) {
       this._value = "";
+      this.requestUpdate("value", previousValue);
       this.selectedTimeZoneItem = null;
       this.calciteInputTimeZoneChange.emit();
       return;
@@ -356,7 +356,9 @@ class InputTimeZone extends LitElement {
       return;
     }
     this._value = selectedValue;
+    this.requestUpdate("value", previousValue);
     this.selectedTimeZoneItem = selected;
+    this.#valueUpdateContext = "user";
     this.calciteInputTimeZoneChange.emit();
   }
   onComboboxClose(event) {
@@ -403,7 +405,7 @@ class InputTimeZone extends LitElement {
     return !metadata.country || open || !selected ? label : getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages);
   }
   render() {
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<calcite-combobox .clearDisabled=${!this.clearable} .disabled=${this.disabled} .label=${this.messages.chooseTimeZone} .labelText=${this.labelText} lang=${this.messages._lang ?? nothing} .maxItems=${this.maxItems} @calciteComboboxBeforeClose=${this.onComboboxBeforeClose} @calciteComboboxBeforeOpen=${this.onComboboxBeforeOpen} @calciteComboboxChange=${this.onComboboxChange} @calciteComboboxClose=${this.onComboboxClose} @calciteComboboxOpen=${this.onComboboxOpen} .overlayPositioning=${this.overlayPositioning} .placeholder=${this.mode === "name" ? this.messages.namePlaceholder : this.mode === "offset" ? this.messages.offsetPlaceholder : this.messages.regionPlaceholder} placeholder-icon=search .readOnly=${this.readOnly} .required=${this.required} .scale=${this.scale} .selectionMode=${this.clearable ? "single" : "single-persist"} .status=${this.status} .topLayerDisabled=${this.topLayerDisabled} .validationIcon=${this.validationIcon} .validationMessage=${this.validationMessage} ${ref(this.comboboxRef)}>${this.renderItems()}<slot name=${SLOTS.labelContent} slot=${SLOTS$1.labelContent}></slot></calcite-combobox>${HiddenFormInputSlot({ component: this })}` });
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<calcite-combobox .clearDisabled=${!this.clearable} .disabled=${this.disabled} .label=${this.messages.chooseTimeZone} .labelText=${this.labelText} lang=${this.messages._lang ?? nothing} .maxItems=${this.maxItems} @calciteComboboxBeforeClose=${this.onComboboxBeforeClose} @calciteComboboxBeforeOpen=${this.onComboboxBeforeOpen} @calciteComboboxChange=${this.onComboboxChange} @calciteComboboxClose=${this.onComboboxClose} @calciteComboboxOpen=${this.onComboboxOpen} .overlayPositioning=${this.overlayPositioning} .placeholder=${this.mode === "name" ? this.messages.namePlaceholder : this.mode === "offset" ? this.messages.offsetPlaceholder : this.messages.regionPlaceholder} placeholder-icon=search .readOnly=${this.readOnly} .required=${this.required} .scale=${this.scale} .selectionMode=${this.clearable ? "single" : "single-persist"} .status=${this.status} .topLayerDisabled=${this.topLayerDisabled} .validationIcon=${this.validationIcon} .validationMessage=${this.validationMessage} ${ref(this.comboboxRef)}>${this.renderItems()}<slot name=${SLOTS.labelContent} slot=${SLOTS$1.labelContent}></slot></calcite-combobox>` });
   }
   renderItems() {
     if (this.mode === "region") {

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

@@ -25,7 +25,7 @@ export abstract class Link extends LitElement {
    * Without a value, the browser will suggest a filename/extension.
    *
    * @default false
-   * @see [Global download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
+   * @see [MDN - Global download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
    */
   accessor download: string | boolean;
   /** Specifies the URL of the linked resource, which can be set as an absolute or relative path. */
@@ -44,7 +44,7 @@ export abstract class Link extends LitElement {
    * Sets focus on the component.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
 }

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

@@ -4,7 +4,7 @@ import { css, html } from "lit";
 import { literal, html as html$1 } from "lit/static-html.js";
 import { LitElement, stringOrBoolean, safeClassMap, nothing } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { g as getElementDir } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline}:host a,:host button{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0;border-style:none;font-family:inherit;text-decoration:none;line-height:inherit;font-size:inherit;-webkit-appearance:none}:host a:hover,:host button:hover{text-decoration:none}:host a,:host button{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform,background-size;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;outline-color:transparent}:host a:focus,:host button: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))))}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.calcite-link--icon{vertical-align:middle;margin-block-start:-.25em}:host .calcite-link--icon.icon-start{margin-inline-end:.5rem}:host .calcite-link--icon.icon-end{margin-inline-start:.5rem}:host button,:host a{position:relative;display:inline;border-style:none;background-color:transparent;padding:0;color:var(--calcite-link-text-color, var(--calcite-color-text-link));line-height:inherit;white-space:initial;background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--calcite-color-brand-underline),var(--calcite-color-brand-underline));background-position-x:0%,100%;background-position-y:min(1.5em,100%);background-repeat:no-repeat,no-repeat;background-size:0% 1px,100% 1px}:host button:hover,:host button:focus,:host a:hover,:host a:focus{background-size:100% 1px,100% 1px}:host button:active,:host a:active{background-size:100% 2px,100% 2px}:host button.calcite--rtl,:host a.calcite--rtl{background-position:100% 100%,100% 100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
@@ -17,6 +17,7 @@ class Link extends LitElement {
   constructor() {
     super();
     this.childRef = createRef();
+    this.direction = useDirection();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
     this.disabled = false;
@@ -46,8 +47,8 @@ class Link extends LitElement {
     }
   }
   render() {
-    const { download, el } = this;
-    const dir = getElementDir(el);
+    const { download } = this;
+    const dir = this.direction;
     const childElType = this.href ? "a" : "button";
     const iconStartEl = html`<calcite-icon class=${safeClassMap({ [CSS.calciteLinkIcon]: true, [CSS.iconStart]: true })} .flipRtl=${this.iconFlipRtl === "start" || this.iconFlipRtl === "both"} .icon=${this.iconStart} scale=s></calcite-icon>`;
     const iconEndEl = html`<calcite-icon class=${safeClassMap({ [CSS.calciteLinkIcon]: true, [CSS.iconEnd]: true })} .flipRtl=${this.iconFlipRtl === "end" || this.iconFlipRtl === "both"} .icon=${this.iconEnd} scale=s></calcite-icon>`;

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

@@ -161,7 +161,7 @@ export abstract class List extends LitElement {
    * Sets focus on the component's first focusable element.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the component's selected items have changed. */

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

@@ -4,11 +4,10 @@ import { ref } from "lit/directives/ref.js";
 import { keyed } from "lit/directives/keyed.js";
 import { debounce } from "es-toolkit";
 import { css, html } from "lit";
-import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { n as slotChangeHasContent, s as slotChangeHasAssignedElement, h as getRootNode } from "../../chunks/dom.js";
+import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lumina";
+import { m as slotChangeHasContent, s as slotChangeHasAssignedElement, e as getRootNode } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { l as listItemSelector, i as isListItem, a as listSelector, u as updateListItemChildren, b as listItemGroupSelector, e as expandedAncestors } from "../../chunks/utils4.js";
-import { d as disconnectSortableComponent, c as connectSortableComponent } from "../../chunks/sortableComponent.js";
 import { S as SLOTS$1 } from "../../chunks/resources8.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
 import { g as guid } from "../../chunks/guid.js";
@@ -16,6 +15,7 @@ import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { u as useSortable } from "../../chunks/useSortable.js";
 const CSS = {
   container: "container",
   table: "table",
@@ -47,6 +47,7 @@ class List extends LitElement {
       this.updateListItemsDebounced();
     });
     this.cancelable = useCancelable()(this);
+    this.sortable = useSortable()(this);
     this.updateListItemsDebounced = debounce(this.updateListItems, DEBOUNCE.nextTick);
     this.visibleItems = [];
     this.willFilterEmit = false;
@@ -54,6 +55,11 @@ class List extends LitElement {
     this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
+    this.filterRowResizeObserver = createObserver("resize", () => this.updateFilterRowHeight());
+    this.setFilterContainerEl = (el) => {
+      this.filterContainerEl = el;
+      this.observeFilterRow();
+    };
     this.dataForFilter = [];
     this.hasFilterActionsEnd = false;
     this.hasFilterActionsStart = false;
@@ -61,6 +67,7 @@ class List extends LitElement {
     this.sortHandleMenuItems = [];
     this.hasContent = false;
     this.hasEmptyContent = false;
+    this.filterRowHeight = 0;
     this.disabled = false;
     this.dragEnabled = false;
     this.filterEnabled = false;
@@ -97,7 +104,7 @@ class List extends LitElement {
     this.listen("calciteInternalListItemGroupDefaultSlotChange", this.handleCalciteInternalListItemGroupDefaultSlotChange);
   }
   static {
-    this.properties = { assistiveText: [16, {}, { state: true }], dataForFilter: [16, {}, { state: true }], hasFilterActionsEnd: [16, {}, { state: true }], hasFilterActionsStart: [16, {}, { state: true }], hasFilterNoResults: [16, {}, { state: true }], sortHandleMenuItems: [16, {}, { state: true }], hasContent: [16, {}, { state: true }], hasEmptyContent: [16, {}, { state: true }], canPull: [0, {}, { attribute: false }], canPut: [0, {}, { attribute: false }], disabled: [7, {}, { reflect: true, type: Boolean }], dragEnabled: [7, {}, { reflect: true, type: Boolean }], filterEnabled: [7, {}, { reflect: true, type: Boolean }], filterPredicate: [0, {}, { attribute: false }], filterLabel: [3, {}, { reflect: true }], filterPlaceholder: [3, {}, { reflect: true }], filterProps: [0, {}, { attribute: false }], filterText: [3, {}, { reflect: true }], filteredData: [0, {}, { attribute: false }], filteredItems: [0, {}, { attribute: false }], group: [3, {}, { reflect: true }], interactionMode: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], numberingSystem: 1, scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], sortDisabled: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { assistiveText: [16, {}, { state: true }], dataForFilter: [16, {}, { state: true }], hasFilterActionsEnd: [16, {}, { state: true }], hasFilterActionsStart: [16, {}, { state: true }], hasFilterNoResults: [16, {}, { state: true }], sortHandleMenuItems: [16, {}, { state: true }], hasContent: [16, {}, { state: true }], hasEmptyContent: [16, {}, { state: true }], filterRowHeight: [16, {}, { state: true }], canPull: [0, {}, { attribute: false }], canPut: [0, {}, { attribute: false }], disabled: [7, {}, { reflect: true, type: Boolean }], dragEnabled: [7, {}, { reflect: true, type: Boolean }], filterEnabled: [7, {}, { reflect: true, type: Boolean }], filterPredicate: [0, {}, { attribute: false }], filterLabel: [3, {}, { reflect: true }], filterPlaceholder: [3, {}, { reflect: true }], filterProps: [0, {}, { attribute: false }], filterText: [3, {}, { reflect: true }], filteredData: [0, {}, { attribute: false }], filteredItems: [0, {}, { attribute: false }], group: [3, {}, { reflect: true }], interactionMode: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], numberingSystem: 1, scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], sortDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
@@ -147,7 +154,7 @@ class List extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.disconnectObserver();
-    disconnectSortableComponent(this);
+    this.unobserveFilterRow();
   }
   updateListItems() {
     this.updateGroupItems();
@@ -203,6 +210,19 @@ class List extends LitElement {
     this.updateSelectedItems();
     this.setUpSorting();
   }
+  unobserveFilterRow() {
+    this.filterRowResizeObserver?.disconnect();
+  }
+  observeFilterRow() {
+    this.unobserveFilterRow();
+    const filterRowEl = this.filterContainerEl;
+    if (filterRowEl) {
+      this.filterRowResizeObserver?.observe(filterRowEl);
+    }
+  }
+  updateFilterRowHeight() {
+    this.filterRowHeight = this.filterContainerEl?.clientHeight ?? 0;
+  }
   handleListItemChange() {
     this.willPerformFilter = true;
     this.updateListItemsDebounced();
@@ -322,7 +342,7 @@ class List extends LitElement {
     if (defaultSlotEl) {
       updateListItemChildren(defaultSlotEl);
     }
-    connectSortableComponent(this);
+    this.sortable.reset();
   }
   onGlobalDragStart() {
     this.disconnectObserver();
@@ -662,7 +682,9 @@ class List extends LitElement {
     return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap({
       [CSS.container]: true,
       [CSS.containerHeight]: this.listItems.length < 1 && loading
-    })}>${this.dragEnabled ? html`<span aria-live=assertive class=${safeClassMap(CSS.assistiveText)}>${this.assistiveText}</span>` : null}${this.renderItemAriaLive()}${loading ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} .loading=${loading}></calcite-scrim>` : null}<div .ariaBusy=${loading} .ariaLabel=${label || ""} class=${safeClassMap(CSS.table)} @keydown=${this.handleListKeydown} role=treegrid>${filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? html`<div class=${safeClassMap(CSS.sticky)} role=rowgroup><div role=row><div role=columnheader><calcite-stack class=${safeClassMap(CSS.stack)}><slot name=${SLOTS.filterActionsStart} @slotchange=${this.handleFilterActionsStartSlotChange} slot=${SLOTS$1.actionsStart}></slot><calcite-filter .ariaLabel=${filterPlaceholder} .disabled=${disabled} .filterProps=${effectiveFilterProps} .items=${dataForFilter} .label=${filterLabel} @calciteFilterChange=${this.handleFilterChange} .placeholder=${filterPlaceholder} .scale=${this.scale} .value=${filterText} ${ref(this.setFilterEl)}></calcite-filter><slot name=${SLOTS.filterActionsEnd} @slotchange=${this.handleFilterActionsEndSlotChange} slot=${SLOTS$1.actionsEnd}></slot></calcite-stack></div></div></div>` : null}<div class=${safeClassMap(CSS.tableContainer)} role=rowgroup><div .hidden=${!this.showEmptyContentContainer}><slot name=${SLOTS.emptyContent} @slotchange=${this.handleEmptyContentSlotChange}></slot></div><slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.setDefaultSlotEl)}></slot></div></div><div aria-live=polite .hidden=${!this.showNoResultsContainer}><slot name=${SLOTS.filterNoResults} @slotchange=${this.handleFilterNoResultsSlotChange}></slot></div></div>` });
+    })} style=${safeStyleMap({
+      ["--calcite-internal-filter-enabled-offset"]: `${this.filterRowHeight}px`
+    })}>${this.dragEnabled ? html`<span aria-live=assertive class=${safeClassMap(CSS.assistiveText)}>${this.assistiveText}</span>` : null}${this.renderItemAriaLive()}${loading ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} .loading=${loading}></calcite-scrim>` : null}<div .ariaBusy=${loading} .ariaLabel=${label || ""} class=${safeClassMap(CSS.table)} @keydown=${this.handleListKeydown} role=treegrid>${filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? html`<div class=${safeClassMap(CSS.sticky)} role=rowgroup ${ref(this.setFilterContainerEl)}><div role=row><div role=columnheader><calcite-stack class=${safeClassMap(CSS.stack)}><slot name=${SLOTS.filterActionsStart} @slotchange=${this.handleFilterActionsStartSlotChange} slot=${SLOTS$1.actionsStart}></slot><calcite-filter .ariaLabel=${filterPlaceholder} .disabled=${disabled} .filterProps=${effectiveFilterProps} .items=${dataForFilter} .label=${filterLabel} @calciteFilterChange=${this.handleFilterChange} .placeholder=${filterPlaceholder} .scale=${this.scale} .value=${filterText} ${ref(this.setFilterEl)}></calcite-filter><slot name=${SLOTS.filterActionsEnd} @slotchange=${this.handleFilterActionsEndSlotChange} slot=${SLOTS$1.actionsEnd}></slot></calcite-stack></div></div></div>` : null}<div class=${safeClassMap(CSS.tableContainer)} role=rowgroup><div .hidden=${!this.showEmptyContentContainer}><slot name=${SLOTS.emptyContent} @slotchange=${this.handleEmptyContentSlotChange}></slot></div><slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.setDefaultSlotEl)}></slot></div></div><div aria-live=polite .hidden=${!this.showNoResultsContainer}><slot name=${SLOTS.filterNoResults} @slotchange=${this.handleFilterNoResultsSlotChange}></slot></div></div>` });
   }
   renderItemAriaLive() {
     const { messages, filteredItems, parentListEl, messages: { _lang: effectiveLocale }, numberingSystem } = this;

package/dist/components/calcite-list/interfaces.d.ts

@@ -1,11 +1,7 @@
-import type { DragDetail } from "../../utils/sortableComponent.js";
+import type { DragDetail } from "../../controllers/useSortable.js";
 import type { ListItem } from "../calcite-list-item/customElement.js";
 import type { List } from "./customElement.js";
 
 export type ListDisplayMode = "flat" | "nested";
 
-export interface ListDragDetail extends DragDetail {
-  toEl: List;
-  fromEl: List;
-  dragEl: ListItem;
-}
+export type ListDragDetail = DragDetail<List, List, ListItem>;

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

@@ -102,7 +102,7 @@ export abstract class ListItem extends LitElement {
    * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
-   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
    */
   accessor topLayerDisabled: boolean;
   /**
@@ -117,7 +117,7 @@ export abstract class ListItem extends LitElement {
    * Sets focus on the component.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the close button is clicked. */