@esri/calcite-components 5.1.0-next.24 → 5.1.0-next.26

package/dist/chunks/{sortableComponent.js → useSortable.js}

@@ -1,4 +1,5 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { makeGenericController } from "@arcgis/lumina/controllers";
 import Sortable from "sortablejs";
 const sortableComponentSet = /* @__PURE__ */ new Set();
 const CSS = {
@@ -7,15 +8,17 @@ const CSS = {
   dragClass: "calcite-sortable--drag",
   fallbackClass: "calcite-sortable--fallback"
 };
-function connectSortableComponent(component) {
-  if (dragActive(component)) {
-    return;
-  }
-  disconnectSortableComponent(component);
-  sortableComponentSet.add(component);
+function onGlobalDragStart() {
+  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragStart());
+}
+function onGlobalDragEnd() {
+  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragEnd());
+}
+const globalDragState = { active: false };
+function createSortable(component) {
   const dataIdAttr = "id";
-  const { group, handleSelector: handle, dragSelector: draggable, sortDisabled } = component;
-  component.sortable = Sortable.create(component.el, {
+  const { el, group, handleSelector: handle, dragSelector: draggable, sortDisabled } = component;
+  return Sortable.create(el, {
     dataIdAttr,
     swapThreshold: 0.5,
     ...CSS,
@@ -25,22 +28,26 @@ function connectSortableComponent(component) {
       group: {
         name: group,
         ...!!component.canPull && {
-          pull: (to, from, dragEl, { newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => component.canPull({
-            toEl: to.el,
-            fromEl: from.el,
-            dragEl,
-            newIndex,
-            oldIndex
-          })
+          pull: (to, from, dragEl, { newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
+            return component.canPull({
+              toEl: to.el,
+              fromEl: from.el,
+              dragEl,
+              newIndex,
+              oldIndex
+            });
+          }
         },
         ...!!component.canPut && {
-          put: (to, from, dragEl, { newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => component.canPut({
-            toEl: to.el,
-            fromEl: from.el,
-            dragEl,
-            newIndex,
-            oldIndex
-          })
+          put: (to, from, dragEl, { newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
+            return component.canPut({
+              toEl: to.el,
+              fromEl: from.el,
+              dragEl,
+              newIndex,
+              oldIndex
+            });
+          }
         }
       }
     },
@@ -53,12 +60,12 @@ function connectSortableComponent(component) {
     handle,
     filter: `${handle}[disabled]`,
     onStart: ({ from: fromEl, item: dragEl, to: toEl, newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
-      dragState.active = true;
+      globalDragState.active = true;
       onGlobalDragStart();
       component.onDragStart({ fromEl, dragEl, toEl, newIndex, oldIndex });
     },
     onEnd: ({ from: fromEl, item: dragEl, to: toEl, newDraggableIndex: newIndex, oldDraggableIndex: oldIndex }) => {
-      dragState.active = false;
+      globalDragState.active = false;
       onGlobalDragEnd();
       component.onDragEnd({ fromEl, dragEl, toEl, newIndex, oldIndex });
     },
@@ -67,25 +74,41 @@ function connectSortableComponent(component) {
     }
   });
 }
-function disconnectSortableComponent(component) {
-  if (dragActive(component)) {
-    return;
-  }
-  sortableComponentSet.delete(component);
-  component.sortable?.destroy();
-  component.sortable = null;
-}
-const dragState = { active: false };
-function dragActive(component) {
-  return component.dragEnabled && dragState.active;
-}
-function onGlobalDragStart() {
-  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragStart());
-}
-function onGlobalDragEnd() {
-  Array.from(sortableComponentSet).forEach((component) => component.onGlobalDragEnd());
-}
+const useSortable = () => {
+  return makeGenericController((component, controller) => {
+    let sortable;
+    function dragActive(component2) {
+      return component2.dragEnabled && globalDragState.active;
+    }
+    async function setUpSortable(component2) {
+      if (dragActive(component2)) {
+        return;
+      }
+      tearDownSortable(component2);
+      sortableComponentSet.add(component2);
+      sortable = createSortable(component2);
+    }
+    function tearDownSortable(component2) {
+      if (dragActive(component2)) {
+        return;
+      }
+      sortableComponentSet.delete(component2);
+      sortable?.destroy();
+      sortable = void 0;
+    }
+    controller.onConnected(() => {
+      setUpSortable(component);
+    });
+    controller.onDisconnected(() => {
+      tearDownSortable(component);
+    });
+    return {
+      reset: () => {
+        setUpSortable(component);
+      }
+    };
+  });
+};
 export {
-  connectSortableComponent as c,
-  disconnectSortableComponent as d
+  useSortable as u
 };

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

@@ -27,7 +27,7 @@ export abstract class Action extends LitElement {
    */
   accessor active: boolean;
   /** Specifies the horizontal alignment of button elements with text content. */
-  accessor alignment: Alignment;
+  accessor alignment: Alignment | undefined;
   /**
    * Specifies the appearance of the component.
    *
@@ -55,9 +55,9 @@ export abstract class Action extends LitElement {
    *
    * When not set, the component is associated with its ancestor form element, if one exists.
    */
-  accessor form: string;
+  accessor form: string | undefined;
   /** Specifies an icon to display. */
-  accessor icon: IconName;
+  accessor icon: IconName | undefined;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -71,7 +71,7 @@ export abstract class Action extends LitElement {
    */
   accessor indicator: boolean;
   /** Specifies an accessible label for the component. If no label is provided, the label inherits what's provided for the `text` prop. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * When `true`, a busy indicator is displayed.
    *

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

@@ -9,8 +9,8 @@ import { c as createObserver } from "../../chunks/observers.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-import { f as findAssociatedForm, s as submitForm, r as resetForm } from "../../chunks/form.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { u as useFormTrigger } from "../../chunks/useFormTrigger.js";
 import { I as IDS, C as CSS } from "../../chunks/resources.js";
 const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-internal-action-font-size: var(--calcite-font-size--2);--calcite-internal-action-height: var(--calcite-size-sm);--calcite-internal-action-line-height: 1rem;--calcite-internal-action-spacing: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-font-size: var(--calcite-font-size--1);--calcite-internal-action-height: var(--calcite-size-md);--calcite-internal-action-line-height: 1rem;--calcite-internal-action-spacing: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-font-size: var(--calcite-font-size-0);--calcite-internal-action-height: var(--calcite-size-lg);--calcite-internal-action-line-height: 1.25rem;--calcite-internal-action-spacing: var(--calcite-spacing-sm-plus)}:host{display:flex;cursor:pointer;background-color:transparent;--calcite-internal-action-text-color: var(--calcite-color-text-3);border-radius:var(--calcite-action-corner-radius, var(--calcite-action-corner-radius-start-start, var(--calcite-corner-radius-xs)) var(--calcite-action-corner-radius-start-end, var(--calcite-corner-radius-xs)) var(--calcite-action-corner-radius-end-end, var(--calcite-corner-radius-xs)) var(--calcite-action-corner-radius-end-start, var(--calcite-corner-radius-xs)))}.interaction-container{border-radius:inherit}:host([width=full]){flex:1 0 auto}:host([width=full]) .button{justify-content:center}:host([width=full]) .button .text-container--visible{flex:none}:host([drag-handle]){cursor:move;--calcite-internal-action-text-color: var(--calcite-color-border-input);--calcite-internal-action-padding-inline: var(--calcite-spacing-xxs)}.button{position:relative;margin:0;display:flex;inline-size:auto;align-items:center;justify-content:flex-start;border-style:none;outline-color:transparent;background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1));border-radius:inherit;color:var(--calcite-action-text-color, var(--calcite-internal-action-text-color));cursor:inherit;flex:1 0 auto;font-family:inherit;font-size:var(--calcite-internal-action-font-size);font-weight:var(--calcite-font-weight-normal);line-height:var(--calcite-internal-action-line-height);min-block-size:var(--calcite-internal-action-height);padding-block:var(--calcite-internal-action-padding-block, var(--calcite-internal-action-spacing));padding-inline:var(--calcite-internal-action-padding-inline, var(--calcite-internal-action-spacing));text-align:start}.button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)))}.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(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}.button--text-visible{gap:var(--calcite-internal-action-spacing);inline-size:100%}.icon-container{pointer-events:none;margin:0;display:flex;align-items:center;justify-content:center}.text-container{margin:0;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transition-property:opacity;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:inline-size}.text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1}:host([active]) .button{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-3));color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)))}:host([active]) .button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-foreground-3))}:host([active]) .button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}:host([loading]) calcite-loader[inline]{margin-inline-end:0px}:host([appearance=transparent]):host([active]) .button{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-transparent-press)))}:host([appearance=transparent]) .button{transition-property:box-shadow;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);background-color:var(--calcite-action-background-color, var(--calcite-color-transparent))}:host([appearance=transparent]) .button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-transparent-hover))}:host([appearance=transparent]) .button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-transparent-press)))}:host([selection-appearance=highlight]):host([active]) .button{background-color:var(--calcite-color-surface-highlight);color:var(--calcite-color-text-highlight)}:host([active-descendant]) .button{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.indicator-with-icon{position:relative}.indicator-with-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}.indicator-without-icon{margin-inline:.25rem;inline-size:1rem;position:relative}.indicator-without-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}:host([scale=s]) .indicator-with-icon{position:relative}:host([scale=s]) .indicator-with-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.125rem;inset-inline-end:-.125rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand));block-size:.375rem;inline-size:.375rem}:host([scale=s]) .indicator-without-icon{position:relative}:host([scale=s]) .indicator-without-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.175rem;inset-inline-end:-.175rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand));block-size:.375rem;inline-size:.375rem}.indicator-text{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([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 class Action extends LitElement {
@@ -24,6 +24,7 @@ class Action extends LitElement {
     this.focusSetter = useSetFocus()(this);
     this.indicatorRef = createRef();
     this.interactiveContainer = useInteractive(this);
+    this.formTrigger = useFormTrigger()(this);
     this.active = false;
     this.activeDescendant = false;
     this.appearance = "transparent";
@@ -41,6 +42,9 @@ class Action extends LitElement {
   static {
     this.properties = { aria: [0, {}, { attribute: false }], active: [7, {}, { reflect: true, type: Boolean }], activeDescendant: [7, {}, { reflect: true, type: Boolean }], alignment: [3, {}, { reflect: true }], appearance: [3, {}, { reflect: true }], compact: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], dragHandle: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], indicator: [7, {}, { reflect: true, type: Boolean }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], scale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }], text: 1, textEnabled: [7, {}, { reflect: true, type: Boolean }], type: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }] };
   }
+  static {
+    this.formAssociated = true;
+  }
   static {
     this.styles = styles;
   }
@@ -49,22 +53,12 @@ class Action extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.formEl = findAssociatedForm(this);
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.formEl = null;
     this.mutationObserver?.disconnect();
   }
-  handleClick() {
-    const { type } = this;
-    if (type === "submit") {
-      submitForm(this);
-    } else if (type === "reset") {
-      resetForm(this);
-    }
-  }
   renderTextContainer() {
     const { text, textEnabled } = this;
     const textContainerClasses = {
@@ -106,9 +100,9 @@ class Action extends LitElement {
       ...internalControlsElements
     ];
     if (this.dragHandle) {
-      return html`<span .ariaBusy=${loading} .ariaControlsElements=${ariaControlsElements} .ariaDescribedByElements=${this.aria?.describedByElements} .ariaExpanded=${this.aria?.expanded} .ariaHasPopup=${this.aria?.hasPopup} .ariaLabel=${ariaLabel} .ariaLabelledByElements=${this.aria?.labelledByElements} .ariaOwnsElements=${this.aria?.ownsElements} .ariaPressed=${this.aria?.pressed} class=${safeClassMap(buttonClasses)} id=${buttonId ?? nothing} role=button tabindex=${(this.disabled ? null : 0) ?? nothing} ${ref(this.buttonRef)}>${buttonContent}</span>`;
+      return html`<span .ariaBusy=${loading} .ariaControlsElements=${ariaControlsElements} .ariaDescribedByElements=${this.aria?.describedByElements} .ariaExpanded=${this.aria?.expanded} .ariaHasPopup=${this.aria?.hasPopup} .ariaLabel=${ariaLabel} .ariaLabelledByElements=${this.aria?.labelledByElements} .ariaOwnsElements=${this.aria?.ownsElements} .ariaPressed=${this.aria?.pressed} class=${safeClassMap(buttonClasses)} id=${buttonId ?? nothing} role=button tabindex=${(this.disabled ? void 0 : 0) ?? nothing} ${ref(this.buttonRef)}>${buttonContent}</span>`;
     }
-    return html`<button .ariaBusy=${loading} .ariaChecked=${this.aria?.checked} .ariaControlsElements=${ariaControlsElements} .ariaDescribedByElements=${this.aria?.describedByElements} .ariaExpanded=${this.aria?.expanded} .ariaHasPopup=${this.aria?.hasPopup} .ariaLabel=${ariaLabel} .ariaLabelledByElements=${this.aria?.labelledByElements} .ariaOwnsElements=${this.aria?.ownsElements} .ariaPressed=${this.aria?.pressed} class=${safeClassMap(buttonClasses)} .disabled=${disabled} id=${buttonId ?? nothing} @click=${this.handleClick} .role=${this.aria?.role} ${ref(this.buttonRef)}>${buttonContent}</button>`;
+    return html`<button .ariaBusy=${loading} .ariaChecked=${this.aria?.checked} .ariaControlsElements=${ariaControlsElements} .ariaDescribedByElements=${this.aria?.describedByElements} .ariaExpanded=${this.aria?.expanded} .ariaHasPopup=${this.aria?.hasPopup} .ariaLabel=${ariaLabel} .ariaLabelledByElements=${this.aria?.labelledByElements} .ariaOwnsElements=${this.aria?.ownsElements} .ariaPressed=${this.aria?.pressed} class=${safeClassMap(buttonClasses)} .disabled=${disabled} id=${buttonId ?? nothing} .role=${this.aria?.role} ${ref(this.buttonRef)}>${buttonContent}</button>`;
   }
   render() {
     return this.interactiveContainer({ disabled: this.disabled, children: html`${this.renderButton()}${this.renderIndicatorText()}` });

package/dist/components/calcite-action-bar/customElement.d.ts

@@ -16,9 +16,9 @@ import type { OverlayPositioning } from "../../utils/floating-ui.js";
  */
 export abstract class ActionBar extends LitElement {
   /** Specifies an accessible name for the last `calcite-action-group`. */
-  accessor actionsEndGroupLabel: string;
+  accessor actionsEndGroupLabel: string | undefined;
   /** Specifies an accessible name for the first `calcite-action-group`. */
-  accessor actionsStartGroupLabel: string;
+  accessor actionsStartGroupLabel: string | undefined;
   /**
    * When `true`, the expand-toggling behavior is disabled.
    *
@@ -81,7 +81,7 @@ export abstract class ActionBar extends LitElement {
    *
    * When `expanded` is `true`, the chevron direction is reversed.
    */
-  accessor position: Extract<"start" | "end", Position>;
+  accessor position: Extract<"start" | "end", Position> | undefined;
   /**
    * Specifies the size of the expand `calcite-action`.
    *

package/dist/components/calcite-action-bar/customElement.js

@@ -55,11 +55,12 @@ class ActionBar extends LitElement {
     this.actions = [];
     this.containerRef = createRef();
     this.direction = useDirection();
+    this.actionGroups = [];
     this.mutationObserver = createObserver("mutation", () => this.mutationObserverHandler());
     this.cancelable = useCancelable()(this);
     this.resize = debounce(({ width, height }) => {
       const { expanded, expandDisabled, layout, overflowActionsDisabled, expandPosition } = this;
-      if (overflowActionsDisabled || layout === "vertical" && !height || layout === "horizontal" && !width) {
+      if (overflowActionsDisabled || layout === "vertical" && !height || layout === "horizontal" && !width || !this.containerRef.value) {
         return;
       }
       this.updateGroups();
@@ -108,7 +109,7 @@ class ActionBar extends LitElement {
       this.expanded = !this.expanded;
       this.calciteActionBarToggle.emit();
     };
-    this.messages = useT9n();
+    this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
     this.setExpandToggleEl = (el) => {
       this.expandToggleEl = el;

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

@@ -16,7 +16,7 @@ import type { Columns } from "./interfaces.js";
  */
 export abstract class ActionGroup extends LitElement {
   /** Specifies the number of columns. */
-  accessor columns: Columns;
+  accessor columns: Columns | undefined;
   /**
    * When `true`, expands the component and its contents.
    *
@@ -24,7 +24,7 @@ export abstract class ActionGroup extends LitElement {
    */
   accessor expanded: boolean;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * Indicates the layout of the component.
    *
@@ -33,7 +33,7 @@ export abstract class ActionGroup extends LitElement {
    */
   accessor layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
   /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
-  accessor menuFlipPlacements: FlipPlacement[];
+  accessor menuFlipPlacements: FlipPlacement[] | undefined;
   /**
    * When `true`, the `calcite-action-menu` is open.
    *
@@ -41,7 +41,7 @@ export abstract class ActionGroup extends LitElement {
    */
   accessor menuOpen: boolean;
   /** Specifies the position of the action menu. */
-  accessor menuPlacement: LogicalPlacement;
+  accessor menuPlacement: LogicalPlacement | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: { more?: string; };
   /**

package/dist/components/calcite-action-pad/customElement.d.ts

@@ -13,7 +13,7 @@ import type { OverlayPositioning } from "../../utils/floating-ui.js";
  */
 export abstract class ActionPad extends LitElement {
   /** Specifies the accessible label for the last `calcite-action-group`. */
-  accessor actionsEndGroupLabel: string;
+  accessor actionsEndGroupLabel: string | undefined;
   /**
    * When `true`, the expand-toggling behavior is disabled.
    *
@@ -50,7 +50,7 @@ export abstract class ActionPad extends LitElement {
    */
   accessor overlayPositioning: OverlayPositioning;
   /** Specifies the position of the component depending on the element's `dir` property. */
-  accessor position: Extract<"start" | "end", Position>;
+  accessor position: Extract<"start" | "end", Position> | undefined;
   /**
    * Specifies the size of the expand `calcite-action`.
    *

package/dist/components/calcite-action-pad/customElement.js

@@ -28,7 +28,7 @@ class ActionPad extends LitElement {
       this.expanded = !this.expanded;
       this.calciteActionPadToggle.emit();
     };
-    this.messages = useT9n();
+    this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
     this.expandDisabled = false;
     this.expanded = false;

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

@@ -3,7 +3,6 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { FlipPlacement, MenuPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
 import type { Alignment, Scale, Status } from "../interfaces.js";
 import type { IconName } from "../calcite-icon/interfaces.js";
-import type { MutableValidityState } from "../../utils/form.js";
 
 /**
  * @cssproperty [--calcite-autocomplete-background-color] - Specifies the component's background color.
@@ -194,7 +193,7 @@ export abstract class Autocomplete extends LitElement {
    *
    * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
    */
-  get validity(): MutableValidityState;
+  get validity(): ValidityState;
   /**
    * Specifies the selected `autocomplete-item`. When the component resides in a form, the `value` is submitted with the form.
    *

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

@@ -9,7 +9,6 @@ import { escapeRegExp } from "es-toolkit/compat";
 import { createRef, ref } from "lit/directives/ref.js";
 import { d as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
-import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, s as submitForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
 import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -21,6 +20,7 @@ import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.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{position:relative;display:block}.input-container{position:relative;display:flex;flex:1 1 auto;flex-wrap:nowrap}.input{width:100%;--calcite-input-prefix-size: var(--calcite-autocomplete-input-prefix-size);--calcite-input-suffix-size: var(--calcite-autocomplete-input-suffix-size);--calcite-input-background-color: var(--calcite-autocomplete-input-background-color);--calcite-input-border-color: var(--calcite-autocomplete-input-border-color);--calcite-input-corner-radius: var(--calcite-autocomplete-input-corner-radius);--calcite-input-shadow: var(--calcite-autocomplete-input-shadow);--calcite-input-icon-color: var(--calcite-autocomplete-input-icon-color);--calcite-input-text-color: var(--calcite-autocomplete-input-text-color);--calcite-input-placeholder-text-color: var(--calcite-autocomplete-input-placeholder-text-color);--calcite-input-actions-background-color: var(--calcite-autocomplete-input-actions-background-color);--calcite-input-actions-background-color-hover: var(--calcite-autocomplete-input-actions-background-color-hover);--calcite-input-actions-background-color-press: var(--calcite-autocomplete-input-actions-background-color-press);--calcite-input-actions-icon-color: var(--calcite-autocomplete-input-actions-icon-color);--calcite-input-actions-icon-color-hover: var(--calcite-autocomplete-input-actions-icon-color-hover);--calcite-input-actions-icon-color-press: var(--calcite-autocomplete-input-actions-icon-color-press);--calcite-input-loading-background-color: var(--calcite-autocomplete-input-loading-background-color);--calcite-input-loading-fill-color: var(--calcite-autocomplete-input-loading-fill-color);--calcite-input-prefix-text-color: var(--calcite-autocomplete-input-prefix-text-color);--calcite-input-suffix-text-color: var(--calcite-autocomplete-input-suffix-text-color)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.content-container{box-sizing:border-box;width:100%}.floating-ui-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.floating-ui-container{opacity:0;inset-block-start:0;left:0}}:host([top-layer-disabled]) .floating-ui-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown)}.floating-ui-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.floating-ui-container:popover-open{display:block}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.content-container .calcite-floating-ui-anim{width:100%;overflow-y:auto;max-block-size:var(--calcite-autocomplete-menu-max-size-y, 45vh);color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-1));background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-autocomplete-corner-radius, var(--calcite-corner-radius-round))}.content--hidden{display:none}@media(forced-colors:active){.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.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}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
 const SLOTS = {
   contentBottom: "content-bottom",
@@ -51,6 +51,9 @@ class Autocomplete extends LitElement {
     this.guid = guid();
     this.attributeWatch = useWatchAttributes(["autofocus", "enterkeyhint", "inputmode"], this.handleGlobalAttributesChanged);
     this.direction = useDirection();
+    this.formSupport = useForm({
+      inputType: "text"
+    })(this);
     this.inputId = IDS.input(this.guid);
     this.listId = IDS.list(this.guid);
     this.messages = useT9n();
@@ -85,19 +88,6 @@ class Autocomplete 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.value = "";
     this.calciteAutocompleteBeforeClose = createEvent({ cancelable: false });
     this.calciteAutocompleteBeforeOpen = createEvent({ cancelable: false });
@@ -112,6 +102,9 @@ class Autocomplete extends LitElement {
   static {
     this.properties = { activeDescendant: [16, {}, { state: true }], activeIndex: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], items: [16, {}, { state: true }], groups: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], autocomplete: 1, disabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], form: [3, {}, { reflect: true }], icon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], inputValue: 1, label: 1, labelText: 1, loading: [7, {}, { reflect: true, type: Boolean }], maxLength: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], minLength: [11, {}, { reflect: true, type: Number }], name: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], pattern: 1, placeholder: 1, placement: [3, {}, { reflect: true }], prefixText: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], suffixText: 1, topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1 };
   }
+  static {
+    this.formAssociated = true;
+  }
   static {
     this.styles = styles;
   }
@@ -151,8 +144,6 @@ class Autocomplete extends LitElement {
       subtree: true
     });
     connectLabel(this);
-    connectForm(this);
-    this.defaultInputValue = this.inputValue || "";
     this.getAllItemsDebounced();
     connectFloatingUI(this);
     this.cancelable.add(this.getAllItemsDebounced);
@@ -187,8 +178,6 @@ class Autocomplete extends LitElement {
     }
   }
   loaded() {
-    afterConnectDefaultValueSet(this, this.value || "");
-    this.defaultInputValue = this.inputValue || "";
     connectFloatingUI(this);
   }
   disconnectedCallback() {
@@ -196,7 +185,6 @@ class Autocomplete extends LitElement {
     this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();
     disconnectLabel(this);
-    disconnectForm(this);
     disconnectFloatingUI(this);
   }
   setFloatingElSize() {
@@ -241,9 +229,6 @@ class Autocomplete extends LitElement {
   onLabelClick() {
     this.setFocus();
   }
-  onFormReset() {
-    this.inputValue = this.defaultInputValue;
-  }
   onBeforeOpen() {
     this.calciteAutocompleteBeforeOpen.emit();
     this.topLayer.show();
@@ -333,10 +318,9 @@ class Autocomplete extends LitElement {
           activeItem.toggleSelection();
           this.open = false;
           event.preventDefault();
-        } else if (!event.defaultPrevented) {
-          if (submitForm(this)) {
-            event.preventDefault();
-          }
+        } else if (!event.defaultPrevented && this.formSupport.active) {
+          event.preventDefault();
+          this.formSupport.requestSubmit();
         }
         break;
       case "ArrowDown":
@@ -410,7 +394,7 @@ class Autocomplete extends LitElement {
       [CSS.contentAnimation]: true,
       [FloatingCSS.animation]: true,
       [FloatingCSS.animationActive]: isOpen
-    })} ${ref(this.transitionRef)}><div class=${safeClassMap({ [CSS.content]: true, [CSS.contentHidden]: !isOpen })}><slot name=${SLOTS.contentTop} @slotchange=${this.handleContentTopSlotChange}></slot><slot aria-hidden=true></slot><slot name=${SLOTS.contentBottom} @slotchange=${this.handleContentBottomSlotChange}></slot></div></div></div></div>${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}` });
+    })} ${ref(this.transitionRef)}><div class=${safeClassMap({ [CSS.content]: true, [CSS.contentHidden]: !isOpen })}><slot name=${SLOTS.contentTop} @slotchange=${this.handleContentTopSlotChange}></slot><slot aria-hidden=true></slot><slot name=${SLOTS.contentBottom} @slotchange=${this.handleContentBottomSlotChange}></slot></div></div></div></div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
   renderListBox() {
     return html`<ul aria-labelledby=${this.inputId ?? nothing} aria-live=polite class=${safeClassMap(CSS.screenReadersOnly)} id=${this.listId ?? nothing} role=listbox tabindex=-1>${this.renderListBoxOptions()}</ul>`;

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

@@ -4,12 +4,12 @@ import { debounce } from "es-toolkit";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { c as createObserver } from "../../chunks/observers.js";
-import { d as disconnectSortableComponent, c as connectSortableComponent } from "../../chunks/sortableComponent.js";
 import { e as getRootNode, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { u as useSortable } from "../../chunks/useSortable.js";
 function isBlock(element) {
   return element.tagName === "CALCITE-BLOCK";
 }
@@ -39,6 +39,7 @@ class BlockGroup extends LitElement {
     this.blockAndGroups = [];
     this.cancelable = useCancelable()(this);
     this.focusSetter = useSetFocus()(this);
+    this.sortable = useSortable()(this);
     this.updateBlockItemsDebounced = debounce(this.updateBlockItems, DEBOUNCE.nextTick);
     this.interactiveContainer = useInteractive(this);
     this.sortHandleMenuItems = [];
@@ -88,7 +89,6 @@ class BlockGroup extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.disconnectObserver();
-    disconnectSortableComponent(this);
   }
   updateBlockItems() {
     this.updateGroupItems();
@@ -166,7 +166,7 @@ class BlockGroup extends LitElement {
     if (!dragEnabled) {
       return;
     }
-    connectSortableComponent(this);
+    this.sortable.reset();
   }
   onGlobalDragStart() {
     this.disconnectObserver();

package/dist/components/calcite-block-group/interfaces.d.ts

@@ -1,9 +1,5 @@
-import type { DragDetail } from "../../utils/sortableComponent.js";
+import type { DragDetail } from "../../controllers/useSortable.js";
 import type { Block } from "../calcite-block/customElement.js";
 import type { BlockGroup } from "./customElement.js";
 
-export interface BlockDragDetail extends DragDetail {
-  toEl: BlockGroup;
-  fromEl: BlockGroup;
-  dragEl: Block;
-}
+export type BlockDragDetail = DragDetail<BlockGroup, BlockGroup, Block>;

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

@@ -5,7 +5,6 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { literal, html as html$1 } from "lit/static-html.js";
 import { LitElement, stringOrBoolean, safeClassMap, nothing } from "@arcgis/lumina";
 import { useWatchAttributes } from "@arcgis/lumina/controllers";
-import { f as findAssociatedForm, s as submitForm, r as resetForm } from "../../chunks/form.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { g as getIconScale } from "../../chunks/component.js";
@@ -13,6 +12,7 @@ import { u as useT9n } from "../../chunks/useT9n.js";
 import { h as hasVisibleContent } from "../../chunks/dom.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { u as useFormTrigger } from "../../chunks/useFormTrigger.js";
 const CSS = {
   buttonLoader: "calcite-button--loader",
   content: "content",
@@ -33,6 +33,7 @@ class Button extends LitElement {
     super(...arguments);
     this.attributeWatch = useWatchAttributes(["aria-expanded"], this.handleGlobalAttributesChanged);
     this.contentRef = createRef();
+    this.formTrigger = useFormTrigger({ disabled: () => !!this.href })(this);
     this.mutationObserver = createObserver("mutation", () => this.updateHasContent());
     this.resizeObserver = createObserver("resize", () => this.setTooltipText());
     this.focusSetter = useSetFocus()(this);
@@ -54,6 +55,9 @@ class Button extends LitElement {
   static {
     this.properties = { hasContent: [16, {}, { state: true }], tooltipText: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], appearance: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], download: [3, { converter: stringOrBoolean }, { reflect: true }], form: [3, {}, { reflect: true }], href: [3, {}, { reflect: true }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], kind: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], rel: [3, {}, { reflect: true }], round: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], splitChild: [3, {}, { reflect: true }], target: [3, {}, { reflect: true }], type: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
   }
+  static {
+    this.formAssociated = true;
+  }
   static {
     this.styles = styles;
   }
@@ -64,7 +68,6 @@ class Button extends LitElement {
     super.connectedCallback();
     this.setupTextContentObserver();
     connectLabel(this);
-    this.formEl = findAssociatedForm(this);
   }
   async load() {
     this.updateHasContent();
@@ -77,7 +80,6 @@ class Button extends LitElement {
     this.mutationObserver?.disconnect();
     disconnectLabel(this);
     this.resizeObserver?.disconnect();
-    this.formEl = null;
   }
   handleGlobalAttributesChanged() {
     this.requestUpdate();
@@ -89,20 +91,8 @@ class Button extends LitElement {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
   onLabelClick() {
-    this.handleClick();
     this.setFocus();
   }
-  handleClick() {
-    const { type } = this;
-    if (this.href) {
-      return;
-    }
-    if (type === "submit") {
-      submitForm(this);
-    } else if (type === "reset") {
-      resetForm(this);
-    }
-  }
   setTooltipText() {
     const { contentRef: { value: contentEl } } = this;
     if (contentEl) {
@@ -127,7 +117,7 @@ class Button extends LitElement {
       [CSS.contentSlotted]: this.hasContent,
       [CSS.iconStartEmpty]: !this.iconStart,
       [CSS.iconEndEmpty]: !this.iconEnd
-    })} .disabled=${childElType === "button" ? this.disabled : null} download=${(childElType === "a" ? this.download === true || this.download === "" ? "" : this.download || null : null) ?? nothing} href=${(childElType === "a" && this.href) ?? nothing} name=${(childElType === "button" && this.name) ?? nothing} @click=${this.handleClick} rel=${(childElType === "a" && this.rel) ?? nothing} tabindex=${(this.disabled ? -1 : null) ?? nothing} target=${(childElType === "a" && this.target) ?? nothing} title=${this.tooltipText ?? nothing} type=${(childElType === "button" ? this.type : null) ?? nothing} ${ref(this.setChildEl)}>${loaderNode}${this.iconStart ? iconStartEl : null}${this.hasContent ? contentEl : null}${this.iconEnd ? iconEndEl : null}</${DynamicHtmlTag}>` });
+    })} .disabled=${childElType === "button" ? this.disabled : null} download=${(childElType === "a" ? this.download === true || this.download === "" ? "" : this.download || null : null) ?? nothing} href=${(childElType === "a" && this.href) ?? nothing} name=${(childElType === "button" && this.name) ?? nothing} rel=${(childElType === "a" && this.rel) ?? nothing} tabindex=${(this.disabled ? -1 : null) ?? nothing} target=${(childElType === "a" && this.target) ?? nothing} title=${this.tooltipText ?? nothing} type=${(childElType === "button" ? this.type : null) ?? nothing} ${ref(this.setChildEl)}>${loaderNode}${this.iconStart ? iconStartEl : null}${this.hasContent ? contentEl : null}${this.iconEnd ? iconEndEl : null}</${DynamicHtmlTag}>` });
   }
 }
 customElement("calcite-button", Button);