@esri/calcite-components 3.0.0-next.98 → 3.0.0

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

@@ -3,18 +3,16 @@ import { keyed as L } from "lit-html/directives/keyed.js";
 import { html as h } from "lit";
 import { createRef as u, ref as p } from "lit-html/directives/ref.js";
 import { LitElement as C, safeClassMap as b, safeStyleMap as m } from "@arcgis/lumina";
-import { s as T, a as M } from "../../chunks/loadable.js";
-import { c as V, a as S, d as F } from "../../chunks/form.js";
-import { b as R, n as P } from "../../chunks/locale.js";
-import { j as O } from "../../chunks/dom.js";
-import { c as H } from "../../chunks/observers.js";
-import { u as I } from "../../chunks/useT9n.js";
-import { css as U } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
+import "lit-html/is-server.js";
+import { c as T, a as M, d as V } from "../../chunks/form.js";
+import { b as S, n as P } from "../../chunks/locale.js";
+import { j as F } from "../../chunks/dom.js";
+import { c as R } from "../../chunks/observers.js";
+import { u as H } from "../../chunks/useT9n.js";
+import { css as O } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.0 */
 const s = {
   container: "container",
   fill: "fill",
@@ -29,33 +27,33 @@ const s = {
   success: "fill-success",
   warning: "fill-warning",
   danger: "fill-danger"
-}, A = U`: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([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host{display:flex;--calcite-meter-space-internal: .125rem;--calcite-meter-height-internal: 1rem;--calcite-meter-font-size-internal: var(--calcite-font-size--1)}:host([scale=s]){--calcite-meter-height-internal: .75rem;--calcite-meter-font-size-internal: var(--calcite-font-size--2)}:host([scale=l]){--calcite-meter-height-internal: 1.5rem;--calcite-meter-font-size-internal: var(--calcite-font-size-0)}.container{position:relative;margin:0;display:flex;inline-size:100%;align-items:center;block-size:var(--calcite-meter-height-internal);background-color:var(--calcite-color-foreground-2);border:1px solid var(--calcite-color-border-3);border-radius:var(--calcite-meter-height-internal)}.solid{border:1px solid var(--calcite-color-foreground-3);background-color:var(--calcite-color-foreground-3)}.outline{background-color:transparent}.value-visible{margin-block-start:1.5rem}.steps-visible{margin-block-end:1.5rem}.step-line{position:absolute;inset-block:0px;display:block;inline-size:var(--calcite-meter-space-internal);background-color:var(--calcite-color-border-3)}.label{position:absolute;font-size:var(--calcite-meter-font-size-internal)}.label-hidden{visibility:hidden;opacity:0}.label-value{inset-block-end:calc(100% + .5em);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1)}.label-range{color:var(--calcite-color-text-3);inset-block-start:calc(100% + .5em)}.unit-label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3)}.label-value .unit-label{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-2)}.fill{position:absolute;z-index:var(--calcite-z-index);display:block;background-color:var(--calcite-color-brand);transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);inset-inline-start:var(--calcite-meter-space-internal);inset-block:var(--calcite-meter-space-internal);border-radius:var(--calcite-meter-height-internal);max-inline-size:calc(100% - var(--calcite-meter-space-internal) * 2);min-inline-size:calc(var(--calcite-meter-height-internal) - var(--calcite-meter-space-internal) * 2);transition-property:inline-size,background-color,box-shadow}.fill-danger{background-color:var(--calcite-color-status-danger)}.fill-success{background-color:var(--calcite-color-status-success)}.fill-warning{background-color:var(--calcite-color-status-warning)}.solid .fill{inset-block:0;inset-inline-start:0;max-inline-size:100%;min-inline-size:calc(var(--calcite-meter-height-internal));box-shadow:0 0 0 1px var(--calcite-color-brand)}.solid .fill-danger{box-shadow:0 0 0 1px var(--calcite-color-status-danger)}.solid .fill-success{box-shadow:0 0 0 1px var(--calcite-color-status-success)}.solid .fill-warning{box-shadow:0 0 0 1px var(--calcite-color-status-warning)}`;
-class B extends C {
+}, I = O`: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([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host{display:flex;--calcite-meter-space-internal: .125rem;--calcite-meter-height-internal: 1rem;--calcite-meter-font-size-internal: var(--calcite-font-size--1)}:host([scale=s]){--calcite-meter-height-internal: .75rem;--calcite-meter-font-size-internal: var(--calcite-font-size--2)}:host([scale=l]){--calcite-meter-height-internal: 1.5rem;--calcite-meter-font-size-internal: var(--calcite-font-size-0)}.container{position:relative;margin:0;display:flex;inline-size:100%;align-items:center;block-size:var(--calcite-meter-height-internal);background-color:var(--calcite-color-foreground-2);border:1px solid var(--calcite-color-border-3);border-radius:var(--calcite-meter-height-internal)}.solid{border:1px solid var(--calcite-color-foreground-3);background-color:var(--calcite-color-foreground-3)}.outline{background-color:transparent}.value-visible{margin-block-start:1.5rem}.steps-visible{margin-block-end:1.5rem}.step-line{position:absolute;inset-block:0px;display:block;inline-size:var(--calcite-meter-space-internal);background-color:var(--calcite-color-border-3)}.label{position:absolute;font-size:var(--calcite-meter-font-size-internal)}.label-hidden{visibility:hidden;opacity:0}.label-value{inset-block-end:calc(100% + .5em);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1)}.label-range{color:var(--calcite-color-text-3);inset-block-start:calc(100% + .5em)}.unit-label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3)}.label-value .unit-label{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-2)}.fill{position:absolute;z-index:var(--calcite-z-index);display:block;background-color:var(--calcite-color-brand);transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);inset-inline-start:var(--calcite-meter-space-internal);inset-block:var(--calcite-meter-space-internal);border-radius:var(--calcite-meter-height-internal);max-inline-size:calc(100% - var(--calcite-meter-space-internal) * 2);min-inline-size:calc(var(--calcite-meter-height-internal) - var(--calcite-meter-space-internal) * 2);transition-property:inline-size,background-color,box-shadow}.fill-danger{background-color:var(--calcite-color-status-danger)}.fill-success{background-color:var(--calcite-color-status-success)}.fill-warning{background-color:var(--calcite-color-status-warning)}.solid .fill{inset-block:0;inset-inline-start:0;max-inline-size:100%;min-inline-size:calc(var(--calcite-meter-height-internal));box-shadow:0 0 0 1px var(--calcite-color-brand)}.solid .fill-danger{box-shadow:0 0 0 1px var(--calcite-color-status-danger)}.solid .fill-success{box-shadow:0 0 0 1px var(--calcite-color-status-success)}.solid .fill-warning{box-shadow:0 0 0 1px var(--calcite-color-status-warning)}@media (forced-colors: active){.fill,.fill-danger,.fill-success,.fill-warning{background-color:Highlight}}`;
+class U extends C {
   constructor() {
-    super(...arguments), this.highLabelEl = u(), this.labelFlipMax = 0.8, this.labelFlipProximity = 0.15, this.lowLabelEl = u(), this.maxLabelEl = u(), this.maxPercent = 100, this.messages = I({ name: null }), this.meterContainerEl = u(), this.minLabelEl = u(), this.minPercent = 0, this.resizeObserver = H("resize", () => this.resizeHandler()), this.valueLabelEl = u(), this.appearance = "outline-fill", this.disabled = !1, this.fillType = "range", this.groupSeparator = !1, this.max = 100, this.min = 0, this.rangeLabelType = "percent", this.rangeLabels = !1, this.scale = "m", this.unitLabel = "", this.valueLabel = !1, this.valueLabelType = "percent";
+    super(...arguments), this.highLabelEl = u(), this.labelFlipMax = 0.8, this.labelFlipProximity = 0.15, this.lowLabelEl = u(), this.maxLabelEl = u(), this.maxPercent = 100, this.messages = H({ name: null }), this.meterContainerEl = u(), this.minLabelEl = u(), this.minPercent = 0, this.resizeObserver = R("resize", () => this.resizeHandler()), this.valueLabelEl = u(), this.appearance = "outline-fill", this.disabled = !1, this.fillType = "range", this.groupSeparator = !1, this.max = 100, this.min = 0, this.rangeLabelType = "percent", this.rangeLabels = !1, this.scale = "m", this.unitLabel = "", this.valueLabel = !1, this.valueLabelType = "percent";
   }
   static {
     this.properties = { currentPercent: 16, highActive: 16, highPercent: 16, lowActive: 16, lowPercent: 16, appearance: 3, disabled: 7, fillType: 3, form: 3, groupSeparator: 7, high: 11, label: 1, low: 11, max: 11, min: 11, name: 3, numberingSystem: 1, rangeLabelType: 3, rangeLabels: 7, scale: 3, unitLabel: 1, value: 9, valueLabel: 7, valueLabelType: 3 };
   }
   static {
-    this.styles = A;
+    this.styles = I;
   }
   // #endregion
   // #region Lifecycle
   connectedCallback() {
-    super.connectedCallback(), V(this), this.resizeObserver?.observe(this.el);
+    super.connectedCallback(), T(this), this.resizeObserver?.observe(this.el);
   }
   load() {
-    T(this), this.calculateValues(), S(this, this.value);
+    this.calculateValues(), M(this, this.value);
   }
   willUpdate(e) {
     (e.has("min") && (this.hasUpdated || this.min !== 0) || e.has("max") && (this.hasUpdated || this.max !== 100) || e.has("low") || e.has("high") || e.has("value")) && this.handleRangeChange(), (e.has("rangeLabels") && (this.hasUpdated || this.rangeLabels !== !1) || e.has("rangeLabelType") && (this.hasUpdated || this.rangeLabelType !== "percent") || e.has("unitLabel") && (this.hasUpdated || this.unitLabel !== "") || e.has("valueLabel") && (this.hasUpdated || this.valueLabel !== !1) || e.has("valueLabelType") && (this.hasUpdated || this.valueLabelType !== "percent")) && this.updateLabels();
   }
   loaded() {
-    M(this), this.updateLabels();
+    this.updateLabels();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), F(this), this.resizeObserver?.disconnect();
+    super.disconnectedCallback(), V(this), this.resizeObserver?.disconnect();
   }
   // #endregion
   // #region Private Methods
@@ -75,7 +73,7 @@ class B extends C {
   formatLabel(e, l) {
     if (l === "percent") {
       if (!this.percentFormatting) {
-        const t = R(this.messages._lang), a = new Intl.NumberFormat(t, {
+        const t = S(this.messages._lang), a = new Intl.NumberFormat(t, {
           useGrouping: this.groupSeparator,
           style: "percent"
         });
@@ -94,7 +92,7 @@ class B extends C {
     return !i || !e && o || d ? s.success : c && o ? s.warning : g ? s.danger : s.success;
   }
   intersects(e, l) {
-    return e && l && O(e.getBoundingClientRect(), l.getBoundingClientRect());
+    return e && l && F(e.getBoundingClientRect(), l.getBoundingClientRect());
   }
   determineVisibleLabels() {
     const { minLabelEl: { value: e }, lowLabelEl: { value: l }, highLabelEl: { value: t }, maxLabelEl: { value: a } } = this, i = this.intersects(t, a), n = this.intersects(l, t), r = this.intersects(l, a), c = this.intersects(e, t), d = this.intersects(e, l), g = this.intersects(e, a), o = s.labelHidden;
@@ -135,16 +133,16 @@ class B extends C {
     return L("max-label-line", h`<div class=${b({ [s.label]: !0, [s.labelRange]: !0 })} style=${m(a)} ${p(this.maxLabelEl)}>${i}</div>`);
   }
   render() {
-    const { appearance: e, currentPercent: l, highActive: t, highPercent: a, label: i, lowActive: n, lowPercent: r, max: c, maxPercent: d, min: g, minPercent: o, rangeLabels: v, rangeLabelType: f, unitLabel: y, value: x, valueLabel: w, valueLabelType: $ } = this, E = this.formatLabel(l / 100, "percent"), k = `${x} ${y}`;
-    return h`<div .ariaLabel=${i} .ariaValueMax=${f === "percent" ? d : c} .ariaValueMin=${f === "percent" ? o : g} .ariaValueNow=${$ === "percent" ? l : x} .ariaValueText=${$ === "percent" ? E : y ? k : void 0} class=${b({
+    const { appearance: e, currentPercent: l, highActive: t, highPercent: a, label: i, lowActive: n, lowPercent: r, max: c, maxPercent: d, min: g, minPercent: o, rangeLabels: v, rangeLabelType: f, unitLabel: y, value: w, valueLabel: x, valueLabelType: $ } = this, E = this.formatLabel(l / 100, "percent"), k = `${w} ${y}`;
+    return h`<div .ariaLabel=${i} .ariaValueMax=${f === "percent" ? d : c} .ariaValueMin=${f === "percent" ? o : g} .ariaValueNow=${$ === "percent" ? l : w} .ariaValueText=${$ === "percent" ? E : y ? k : void 0} class=${b({
       [s.container]: !0,
       [s.stepsVisible]: v,
-      [s.valueVisible]: w,
+      [s.valueVisible]: x,
       [e]: e !== "outline-fill"
-    })} role=meter ${p(this.meterContainerEl)}>${this.renderMeterFill()}${w && this.renderValueLabel() || ""}${n && this.renderRangeLine(r) || ""}${t && this.renderRangeLine(a) || ""}${v && this.renderMinLabel() || ""}${v && n && this.renderLowLabel() || ""}${v && t && this.renderHighLabel() || ""}${v && this.renderMaxLabel() || ""}</div>`;
+    })} role=meter ${p(this.meterContainerEl)}>${this.renderMeterFill()}${x && this.renderValueLabel() || ""}${n && this.renderRangeLine(r) || ""}${t && this.renderRangeLine(a) || ""}${v && this.renderMinLabel() || ""}${v && n && this.renderLowLabel() || ""}${v && t && this.renderHighLabel() || ""}${v && this.renderMaxLabel() || ""}</div>`;
   }
 }
-z("calcite-meter", B);
+z("calcite-meter", U);
 export {
-  B as Meter
+  U as Meter
 };

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

@@ -1,10 +1,10 @@
 /// <reference types="../../index.d.ts" />
 import { PropertyValues } from 'lit';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { FocusTrap, FocusTrapComponent } from '../../utils/focusTrapComponent';
 import { LoadableComponent } from '../../utils/loadable';
 import { OpenCloseComponent } from '../../utils/openCloseComponent';
 import { Kind, Scale } from '../interfaces';
+import { FocusTrapOptions } from '../../controllers/useFocusTrap';
 
 /**
  * @deprecated Use the `calcite-dialog` component instead.
@@ -27,6 +27,15 @@ export declare class Modal extends LitElement {
     escapeDisabled: boolean;
     /** When `true`, prevents focus trapping. */
     focusTrapDisabled: boolean;
+    /**
+     * Specifies custom focus trap configuration on the component, where
+     *
+     * `"allowOutsideClick`" allows outside clicks,
+     * `"initialFocus"` enables initial focus,
+     * `"returnFocusOnDeactivate"` returns focus when not active, and
+     * `"extraContainers"` specifies additional focusable elements external to the trap (e.g., 3rd-party components appending elements to the document body).
+     */
+    focusTrapOptions: Partial<FocusTrapOptions>;
     /** Sets the component to always be fullscreen. Overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. */
     fullscreen: boolean;
     /** Specifies the kind of the component, which will apply to top border. */
@@ -61,8 +70,12 @@ export declare class Modal extends LitElement {
     scrollContent(top?: number, left?: number): Promise<void>;
     /** Sets focus on the component's "close" button (the first focusable item). */
     setFocus(): Promise<void>;
-    /** Updates the element(s) that are used within the focus-trap of the component. */
-    updateFocusTrapElements(): Promise<void>;
+    /**
+     * Updates the element(s) that are included in the focus-trap of the component.
+     *
+     * @param extraContainers - Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus trapping element.
+     */
+    updateFocusTrapElements(extraContainers?: FocusTrapOptions["extraContainers"]): Promise<void>;
     /** Fires when the component is requested to be closed and before the closing transition begins. */
     readonly calciteModalBeforeClose: TargetedEvent<this, undefined>;
     /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */

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

@@ -1,23 +1,21 @@
-import { c as y } from "../../chunks/runtime.js";
+import { c as x } from "../../chunks/runtime.js";
 import { keyed as h } from "lit-html/directives/keyed.js";
-import { html as a, nothing as w } from "lit";
-import { createRef as m, ref as c } from "lit-html/directives/ref.js";
-import { LitElement as z, createEvent as l, setAttribute as p, safeClassMap as o } from "@arcgis/lumina";
+import { html as a, nothing as k } from "lit";
+import { createRef as m, ref as d } from "lit-html/directives/ref.js";
+import { LitElement as y, createEvent as l, setAttribute as p, safeClassMap as o } from "@arcgis/lumina";
 import { getNearestOverflowAncestor as b } from "@floating-ui/utils/dom";
-import { h as C, s as u, a as s, o as f } from "../../chunks/dom.js";
-import { u as $, c as O, d, a as g } from "../../chunks/focusTrapComponent.js";
-import { c as S, s as T, a as E } from "../../chunks/loadable.js";
-import { c as v } from "../../chunks/observers.js";
-import { o as B } from "../../chunks/openCloseComponent.js";
-import { g as D } from "../../chunks/component.js";
-import { l as F } from "../../chunks/logger.js";
-import { u as M } from "../../chunks/useT9n.js";
-import { css as H } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
+import { h as w, s as u, a as s, o as g } from "../../chunks/dom.js";
+import { c as z } from "../../chunks/loadable.js";
+import { c as f } from "../../chunks/observers.js";
+import { o as C } from "../../chunks/openCloseComponent.js";
+import { g as $ } from "../../chunks/component.js";
+import { l as O } from "../../chunks/logger.js";
+import { u as S } from "../../chunks/useT9n.js";
+import { u as B } from "../../chunks/useFocusTrap.js";
+import { css as E } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.0 */
 const t = {
   modal: "modal",
   title: "title",
@@ -30,7 +28,6 @@ const t = {
   primary: "primary",
   container: "container",
   containerOpen: "container--open",
-  containerEmbedded: "container--embedded",
   content: "content",
   contentNoFooter: "content--no-footer",
   contentBottom: "content-bottom",
@@ -41,36 +38,42 @@ const t = {
   openingActive: "modal--opening-active",
   closingIdle: "modal--closing-idle",
   closingActive: "modal--closing-active"
-}, P = {
+}, T = {
   close: "x"
 }, n = {
   content: "content",
   contentBottom: "content-bottom",
   contentTop: "content-top",
-  header: "header",
   back: "back",
   secondary: "secondary",
   primary: "primary"
-}, L = H`:host{--calcite-modal-scrim-background: rgba(0, 0, 0, .85);position:fixed;inset:0;z-index:var(--calcite-z-index-overlay);display:flex;opacity:0;visibility:hidden!important;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88);--calcite-modal-scrim-background-internal: rgba(0, 0, 0, .85)}.content-top[hidden],.content-bottom[hidden]{display:none}.container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow-y:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden!important;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88)}:host([scale=s]){--calcite-modal-padding-internal: .75rem;--calcite-modal-padding-large-internal: 1rem;--calcite-modal-title-text-internal: var(--calcite-font-size-1);--calcite-modal-content-text-internal: var(--calcite-font-size--1)}:host([scale=m]){--calcite-modal-padding-internal: 1rem;--calcite-modal-padding-large-internal: 1.25rem;--calcite-modal-title-text-internal: var(--calcite-font-size-2);--calcite-modal-content-text-internal: var(--calcite-font-size-0)}:host([scale=l]){--calcite-modal-padding-internal: 1.25rem;--calcite-modal-padding-large-internal: 1.5rem;--calcite-modal-title-text-internal: var(--calcite-font-size-3);--calcite-modal-content-text-internal: var(--calcite-font-size-1)}.scrim{--calcite-scrim-background: var(--calcite-modal-scrim-background, var(--calcite-color-transparent-scrim));position:absolute;inset:0;display:flex;overflow-y:hidden}.modal{pointer-events:none;z-index:var(--calcite-z-index-modal);float:none;margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;overflow:hidden;border-radius:.25rem;background-color:var(--calcite-color-foreground-1);opacity:0;--tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, .2), 0 2px 4px -2px rgba(0, 0, 0, .16);--tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -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);-webkit-overflow-scrolling:touch;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88);--calcite-modal-hidden-position: translate3d(0, 20px, 0);--calcite-modal-shown-position: translate3d(0, 0, 0)}.modal--opening-idle{transform:var(--calcite-modal-hidden-position)}.modal--opening-active,.modal--closing-idle{transform:var(--calcite-modal-shown-position)}.modal--closing-active{transform:var(--calcite-modal-hidden-position)}:host([opened]){opacity:1;visibility:visible!important;transition-delay:0ms}.container--open{opacity:1;visibility:visible!important;transition-delay:0ms}.container--open .modal{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),visibility 0ms linear,opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88);transition-delay:0ms}.header{z-index:var(--calcite-z-index-header);display:flex;min-inline-size:0px;max-inline-size:100%;border-start-start-radius:.25rem;border-start-end-radius:.25rem;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto}.close{order:2;margin:0;cursor:pointer;appearance:none;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-internal);flex:0 0 auto}.close calcite-icon{vertical-align:-2px}.close:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.close:hover,.close:focus,.close:active{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.title{order:1;display:flex;min-inline-size:0px;align-items:center;flex:1 1 auto;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-large-internal)}slot[name=header]::slotted(*),*::slotted([slot=header]){margin:0;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-1);font-size:var(--calcite-modal-title-text-internal)}.content{position:relative;box-sizing:border-box;display:block;block-size:100%;overflow:auto;padding:0;background-color:var(--calcite-modal-content-background, var(--calcite-color-foreground-1));max-block-size:100%;padding:var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal))}.content-top,.content-bottom{z-index:var(--calcite-z-index-header);display:flex;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto;padding:var(--calcite-modal-padding-internal)}.content-top{min-inline-size:0px;max-inline-size:100%;border-block-end-width:1px}.content-bottom{margin-block-start:auto;box-sizing:border-box;inline-size:100%;justify-content:space-between;border-block-start-width:1px}.content-top:not(.header~.content-top){border-start-start-radius:.25rem;border-start-end-radius:.25rem}.content-bottom:not(.content-bottom~.footer),.content--no-footer{border-end-end-radius:.25rem;border-end-start-radius:.25rem}slot[name=content]::slotted(*),*::slotted([slot=content]){font-size:var(--calcite-modal-context-text-internal)}.footer{z-index:var(--calcite-z-index-header);margin-block-start:auto;box-sizing:border-box;display:flex;inline-size:100%;justify-content:space-between;border-end-end-radius:.25rem;border-end-start-radius:.25rem;border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-large-internal)}.footer--hide-back .back,.footer--hide-secondary .secondary{display:none}.back{display:block;margin-inline-end:auto}.secondary{margin-inline:.25rem;display:block}slot[name=primary]{display:block}:host([width=small]) .modal{inline-size:auto}:host([width-scale=s]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 32rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 35rem){:host([width-scale=s]) .modal{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=s]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=s][docked]) .container{align-items:flex-end}}:host([width-scale=m]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 48rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 51rem){:host([width-scale=m]) .modal{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=m]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=m][docked]) .container{align-items:flex-end}}:host([width-scale=l]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 94rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 97rem){:host([width-scale=l]) .modal{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=l]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=l][docked]) .container{align-items:flex-end}}:host([fullscreen]) .modal{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0;--calcite-modal-hidden-position: translate3D(0, 20px, 0) scale(.95);--calcite-modal-shown-position: translate3D(0, 0, 0) scale(1)}:host([fullscreen]) .content{max-block-size:100%;flex:1 1 auto}:host([opened][fullscreen]) .header,:host([opened][fullscreen]) .footer,:host([opened][fullscreen]) .content-top,:host([opened][fullscreen]) .content-bottom{border-radius:0}:host([docked]) .modal{block-size:var(--calcite-modal-height, auto)}:host([docked]) .content{block-size:auto;flex:1 1 auto}:host([kind=brand]) .modal{border-color:var(--calcite-color-brand)}:host([kind=danger]) .modal{border-color:var(--calcite-color-status-danger)}:host([kind=info]) .modal{border-color:var(--calcite-color-status-info)}:host([kind=success]) .modal{border-color:var(--calcite-color-status-success)}:host([kind=warning]) .modal{border-color:var(--calcite-color-status-warning)}:host([kind=brand]) .modal,:host([kind=danger]) .modal,:host([kind=info]) .modal,:host([kind=success]) .modal,:host([kind=warning]) .modal{border-width:0px;border-block-start-width:4px;border-style:solid}:host([kind=brand]) .header,:host([kind=brand]) .content-top,:host([kind=danger]) .header,:host([kind=danger]) .content-top,:host([kind=info]) .header,:host([kind=info]) .content-top,:host([kind=success]) .header,:host([kind=success]) .content-top,:host([kind=warning]) .header,:host([kind=warning]) .content-top{border-radius:.25rem;border-end-end-radius:0px;border-end-start-radius:0px}@media screen and (max-width: 860px){* slot[name=header]::slotted(content-top),* content-top::slotted([slot=header]){font-size:var(--calcite-font-size-1)}.footer,.content-bottom{position:sticky;inset-block-end:0px}}@media screen and (max-width: 480px){.footer,.content-bottom{flex-direction:column}.back,.secondary{margin:0;margin-block-end:.25rem}}:host([hidden]){display:none}[hidden]{display:none}`;
-let r = 0, x = "";
-class I extends z {
+}, D = E`:host{--calcite-modal-scrim-background: rgba(0, 0, 0, .85);position:fixed;inset:0;z-index:var(--calcite-z-index-overlay);display:flex;opacity:0;visibility:hidden!important;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88);--calcite-modal-scrim-background-internal: rgba(0, 0, 0, .85)}.content-top[hidden],.content-bottom[hidden]{display:none}.container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow-y:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden!important;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88)}:host([scale=s]){--calcite-modal-padding-internal: .75rem;--calcite-modal-padding-large-internal: 1rem;--calcite-modal-title-text-internal: var(--calcite-font-size-1);--calcite-modal-content-text-internal: var(--calcite-font-size--1)}:host([scale=m]){--calcite-modal-padding-internal: 1rem;--calcite-modal-padding-large-internal: 1.25rem;--calcite-modal-title-text-internal: var(--calcite-font-size-2);--calcite-modal-content-text-internal: var(--calcite-font-size-0)}:host([scale=l]){--calcite-modal-padding-internal: 1.25rem;--calcite-modal-padding-large-internal: 1.5rem;--calcite-modal-title-text-internal: var(--calcite-font-size-3);--calcite-modal-content-text-internal: var(--calcite-font-size-1)}.scrim{--calcite-scrim-background: var(--calcite-modal-scrim-background, var(--calcite-color-transparent-scrim));position:absolute;inset:0;display:flex;overflow-y:hidden}.modal{pointer-events:none;z-index:var(--calcite-z-index-modal);float:none;margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;overflow:hidden;border-radius:.25rem;background-color:var(--calcite-color-foreground-1);opacity:0;--tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, .2), 0 2px 4px -2px rgba(0, 0, 0, .16);--tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -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);-webkit-overflow-scrolling:touch;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88);--calcite-modal-hidden-position: translate3d(0, 20px, 0);--calcite-modal-shown-position: translate3d(0, 0, 0)}.modal--opening-idle{transform:var(--calcite-modal-hidden-position)}.modal--opening-active,.modal--closing-idle{transform:var(--calcite-modal-shown-position)}.modal--closing-active{transform:var(--calcite-modal-hidden-position)}:host([opened]){opacity:1;visibility:visible!important;transition-delay:0ms}.container--open{opacity:1;visibility:visible!important;transition-delay:0ms}.container--open .modal{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),visibility 0ms linear,opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88);transition-delay:0ms}.header{z-index:var(--calcite-z-index-header);display:flex;min-inline-size:0px;max-inline-size:100%;border-start-start-radius:.25rem;border-start-end-radius:.25rem;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto}.close{order:2;margin:0;cursor:pointer;appearance:none;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-internal);flex:0 0 auto}.close calcite-icon{vertical-align:-2px}.close:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.close:hover,.close:focus,.close:active{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.title{order:1;display:flex;min-inline-size:0px;align-items:center;flex:1 1 auto;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-large-internal)}slot[name=header]::slotted(*),*::slotted([slot=header]){margin:0;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-1);font-size:var(--calcite-modal-title-text-internal)}.content{position:relative;box-sizing:border-box;display:block;block-size:100%;overflow:auto;padding:0;background-color:var(--calcite-modal-content-background, var(--calcite-color-foreground-1));max-block-size:100%;padding:var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal))}.content-top,.content-bottom{z-index:var(--calcite-z-index-header);display:flex;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto;padding:var(--calcite-modal-padding-internal)}.content-top{min-inline-size:0px;max-inline-size:100%;border-block-end-width:1px}.content-bottom{margin-block-start:auto;box-sizing:border-box;inline-size:100%;justify-content:space-between;border-block-start-width:1px}.content-top:not(.header~.content-top){border-start-start-radius:.25rem;border-start-end-radius:.25rem}.content-bottom:not(.content-bottom~.footer),.content--no-footer{border-end-end-radius:.25rem;border-end-start-radius:.25rem}slot[name=content]::slotted(*),*::slotted([slot=content]){font-size:var(--calcite-modal-context-text-internal)}.footer{z-index:var(--calcite-z-index-header);margin-block-start:auto;box-sizing:border-box;display:flex;inline-size:100%;justify-content:space-between;border-end-end-radius:.25rem;border-end-start-radius:.25rem;border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-large-internal)}.footer--hide-back .back,.footer--hide-secondary .secondary{display:none}.back{display:block;margin-inline-end:auto}.secondary{margin-inline:.25rem;display:block}slot[name=primary]{display:block}:host([width=small]) .modal{inline-size:auto}:host([width-scale=s]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 32rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 35rem){:host([width-scale=s]) .modal{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=s]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=s][docked]) .container{align-items:flex-end}}:host([width-scale=m]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 48rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 51rem){:host([width-scale=m]) .modal{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=m]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=m][docked]) .container{align-items:flex-end}}:host([width-scale=l]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 94rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 97rem){:host([width-scale=l]) .modal{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=l]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=l][docked]) .container{align-items:flex-end}}:host([fullscreen]) .modal{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0;--calcite-modal-hidden-position: translate3D(0, 20px, 0) scale(.95);--calcite-modal-shown-position: translate3D(0, 0, 0) scale(1)}:host([fullscreen]) .content{max-block-size:100%;flex:1 1 auto}:host([opened][fullscreen]) .header,:host([opened][fullscreen]) .footer,:host([opened][fullscreen]) .content-top,:host([opened][fullscreen]) .content-bottom{border-radius:0}:host([docked]) .modal{block-size:var(--calcite-modal-height, auto)}:host([docked]) .content{block-size:auto;flex:1 1 auto}:host([kind=brand]) .modal{border-color:var(--calcite-color-brand)}:host([kind=danger]) .modal{border-color:var(--calcite-color-status-danger)}:host([kind=info]) .modal{border-color:var(--calcite-color-status-info)}:host([kind=success]) .modal{border-color:var(--calcite-color-status-success)}:host([kind=warning]) .modal{border-color:var(--calcite-color-status-warning)}:host([kind=brand]) .modal,:host([kind=danger]) .modal,:host([kind=info]) .modal,:host([kind=success]) .modal,:host([kind=warning]) .modal{border-width:0px;border-block-start-width:4px;border-style:solid}:host([kind=brand]) .header,:host([kind=brand]) .content-top,:host([kind=danger]) .header,:host([kind=danger]) .content-top,:host([kind=info]) .header,:host([kind=info]) .content-top,:host([kind=success]) .header,:host([kind=success]) .content-top,:host([kind=warning]) .header,:host([kind=warning]) .content-top{border-radius:.25rem;border-end-end-radius:0px;border-end-start-radius:0px}@media screen and (max-width: 860px){* slot[name=header]::slotted(content-top),* content-top::slotted([slot=header]){font-size:var(--calcite-font-size-1)}.footer,.content-bottom{position:sticky;inset-block-end:0px}}@media screen and (max-width: 480px){.footer,.content-bottom{flex-direction:column}.back,.secondary{margin:0;margin-block-end:.25rem}}:host([hidden]){display:none}[hidden]{display:none}`;
+let r = 0, v = "";
+class M extends y {
   // #endregion
   // #region Lifecycle
   constructor() {
-    super(), this.closeButtonEl = m(), this.cssVarObserver = v("mutation", () => {
+    super(), this.closeButtonEl = m(), this.cssVarObserver = f("mutation", () => {
       this.updateSizeCssVars();
-    }), this.ignoreOpenChange = !1, this.modalContent = m(), this.mutationObserver = v("mutation", () => this.updateFocusTrapElements()), this._open = !1, this.openEnd = () => {
+    }), this.focusTrap = B({
+      triggerProp: "open",
+      focusTrapOptions: {
+        // scrim closes on click, so we let it take over
+        clickOutsideDeactivates: !1,
+        escapeDeactivates: (e) => (!e.defaultPrevented && !this.escapeDisabled && (this.open = !1, e.preventDefault()), !1)
+      }
+    })(this), this.ignoreOpenChange = !1, this.modalContent = m(), this.mutationObserver = f("mutation", () => this.updateFocusTrapElements()), this._open = !1, this.openEnd = () => {
       this.setFocus(), this.el.removeEventListener("calciteModalOpen", this.openEnd);
-    }, this.openTransitionProp = "opacity", this.hasBack = !1, this.hasContentBottom = !1, this.hasContentTop = !1, this.hasFooter = !1, this.hasPrimary = !1, this.hasSecondary = !1, this.closeButtonDisabled = !1, this.escapeDisabled = !1, this.focusTrapDisabled = !1, this.messages = M(), this.opened = !1, this.outsideCloseDisabled = !1, this.scale = "m", this.widthScale = "m", this.calciteModalBeforeClose = l({ cancelable: !1 }), this.calciteModalBeforeOpen = l({ cancelable: !1 }), this.calciteModalClose = l({ cancelable: !1 }), this.calciteModalOpen = l({ cancelable: !1 }), this.keyDownHandler = (e) => {
-      const { defaultPrevented: i, key: k } = e;
-      !i && this.focusTrapDisabled && this.open && !this.escapeDisabled && k === "Escape" && (e.preventDefault(), this.open = !1);
+    }, this.openProp = "opened", this.transitionProp = "opacity", this.hasBack = !1, this.hasContentBottom = !1, this.hasContentTop = !1, this.hasFooter = !1, this.hasPrimary = !1, this.hasSecondary = !1, this.closeButtonDisabled = !1, this.escapeDisabled = !1, this.focusTrapDisabled = !1, this.messages = S(), this.opened = !1, this.outsideCloseDisabled = !1, this.scale = "m", this.widthScale = "m", this.calciteModalBeforeClose = l({ cancelable: !1 }), this.calciteModalBeforeOpen = l({ cancelable: !1 }), this.calciteModalClose = l({ cancelable: !1 }), this.calciteModalOpen = l({ cancelable: !1 }), this.keyDownHandler = (e) => {
+      const { defaultPrevented: i, key: c } = e;
+      !i && this.focusTrapDisabled && this.open && !this.escapeDisabled && c === "Escape" && (e.preventDefault(), this.open = !1);
     }, this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { contentEl: 16, cssHeight: 16, cssWidth: 16, hasBack: 16, hasContentBottom: 16, hasContentTop: 16, hasFooter: 16, hasPrimary: 16, hasSecondary: 16, titleEl: 16, beforeClose: 0, closeButtonDisabled: 7, docked: 7, escapeDisabled: 7, focusTrapDisabled: 7, fullscreen: 7, kind: 3, messageOverrides: 0, open: 7, opened: 7, outsideCloseDisabled: 7, scale: 3, widthScale: 3 };
+    this.properties = { contentEl: 16, cssHeight: 16, cssWidth: 16, hasBack: 16, hasContentBottom: 16, hasContentTop: 16, hasFooter: 16, hasPrimary: 16, hasSecondary: 16, titleEl: 16, beforeClose: 0, closeButtonDisabled: 7, docked: 7, escapeDisabled: 7, focusTrapDisabled: 7, focusTrapOptions: 0, fullscreen: 7, kind: 3, messageOverrides: 0, open: 7, opened: 7, outsideCloseDisabled: 7, scale: 3, widthScale: 3 };
   }
   static {
-    this.styles = L;
+    this.styles = D;
   }
   /** When `true`, displays and positions the component. */
   get open() {
@@ -93,39 +96,33 @@ class I extends z {
   }
   /** Sets focus on the component's "close" button (the first focusable item). */
   async setFocus() {
-    await S(this), C(this.el);
+    await z(this), w(this.el);
   }
-  /** Updates the element(s) that are used within the focus-trap of the component. */
-  async updateFocusTrapElements() {
-    $(this);
+  /**
+   * Updates the element(s) that are included in the focus-trap of the component.
+   *
+   * @param extraContainers - Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus trapping element.
+   */
+  async updateFocusTrapElements(e) {
+    this.focusTrap.updateContainerElements(e);
   }
   connectedCallback() {
-    super.connectedCallback(), this.mutationObserver?.observe(this.el, { childList: !0, subtree: !0 }), this.cssVarObserver?.observe(this.el, { attributeFilter: ["style"] }), this.updateSizeCssVars(), O(this, {
-      focusTrapOptions: {
-        // scrim closes on click, so we let it take over
-        clickOutsideDeactivates: !1,
-        escapeDeactivates: (e) => (!e.defaultPrevented && !this.escapeDisabled && (this.open = !1, e.preventDefault()), !1)
-      }
-    });
+    super.connectedCallback(), this.mutationObserver?.observe(this.el, { childList: !0, subtree: !0 }), this.cssVarObserver?.observe(this.el, { attributeFilter: ["style"] }), this.updateSizeCssVars();
   }
   async load() {
-    F.deprecated("component", {
+    O.deprecated("component", {
       name: "modal",
       removalVersion: 4,
       suggested: "dialog"
-    }), T(this), this.open && this.openModal();
+    }), this.open && this.openModal();
   }
   willUpdate(e) {
-    e.has("focusTrapDisabled") && (this.hasUpdated || this.focusTrapDisabled !== !1) && this.handleFocusTrapDisabled(this.focusTrapDisabled), (e.has("hasBack") && (this.hasUpdated || this.hasBack !== !1) || e.has("hasPrimary") && (this.hasUpdated || this.hasPrimary !== !1) || e.has("hasSecondary") && (this.hasUpdated || this.hasSecondary !== !1)) && (this.hasFooter = this.hasBack || this.hasPrimary || this.hasSecondary), e.has("opened") && (this.hasUpdated || this.opened !== !1) && this.handleOpenedChange(this.opened);
+    (e.has("hasBack") && (this.hasUpdated || this.hasBack !== !1) || e.has("hasPrimary") && (this.hasUpdated || this.hasPrimary !== !1) || e.has("hasSecondary") && (this.hasUpdated || this.hasSecondary !== !1)) && (this.hasFooter = this.hasBack || this.hasPrimary || this.hasSecondary), e.has("opened") && (this.hasUpdated || this.opened !== !1) && this.handleOpenedChange(this.opened);
   }
   loaded() {
-    E(this);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeOverflowHiddenClass(), this.mutationObserver?.disconnect(), this.cssVarObserver?.disconnect(), d(this);
-  }
-  handleFocusTrapDisabled(e) {
-    this.open && (e ? d(this) : g(this));
+    super.disconnectedCallback(), this.removeOverflowHiddenClass(), this.mutationObserver?.disconnect(), this.cssVarObserver?.disconnect();
   }
   handleHeaderSlotChange(e) {
     this.titleEl = u(e)[0];
@@ -149,26 +146,29 @@ class I extends z {
     this.transitionEl?.classList.add(t.openingActive), this.calciteModalBeforeOpen.emit();
   }
   onOpen() {
-    this.transitionEl?.classList.remove(t.openingIdle, t.openingActive), this.calciteModalOpen.emit(), g(this);
+    this.transitionEl?.classList.remove(t.openingIdle, t.openingActive), this.calciteModalOpen.emit(), this.focusTrap.activate();
   }
   onBeforeClose() {
     this.transitionEl?.classList.add(t.closingActive), this.calciteModalBeforeClose.emit();
   }
   onClose() {
-    this.transitionEl?.classList.remove(t.closingIdle, t.closingActive), this.calciteModalClose.emit(), d(this);
+    this.transitionEl?.classList.remove(t.closingIdle, t.closingActive), this.calciteModalClose.emit(), this.focusTrap.deactivate();
   }
   toggleModal(e) {
     this.ignoreOpenChange || (e ? this.openModal() : this.closeModal());
   }
   handleOpenedChange(e) {
-    const i = e ? t.openingIdle : t.closingIdle;
-    this.transitionEl.classList.add(i), B(this);
+    const { transitionEl: i } = this;
+    if (!i)
+      return;
+    const c = e ? t.openingIdle : t.closingIdle;
+    i.classList.add(c), C(this);
   }
   handleCloseClick() {
     this.open = !1;
   }
   async openModal() {
-    await this.componentOnReady(), this.el.addEventListener("calciteModalOpen", this.openEnd), this.opened = !0, this.titleId = f(this.titleEl), this.contentId = f(this.contentEl), b(this.el) === document.body && (r === 0 && (x = document.documentElement.style.overflow), r++, document.documentElement.style.setProperty("overflow", "hidden"));
+    await this.componentOnReady(), this.el.addEventListener("calciteModalOpen", this.openEnd), this.opened = !0, this.titleId = g(this.titleEl), this.contentId = g(this.contentEl), b(this.el) === document.body && (r === 0 && (v = document.documentElement.style.overflow), r++, document.documentElement.style.setProperty("overflow", "hidden"));
   }
   handleOutsideClose() {
     this.outsideCloseDisabled || (this.open = !1);
@@ -186,7 +186,7 @@ class I extends z {
     b(this.el) === document.body && (r--, r === 0 && this.removeOverflowHiddenClass()), this.opened = !1;
   }
   removeOverflowHiddenClass() {
-    document.documentElement.style.setProperty("overflow", x);
+    document.documentElement.style.setProperty("overflow", v);
   }
   updateSizeCssVars() {
     this.cssWidth = getComputedStyle(this.el).getPropertyValue("--calcite-modal-width"), this.cssHeight = getComputedStyle(this.el).getPropertyValue("--calcite-modal-height");
@@ -205,10 +205,10 @@ class I extends z {
       [t.containerOpen]: this.opened
     })}><calcite-scrim class=${o(t.scrim)} @click=${this.handleOutsideClose}></calcite-scrim>${this.renderStyle()}<div class=${o({
       [t.modal]: !0
-    })} ${c(this.setTransitionEl)}><div class=${o(t.header)}>${this.renderCloseButton()}<header class=${o(t.title)}><slot name=${t.header} @slotchange=${this.handleHeaderSlotChange}></slot></header></div>${this.renderContentTop()}<div class=${o({
+    })} ${d(this.setTransitionEl)}><div class=${o(t.header)}>${this.renderCloseButton()}<header class=${o(t.title)}><slot name=${t.header} @slotchange=${this.handleHeaderSlotChange}></slot></header></div>${this.renderContentTop()}<div class=${o({
       [t.content]: !0,
       [t.contentNoFooter]: !this.hasFooter
-    })} ${c(this.modalContent)}><slot name=${n.content} @slotchange=${this.handleContentSlotChange}></slot></div>${this.renderContentBottom()}${this.renderFooter()}</div></div>`;
+    })} ${d(this.modalContent)}><slot name=${n.content} @slotchange=${this.handleContentSlotChange}></slot></div>${this.renderContentBottom()}${this.renderFooter()}</div></div>`;
   }
   renderFooter() {
     return h("footer", a`<div class=${o(t.footer)} .hidden=${!this.hasFooter}><span class=${o(t.back)}><slot name=${n.back} @slotchange=${this.handleBackSlotChange}></slot></span><span class=${o(t.secondary)}><slot name=${n.secondary} @slotchange=${this.handleSecondarySlotChange}></slot></span><span class=${o(t.primary)}><slot name=${n.primary} @slotchange=${this.handlePrimarySlotChange}></slot></span></div>`);
@@ -220,7 +220,7 @@ class I extends z {
     return a`<div class=${o(t.contentBottom)} .hidden=${!this.hasContentBottom}><slot name=${n.contentBottom} @slotchange=${this.contentBottomSlotChangeHandler}></slot></div>`;
   }
   renderCloseButton() {
-    return this.closeButtonDisabled ? null : h("button", a`<button .ariaLabel=${this.messages.close} class=${o(t.close)} @click=${this.handleCloseClick} title=${this.messages.close ?? w} ${c(this.closeButtonEl)}><calcite-icon .icon=${P.close} .scale=${D(this.scale)}></calcite-icon></button>`);
+    return this.closeButtonDisabled ? null : h("button", a`<button .ariaLabel=${this.messages.close} class=${o(t.close)} @click=${this.handleCloseClick} title=${this.messages.close ?? k} ${d(this.closeButtonEl)}><calcite-icon .icon=${T.close} .scale=${$(this.scale)}></calcite-icon></button>`);
   }
   renderStyle() {
     if (!this.fullscreen && (this.cssWidth || this.cssHeight))
@@ -251,7 +251,7 @@ class I extends z {
           `}</style>`;
   }
 }
-y("calcite-modal", I);
+x("calcite-modal", M);
 export {
-  I as Modal
+  M as Modal
 };

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

@@ -1,15 +1,13 @@
 import { c as r } from "../../chunks/runtime.js";
-import { html as s } from "lit-html";
+import { html as i } from "lit-html";
 import { createRef as l, ref as c } from "lit-html/directives/ref.js";
 import { LitElement as m, createEvent as h, safeClassMap as o } from "@arcgis/lumina";
 import { a as n } from "../../chunks/dom.js";
-import { c as d, s as g, a as S } from "../../chunks/loadable.js";
-import { css as y } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
+import { c as d } from "../../chunks/loadable.js";
+import { css as g } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.0 */
 const a = {
   container: "container",
   containerContent: "container-content",
@@ -28,10 +26,10 @@ const a = {
   contentCenter: "content-center",
   navSecondary: "navigation-secondary",
   navTertiary: "navigation-tertiary"
-}, v = {
+}, S = {
   hamburger: "hamburger"
-}, p = y`:host([hidden]){display:none}[hidden]{display:none}.container{display:flex;inline-size:100%;flex-direction:column;margin-block:0;margin-inline:auto;background-color:var(--calcite-navigation-background-color, var(--calcite-navigation-background, var(--calcite-color-foreground-1)))}.container.primary,.container.secondary,.container.tertiary{border-block-end:1px solid;border-block-end-color:var(--calcite-navigation-border-color, var(--calcite-color-border-3))}.user,.logo{display:flex}.hide{display:none}.primary{block-size:4rem}.secondary,.tertiary{block-size:3rem}.container-content{margin-inline:auto;display:flex;block-size:100%;inline-size:100%;margin-block:0;inline-size:var(--calcite-navigation-width, 100%);max-inline-size:100%}.container-content.progress-bar{margin-block-start:.125rem}slot[name]{display:flex;flex-direction:row}slot[name=navigation-secondary]::slotted(calcite-navigation),slot[name=navigation-tertiary]::slotted(calcite-navigation){inline-size:100%}slot[name=content-start]::slotted(*),slot[name=content-center]::slotted(*),slot[name=content-end]::slotted(*){display:flex;flex-direction:row;align-items:center}slot[name=progress],slot[name=progress] calcite-progress{inset-block-start:0;inset-inline:0}slot[name=content-end]{margin-inline-start:auto}slot[name=content-start]{margin-inline-end:auto}slot[name=content-end],slot[name=logo]~slot[name=user],slot[name=user]:only-child{margin-inline-start:auto}slot[name=content-center]{margin-inline-start:auto;margin-inline-end:auto}slot[name=content-start]~slot[name=content-center]{margin-inline-start:0px}slot[name=content-start]~slot[name=content-end],slot[name=content-center]~slot[name=content-end],slot[name=content-center]~slot[name=user],slot[name=content-end]~slot[name=user]{margin:0}`;
-class C extends m {
+}, y = g`:host([hidden]){display:none}[hidden]{display:none}.container{display:flex;inline-size:100%;flex-direction:column;margin-block:0;margin-inline:auto;background-color:var(--calcite-navigation-background-color, var(--calcite-navigation-background, var(--calcite-color-foreground-1)))}.container.primary,.container.secondary,.container.tertiary{border-block-end:1px solid;border-block-end-color:var(--calcite-navigation-border-color, var(--calcite-color-border-3))}.user,.logo{display:flex}.hide{display:none}.primary{block-size:4rem}.secondary,.tertiary{block-size:3rem}.container-content{margin-inline:auto;display:flex;block-size:100%;inline-size:100%;margin-block:0;inline-size:var(--calcite-navigation-width, 100%);max-inline-size:100%}.container-content.progress-bar{margin-block-start:.125rem}slot[name]{display:flex;flex-direction:row}slot[name=navigation-secondary]::slotted(calcite-navigation),slot[name=navigation-tertiary]::slotted(calcite-navigation){inline-size:100%}slot[name=content-start]::slotted(*),slot[name=content-center]::slotted(*),slot[name=content-end]::slotted(*){display:flex;flex-direction:row;align-items:center}slot[name=progress],slot[name=progress] calcite-progress{inset-block-start:0;inset-inline:0}slot[name=content-end]{margin-inline-start:auto}slot[name=content-start]{margin-inline-end:auto}slot[name=content-end],slot[name=logo]~slot[name=user],slot[name=user]:only-child{margin-inline-start:auto}slot[name=content-center]{margin-inline-start:auto;margin-inline-end:auto}slot[name=content-start]~slot[name=content-center]{margin-inline-start:0px}slot[name=content-start]~slot[name=content-end],slot[name=content-center]~slot[name=content-end],slot[name=content-center]~slot[name=user],slot[name=content-end]~slot[name=user]{margin:0}`;
+class v extends m {
   constructor() {
     super(...arguments), this.navigationActionEl = l(), this.navigationAction = !1, this.calciteNavigationActionSelect = h({ cancelable: !1 });
   }
@@ -39,7 +37,7 @@ class C extends m {
     this.properties = { logoSlotHasElements: 16, navigationActionSlotHasElements: 16, primaryContentCenterSlotHasElements: 16, primaryContentEndSlotHasElements: 16, primaryContentStartSlotHasElements: 16, progressSlotHasElement: 16, secondarySlotHasElements: 16, tertiarySlotHasElements: 16, userSlotHasElements: 16, label: 1, navigationAction: 7 };
   }
   static {
-    this.styles = p;
+    this.styles = y;
   }
   // #endregion
   // #region Public Methods
@@ -50,10 +48,8 @@ class C extends m {
   // #endregion
   // #region Lifecycle
   load() {
-    g(this);
   }
   loaded() {
-    S(this);
   }
   // #endregion
   // #region Private Methods
@@ -93,19 +89,19 @@ class C extends m {
   // #endregion
   // #region Rendering
   renderMenuAction() {
-    return s`<slot name=${e.navigationAction} @slotchange=${this.handleMenuActionSlotChange}>${this.navigationAction && s`<calcite-action .icon=${v.hamburger} @click=${this.actionClickHandler} .text=${this.label} ${c(this.navigationActionEl)}></calcite-action>` || ""}</slot>`;
+    return i`<slot name=${e.navigationAction} @slotchange=${this.handleMenuActionSlotChange}>${this.navigationAction && i`<calcite-action .icon=${S.hamburger} @click=${this.actionClickHandler} .text=${this.label} ${c(this.navigationActionEl)}></calcite-action>` || ""}</slot>`;
   }
   render() {
-    const t = this.logoSlotHasElements || this.userSlotHasElements || this.navigationActionSlotHasElements || this.primaryContentCenterSlotHasElements || this.primaryContentEndSlotHasElements || this.primaryContentStartSlotHasElements || this.navigationAction, i = this.el.slot;
-    return s`<div class=${o({
+    const t = this.logoSlotHasElements || this.userSlotHasElements || this.navigationActionSlotHasElements || this.primaryContentCenterSlotHasElements || this.primaryContentEndSlotHasElements || this.primaryContentStartSlotHasElements || this.navigationAction, s = this.el.slot;
+    return i`<div class=${o({
       [a.container]: !0,
-      [a.secondary]: i === e.navSecondary,
-      [a.tertiary]: i === e.navTertiary,
+      [a.secondary]: s === e.navSecondary,
+      [a.tertiary]: s === e.navTertiary,
       [a.primary]: t
     })}><div class=${o({ [a.hide]: !this.progressSlotHasElement, [e.progress]: !0 })}><slot name=${e.progress} @slotchange=${this.handleProgressSlotChange}></slot></div><div class=${o({ [a.containerContent]: !0, [a.hasProgress]: this.progressSlotHasElement })}>${this.renderMenuAction()}<div class=${o({ [a.hide]: !this.logoSlotHasElements, [e.logo]: !0 })}><slot name=${e.logo} @slotchange=${this.handleLogoSlotChange}></slot></div><slot name=${e.contentStart} @slotchange=${this.handleContentStartSlotChange}></slot><slot name=${e.contentCenter} @slotchange=${this.handleContentCenterSlotChange}></slot><slot name=${e.contentEnd} @slotchange=${this.handleContentEndSlotChange}></slot><div class=${o({ [a.hide]: !this.userSlotHasElements, [e.user]: !0 })}><slot name=${e.user} @slotchange=${this.handleUserSlotChange}></slot></div></div></div><slot name=${e.navSecondary} @slotchange=${this.handleSecondarySlotChange}></slot><slot name=${e.navTertiary} @slotchange=${this.handleTertiarySlotChange}></slot>`;
   }
 }
-r("calcite-navigation", C);
+r("calcite-navigation", v);
 export {
-  C as Navigation
+  v as Navigation
 };

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

@@ -2,14 +2,12 @@ import { c as h } from "../../chunks/runtime.js";
 import { html as e } from "lit-html";
 import { keyed as s } from "lit-html/directives/keyed.js";
 import { LitElement as p, safeClassMap as o, nothing as i } from "@arcgis/lumina";
-import { c as v, s as f, a as m } from "../../chunks/loadable.js";
-import { H as u } from "../../chunks/Heading.js";
-import { css as x } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
+import { c as v } from "../../chunks/loadable.js";
+import { H as f } from "../../chunks/Heading.js";
+import { css as m } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.0 */
 const t = {
   container: "container",
   containerLink: "container--link",
@@ -19,8 +17,8 @@ const t = {
   image: "image",
   standalone: "standalone",
   icon: "icon"
-}, b = x`:host{display:inline-flex}.container{margin:0;display:flex;align-items:center;justify-content:center;font-size:var(--calcite-font-size-0);line-height:1.25rem;background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-logo-background-color, var(--calcite-color-foreground-1)));border-block-end:2px solid var(--calcite-color-transparent);transition-property:background-color;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.container--link{cursor:pointer;text-decoration-line:none;outline-color:transparent}:host(:focus) .container--link{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.image,.icon{margin:0;display:flex;block-size:1.75rem;padding-inline:1rem;color:var(--calcite-navigation-logo-text-color, var(--calcite-icon-color, var(--calcite-internal-navigation-logo-text-color, inherit)))}.image~.icon{padding-inline-start:0px}.image~.text-container,.icon~.text-container{padding-inline-start:0px}:host([href]:hover),:host([href]:focus){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-2)}:host([href]:active){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-3)}:host([active]) .container{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([active]),:host([href]:active){--calcite-internal-navigation-logo-text-color: var(--calcite-color-brand)}.text-container{margin-block-start:.125rem;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:1rem;text-align:start}.heading{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-navigation-logo-heading-text-color, var(--calcite-color-text-1))}.standalone{font-size:var(--calcite-font-size-1)}.description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-color-text-2);color:var(--calcite-navigation-logo-text-color, var(--calcite-color-text-2));font-size:var(--calcite-font-size--1)}:host([hidden]){display:none}[hidden]{display:none}`;
-class $ extends p {
+}, u = m`:host{display:inline-flex}.container{margin:0;display:flex;align-items:center;justify-content:center;font-size:var(--calcite-font-size-0);line-height:1.25rem;background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-logo-background-color, var(--calcite-color-foreground-1)));border-block-end:2px solid var(--calcite-color-transparent);transition-property:background-color;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.container--link{cursor:pointer;text-decoration-line:none;outline-color:transparent}:host(:focus) .container--link{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.image,.icon{margin:0;display:flex;block-size:1.75rem;padding-inline:1rem;color:var(--calcite-navigation-logo-text-color, var(--calcite-icon-color, var(--calcite-internal-navigation-logo-text-color, inherit)))}.image~.icon{padding-inline-start:0px}.image~.text-container,.icon~.text-container{padding-inline-start:0px}:host([href]:hover),:host([href]:focus){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-2)}:host([href]:active){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-3)}:host([active]) .container{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([active]),:host([href]:active){--calcite-internal-navigation-logo-text-color: var(--calcite-color-brand)}.text-container{margin-block-start:.125rem;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:1rem;text-align:start}.heading{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-navigation-logo-heading-text-color, var(--calcite-color-text-1))}.standalone{font-size:var(--calcite-font-size-1)}.description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-color-text-2);color:var(--calcite-navigation-logo-text-color, var(--calcite-color-text-2));font-size:var(--calcite-font-size--1)}:host([hidden]){display:none}[hidden]{display:none}`;
+class x extends p {
   constructor() {
     super(...arguments), this.iconFlipRtl = !1;
   }
@@ -31,7 +29,7 @@ class $ extends p {
     this.shadowRootOptions = { mode: "open", delegatesFocus: !0 };
   }
   static {
-    this.styles = b;
+    this.styles = u;
   }
   // #endregion
   // #region Public Methods
@@ -42,10 +40,8 @@ class $ extends p {
   // #endregion
   // #region Lifecycle
   load() {
-    f(this);
   }
   loaded() {
-    m(this);
   }
   // #endregion
   // #region Rendering
@@ -53,7 +49,7 @@ class $ extends p {
     return e`<calcite-icon class=${o(t.icon)} .flipRtl=${this.iconFlipRtl} .icon=${this.icon} scale=l></calcite-icon>`;
   }
   renderHeaderContent() {
-    const { heading: n, headingLevel: a, description: r } = this, c = n ? s(t.heading, u({ class: {
+    const { heading: n, headingLevel: a, description: r } = this, c = n ? s(t.heading, f({ class: {
       [t.heading]: !0,
       [t.standalone]: !this.description
     }, level: a, children: n })) : null, l = r ? s(t.description, e`<span class=${o(t.description)}>${r}</span>`) : null;
@@ -67,7 +63,7 @@ class $ extends p {
     })} href=${a ?? i} rel=${c ?? i} target=${l ?? i}>${g}</a>` : e`<div class=${o(t.container)}>${g}</div>`;
   }
 }
-h("calcite-navigation-logo", $);
+h("calcite-navigation-logo", x);
 export {
-  $ as NavigationLogo
+  x as NavigationLogo
 };