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

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

@@ -2,7 +2,7 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { m as slotChangeHasContent } from "../../chunks/dom.js";
+import { n as slotChangeHasContent } from "../../chunks/dom.js";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
 const SLOTS = {
   input: "input"
@@ -16,7 +16,7 @@ const CSS = {
   icon: "icon",
   iconSolo: "icon--solo"
 };
-const styles = css`:host{display:flex;cursor:pointer;align-self:stretch;font-weight:var(--calcite-font-weight-normal);outline-color:transparent;transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out}.label{pointer-events:none;margin:.125rem;box-sizing:border-box;display:flex;flex:1 1 0%;align-items:center;color:var(--calcite-segmented-control-color, var(--calcite-color-text-3));background-color:var(--calcite-segmented-control-background-color);box-shadow:var(--calcite-segmented-control-shadow);transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out,color var(--calcite-internal-animation-timing-fast) ease-in-out}.label--horizontal{justify-content:center}:host(:focus){outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-offset:-1px;z-index:var(--calcite-z-index)}.label--scale-s{padding-inline:.5rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);padding-block:.125rem}.label--scale-m{padding-inline:.75rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);padding-block:.375rem}.label--scale-l{padding-inline:1rem;padding-block:var(--calcite-space-sm-plus);font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host(:hover) .label{background-color:var(--calcite-segmented-control-background-color, var(--calcite-color-foreground-2));color:var(--calcite-segmented-control-color, var(--calcite-color-text-1))}:host(:active) .label{background-color:var(--calcite-segmented-control-background-color, var(--calcite-color-foreground-3))}:host([checked]) .label{cursor:default;background-color:var(--calcite-segmented-control-background-color, var(--calcite-color-brand));color:var(--calcite-segmented-control-color, var(--calcite-color-text-inverse))}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{background-color:var(--calcite-segmented-control-background-color, var(--calcite-color-foreground-1));box-shadow:var(--calcite-segmented-control-shadow, inset 0 0 0 1px var(--calcite-color-brand));color:var(--calcite-segmented-control-color, var(--calcite-color-brand))}:host([checked]) .label--outline{background-color:var(--calcite-segmented-control-background-color, transparent)}::slotted(input){display:none}@media(forced-colors:active){:host([checked]) .label{background-color:highlight}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{outline:2px solid transparent;outline-offset:2px}:host([checked]) .label:not([class~=label--outline]) .icon{color:highlightText}}.icon{position:relative;margin:0;display:inline-flex;line-height:inherit;margin-inline-start:var(--calcite-internal-segmented-control-icon-margin-start);margin-inline-end:var(--calcite-internal-segmented-control-icon-margin-end);--calcite-icon-color: var(--calcite-segmented-control-icon-color)}:host([icon-start]) .label--scale-s{--calcite-internal-segmented-control-icon-margin-end: .5rem}:host([icon-end]) .label--scale-s{--calcite-internal-segmented-control-icon-margin-start: .5rem}:host([icon-start]) .label--scale-m{--calcite-internal-segmented-control-icon-margin-end: .75rem}:host([icon-end]) .label--scale-m{--calcite-internal-segmented-control-icon-margin-start: .75rem}:host([icon-start]) .label--scale-l{--calcite-internal-segmented-control-icon-margin-end: 1rem}:host([icon-end]) .label--scale-l{--calcite-internal-segmented-control-icon-margin-start: 1rem}.label .icon--solo{--calcite-internal-segmented-control-icon-margin-start: 0;--calcite-internal-segmented-control-icon-margin-end: 0}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:flex;cursor:pointer;align-self:stretch;font-weight:var(--calcite-font-weight-normal);outline-color:transparent;transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out}.label{pointer-events:none;margin:.125rem;box-sizing:border-box;display:flex;flex:1 1 0%;align-items:center;color:var(--calcite-segmented-control-color, var(--calcite-color-text-3));background-color:var(--calcite-segmented-control-background-color);box-shadow:var(--calcite-segmented-control-shadow);border-radius:max(0px,var(--calcite-segmented-control-corner-radius, var(--calcite-corner-radius)) - 2px);transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out,color var(--calcite-internal-animation-timing-fast) ease-in-out}.label--horizontal{justify-content:center}:host(:focus){outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-offset:-1px;z-index:var(--calcite-z-index)}.label--scale-s{padding-inline:.5rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);padding-block:.125rem}.label--scale-m{padding-inline:.75rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);padding-block:.375rem}.label--scale-l{padding-inline:1rem;padding-block:var(--calcite-space-sm-plus);font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host(:hover) .label{background-color:var(--calcite-segmented-control-background-color, var(--calcite-color-foreground-2));color:var(--calcite-segmented-control-color, var(--calcite-color-text-1))}:host(:active) .label{background-color:var(--calcite-segmented-control-background-color, var(--calcite-color-foreground-3))}:host([checked]) .label{cursor:default;background-color:var(--calcite-segmented-control-background-color, var(--calcite-color-brand));color:var(--calcite-segmented-control-color, var(--calcite-color-text-inverse))}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{background-color:var(--calcite-segmented-control-background-color, var(--calcite-color-foreground-1));box-shadow:var(--calcite-segmented-control-shadow, inset 0 0 0 1px var(--calcite-color-brand));color:var(--calcite-segmented-control-color, var(--calcite-color-brand))}:host([checked]) .label--outline{background-color:var(--calcite-segmented-control-background-color, transparent)}::slotted(input){display:none}@media(forced-colors:active){:host([checked]) .label{background-color:highlight}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{outline:2px solid transparent;outline-offset:2px}:host([checked]) .label:not([class~=label--outline]) .icon{color:highlightText}}.icon{position:relative;margin:0;display:inline-flex;line-height:inherit;margin-inline-start:var(--calcite-internal-segmented-control-icon-margin-start);margin-inline-end:var(--calcite-internal-segmented-control-icon-margin-end);--calcite-icon-color: var(--calcite-segmented-control-icon-color)}:host([icon-start]) .label--scale-s{--calcite-internal-segmented-control-icon-margin-end: .5rem}:host([icon-end]) .label--scale-s{--calcite-internal-segmented-control-icon-margin-start: .5rem}:host([icon-start]) .label--scale-m{--calcite-internal-segmented-control-icon-margin-end: .75rem}:host([icon-end]) .label--scale-m{--calcite-internal-segmented-control-icon-margin-start: .75rem}:host([icon-start]) .label--scale-l{--calcite-internal-segmented-control-icon-margin-end: 1rem}:host([icon-end]) .label--scale-l{--calcite-internal-segmented-control-icon-margin-start: 1rem}.label .icon--solo{--calcite-internal-segmented-control-icon-margin-start: 0;--calcite-internal-segmented-control-icon-margin-end: 0}:host([hidden]){display:none}[hidden]{display:none}`;
 class SegmentedControlItem extends LitElement {
   constructor() {
     super(...arguments);
@@ -29,7 +29,7 @@ class SegmentedControlItem extends LitElement {
     this.calciteInternalSegmentedControlItemChange = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { hasSlottedContent: [16, {}, { state: true }], appearance: 1, checked: [7, {}, { reflect: true, type: Boolean }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], iconStart: [3, { type: String }, { reflect: true }], layout: 1, scale: 1, value: 1 };
+    this.properties = { hasSlottedContent: [16, {}, { state: true }], appearance: 1, checked: [7, {}, { reflect: true, type: Boolean }], iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], iconStart: [3, {}, { reflect: true }], layout: 1, scale: 1, value: 1 };
   }
   static {
     this.styles = styles;

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

@@ -24,7 +24,7 @@ export abstract class Select extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
-  accessor form: string;
+  accessor form: string | undefined;
   /**
    * Specifies an accessible label for the component.
    *
@@ -32,11 +32,19 @@ export abstract class Select extends LitElement {
    */
   accessor label: string;
   /** Specifies the component's label text. */
-  accessor labelText: string;
-  /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { required?: string; };
-  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
-  accessor name: string;
+  accessor labelText: string | undefined;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { required?: string | undefined; };
+  /**
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
+   */
+  accessor name: string | undefined;
   /**
    * When `true` and the component resides in a form,
    * the component must have a value in order for the form to submit.
@@ -59,9 +67,9 @@ export abstract class Select extends LitElement {
    */
   accessor status: Status;
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean;
+  accessor validationIcon: IconName | boolean | undefined;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string;
+  accessor validationMessage: string | undefined;
   /**
    * The component's current validation state.
    *
@@ -71,7 +79,9 @@ export abstract class Select extends LitElement {
   /** The component's `selectedOption` value. */
   accessor value: string;
   /**
-   * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
+   * Specifies the width of the component.
+   *
+   * [Deprecated] The `"half"` value is deprecated in v3.0.0, removal target v6.0.0 - use `"full"` instead.
    *
    * @default "auto"
    */

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

@@ -4,7 +4,8 @@ import { css, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
@@ -38,6 +39,7 @@ class Select extends LitElement {
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
+    this.labelable = useLabel(this);
     this.disabled = false;
     this.required = false;
     this.scale = "m";
@@ -49,7 +51,7 @@ class Select extends LitElement {
     this.listen("calciteInternalOptionGroupChange", this.handleOptionOrGroupChange);
   }
   static {
-    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], label: 1, labelText: 1, name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectedOption: [0, {}, { attribute: false }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1, width: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }] };
+    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], label: 1, labelText: 1, name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectedOption: [0, {}, { attribute: false }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1, width: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }] };
   }
   static {
     this.formAssociated = true;
@@ -66,7 +68,6 @@ class Select extends LitElement {
       subtree: true,
       childList: true
     });
-    connectLabel(this);
   }
   willUpdate(changes) {
     if (changes.has("value") && (this.hasUpdated || this.value !== null)) {
@@ -88,7 +89,6 @@ class Select extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
-    disconnectLabel(this);
   }
   handleInternalSelectChange() {
     const selected = this.selectRef.value.selectedOptions[0];

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

@@ -23,7 +23,7 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  */
 export abstract class Sheet extends LitElement {
   /** Passes a function to run before the component closes. */
-  accessor beforeClose: (el: Sheet) => Promise<void>;
+  accessor beforeClose: ((el: Sheet) => Promise<void>) | undefined;
   /**
    * Specifies the display mode - `"float"` separates content from main layout,
    * and `"overlay"` displays on top of center content.
@@ -44,17 +44,17 @@ export abstract class Sheet extends LitElement {
    */
   accessor focusTrapDisabled: boolean;
   /**
-   * Specifies custom focus trap configuration on the component, where
+   * Specifies custom focus trap configuration on the component.
    *
-   * `"allowOutsideClick"` allows outside clicks,
-   * `"initialFocus"` enables initial focus,
-   * `"returnFocusOnDeactivate"` returns focus when not active,
-   * `"extraContainers"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body, and
-   * `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).
+   * - `"allowOutsideClick"` allows outside clicks.
+   * - `"initialFocus"` enables initial focus.
+   * - `"returnFocusOnDeactivate"` returns focus when not active.
+   * - `"extraContainers"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body.
+   * - `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).
    */
-  accessor focusTrapOptions: Partial<FocusTrapOptions>;
+  accessor focusTrapOptions: Partial<FocusTrapOptions> | undefined;
   /** Specifies the component's height. */
-  accessor height: Height;
+  accessor height: Height | undefined;
   /**
    * When `position` is `"block-start"` or `"block-end"`, specifies the component's height.
    *
@@ -68,8 +68,12 @@ export abstract class Sheet extends LitElement {
    * @required
    */
   accessor label: string;
-  /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { resizeEnabled?: string; };
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { resizeEnabled?: string | undefined; };
   /** @internal */
   protected messages: Partial<{ resizeEnabled: string; }> & T9nMeta<{ resizeEnabled: string; }>;
   /**
@@ -104,7 +108,7 @@ export abstract class Sheet extends LitElement {
    */
   accessor topLayerDisabled: boolean;
   /** Specifies the component's width. */
-  accessor width: Extract<Width, Scale>;
+  accessor width: Extract<Width, Scale> | undefined;
   /**
    * When `position` is `"inline-start"` or `"inline-end"`, specifies the component's width.
    *

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 { B as ensureId, g as getStylePixelValue } from "../../chunks/dom.js";
+import { 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";
@@ -149,9 +149,6 @@ class Sheet extends LitElement {
     if (changes.has("open") && (this.hasUpdated || this.open !== false) || changes.has("position") && (this.hasUpdated || this.position !== "inline-start") || changes.has("resizable") && (this.hasUpdated || this.resizable !== false) || changes.has("direction")) {
       this.refreshResize();
     }
-    if (this.contentRef.value) {
-      this.contentId = ensureId(this.contentRef.value);
-    }
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -177,9 +174,6 @@ class Sheet extends LitElement {
     const { position } = this;
     return position === "block-start" || position === "block-end" ? ICONS.dragVertical : ICONS.dragHorizontal;
   }
-  getContentRefDOMRect() {
-    return this.contentRef.value?.getBoundingClientRect();
-  }
   handleKeyDown(event) {
     const { key, defaultPrevented, shiftKey } = event;
     const { contentRef, position, resizable, resizeValues: { maxBlockSize, maxInlineSize, minBlockSize, minInlineSize } } = this;
@@ -188,7 +182,7 @@ class Sheet extends LitElement {
     if (!resizable || !contentRef.value || defaultPrevented || !keys.includes(key)) {
       return;
     }
-    const rect = this.getContentRefDOMRect();
+    const rect = contentRef.value.getBoundingClientRect();
     const invertRTL = this.direction === "rtl" ? -1 : 1;
     const stepValue = shiftKey ? resizeShiftStep : resizeStep;
     switch (key) {
@@ -261,6 +255,8 @@ class Sheet extends LitElement {
       return;
     }
     const rtl = this.direction === "rtl";
+    const restrictSizeMin = this.resizeValues.minInlineSize === null || this.resizeValues.minBlockSize === null ? void 0 : { width: this.resizeValues.minInlineSize, height: this.resizeValues.minBlockSize };
+    const restrictSizeMax = this.resizeValues.maxInlineSize === null || this.resizeValues.maxBlockSize === null ? void 0 : { width: this.resizeValues.maxInlineSize, height: this.resizeValues.maxBlockSize };
     this.interaction = interact(contentRef.value, { context: el.ownerDocument }).resizable({
       edges: {
         top: position === "block-end" ? resizeHandleEl : false,
@@ -268,18 +264,7 @@ class Sheet extends LitElement {
         bottom: position === "block-start" ? resizeHandleEl : false,
         left: position === (rtl ? "inline-start" : "inline-end") ? resizeHandleEl : false
       },
-      modifiers: [
-        interact.modifiers.restrictSize({
-          min: {
-            width: this.resizeValues.minInlineSize,
-            height: this.resizeValues.minBlockSize
-          },
-          max: {
-            width: this.resizeValues.maxInlineSize,
-            height: this.resizeValues.maxBlockSize
-          }
-        })
-      ],
+      modifiers: [interact.modifiers.restrictSize({ min: restrictSizeMin, max: restrictSizeMax })],
       listeners: {
         move: ({ rect }) => {
           const isBlock = position === "block-start" || position === "block-end";
@@ -324,7 +309,7 @@ class Sheet extends LitElement {
     const { resizable, position, resizeValues } = this;
     const dir = this.direction;
     const isBlockPosition = position === "block-start" || position === "block-end";
-    setAttribute(this.el, "aria-describedby", this.contentId);
+    setAttribute(this.el, "aria-describedby", IDS.sheetContent);
     this.el.ariaLabel = this.label;
     this.el.ariaModal = "true";
     this.el.role = "dialog";
@@ -335,7 +320,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=${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>`;
+    })} .popover=${!this.embedded ? "manual" : void 0} ${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/customElement.d.ts

@@ -3,6 +3,8 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
 /**
  * @cssproperty [--calcite-shell-border-color] - Specifies the component's border color.
+ * @cssproperty [--calcite-shell-corner-radius] - Specifies the component's corner radius.
+ * @cssproperty [--calcite-shell-shadow] - Specifies the component's shadow.
  * @slot  - A slot for adding custom content. This content will appear between any leading and trailing panels added to the component, such as a map.
  * @slot [header] - A slot for adding header content. This content will be positioned at the top of the component.
  * @slot [footer] - A slot for adding footer content. This content will be positioned at the bottom of the component.

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

@@ -3,14 +3,18 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
-import { s as slotChangeHasAssignedElement, a as slotChangeGetAssignedElements } from "../../chunks/dom.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{position:absolute;inset:0;display:flex;block-size:100%;inline-size:100%;flex-direction:column;overflow:hidden}.main{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;flex-direction:row;justify-content:space-between;overflow:hidden}.content{display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap;overflow:auto;justify-content:space-between}.content ::slotted(calcite-panel),.content ::slotted(calcite-flow){flex:1 1 auto;align-self:stretch;max-block-size:unset}.content--behind{position:absolute;inset:0;border-width:0px;z-index:calc(var(--calcite-z-index) - 1);display:initial}.content--non-interactive{pointer-events:none;display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap}::slotted(calcite-shell-panel){inline-size:unset}::slotted(.header .heading){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-normal)}slot[name=panel-start]::slotted(calcite-shell-panel),slot[name=panel-end]::slotted(calcite-shell-panel){position:relative;z-index:calc(var(--calcite-z-index) + 1)}slot[name=panel-end]::slotted(calcite-shell-panel){margin-inline-start:auto}::slotted(calcite-panel),::slotted(calcite-flow){border-width:var(--calcite-border-width-sm);border-color:var(--calcite-shell-border-color, var(--calcite-color-border-3));border-inline-start-width:var(--calcite-border-width-none);border-inline-end-width:var(--calcite-border-width-none);border-style:solid}slot[name=panel-top]::slotted(calcite-shell-panel:not([display-mode^=float])),slot[name=panel-bottom]::slotted(calcite-shell-panel:not([display-mode^=float])){border-color:var(--calcite-shell-border-color, var(--calcite-color-border-3));border-inline-start-width:var(--calcite-border-width-sm);border-inline-end-width:var(--calcite-border-width-sm)}.center-content{display:flex;flex-direction:column;justify-content:space-between;block-size:100%;inline-size:100%;min-inline-size:0}.content-bottom{justify-content:flex-end}::slotted(calcite-shell-panel){flex:none;align-self:stretch}::slotted(calcite-tip-manager){position:absolute;z-index:var(--calcite-z-index-toast);box-sizing:border-box}@keyframes in-up{0%{opacity:0;transform:translate3D(0,5px,0)}to{opacity:1;transform:translateZ(0)}}::slotted(calcite-tip-manager){animation:in-up var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:.25rem;--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);inset-block-end:.5rem;inset-inline:var(--calcite-shell-tip-spacing, 26vw)}slot[name=panel-bottom]::slotted(calcite-shell-panel){margin-block-start:auto}slot[name=panel-top]::slotted(calcite-shell-panel){margin-block-end:auto}.position-wrapper{position:absolute;pointer-events:none;inset:0}:host([hidden]){display:none}[hidden]{display:none}`;
+import { createRef, ref } from "lit/directives/ref.js";
+import { s as slotChangeHasAssignedElement, a as slotChangeGetAssignedElements, g as getStylePixelValue } from "../../chunks/dom.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{position:absolute;inset:0;display:flex;block-size:100%;inline-size:100%;flex-direction:column;overflow:hidden;border-radius:var(--calcite-shell-corner-radius);box-shadow:var(--calcite-shell-shadow)}.main{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;flex-direction:row;justify-content:space-between;overflow:hidden}.content{display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap;overflow:auto;justify-content:space-between}.content ::slotted(calcite-panel),.content ::slotted(calcite-flow){flex:1 1 auto;align-self:stretch;max-block-size:unset}.content--behind{position:absolute;inset:0;border-width:0px;z-index:calc(var(--calcite-z-index) - 1);display:initial}.content--non-interactive{pointer-events:none;display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap}::slotted(calcite-shell-panel){inline-size:unset}::slotted(.header .heading){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-normal)}slot[name=panel-start]::slotted(calcite-shell-panel),slot[name=panel-end]::slotted(calcite-shell-panel){position:relative;z-index:calc(var(--calcite-z-index) + 1)}slot[name=panel-end]::slotted(calcite-shell-panel){margin-inline-start:auto}::slotted(calcite-panel),::slotted(calcite-flow){border-width:var(--calcite-border-width-sm);border-color:var(--calcite-shell-border-color, var(--calcite-color-border-3));border-inline-start-width:var(--calcite-border-width-none);border-inline-end-width:var(--calcite-border-width-none);border-style:solid}slot[name=panel-top]::slotted(calcite-shell-panel:not([display-mode^=float])),slot[name=panel-bottom]::slotted(calcite-shell-panel:not([display-mode^=float])){border-color:var(--calcite-shell-border-color, var(--calcite-color-border-3));border-inline-start-width:var(--calcite-border-width-sm);border-inline-end-width:var(--calcite-border-width-sm)}.center-content{display:flex;flex-direction:column;justify-content:space-between;block-size:100%;inline-size:100%;min-inline-size:0}.content-bottom{justify-content:flex-end}::slotted(calcite-shell-panel){flex:none;align-self:stretch}::slotted(calcite-tip-manager){position:absolute;z-index:var(--calcite-z-index-toast);box-sizing:border-box}@keyframes in-up{0%{opacity:0;transform:translate3D(0,5px,0)}to{opacity:1;transform:translateZ(0)}}::slotted(calcite-tip-manager){animation:in-up var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:.25rem;--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);inset-block-end:.5rem;inset-inline:var(--calcite-shell-tip-spacing, 26vw)}slot[name=panel-bottom]::slotted(calcite-shell-panel){margin-block-start:auto}slot[name=panel-top]::slotted(calcite-shell-panel){margin-block-end:auto}.position-wrapper{position:absolute;pointer-events:none;inset:0}.main.has-resizable-panel-top ::slotted(calcite-panel){border-block-start:none}.main.has-resizable-panel-bottom ::slotted(calcite-panel){border-block-end:none}.main.has-action-bar-position-panel ::slotted(calcite-panel){border:0}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   main: "main",
   content: "content",
   contentBehind: "content--behind",
   contentBottom: "content-bottom",
   contentNonInteractive: "content--non-interactive",
+  hasActionBarPositionPanel: "has-action-bar-position-panel",
+  hasResizablePanelBottom: "has-resizable-panel-bottom",
+  hasResizablePanelTop: "has-resizable-panel-top",
   footer: "footer",
   positionedSlotWrapper: "positioned-slot-wrapper",
   contentBehindCenterContent: "center-content"
@@ -24,28 +28,43 @@ const SLOTS = {
   footer: "footer",
   alerts: "alerts",
   sheets: "sheets",
-  modals: "modals",
   dialogs: "dialogs"
 };
+const panelSlots = ["panel-start", "panel-end", "panel-top", "panel-bottom"];
 class Shell extends LitElement {
   constructor() {
     super();
+    this.defaultSlotRef = createRef();
+    this.panelBottomSlotRef = createRef();
+    this.panelEndSlotRef = createRef();
+    this.panelStartSlotRef = createRef();
+    this.panelTopSlotRef = createRef();
+    this.panelSlotState = {
+      "panel-start": { elements: [], resizable: false },
+      "panel-end": { elements: [], resizable: false },
+      "panel-top": { elements: [], resizable: false },
+      "panel-bottom": { elements: [], resizable: false }
+    };
     this.hasAlerts = false;
     this.hasDialogs = false;
     this.hasFooter = false;
     this.hasHeader = false;
-    this.hasModals = false;
+    this.hasActionBarPositionPanel = false;
     this.hasOnlyPanelBottom = false;
     this.hasPanelBottom = false;
     this.hasPanelTop = false;
+    this.hasResizablePanelBottom = false;
+    this.hasResizablePanelTop = false;
     this.hasSheets = false;
     this.panelIsResizing = false;
     this.contentBehind = false;
     this.listen("calciteInternalShellPanelResizeStart", this.handleCalciteInternalShellPanelResizeStart);
     this.listen("calciteInternalShellPanelResizeEnd", this.handleCalciteInternalShellPanelResizeEnd);
+    this.listen("calciteInternalShellPanelResizableChange", this.handleCalciteInternalShellPanelResizableChange);
+    this.listen("calciteInternalShellPanelActionBarPositionChange", this.handleCalciteInternalShellPanelActionBarPositionChange);
   }
   static {
-    this.properties = { hasAlerts: [16, {}, { state: true }], hasDialogs: [16, {}, { state: true }], hasFooter: [16, {}, { state: true }], hasHeader: [16, {}, { state: true }], hasModals: [16, {}, { state: true }], hasOnlyPanelBottom: [16, {}, { state: true }], hasPanelBottom: [16, {}, { state: true }], hasPanelTop: [16, {}, { state: true }], hasSheets: [16, {}, { state: true }], panelIsResizing: [16, {}, { state: true }], contentBehind: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { hasAlerts: [16, {}, { state: true }], hasDialogs: [16, {}, { state: true }], hasFooter: [16, {}, { state: true }], hasHeader: [16, {}, { state: true }], hasActionBarPositionPanel: [16, {}, { state: true }], hasOnlyPanelBottom: [16, {}, { state: true }], hasPanelBottom: [16, {}, { state: true }], hasPanelTop: [16, {}, { state: true }], hasResizablePanelBottom: [16, {}, { state: true }], hasResizablePanelTop: [16, {}, { state: true }], hasSheets: [16, {}, { state: true }], panelIsResizing: [16, {}, { state: true }], contentBehind: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
@@ -55,6 +74,20 @@ class Shell extends LitElement {
       this.hasOnlyPanelBottom = !this.hasPanelTop && this.hasPanelBottom;
     }
   }
+  handleCalciteInternalShellPanelResizableChange(event) {
+    const panel = event.composedPath().find((el) => el?.matches?.("calcite-shell-panel"));
+    if (panel?.slot && panelSlots.includes(panel.slot)) {
+      this.updateResizableSlotState(panel.slot);
+    }
+    event.stopPropagation();
+  }
+  handleCalciteInternalShellPanelActionBarPositionChange(event) {
+    const panel = event.composedPath().find((el) => el?.matches?.("calcite-shell-panel"));
+    if (panel?.slot && panelSlots.includes(panel.slot)) {
+      this.updateResizableSlotState(panel.slot);
+    }
+    event.stopPropagation();
+  }
   handleCalciteInternalShellPanelResizeStart(event) {
     this.panelIsResizing = true;
     event.stopPropagation();
@@ -81,37 +114,103 @@ class Shell extends LitElement {
       el.embedded = true;
     });
   }
-  handleModalsSlotChange(event) {
-    this.hasModals = !!slotChangeHasAssignedElement(event);
-    slotChangeGetAssignedElements(event)?.filter((el) => el?.matches("calcite-modal")).forEach((el) => {
-      el.embedded = true;
+  configurePanels(panels, layout, position) {
+    panels.forEach((panel) => {
+      const sizingPanel = panel;
+      panel.layout = layout;
+      panel.position = position;
+      sizingPanel.shellSizingDataProvider = (axis) => this.getShellPanelSizingData(panel, axis);
     });
   }
+  getDefaultSlotMinSize(axis) {
+    return this.defaultSlotRef.value?.assignedElements({ flatten: true }).reduce((total, element) => {
+      const computedStyle = window.getComputedStyle(element);
+      return axis === "inline" ? total + getStylePixelValue(computedStyle.borderInlineStartWidth) + getStylePixelValue(computedStyle.borderInlineEndWidth) : total + getStylePixelValue(computedStyle.borderBlockStartWidth) + getStylePixelValue(computedStyle.borderBlockEndWidth);
+    }, 0) ?? 0;
+  }
+  getDefaultSlotBounds() {
+    const defaultSlotElements = this.defaultSlotRef.value?.assignedElements({ flatten: true }) ?? [];
+    if (!defaultSlotElements.length) {
+      return null;
+    }
+    return defaultSlotElements.reduce((bounds, element) => {
+      const rect = element.getBoundingClientRect();
+      return bounds ? {
+        bottom: Math.max(bounds.bottom, rect.bottom),
+        left: Math.min(bounds.left, rect.left),
+        right: Math.max(bounds.right, rect.right),
+        top: Math.min(bounds.top, rect.top)
+      } : {
+        bottom: rect.bottom,
+        left: rect.left,
+        right: rect.right,
+        top: rect.top
+      };
+    }, null);
+  }
+  getShellPanelSizingData(panel, axis) {
+    const panelLayoutContainer = panel.assignedSlot?.parentElement;
+    if (!panelLayoutContainer) {
+      return null;
+    }
+    const containerRect = panelLayoutContainer.getBoundingClientRect();
+    const defaultSlotRect = this.getDefaultSlotBounds();
+    if (!defaultSlotRect) {
+      return {
+        availableSize: axis === "inline" ? containerRect.width : containerRect.height
+      };
+    }
+    const defaultSlotMinSize = this.getDefaultSlotMinSize(axis);
+    const isRTL = window.getComputedStyle(this).direction === "rtl";
+    let availableOccupiedSize;
+    if (axis === "inline") {
+      const isStart = panel.position === "start";
+      availableOccupiedSize = isRTL ? isStart ? containerRect.right - defaultSlotRect.left : defaultSlotRect.right - containerRect.left : isStart ? defaultSlotRect.right - containerRect.left : containerRect.right - defaultSlotRect.left;
+    } else {
+      availableOccupiedSize = panel.position === "start" ? defaultSlotRect.bottom - containerRect.top : containerRect.bottom - defaultSlotRect.top;
+    }
+    const availableSize = Math.max(Math.floor(availableOccupiedSize) - Math.ceil(defaultSlotMinSize), 0);
+    return {
+      availableSize
+    };
+  }
   handlePanelTopChange(event) {
+    const panelElements = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel"));
     this.hasPanelTop = slotChangeHasAssignedElement(event);
-    slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel")).forEach((el) => {
+    this.configurePanels(panelElements, "horizontal", "start");
+    panelElements.forEach((el) => {
       el.layout = "horizontal";
       el.position = "start";
     });
+    this.updateResizableSlotState("panel-top", panelElements);
   }
   handlePanelBottomChange(event) {
+    const panelElements = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel"));
     this.hasPanelBottom = slotChangeHasAssignedElement(event);
-    slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel")).forEach((el) => {
+    this.configurePanels(panelElements, "horizontal", "end");
+    panelElements.forEach((el) => {
       el.layout = "horizontal";
       el.position = "end";
     });
+    this.updateResizableSlotState("panel-bottom", panelElements);
   }
   handlePanelStartChange(event) {
-    slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel")).forEach((el) => {
+    const panelElements = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel"));
+    this.configurePanels(panelElements, "vertical", "start");
+    panelElements.forEach((el) => {
       el.layout = "vertical";
       el.position = "start";
     });
+    this.updateResizableSlotState("panel-start", panelElements);
   }
   handlePanelEndChange(event) {
-    slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel")).forEach((el) => {
+    const panelElements = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel"));
+    this.configurePanels(panelElements, "vertical", "end");
+    panelElements.forEach((el) => {
       el.layout = "vertical";
       el.position = "end";
     });
+    this.updateResizableSlotState("panel-end", panelElements);
   }
   handleDialogsSlotChange(event) {
     this.hasDialogs = !!slotChangeHasAssignedElement(event);
@@ -119,6 +218,21 @@ class Shell extends LitElement {
       el.embedded = true;
     });
   }
+  updateResizableSlotState(slot, panelElements = this.panelSlotState[slot].elements) {
+    this.panelSlotState[slot] = {
+      elements: panelElements,
+      resizable: panelElements.some((panel) => panel.resizable)
+    };
+    this.syncResizableState();
+    this.syncActionBarPositionPanelState();
+  }
+  syncActionBarPositionPanelState() {
+    this.hasActionBarPositionPanel = panelSlots.some((slot) => this.panelSlotState[slot].elements.some((panel) => !!panel.actionBarPosition));
+  }
+  syncResizableState() {
+    this.hasResizablePanelBottom = this.panelSlotState["panel-bottom"].resizable;
+    this.hasResizablePanelTop = this.panelSlotState["panel-top"].resizable;
+  }
   renderHeader() {
     return html`<div .hidden=${!this.hasHeader}>${keyed("header", html`<slot name=${SLOTS.header} @slotchange=${this.handleHeaderSlotChange}></slot>`)}</div>`;
   }
@@ -131,18 +245,15 @@ class Shell extends LitElement {
   renderSheets() {
     return html`<div .hidden=${!this.hasSheets}>${keyed("sheets", html`<slot name=${SLOTS.sheets} @slotchange=${this.handleSheetsSlotChange}></slot>`)}</div>`;
   }
-  renderModals() {
-    return html`<div .hidden=${!this.hasModals}>${keyed("modals", html`<slot name=${SLOTS.modals} @slotchange=${this.handleModalsSlotChange}></slot>`)}</div>`;
-  }
   renderDialogs() {
     return html`<div .hidden=${!this.hasDialogs}>${keyed("dialogs", html`<slot name=${SLOTS.dialogs} @slotchange=${this.handleDialogsSlotChange}></slot>`)}</div>`;
   }
   renderContent() {
     const { panelIsResizing } = this;
-    const defaultSlotNode = keyed("default-slot", html`<slot></slot>`);
+    const defaultSlotNode = keyed("default-slot", html`<slot ${ref(this.defaultSlotRef)}></slot>`);
     const defaultSlotContainerNode = panelIsResizing ? html`<div class=${safeClassMap(CSS.contentNonInteractive)}>${defaultSlotNode}</div>` : defaultSlotNode;
-    const panelBottomSlotNode = keyed("panel-bottom-slot", html`<slot name=${SLOTS.panelBottom} @slotchange=${this.handlePanelBottomChange}></slot>`);
-    const panelTopSlotNode = keyed("panel-top-slot", html`<slot name=${SLOTS.panelTop} @slotchange=${this.handlePanelTopChange}></slot>`);
+    const panelBottomSlotNode = keyed("panel-bottom-slot", html`<slot name=${SLOTS.panelBottom} @slotchange=${this.handlePanelBottomChange} ${ref(this.panelBottomSlotRef)}></slot>`);
+    const panelTopSlotNode = keyed("panel-top-slot", html`<slot name=${SLOTS.panelTop} @slotchange=${this.handlePanelTopChange} ${ref(this.panelTopSlotRef)}></slot>`);
     const contentContainerKey = "content-container";
     const content = this.contentBehind ? [
       keyed(contentContainerKey, html`<div class=${safeClassMap({
@@ -159,10 +270,15 @@ class Shell extends LitElement {
     return content;
   }
   renderMain() {
-    return html`<div class=${safeClassMap(CSS.main)}><slot name=${SLOTS.panelStart} @slotchange=${this.handlePanelStartChange}></slot>${this.renderContent()}<slot name=${SLOTS.panelEnd} @slotchange=${this.handlePanelEndChange}></slot></div>`;
+    return html`<div class=${safeClassMap({
+      [CSS.main]: true,
+      [CSS.hasActionBarPositionPanel]: this.hasActionBarPositionPanel,
+      [CSS.hasResizablePanelBottom]: this.hasResizablePanelBottom,
+      [CSS.hasResizablePanelTop]: this.hasResizablePanelTop
+    })}><slot name=${SLOTS.panelStart} @slotchange=${this.handlePanelStartChange} ${ref(this.panelStartSlotRef)}></slot>${this.renderContent()}<slot name=${SLOTS.panelEnd} @slotchange=${this.handlePanelEndChange} ${ref(this.panelEndSlotRef)}></slot></div>`;
   }
   renderPositionedSlots() {
-    return html`<div class=${safeClassMap(CSS.positionedSlotWrapper)}>${this.renderAlerts()}${this.renderModals()}${this.renderDialogs()}${this.renderSheets()}</div>`;
+    return html`<div class=${safeClassMap(CSS.positionedSlotWrapper)}>${this.renderAlerts()}${this.renderDialogs()}${this.renderSheets()}</div>`;
   }
   render() {
     return html`${this.renderHeader()}${this.renderMain()}${this.renderFooter()}${this.renderPositionedSlots()}`;