@esri/calcite-components 5.2.0-next.2 → 5.2.0-next.21

package/dist/components/calcite-input-time-zone/customElement.js

@@ -81,8 +81,8 @@ async function createTimeZoneItems(locale, messages, mode, referenceDate, standa
         if (timeZoneA.startsWith(gmtTimeZoneString) && timeZoneB.startsWith(gmtTimeZoneString)) {
           const offsetStringA = timeZoneA.substring(gmtTimeZoneString.length);
           const offsetStringB = timeZoneB.substring(gmtTimeZoneString.length);
-          const offsetA = offsetStringA === "" ? 0 : parseInt(offsetStringA);
-          const offsetB = offsetStringB === "" ? 0 : parseInt(offsetStringB);
+          const offsetA = offsetStringA === "" ? 0 : parseInt(offsetStringA, 10);
+          const offsetB = offsetStringB === "" ? 0 : parseInt(offsetStringB, 10);
           return offsetB - offsetA;
         }
         return labeledTimeZoneA.localeCompare(labeledTimeZoneB);
@@ -167,7 +167,7 @@ function getMessageOrKeyFallback(messages, key) {
   return messages[key] || key;
 }
 function getCity(timeZone) {
-  return timeZone.split("/").pop();
+  return timeZone.split("/").pop() ?? "";
 }
 function toUserFriendlyName(timeZoneName) {
   return timeZoneName.replace(/_/g, " ");
@@ -190,14 +190,14 @@ function flattenTimeZoneItems(timeZoneItems) {
   return hasGroups(timeZoneItems) ? timeZoneItems.flatMap((item) => item.items) : timeZoneItems;
 }
 function findTimeZoneItemByProp(timeZoneItems, prop, valueToMatch) {
-  return valueToMatch == null ? null : flattenTimeZoneItems(timeZoneItems).find(
+  return valueToMatch === void 0 || timeZoneItems === void 0 ? void 0 : flattenTimeZoneItems(timeZoneItems).find(
     (item) => (
       // intentional == to match string to number
       item[prop] == valueToMatch
     )
   );
 }
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}.offset{white-space:nowrap}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;--calcite-combobox-corner-radius: var(--calcite-input-time-zone-corner-radius, var(--calcite-corner-radius))}.offset{white-space:nowrap}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}`;
 class InputTimeZone extends LitElement {
   constructor() {
     super(...arguments);
@@ -304,7 +304,7 @@ class InputTimeZone extends LitElement {
     if (!normalized) {
       if (this.clearable) {
         this._value = normalized;
-        this.selectedTimeZoneItem = null;
+        this.selectedTimeZoneItem = void 0;
         return;
       }
       this._value = oldValue;
@@ -326,7 +326,9 @@ class InputTimeZone extends LitElement {
     if (this.mode !== "region" || !this.selectedTimeZoneItem) {
       return;
     }
-    this.comboboxRef.value.selectedItems[0].heading = this.getItemLabel(this.selectedTimeZoneItem, open);
+    if (this.comboboxRef.value) {
+      this.comboboxRef.value.selectedItems[0].heading = this.getItemLabel(this.selectedTimeZoneItem, open);
+    }
   }
   onComboboxBeforeClose(event) {
     event.stopPropagation();
@@ -346,13 +348,13 @@ class InputTimeZone extends LitElement {
     if (!selectedItem) {
       this._value = "";
       this.requestUpdate("value", previousValue);
-      this.selectedTimeZoneItem = null;
+      this.selectedTimeZoneItem = void 0;
       this.calciteInputTimeZoneChange.emit();
       return;
     }
-    const selected = this.findTimeZoneItemByLabel(selectedItem.getAttribute("data-label"));
-    const selectedValue = `${selected.value}`;
-    if (this.value === selectedValue && selected.label === this.selectedTimeZoneItem.label) {
+    const selected = this.findTimeZoneItemByLabel(selectedItem.getAttribute("data-label") ?? void 0);
+    const selectedValue = selected?.value === void 0 ? void 0 : `${selected?.value}`;
+    if (this.value === selectedValue && selected?.label === this.selectedTimeZoneItem?.label) {
       return;
     }
     this._value = selectedValue;
@@ -382,7 +384,7 @@ class InputTimeZone extends LitElement {
   }
   updateTimeZoneSelection() {
     if (this.value === "" && this.clearable) {
-      this.selectedTimeZoneItem = null;
+      this.selectedTimeZoneItem = void 0;
       return;
     }
     const fallbackValue = this.mode === "offset" ? getUserTimeZoneOffset() : getUserTimeZoneName();

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;
@@ -97,9 +97,7 @@ export abstract class ListItem extends LitElement {
    */
   accessor sortHandleOpen: boolean;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

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.d.ts

@@ -36,9 +36,7 @@ export abstract class Meter extends LitElement {
    */
   accessor fillType: MeterFillType;
   /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
+   * Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists.
    *
    * @deprecated in v5.1.0, removal target v6.0.0 - This property has no effect on the component.
    */

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-pagination/customElement.js

@@ -40,7 +40,7 @@ class Pagination extends LitElement {
     super(...arguments);
     this.resizeHandler = ({ contentRect: { width } }) => this.setMaxItemsToBreakpoint(width);
     this.resizeObserver = createObserver("resize", (entries) => entries.forEach(this.resizeHandler));
-    this.messages = useT9n();
+    this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
     this.isXXSmall = false;
     this.lastStartItem = 1;
@@ -187,11 +187,11 @@ class Pagination extends LitElement {
   }
   handlePageClick(event) {
     const target = event.target;
-    this.startItem = parseInt(target.value);
+    this.startItem = parseInt(target.value, 10);
     this.emitUpdate();
   }
   renderEllipsis(type) {
-    return keyed(type, html`<span class=${safeClassMap(CSS.ellipsis)}>&hellip;</span>`);
+    return html`<li aria-hidden=true role=presentation>${keyed(type, html`<span class=${safeClassMap(CSS.ellipsis)}>&hellip;</span>`)}</li>`;
   }
   renderItems() {
     const { totalItems, pageSize, startItem, maxItems, totalPages, lastStartItem, isXXSmall } = this;

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

@@ -48,13 +48,13 @@ export abstract class Panel extends LitElement {
   /** Passes a function to run before the component closes. */
   accessor beforeClose: (() => Promise<void>) | undefined;
   /**
-   * When `true`, displays a close button in the component.
+   * When `true`, displays a close button in the trailing side of the component's header.
    *
    * @default false
    */
   accessor closable: boolean;
   /**
-   * When `true`, the component will be hidden.
+   * When `true`, hides the component.
    *
    * @default false
    */
@@ -103,7 +103,7 @@ export abstract class Panel extends LitElement {
    * @default false
    */
   accessor loading: boolean;
-  /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
+  /** Specifies the component's fallback `menuPlacement` when its initial or specified `menuPlacement` has insufficient space available. */
   accessor menuFlipPlacements: FlipPlacement[] | undefined;
   /**
    * When `true`, the action menu items in the `header-menu-actions` slot are open.
@@ -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:
@@ -141,9 +141,7 @@ export abstract class Panel extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

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

@@ -14,6 +14,7 @@ import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { s as styles$1 } from "../../chunks/header.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
 import { C as CSS, S as SLOTS, I as ICONS, a as IDS } from "../../chunks/resources8.js";
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;border-radius:var(--calcite-panel-corner-radius, var(--calcite-corner-radius-sharp))}slot[name=alerts]::slotted(calcite-alert){block-size:0}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-panel-default-space: var(--calcite-spacing-sm);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-sm-plus)}:host([scale=s]) .header-content .heading{font-size:var(--calcite-font-size--1)}:host([scale=s]) .header-content .description{font-size:var(--calcite-font-size--2)}:host([scale=s]) .header-content .icon{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]){--calcite-internal-panel-default-space: var(--calcite-spacing-md);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus)}:host([scale=m]) .header-content .heading{font-size:var(--calcite-font-size-0)}:host([scale=m]) .header-content .description{font-size:var(--calcite-font-size--1)}:host([scale=m]) .header-content .icon{margin-inline-end:var(--calcite-spacing-md)}:host(:is([scale=s],[scale=m])){--calcite-internal-panel-action-spacing: var(--calcite-spacing-xxs)}:host([scale=l]){--calcite-internal-panel-action-spacing: var(--calcite-spacing-xs);--calcite-internal-panel-default-space: var(--calcite-spacing-lg);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xl)}:host([scale=l]) .header-content .heading{font-size:var(--calcite-font-size-1)}:host([scale=l]) .header-content .description{font-size:var(--calcite-font-size-0)}:host([scale=l]) .header-content .icon{margin-inline-end:var(--calcite-spacing-lg)}.content-top,.content-bottom{display:flex;align-items:flex-start;align-self:stretch;border-block-start:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));background-color:var(--calcite-panel-background-color, var(--calcite-color-foreground-1))}.content-top{padding:var(--calcite-panel-content-top-space, var(--calcite-internal-panel-default-space))}.content-bottom{padding:var(--calcite-panel-content-bottom-space, var(--calcite-internal-panel-default-space))}.container{position:relative;margin:0;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;overflow:hidden;background-color:var(--calcite-color-background);padding:0;font-size:var(--calcite-font-size-relative-base);color:var(--calcite-color-text-2);transition:max-block-size var(--calcite-animation-timing),inline-size var(--calcite-animation-timing);box-sizing:border-box;font-size:var(--calcite-font-size--1)}.container *{box-sizing:border-box}.header{z-index:var(--calcite-z-index-header);display:flex;flex-direction:column;background-color:var(--calcite-panel-header-background-color, var(--calcite-color-foreground-1));border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-panel-header-border-block-end, var(--calcite-color-border-3)))}.header-container{display:flex;inline-size:100%;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:0 0 auto}.header-container--border-end{border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3))}.action-bar-container{inline-size:100%}.action-bar-container ::slotted(calcite-action-bar){inline-size:100%}.header-content{display:flex;flex-direction:column;overflow:hidden;padding-inline:.75rem;padding-block:.875rem;margin-inline-end:auto;justify-content:center}.header-content .heading-text-content{flex:1 1 auto;overflow:hidden}.header-content .heading,.header-content .description{display:block;flex:none;overflow-wrap:break-word;padding:0;line-height:var(--calcite-font-line-height-relative-snug)}.header-content .heading{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-panel-heading-text-color, var(--calcite-color-text-1))}.header-content .heading:only-child{margin-block-end:0px}.header-content .description{color:var(--calcite-panel-description-text-color, var(--calcite-color-text-2))}#close,#collapse,calcite-action-menu{--calcite-action-background-color: var(--calcite-panel-header-action-background-color);--calcite-action-background-color-hover: var(--calcite-panel-header-action-background-color-hover);--calcite-action-background-color-press: var(--calcite-panel-header-action-background-color-press);--calcite-action-text-color: var(--calcite-panel-header-action-text-color);--calcite-action-text-color-press: var(--calcite-panel-header-action-text-color-press)}.header-actions{display:flex;flex-direction:row;flex-wrap:nowrap;margin:auto;gap:var(--calcite-internal-panel-action-spacing)}.header-actions--start{margin-inline-start:var(--calcite-internal-panel-action-spacing)}.header-actions--end{margin-inline-end:var(--calcite-internal-panel-action-spacing)}.content-wrapper{position:relative;display:flex;block-size:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow:auto;color:var(--calcite-color-text-2);outline-color:transparent;padding:var(--calcite-panel-space, var(--calcite-panel-content-space, 0));background:var(--calcite-panel-background-color, var(--calcite-color-background))}.content-wrapper:focus-visible{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))))}.header-content{flex:1 1 auto;justify-content:center;padding-block:var(--calcite-internal-panel-header-vertical-padding);padding-inline:var(--calcite-internal-panel-default-space)}.header-content.header--slotted-content{padding:var(--calcite-panel-header-content-space, var(--calcite-internal-panel-header-vertical-padding) var(--calcite-internal-panel-default-space))}.header-content.header--non-slotted-content{align-items:center;flex-direction:row}.footer{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;align-items:center;justify-content:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);border-block-start:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));padding:var(--calcite-panel-footer-space, var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-space)));background-color:var(--calcite-panel-footer-background-color, var(--calcite-color-foreground-1))}.footer-content{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:center}.footer-start{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-start;margin-inline-end:auto;gap:var(--calcite-internal-panel-default-space)}.footer-end{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-end;margin-inline-start:auto;gap:var(--calcite-internal-panel-default-space)}.fab-container{position:sticky;inset-block-end:0px;z-index:var(--calcite-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:.5rem;inset-inline:0;inline-size:fit-content}calcite-icon{--calcite-icon-color: var(--calcite-panel-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-1)))}:host([hidden]){display:none}[hidden]{display:none}`;
 class Panel extends LitElement {
@@ -24,6 +25,18 @@ class Panel extends LitElement {
     this.messages = useT9n();
     this._closed = false;
     this.focusSetter = useSetFocus()(this);
+    this.focusTrapController = useFocusTrap({
+      focusTrapOptions: {
+        allowOutsideClick: true,
+        escapeDeactivates: (event) => {
+          if (!event.defaultPrevented && this.closable) {
+            this.emitCloseEvent();
+            event.preventDefault();
+          }
+          return false;
+        }
+      }
+    })(this);
     this.interactiveContainer = useInteractive(this);
     this.hasActionBar = false;
     this.hasContentBottom = false;
@@ -46,6 +59,7 @@ class Panel extends LitElement {
     this.disabled = false;
     this.iconFlipRtl = false;
     this.loading = false;
+    this.focusTrapEnabled = false;
     this.menuOpen = false;
     this.menuPlacement = defaultEndMenuPlacement;
     this.overlayPositioning = "absolute";
@@ -60,7 +74,7 @@ class Panel extends LitElement {
     this.listen("calcitePanelClose", this.panelCloseHandler);
   }
   static {
-    this.properties = { hasActionBar: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasEndActions: [16, {}, { state: true }], hasFab: [16, {}, { state: true }], hasFooterContent: [16, {}, { state: true }], hasFooterEndContent: [16, {}, { state: true }], hasFooterStartContent: [16, {}, { state: true }], hasHeaderContent: [16, {}, { state: true }], hasHeaderDescription: [16, {}, { state: true }], hasHeaderHeading: [16, {}, { state: true }], hasMenuItems: [16, {}, { state: true }], hasStartActions: [16, {}, { state: true }], showHeaderContent: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], collapseDirection: 1, collapsed: [7, {}, { reflect: true, type: Boolean }], collapsible: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], menuFlipPlacements: [0, {}, { attribute: false }], menuOpen: [7, {}, { reflect: true, type: Boolean }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { hasActionBar: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasEndActions: [16, {}, { state: true }], hasFab: [16, {}, { state: true }], hasFooterContent: [16, {}, { state: true }], hasFooterEndContent: [16, {}, { state: true }], hasFooterStartContent: [16, {}, { state: true }], hasHeaderContent: [16, {}, { state: true }], hasHeaderDescription: [16, {}, { state: true }], hasHeaderHeading: [16, {}, { state: true }], hasMenuItems: [16, {}, { state: true }], hasStartActions: [16, {}, { state: true }], showHeaderContent: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], collapseDirection: 1, collapsed: [7, {}, { reflect: true, type: Boolean }], collapsible: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], focusTrapEnabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], menuFlipPlacements: [0, {}, { attribute: false }], menuOpen: [7, {}, { reflect: true, type: Boolean }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = [styles$1, styles];
@@ -80,6 +94,10 @@ class Panel extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.containerRef.value, options);
   }
+  async updateFocusTrapElements(extraContainers) {
+    this.focusTrapController.setExtraContainers(extraContainers);
+    this.focusTrapController.updateContainerElements();
+  }
   willUpdate(changes) {
     if (changes.has("collapsed") && this.hasUpdated) {
       if (this.collapsed) {
@@ -89,10 +107,22 @@ class Panel extends LitElement {
       }
     }
   }
+  updated(changes) {
+    if (changes.has("focusTrapEnabled") || changes.has("closable") || changes.has("closed")) {
+      if (!this.closed && this.closable && this.focusTrapEnabled) {
+        this.focusTrapController.activate();
+      } else {
+        this.focusTrapController.deactivate();
+      }
+    }
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.resizeObserver?.disconnect();
   }
+  focusTrapDisabledOverride() {
+    return !this.focusTrapEnabled || !this.closable || this.closed;
+  }
   async setClosedState(value) {
     if (this.beforeClose && value) {
       try {
@@ -122,10 +152,11 @@ class Panel extends LitElement {
     this.calcitePanelClose.emit();
   }
   panelKeyDownHandler(event) {
-    if (this.closable && event.key === "Escape" && !event.defaultPrevented) {
-      event.preventDefault();
-      this.emitCloseEvent();
+    if (event.key !== "Escape" || event.defaultPrevented || this.closed || !this.closable) {
+      return;
     }
+    event.preventDefault();
+    this.emitCloseEvent();
   }
   panelCloseHandler(event) {
     if (event.defaultPrevented || event.target !== this.el) {
@@ -255,8 +286,9 @@ class Panel extends LitElement {
     return html`<div class=${safeClassMap(CSS.fabContainer)} .hidden=${!this.hasFab}><slot name=${SLOTS.fab} @slotchange=${this.handleFabSlotChange}></slot></div>`;
   }
   render() {
-    const { disabled, loading, closed } = this;
-    const panelNode = html`<article .ariaBusy=${loading} class=${safeClassMap(CSS.container)} .hidden=${closed} ${ref(this.containerRef)}>${this.renderHeaderNode()}${this.renderContent()}${this.renderContentBottom()}${this.renderFooterNode()}${keyed("alerts", html`<slot name=${SLOTS.alerts} @slotchange=${this.handleAlertsSlotChange}></slot>`)}</article>`;
+    const { disabled, loading, closed, heading, description, focusTrapEnabled, closable } = this;
+    const hasDialogRole = focusTrapEnabled && closable;
+    const panelNode = html`<div .ariaBusy=${loading} .ariaDescription=${hasDialogRole && description ? description : void 0} .ariaLabel=${hasDialogRole && heading ? heading : void 0} .ariaLive=${hasDialogRole ? "polite" : void 0} class=${safeClassMap(CSS.container)} .hidden=${closed} .role=${hasDialogRole ? "dialog" : "article"} ${ref(this.containerRef)}>${this.renderHeaderNode()}${this.renderContent()}${this.renderContentBottom()}${this.renderFooterNode()}${keyed("alerts", html`<slot name=${SLOTS.alerts} @slotchange=${this.handleAlertsSlotChange}></slot>`)}</div>`;
     return this.interactiveContainer({ disabled, children: html`${loading ? html`<calcite-scrim .loading=${loading}></calcite-scrim>` : null}${panelNode}` });
   }
 }

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

@@ -32,7 +32,7 @@ export abstract class Popover extends LitElement {
    * @default false
    */
   accessor flipDisabled: boolean;
-  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
   accessor flipPlacements: FlipPlacement[] | undefined;
   /**
    * When `true`, prevents focus trapping.
@@ -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;
   /**
@@ -117,9 +117,7 @@ export abstract class Popover extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)

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

@@ -21,11 +21,7 @@ export abstract class RadioButton extends LitElement {
    * @default false
    */
   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.
-   */
+  /** 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 | undefined;
   /** Specifies the component's label text. */
   accessor labelText: string | undefined;

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":