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

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

@@ -48,6 +48,8 @@ import type { DialogPlacement } from "./interfaces.js";
  * @slot [header-actions-end] - A slot for adding actions or content to the ending side of the component's header.
  * @slot [header-content] - A slot for adding custom content to the component's header.
  * @slot [header-menu-actions] - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
+ * @slot [heading] - A slot for adding content to the heading area of the default header. Takes precedence over the `heading` property.
+ * @slot [description] - A slot for adding content to the description area of the default header. Takes precedence over the `description` property.
  * @slot [fab] - A slot for adding a `calcite-fab` (floating action button) to perform an action.
  * @slot [footer] - A slot for adding custom content to the component's footer. Should not be used with the `footer-start` or `footer-end` slots.
  * @slot [footer-end] - A slot for adding a trailing footer custom content. Should not be used with the `footer` slot.

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

@@ -32,6 +32,8 @@ const SLOTS = {
   contentBottom: "content-bottom",
   headerActionsStart: "header-actions-start",
   headerActionsEnd: "header-actions-end",
+  description: "description",
+  heading: "heading",
   headerMenuActions: "header-menu-actions",
   headerContent: "header-content",
   fab: "fab",
@@ -492,7 +494,7 @@ class Dialog extends LitElement {
     })} .popover=${!this.embedded ? "manual" : null} role=dialog ${ref(this.popoverRef)}>${this.modal ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim>` : null}<div class=${safeClassMap({
       [CSS.dialog]: true,
       [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale)
-    })} @keydown=${this.handleKeyDown} ${ref(this.setTransitionEl)}>${assistiveText ? keyed("assistive-text", html`<div aria-live=polite class=${safeClassMap(CSS.assistiveText)}>${assistiveText}</div>`) : null}<slot name=${SLOTS.customContent}><calcite-panel class=${safeClassMap(CSS.panel)} .closable=${!this.closeDisabled} .description=${description} .heading=${heading} .headingLevel=${this.headingLevel} .hidden=${!this.opened} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${this.loading} .menuOpen=${this.menuOpen} .messageOverrides=${this.messageOverrides} @keydown=${this.handlePanelKeyDown} @calcitePanelClose=${this.handleInternalPanelCloseClick} @calcitePanelScroll=${this.handleInternalPanelScroll} .overlayPositioning=${this.overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.panelRef)}><slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel></slot></div></div>`;
+    })} @keydown=${this.handleKeyDown} ${ref(this.setTransitionEl)}>${assistiveText ? keyed("assistive-text", html`<div aria-live=polite class=${safeClassMap(CSS.assistiveText)}>${assistiveText}</div>`) : null}<slot name=${SLOTS.customContent}><calcite-panel class=${safeClassMap(CSS.panel)} .closable=${!this.closeDisabled} .description=${description} .heading=${heading} .headingLevel=${this.headingLevel} .hidden=${!this.opened} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${this.loading} .menuOpen=${this.menuOpen} .messageOverrides=${this.messageOverrides} @keydown=${this.handlePanelKeyDown} @calcitePanelClose=${this.handleInternalPanelCloseClick} @calcitePanelScroll=${this.handleInternalPanelScroll} .overlayPositioning=${this.overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.panelRef)}><slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.description} slot=${SLOTS$1.description}></slot><slot name=${SLOTS.heading} slot=${SLOTS$1.heading}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel></slot></div></div>`;
   }
 }
 customElement("calcite-dialog", Dialog);

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

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
+import type { FlipPlacement, LogicalPlacement, OverlayPositioning, ReferenceElement } from "../../utils/floating-ui.js";
 import type { Scale, Width } from "../interfaces.js";
 import type { DropdownItem } from "../calcite-dropdown-item/customElement.js";
 
@@ -8,7 +8,7 @@ import type { DropdownItem } from "../calcite-dropdown-item/customElement.js";
  * @cssproperty [--calcite-dropdown-width] - Specifies the width of the component's wrapper.
  * @cssproperty [--calcite-dropdown-background-color] - Specifies the component's background color.
  * @slot  - A slot for adding `calcite-dropdown-group` elements. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
- * @slot [trigger] - A slot for the element that triggers the component.
+ * @slot [trigger] - [deprecated] Use `referenceElement` property instead. A slot for the element that triggers the component.
  */
 export abstract class Dropdown extends LitElement {
   /**
@@ -68,6 +68,16 @@ export abstract class Dropdown extends LitElement {
    * @default "bottom-start"
    */
   accessor placement: LogicalPlacement;
+  /**
+   * The `referenceElement` is used to position the component according to its `placement` value.
+   *
+   * Setting the value to an `HTMLElement` is preferred so the component does not need to query the DOM.
+   *
+   * However, a string `id` of the reference element can also be used.
+   *
+   * The component should not be placed within its own `referenceElement` to avoid unintended behavior.
+   */
+  accessor referenceElement: ReferenceElement | string | null;
   /**
    * Specifies the size of the component.
    *

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

@@ -13,6 +13,7 @@ import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
+import { u as useReferenceElement, r as referenceElementManager } from "../../chunks/manager.js";
 const SLOTS = {
   trigger: "trigger"
 };
@@ -22,9 +23,11 @@ const CSS = {
   triggerContainer: "trigger-container"
 };
 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}.wrapper{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{.wrapper{opacity:0;inset-block-start:0;left:0}}:host([top-layer-disabled]) .wrapper{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown)}.wrapper[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.wrapper:popover-open{display:block}.wrapper .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}.wrapper[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.wrapper[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.wrapper[data-placement^=left] .calcite-floating-ui-anim{left:5px}.wrapper[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.content{max-height:45vh;width:auto;overflow-y:auto;overflow-x:hidden;inline-size:var(--calcite-dropdown-width, var(--calcite-internal-dropdown-width));background-color:var(--calcite-dropdown-background-color, var(--calcite-color-foreground-1))}.trigger-container{position:relative;display:flex;height:100%;flex:1 1 auto;word-wrap:break-word;word-break:break-word}.width-s{--calcite-internal-dropdown-width: 12rem}.width-m{--calcite-internal-dropdown-width: 14rem}.width-l{--calcite-internal-dropdown-width: 16rem}@media(forced-colors:active){:host([open]) .wrapper{border:var(--calcite-border-width-sm) solid canvasText}}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+const manager = referenceElementManager({ click: true, hover: true });
 class Dropdown extends LitElement {
   constructor() {
     super();
+    this.referenceElementController = useReferenceElement({ manager })(this);
     this.direction = useDirection();
     this.focusLastDropdownItem = false;
     this.activeItemIndex = -1;
@@ -33,6 +36,7 @@ class Dropdown extends LitElement {
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.transitionProp = "opacity";
     this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
+    this.onReferenceElementKeyDown = (event) => this.keyDownHandler(event);
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
     this.topLayer = useTopLayer({
@@ -62,7 +66,7 @@ class Dropdown extends LitElement {
     this.listen("calciteInternalDropdownItemSelect", this.handleItemSelect);
   }
   static {
-    this.properties = { activeDescendantElement: [16, {}, { state: true }], closeOnSelectDisabled: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], maxItems: [11, {}, { reflect: true, type: Number }], offsetDistance: [11, {}, { type: Number, reflect: true }], offsetSkidding: [11, {}, { reflect: true, type: Number }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], type: [3, {}, { reflect: true }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
+    this.properties = { activeDescendantElement: [16, {}, { state: true }], referenceEl: [16, {}, { state: true }], closeOnSelectDisabled: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], maxItems: [11, {}, { reflect: true, type: Number }], offsetDistance: [11, {}, { type: Number, reflect: true }], offsetSkidding: [11, {}, { reflect: true, type: Number }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], referenceElement: 1, scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], type: [3, {}, { reflect: true }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -70,6 +74,9 @@ class Dropdown extends LitElement {
   static {
     this.styles = styles;
   }
+  get referenceElementType() {
+    return this.referenceElement ? this.type : null;
+  }
   async reposition(delayed = false) {
     const { filteredFlipPlacements, floatingEl, offsetDistance, offsetSkidding, overlayPositioning, placement, referenceEl } = this;
     return reposition(this, {
@@ -85,7 +92,7 @@ class Dropdown extends LitElement {
     }, delayed);
   }
   async setFocus(options) {
-    return this.focusSetter(() => this.referenceEl, options);
+    return this.focusSetter(() => this.referenceEl instanceof HTMLElement ? this.referenceEl : this.floatingEl, options);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -113,6 +120,14 @@ class Dropdown extends LitElement {
     if (changes.has("scale") && (this.hasUpdated || this.scale !== "m")) {
       this.handlePropsChange();
     }
+    if (changes.has("referenceElement") && !this.referenceElement && this.open) {
+      this.topLayer.hide();
+    }
+  }
+  updated(changes) {
+    if (changes.has("referenceEl") && this.referenceElementType) {
+      connectFloatingUI(this);
+    }
   }
   loaded() {
     this.updateSelectedItems();
@@ -145,25 +160,25 @@ class Dropdown extends LitElement {
     this.updateGroupProps();
   }
   closeCalciteDropdownOnClick(event) {
-    if (this.disabled || !this.open || event.composedPath().includes(this.el)) {
+    if (this.referenceElementType || this.disabled || !this.open || event.composedPath().includes(this.el)) {
       return;
     }
     this.closeCalciteDropdown();
   }
   closeCalciteDropdownOnOpenEvent(event) {
-    if (event.composedPath().includes(this.el)) {
+    if (this.referenceElementType || event.composedPath().includes(this.el)) {
       return;
     }
     this.closeCalciteDropdown();
   }
   pointerEnterHandler() {
-    if (this.disabled || this.type !== "hover") {
+    if (this.referenceElementType || this.disabled || this.type !== "hover") {
       return;
     }
     this.open = true;
   }
   pointerLeaveHandler() {
-    if (this.disabled || this.type !== "hover") {
+    if (this.referenceElementType || this.disabled || this.type !== "hover") {
       return;
     }
     this.closeCalciteDropdown();
@@ -215,7 +230,7 @@ class Dropdown extends LitElement {
   }
   setDropdownWidth() {
     const { referenceEl, scrollerEl } = this;
-    if (!scrollerEl || !referenceEl) {
+    if (!scrollerEl || !(referenceEl instanceof HTMLElement)) {
       return;
     }
     scrollerEl.style.minWidth = `${referenceEl.clientWidth}px`;
@@ -251,7 +266,9 @@ class Dropdown extends LitElement {
     this.topLayer.hide();
   }
   setReferenceEl(el) {
-    updateRefObserver(this.resizeObserver, this.referenceEl, el);
+    const previousReferenceEl = this.referenceEl instanceof HTMLElement ? this.referenceEl : null;
+    const nextReferenceEl = el instanceof HTMLElement ? el : null;
+    updateRefObserver(this.resizeObserver, previousReferenceEl, nextReferenceEl);
     this.referenceEl = el;
     connectFloatingUI(this);
   }
@@ -260,7 +277,7 @@ class Dropdown extends LitElement {
     connectFloatingUI(this);
   }
   keyDownHandler(event) {
-    if (!event.composedPath().includes(this.referenceEl)) {
+    if (!(this.referenceEl instanceof HTMLElement) || !event.composedPath().includes(this.referenceEl)) {
       return;
     }
     const { defaultPrevented, key } = event;
@@ -413,7 +430,7 @@ class Dropdown extends LitElement {
       return;
     }
     const relatedTarget = event.relatedTarget;
-    if (relatedTarget && (this.el.contains(relatedTarget) || this.referenceEl != null && this.referenceEl.contains(relatedTarget))) {
+    if (relatedTarget && (this.el.contains(relatedTarget) || this.referenceEl != null && this.referenceEl instanceof HTMLElement && this.referenceEl.contains(relatedTarget))) {
       return;
     }
     this.closeCalciteDropdown();
@@ -426,10 +443,10 @@ class Dropdown extends LitElement {
   }
   render() {
     const { open } = this;
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.triggerContainer)} @click=${this.toggleClickDropdown} @focusin=${this.openHoverDropdown} @focusout=${this.closeHoverDropdown} @keydown=${this.keyDownHandler} ${ref(this.setReferenceEl)}><slot .ariaActiveDescendantElement=${this.activeDescendantElement ?? null} .ariaControlsElements=${this.scrollerEl ? [this.scrollerEl] : void 0} .ariaExpanded=${open} aria-haspopup=menu name=${SLOTS.trigger}></slot></div><div class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`${!this.referenceElementType ? html`<div class=${safeClassMap(CSS.triggerContainer)} @click=${this.toggleClickDropdown} @focusin=${this.openHoverDropdown} @focusout=${this.closeHoverDropdown} @keydown=${this.keyDownHandler} ${ref(this.setReferenceEl)}><slot .ariaActiveDescendantElement=${this.activeDescendantElement ?? null} .ariaControlsElements=${this.scrollerEl ? [this.scrollerEl] : void 0} .ariaExpanded=${open} aria-haspopup=menu name=${SLOTS.trigger}></slot></div>` : null}<div class=${safeClassMap({
       [CSS.wrapper]: true,
       [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale)
-    })} .inert=${!open} popover=manual ${ref(this.setFloatingEl)}><div .ariaLabelledByElements=${this.referenceEl ? [this.referenceEl] : void 0} class=${safeClassMap({
+    })} .inert=${!open} popover=manual ${ref(this.setFloatingEl)}><div .ariaLabelledByElements=${this.referenceEl instanceof HTMLElement ? [this.referenceEl] : void 0} class=${safeClassMap({
       [CSS.content]: true,
       [FloatingCSS.animation]: true,
       [FloatingCSS.animationActive]: open

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

@@ -42,6 +42,8 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  * @slot [header-actions-end] - A slot for adding `calcite-action`s or content to the end side of the component's header.
  * @slot [header-content] - A slot for adding custom content to the component's header.
  * @slot [header-menu-actions] - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
+ * @slot [heading] - A slot for adding content to the heading area of the default header. Takes precedence over the `heading` property.
+ * @slot [description] - A slot for adding content to the description area of the default header. Takes precedence over the `description` property.
  * @slot [fab] - A slot for adding a `calcite-fab` (floating action button) to perform an action.
  * @slot [footer] - A slot for adding custom content to the component's footer. Should not be used with the `footer-start` or `footer-end` slots.
  * @slot [footer-end] - A slot for adding a trailing footer custom content. Should not be used with the `footer` slot.

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

@@ -23,6 +23,8 @@ const SLOTS = {
   contentBottom: "content-bottom",
   headerActionsStart: "header-actions-start",
   headerActionsEnd: "header-actions-end",
+  description: "description",
+  heading: "heading",
   headerMenuActions: "header-menu-actions",
   headerContent: "header-content",
   fab: "fab",
@@ -121,7 +123,7 @@ class FlowItem extends LitElement {
   }
   render() {
     const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, overlayPositioning, beforeClose, icon, iconFlipRtl } = this;
-    return this.interactiveContainer({ disabled, children: html`<calcite-panel .beforeClose=${beforeClose} .closable=${closable} .closed=${closed} .collapseDirection=${collapseDirection} .collapsed=${collapsed} .collapsible=${collapsible} .description=${description} .disabled=${disabled} .heading=${heading} .headingLevel=${headingLevel} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${loading} .menuOpen=${menuOpen} .messageOverrides=${messages} @calcitePanelClose=${this.handleInternalPanelClose} @calcitePanelScroll=${this.handleInternalPanelScroll} @calcitePanelToggle=${this.handleInternalPanelToggle} .overlayPositioning=${overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.containerRef)}>${this.renderBackButton()}<slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel>` });
+    return this.interactiveContainer({ disabled, children: html`<calcite-panel .beforeClose=${beforeClose} .closable=${closable} .closed=${closed} .collapseDirection=${collapseDirection} .collapsed=${collapsed} .collapsible=${collapsible} .description=${description} .disabled=${disabled} .heading=${heading} .headingLevel=${headingLevel} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${loading} .menuOpen=${menuOpen} .messageOverrides=${messages} @calcitePanelClose=${this.handleInternalPanelClose} @calcitePanelScroll=${this.handleInternalPanelScroll} @calcitePanelToggle=${this.handleInternalPanelToggle} .overlayPositioning=${overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.containerRef)}>${this.renderBackButton()}<slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.description} slot=${SLOTS$1.description}></slot><slot name=${SLOTS.heading} slot=${SLOTS$1.heading}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel>` });
   }
 }
 customElement("calcite-flow-item", FlowItem);

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

@@ -8,7 +8,6 @@ import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lum
 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;
@@ -154,7 +155,6 @@ class List extends LitElement {
     super.disconnectedCallback();
     this.disconnectObserver();
     this.unobserveFilterRow();
-    disconnectSortableComponent(this);
   }
   updateListItems() {
     this.updateGroupItems();
@@ -342,7 +342,7 @@ class List extends LitElement {
     if (defaultSlotEl) {
       updateListItemChildren(defaultSlotEl);
     }
-    connectSortableComponent(this);
+    this.sortable.reset();
   }
   onGlobalDragStart() {
     this.disconnectObserver();

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.js

@@ -5,7 +5,7 @@ import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { s as slotChangeHasAssignedElement, v as getFirstTabbable } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement, y as getFirstTabbable } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { l as logger } from "../../chunks/logger.js";

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

@@ -5,7 +5,7 @@ import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
-import { x as intersects } from "../../chunks/dom.js";
+import { z as intersects } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const CSS = {

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

@@ -37,6 +37,8 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  * @slot [header-actions-end] - A slot for adding actions or content to the end side of the header.
  * @slot [header-content] - A slot for adding custom content to the header.
  * @slot [header-menu-actions] - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
+ * @slot [heading] - A slot for adding content to the heading area of the default header. Takes precedence over the `heading` property.
+ * @slot [description] - A slot for adding content to the description area of the default header. Takes precedence over the `description` property.
  * @slot [fab] - A slot for adding a `calcite-fab` (floating action button) to perform an action.
  * @slot [footer] - A slot for adding custom content to the component's footer. Should not be used with the `"footer-start"` or `"footer-end"` slots.
  * @slot [footer-end] - A slot for adding custom content to a trailing footer. Should not be used with the `"footer"` slot.

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

@@ -4,7 +4,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { s as slotChangeHasAssignedElement, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement, a as slotChangeGetAssignedElements, A as slotChangeHasTextContent, h as hasVisibleContent } from "../../chunks/dom.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { S as SLOTS$1 } from "../../chunks/resources2.js";
@@ -34,6 +34,8 @@ class Panel extends LitElement {
     this.hasFooterEndContent = false;
     this.hasFooterStartContent = false;
     this.hasHeaderContent = false;
+    this.hasHeaderDescription = false;
+    this.hasHeaderHeading = false;
     this.hasMenuItems = false;
     this.hasStartActions = false;
     this.showHeaderContent = false;
@@ -58,7 +60,7 @@ class Panel extends LitElement {
     this.listen("calcitePanelClose", this.panelCloseHandler);
   }
   static {
-    this.properties = { hasActionBar: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasEndActions: [16, {}, { state: true }], hasFab: [16, {}, { state: true }], hasFooterContent: [16, {}, { state: true }], hasFooterEndContent: [16, {}, { state: true }], hasFooterStartContent: [16, {}, { state: true }], hasHeaderContent: [16, {}, { state: true }], hasMenuItems: [16, {}, { state: true }], hasStartActions: [16, {}, { state: true }], showHeaderContent: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], collapseDirection: 1, collapsed: [7, {}, { reflect: true, type: Boolean }], collapsible: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], menuFlipPlacements: [0, {}, { attribute: false }], menuOpen: [7, {}, { reflect: true, type: Boolean }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { hasActionBar: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasEndActions: [16, {}, { state: true }], hasFab: [16, {}, { state: true }], hasFooterContent: [16, {}, { state: true }], hasFooterEndContent: [16, {}, { state: true }], hasFooterStartContent: [16, {}, { state: true }], hasHeaderContent: [16, {}, { state: true }], hasHeaderDescription: [16, {}, { state: true }], hasHeaderHeading: [16, {}, { state: true }], hasMenuItems: [16, {}, { state: true }], hasStartActions: [16, {}, { state: true }], showHeaderContent: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], collapseDirection: 1, collapsed: [7, {}, { reflect: true, type: Boolean }], collapsible: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], menuFlipPlacements: [0, {}, { attribute: false }], menuOpen: [7, {}, { reflect: true, type: Boolean }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = [styles$1, styles];
@@ -155,6 +157,12 @@ class Panel extends LitElement {
   handleHeaderContentSlotChange(event) {
     this.hasHeaderContent = slotChangeHasAssignedElement(event);
   }
+  handleHeaderDescriptionSlotChange(event) {
+    this.hasHeaderDescription = slotChangeHasTextContent(event) || slotChangeGetAssignedElements(event).some(hasVisibleContent);
+  }
+  handleHeaderHeadingSlotChange(event) {
+    this.hasHeaderHeading = slotChangeHasTextContent(event) || slotChangeGetAssignedElements(event).some(hasVisibleContent);
+  }
   handleFabSlotChange(event) {
     this.hasFab = slotChangeHasAssignedElement(event);
   }
@@ -185,11 +193,14 @@ class Panel extends LitElement {
     });
   }
   renderHeaderContent() {
-    const { heading, headingLevel, description, hasHeaderContent, icon, scale } = this;
+    const { heading, headingLevel, description, hasHeaderContent, hasHeaderDescription, hasHeaderHeading, icon, scale } = this;
+    const showHeaderHeading = !!heading || hasHeaderHeading;
+    const showHeaderDescription = !!description || hasHeaderDescription;
+    const showHeaderTextContent = showHeaderHeading || showHeaderDescription;
     const iconNode = icon ? html`<calcite-icon class=${safeClassMap(CSS.icon)} .flipRtl=${this.iconFlipRtl} .icon=${icon} .scale=${getIconScale(scale)}></calcite-icon>` : null;
-    const headingNode = heading ? Heading({ class: CSS.heading, level: headingLevel, children: heading }) : null;
-    const descriptionNode = description ? html`<span class=${safeClassMap(CSS.description)}>${description}</span>` : null;
-    return !hasHeaderContent && (headingNode || descriptionNode) ? keyed("header-content", html`<div class=${safeClassMap({ [CSS.headerContent]: true, [CSS.headerNonSlottedContent]: true })}>${iconNode}<div class=${safeClassMap(CSS.headingTextContent)}>${headingNode}${descriptionNode}</div></div>`) : null;
+    const headingNode = Heading({ class: CSS.heading, hidden: !showHeaderHeading, level: headingLevel, children: html`<slot .hidden=${!hasHeaderHeading} name=${SLOTS.heading} @slotchange=${this.handleHeaderHeadingSlotChange}></slot>${!hasHeaderHeading ? heading : null}` });
+    const descriptionNode = html`<span class=${safeClassMap(CSS.description)} .hidden=${!showHeaderDescription}><slot .hidden=${!hasHeaderDescription} name=${SLOTS.description} @slotchange=${this.handleHeaderDescriptionSlotChange}></slot>${!hasHeaderDescription ? description : null}</span>`;
+    return keyed("header-content", html`<div class=${safeClassMap({ [CSS.headerContent]: true, [CSS.headerNonSlottedContent]: true })} .hidden=${hasHeaderContent || !showHeaderTextContent}>${iconNode}<div class=${safeClassMap(CSS.headingTextContent)}>${headingNode}${descriptionNode}</div></div>`);
   }
   renderActionBar() {
     return html`<div class=${safeClassMap(CSS.actionBarContainer)} .hidden=${!this.hasActionBar}><slot name=${SLOTS.actionBar} @slotchange=${this.handleActionBarSlotChange}></slot></div>`;
@@ -219,9 +230,10 @@ class Panel extends LitElement {
     return keyed("menu", html`<calcite-action-menu .flipPlacements=${menuFlipPlacements ?? ["top", "bottom"]} .hidden=${!hasMenuItems} .label=${messages.options} .open=${menuOpen} .overlayPositioning=${this.overlayPositioning} .placement=${menuPlacement} .scale=${scale} .topLayerDisabled=${this.topLayerDisabled}><calcite-action class=${safeClassMap(CSS.menuAction)} .icon=${ICONS.menu} .scale=${scale} slot=${SLOTS$1.trigger} .text=${messages.options}></calcite-action><slot name=${SLOTS.headerMenuActions} @slotchange=${this.handleHeaderMenuActionsSlotChange}></slot></calcite-action-menu>`);
   }
   renderHeaderNode() {
-    const { hasHeaderContent, hasStartActions, hasEndActions, closable, collapsible, hasMenuItems, hasActionBar, hasContentTop } = this;
+    const { hasHeaderContent, hasHeaderDescription, hasHeaderHeading, hasStartActions, hasEndActions, closable, collapsible, hasMenuItems, hasActionBar, hasContentTop, heading, description } = this;
     const headerContentNode = this.renderHeaderContent();
-    const showHeaderContent = hasHeaderContent || !!headerContentNode || hasStartActions || hasEndActions || collapsible || closable || hasMenuItems || hasActionBar || hasContentTop;
+    const hasDefaultHeaderContent = !!heading || !!description || hasHeaderHeading || hasHeaderDescription;
+    const showHeaderContent = hasHeaderContent || hasDefaultHeaderContent || hasStartActions || hasEndActions || collapsible || closable || hasMenuItems || hasActionBar || hasContentTop;
     this.showHeaderContent = showHeaderContent;
     return html`<header class=${safeClassMap(CSS.header)} .hidden=${!(showHeaderContent || hasActionBar || hasContentTop)}><div class=${safeClassMap({ [CSS.headerContainer]: true, [CSS.headerContainerBorderEnd]: hasActionBar })} .hidden=${!showHeaderContent}>${this.renderHeaderStartActions()}${this.renderHeaderSlottedContent()}${headerContentNode}${this.renderHeaderActionsEnd()}</div>${this.renderActionBar()}${this.renderContentTop()}</header>`;
   }

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

@@ -9,11 +9,12 @@ import { e as defaultOffsetDistance, r as reposition, c as connectFloatingUI, a
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { H as Heading } from "../../chunks/Heading.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { u as useReferenceElement, F as FloatingArrow, r as referenceElementManager } from "../../chunks/useReferenceElement.js";
+import { F as FloatingArrow } from "../../chunks/FloatingArrow.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
+import { u as useReferenceElement, r as referenceElementManager } from "../../chunks/manager.js";
 const CSS = {
   positionContainer: "position-container",
   container: "container",

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

@@ -1,15 +1,183 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as customElement } from "../../chunks/runtime.js";
-import { css, nothing, html } from "lit";
+import { html, isServer, css, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
 import { g as getRoundRobinIndex } from "../../chunks/array.js";
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
+import { q as queryElementRoots, c as closestElementCrossShadowBoundary } from "../../chunks/dom.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+const hiddenFormInputSlotName = "hidden-form-input";
+function isCheckable(component) {
+  return "checked" in component;
+}
+const onFormResetMap = /* @__PURE__ */ new WeakMap();
+const formComponentSet = /* @__PURE__ */ new WeakSet();
+function hasRegisteredFormComponentParent(form, formComponentEl) {
+  const hasParentComponentWithFormIdSet = closestElementCrossShadowBoundary(formComponentEl.parentElement, "[form]");
+  if (hasParentComponentWithFormIdSet) {
+    return true;
+  }
+  const formComponentRegisterEventName = "calciteInternalFormComponentRegister";
+  let hasRegisteredFormComponentParent2 = false;
+  form.addEventListener(formComponentRegisterEventName, (event) => {
+    hasRegisteredFormComponentParent2 = event.composedPath().some((element) => formComponentSet.has(element));
+    event.stopPropagation();
+  }, { once: true });
+  formComponentEl.dispatchEvent(new CustomEvent(formComponentRegisterEventName, {
+    bubbles: true,
+    composed: true
+  }));
+  return hasRegisteredFormComponentParent2;
+}
+function getValidationComponent(el) {
+  if (el.nodeName === "CALCITE-RADIO-BUTTON") {
+    return closestElementCrossShadowBoundary(el, "calcite-radio-button-group");
+  }
+  return el;
+}
+function connectForm(component) {
+  const { el, value } = component;
+  const associatedForm = findAssociatedForm(component);
+  if (!associatedForm || hasRegisteredFormComponentParent(associatedForm, el)) {
+    return;
+  }
+  component.formEl = associatedForm;
+  component.defaultValue = value;
+  if (isCheckable(component)) {
+    component.defaultChecked = component.checked;
+  }
+  const boundOnFormReset = onFormReset.bind(component);
+  associatedForm.addEventListener("reset", boundOnFormReset);
+  onFormResetMap.set(component.el, boundOnFormReset);
+  formComponentSet.add(el);
+}
+function findAssociatedForm(component) {
+  const { el, form } = component;
+  return form ? queryElementRoots(el, { id: form }) : closestElementCrossShadowBoundary(el, "form");
+}
+function onFormReset() {
+  if ("status" in this) {
+    this.status = "idle";
+  }
+  if ("validationIcon" in this) {
+    this.validationIcon = false;
+  }
+  if ("validationMessage" in this) {
+    this.validationMessage = "";
+  }
+  if (isCheckable(this)) {
+    this.checked = this.defaultChecked;
+    return;
+  }
+  this.value = this.defaultValue;
+  this.onFormReset?.();
+}
+function disconnectForm(component) {
+  const { el, formEl } = component;
+  if (!formEl) {
+    return;
+  }
+  const boundOnFormReset = onFormResetMap.get(el);
+  formEl.removeEventListener("reset", boundOnFormReset);
+  onFormResetMap.delete(el);
+  component.formEl = null;
+  formComponentSet.delete(el);
+}
+const internalHiddenInputInputEvent = "calciteInternalHiddenInputInput";
+const hiddenInputInputHandler = (event) => {
+  event.target.dispatchEvent(new CustomEvent(internalHiddenInputInputEvent, { bubbles: true }));
+};
+const removeHiddenInputChangeEventListener = (input) => input.removeEventListener("input", hiddenInputInputHandler);
+function syncHiddenFormInput(component) {
+  const { el, formEl, name, value } = component;
+  const { ownerDocument } = el;
+  if (isServer) {
+    return;
+  }
+  const inputs = el.querySelectorAll(`input[slot="${hiddenFormInputSlotName}"]`);
+  if (!formEl || !name) {
+    inputs.forEach((input) => {
+      removeHiddenInputChangeEventListener(input);
+      input.remove();
+    });
+    return;
+  }
+  const values = Array.isArray(value) ? value : [value];
+  const extra = [];
+  const seen = /* @__PURE__ */ new Set();
+  inputs.forEach((input) => {
+    const valueMatch = values.find((val) => (
+      /* intentional non-strict equality check */
+      val == input.value
+    ));
+    if (valueMatch != null) {
+      seen.add(valueMatch);
+      defaultSyncHiddenFormInput(component, input, valueMatch);
+    } else {
+      extra.push(input);
+    }
+  });
+  let docFrag;
+  values.forEach((value2) => {
+    if (seen.has(value2)) {
+      return;
+    }
+    let input = extra.pop();
+    if (!input) {
+      input = ownerDocument.createElement("input");
+      input.ariaHidden = "true";
+      input.slot = hiddenFormInputSlotName;
+    }
+    if (!docFrag) {
+      docFrag = ownerDocument.createDocumentFragment();
+    }
+    docFrag.append(input);
+    input.addEventListener("input", hiddenInputInputHandler);
+    defaultSyncHiddenFormInput(component, input, value2);
+  });
+  if (docFrag) {
+    el.append(docFrag);
+  }
+  extra.forEach((input) => {
+    removeHiddenInputChangeEventListener(input);
+    input.remove();
+  });
+}
+function defaultSyncHiddenFormInput(component, input, value) {
+  const { defaultValue, disabled, form, name, required } = component;
+  input.defaultValue = defaultValue;
+  input.disabled = disabled;
+  input.name = name;
+  input.required = required;
+  input.tabIndex = -1;
+  if (form) {
+    input.setAttribute("form", form);
+  } else {
+    input.removeAttribute("form");
+  }
+  if (isCheckable(component)) {
+    input.checked = component.checked;
+    input.defaultChecked = component.defaultChecked;
+    input.value = component.checked ? value || "on" : "";
+  } else {
+    input.value = value || "";
+  }
+  component.syncHiddenFormInput?.(input);
+  const validationComponent = getValidationComponent(component.el);
+  if (validationComponent && "validity" in validationComponent) {
+    for (const key in { ...input?.validity }) {
+      validationComponent.validity[key] = input.validity[key];
+    }
+  }
+}
+const HiddenFormInputSlot = ({ component }) => {
+  syncHiddenFormInput(component);
+  return html`<slot name=${hiddenFormInputSlotName}></slot>`;
+};
 const CSS = {
   container: "container",
   radio: "radio"

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

@@ -6,7 +6,7 @@ import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { A as ensureId, g as getStylePixelValue } from "../../chunks/dom.js";
+import { B as ensureId, g as getStylePixelValue } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";