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

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

@@ -10,3 +10,4 @@ export declare function getListItemChildren(slotEl: HTMLSlotElement): {
 };
 export declare function updateListItemChildren(slotEl: HTMLSlotElement): void;
 export declare function getDepth(element: HTMLElement, includeGroup?: boolean): number;
+export declare function isListItem(element: Element): element is HTMLCalciteListItemElement;

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

@@ -4,11 +4,9 @@ import { LitElement as c, createEvent as n, safeClassMap as e } from "@arcgis/lu
 import { u as o, I as r } from "../../chunks/interactive.js";
 import { M as d } from "../../chunks/resources5.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.99
-*/
+/*! 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",
   heading: "heading"

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

@@ -4,14 +4,10 @@ import { LitElement as z, setAttribute as u, safeClassMap as d, safeStyleMap as
 import { g as x } from "../../chunks/guid.js";
 import { u as y } from "../../chunks/useT9n.js";
 import { css as b } 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.99
-*/
+/*! 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",
-  loader: "loader",
   percentage: "percentage",
   progressRing: "ring--progress",
   ring: "ring",

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

@@ -3,20 +3,18 @@ import { html as o } from "lit";
 import { LitElement as n } from "@arcgis/lumina";
 import { useWatchAttributes as u } from "@arcgis/components-controllers";
 import { h as r, d as a, s as h, b as m } from "../../chunks/dom.js";
-import { c, s as f, a as p } from "../../chunks/loadable.js";
-import { u as d } from "../../chunks/useT9n.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.99
-*/
-const b = y`:host{display:flex}ul{margin:0;display:inline-flex;block-size:100%;align-items:center;padding:0}:host([layout=vertical]) ul{display:flex;inline-size:100%;flex-direction:column}:host([hidden]){display:none}[hidden]{display:none}`;
-class g extends n {
+import { c } from "../../chunks/loadable.js";
+import { u as f } from "../../chunks/useT9n.js";
+import { css as p } 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 d = p`:host{display:flex}ul{margin:0;display:inline-flex;block-size:100%;align-items:center;padding:0}:host([layout=vertical]) ul{display:flex;inline-size:100%;flex-direction:column}:host([hidden]){display:none}[hidden]{display:none}`;
+class y extends n {
   // #endregion
   // #region Lifecycle
   constructor() {
-    super(), this.attributeWatch = u(["role"], this.handleGlobalAttributesChanged), this.menuItems = [], this.layout = "horizontal", this.messages = d(), this.listen("calciteInternalMenuItemKeyEvent", this.calciteInternalNavMenuItemKeyEvent);
+    super(), this.attributeWatch = u(["role"], this.handleGlobalAttributesChanged), this.menuItems = [], this.layout = "horizontal", this.messages = f(), this.listen("calciteInternalMenuItemKeyEvent", this.calciteInternalNavMenuItemKeyEvent);
   }
   static {
     this.properties = { label: 1, layout: 3, messageOverrides: 0 };
@@ -25,7 +23,7 @@ class g extends n {
     this.shadowRootOptions = { mode: "open", delegatesFocus: !0 };
   }
   static {
-    this.styles = b;
+    this.styles = d;
   }
   // #endregion
   // #region Public Methods
@@ -34,13 +32,11 @@ class g extends n {
     await c(this), r(this.menuItems[0]);
   }
   async load() {
-    f(this);
   }
   willUpdate(e) {
     e.has("layout") && (this.hasUpdated || this.layout !== "horizontal") && this.setMenuItemLayout(this.menuItems, this.layout);
   }
   loaded() {
-    p(this);
   }
   // #endregion
   // #region Private Methods
@@ -72,7 +68,7 @@ class g extends n {
     return o`<ul .ariaLabel=${this.label} .role=${this.getEffectiveRole()}><slot @slotchange=${this.handleMenuSlotChange}></slot></ul>`;
   }
 }
-l("calcite-menu", g);
+l("calcite-menu", y);
 export {
-  g as Menu
+  y as Menu
 };

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

@@ -4,14 +4,12 @@ import { keyed as l } from "lit-html/directives/keyed.js";
 import { createRef as m, ref as p } from "lit-html/directives/ref.js";
 import { LitElement as g, createEvent as v, safeClassMap as r, nothing as u } from "@arcgis/lumina";
 import { s as y, g as w } from "../../chunks/dom.js";
-import { c as x, s as I, a as $ } from "../../chunks/loadable.js";
-import { u as k } from "../../chunks/useT9n.js";
-import { css as L } 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.99
-*/
+import { c as x } from "../../chunks/loadable.js";
+import { u as I } from "../../chunks/useT9n.js";
+import { css as $ } 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",
   content: "content",
@@ -30,18 +28,18 @@ const t = {
   open: "open",
   nested: "nested",
   textContainer: "text-container"
-}, E = L`:host{position:relative;box-sizing:border-box;display:flex;align-items:center;flex-shrink:0}:host .container,:host .item-content,:host .content{min-block-size:3rem}:host([layout=vertical]){inline-size:100%}:host(:not([layout=vertical])){block-size:100%}.container,.item-content{display:flex;block-size:100%;inline-size:100%;flex-direction:row;align-items:stretch}.content{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-items:center;justify-content:center;padding-inline:1rem;font-size:var(--calcite-font-size-0);outline:2px solid transparent;outline-offset:2px;text-decoration:none;padding-block-start:.125rem;border-block-end:.125rem solid var(--calcite-color-transparent);background-color:var(--calcite-menu-background-color, var(--calcite-internal-menu-background-color, var(--calcite-color-foreground-1)));color:var(--calcite-menu-text-color, var(--calcite-internal-menu-text-color, var(--calcite-color-text-2)))}.content:hover{border-block-end-color:var(--calcite-menu-item-accent-color, var(--calcite-color-border-2))}.content:focus{border-block-end-width:4px;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))));padding-block-start:.25rem;border-block-end-width:.25rem}.content:active{--calcite-internal-menu-background-color: var(--calcite-color-foreground-3);--calcite-internal-menu-text-color: var(--calcite-color-text-1)}.content span{display:inline-flex}.content.layout--vertical{display:flex;inline-size:100%;justify-content:flex-start;padding-block:1rem;border-block-end:0;border-inline-end:.25rem solid var(--calcite-color-transparent)}:host([layout=vertical]) .content{padding-inline:.75rem}:host([active]) .content{--calcite-internal-menu-text-color: var(--calcite-color-text-1);border-color:var(--calcite-menu-item-accent-color, var(--calcite-color-brand))}:host([active]) .icon{--calcite-internal-menu-item-icon-color: var(--calcite-color-brand)}.icon{color:var(--calcite-menu-text-color, var(--calcite-icon-color, var(--calcite-internal-menu-item-icon-color, var(--calcite-color-text-3))))}.icon--start{margin-inline-end:.75rem}.icon--end{margin-inline-start:.75rem}:host([layout=vertical]) .icon--end{margin-inline-start:auto;padding-inline-start:.75rem}.icon--dropdown{position:relative;margin-inline-start:auto;margin-inline-end:0px;padding-inline-start:.5rem}:host([layout=vertical]) .icon--end~.icon--dropdown{margin-inline-start:.75rem}:host([layout=vertical]) .hover-href-icon{padding-inline-start:.5rem}:host([layout=vertical]) .hover-href-icon~.icon--end{margin-inline-start:.5rem}:host([layout=vertical]) .hover-href-icon~.icon--breadcrumb{margin-inline-start:.75rem}.icon--breadcrumb{margin-inline-end:0px;padding-inline-start:.5rem}:host([layout=vertical]) .icon--breadcrumb{margin-inline-start:auto}:host([layout=vertical]) .icon--breadcrumb~.icon--dropdown{margin-inline-start:.5rem}:host([layout=vertical]) .icon--end~.icon--breadcrumb{margin-inline-start:.5rem}:host([breadcrumb]) .content{padding-inline-end:.75rem}calcite-action{position:relative;block-size:auto;border-inline-start:1px solid var(--calcite-color-foreground-1);--calcite-action-background-color: var(--calcite-menu-background-color);--calcite-action-text-color: var(--calcite-menu-text-color)}calcite-action:after{position:absolute;inset-inline-start:-1px;display:block;inline-size:1px;content:"";inset-block:.75rem;background-color:var(--calcite-color-border-3)}calcite-action:hover:after{block-size:100%;inset-block:0}calcite-action:active{--calcite-action-background-color-press: var(--calcite-menu-background-color)}.content:focus~calcite-action,.content:hover~calcite-action{--calcite-action-text-color: var(--calcite-menu-text-color, var(--calcite-color-text-1))}.content:focus~calcite-action:after,.content:hover~calcite-action:after{block-size:100%;inset-block:0}.dropdown-menu-items{position:absolute;display:none;block-size:auto;min-inline-size:100%;flex-direction:column;overflow:visible;border:1px solid var(--calcite-menu-item-sub-menu-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-menu-item-sub-menu-corner-radius, var(--calcite-corner-radius));inset-block-start:100%;z-index:var(--calcite-z-index-dropdown)}.dropdown-menu-items.open{display:block}.dropdown-menu-items.nested{position:absolute;inset-block-start:-1px;transform:translate(calc(100% - 2px))}.parent--vertical{flex-direction:column}.dropdown--vertical.dropdown-menu-items{position:relative;box-shadow:none;inset-block-start:0;transform:none}.dropdown--vertical.dropdown-menu-items:last-of-type{border-inline:0}:host([layout=vertical]:last-of-type) .dropdown-menu-items{border-block-end:0}:host([slot=submenu-item]) .parent--vertical{padding-inline-start:1.5rem}.dropdown-menu-items.nested.calcite--rtl{transform:translate(calc(-100% + 2px))}.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl{transform:none}.hover-href-icon{position:relative;inset-inline-end:.25rem;margin-inline-start:auto;opacity:0;transition:all var(--calcite-internal-animation-timing-medium) ease-in-out}.content:focus .hover-href-icon,.content:hover .hover-href-icon{inset-inline-end:-.25rem;opacity:1}:host([hidden]){display:none}[hidden]{display:none}`;
-class S extends g {
+}, k = $`:host{position:relative;box-sizing:border-box;display:flex;align-items:center;flex-shrink:0}:host .container,:host .item-content,:host .content{min-block-size:3rem}:host([layout=vertical]){inline-size:100%}:host(:not([layout=vertical])){block-size:100%}.container,.item-content{display:flex;block-size:100%;inline-size:100%;flex-direction:row;align-items:stretch}.content{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-items:center;justify-content:center;padding-inline:1rem;font-size:var(--calcite-font-size-0);outline:2px solid transparent;outline-offset:2px;text-decoration:none;padding-block-start:.125rem;border-block-end:.125rem solid var(--calcite-color-transparent);background-color:var(--calcite-menu-background-color, var(--calcite-internal-menu-background-color, var(--calcite-color-foreground-1)));color:var(--calcite-menu-text-color, var(--calcite-internal-menu-text-color, var(--calcite-color-text-2)))}.content:hover{border-block-end-color:var(--calcite-menu-item-accent-color, var(--calcite-color-border-2))}.content:focus{border-block-end-width:4px;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))));padding-block-start:.25rem;border-block-end-width:.25rem}.content:active{--calcite-internal-menu-background-color: var(--calcite-color-foreground-3);--calcite-internal-menu-text-color: var(--calcite-color-text-1)}.content span{display:inline-flex}.content.layout--vertical{display:flex;inline-size:100%;justify-content:flex-start;padding-block:1rem;border-block-end:0;border-inline-end:.25rem solid var(--calcite-color-transparent)}:host([layout=vertical]) .content{padding-inline:.75rem}:host([active]) .content{--calcite-internal-menu-text-color: var(--calcite-color-text-1);border-color:var(--calcite-menu-item-accent-color, var(--calcite-color-brand))}:host([active]) .icon{--calcite-internal-menu-item-icon-color: var(--calcite-color-brand)}.icon{color:var(--calcite-menu-text-color, var(--calcite-icon-color, var(--calcite-internal-menu-item-icon-color, var(--calcite-color-text-3))))}.icon--start{margin-inline-end:.75rem}.icon--end{margin-inline-start:.75rem}:host([layout=vertical]) .icon--end{margin-inline-start:auto;padding-inline-start:.75rem}.icon--dropdown{position:relative;margin-inline-start:auto;margin-inline-end:0px;padding-inline-start:.5rem}:host([layout=vertical]) .icon--end~.icon--dropdown{margin-inline-start:.75rem}:host([layout=vertical]) .hover-href-icon{padding-inline-start:.5rem}:host([layout=vertical]) .hover-href-icon~.icon--end{margin-inline-start:.5rem}:host([layout=vertical]) .hover-href-icon~.icon--breadcrumb{margin-inline-start:.75rem}.icon--breadcrumb{margin-inline-end:0px;padding-inline-start:.5rem}:host([layout=vertical]) .icon--breadcrumb{margin-inline-start:auto}:host([layout=vertical]) .icon--breadcrumb~.icon--dropdown{margin-inline-start:.5rem}:host([layout=vertical]) .icon--end~.icon--breadcrumb{margin-inline-start:.5rem}:host([breadcrumb]) .content{padding-inline-end:.75rem}calcite-action{position:relative;block-size:auto;border-inline-start:1px solid var(--calcite-color-foreground-1);--calcite-action-background-color: var(--calcite-menu-background-color);--calcite-action-text-color: var(--calcite-menu-text-color)}calcite-action:after{position:absolute;inset-inline-start:-1px;display:block;inline-size:1px;content:"";inset-block:.75rem;background-color:var(--calcite-color-border-3)}calcite-action:hover:after{block-size:100%;inset-block:0}calcite-action:active{--calcite-action-background-color-press: var(--calcite-menu-background-color)}.content:focus~calcite-action,.content:hover~calcite-action{--calcite-action-text-color: var(--calcite-menu-text-color, var(--calcite-color-text-1))}.content:focus~calcite-action:after,.content:hover~calcite-action:after{block-size:100%;inset-block:0}.dropdown-menu-items{position:absolute;display:none;block-size:auto;min-inline-size:100%;flex-direction:column;overflow:visible;border:1px solid var(--calcite-menu-item-sub-menu-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-menu-item-sub-menu-corner-radius, var(--calcite-corner-radius));inset-block-start:100%;z-index:var(--calcite-z-index-dropdown)}.dropdown-menu-items.open{display:block}.dropdown-menu-items.nested{position:absolute;inset-block-start:-1px;transform:translate(calc(100% - 2px))}.parent--vertical{flex-direction:column}.dropdown--vertical.dropdown-menu-items{position:relative;box-shadow:none;inset-block-start:0;transform:none}.dropdown--vertical.dropdown-menu-items:last-of-type{border-inline:0}:host([layout=vertical]:last-of-type) .dropdown-menu-items{border-block-end:0}:host([slot=submenu-item]) .parent--vertical{padding-inline-start:1.5rem}.dropdown-menu-items.nested.calcite--rtl{transform:translate(calc(-100% + 2px))}.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl{transform:none}.hover-href-icon{position:relative;inset-inline-end:.25rem;margin-inline-start:auto;opacity:0;transition:all var(--calcite-internal-animation-timing-medium) ease-in-out}.content:focus .hover-href-icon,.content:hover .hover-href-icon{inset-inline-end:-.25rem;opacity:1}:host([hidden]){display:none}[hidden]{display:none}`;
+class L extends g {
   // #endregion
   // #region Lifecycle
   constructor() {
-    super(), this.anchorEl = m(), this.dropdownActionEl = m(), this.hasSubmenu = !1, this.isTopLevelItem = !1, this.messages = k(), this.open = !1, this.calciteInternalMenuItemKeyEvent = v(), this.calciteMenuItemSelect = v(), this.listenOn(window, "click", this.handleClickOut), this.listen("focusout", this.handleFocusOut), this.listen("blur", this.blurHandler), this.listen("focus", this.focusHandler);
+    super(), this.anchorEl = m(), this.dropdownActionEl = m(), this.hasSubmenu = !1, this.isTopLevelItem = !1, this.messages = I(), this.open = !1, this.calciteInternalMenuItemKeyEvent = v(), this.calciteMenuItemSelect = v(), this.listenOn(window, "click", this.handleClickOut), this.listen("focusout", this.handleFocusOut), this.listen("blur", this.blurHandler), this.listen("focus", this.focusHandler);
   }
   static {
     this.properties = { hasSubmenu: 16, submenuItems: 16, active: 7, breadcrumb: 7, href: 1, iconEnd: 3, iconFlipRtl: 3, iconStart: 3, isTopLevelItem: 5, label: 1, layout: 3, messageOverrides: 0, open: 7, rel: 3, target: 3, text: 1, topLevelMenuLayout: 1 };
   }
   static {
-    this.styles = E;
+    this.styles = k;
   }
   // #endregion
   // #region Public Methods
@@ -50,10 +48,8 @@ class S extends g {
     await x(this), this.anchorEl.value.focus();
   }
   async load() {
-    I(this);
   }
   loaded() {
-    $(this);
   }
   // #endregion
   // #region Private Methods
@@ -164,7 +160,7 @@ class S extends g {
     })} role=none><div class=${r(t.itemContent)}><a .ariaCurrent=${this.isFocused ? "page" : !1} .ariaExpanded=${this.open} .ariaHasPopup=${this.hasSubmenu} .ariaLabel=${this.label} class=${r({ [t.layoutVertical]: this.layout === "vertical", [t.content]: !0 })} href=${this.href ?? u} @click=${this.clickHandler} @keydown=${this.keyDownHandler} rel=${this.rel ?? u} role=menuitem .tabIndex=${this.isTopLevelItem ? 0 : -1} target=${this.target ?? u} ${p(this.anchorEl)}>${this.renderItemContent(e)}</a>${this.href && this.hasSubmenu ? this.renderDropdownAction(e) : null}</div>${this.renderSubmenuItems(e)}</li>`;
   }
 }
-f("calcite-menu-item", S);
+f("calcite-menu-item", L);
 export {
-  S as MenuItem
+  L as MenuItem
 };

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.99
-*/
+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. */