@esri/calcite-components 5.0.1 → 5.0.2-next.1

package/dist/components/calcite-date-picker-month-header/customElement.js

@@ -270,7 +270,7 @@ class DatePickerMonthHeader extends LitElement {
   renderChevron(direction) {
     const isDirectionRight = direction === "right";
     const isDisabled = hasSameMonthAndYear(isDirectionRight ? this.nextMonthDate : this.prevMonthDate, this.activeDate) || !inRange(this.activeDate, this.min, this.max);
-    return html`<calcite-action alignment=center .ariaDisabled=${isDisabled} .ariaLabel=${isDirectionRight ? this.messages.nextMonth : this.messages.prevMonth} class=${safeClassMap(CSS.chevron)} compact data-direction=${direction ?? nothing} .disabled=${isDisabled} .icon=${isDirectionRight ? ICON.chevronRight : ICON.chevronLeft} icon-flip-rtl @click=${isDirectionRight ? this.nextMonthClick : this.prevMonthClick} @keydown=${isDirectionRight ? this.nextMonthKeydown : this.prevMonthKeydown} role=button .scale=${this.scale === "l" ? "l" : "m"} .text=${isDirectionRight ? this.messages.nextMonth : this.messages.prevMonth} ${ref(isDirectionRight ? this.nextMonthActionRef : this.prevMonthActionRef)}></calcite-action>`;
+    return html`<calcite-action alignment=center .ariaDisabled=${isDisabled} .ariaLabel=${isDirectionRight ? this.messages.nextMonth : this.messages.prevMonth} class=${safeClassMap(CSS.chevron)} compact data-direction=${direction ?? nothing} .disabled=${isDisabled} .icon=${isDirectionRight ? ICON.chevronRight : ICON.chevronLeft} icon-flip-rtl @click=${isDirectionRight ? this.nextMonthClick : this.prevMonthClick} @keydown=${isDirectionRight ? this.nextMonthKeydown : this.prevMonthKeydown} role=button .scale=${this.scale} .text=${isDirectionRight ? this.messages.nextMonth : this.messages.prevMonth} ${ref(isDirectionRight ? this.nextMonthActionRef : this.prevMonthActionRef)}></calcite-action>`;
   }
 }
 customElement("calcite-date-picker-month-header", DatePickerMonthHeader);

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

@@ -77,7 +77,10 @@ class Dialog extends LitElement {
         inline: { min: this.resizeValues.minInlineSize, max: this.resizeValues.maxInlineSize },
         block: { min: this.resizeValues.minBlockSize, max: this.resizeValues.maxBlockSize }
       }),
-      fullscreenDisabled: () => this.fullscreenDisabled
+      fullscreenDisabled: () => this.fullscreenDisabled,
+      onResize: (resizeValues) => {
+        this.resizeValues = resizeValues;
+      }
     });
     this.topLayer = useTopLayer({
       disabledOverride: () => this.embedded,
@@ -478,16 +481,7 @@ class Dialog extends LitElement {
     if (!dialogElement) {
       return;
     }
-    const appliedSize = this.sizeOverride.resize(size);
-    this.resizeValues = {
-      ...this.resizeValues,
-      ...appliedSize.inline !== void 0 && {
-        inlineSize: appliedSize.inline
-      },
-      ...appliedSize.block !== void 0 && {
-        blockSize: appliedSize.block
-      }
-    };
+    this.sizeOverride.resize(size);
   }
   render() {
     const { assistiveText, description, heading, opened, icon, iconFlipRtl } = this;

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

@@ -4,7 +4,7 @@ import { ref } from "lit/directives/ref.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { queryAssignedElements } from "lit/decorators.js";
-import { f as focusElementInGroup, j as focusElement, v as nextFrame } from "../../chunks/dom.js";
+import { f as focusElementInGroup, j as focusElement, u as nextFrame } from "../../chunks/dom.js";
 import { d as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { g as guid } from "../../chunks/guid.js";
 import { i as isActivationKey } from "../../chunks/key.js";

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

@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, nothing, setAttribute } from "@arcgis/lumina";
-import { t as toAriaBoolean } from "../../chunks/dom.js";
+import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";

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

@@ -2,7 +2,8 @@
 import { g as getAssetPath, c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, nothing, svg, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
-import { g as getElementDir, t as toAriaBoolean } from "../../chunks/dom.js";
+import { g as getElementDir } from "../../chunks/dom.js";
+import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { l as logger } from "../../chunks/logger.js";
 const CSS = {

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

@@ -12,6 +12,7 @@ import type { ListDisplayMode, ListDragDetail } from "./interfaces.js";
  *
  * @cssproperty [--calcite-list-background-color] - Specifies the component's background color.
  * @slot  - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
+ * @slot [empty-content] - A slot for adding content to display when the component has no `calcite-list-item`s.
  * @slot [filter-actions-start] - A slot for adding actionable `calcite-action` elements before the filter component.
  * @slot [filter-actions-end] - A slot for adding actionable `calcite-action` elements after the filter component.
  * @slot [filter-no-results] - When `filterEnabled` is `true`, a slot for adding content to display when no results are found.

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

@@ -5,7 +5,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { debounce } from "es-toolkit";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { s as slotChangeHasAssignedElement, h as getRootNode } from "../../chunks/dom.js";
+import { n as slotChangeHasContent, s as slotChangeHasAssignedElement, h 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";
@@ -27,6 +27,7 @@ const CSS = {
   containerHeight: "container-height"
 };
 const SLOTS = {
+  emptyContent: "empty-content",
   filterNoResults: "filter-no-results",
   filterActionsStart: "filter-actions-start",
   filterActionsEnd: "filter-actions-end"
@@ -58,6 +59,8 @@ class List extends LitElement {
     this.hasFilterActionsStart = false;
     this.hasFilterNoResults = false;
     this.sortHandleMenuItems = [];
+    this.hasContent = false;
+    this.hasEmptyContent = false;
     this.disabled = false;
     this.dragEnabled = false;
     this.filterEnabled = false;
@@ -94,7 +97,7 @@ class List extends LitElement {
     this.listen("calciteInternalListItemGroupDefaultSlotChange", this.handleCalciteInternalListItemGroupDefaultSlotChange);
   }
   static {
-    this.properties = { assistiveText: [16, {}, { state: true }], dataForFilter: [16, {}, { state: true }], hasFilterActionsEnd: [16, {}, { state: true }], hasFilterActionsStart: [16, {}, { state: true }], hasFilterNoResults: [16, {}, { state: true }], sortHandleMenuItems: [16, {}, { state: true }], canPull: [0, {}, { attribute: false }], canPut: [0, {}, { attribute: false }], disabled: [7, {}, { reflect: true, type: Boolean }], dragEnabled: [7, {}, { reflect: true, type: Boolean }], filterEnabled: [7, {}, { reflect: true, type: Boolean }], filterPredicate: [0, {}, { attribute: false }], filterLabel: [3, {}, { reflect: true }], filterPlaceholder: [3, {}, { reflect: true }], filterProps: [0, {}, { attribute: false }], filterText: [3, {}, { reflect: true }], filteredData: [0, {}, { attribute: false }], filteredItems: [0, {}, { attribute: false }], group: [3, {}, { reflect: true }], interactionMode: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], numberingSystem: 1, scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], sortDisabled: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { assistiveText: [16, {}, { state: true }], dataForFilter: [16, {}, { state: true }], hasFilterActionsEnd: [16, {}, { state: true }], hasFilterActionsStart: [16, {}, { state: true }], hasFilterNoResults: [16, {}, { state: true }], sortHandleMenuItems: [16, {}, { state: true }], hasContent: [16, {}, { state: true }], hasEmptyContent: [16, {}, { state: true }], canPull: [0, {}, { attribute: false }], canPut: [0, {}, { attribute: false }], disabled: [7, {}, { reflect: true, type: Boolean }], dragEnabled: [7, {}, { reflect: true, type: Boolean }], filterEnabled: [7, {}, { reflect: true, type: Boolean }], filterPredicate: [0, {}, { attribute: false }], filterLabel: [3, {}, { reflect: true }], filterPlaceholder: [3, {}, { reflect: true }], filterProps: [0, {}, { attribute: false }], filterText: [3, {}, { reflect: true }], filteredData: [0, {}, { attribute: false }], filteredItems: [0, {}, { attribute: false }], group: [3, {}, { reflect: true }], interactionMode: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], numberingSystem: 1, scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], sortDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
@@ -102,6 +105,9 @@ class List extends LitElement {
   get hasActiveFilter() {
     return this.filterEnabled && this.filterText && this.filteredItems.length !== this.visibleItems.length;
   }
+  get showEmptyContentContainer() {
+    return !this.hasContent && this.hasEmptyContent;
+  }
   get showNoResultsContainer() {
     return this.filterEnabled && this.filterText && this.hasFilterNoResults && this.visibleItems.length && !this.filteredItems.length;
   }
@@ -339,10 +345,14 @@ class List extends LitElement {
   setParentList() {
     this.parentListEl = this.el.parentElement?.closest(listSelector);
   }
-  handleDefaultSlotChange() {
+  handleDefaultSlotChange(event) {
     if (this.parentListEl) {
       this.calciteInternalListDefaultSlotChange.emit();
     }
+    this.hasContent = slotChangeHasContent(event);
+  }
+  handleEmptyContentSlotChange(event) {
+    this.hasEmptyContent = slotChangeHasContent(event);
   }
   setListItemGroups() {
     this.listItemGroups = Array.from(this.el.querySelectorAll(listItemGroupSelector));
@@ -652,7 +662,7 @@ class List extends LitElement {
     return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap({
       [CSS.container]: true,
       [CSS.containerHeight]: this.listItems.length < 1 && loading
-    })}>${this.dragEnabled ? html`<span aria-live=assertive class=${safeClassMap(CSS.assistiveText)}>${this.assistiveText}</span>` : null}${this.renderItemAriaLive()}${loading ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} .loading=${loading}></calcite-scrim>` : null}<div .ariaBusy=${loading} .ariaLabel=${label || ""} class=${safeClassMap(CSS.table)} @keydown=${this.handleListKeydown} role=treegrid>${filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? html`<div class=${safeClassMap(CSS.sticky)} role=rowgroup><div role=row><div role=columnheader><calcite-stack class=${safeClassMap(CSS.stack)}><slot name=${SLOTS.filterActionsStart} @slotchange=${this.handleFilterActionsStartSlotChange} slot=${SLOTS$1.actionsStart}></slot><calcite-filter .ariaLabel=${filterPlaceholder} .disabled=${disabled} .filterProps=${effectiveFilterProps} .items=${dataForFilter} .label=${filterLabel} @calciteFilterChange=${this.handleFilterChange} .placeholder=${filterPlaceholder} .scale=${this.scale} .value=${filterText} ${ref(this.setFilterEl)}></calcite-filter><slot name=${SLOTS.filterActionsEnd} @slotchange=${this.handleFilterActionsEndSlotChange} slot=${SLOTS$1.actionsEnd}></slot></calcite-stack></div></div></div>` : null}<div class=${safeClassMap(CSS.tableContainer)} role=rowgroup><slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.setDefaultSlotEl)}></slot></div></div><div aria-live=polite .hidden=${!this.showNoResultsContainer}><slot name=${SLOTS.filterNoResults} @slotchange=${this.handleFilterNoResultsSlotChange}></slot></div></div>` });
+    })}>${this.dragEnabled ? html`<span aria-live=assertive class=${safeClassMap(CSS.assistiveText)}>${this.assistiveText}</span>` : null}${this.renderItemAriaLive()}${loading ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} .loading=${loading}></calcite-scrim>` : null}<div .ariaBusy=${loading} .ariaLabel=${label || ""} class=${safeClassMap(CSS.table)} @keydown=${this.handleListKeydown} role=treegrid>${filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? html`<div class=${safeClassMap(CSS.sticky)} role=rowgroup><div role=row><div role=columnheader><calcite-stack class=${safeClassMap(CSS.stack)}><slot name=${SLOTS.filterActionsStart} @slotchange=${this.handleFilterActionsStartSlotChange} slot=${SLOTS$1.actionsStart}></slot><calcite-filter .ariaLabel=${filterPlaceholder} .disabled=${disabled} .filterProps=${effectiveFilterProps} .items=${dataForFilter} .label=${filterLabel} @calciteFilterChange=${this.handleFilterChange} .placeholder=${filterPlaceholder} .scale=${this.scale} .value=${filterText} ${ref(this.setFilterEl)}></calcite-filter><slot name=${SLOTS.filterActionsEnd} @slotchange=${this.handleFilterActionsEndSlotChange} slot=${SLOTS$1.actionsEnd}></slot></calcite-stack></div></div></div>` : null}<div class=${safeClassMap(CSS.tableContainer)} role=rowgroup><div .hidden=${!this.showEmptyContentContainer}><slot name=${SLOTS.emptyContent} @slotchange=${this.handleEmptyContentSlotChange}></slot></div><slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.setDefaultSlotEl)}></slot></div></div><div aria-live=polite .hidden=${!this.showNoResultsContainer}><slot name=${SLOTS.filterNoResults} @slotchange=${this.handleFilterNoResultsSlotChange}></slot></div></div>` });
   }
   renderItemAriaLive() {
     const { messages, filteredItems, parentListEl, messages: { _lang: effectiveLocale }, numberingSystem } = this;

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

@@ -4,7 +4,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { s as slotChangeHasAssignedElement, x as getFirstTabbable, g as getElementDir } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement, v as getFirstTabbable, g as getElementDir } 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

@@ -6,7 +6,7 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm } from "../../chunks/form.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
-import { y as intersects } from "../../chunks/dom.js";
+import { x 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-popover/customElement.js

@@ -5,7 +5,8 @@ import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { e as defaultOffsetDistance, r as reposition, a as disconnectFloatingUI, f as filterValidFlipPlacements, c as connectFloatingUI, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
-import { k as isPrimaryPointerButton, z as isKeyboardTriggeredClick, t as toAriaBoolean, q as queryElementRoots } from "../../chunks/dom.js";
+import { k as isPrimaryPointerButton, y as isKeyboardTriggeredClick, q as queryElementRoots } from "../../chunks/dom.js";
+import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { g as guid } from "../../chunks/guid.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { H as Heading } from "../../chunks/Heading.js";

package/dist/components/calcite-segmented-control-item/customElement.js

@@ -2,7 +2,8 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { n as slotChangeHasContent, t as toAriaBoolean } from "../../chunks/dom.js";
+import { n as slotChangeHasContent } from "../../chunks/dom.js";
+import { t as toAriaBoolean } from "../../chunks/aria.js";
 const SLOTS = {
   input: "input"
 };

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

@@ -5,10 +5,11 @@ import { u as useSizeOverride, i as interact } from "../../chunks/useSizeOverrid
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { A as ensureId, g as getElementDir, a as getStylePixelValue } from "../../chunks/dom.js";
+import { z as ensureId, g as getElementDir, a 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";
+import { a as ariaValueFromSize } from "../../chunks/aria.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as usePreventDocumentScroll } from "../../chunks/usePreventDocumentScroll.js";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
@@ -70,7 +71,10 @@ class Sheet extends LitElement {
       getBounds: () => ({
         inline: { min: this.resizeValues.minInlineSize, max: this.resizeValues.maxInlineSize },
         block: { min: this.resizeValues.minBlockSize, max: this.resizeValues.maxBlockSize }
-      })
+      }),
+      onResize: (resizeValues) => {
+        this.resizeValues = { ...resizeValues };
+      }
     });
     this.topLayer = useTopLayer({
       disabledOverride: () => this.embedded,
@@ -222,16 +226,7 @@ class Sheet extends LitElement {
     if (!this.contentRef.value) {
       return;
     }
-    const appliedSize = this.sizeOverride.resize(size);
-    this.resizeValues = {
-      ...this.resizeValues,
-      ...appliedSize.inline !== void 0 && {
-        inlineSize: appliedSize.inline
-      },
-      ...appliedSize.block !== void 0 && {
-        blockSize: appliedSize.block
-      }
-    };
+    this.sizeOverride.resize(size);
   }
   cleanupInteractions() {
     this.interaction?.unset();
@@ -247,7 +242,12 @@ class Sheet extends LitElement {
       return;
     }
     await this.el.componentOnReady();
-    const { inlineSize, minInlineSize, blockSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(contentRef.value);
+    const computedStyle = window.getComputedStyle(contentRef.value);
+    this.resizeValues.minInlineSize = parseInt(computedStyle.minInlineSize) || 0;
+    this.resizeValues.maxInlineSize = parseInt(computedStyle.maxInlineSize) || window.innerWidth;
+    this.resizeValues.minBlockSize = parseInt(computedStyle.minBlockSize) || 0;
+    this.resizeValues.maxBlockSize = parseInt(computedStyle.maxBlockSize) || window.innerHeight;
+    const { inlineSize, minInlineSize, blockSize, minBlockSize, maxInlineSize, maxBlockSize } = computedStyle;
     const values = {
       inlineSize: getStylePixelValue(inlineSize),
       blockSize: getStylePixelValue(blockSize),
@@ -256,7 +256,6 @@ class Sheet extends LitElement {
       maxInlineSize: getStylePixelValue(maxInlineSize) || window.innerWidth,
       maxBlockSize: getStylePixelValue(maxBlockSize) || window.innerHeight
     };
-    this.resizeValues = values;
     const rtl = getElementDir(el) === "rtl";
     this.interaction = interact(contentRef.value, { context: el.ownerDocument }).resizable({
       edges: {
@@ -332,7 +331,7 @@ class Sheet extends LitElement {
       [CSS_UTILITY.rtl]: dir === "rtl",
       [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale),
       [getDimensionClass("height", this.height, this.heightScale)]: !!(this.height || this.heightScale)
-    })} .popover=${!this.embedded ? "manual" : null} ${ref(this.transitionRef)}><calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim><div class=${safeClassMap(CSS.content)} id=${IDS.sheetContent} ${ref(this.contentRef)}><div class=${safeClassMap(CSS.contentContainer)}><slot></slot></div>${resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resizeEnabled} .ariaOrientation=${isBlockPosition ? "vertical" : "horizontal"} .ariaValueMax=${isBlockPosition ? resizeValues.maxBlockSize : resizeValues.maxInlineSize} .ariaValueMin=${isBlockPosition ? resizeValues.minBlockSize : resizeValues.minInlineSize} .ariaValueNow=${isBlockPosition ? resizeValues.blockSize : resizeValues.inlineSize} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.setResizeHandleEl)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null}</div></div>`;
+    })} .popover=${!this.embedded ? "manual" : null} ${ref(this.transitionRef)}><calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim><div class=${safeClassMap(CSS.content)} id=${IDS.sheetContent} ${ref(this.contentRef)}><div class=${safeClassMap(CSS.contentContainer)}><slot></slot></div>${resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resizeEnabled} .ariaOrientation=${isBlockPosition ? "vertical" : "horizontal"} .ariaValueMax=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.maxBlockSize, resizeValues.maxInlineSize)} .ariaValueMin=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.minBlockSize, resizeValues.minInlineSize)} .ariaValueNow=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.blockSize, resizeValues.inlineSize)} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.setResizeHandleEl)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null}</div></div>`;
   }
 }
 customElement("calcite-sheet", Sheet);

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

@@ -7,6 +7,7 @@ import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { g as getElementDir, a as getStylePixelValue, b as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
+import { a as ariaValueFromSize } from "../../chunks/aria.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const styles$1 = css`.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@keyframes in{0%{opacity:0}to{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0,-5px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0,5px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(.95,.95,1)}to{opacity:1;transform:scaleZ(1)}}`;
 const CSS = {
@@ -42,7 +43,10 @@ class ShellPanel extends LitElement {
       getBounds: () => ({
         inline: { min: this.resizeValues.minInlineSize, max: this.resizeValues.maxInlineSize },
         block: { min: this.resizeValues.minBlockSize, max: this.resizeValues.maxBlockSize }
-      })
+      }),
+      onResize: (resizeValues) => {
+        this.resizeValues = resizeValues;
+      }
     });
     this.resizeValues = {
       inlineSize: null,
@@ -96,16 +100,7 @@ class ShellPanel extends LitElement {
     if (!this.contentRef.value) {
       return;
     }
-    const appliedSize = this.sizeOverride.resize(size);
-    this.resizeValues = {
-      ...this.resizeValues,
-      ...appliedSize.inline !== void 0 && {
-        inlineSize: appliedSize.inline
-      },
-      ...appliedSize.block !== void 0 && {
-        blockSize: appliedSize.block
-      }
-    };
+    this.sizeOverride.resize(size);
   }
   handleKeyDown(event) {
     const { key, defaultPrevented, shiftKey } = event;
@@ -232,7 +227,8 @@ class ShellPanel extends LitElement {
   render() {
     const { collapsed, position, resizable, layout, displayMode, resizeValues } = this;
     const dir = getElementDir(this.el);
-    const separatorNode = !collapsed && resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resize} .ariaOrientation=${layout === "horizontal" ? "vertical" : "horizontal"} .ariaValueMax=${layout == "horizontal" ? resizeValues.maxBlockSize : resizeValues.maxInlineSize} .ariaValueMin=${layout == "horizontal" ? resizeValues.minBlockSize : resizeValues.minInlineSize} .ariaValueNow=${layout == "horizontal" ? resizeValues.blockSize : resizeValues.inlineSize} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.setResizeHandleEl)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null;
+    const isBlockPosition = layout === "horizontal";
+    const separatorNode = !collapsed && resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resize} .ariaOrientation=${isBlockPosition ? "vertical" : "horizontal"} .ariaValueMax=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.maxBlockSize, resizeValues.maxInlineSize)} .ariaValueMin=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.minBlockSize, resizeValues.minInlineSize)} .ariaValueNow=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.blockSize, resizeValues.inlineSize)} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.setResizeHandleEl)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null;
     const getAnimationDir = () => {
       if (layout === "horizontal") {
         return position === "start" ? CSS_UTILITY.calciteAnimateInDown : CSS_UTILITY.calciteAnimateInUp;

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

@@ -5,7 +5,7 @@ import { css, html, nothing } from "lit";
 import { LitElement, createEvent, stringOrBoolean, setAttribute, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { g as guid } from "../../chunks/guid.js";
-import { k as isPrimaryPointerButton, y as intersects } from "../../chunks/dom.js";
+import { k as isPrimaryPointerButton, x as intersects } from "../../chunks/dom.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";

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

@@ -5,7 +5,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { a as calciteSize24, b as calciteSize32, d as calciteSize44 } from "../../chunks/core.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { g as getElementDir, B as filterDirectChildren, f as focusElementInGroup, j as focusElement } from "../../chunks/dom.js";
+import { g as getElementDir, A as filterDirectChildren, f as focusElementInGroup, j as focusElement } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const ICON = {

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

@@ -4,7 +4,8 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, isServer, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
-import { o as nodeListToArray, g as getElementDir, t as toAriaBoolean } from "../../chunks/dom.js";
+import { o as nodeListToArray, g as getElementDir } from "../../chunks/dom.js";
+import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { g as guid } from "../../chunks/guid.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { g as getIconScale } from "../../chunks/component.js";

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

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

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

@@ -8,7 +8,7 @@ import { g as guid } from "../../chunks/guid.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { F as FloatingArrow } from "../../chunks/FloatingArrow.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
-import { q as queryElementRoots, D as getShadowRootNode } from "../../chunks/dom.js";
+import { q as queryElementRoots, C as getShadowRootNode } from "../../chunks/dom.js";
 const CSS = {
   positionContainer: "position-container",
   container: "container"

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

@@ -2,7 +2,8 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute } from "@arcgis/lumina";
-import { j as focusElement, o as nodeListToArray, b as slotChangeGetAssignedElements, t as toAriaBoolean } from "../../chunks/dom.js";
+import { j as focusElement, o as nodeListToArray, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { t as toAriaBoolean } from "../../chunks/aria.js";
 function isTreeItem(element) {
   return element?.tagName === "CALCITE-TREE-ITEM";
 }

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

@@ -4,7 +4,8 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
-import { B as filterDirectChildren, b as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement, g as getElementDir, t as toAriaBoolean } from "../../chunks/dom.js";
+import { A as filterDirectChildren, b as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement, g as getElementDir } from "../../chunks/dom.js";
+import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {