@esri/calcite-components 5.2.0-next.16 → 5.2.0-next.18

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

@@ -19,9 +19,9 @@ import type { ListDisplayMode, ListDragDetail } from "./interfaces.js";
  */
 export abstract class List extends LitElement {
   /** When provided, the method will be called to determine whether the element can move from the list. */
-  accessor canPull: (detail: ListDragDetail) => boolean | "clone";
+  accessor canPull: ((detail: ListDragDetail) => boolean | "clone") | undefined;
   /** When provided, the method will be called to determine whether the element can be added from another list. */
-  accessor canPut: (detail: ListDragDetail) => boolean;
+  accessor canPut: ((detail: ListDragDetail) => boolean) | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -112,8 +112,8 @@ export abstract class List extends LitElement {
   accessor loading: boolean;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
-      filterEnabled?: string;
-      total?: string;
+      filterEnabled?: string | undefined;
+      total?: string | undefined;
   };
   /** Specifies the Unicode numeral system used by the component for localization. */
   accessor numberingSystem: NumberingSystem | undefined;

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

@@ -64,9 +64,9 @@ export abstract class ListItem extends LitElement {
   accessor label: string | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
-      close?: string;
-      expand?: string;
-      collapse?: string;
+      close?: string | undefined;
+      expand?: string | undefined;
+      collapse?: string | undefined;
   };
   /** Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`. */
   accessor metadata: Record<string, unknown> | undefined;

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

@@ -1,9 +1,9 @@
 import type { ListItem } from "./customElement.js";
 
 export type ItemData = {
-  label: string;
-  description: string;
-  metadata: Record<string, unknown>;
+  label?: string;
+  description?: string;
+  metadata?: Record<string, unknown>;
   el: ListItem;
   heading?: string[];
 };

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

@@ -15,7 +15,7 @@ export abstract class Menu extends LitElement {
    */
   accessor layout: Layout;
   /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { more?: string; };
+  accessor messageOverrides: { more?: string | undefined; };
   /**
    * Sets focus on the component's first focusable element.
    *

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

@@ -40,8 +40,8 @@ export abstract class MenuItem extends LitElement {
   accessor label: string;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
-      submenu?: string;
-      open?: string;
+      submenu?: string | undefined;
+      open?: string | undefined;
   };
   /**
    * When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.

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

@@ -98,13 +98,13 @@ class Meter extends LitElement {
   }
   calculateValues() {
     const { min, max, low, high, value } = this;
-    const lowPercent = 100 * (low - min) / (max - min);
-    const highPercent = 100 * (high - min) / (max - min);
-    const currentPercent = 100 * (value - min) / (max - min);
-    if (!low || low < min || low > high || low > max) {
+    const lowPercent = low === void 0 ? NaN : 100 * (low - min) / (max - min);
+    const highPercent = high === void 0 ? NaN : 100 * (high - min) / (max - min);
+    const currentPercent = value === void 0 ? NaN : 100 * (value - min) / (max - min);
+    if (!low || low < min || high !== void 0 && low > high || low > max) {
       this.low = min;
     }
-    if (!high || high > max || high < low || high < min) {
+    if (!high || high > max || low !== void 0 && high < low || high < min) {
       this.high = max;
     }
     if (!value) {
@@ -140,10 +140,10 @@ class Meter extends LitElement {
     const { low, high, min, max, value } = this;
     const lowest = low ? low : min;
     const highest = high ? high : max;
-    const aboveLowest = value >= lowest;
-    const belowLowest = value < lowest;
-    const aboveHighest = value >= highest;
-    const belowHighest = value < highest;
+    const aboveLowest = value !== void 0 && value >= lowest;
+    const belowLowest = value !== void 0 && value < lowest;
+    const aboveHighest = value !== void 0 && value >= highest;
+    const belowHighest = value !== void 0 && value < highest;
     if (!value || !low && belowHighest || belowLowest) {
       return CSS.success;
     } else if (aboveLowest && belowHighest) {

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

@@ -19,7 +19,7 @@ import type { Scale } from "../interfaces.js";
  */
 export abstract class Navigation extends LitElement {
   /** When `navigationAction` is `true`, specifies an accessible label for the `calcite-action`. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change.
    *

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

@@ -40,6 +40,15 @@ class Navigation extends LitElement {
       this.updateNavigationUser();
       this.updateNestedNavigation();
     });
+    this.logoSlotHasElements = false;
+    this.navigationActionSlotHasElements = false;
+    this.primaryContentCenterSlotHasElements = false;
+    this.primaryContentEndSlotHasElements = false;
+    this.primaryContentStartSlotHasElements = false;
+    this.progressSlotHasElement = false;
+    this.secondarySlotHasElements = false;
+    this.tertiarySlotHasElements = false;
+    this.userSlotHasElements = false;
     this.navigationAction = false;
     this.scale = "m";
     this.calciteNavigationActionSelect = createEvent({ cancelable: false });

package/dist/components/calcite-navigation-logo/customElement.d.ts

@@ -17,15 +17,15 @@ export abstract class NavigationLogo extends LitElement {
    */
   accessor active: boolean;
   /** Specifies a description for the component. Displays below the `heading`. */
-  accessor description: string;
+  accessor description: string | undefined;
   /** Specifies the component's heading text. */
-  accessor heading: string;
+  accessor heading: string | undefined;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel;
+  accessor headingLevel: HeadingLevel | undefined;
   /** Specifies the URL destination of the component, which can be set as an absolute or relative path. */
-  accessor href: string;
+  accessor href: string | undefined;
   /** Specifies an icon to display. */
-  accessor icon: IconName;
+  accessor icon: IconName | undefined;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -33,21 +33,21 @@ export abstract class NavigationLogo extends LitElement {
    */
   accessor iconFlipRtl: boolean;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * Defines the relationship between the `href` value and the current document.
    *
    * @see [MDN - rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
    */
-  accessor rel: string;
+  accessor rel: string | undefined;
   /**
    * Specifies where to open the linked document defined in the `href` property.
    *
    * @see [MDN - target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
    */
-  accessor target: string;
+  accessor target: string | undefined;
   /** Specifies the `src` to an image. */
-  accessor thumbnail: string;
+  accessor thumbnail: string | undefined;
   /**
    * Sets focus on the component.
    *

package/dist/components/calcite-navigation-logo/customElement.js

@@ -20,6 +20,7 @@ class NavigationLogo extends LitElement {
   constructor() {
     super(...arguments);
     this.focusSetter = useSetFocus()(this);
+    this.active = false;
     this.iconFlipRtl = false;
     this.scale = "m";
   }

package/dist/components/calcite-navigation-user/customElement.d.ts

@@ -17,9 +17,9 @@ export abstract class NavigationUser extends LitElement {
    */
   accessor active: boolean;
   /** Specifies the full name of the user. */
-  accessor fullName: string;
+  accessor fullName: string | undefined;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * When `true`, hides the `fullName` and `username` contents.
    *
@@ -27,11 +27,11 @@ export abstract class NavigationUser extends LitElement {
    */
   accessor textDisabled: boolean;
   /** Specifies the `src` to an image (remember to add a token if the user is private). */
-  accessor thumbnail: string;
+  accessor thumbnail: string | undefined;
   /** Specifies the unique id of the user. */
-  accessor userId: string;
+  accessor userId: string | undefined;
   /** Specifies the username of the user. */
-  accessor username: string;
+  accessor username: string | undefined;
   /**
    * Sets focus on the component.
    *

package/dist/components/calcite-navigation-user/customElement.js

@@ -16,6 +16,7 @@ class NavigationUser extends LitElement {
   constructor() {
     super(...arguments);
     this.focusSetter = useSetFocus()(this);
+    this.active = false;
     this.textDisabled = false;
     this.scale = "m";
   }

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

@@ -41,7 +41,7 @@ export abstract class Notice extends LitElement {
    */
   accessor closable: boolean;
   /** When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */
-  accessor icon: IconName | boolean;
+  accessor icon: IconName | boolean | undefined;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -55,7 +55,7 @@ export abstract class Notice extends LitElement {
    */
   accessor kind: Extract<"brand" | "danger" | "info" | "success" | "warning" | "neutral", Kind>;
   /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { close?: string; };
+  accessor messageOverrides: { close?: string | undefined; };
   /**
    * When `true`, the component is visible.
    *

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

@@ -9,7 +9,7 @@ export abstract class Option extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * When `true`, the component is selected.
    *

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

@@ -14,6 +14,7 @@ class Option extends LitElement {
       this.calciteInternalOptionChange.emit();
     });
     this.disabled = false;
+    this.selected = false;
     this.calciteInternalOptionChange = createEvent({ cancelable: false });
   }
   static {

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

@@ -20,10 +20,10 @@ export abstract class Pagination extends LitElement {
   accessor groupSeparator: boolean;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
-      next?: string;
-      previous?: string;
-      first?: string;
-      last?: string;
+      next?: string | undefined;
+      previous?: string | undefined;
+      first?: string | undefined;
+      last?: string | undefined;
   };
   /** Specifies the Unicode numeral system used by the component for localization. */
   accessor numberingSystem: NumberingSystem | undefined;

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

@@ -119,10 +119,10 @@ export abstract class Panel extends LitElement {
   accessor menuPlacement: LogicalPlacement;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
-      close?: string;
-      options?: string;
-      collapse?: string;
-      expand?: string;
+      close?: string | undefined;
+      options?: string | undefined;
+      collapse?: string | undefined;
+      expand?: string | undefined;
   };
   /**
    * Specifies the type of positioning to use for overlaid content, where:

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

@@ -61,7 +61,7 @@ export abstract class Popover extends LitElement {
    */
   accessor label: string;
   /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { close?: string; };
+  accessor messageOverrides: { close?: string | undefined; };
   /** Specifies the distance to position the component away from the `referenceElement`. */
   accessor offsetDistance: number;
   /**

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

@@ -214,6 +214,7 @@ class RadioButton extends LitElement {
         currentIndex = index;
         return true;
       }
+      return false;
     });
     switch (adjustedKey) {
       case "ArrowLeft":

package/dist/components/calcite-radio-button-group/customElement.d.ts

@@ -26,7 +26,7 @@ export abstract class RadioButtonGroup extends LitElement {
    */
   accessor layout: Extract<"horizontal" | "vertical", Layout>;
   /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { required?: string; };
+  accessor messageOverrides: { required?: string | undefined; };
   /**
    * Specifies the name of the component. Required to pass the component's `value` on form submission.
    *

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

@@ -30,9 +30,9 @@ export abstract class Rating extends LitElement {
   accessor labelText: string | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
-      rating?: string;
-      required?: string;
-      stars?: string;
+      rating?: string | undefined;
+      required?: string | undefined;
+      stars?: string | undefined;
   };
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
   accessor name: string | undefined;

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

@@ -13,5 +13,5 @@ export abstract class Scrim extends LitElement {
    */
   accessor loading: boolean;
   /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { loading?: string; };
+  accessor messageOverrides: { loading?: string | undefined; };
 }

package/dist/components/calcite-segmented-control/customElement.d.ts

@@ -24,9 +24,9 @@ export abstract class SegmentedControl 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 the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /**
    * Defines the layout of the component.
    *
@@ -34,9 +34,9 @@ export abstract class SegmentedControl extends LitElement {
    */
   accessor layout: Extract<"horizontal" | "vertical", Layout>;
   /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { required?: string; };
+  accessor messageOverrides: { required?: string | undefined; };
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
-  accessor name: string;
+  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 +59,9 @@ export abstract class SegmentedControl 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.
    *

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

@@ -185,7 +185,7 @@ class SegmentedControl extends LitElement {
       return;
     }
     const { items } = this;
-    let match = null;
+    let match;
     items.forEach((item) => {
       const matches = item === selected;
       if (matches && !item.checked || !matches && item.checked) {

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,11 @@ export abstract class Select extends LitElement {
    */
   accessor label: string;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { required?: string; };
+  accessor messageOverrides: { required?: string | undefined; };
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
-  accessor name: string;
+  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 +59,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.
    *

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.
@@ -52,9 +52,9 @@ export abstract class Sheet extends LitElement {
    * `"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).
    */
-  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.
    *
@@ -69,7 +69,7 @@ export abstract class Sheet extends LitElement {
    */
   accessor label: string;
   /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { resizeEnabled?: string; };
+  accessor messageOverrides: { resizeEnabled?: string | undefined; };
   /** @internal */
   protected messages: Partial<{ resizeEnabled: string; }> & T9nMeta<{ resizeEnabled: string; }>;
   /**
@@ -104,7 +104,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.js

@@ -24,7 +24,6 @@ const SLOTS = {
   footer: "footer",
   alerts: "alerts",
   sheets: "sheets",
-  modals: "modals",
   dialogs: "dialogs"
 };
 class Shell extends LitElement {
@@ -34,7 +33,6 @@ class Shell extends LitElement {
     this.hasDialogs = false;
     this.hasFooter = false;
     this.hasHeader = false;
-    this.hasModals = false;
     this.hasOnlyPanelBottom = false;
     this.hasPanelBottom = false;
     this.hasPanelTop = false;
@@ -45,7 +43,7 @@ class Shell extends LitElement {
     this.listen("calciteInternalShellPanelResizeEnd", this.handleCalciteInternalShellPanelResizeEnd);
   }
   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 }], 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 }] };
   }
   static {
     this.styles = styles;
@@ -81,12 +79,6 @@ 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;
-    });
-  }
   handlePanelTopChange(event) {
     this.hasPanelTop = slotChangeHasAssignedElement(event);
     slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel")).forEach((el) => {
@@ -131,9 +123,6 @@ 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>`;
   }
@@ -162,7 +151,7 @@ class Shell extends LitElement {
     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>`;
   }
   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()}`;