@esri/solutions-components 0.10.27 → 0.10.28

package/dist/components/block.js

@@ -6,12 +6,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
 import { j as slotChangeHasAssignedElement, k as focusFirstTabbable, a as getSlotted, t as toAriaBoolean } from './dom.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n.js';
 import { H as Heading } from './Heading.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
+import { b as defaultEndMenuPlacement } from './floating-ui.js';
 import { d as defineCustomElement$7 } from './action.js';
 import { d as defineCustomElement$6 } from './action-menu.js';
 import { d as defineCustomElement$5 } from './handle.js';
@@ -23,7 +24,7 @@ import { d as defineCustomElement$1 } from './scrim.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.
- * v2.12.2
+ * v2.13.0
  */
 const IDS = {
     content: "content",
@@ -106,6 +107,8 @@ const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
         this.iconFlipRtl = undefined;
         this.iconStart = undefined;
         this.loading = false;
+        this.menuFlipPlacements = undefined;
+        this.menuPlacement = defaultEndMenuPlacement;
         this.open = false;
         this.status = undefined;
         this.description = undefined;
@@ -158,13 +161,11 @@ const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
     // --------------------------------------------------------------------------
     connectedCallback() {
         connectConditionalSlotComponent(this);
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
         this.transitionEl = this.el;
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
         disconnectConditionalSlotComponent(this);
@@ -226,16 +227,16 @@ const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
         return (h("calcite-icon", { class: iconClass, flipRtl: flipRtl, icon: iconValue, key: iconValue, scale: "s" }));
     }
     render() {
-        const { collapsible, el, loading, open, heading, messages, description } = this;
+        const { collapsible, el, loading, open, heading, messages, description, menuFlipPlacements, menuPlacement, } = this;
         const toggleLabel = open ? messages.collapse : messages.expand;
-        const headerContent = (h("header", { key: '91deb640f5a591cd70dbb6328cdc588a40b600d5', class: { [CSS.header]: true, [CSS.headerHasText]: !!(heading || description) }, id: IDS.header }, this.renderIcon("start"), this.renderContentStart(), this.renderLoaderStatusIcon(), this.renderTitle()));
+        const headerContent = (h("header", { key: '439d2866f9c5f13cfd8020812203a6cdf86c964f', class: { [CSS.header]: true, [CSS.headerHasText]: !!(heading || description) }, id: IDS.header }, this.renderIcon("start"), this.renderContentStart(), this.renderLoaderStatusIcon(), this.renderTitle()));
         const hasControl = !!getSlotted(el, SLOTS.control);
         const hasMenuActions = !!getSlotted(el, SLOTS.headerMenuActions);
         const collapseIcon = open ? ICONS.opened : ICONS.closed;
-        const headerNode = (h("div", { key: 'ebba82b4e065978eaa9ed1e59f05ad80843cc9ab', class: CSS.headerContainer }, this.dragHandle ? h("calcite-handle", { label: heading }) : null, collapsible ? (h("button", { "aria-controls": IDS.content, "aria-describedby": IDS.header, "aria-expanded": collapsible ? toAriaBoolean(open) : null, class: CSS.toggle, id: IDS.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, h("div", { class: CSS.iconEndContainer }, this.renderIcon("end"), h("calcite-icon", { class: CSS.toggleIcon, icon: collapseIcon, scale: "s" })))) : this.iconEnd ? (h("div", null, headerContent, h("div", { class: CSS.iconEndContainer }, this.renderIcon("end")))) : (headerContent), hasControl ? (h("div", { "aria-labelledby": IDS.header, class: CSS.controlContainer }, h("slot", { name: SLOTS.control }))) : null, hasMenuActions ? (h("calcite-action-menu", { label: messages.options, overlayPositioning: this.overlayPositioning }, h("slot", { name: SLOTS.headerMenuActions }))) : null, this.renderActionsEnd()));
-        return (h(Host, { key: 'b5c12059b36785bf45ce61e7309a35278b928088' }, h(InteractiveContainer, { key: '90a5013ca2e30dadbd76c146700a53391f3aea62', disabled: this.disabled }, h("article", { key: '825f15336afb992c7ea8c718b5ffad7c4bf2507e', "aria-busy": toAriaBoolean(loading), class: {
+        const headerNode = (h("div", { key: 'a9721a9e145db53a215262190d2f7e46472edec6', class: CSS.headerContainer }, this.dragHandle ? h("calcite-handle", { label: heading }) : null, collapsible ? (h("button", { "aria-controls": IDS.content, "aria-describedby": IDS.header, "aria-expanded": collapsible ? toAriaBoolean(open) : null, class: CSS.toggle, id: IDS.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, h("div", { class: CSS.iconEndContainer }, this.renderIcon("end"), h("calcite-icon", { class: CSS.toggleIcon, icon: collapseIcon, scale: "s" })))) : this.iconEnd ? (h("div", null, headerContent, h("div", { class: CSS.iconEndContainer }, this.renderIcon("end")))) : (headerContent), hasControl ? (h("div", { "aria-labelledby": IDS.header, class: CSS.controlContainer }, h("slot", { name: SLOTS.control }))) : null, hasMenuActions ? (h("calcite-action-menu", { flipPlacements: menuFlipPlacements ?? ["top", "bottom"], label: messages.options, overlayPositioning: this.overlayPositioning, placement: menuPlacement }, h("slot", { name: SLOTS.headerMenuActions }))) : null, this.renderActionsEnd()));
+        return (h(Host, { key: 'cdf7c69cc630466cfd4fb0078735f1e685fde512' }, h(InteractiveContainer, { key: 'ae5b2a044fb337bb2c5c12bee2c9ed4b10e5c373', disabled: this.disabled }, h("article", { key: '01c5c5499d62361cfe26d8b6a878034f0805787b', "aria-busy": toAriaBoolean(loading), class: {
                 [CSS.container]: true,
-            } }, headerNode, h("section", { key: '4f690563d78615b68a225456aaae593af6adb826', "aria-labelledby": IDS.toggle, class: CSS.content, hidden: !open, id: IDS.content }, this.renderScrim())))));
+            } }, headerNode, h("section", { key: 'e72271e369055329e4447d15c2deec25599332ec', "aria-labelledby": IDS.toggle, class: CSS.content, hidden: !open, id: IDS.content }, this.renderScrim())))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
@@ -255,6 +256,8 @@ const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
         "iconFlipRtl": [513, "icon-flip-rtl"],
         "iconStart": [513, "icon-start"],
         "loading": [516],
+        "menuFlipPlacements": [16],
+        "menuPlacement": [513, "menu-placement"],
         "open": [1540],
         "status": [513],
         "description": [1],

package/dist/components/browser.js

@@ -8,7 +8,7 @@ import { Build } from '@stencil/core/internal/client';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const isBrowser = () => Build.isBrowser &&
     typeof navigator !== "undefined" &&

package/dist/components/button.js

@@ -5,22 +5,22 @@
  */
 import { proxyCustomElement, HTMLElement, forceUpdate, h } from '@stencil/core/internal/client';
 import { s as submitForm, r as resetForm, f as findAssociatedForm } from './form.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { c as createObserver } from './observers.js';
 import { g as getIconScale } from './component.js';
 import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n.js';
-import { t as toAriaBoolean } from './dom.js';
 import { i as isBrowser } from './browser.js';
+import { t as toAriaBoolean } from './dom.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './loader.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.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     buttonLoader: "calcite-button--loader",
@@ -119,7 +119,6 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     //
     //--------------------------------------------------------------------------
     async connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
         this.setupTextContentObserver();
@@ -128,7 +127,6 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     }
     disconnectedCallback() {
         this.mutationObserver?.disconnect();
-        disconnectInteractive(this);
         disconnectLabel(this);
         disconnectLocalized(this);
         disconnectMessages(this);
@@ -154,16 +152,20 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         const Tag = childElType;
         const loaderNode = this.loading ? (h("div", { class: CSS.buttonLoader }, h("calcite-loader", { class: this.loading ? CSS.loadingIn : CSS.loadingOut, inline: true, label: this.messages.loading, scale: this.scale === "l" ? "m" : "s" }))) : null;
         const noStartEndIcons = !this.iconStart && !this.iconEnd;
-        const iconStartEl = (h("calcite-icon", { key: '4d22fe0db49aa06f71162b2ef64d4011b1b818d8', class: { [CSS.icon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
-        const iconEndEl = (h("calcite-icon", { key: '95c15bea3179d091058d225e80477956fcb27e63', class: { [CSS.icon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
-        const contentEl = (h("span", { key: '6399f9291ba542a304a2813cda9ad21de0a19c36', class: CSS.content, ref: (el) => (this.contentEl = el) }, h("slot", { key: '818ff928ab9c8d722763ec6c1fdbf6b0d60ef210' })));
-        return (h(InteractiveContainer, { key: 'a6799ecea681f5e1929237fd26f91cc6895ae291', disabled: this.disabled }, h(Tag, { key: '042f056a472a091f4728127d079089dbb262d572', "aria-disabled": childElType === "a" ? toAriaBoolean(this.disabled || this.loading) : null, "aria-expanded": this.el.getAttribute("aria-expanded"), "aria-label": !this.loading ? getLabelText(this) : this.messages.loading, "aria-live": "polite", class: {
+        const iconStartEl = (h("calcite-icon", { key: 'f1036c0a1bf5740fe63806e3559ea66fac29b726', class: { [CSS.icon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
+        const iconEndEl = (h("calcite-icon", { key: 'd2c22ecf9ca23426b4c4a3b42d623f35ee988a44', class: { [CSS.icon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
+        const contentEl = (h("span", { key: 'd1803021f5fa106c9e296402ec0a1498ecdf36c7', class: CSS.content, ref: (el) => (this.contentEl = el) }, h("slot", { key: 'd2f729c16f9c803ffa109b68d58a22a4383dd426' })));
+        return (h(InteractiveContainer, { key: '2757c795d29f812cf11def4df108837b9971dcdb', disabled: this.disabled }, h(Tag, { key: 'e67a4882c8a0c13d6b5f98bc8c5b53c10ba36e3e', "aria-busy": toAriaBoolean(this.loading), "aria-expanded": this.el.ariaExpanded ? this.el.ariaExpanded : null, "aria-label": !this.loading ? getLabelText(this) : this.messages.loading, "aria-live": "polite", class: {
                 [CSS.buttonPadding]: noStartEndIcons,
                 [CSS.buttonPaddingShrunk]: !noStartEndIcons,
                 [CSS.contentSlotted]: this.hasContent,
                 [CSS.iconStartEmpty]: !this.iconStart,
                 [CSS.iconEndEmpty]: !this.iconEnd,
-            }, disabled: childElType === "button" ? this.disabled || this.loading : null, download: childElType === "a" && (this.download === "" || this.download) ? this.download : null, href: childElType === "a" && this.href, name: childElType === "button" && this.name, onClick: this.handleClick, ref: this.setChildEl, rel: childElType === "a" && this.rel, tabIndex: this.disabled ? -1 : null, target: childElType === "a" && this.target, title: this.tooltipText, type: childElType === "button" && this.type }, loaderNode, this.iconStart ? iconStartEl : null, this.hasContent ? contentEl : null, this.iconEnd ? iconEndEl : null)));
+            }, disabled: childElType === "button" ? this.disabled : null, download: childElType === "a"
+                ? this.download === true || this.download === ""
+                    ? ""
+                    : this.download || null
+                : null, href: childElType === "a" && this.href, name: childElType === "button" && this.name, onClick: this.handleClick, ref: this.setChildEl, rel: childElType === "a" && this.rel, tabIndex: this.disabled ? -1 : null, target: childElType === "a" && this.target, title: this.tooltipText, type: childElType === "button" && this.type }, loaderNode, this.iconStart ? iconStartEl : null, this.hasContent ? contentEl : null, this.iconEnd ? iconEndEl : null)));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/calcite-block-section.js

@@ -15,7 +15,7 @@ import { d as defineCustomElement$2 } from './switch.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.
- * v2.12.2
+ * v2.13.0
  */
 const IDS = {
     content: "content",
@@ -162,7 +162,7 @@ const BlockSection = /*@__PURE__*/ proxyCustomElement(class BlockSection extends
                 [CSS.sectionHeader]: true,
                 [CSS.toggle]: true,
             }, id: IDS.toggle, onClick: this.toggleSection }, this.renderIcon(this.iconStart), h("span", { class: CSS.sectionHeaderText }, text), this.renderIcon(this.iconEnd), this.renderStatusIcon(), h("calcite-icon", { class: CSS.chevronIcon, icon: arrowIcon, scale: "s" }))));
-        return (h(Host, { key: '224c2187de037da1611a3228195e95ba43bde093' }, headerNode, h("section", { key: '8b8849645851e21e26c63cef44428f30d2429a0b', "aria-labelledby": IDS.toggle, class: CSS.content, hidden: !open, id: IDS.content }, h("slot", { key: '3f6d783aaa6d886bb4533a4dec96aafc8ba058ef' }))));
+        return (h(Host, { key: '8e61bf71e65fc045a1e088fb60e1bbe70ae02d75' }, headerNode, h("section", { key: '5cdacc4b9f504c512bcd10ebab26e8c32936ef04', "aria-labelledby": IDS.toggle, class: CSS.content, hidden: !open, id: IDS.content }, h("slot", { key: 'fd84a50474173a49b32f7e94346481dade6d431f' }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/calcite-card-group.js

@@ -4,11 +4,11 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { y as focusElementInGroup, f as focusElement, t as toAriaBoolean } from './dom.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
+import { y as focusElementInGroup, f as focusElement } from './dom.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { a as setComponentLoaded, s as setUpLoadableComponent, b as componentLoaded } from './loadable.js';
 
-const cardGroupCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{--calcite-card-group-gap:var(--calcite-size-md);display:block}.container{display:flex;flex-wrap:wrap;gap:var(--calcite-card-group-gap)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
+const cardGroupCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}.container{display:flex;flex-wrap:wrap;gap:var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-size-md)))}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}";
 const CalciteCardGroupStyle0 = cardGroupCss;
 
 const CardGroup = /*@__PURE__*/ proxyCustomElement(class CardGroup extends HTMLElement {
@@ -84,18 +84,12 @@ const CardGroup = /*@__PURE__*/ proxyCustomElement(class CardGroup extends HTMLE
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentDidRender() {
         updateHostInteraction(this);
     }
     componentDidLoad() {
         setComponentLoaded(this);
     }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-    }
     async componentWillLoad() {
         setUpLoadableComponent(this);
     }
@@ -150,7 +144,7 @@ const CardGroup = /*@__PURE__*/ proxyCustomElement(class CardGroup extends HTMLE
     //--------------------------------------------------------------------------
     render() {
         const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
-        return (h(Host, { key: 'f7d72ac0d0c8b0cec9b1c5c048ed2a8ee304d9e2' }, h(InteractiveContainer, { key: 'b477bbced684168f1e68c1fe0d8511a689653995', disabled: this.disabled }, h("div", { key: 'ce0aa841b96ad23886e109203a14ac2b0e54b948', "aria-disabled": toAriaBoolean(this.disabled), "aria-label": this.label, class: "container", role: role }, h("slot", { key: '338c12be0a5a675daf911aad6049aff6319d3064', onSlotchange: this.updateItemsOnSlotChange, ref: (el) => (this.slotRefEl = el) })))));
+        return (h(Host, { key: '2aa2152806418f305065d23ec9779668086f10c9' }, h(InteractiveContainer, { key: '64717db7b05788f5448b898ab9bfc2a553ed6ac9', disabled: this.disabled }, h("div", { key: 'f6725d6c8942a0c69aed287bee24d79fd42c7e89', "aria-label": this.label, class: "container", role: role }, h("slot", { key: 'a88d6f133fdceafba10ceb9517428b3c7ee8cffb', onSlotchange: this.updateItemsOnSlotChange, ref: (el) => (this.slotRefEl = el) })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/calcite-card.js

@@ -4,11 +4,11 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { j as slotChangeHasAssignedElement, a as getSlotted, t as toAriaBoolean } from './dom.js';
+import { j as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n.js';
 import { c as componentFocusable, a as setComponentLoaded, s as setUpLoadableComponent } from './loadable.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { i as isActivationKey } from './key.js';
 import { d as defineCustomElement$5 } from './checkbox.js';
 import { d as defineCustomElement$4 } from './icon.js';
@@ -18,7 +18,7 @@ import { d as defineCustomElement$2 } from './loader.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.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     container: "container",
@@ -50,7 +50,7 @@ const ICONS = {
     unselectedSingle: "circle",
 };
 
-const cardCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;max-inline-size:100%;--calcite-card-corner-radius:var(--calcite-corner-radius-sharp);--calcite-card-background-color:var(--calcite-color-foreground-1);--calcite-card-border-color:var(--calcite-color-border-3);--calcite-card-shadow:var(--calcite-shadow-none);--calcite-card-accent-color-selected:var(--calcite-color-brand);--calcite-card-selection-background-color:transparent;--calcite-card-selection-background-color-hover:var(--calcite-color-transparent-hover);--calcite-card-selection-background-color-active:var(--calcite-color-transparent-press);--calcite-card-selection-background-color-selected:transparent;--calcite-card-selection-icon-color:var(--calcite-color-text-3);--calcite-card-selection-icon-color-hover:var(--calcite-color-text-2);--calcite-card-selection-icon-color-selected:var(--calcite-color-brand)}.content-wrapper{position:relative;display:flex;block-size:100%;flex-direction:column;justify-content:space-between;overflow:hidden;border:var(--calcite-border-width-sm) solid var(--calcite-card-border-color);border-radius:var(--calcite-card-corner-radius);background-color:var(--calcite-card-background-color);box-shadow:var(--calcite-card-shadow);pointer-events:none}::slotted(*){pointer-events:auto}:host(:not([selectable])) .content-wrapper:not(.non-interactive){outline-color:transparent}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.container{position:relative;display:flex;flex:1 1 auto;flex-direction:column}:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container){pointer-events:none;opacity:0}:host([loading]) .calcite-card-loader-container{position:absolute;inset:0px;display:flex;align-items:center}.header{display:flex;flex-direction:row;align-items:flex-start}.footer{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:var(--calcite-spacing-md);padding-block-start:var(--calcite-spacing-xxs);padding-block-end:var(--calcite-spacing-md)}.header-text-container{display:flex;inline-size:100%;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem}.header-text-container:not(:only-child){padding-inline-end:0.125rem}.footer{margin-block-start:auto;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:0.75rem;padding-block:0.25rem 0.75rem}.card-content{block-size:auto;font-size:var(--calcite-font-size--2);line-height:1.375}.has-slotted-content{padding:0.75rem}:host([selected]) .content-wrapper{box-shadow:inset 0 -4px 0 0 var(--calcite-card-accent-color-selected)}:host([selectable]) .header{padding-inline-end:var(--calcite-spacing-xxxl)}slot[name=title]::slotted(*),*::slotted([slot=title]){margin:0px;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=subtitle]::slotted(*),*::slotted([slot=subtitle]){margin:0px;margin-block-start:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}slot[name=heading]::slotted(*),*::slotted([slot=heading]){margin:0px;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=description]::slotted(*),*::slotted([slot=description]){margin:0px;margin-block-start:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}slot[name=thumbnail]::slotted(img),img::slotted([slot=thumbnail]){min-inline-size:100%;max-inline-size:100%}slot[name=footer-start]::slotted(*),*::slotted([slot=footer-start]){align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375;margin-inline-end:auto}slot[name=footer-end]::slotted(*),*::slotted([slot=footer-end]){align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375}.checkbox-wrapper-deprecated{pointer-events:auto;position:absolute;inset-block-start:var(--calcite-spacing-sm);inset-inline-end:var(--calcite-spacing-sm);margin:0;padding:0}.checkbox-wrapper{pointer-events:auto;margin:0.5rem;cursor:pointer;padding:0.5rem;outline-color:transparent;background-color:var(--calcite-card-selection-background-color);display:flex;align-items:center;justify-items:center;--calcite-icon-color:var(--calcite-card-selection-icon-color)}.checkbox-wrapper:hover{background-color:var(--calcite-card-selection-background-color-hover);--calcite-icon-color:var(--calcite-card-selection-icon-color-hover)}.checkbox-wrapper:active{background-color:var(--calcite-card-selection-background-color-active)}.checkbox-wrapper calcite-icon{pointer-events:none}:host([selected]) .checkbox-wrapper{--calcite-icon-color:var(--calcite-card-selection-icon-color-selected);background-color:var(--calcite-card-selection-background-color-selected)}:host([selected]) .checkbox-wrapper:hover{background-color:var(--calcite-card-selection-background-color-hover)}:host([selected]) .checkbox-wrapper:active{background-color:var(--calcite-card-selection-background-color-active)}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-hover);--calcite-icon-color:var(--calcite-card-selection-icon-color-hover)}:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-active);--calcite-icon-color:var(--calcite-card-selection-icon-color-selected)}.thumbnail-wrapper{display:flex}.content-wrapper.inline{flex-direction:row}.content-wrapper.inline>.container{inline-size:60%}.content-wrapper.inline>.thumbnail-wrapper{inline-size:40%;align-items:flex-start}.content-wrapper.inline slot[name=thumbnail]::slotted(img),.content-wrapper.inline img::slotted([slot=thumbnail]){inline-size:100%}slot[name=footer-start]::slotted(*),slot[name=footer-end]::slotted(*){display:flex;gap:0.25rem}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}";
+const cardCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;max-inline-size:100%}.content-wrapper{position:relative;display:flex;block-size:100%;flex-direction:column;justify-content:space-between;overflow:hidden;border:var(--calcite-border-width-sm) solid var(--calcite-card-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-card-corner-radius, var(--calcite-corner-radius-sharp));background-color:var(--calcite-card-background-color, var(--calcite-color-foreground-1));box-shadow:var(--calcite-card-shadow, var(--calcite-shadow-none));pointer-events:none}::slotted(*){pointer-events:auto}:host(:not([selectable])) .content-wrapper:not(.non-interactive){outline-color:transparent}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.container{position:relative;display:flex;flex:1 1 auto;flex-direction:column}:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container){pointer-events:none;opacity:0}:host([loading]) .calcite-card-loader-container{position:absolute;inset:0px;display:flex;align-items:center}.header{display:flex;flex-direction:row;align-items:flex-start}.footer{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:var(--calcite-spacing-md);padding-block-start:var(--calcite-spacing-xxs);padding-block-end:var(--calcite-spacing-md)}.header-text-container{display:flex;inline-size:100%;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem}.header-text-container:not(:only-child){padding-inline-end:0.125rem}.footer{margin-block-start:auto;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:0.75rem;padding-block:0.25rem 0.75rem}.card-content{block-size:auto;font-size:var(--calcite-font-size--2);line-height:1.375}.has-slotted-content{padding:0.75rem}:host([selected]) .content-wrapper{box-shadow:inset 0 -4px 0 0 var(--calcite-card-accent-color-selected, var(--calcite-color-brand))}:host([selectable]) .header{padding-inline-end:var(--calcite-spacing-xxxl)}slot[name=title]::slotted(*),*::slotted([slot=title]){margin:0px;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=subtitle]::slotted(*),*::slotted([slot=subtitle]){margin:0px;margin-block-start:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}slot[name=heading]::slotted(*),*::slotted([slot=heading]){margin:0px;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=description]::slotted(*),*::slotted([slot=description]){margin:0px;margin-block-start:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}slot[name=thumbnail]::slotted(img),img::slotted([slot=thumbnail]){min-inline-size:100%;max-inline-size:100%}slot[name=footer-start]::slotted(*),*::slotted([slot=footer-start]){align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375;margin-inline-end:auto}slot[name=footer-end]::slotted(*),*::slotted([slot=footer-end]){align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375}.checkbox-wrapper-deprecated{pointer-events:auto;position:absolute;inset-block-start:var(--calcite-spacing-sm);inset-inline-end:var(--calcite-spacing-sm);margin:0;padding:0;color:var(--calcite-card-selection-color, var(--calcite-color-text-3))}.checkbox-wrapper-deprecated:hover{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}.checkbox-wrapper-deprecated:active{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press))}.checkbox-wrapper{pointer-events:auto;margin:0.5rem;cursor:pointer;padding:0.5rem;outline-color:transparent;display:flex;align-items:center;justify-items:center;color:var(--calcite-card-selection-color, var(--calcite-color-text-3))}.checkbox-wrapper:hover{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}.checkbox-wrapper:active{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press))}.checkbox-wrapper calcite-icon{pointer-events:none}:host([selected]) .checkbox-wrapper-deprecated,:host([selected]) .checkbox-wrapper{color:var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)))}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));color:var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)))}.thumbnail-wrapper{display:flex}.content-wrapper.inline{flex-direction:row}.content-wrapper.inline>.container{inline-size:60%}.content-wrapper.inline>.thumbnail-wrapper{inline-size:40%;align-items:flex-start}.content-wrapper.inline slot[name=thumbnail]::slotted(img),.content-wrapper.inline img::slotted([slot=thumbnail]){inline-size:100%}slot[name=footer-start]::slotted(*),slot[name=footer-end]::slotted(*){display:flex;gap:0.25rem}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}";
 const CalciteCardStyle0 = cardCss;
 
 const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
@@ -65,6 +65,27 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
         //  Private Methods
         //
         //--------------------------------------------------------------------------
+        this.handleThumbnailSlotChange = (event) => {
+            this.hasThumbnail = slotChangeHasAssignedElement(event);
+        };
+        this.handleHeadingSlotChange = (event) => {
+            this.hasHeading = slotChangeHasAssignedElement(event);
+        };
+        this.handleDescriptionSlotChange = (event) => {
+            this.hasDescription = slotChangeHasAssignedElement(event);
+        };
+        this.handleTitleSlotChange = (event) => {
+            this.hasTitle = slotChangeHasAssignedElement(event);
+        };
+        this.handleSubtitleSlotChange = (event) => {
+            this.hasSubtitle = slotChangeHasAssignedElement(event);
+        };
+        this.handleFooterStartSlotChange = (event) => {
+            this.hasFooterStart = slotChangeHasAssignedElement(event);
+        };
+        this.handleFooterEndSlotChange = (event) => {
+            this.hasFooterEnd = slotChangeHasAssignedElement(event);
+        };
         this.handleDefaultSlotChange = (event) => {
             this.hasContent = slotChangeHasAssignedElement(event);
         };
@@ -123,6 +144,13 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
         this.selectionMode = "none";
         this.messageOverrides = undefined;
         this.effectiveLocale = undefined;
+        this.hasThumbnail = false;
+        this.hasHeading = false;
+        this.hasDescription = false;
+        this.hasSubtitle = false;
+        this.hasTitle = false;
+        this.hasFooterStart = false;
+        this.hasFooterEnd = false;
         this.defaultMessages = undefined;
         this.hasContent = false;
     }
@@ -147,7 +175,6 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
     }
@@ -158,7 +185,6 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
         updateHostInteraction(this);
     }
     disconnectedCallback() {
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
     }
@@ -173,7 +199,7 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
         return (h("calcite-label", { class: CSS.checkboxWrapperDeprecated }, h("calcite-checkbox", { checked: this.selected, label: this.messages.select, onClick: this.selectCardDeprecated, onKeyDown: this.cardSelectKeyDownDeprecated })));
     }
     renderThumbnail() {
-        return getSlotted(this.el, SLOTS.thumbnail) ? (h("section", { class: CSS.thumbnailWrapper }, h("slot", { name: SLOTS.thumbnail }))) : null;
+        return (h("section", { class: CSS.thumbnailWrapper, hidden: !this.hasThumbnail }, h("slot", { name: SLOTS.thumbnail, onSlotchange: this.handleThumbnailSlotChange })));
     }
     renderSelectionIcon() {
         const icon = this.selectionMode === "multiple" && this.selected
@@ -186,21 +212,14 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
         return (h("div", { class: CSS.checkboxWrapper, onPointerDown: this.cardSelectClick, tabIndex: -1 }, h("calcite-icon", { icon: icon, scale: "s" })));
     }
     renderHeader() {
-        const { el } = this;
-        const heading = getSlotted(el, SLOTS.heading);
-        const description = getSlotted(el, SLOTS.description);
-        const hasHeader = heading || description;
-        const subtitle = getSlotted(el, SLOTS.subtitle);
-        const title = getSlotted(el, SLOTS.title);
-        const hasDeprecatedHeader = subtitle || title;
-        return hasHeader || hasDeprecatedHeader ? (h("header", { class: CSS.header }, this.selectable ? this.renderCheckboxDeprecated() : null, h("div", { class: CSS.headerTextContainer }, h("slot", { key: "heading-slot", name: SLOTS.heading }), h("slot", { key: "description-slot", name: SLOTS.description }), h("slot", { key: "deprecated-title-slot", name: SLOTS.title }), h("slot", { key: "deprecated-subtitle-slot", name: SLOTS.subtitle })), this.selectionMode !== "none" && this.renderSelectionIcon())) : null;
+        const hasHeader = this.hasHeading || this.hasDescription;
+        const hasDeprecatedHeader = this.hasSubtitle || this.hasTitle;
+        const showHeader = hasHeader || hasDeprecatedHeader;
+        return (h("header", { class: CSS.header, hidden: !showHeader }, this.selectable ? this.renderCheckboxDeprecated() : null, h("div", { class: CSS.headerTextContainer }, h("slot", { name: SLOTS.heading, onSlotchange: this.handleHeadingSlotChange }), h("slot", { name: SLOTS.description, onSlotchange: this.handleDescriptionSlotChange }), h("slot", { name: SLOTS.title, onSlotchange: this.handleTitleSlotChange }), h("slot", { name: SLOTS.subtitle, onSlotchange: this.handleSubtitleSlotChange })), this.selectionMode !== "none" && this.renderSelectionIcon()));
     }
     renderFooter() {
-        const { el } = this;
-        const startFooter = getSlotted(el, SLOTS.footerStart);
-        const endFooter = getSlotted(el, SLOTS.footerEnd);
-        const hasFooter = startFooter || endFooter;
-        return hasFooter ? (h("footer", { class: CSS.footer }, h("slot", { name: SLOTS.footerStart }), h("slot", { name: SLOTS.footerEnd }))) : null;
+        const hasFooter = this.hasFooterStart || this.hasFooterEnd;
+        return (h("footer", { class: CSS.footer, hidden: !hasFooter }, h("slot", { name: SLOTS.footerStart, onSlotchange: this.handleFooterStartSlotChange }), h("slot", { name: SLOTS.footerEnd, onSlotchange: this.handleFooterEndSlotChange })));
     }
     render() {
         const thumbnailInline = this.thumbnailPosition.startsWith("inline");
@@ -210,10 +229,10 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
             : this.selectionMode !== "none"
                 ? "radio"
                 : undefined;
-        return (h(Host, { key: 'e33b76130cd91d3caa6662f1f58b79d238c708fb' }, h(InteractiveContainer, { key: '772da2a3a1274eb467d1febb915ffb97953beae7', disabled: this.disabled }, h("div", { key: 'b9fdbb51cfb07964479d0f723add39b8a2384f86', "aria-checked": this.selectionMode !== "none" ? toAriaBoolean(this.selected) : undefined, "aria-disabled": this.disabled, "aria-label": this.label, class: { [CSS.contentWrapper]: true, inline: thumbnailInline }, onClick: this.cardBodyClickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.containerEl = el), role: role, tabIndex: !this.selectable || this.disabled ? 0 : -1 }, this.loading ? (h("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, h("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), h("section", { key: '51cfe132a589ec65b39544b4c1246545b0b864f2', "aria-busy": toAriaBoolean(this.loading), class: { [CSS.container]: true } }, this.renderHeader(), h("div", { key: 'c256998e330a949d47a12b23127c68cba081854e', class: {
+        return (h(Host, { key: 'dbb99f5c06440d5f7100f89bfef1febbd8d01f3e' }, h(InteractiveContainer, { key: '6fef7f69921c33bab4c66d34c0691821c837cc82', disabled: this.disabled }, h("div", { key: 'bcd3a1fecbfc39a15102099db8e6943b0e2207c5', "aria-checked": this.selectionMode !== "none" ? toAriaBoolean(this.selected) : undefined, "aria-label": this.label, class: { [CSS.contentWrapper]: true, inline: thumbnailInline }, onClick: this.cardBodyClickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.containerEl = el), role: role, tabIndex: !this.selectable || this.disabled ? 0 : -1 }, this.loading ? (h("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, h("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), h("section", { key: '81c5383f8b09ce6372fd94a0e3c9e91c502a18bc', "aria-busy": toAriaBoolean(this.loading), class: { [CSS.container]: true } }, this.renderHeader(), h("div", { key: '12d9564007bc07a3e0643ec0b097cab856968e02', class: {
                 [CSS.cardContent]: true,
                 [CSS.hasSlottedContent]: this.hasContent,
-            } }, h("slot", { key: '17fb9b0a9919f09a474d3c54818e770be9a85b77', onSlotchange: this.handleDefaultSlotChange })), this.renderFooter()), !thumbnailStart && this.renderThumbnail()))));
+            } }, h("slot", { key: '1c500b0005123c768bfb77eecb62a0166c5e178f', onSlotchange: this.handleDefaultSlotChange })), this.renderFooter()), !thumbnailStart && this.renderThumbnail()))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
@@ -233,6 +252,13 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
         "selectionMode": [1, "selection-mode"],
         "messageOverrides": [1040],
         "effectiveLocale": [32],
+        "hasThumbnail": [32],
+        "hasHeading": [32],
+        "hasDescription": [32],
+        "hasSubtitle": [32],
+        "hasTitle": [32],
+        "hasFooterStart": [32],
+        "hasFooterEnd": [32],
         "defaultMessages": [32],
         "hasContent": [32],
         "setFocus": [64]

package/dist/components/calcite-chip-group.js

@@ -4,8 +4,8 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { h as slotChangeGetAssignedElements, y as focusElementInGroup, t as toAriaBoolean } from './dom.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
+import { h as slotChangeGetAssignedElements, y as focusElementInGroup } from './dom.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable.js';
 
 const chipGroupCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}.container{display:flex;inline-size:100%;flex-wrap:wrap;gap:0.5rem}::slotted(calcite-chip){flex:none}:host([scale=s]) .container{gap:0.25rem}:host([scale=l]) .container{gap:0.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
@@ -82,11 +82,7 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-    }
     componentDidRender() {
-        disconnectInteractive(this);
         updateHostInteraction(this);
     }
     componentDidLoad() {
@@ -179,7 +175,7 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
     render() {
         const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
         const { disabled } = this;
-        return (h(InteractiveContainer, { key: '341dd9e8f25d4d358ea6e33740d8b851a5fa0e9d', disabled: disabled }, h("div", { key: '66c9eaa00b7ca0c602f94a017f5b6ef6afc3bd93', "aria-disabled": toAriaBoolean(disabled), "aria-label": this.label, class: "container", role: role }, h("slot", { key: 'd62c336c6cdca0bbd5c6673975ae4a25bc8ef9df', onSlotchange: this.updateItems, ref: (el) => (this.slotRefEl = el) }))));
+        return (h(InteractiveContainer, { key: '0db5548f1c2854898191b4d6eb8140cae2faf3d8', disabled: disabled }, h("div", { key: '60fc92fea20478ee6fde23d807f17f7f472c1f5a', "aria-label": this.label, class: "container", role: role }, h("slot", { key: 'd43fcf04af0063cd4d00f46e6dd61347eafccb3b', onSlotchange: this.updateItems, ref: (el) => (this.slotRefEl = el) }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/calcite-color-picker.js

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { C as CSSColorMode, n as normalizeHex, a as hexify, b as alphaCompatible, c as Color, o as opacityToAlpha, d as CSS, e as alphaToOpacity, D as DEFAULT_COLOR, f as DIMENSIONS, g as getSliderWidth, p as parseMode, j as normalizeColor, k as colorEqual, R as RGB_LIMITS, H as HSV_LIMITS, O as OPACITY_LIMITS, t as toNonAlphaMode, l as normalizeAlpha, m as HUE_LIMIT_CONSTRAINED, S as SCOPE_SIZE, q as DEFAULT_STORAGE_KEY_PREFIX, r as toAlphaMode } from './utils.js';
 import { i as isPrimaryPointerButton, g as getElementDir, k as focusFirstTabbable } from './dom.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { i as isActivationKey } from './key.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
@@ -549,7 +549,6 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         await setUpMessages(this);
     }
     connectedCallback() {
-        connectInteractive(this);
         connectLocalized(this);
         connectMessages(this);
     }
@@ -559,7 +558,6 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
     disconnectedCallback() {
         window.removeEventListener("pointermove", this.globalPointerMoveHandler);
         window.removeEventListener("pointerup", this.globalPointerUpHandler);
-        disconnectInteractive(this);
         disconnectLocalized(this);
         disconnectMessages(this);
     }
@@ -588,10 +586,10 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
         const [adjustedColorFieldScopeLeft, adjustedColorFieldScopeTop] = this.getAdjustedScopePosition(colorFieldScopeLeft, colorFieldScopeTop);
         const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(hueLeft, hueTop);
         const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(opacityLeft, opacityTop);
-        return (h(InteractiveContainer, { key: 'cd7c2469429382b1adee89c87c4774160795203c', disabled: this.disabled }, h("div", { key: 'dd6809c82d3ffe64b8eaebd0669e7f61c0ea87d1', class: CSS.container }, h("div", { key: '888c08c46fec112861b076c3cf24b9be7b4a66cd', class: CSS.controlAndScope }, h("canvas", { key: '23631c824c61abb2a3ca74e35bffc8be0364a052', class: CSS.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), h("div", { key: 'a5271bbe3c4f45e3cf7736dd8f4201f54420bfb7', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: {
+        return (h(InteractiveContainer, { key: 'c4837ef7cbe25b5fc3f0c72fe82d0090c6e0cdb5', disabled: this.disabled }, h("div", { key: '28230570482ee9d33df9518e3cca534e3fac44ac', class: CSS.container }, h("div", { key: '83172bc55f13955f5b69b59300e68642d59999af', class: CSS.controlAndScope }, h("canvas", { key: 'c20db7054ab5ebdb1e13ba295ac463609c44de47', class: CSS.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), h("div", { key: '1e44beb121ed5a2247a6d69bf42c49a7f1ce5829', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: {
                 top: `${adjustedColorFieldScopeTop || 0}px`,
                 left: `${adjustedColorFieldScopeLeft || 0}px`,
-            }, tabindex: "0" })), h("div", { key: 'eee6c10107513fd46316d2ba7510977b72771cd2', class: CSS.previewAndSliders }, h("calcite-color-picker-swatch", { key: '964481e1c6c6c050df076e8cdc9d7e5b2cbeec79', class: CSS.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), h("div", { key: 'f915032fe532e140005b0ff1253b0a971a17b079', class: CSS.sliders }, h("div", { key: '2bcb609ce36df2d0f75abb767ee6dc88c0c9ea3b', class: CSS.controlAndScope }, h("canvas", { key: '99e268a194b785a8ec97fed67a523c602def2a94', class: { [CSS.slider]: true, [CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), h("div", { key: '4cdc0f98048a48e070430bf4f1f817571534f31b', "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: {
+            }, tabindex: "0" })), h("div", { key: '5b873f4e7266cc654086f59c8483d3b4a65c8e8f', class: CSS.previewAndSliders }, h("calcite-color-picker-swatch", { key: 'db7c903a933ed061cc2edcd766fde70a8b670f00', class: CSS.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), h("div", { key: '33ea2354cbcfaa6677e82713bd8f02d1b83a9c26', class: CSS.sliders }, h("div", { key: '28493b4bd177b8c97583cabeb5716a7cb7202e76', class: CSS.controlAndScope }, h("canvas", { key: 'd0a9ce7fb098b7434cd62f68b6b6092efcef3dc4', class: { [CSS.slider]: true, [CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), h("div", { key: '2356120385aabf09384f0077dffb7881c55c5ea9', "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: {
                 top: `${adjustedHueScopeTop}px`,
                 left: `${adjustedHueScopeLeft}px`,
             }, tabindex: "0" })), alphaChannel ? (h("div", { class: CSS.controlAndScope }, h("canvas", { class: { [CSS.slider]: true, [CSS.opacitySlider]: true }, onPointerDown: this.handleOpacitySliderPointerDown, ref: this.initOpacitySlider }), h("div", { "aria-label": messages.opacity, "aria-valuemax": OPACITY_LIMITS.max, "aria-valuemin": OPACITY_LIMITS.min, "aria-valuenow": (color || DEFAULT_COLOR).round().alpha(), class: { [CSS.scope]: true, [CSS.opacityScope]: true }, onKeyDown: this.handleOpacityScopeKeyDown, ref: this.storeOpacityScope, role: "slider", style: {

package/dist/components/calcite-dialog.js

@@ -35,7 +35,7 @@ const interact = interact_min.exports;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
+ * v2.13.0
  */
 const CSS = {
     dialog: "dialog",
@@ -67,7 +67,7 @@ const dialogDragStep = 25;
 const initialDragPosition = { x: 0, y: 0 };
 const initialResizePosition = { top: 0, right: 0, bottom: 0, left: 0 };
 
-const dialogCss = ":host{--calcite-dialog-scrim-background-color:rgba(0, 0, 0, 0.85);pointer-events:none;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;--calcite-internal-dialog-animation-offset:20px}:host([modal]){position:absolute}.container{pointer-events:auto;position:fixed;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88)}:host([placement=top]) .container{align-items:flex-start;justify-content:center}:host([placement=top-start]) .container{align-items:flex-start;justify-content:flex-start}:host([placement=top-end]) .container{align-items:flex-start;justify-content:flex-end}:host([placement=bottom]) .container{align-items:flex-end;justify-content:center}:host([placement=bottom-start]) .container{align-items:flex-end;justify-content:flex-start}:host([placement=bottom-end]) .container{align-items:flex-end;justify-content:flex-end}:host(:not([modal])) .container{pointer-events:none}:host([scale=s]){--calcite-internal-dialog-content-padding:var(--calcite-dialog-content-space, var(--calcite-spacing-sm));--calcite-internal-dialog-min-size-x:198px;--calcite-internal-dialog-min-size-y:140px}:host([scale=m]){--calcite-internal-dialog-content-padding:var(--calcite-dialog-content-space, var(--calcite-spacing-md));--calcite-internal-dialog-min-size-x:288px;--calcite-internal-dialog-min-size-y:180px}:host([scale=l]){--calcite-internal-dialog-content-padding:var(--calcite-dialog-content-space, var(--calcite-spacing-lg));--calcite-internal-dialog-min-size-x:388px;--calcite-internal-dialog-min-size-y:220px}.scrim{--calcite-scrim-background:var(--calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim));--calcite-scrim-background-color:var(\n    --calcite-dialog-scrim-background-color,\n    var(--calcite-color-transparent-scrim)\n  );position:fixed;inset:0px;display:flex;overflow-y:hidden}calcite-panel{--calcite-panel-content-space:var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-footer-padding:var(--calcite-dialog-footer-space);--calcite-panel-header-border-block-end:var(--calcite-border-width-sm) solid var(--calcite-dialog-border-color)}.dialog{pointer-events:none;position:relative;z-index:var(--calcite-z-index-modal);margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;border-radius:0.25rem;opacity:0;--tw-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);--tw-shadow-colored:0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-overflow-scrolling:touch;visibility:hidden;transition:inset-block var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);min-inline-size:var(--calcite-dialog-min-size-x, var(--calcite-internal-dialog-min-size-x));max-inline-size:var(--calcite-dialog-max-size-x, 100%);min-block-size:var(--calcite-dialog-min-size-y, var(--calcite-internal-dialog-min-size-y));max-block-size:var(--calcite-dialog-max-size-y, 100%);--calcite-internal-dialog-hidden-position:calc(\n    var(--calcite-dialog-offset-y, 0px) + var(--calcite-internal-dialog-animation-offset)\n  );--calcite-internal-dialog-shown-position:var(--calcite-dialog-offset-y, 0);inset-inline-start:var(--calcite-dialog-offset-x, 0);inset-block-start:var(--calcite-internal-dialog-hidden-position)}.dialog--opening-active{inset-block-start:var(--calcite-internal-dialog-shown-position)}:host([menu-open]) .dialog{transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88)}.panel{border-radius:0.25rem}.container--open{opacity:1;visibility:visible;transition-delay:0ms}.container--open .dialog{pointer-events:auto;visibility:visible;opacity:1;transition:inset-block var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition-delay:0ms}:host([width=small]) .dialog{inline-size:auto}:host([width-scale=s]) .dialog{inline-size:var(--calcite-dialog-size-x, 32rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 35rem){:host([width-scale=s]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}:host([width-scale=s]) .dialog--opening-active{inset-block-start:0}}:host([width-scale=m]) .dialog{inline-size:var(--calcite-dialog-size-x, 48rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 51rem){:host([width-scale=m]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}:host([width-scale=m]) .dialog--opening-active{inset-block-start:0}}:host([width-scale=l]) .dialog{inline-size:var(--calcite-dialog-size-x, 94rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 97rem){:host([width-scale=l]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}:host([width-scale=l]) .dialog--opening-active{inset-block-start:0}}:host([placement=cover]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}:host([placement=cover]) .panel{border-radius:0px}:host([kind]) .panel{border-start-start-radius:0px;border-start-end-radius:0px}:host([kind=brand]) .dialog{border-color:var(--calcite-color-brand)}:host([kind=danger]) .dialog{border-color:var(--calcite-color-status-danger)}:host([kind=info]) .dialog{border-color:var(--calcite-color-status-info)}:host([kind=success]) .dialog{border-color:var(--calcite-color-status-success)}:host([kind=warning]) .dialog{border-color:var(--calcite-color-status-warning)}:host([kind=brand][open]) .dialog,:host([kind=danger][open]) .dialog,:host([kind=info][open]) .dialog,:host([kind=success][open]) .dialog,:host([kind=warning][open]) .dialog{border-width:0px;border-block-start-width:4px;border-style:solid}.container--embedded{position:absolute;pointer-events:auto}.container--embedded calcite-scrim{position:absolute}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
+const dialogCss = ":host{--calcite-dialog-scrim-background-color:rgba(0, 0, 0, 0.85);pointer-events:none;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;--calcite-internal-dialog-animation-offset:20px}:host([modal]){position:absolute}.container{pointer-events:auto;position:fixed;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88)}:host([placement=top]) .container{align-items:flex-start;justify-content:center}:host([placement=top-start]) .container{align-items:flex-start;justify-content:flex-start}:host([placement=top-end]) .container{align-items:flex-start;justify-content:flex-end}:host([placement=bottom]) .container{align-items:flex-end;justify-content:center}:host([placement=bottom-start]) .container{align-items:flex-end;justify-content:flex-start}:host([placement=bottom-end]) .container{align-items:flex-end;justify-content:flex-end}:host(:not([modal])) .container{pointer-events:none}:host([scale=s]){--calcite-internal-dialog-content-padding:var(--calcite-dialog-content-space, var(--calcite-spacing-sm));--calcite-internal-dialog-min-size-x:198px;--calcite-internal-dialog-min-size-y:140px}:host([scale=m]){--calcite-internal-dialog-content-padding:var(--calcite-dialog-content-space, var(--calcite-spacing-md));--calcite-internal-dialog-min-size-x:288px;--calcite-internal-dialog-min-size-y:180px}:host([scale=l]){--calcite-internal-dialog-content-padding:var(--calcite-dialog-content-space, var(--calcite-spacing-lg));--calcite-internal-dialog-min-size-x:388px;--calcite-internal-dialog-min-size-y:220px}.scrim{--calcite-scrim-background:var(--calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim));--calcite-scrim-background-color:var(\n    --calcite-dialog-scrim-background-color,\n    var(--calcite-color-transparent-scrim)\n  );position:fixed;inset:0px;display:flex;overflow-y:hidden}calcite-panel{--calcite-panel-content-space:var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-footer-padding:var(--calcite-dialog-footer-space);--calcite-panel-header-border-block-end:var(--calcite-border-width-sm) solid var(--calcite-dialog-border-color);--calcite-panel-background-color:var(--calcite-dialog-background-color)}.dialog{pointer-events:none;position:relative;z-index:var(--calcite-z-index-modal);margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;border-radius:0.25rem;opacity:0;--tw-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);--tw-shadow-colored:0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-overflow-scrolling:touch;visibility:hidden;transition:inset-block var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);min-inline-size:var(--calcite-dialog-min-size-x, var(--calcite-internal-dialog-min-size-x));max-inline-size:var(--calcite-dialog-max-size-x, 100%);min-block-size:var(--calcite-dialog-min-size-y, var(--calcite-internal-dialog-min-size-y));max-block-size:var(--calcite-dialog-max-size-y, 100%);--calcite-internal-dialog-hidden-position:calc(\n    var(--calcite-dialog-offset-y, 0px) + var(--calcite-internal-dialog-animation-offset)\n  );--calcite-internal-dialog-shown-position:var(--calcite-dialog-offset-y, 0);inset-inline-start:var(--calcite-dialog-offset-x, 0);inset-block-start:var(--calcite-internal-dialog-hidden-position)}.dialog--opening-active{inset-block-start:var(--calcite-internal-dialog-shown-position)}:host([menu-open]) .dialog{transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88)}.panel{border-radius:0.25rem}.container--open{opacity:1;visibility:visible;transition-delay:0ms}.container--open .dialog{pointer-events:auto;visibility:visible;opacity:1;transition:inset-block var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition-delay:0ms}:host([width=small]) .dialog{inline-size:auto}:host([width-scale=s]) .dialog{inline-size:var(--calcite-dialog-size-x, 32rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 35rem){:host([width-scale=s]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}:host([width-scale=s]) .dialog--opening-active{inset-block-start:0}}:host([width-scale=m]) .dialog{inline-size:var(--calcite-dialog-size-x, 48rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 51rem){:host([width-scale=m]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}:host([width-scale=m]) .dialog--opening-active{inset-block-start:0}}:host([width-scale=l]) .dialog{inline-size:var(--calcite-dialog-size-x, 94rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 97rem){:host([width-scale=l]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}:host([width-scale=l]) .dialog--opening-active{inset-block-start:0}}:host([placement=cover]) .dialog{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}:host([placement=cover]) .panel{border-radius:0px}:host([kind]) .panel{border-start-start-radius:0px;border-start-end-radius:0px}:host([kind=brand]) .dialog{border-color:var(--calcite-color-brand)}:host([kind=danger]) .dialog{border-color:var(--calcite-color-status-danger)}:host([kind=info]) .dialog{border-color:var(--calcite-color-status-info)}:host([kind=success]) .dialog{border-color:var(--calcite-color-status-success)}:host([kind=warning]) .dialog{border-color:var(--calcite-color-status-warning)}:host([kind=brand][open]) .dialog,:host([kind=danger][open]) .dialog,:host([kind=info][open]) .dialog,:host([kind=success][open]) .dialog,:host([kind=warning][open]) .dialog{border-width:0px;border-block-start-width:4px;border-style:solid}.container--embedded{position:absolute;pointer-events:auto}.container--embedded calcite-scrim{position:absolute}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteDialogStyle0 = dialogCss;
 
 let totalOpenDialogs = 0;
@@ -169,9 +169,6 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
                     break;
             }
         };
-        this.setContainerEl = (el) => {
-            this.containerEl = el;
-        };
         this.setTransitionEl = (el) => {
             this.transitionEl = el;
             this.setupInteractions();
@@ -195,7 +192,7 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
             this.open = false;
         };
         this.handlePanelKeyDown = (event) => {
-            if (this.escapeDisabled) {
+            if (this.escapeDisabled && event.key === "Escape") {
                 event.preventDefault();
             }
         };
@@ -301,11 +298,11 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends HTMLElement
     }
     render() {
         const { assistiveText, description, heading, opened } = this;
-        return (h(Host, { key: '6a00a9f9c7c9ba8079b24cae446322bfa258348d' }, h("div", { key: 'd7a5e0f37a1fe05852bdd1b88a8b47f185e1bf71', class: {
+        return (h(Host, { key: 'bf406255eaa6d94c8443af185a74a2b2d58c6d59' }, h("div", { key: 'de2a34b6da4a82c66e9fafdbdd2056e4e11e1315', class: {
                 [CSS.container]: true,
                 [CSS.containerOpen]: opened,
                 [CSS.containerEmbedded]: this.embedded,
-            }, ref: this.setContainerEl }, this.modal ? (h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose })) : null, h("div", { key: 'f0236b163b7f7856033c581b9191d0fc491eee46', "aria-description": description, "aria-label": heading, "aria-modal": toAriaBoolean(this.modal), class: CSS.dialog, onKeyDown: this.handleKeyDown, ref: this.setTransitionEl, role: "dialog" }, assistiveText ? (h("div", { "aria-live": "polite", class: CSS.assistiveText, key: "assistive-text" }, assistiveText)) : null, h("slot", { key: 'b0d18a7ce3e4ad5df276b8f04f41284bbe55efff', name: SLOTS.content }, h("calcite-panel", { key: '65bcc069837d6749c84351d7ca29c82e112ff809', beforeClose: this.beforeClose, class: CSS.panel, closable: !this.closeDisabled, closed: !opened, description: description, heading: heading, headingLevel: this.headingLevel, loading: this.loading, menuOpen: this.menuOpen, messageOverrides: this.messageOverrides, onCalcitePanelClose: this.handleInternalPanelCloseClick, onCalcitePanelScroll: this.handleInternalPanelScroll, onKeyDown: this.handlePanelKeyDown, overlayPositioning: this.overlayPositioning, ref: (el) => (this.panelEl = el), scale: this.scale }, h("slot", { key: '90a1b0007537031a9c1ae3761f48d05d3dd62d78', name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { key: 'b32c13fd7cf274e1fb9ffa071a7406e1a26e0b72', name: SLOTS.alerts, slot: SLOTS$1.alerts }), h("slot", { key: 'd3433c5b0ed4ec801950a72cea50f61efa9b6b8e', name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { key: '164df8e6a746f0e351c629193c5052a3f9254e48', name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { key: 'e67304954b705afe57384f27214ecab5b89eaed9', name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { key: 'b4108e58478e2e4e00494c8c8e7b1790804f55ee', name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { key: 'c9b54cd7003e3ff18c000fb32215b9dd0de6586e', name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { key: 'bf3b9d2fcbbda75832d3c27a4a5118b7eca0c891', name: SLOTS.contentTop, slot: SLOTS$1.contentTop }), h("slot", { key: 'db86d0c4aa3b8655e6566462d47c33d2ae2a8518', name: SLOTS.contentBottom, slot: SLOTS$1.contentBottom }), h("slot", { key: '98d5f7a2864e00b5f5a13110b892c7f52c12cf93', name: SLOTS.footerStart, slot: SLOTS$1.footerStart }), h("slot", { key: '8a104a39303414390b745f23987466abaa7a874c', name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", { key: '15673502ce16cab5f70c6be6204c8b9d59c3ce88', name: SLOTS.footerEnd, slot: SLOTS$1.footerEnd }), h("slot", { key: '7dfb7dd86d4019c9256adccc7b16554b9fe0a05c' })))))));
+            } }, this.modal ? (h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose })) : null, h("div", { key: 'be47093e3a955ce45a71c555700143a4a1c7a166', "aria-description": description, "aria-label": heading, "aria-modal": toAriaBoolean(this.modal), class: CSS.dialog, onKeyDown: this.handleKeyDown, ref: this.setTransitionEl, role: "dialog" }, assistiveText ? (h("div", { "aria-live": "polite", class: CSS.assistiveText, key: "assistive-text" }, assistiveText)) : null, h("slot", { key: '6ed9f10ae7d5ecc1ec9062d6aba559001d5194e6', name: SLOTS.content }, h("calcite-panel", { key: 'cd6ebaa7d7362cbeb70e9ae623f38298d1e831e3', beforeClose: this.beforeClose, class: CSS.panel, closable: !this.closeDisabled, closed: !opened, description: description, heading: heading, headingLevel: this.headingLevel, loading: this.loading, menuOpen: this.menuOpen, messageOverrides: this.messageOverrides, onCalcitePanelClose: this.handleInternalPanelCloseClick, onCalcitePanelScroll: this.handleInternalPanelScroll, onKeyDown: this.handlePanelKeyDown, overlayPositioning: this.overlayPositioning, ref: (el) => (this.panelEl = el), scale: this.scale }, h("slot", { key: '2ce955775c33b09fc849a083d0bcc1c8ce523dd8', name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { key: 'dd44184de251320af6225baa2e59571b881a23cd', name: SLOTS.alerts, slot: SLOTS$1.alerts }), h("slot", { key: 'da343a1a10e015b04b37463c10592e612a576e9b', name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { key: '6680fde2bd7ad6dc5803c78ea7250d11d4920b7c', name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { key: 'a17ca64188ffe6000792e67eafc838df575ebbc3', name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { key: '7e048c4a9104053ca0a61ab2514b018efb4fc872', name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { key: '6760c8a6c105a511fcb859cfd222f8c1355a82c4', name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { key: 'e0f2e7644281d408d8c21ce5bf16b08af0a59c3b', name: SLOTS.contentTop, slot: SLOTS$1.contentTop }), h("slot", { key: '01889c3b7fc13bc49521c27feb2ab35346552504', name: SLOTS.contentBottom, slot: SLOTS$1.contentBottom }), h("slot", { key: '593bad35110b5d7e7b44d598b397e4b87cc28e28', name: SLOTS.footerStart, slot: SLOTS$1.footerStart }), h("slot", { key: '5e84099e096a6afb678cce9731b189f4011dc067', name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", { key: '69a805bd0c1f43a6d165939e62db562428f39f11', name: SLOTS.footerEnd, slot: SLOTS$1.footerEnd }), h("slot", { key: 'b49e14ff6d2c63caaa8fd296920618e7673eb71b' })))))));
     }
     effectiveLocaleChange() {
         updateMessages(this, this.effectiveLocale);