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

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

@@ -1,19 +1,17 @@
-import { c as h } from "../../chunks/runtime.js";
+import { c as d } from "../../chunks/runtime.js";
 import { html as c } from "lit";
-import { createRef as m, ref as s } from "lit-html/directives/ref.js";
-import { LitElement as g, createEvent as i, stringOrBoolean as p, safeClassMap as e } from "@arcgis/lumina";
-import { v as a, a as f } from "../../chunks/dom.js";
-import { c as u, s as b, a as v } from "../../chunks/loadable.js";
+import { createRef as h, ref as a } from "lit-html/directives/ref.js";
+import { LitElement as m, createEvent as i, stringOrBoolean as g, safeClassMap as e } from "@arcgis/lumina";
+import { v as s, a as p } from "../../chunks/dom.js";
+import { c as f } from "../../chunks/loadable.js";
 import { K as l } from "../../chunks/resources4.js";
-import { o as r } from "../../chunks/openCloseComponent.js";
-import { g as d } from "../../chunks/component.js";
-import { u as k } from "../../chunks/useT9n.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.99
-*/
+import { o as u } from "../../chunks/openCloseComponent.js";
+import { g as r } from "../../chunks/component.js";
+import { u as b } from "../../chunks/useT9n.js";
+import { css as v } 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.1 */
 const n = {
   title: "title",
   message: "message",
@@ -25,22 +23,22 @@ const n = {
   container: "container",
   content: "notice-content",
   icon: "notice-icon"
-}, w = x`:host([scale=s]){--calcite-notice-spacing-token-small: .5rem;--calcite-notice-spacing-token-large: .75rem}:host([scale=s]) .container slot[name=title]::slotted(*),:host([scale=s]) .container *::slotted([slot=title]){margin-block:.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) .container slot[name=message]::slotted(*),:host([scale=s]) .container *::slotted([slot=message]){margin-block:.125rem;font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) ::slotted(calcite-link){margin-block:.125rem;font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .notice-close{padding:.5rem}:host([scale=m]){--calcite-notice-spacing-token-small: .75rem;--calcite-notice-spacing-token-large: 1rem}:host([scale=m]) .container slot[name=title]::slotted(*),:host([scale=m]) .container *::slotted([slot=title]){margin-block:.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) .container slot[name=message]::slotted(*),:host([scale=m]) .container *::slotted([slot=message]){margin-block:.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) ::slotted(calcite-link){margin-block:.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=l]){--calcite-notice-spacing-token-small: 1rem;--calcite-notice-spacing-token-large: 1.25rem}:host([scale=l]) .container slot[name=title]::slotted(*),:host([scale=l]) .container *::slotted([slot=title]){margin-block:.125rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) .container slot[name=message]::slotted(*),:host([scale=l]) .container *::slotted([slot=message]){margin-block:.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) ::slotted(calcite-link){margin-block:.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([width=auto]){--calcite-notice-width: auto}:host([width=half]){--calcite-notice-width: 50%}:host([width=full]){--calcite-notice-width: 100%}:host{margin-inline:auto;display:none;max-inline-size:100%;align-items:center;inline-size:var(--calcite-notice-width)}.container{pointer-events:none;margin-block:0px;box-sizing:border-box;display:flex;inline-size:100%;opacity:0;overflow:hidden;max-block-size:0;transition-property:opacity,max-block-size;transition-duration:var(--calcite-animation-timing);text-align:start;border-inline-start:var(--calcite-border-width-md) solid;box-shadow:0 0 0 0 transparent;background-color:var(--calcite-notice-background-color, var(--calcite-color-foreground-1))}.notice-close{outline-color:transparent}.notice-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))))}:host{display:flex}:host([open]) .container{pointer-events:auto;max-block-size:100%;align-items:center;opacity:1;--tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);overflow:visible}.container slot[name=title]::slotted(*),.container *::slotted([slot=title]){margin:0;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-notice-close-text-color-hover, var(--calcite-color-text-1))}.container slot[name=message]::slotted(*),.container *::slotted([slot=message]){margin:0;display:inline;font-weight:var(--calcite-font-weight-normal);margin-inline-end:var(--calcite-notice-spacing-token-small);color:var(--calcite-notice-content-text-color, var(--calcite-color-text-2))}.notice-content{box-sizing:border-box;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-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto;display:flex;min-inline-size:0px;flex-direction:column;overflow-wrap:break-word;flex:1 1 0;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:0 var(--calcite-notice-spacing-token-small)}.notice-content:first-of-type:not(:only-child){padding-inline-start:var(--calcite-notice-spacing-token-large)}.notice-content:only-of-type{padding-block:var(--calcite-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large)}.notice-icon{display:flex;align-items:center;box-sizing:border-box;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-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto}.notice-close{display:flex;cursor:pointer;align-items:center;align-self:stretch;border-style:none;background-color:transparent;outline:2px solid transparent;outline-offset:2px;box-sizing:border-box;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-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto;-webkit-appearance:none;color:var(--calcite-notice-close-text-color, var(--calcite-color-text-3))}.notice-close:hover,.notice-close:focus{background-color:var(--calcite-notice-close-background-color-focus, var(--calcite-color-foreground-2));color:var(--calcite-notice-close-text-color-hover, var(--calcite-color-text-1))}.notice-close:active{background-color:var(--calcite-notice-close-background-color-press, var(--calcite-color-foreground-3))}.actions-end{display:flex;align-self:stretch}:host([kind=brand]) .container{border-color:var(--calcite-color-brand)}:host([kind=brand]) .container .notice-icon{color:var(--calcite-color-brand)}:host([kind=info]) .container{border-color:var(--calcite-color-status-info)}:host([kind=info]) .container .notice-icon{color:var(--calcite-color-status-info)}:host([kind=danger]) .container{border-color:var(--calcite-color-status-danger)}:host([kind=danger]) .container .notice-icon{color:var(--calcite-color-status-danger)}:host([kind=success]) .container{border-color:var(--calcite-color-status-success)}:host([kind=success]) .container .notice-icon{color:var(--calcite-color-status-success)}:host([kind=warning]) .container{border-color:var(--calcite-color-status-warning)}:host([kind=warning]) .container .notice-icon{color:var(--calcite-color-status-warning)}:host([hidden]){display:none}[hidden]{display:none}`;
-class z extends g {
+}, k = v`:host([scale=s]){--calcite-notice-spacing-token-small: .5rem;--calcite-notice-spacing-token-large: .75rem}:host([scale=s]) .container slot[name=title]::slotted(*),:host([scale=s]) .container *::slotted([slot=title]){margin-block:.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) .container slot[name=message]::slotted(*),:host([scale=s]) .container *::slotted([slot=message]){margin-block:.125rem;font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) ::slotted(calcite-link){margin-block:.125rem;font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .notice-close{padding:.5rem}:host([scale=m]){--calcite-notice-spacing-token-small: .75rem;--calcite-notice-spacing-token-large: 1rem}:host([scale=m]) .container slot[name=title]::slotted(*),:host([scale=m]) .container *::slotted([slot=title]){margin-block:.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) .container slot[name=message]::slotted(*),:host([scale=m]) .container *::slotted([slot=message]){margin-block:.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) ::slotted(calcite-link){margin-block:.125rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=l]){--calcite-notice-spacing-token-small: 1rem;--calcite-notice-spacing-token-large: 1.25rem}:host([scale=l]) .container slot[name=title]::slotted(*),:host([scale=l]) .container *::slotted([slot=title]){margin-block:.125rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) .container slot[name=message]::slotted(*),:host([scale=l]) .container *::slotted([slot=message]){margin-block:.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) ::slotted(calcite-link){margin-block:.125rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([width=auto]){--calcite-notice-width: auto}:host([width=half]){--calcite-notice-width: 50%}:host([width=full]){--calcite-notice-width: 100%}:host{margin-inline:auto;display:none;max-inline-size:100%;align-items:center;inline-size:var(--calcite-notice-width)}.container{pointer-events:none;margin-block:0px;box-sizing:border-box;display:flex;inline-size:100%;opacity:0;overflow:hidden;max-block-size:0;transition-property:opacity,max-block-size;transition-duration:var(--calcite-animation-timing);text-align:start;border-inline-start:var(--calcite-border-width-md) solid;box-shadow:0 0 0 0 transparent;background-color:var(--calcite-notice-background-color, var(--calcite-color-foreground-1))}.notice-close{outline-color:transparent}.notice-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))))}:host{display:flex}:host([open]) .container{pointer-events:auto;max-block-size:100%;align-items:center;opacity:1;--tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);overflow:visible}.container slot[name=title]::slotted(*),.container *::slotted([slot=title]){margin:0;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-notice-close-text-color-hover, var(--calcite-color-text-1))}.container slot[name=message]::slotted(*),.container *::slotted([slot=message]){margin:0;display:inline;font-weight:var(--calcite-font-weight-normal);margin-inline-end:var(--calcite-notice-spacing-token-small);color:var(--calcite-notice-content-text-color, var(--calcite-color-text-2))}.notice-content{box-sizing:border-box;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-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto;display:flex;min-inline-size:0px;flex-direction:column;overflow-wrap:break-word;flex:1 1 0;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:0 var(--calcite-notice-spacing-token-small)}.notice-content:first-of-type:not(:only-child){padding-inline-start:var(--calcite-notice-spacing-token-large)}.notice-content:only-of-type{padding-block:var(--calcite-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large)}.notice-icon{display:flex;align-items:center;box-sizing:border-box;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-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto}.notice-close{display:flex;cursor:pointer;align-items:center;align-self:stretch;border-style:none;background-color:transparent;outline:2px solid transparent;outline-offset:2px;box-sizing:border-box;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-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto;-webkit-appearance:none;color:var(--calcite-notice-close-text-color, var(--calcite-color-text-3))}.notice-close:hover,.notice-close:focus{background-color:var(--calcite-notice-close-background-color-focus, var(--calcite-color-foreground-2));color:var(--calcite-notice-close-text-color-hover, var(--calcite-color-text-1))}.notice-close:active{background-color:var(--calcite-notice-close-background-color-press, var(--calcite-color-foreground-3))}.actions-end{display:flex;align-self:stretch}:host([kind=brand]) .container{border-color:var(--calcite-color-brand)}:host([kind=brand]) .container .notice-icon{color:var(--calcite-color-brand)}:host([kind=info]) .container{border-color:var(--calcite-color-status-info)}:host([kind=info]) .container .notice-icon{color:var(--calcite-color-status-info)}:host([kind=danger]) .container{border-color:var(--calcite-color-status-danger)}:host([kind=danger]) .container .notice-icon{color:var(--calcite-color-status-danger)}:host([kind=success]) .container{border-color:var(--calcite-color-status-success)}:host([kind=success]) .container .notice-icon{color:var(--calcite-color-status-success)}:host([kind=warning]) .container{border-color:var(--calcite-color-status-warning)}:host([kind=warning]) .container .notice-icon{color:var(--calcite-color-status-warning)}:host([hidden]){display:none}[hidden]{display:none}`;
+class x extends m {
   constructor() {
-    super(...arguments), this.closeButton = m(), this.openTransitionProp = "opacity", this.hasActionEnd = !1, this.closable = !1, this.iconFlipRtl = !1, this.kind = "brand", this.messages = k(), this.open = !1, this.scale = "m", this.width = "auto", this.calciteNoticeBeforeClose = i({ cancelable: !1 }), this.calciteNoticeBeforeOpen = i({ cancelable: !1 }), this.calciteNoticeClose = i({ cancelable: !1 }), this.calciteNoticeOpen = i({ cancelable: !1 });
+    super(...arguments), this.closeButton = h(), this.transitionProp = "opacity", this.hasActionEnd = !1, this.closable = !1, this.iconFlipRtl = !1, this.kind = "brand", this.messages = b(), this.open = !1, this.scale = "m", this.width = "auto", this.calciteNoticeBeforeClose = i({ cancelable: !1 }), this.calciteNoticeBeforeOpen = i({ cancelable: !1 }), this.calciteNoticeClose = i({ cancelable: !1 }), this.calciteNoticeOpen = i({ cancelable: !1 });
   }
   static {
-    this.properties = { hasActionEnd: 16, closable: 7, icon: [3, { converter: p }], iconFlipRtl: 7, kind: 3, messageOverrides: 0, open: 7, scale: 3, width: 3 };
+    this.properties = { hasActionEnd: 16, closable: 7, icon: [3, { converter: g }], iconFlipRtl: 7, kind: 3, messageOverrides: 0, open: 7, scale: 3, width: 3 };
   }
   static {
-    this.styles = w;
+    this.styles = k;
   }
   // #endregion
   // #region Public Methods
   /** Sets focus on the component's first focusable element. */
   async setFocus() {
-    await u(this);
+    await f(this);
     const t = this.el.querySelector("calcite-link");
     if (!(!this.closeButton.value && !t)) {
       if (t)
@@ -51,13 +49,12 @@ class z extends g {
   // #endregion
   // #region Lifecycle
   async load() {
-    b(this), this.requestedIcon = a(l, this.icon, this.kind), this.open && r(this);
+    this.requestedIcon = s(l, this.icon, this.kind);
   }
   willUpdate(t) {
-    t.has("open") && (this.hasUpdated || this.open !== !1) && r(this), (t.has("icon") || t.has("kind") && (this.hasUpdated || this.kind !== "brand")) && (this.requestedIcon = a(l, this.icon, this.kind));
+    t.has("open") && (this.hasUpdated || this.open !== !1) && u(this), (t.has("icon") || t.has("kind") && (this.hasUpdated || this.kind !== "brand")) && (this.requestedIcon = s(l, this.icon, this.kind));
   }
   loaded() {
-    v(this);
   }
   // #endregion
   // #region Private Methods
@@ -80,16 +77,16 @@ class z extends g {
     this.open = !1;
   }
   handleActionsEndSlotChange(t) {
-    this.hasActionEnd = f(t);
+    this.hasActionEnd = p(t);
   }
   // #endregion
   // #region Rendering
   render() {
-    const t = c`<button .ariaLabel=${this.messages.close} class=${e(o.close)} @click=${this.close} ${s(this.closeButton)}><calcite-icon icon=x .scale=${d(this.scale)}></calcite-icon></button>`;
-    return c`<div class=${e(o.container)} ${s(this.setTransitionEl)}>${this.requestedIcon ? c`<div class=${e(o.icon)}><calcite-icon .flipRtl=${this.iconFlipRtl} .icon=${this.requestedIcon} .scale=${d(this.scale)}></calcite-icon></div>` : null}<div class=${e(o.content)}><slot name=${n.title}></slot><slot name=${n.message}></slot><slot name=${n.link}></slot></div><div class=${e(o.actionsEnd)} .hidden=${!this.hasActionEnd}><slot name=${n.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot></div>${this.closable ? t : null}</div>`;
+    const t = c`<button .ariaLabel=${this.messages.close} class=${e(o.close)} @click=${this.close} ${a(this.closeButton)}><calcite-icon icon=x .scale=${r(this.scale)}></calcite-icon></button>`;
+    return c`<div class=${e(o.container)} ${a(this.setTransitionEl)}>${this.requestedIcon ? c`<div class=${e(o.icon)}><calcite-icon .flipRtl=${this.iconFlipRtl} .icon=${this.requestedIcon} .scale=${r(this.scale)}></calcite-icon></div>` : null}<div class=${e(o.content)}><slot name=${n.title}></slot><slot name=${n.message}></slot><slot name=${n.link}></slot></div><div class=${e(o.actionsEnd)} .hidden=${!this.hasActionEnd}><slot name=${n.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot></div>${this.closable ? t : null}</div>`;
   }
 }
-h("calcite-notice", z);
+d("calcite-notice", x);
 export {
-  z as Notice
+  x as Notice
 };

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

@@ -3,11 +3,9 @@ import { html as n } from "lit";
 import { LitElement as r, createEvent as o } from "@arcgis/lumina";
 import { c as d } from "../../chunks/observers.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.1 */
 const c = h`:host{display:block}:host([hidden]){display:none}[hidden]{display:none}`;
 class u extends r {
   constructor() {

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

@@ -2,11 +2,9 @@ import { c as e } from "../../chunks/runtime.js";
 import { html as s } from "lit";
 import { LitElement as i, createEvent as l } from "@arcgis/lumina";
 import { css as a } 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.1 */
 const o = a`:host{display:block}:host([hidden]){display:none}[hidden]{display:none}`;
 class r extends i {
   constructor() {

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

@@ -2,18 +2,16 @@ import { c as P } from "../../chunks/runtime.js";
 import { keyed as p } from "lit-html/directives/keyed.js";
 import { html as m, nothing as z } from "lit";
 import { LitElement as w, createEvent as E, safeClassMap as r } from "@arcgis/lumina";
-import { c as X, s as L, a as U } from "../../chunks/loadable.js";
+import { c as X } from "../../chunks/loadable.js";
 import { n as f } from "../../chunks/locale.js";
-import { c as M } from "../../chunks/observers.js";
+import { c as L } from "../../chunks/observers.js";
 import { b as g } from "../../chunks/responsive.js";
 import { g as v } from "../../chunks/component.js";
-import { u as F } 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-next.99
-*/
+import { u as U } from "../../chunks/useT9n.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.1 */
 const s = {
   list: "list",
   listItem: "list-item",
@@ -28,16 +26,16 @@ const s = {
   previous: "chevron-left",
   first: "chevron-start",
   last: "chevron-end"
-}, T = O`:host{display:flex;writing-mode:horizontal-tb}.list{margin:0;display:flex;list-style-type:none;padding:0;column-gap:var(--calcite-spacing-base)}.list-item{margin:0;display:flex;padding:0}.hidden-item{display:none}:host([scale=s]) .chevron,:host([scale=s]) .page,:host([scale=s]) .ellipsis{block-size:1.5rem;padding-inline:.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;min-inline-size:1.5rem}:host([scale=m]) .chevron,:host([scale=m]) .page,:host([scale=m]) .ellipsis{block-size:2rem;padding-inline:.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;min-inline-size:2rem}:host([scale=l]) .chevron,:host([scale=l]) .page,:host([scale=l]) .ellipsis{block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-inline-size:2.75rem}:host([scale=l]) .chevron{padding-inline:.625rem}:host([scale=l]) .page,:host([scale=l]) .ellipsis{padding-inline:.75rem}:host button{outline-color:transparent}:host button: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))))}.chevron,.page,.ellipsis{margin:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-style:none;--tw-border-opacity: 0;background-color:transparent;padding:0;vertical-align:baseline;font-family:inherit;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-pagination-color, var(--calcite-color-text-3))}.chevron,.page{cursor:pointer;border-block:2px solid transparent}.chevron:hover,.page:hover{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;color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1))}.chevron:active,.page:active{color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1))}.page:hover{border-block-end-color:var(--calcite-pagination-color-border-hover, var(--calcite-color-border-2))}.page:active{background-color:var(--calcite-pagination-background-color, var(--calcite-color-foreground-3))}.page.selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1));border-block-end-color:var(--calcite-pagination-color-border-active, var(--calcite-color-brand))}.page.selected:focus{border-block-end-width:var(--calcite-spacing-xxs);padding-block-start:var(--calcite-spacing-base)}.chevron:hover{background-color:var(--calcite-pagination-icon-color-background-hover, var(--calcite-color-foreground-2))}.chevron:active{background-color:var(--calcite-pagination-background-color, var(--calcite-color-foreground-3))}.chevron.disabled{pointer-events:none;background-color:transparent}.chevron.disabled>calcite-icon{opacity:var(--calcite-opacity-disabled)}:host([hidden]){display:none}[hidden]{display:none}`, I = 2, $ = 2, h = {
+}, F = M`:host{display:flex;writing-mode:horizontal-tb}.list{margin:0;display:flex;list-style-type:none;padding:0;column-gap:var(--calcite-spacing-base)}.list-item{margin:0;display:flex;padding:0}.hidden-item{display:none}:host([scale=s]) .chevron,:host([scale=s]) .page,:host([scale=s]) .ellipsis{block-size:1.5rem;padding-inline:.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;min-inline-size:1.5rem}:host([scale=m]) .chevron,:host([scale=m]) .page,:host([scale=m]) .ellipsis{block-size:2rem;padding-inline:.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;min-inline-size:2rem}:host([scale=l]) .chevron,:host([scale=l]) .page,:host([scale=l]) .ellipsis{block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-inline-size:2.75rem}:host([scale=l]) .chevron{padding-inline:.625rem}:host([scale=l]) .page,:host([scale=l]) .ellipsis{padding-inline:.75rem}:host button{outline-color:transparent}:host button: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))))}.chevron,.page,.ellipsis{margin:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-style:none;--tw-border-opacity: 0;background-color:transparent;padding:0;vertical-align:baseline;font-family:inherit;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-pagination-color, var(--calcite-color-text-3))}.chevron,.page{cursor:pointer;border-block:2px solid transparent}.chevron:hover,.page:hover{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;color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1))}.chevron:active,.page:active{color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1))}.page:hover{border-block-end-color:var(--calcite-pagination-color-border-hover, var(--calcite-color-border-2))}.page:active{background-color:var(--calcite-pagination-background-color, var(--calcite-color-foreground-3))}.page.selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1));border-block-end-color:var(--calcite-pagination-color-border-active, var(--calcite-color-brand))}.page.selected:focus{border-block-end-width:var(--calcite-spacing-xxs);padding-block-start:var(--calcite-spacing-base)}.chevron:hover{background-color:var(--calcite-pagination-icon-color-background-hover, var(--calcite-color-foreground-2))}.chevron:active{background-color:var(--calcite-pagination-background-color, var(--calcite-color-foreground-3))}.chevron.disabled{pointer-events:none;background-color:transparent}.chevron.disabled>calcite-icon{opacity:var(--calcite-opacity-disabled)}:host([hidden]){display:none}[hidden]{display:none}`, I = 2, $ = 2, h = {
   large: 11,
   medium: 9,
   small: 7,
   xsmall: 5,
   xxsmall: 1
 };
-class B extends w {
+class O extends w {
   constructor() {
-    super(...arguments), this.resizeHandler = ({ contentRect: { width: t } }) => this.setMaxItemsToBreakpoint(t), this.resizeObserver = M("resize", (t) => t.forEach(this.resizeHandler)), this.maxItems = h.xxsmall, this.groupSeparator = !1, this.messages = F(), this.pageSize = 20, this.scale = "m", this.startItem = 1, this.totalItems = 0, this.calcitePaginationChange = E({ cancelable: !1 });
+    super(...arguments), this.resizeHandler = ({ contentRect: { width: t } }) => this.setMaxItemsToBreakpoint(t), this.resizeObserver = L("resize", (t) => t.forEach(this.resizeHandler)), this.maxItems = h.xxsmall, this.groupSeparator = !1, this.messages = U(), this.pageSize = 20, this.scale = "m", this.startItem = 1, this.totalItems = 0, this.calcitePaginationChange = E({ cancelable: !1 });
   }
   static {
     this.properties = { isXXSmall: 16, lastStartItem: 16, maxItems: 16, totalPages: 16, groupSeparator: 7, messageOverrides: 0, numberingSystem: 1, pageSize: 11, scale: 3, startItem: 11, totalItems: 11 };
@@ -46,7 +44,7 @@ class B extends w {
     this.shadowRootOptions = { mode: "open", delegatesFocus: !0 };
   }
   static {
-    this.styles = T;
+    this.styles = F;
   }
   // #endregion
   // #region Public Methods
@@ -85,13 +83,13 @@ class B extends w {
     super.connectedCallback(), this.resizeObserver?.observe(this.el);
   }
   async load() {
-    L(this), this.handleTotalPages(), this.handleLastStartItemChange(), this.handleIsXXSmall();
+    this.handleTotalPages(), this.handleLastStartItemChange(), this.handleIsXXSmall();
   }
   willUpdate(t) {
     (t.has("totalItems") && (this.hasUpdated || this.totalItems !== 0) || t.has("pageSize") && (this.hasUpdated || this.pageSize !== 20)) && this.handleTotalPages(), (t.has("totalItems") && (this.hasUpdated || this.totalItems !== 0) || t.has("pageSize") && (this.hasUpdated || this.pageSize !== 20) || t.has("totalPages")) && this.handleLastStartItemChange(), t.has("maxItems") && (this.hasUpdated || this.maxItems !== h.xxsmall) && this.handleIsXXSmall(), t.has("messages") && this.effectiveLocaleChange();
   }
   loaded() {
-    U(this), this.setMaxItemsToBreakpoint(this.el.clientWidth);
+    this.setMaxItemsToBreakpoint(this.el.clientWidth);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.resizeObserver?.disconnect();
@@ -231,7 +229,7 @@ class B extends w {
     })}>${e}</li></ul>`;
   }
 }
-P("calcite-pagination", B);
+P("calcite-pagination", O);
 export {
-  B as Pagination
+  O as Pagination
 };

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

@@ -1,35 +1,33 @@
-import { c as w } from "../../chunks/runtime.js";
+import { c as z } from "../../chunks/runtime.js";
 import { keyed as d } from "lit-html/directives/keyed.js";
 import { ref as x } from "lit-html/directives/ref.js";
 import { html as n, nothing as S } from "lit";
-import { LitElement as F, createEvent as b, safeClassMap as i } from "@arcgis/lumina";
-import { h as k, a as r, s as y } from "../../chunks/dom.js";
+import { LitElement as w, createEvent as b, safeClassMap as i } from "@arcgis/lumina";
+import { h as F, a as s, s as y } from "../../chunks/dom.js";
 import { u as E, I as B } from "../../chunks/interactive.js";
-import { c as P, s as T, a as I } from "../../chunks/loadable.js";
-import { c as M } from "../../chunks/observers.js";
-import { S as N } from "../../chunks/resources2.js";
-import { H as O } from "../../chunks/Heading.js";
-import { e as L } from "../../chunks/floating-ui.js";
-import { u as j } from "../../chunks/useT9n.js";
-import { C as t, S as s, I as A, a as u } from "../../chunks/resources3.js";
-import { css as D } 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 U = D`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-min-header-height: calc(var(--calcite-icon-size) * 3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{margin:0;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0;padding:0;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:.5rem}:host([scale=s]){--calcite-internal-panel-default-space: var(--calcite-spacing-sm);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-sm-plus)}:host([scale=s]) .header-content .heading{font-size:var(--calcite-font-size--1)}:host([scale=s]) .header-content .description{font-size:var(--calcite-font-size--2)}:host([scale=m]){--calcite-internal-panel-default-space: var(--calcite-spacing-md);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus)}:host([scale=m]) .header-content .heading{font-size:var(--calcite-font-size-0)}:host([scale=m]) .header-content .description{font-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-internal-panel-default-space: var(--calcite-spacing-lg);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xl)}:host([scale=l]) .header-content .heading{font-size:var(--calcite-font-size-1)}:host([scale=l]) .header-content .description{font-size:var(--calcite-font-size-0)}.content-top,.content-bottom{display:flex;align-items:flex-start;align-self:stretch;padding:var(--calcite-internal-panel-default-space);border-block-start:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));background-color:var(--calcite-panel-background-color, var(--calcite-color-foreground-1))}.container{position:relative;margin:0;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;overflow:hidden;background-color:var(--calcite-color-background);padding:0;color:var(--calcite-color-text-2);transition:max-block-size var(--calcite-animation-timing),inline-size var(--calcite-animation-timing);border-radius:var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none));box-sizing:border-box;font-size:var(--calcite-font-size--1)}.container *{box-sizing:border-box}.container[hidden]{display:none}.header{z-index:var(--calcite-z-index-header);display:flex;flex-direction:column;border-radius:var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none)) var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none)) 0 0;background-color:var(--calcite-panel-header-background-color, var(--calcite-color-foreground-1));border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-panel-header-border-block-end, var(--calcite-color-border-3)))}.header-container{display:flex;inline-size:100%;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:0 0 auto}.header-container--border-end{border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3))}.action-bar-container{inline-size:100%}.action-bar-container ::slotted(calcite-action-bar){inline-size:100%}.header-content{display:flex;flex-direction:column;overflow:hidden;padding-inline:.75rem;padding-block:.875rem;margin-inline-end:auto;justify-content:center}.header-content .heading,.header-content .description{display:block;flex:none;overflow-wrap:break-word;padding:0;line-height:var(--calcite-font-line-height-relative-snug)}.header-content .heading{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-panel-heading-text-color, var(--calcite-color-text-1))}.header-content .heading:only-child{margin-block-end:0px}.header-content .description{color:var(--calcite-panel-description-text-color, var(--calcite-color-text-2))}.back-button{border-width:0px;border-style:solid;border-inline-end-width:1px;border-color:var(--calcite-panel-border-color, var(--calcite-color-border-3))}.header-actions{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch}.header-actions--end{margin-inline-start:auto}#close:last-child,#collapse:last-child,calcite-action-menu:last-child{--calcite-action-corner-radius-start-end: var(--calcite-panel-corner-radius)}.back-button{--calcite-action-corner-radius-start-start: var(--calcite-panel-corner-radius)}.content-wrapper{position:relative;display:flex;block-size:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow:auto;color:var(--calcite-color-text-2);outline-color:transparent;padding:var(--calcite-panel-space, var(--calcite-panel-content-space, 0));background:var(--calcite-panel-background-color, var(--calcite-color-background))}.content-wrapper:focus-visible{outline: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))))}.header-content{flex:1 1 auto;justify-content:center;padding-block:var(--calcite-internal-panel-header-vertical-padding);padding-inline:var(--calcite-internal-panel-default-space)}.header-content.header-slotted-content{padding:var(--calcite-panel-header-content-space, var(--calcite-internal-panel-header-vertical-padding) var(--calcite-internal-panel-default-space))}.footer{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;align-items:center;justify-content:center;font-size:var(--calcite-font-size--2);line-height:1.375;border-block-start:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));padding:var(--calcite-panel-footer-space, var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-space)));background-color:var(--calcite-panel-footer-background-color, var(--calcite-color-foreground-1));border-radius:0 0 var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none)) var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none))}.footer-content{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:center}.footer-actions{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:space-evenly;gap:var(--calcite-internal-panel-default-space)}.footer-start{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-start;margin-inline-end:auto;gap:var(--calcite-internal-panel-default-space)}.footer-end{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-end;margin-inline-start:auto;gap:var(--calcite-internal-panel-default-space)}.fab-container{position:sticky;inset-block-end:0px;z-index:var(--calcite-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:.5rem;inset-inline:0;inline-size:fit-content}:host([hidden]){display:none}[hidden]{display:none}`;
-class R extends F {
+import { c as P } from "../../chunks/loadable.js";
+import { c as T } from "../../chunks/observers.js";
+import { S as I } from "../../chunks/resources2.js";
+import { H as M } from "../../chunks/Heading.js";
+import { e as N } from "../../chunks/floating-ui.js";
+import { u as O } from "../../chunks/useT9n.js";
+import { C as t, S as r, I as u, a as A } from "../../chunks/resources3.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.1 */
+const j = L`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-min-header-height: calc(var(--calcite-icon-size) * 3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{margin:0;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0;padding:0;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:.5rem}:host([scale=s]){--calcite-internal-panel-default-space: var(--calcite-spacing-sm);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-sm-plus)}:host([scale=s]) .header-content .heading{font-size:var(--calcite-font-size--1)}:host([scale=s]) .header-content .description{font-size:var(--calcite-font-size--2)}:host([scale=m]){--calcite-internal-panel-default-space: var(--calcite-spacing-md);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus)}:host([scale=m]) .header-content .heading{font-size:var(--calcite-font-size-0)}:host([scale=m]) .header-content .description{font-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-internal-panel-default-space: var(--calcite-spacing-lg);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xl)}:host([scale=l]) .header-content .heading{font-size:var(--calcite-font-size-1)}:host([scale=l]) .header-content .description{font-size:var(--calcite-font-size-0)}.content-top,.content-bottom{display:flex;align-items:flex-start;align-self:stretch;padding:var(--calcite-internal-panel-default-space);border-block-start:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));background-color:var(--calcite-panel-background-color, var(--calcite-color-foreground-1))}.container{position:relative;margin:0;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;overflow:hidden;background-color:var(--calcite-color-background);padding:0;color:var(--calcite-color-text-2);transition:max-block-size var(--calcite-animation-timing),inline-size var(--calcite-animation-timing);border-radius:var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none));box-sizing:border-box;font-size:var(--calcite-font-size--1)}.container *{box-sizing:border-box}.container[hidden]{display:none}.header{z-index:var(--calcite-z-index-header);display:flex;flex-direction:column;border-radius:var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none)) var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none)) 0 0;background-color:var(--calcite-panel-header-background-color, var(--calcite-color-foreground-1));border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-panel-header-border-block-end, var(--calcite-color-border-3)))}.header-container{display:flex;inline-size:100%;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:0 0 auto}.header-container--border-end{border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3))}.action-bar-container{inline-size:100%}.action-bar-container ::slotted(calcite-action-bar){inline-size:100%}.header-content{display:flex;flex-direction:column;overflow:hidden;padding-inline:.75rem;padding-block:.875rem;margin-inline-end:auto;justify-content:center}.header-content .header-actions{--calcite-action-background-color-hover: var(--calcite-panel-header-action-background-color-hover);--calcite-action-background-color-press: var(--calcite-panel-header-action-background-color-press);--calcite-action-background-color: var(--calcite-panel-header-action-background-color);--calcite-action-indicator-color: var(--calcite-panel-header-action-indicator-color);--calcite-action-text-color-press: var(--calcite-panel-header-action-text-color-press);--calcite-action-text-color: var(--calcite-panel-header-action-text-color)}.header-content .heading,.header-content .description{display:block;flex:none;overflow-wrap:break-word;padding:0;line-height:var(--calcite-font-line-height-relative-snug)}.header-content .heading{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-panel-heading-text-color, var(--calcite-color-text-1))}.header-content .heading:only-child{margin-block-end:0px}.header-content .description{color:var(--calcite-panel-description-text-color, var(--calcite-color-text-2))}.back-button{border-width:0px;border-style:solid;border-inline-end-width:1px;border-color:var(--calcite-panel-border-color, var(--calcite-color-border-3))}.header-actions{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch}.header-actions--end{margin-inline-start:auto}#close:last-child,#collapse:last-child,calcite-action-menu:last-child{--calcite-action-corner-radius-start-end: var(--calcite-panel-corner-radius)}.back-button{--calcite-action-corner-radius-start-start: var(--calcite-panel-corner-radius)}.content-wrapper{position:relative;display:flex;block-size:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow:auto;color:var(--calcite-color-text-2);outline-color:transparent;padding:var(--calcite-panel-space, var(--calcite-panel-content-space, 0));background:var(--calcite-panel-background-color, var(--calcite-color-background))}.content-wrapper:focus-visible{outline: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))))}.header-content{flex:1 1 auto;justify-content:center;padding-block:var(--calcite-internal-panel-header-vertical-padding);padding-inline:var(--calcite-internal-panel-default-space)}.header-content.header-slotted-content{padding:var(--calcite-panel-header-content-space, var(--calcite-internal-panel-header-vertical-padding) var(--calcite-internal-panel-default-space))}.footer{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;align-items:center;justify-content:center;font-size:var(--calcite-font-size--2);line-height:1.375;border-block-start:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));padding:var(--calcite-panel-footer-space, var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-space)));background-color:var(--calcite-panel-footer-background-color, var(--calcite-color-foreground-1));border-radius:0 0 var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none)) var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none))}.footer-content{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:center}.footer-actions{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:space-evenly;gap:var(--calcite-internal-panel-default-space)}.footer-start{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-start;margin-inline-end:auto;gap:var(--calcite-internal-panel-default-space)}.footer-end{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-end;margin-inline-start:auto;gap:var(--calcite-internal-panel-default-space)}.fab-container{position:sticky;inset-block-end:0px;z-index:var(--calcite-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:.5rem;inset-inline:0;inline-size:fit-content}:host([hidden]){display:none}[hidden]{display:none}`;
+class D extends w {
   // #endregion
   // #region Lifecycle
   constructor() {
-    super(), this.resizeObserver = M("resize", () => this.resizeHandler()), this.hasActionBar = !1, this.hasContentBottom = !1, this.hasContentTop = !1, this.hasEndActions = !1, this.hasFab = !1, this.hasFooterActions = !1, this.hasFooterContent = !1, this.hasFooterEndContent = !1, this.hasFooterStartContent = !1, this.hasHeaderContent = !1, this.hasMenuItems = !1, this.hasStartActions = !1, this.isClosed = !1, this.showHeaderContent = !1, this.closable = !1, this.closed = !1, this.collapseDirection = "down", this.collapsed = !1, this.collapsible = !1, this.disabled = !1, this.loading = !1, this.menuOpen = !1, this.menuPlacement = L, this.messages = j(), this.overlayPositioning = "absolute", this.scale = "m", this.calcitePanelClose = b({ cancelable: !1 }), this.calcitePanelScroll = b({ cancelable: !1 }), this.calcitePanelToggle = b({ cancelable: !1 }), this.listen("keydown", this.panelKeyDownHandler);
+    super(), this.resizeObserver = T("resize", () => this.resizeHandler()), this.hasActionBar = !1, this.hasContentBottom = !1, this.hasContentTop = !1, this.hasEndActions = !1, this.hasFab = !1, this.hasFooterActions = !1, this.hasFooterContent = !1, this.hasFooterEndContent = !1, this.hasFooterStartContent = !1, this.hasHeaderContent = !1, this.hasMenuItems = !1, this.hasStartActions = !1, this.isClosed = !1, this.showHeaderContent = !1, this.closable = !1, this.closed = !1, this.collapseDirection = "down", this.collapsed = !1, this.collapsible = !1, this.disabled = !1, this.loading = !1, this.menuOpen = !1, this.menuPlacement = N, this.messages = O(), this.overlayPositioning = "absolute", this.scale = "m", this.calcitePanelClose = b({ cancelable: !1 }), this.calcitePanelScroll = b({ cancelable: !1 }), this.calcitePanelToggle = b({ cancelable: !1 }), this.listen("keydown", this.panelKeyDownHandler);
   }
   static {
     this.properties = { hasActionBar: 16, hasContentBottom: 16, hasContentTop: 16, hasEndActions: 16, hasFab: 16, hasFooterActions: 16, hasFooterContent: 16, hasFooterEndContent: 16, hasFooterStartContent: 16, hasHeaderContent: 16, hasMenuItems: 16, hasStartActions: 16, isClosed: 16, showHeaderContent: 16, beforeClose: 0, closable: 7, closed: 7, collapseDirection: 1, collapsed: 7, collapsible: 7, description: 1, disabled: 7, heading: 1, headingLevel: 11, loading: 7, menuFlipPlacements: 0, menuOpen: 7, menuPlacement: 3, messageOverrides: 0, overlayPositioning: 3, scale: 3 };
   }
   static {
-    this.styles = U;
+    this.styles = j;
   }
   // #endregion
   // #region Public Methods
@@ -50,10 +48,10 @@ class R extends F {
   }
   /** Sets focus on the component's first focusable element. */
   async setFocus() {
-    await P(this), k(this.containerEl);
+    await P(this), F(this.containerEl);
   }
   async load() {
-    T(this), this.isClosed = this.closed;
+    this.isClosed = this.closed;
   }
   willUpdate(e) {
     e.has("closed") && this.hasUpdated && (this.closed ? this.close() : this.open());
@@ -62,7 +60,6 @@ class R extends F {
     E(this);
   }
   loaded() {
-    I(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.resizeObserver?.disconnect();
@@ -106,41 +103,41 @@ class R extends F {
     this.calcitePanelScroll.emit();
   }
   handleHeaderActionsStartSlotChange(e) {
-    this.hasStartActions = r(e);
+    this.hasStartActions = s(e);
   }
   handleHeaderActionsEndSlotChange(e) {
-    this.hasEndActions = r(e);
+    this.hasEndActions = s(e);
   }
   handleHeaderMenuActionsSlotChange(e) {
-    this.hasMenuItems = r(e);
+    this.hasMenuItems = s(e);
   }
   handleActionBarSlotChange(e) {
     const a = y(e).filter((o) => o?.matches("calcite-action-bar"));
     a.forEach((o) => o.layout = "horizontal"), this.hasActionBar = !!a.length;
   }
   handleHeaderContentSlotChange(e) {
-    this.hasHeaderContent = r(e);
+    this.hasHeaderContent = s(e);
   }
   handleFabSlotChange(e) {
-    this.hasFab = r(e);
+    this.hasFab = s(e);
   }
   handleFooterActionsSlotChange(e) {
-    this.hasFooterActions = r(e);
+    this.hasFooterActions = s(e);
   }
   handleFooterEndSlotChange(e) {
-    this.hasFooterEndContent = r(e);
+    this.hasFooterEndContent = s(e);
   }
   handleFooterStartSlotChange(e) {
-    this.hasFooterStartContent = r(e);
+    this.hasFooterStartContent = s(e);
   }
   handleFooterSlotChange(e) {
-    this.hasFooterContent = r(e);
+    this.hasFooterContent = s(e);
   }
   contentBottomSlotChangeHandler(e) {
-    this.hasContentBottom = r(e);
+    this.hasContentBottom = s(e);
   }
   contentTopSlotChangeHandler(e) {
-    this.hasContentTop = r(e);
+    this.hasContentTop = s(e);
   }
   setPanelScrollEl(e) {
     this.panelScrollEl = e, this.resizeObserver?.disconnect(), e && (this.resizeObserver?.observe(e), this.resizeHandler());
@@ -153,28 +150,28 @@ class R extends F {
   // #endregion
   // #region Rendering
   renderHeaderContent() {
-    const { heading: e, headingLevel: a, description: o, hasHeaderContent: l } = this, c = e ? O({ class: t.heading, level: a, children: e }) : null, h = o ? n`<span class=${i(t.description)}>${o}</span>` : null;
+    const { heading: e, headingLevel: a, description: o, hasHeaderContent: l } = this, c = e ? M({ class: t.heading, level: a, children: e }) : null, h = o ? n`<span class=${i(t.description)}>${o}</span>` : null;
     return !l && (c || h) ? d("header-content", n`<div class=${i(t.headerContent)}>${c}${h}</div>`) : null;
   }
   renderActionBar() {
-    return n`<div class=${i(t.actionBarContainer)} .hidden=${!this.hasActionBar}><slot name=${s.actionBar} @slotchange=${this.handleActionBarSlotChange}></slot></div>`;
+    return n`<div class=${i(t.actionBarContainer)} .hidden=${!this.hasActionBar}><slot name=${r.actionBar} @slotchange=${this.handleActionBarSlotChange}></slot></div>`;
   }
   renderHeaderSlottedContent() {
-    return d("slotted-header-content", n`<div class=${i({ [t.headerContent]: !0, [t.headerSlottedContent]: !0 })} .hidden=${!this.hasHeaderContent}><slot name=${s.headerContent} @slotchange=${this.handleHeaderContentSlotChange}></slot></div>`);
+    return d("slotted-header-content", n`<div class=${i({ [t.headerContent]: !0, [t.headerSlottedContent]: !0 })} .hidden=${!this.hasHeaderContent}><slot name=${r.headerContent} @slotchange=${this.handleHeaderContentSlotChange}></slot></div>`);
   }
   renderHeaderStartActions() {
     const { hasStartActions: e } = this;
-    return d("header-actions-start", n`<div class=${i({ [t.headerActionsStart]: !0, [t.headerActions]: !0 })} .hidden=${!e}><slot name=${s.headerActionsStart} @slotchange=${this.handleHeaderActionsStartSlotChange}></slot></div>`);
+    return d("header-actions-start", n`<div class=${i({ [t.headerActionsStart]: !0, [t.headerActions]: !0 })} .hidden=${!e}><slot name=${r.headerActionsStart} @slotchange=${this.handleHeaderActionsStartSlotChange}></slot></div>`);
   }
   renderHeaderActionsEnd() {
     const { hasEndActions: e, messages: a, closable: o, collapsed: l, collapseDirection: c, collapsible: h, hasMenuItems: g } = this, { collapse: p, expand: f, close: m } = a, v = [u.expand, u.collapse];
     c === "up" && v.reverse();
-    const $ = h ? n`<calcite-action .ariaExpanded=${!l} .ariaLabel=${p} .icon=${l ? v[0] : v[1]} id=${A.collapse} @click=${this.collapse} .scale=${this.scale} .text=${p} title=${(l ? f : p) ?? S}></calcite-action>` : null, C = o ? n`<calcite-action .ariaLabel=${m} .icon=${u.close} id=${A.close} @click=${this.handleUserClose} .scale=${this.scale} .text=${m} title=${m ?? S}></calcite-action>` : null, H = n`<slot name=${s.headerActionsEnd} @slotchange=${this.handleHeaderActionsEndSlotChange}></slot>`, z = e || $ || C || g;
-    return d("header-actions-end", n`<div class=${i({ [t.headerActionsEnd]: !0, [t.headerActions]: !0 })} .hidden=${!z}>${H}${this.renderMenu()}${$}${C}</div>`);
+    const $ = h ? n`<calcite-action .ariaExpanded=${!l} .ariaLabel=${p} .icon=${l ? v[0] : v[1]} id=${A.collapse} @click=${this.collapse} .scale=${this.scale} .text=${p} title=${(l ? f : p) ?? S}></calcite-action>` : null, C = o ? n`<calcite-action .ariaLabel=${m} .icon=${u.close} id=${A.close} @click=${this.handleUserClose} .scale=${this.scale} .text=${m} title=${m ?? S}></calcite-action>` : null, H = n`<slot name=${r.headerActionsEnd} @slotchange=${this.handleHeaderActionsEndSlotChange}></slot>`, k = e || $ || C || g;
+    return d("header-actions-end", n`<div class=${i({ [t.headerActionsEnd]: !0, [t.headerActions]: !0 })} .hidden=${!k}>${H}${this.renderMenu()}${$}${C}</div>`);
   }
   renderMenu() {
     const { hasMenuItems: e, messages: a, menuOpen: o, menuFlipPlacements: l, menuPlacement: c } = this;
-    return d("menu", n`<calcite-action-menu .flipPlacements=${l ?? ["top", "bottom"]} .hidden=${!e} .label=${a.options} .open=${o} .overlayPositioning=${this.overlayPositioning} .placement=${c}><calcite-action .icon=${u.menu} .scale=${this.scale} slot=${N.trigger} .text=${a.options}></calcite-action><slot name=${s.headerMenuActions} @slotchange=${this.handleHeaderMenuActionsSlotChange}></slot></calcite-action-menu>`);
+    return d("menu", n`<calcite-action-menu .flipPlacements=${l ?? ["top", "bottom"]} .hidden=${!e} .label=${a.options} .open=${o} .overlayPositioning=${this.overlayPositioning} .placement=${c}><calcite-action .icon=${u.menu} .scale=${this.scale} slot=${I.trigger} .text=${a.options}></calcite-action><slot name=${r.headerMenuActions} @slotchange=${this.handleHeaderMenuActionsSlotChange}></slot></calcite-action-menu>`);
   }
   renderHeaderNode() {
     const { hasHeaderContent: e, hasStartActions: a, hasEndActions: o, closable: l, collapsible: c, hasMenuItems: h, hasActionBar: g } = this, p = this.renderHeaderContent(), f = e || !!p || a || o || c || l || h;
@@ -182,26 +179,26 @@ class R extends F {
   }
   renderFooterNode() {
     const { hasFooterEndContent: e, hasFooterStartContent: a, hasFooterContent: o, hasFooterActions: l } = this, c = a || e || o || l;
-    return n`<footer class=${i(t.footer)} .hidden=${!c}><div class=${i(t.footerContent)} .hidden=${!o}><slot name=${s.footer} @slotchange=${this.handleFooterSlotChange}></slot></div><div class=${i(t.footerStart)} .hidden=${o || !a}><slot name=${s.footerStart} @slotchange=${this.handleFooterStartSlotChange}></slot></div><div class=${i(t.footerEnd)} .hidden=${o || !e}><slot name=${s.footerEnd} @slotchange=${this.handleFooterEndSlotChange}></slot></div><div class=${i(t.footerActions)} .hidden=${o || !l}>${d("footer-actions-slot", n`<slot name=${s.footerActions} @slotchange=${this.handleFooterActionsSlotChange}></slot>`)}</div></footer>`;
+    return n`<footer class=${i(t.footer)} .hidden=${!c}><div class=${i(t.footerContent)} .hidden=${!o}><slot name=${r.footer} @slotchange=${this.handleFooterSlotChange}></slot></div><div class=${i(t.footerStart)} .hidden=${o || !a}><slot name=${r.footerStart} @slotchange=${this.handleFooterStartSlotChange}></slot></div><div class=${i(t.footerEnd)} .hidden=${o || !e}><slot name=${r.footerEnd} @slotchange=${this.handleFooterEndSlotChange}></slot></div><div class=${i(t.footerActions)} .hidden=${o || !l}>${d("footer-actions-slot", n`<slot name=${r.footerActions} @slotchange=${this.handleFooterActionsSlotChange}></slot>`)}</div></footer>`;
   }
   renderContent() {
     return n`<div class=${i(t.contentWrapper)} .hidden=${this.collapsible && this.collapsed} @scroll=${this.panelScrollHandler} ${x(this.setPanelScrollEl)}><slot></slot>${this.renderFab()}</div>`;
   }
   renderContentBottom() {
-    return n`<div class=${i(t.contentBottom)} .hidden=${!this.hasContentBottom}><slot name=${s.contentBottom} @slotchange=${this.contentBottomSlotChangeHandler}></slot></div>`;
+    return n`<div class=${i(t.contentBottom)} .hidden=${!this.hasContentBottom}><slot name=${r.contentBottom} @slotchange=${this.contentBottomSlotChangeHandler}></slot></div>`;
   }
   renderContentTop() {
-    return n`<div class=${i(t.contentTop)} .hidden=${!this.hasContentTop}><slot name=${s.contentTop} @slotchange=${this.contentTopSlotChangeHandler}></slot></div>`;
+    return n`<div class=${i(t.contentTop)} .hidden=${!this.hasContentTop}><slot name=${r.contentTop} @slotchange=${this.contentTopSlotChangeHandler}></slot></div>`;
   }
   renderFab() {
-    return n`<div class=${i(t.fabContainer)} .hidden=${!this.hasFab}><slot name=${s.fab} @slotchange=${this.handleFabSlotChange}></slot></div>`;
+    return n`<div class=${i(t.fabContainer)} .hidden=${!this.hasFab}><slot name=${r.fab} @slotchange=${this.handleFabSlotChange}></slot></div>`;
   }
   render() {
-    const { disabled: e, loading: a, isClosed: o } = this, l = n`<article .ariaBusy=${a} class=${i(t.container)} .hidden=${o} ${x(this.setContainerRef)}>${this.renderHeaderNode()}${this.renderContent()}${this.renderContentBottom()}${this.renderFooterNode()}${d("alerts", n`<slot name=${s.alerts} @slotchange=${this.handleAlertsSlotChange}></slot>`)}</article>`;
+    const { disabled: e, loading: a, isClosed: o } = this, l = n`<article .ariaBusy=${a} class=${i(t.container)} .hidden=${o} ${x(this.setContainerRef)}>${this.renderHeaderNode()}${this.renderContent()}${this.renderContentBottom()}${this.renderFooterNode()}${d("alerts", n`<slot name=${r.alerts} @slotchange=${this.handleAlertsSlotChange}></slot>`)}</article>`;
     return B({ disabled: e, children: n`${a ? n`<calcite-scrim .loading=${a}></calcite-scrim>` : null}${l}` });
   }
 }
-w("calcite-panel", R);
+z("calcite-panel", D);
 export {
-  R as Panel
+  D as Panel
 };

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

@@ -1,13 +1,12 @@
 /// <reference types="../../index.d.ts" />
 import { PropertyValues } from 'lit';
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { FocusTargetOrFalse } from 'focus-trap';
 import { FlipPlacement, FloatingLayout, FloatingUIComponent, LogicalPlacement, OverlayPositioning, ReferenceElement } from '../../utils/floating-ui';
-import { FocusTrap, FocusTrapComponent } from '../../utils/focusTrapComponent';
 import { OpenCloseComponent } from '../../utils/openCloseComponent';
 import { HeadingLevel } from '../functional/Heading';
 import { Scale } from '../interfaces';
 import { LoadableComponent } from '../../utils/loadable';
+import { FocusTrapOptions } from '../../controllers/useFocusTrap';
 
 /** @slot - A slot for adding custom content. */
 export declare class Popover extends LitElement {
@@ -21,15 +20,19 @@ export declare class Popover extends LitElement {
     flipPlacements: FlipPlacement[];
     /** 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>;
     /** The component header text. */
     heading: string;
     /** Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. */
     headingLevel: HeadingLevel;
-    /**
-     * Specifies whether focus should move to the popover when the focus trap is activated.
-     *  `@internal`
-     */
-    initialFocusTrapFocus: FocusTargetOrFalse;
     /**
      * Accessible name for the component.
      *