@esri/solutions-components 0.8.6-6.3 → 0.8.6

package/dist/components/calcite-card.js

@@ -3,55 +3,38 @@
  * Licensed under the Apache License, Version 2.0
  * 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 { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
+import { t as toAriaBoolean, a as getSlotted } 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 { i as isActivationKey } from './key.js';
-import { d as defineCustomElement$5 } from './checkbox.js';
-import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$4 } from './checkbox.js';
 import { d as defineCustomElement$3 } from './label2.js';
 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/main/LICENSE.md for details.
- * v2.8.2
+ * v2.4.0
  */
 const CSS = {
     container: "container",
-    contentWrapper: "content-wrapper",
     header: "header",
     footer: "footer",
-    heading: "heading",
-    description: "description",
+    title: "title",
+    subtitle: "subtitle",
     checkboxWrapper: "checkbox-wrapper",
-    checkboxWrapperDeprecated: "checkbox-wrapper-deprecated",
     thumbnailWrapper: "thumbnail-wrapper",
-    headerTextContainer: "header-text-container",
-    cardContent: "card-content",
-    hasSlottedContent: "has-slotted-content",
 };
 const SLOTS = {
     thumbnail: "thumbnail",
-    heading: "heading",
-    description: "description",
-    footerStart: "footer-start",
-    footerEnd: "footer-end",
     title: "title",
     subtitle: "subtitle",
-};
-const ICONS = {
-    selected: "check-square-f",
-    unselected: "square",
-    selectedSingle: "circle-f",
-    unselectedSingle: "circle",
+    footerStart: "footer-start",
+    footerEnd: "footer-end",
 };
 
-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-ui-icon-color:var(--calcite-card-selection-icon-color)}.checkbox-wrapper:hover{background-color:var(--calcite-card-selection-background-color-hover);--calcite-ui-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-ui-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-ui-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-ui-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 CalciteCardStyle0 = cardCss;
+const cardCss = ":host{display:block;max-inline-size:100%}:host .calcite-card-container{position:relative;display:flex;block-size:100%;flex-direction:column;justify-content:space-between;overflow:hidden;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);border-radius:var(--calcite-border-radius-base)}.container{position:relative;display:flex;flex:1 1 auto;flex-direction:column}:host([loading]) .calcite-card-container *: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,.footer{display:flex;padding-inline:0.75rem;padding-block:0.75rem 0.25rem}.header{flex-direction:column}.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{padding:0.75rem;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3)}:host([selected]) .calcite-card-container{border-color:var(--calcite-color-brand)}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)}:host([selectable]) .header{padding-inline-end:2rem}slot[name=subtitle]::slotted(*),*::slotted([slot=subtitle]){margin:0px;margin-block-start:0.5rem;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{position:absolute;margin:0px;padding:0px;inset-block-start:0.5rem;inset-inline-end:0.5rem}.thumbnail-wrapper{display:flex}.calcite-card-container.inline{flex-direction:row}.calcite-card-container.inline>.container{inline-size:60%}.calcite-card-container.inline>.thumbnail-wrapper{inline-size:40%;align-items:flex-start}.calcite-card-container.inline slot[name=thumbnail]::slotted(img),.calcite-card-container.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}";
 
 const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
     constructor() {
@@ -59,142 +42,77 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
         this.__registerHost();
         this.__attachShadow();
         this.calciteCardSelect = createEvent(this, "calciteCardSelect", 6);
-        this.calciteInternalCardKeyEvent = createEvent(this, "calciteInternalCardKeyEvent", 6);
         //--------------------------------------------------------------------------
         //
         //  Private Methods
         //
         //--------------------------------------------------------------------------
-        this.handleDefaultSlotChange = (event) => {
-            this.hasContent = slotChangeHasAssignedElement(event);
+        this.cardSelectClick = () => {
+            this.selectCard();
         };
-        this.keyDownHandler = (event) => {
-            if (event.target === this.containerEl && !this.selectable && !this.disabled) {
-                if (isActivationKey(event.key) && this.selectionMode !== "none") {
-                    this.calciteCardSelect.emit();
-                    event.preventDefault();
-                }
-                else {
-                    switch (event.key) {
-                        case "ArrowRight":
-                        case "ArrowLeft":
-                        case "Home":
-                        case "End":
-                            this.calciteInternalCardKeyEvent.emit(event);
-                            event.preventDefault();
-                            break;
-                    }
-                }
-            }
-        };
-        this.cardBodyClickHandler = (event) => {
-            const isFromScreenReader = event.target === this.containerEl;
-            if (isFromScreenReader && !this.selectable && !this.disabled && this.selectionMode !== "none") {
-                this.calciteCardSelect.emit();
-            }
-        };
-        this.cardSelectKeyDownDeprecated = (event) => {
+        this.cardSelectKeyDown = (event) => {
             switch (event.key) {
                 case " ":
                 case "Enter":
-                    this.selectCardDeprecated();
+                    this.selectCard();
                     event.preventDefault();
                     break;
             }
         };
-        this.selectCardDeprecated = () => {
-            this.selected = !this.selected;
-            this.calciteCardSelect.emit();
-        };
-        this.cardSelectClick = (event) => {
-            if (!this.disabled) {
-                event.preventDefault();
-                this.calciteCardSelect.emit();
-                this.setFocus();
-            }
-        };
         this.loading = false;
-        this.thumbnailPosition = "block-start";
-        this.disabled = false;
-        this.label = undefined;
-        this.selectable = false;
         this.selected = false;
+        this.selectable = false;
+        this.thumbnailPosition = "block-start";
         this.messages = undefined;
-        this.selectionMode = "none";
         this.messageOverrides = undefined;
         this.effectiveLocale = undefined;
         this.defaultMessages = undefined;
-        this.hasContent = false;
     }
     onMessagesChange() {
         /* wired up by t9n util */
     }
-    //--------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    //--------------------------------------------------------------------------
-    /** Sets focus on the component. */
-    async setFocus() {
-        var _a;
-        await componentFocusable(this);
-        if (!this.disabled) {
-            (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    }
     // --------------------------------------------------------------------------
     //
     //  Lifecycle
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        connectInteractive(this);
+        connectConditionalSlotComponent(this);
         connectLocalized(this);
         connectMessages(this);
     }
-    componentDidLoad() {
-        setComponentLoaded(this);
-    }
-    componentDidRender() {
-        updateHostInteraction(this);
-    }
     disconnectedCallback() {
-        disconnectInteractive(this);
+        disconnectConditionalSlotComponent(this);
         disconnectLocalized(this);
         disconnectMessages(this);
     }
     async componentWillLoad() {
-        setUpLoadableComponent(this);
         await setUpMessages(this);
     }
+    render() {
+        const thumbnailInline = this.thumbnailPosition.startsWith("inline");
+        const thumbnailStart = this.thumbnailPosition.endsWith("start");
+        return (h("div", { class: { "calcite-card-container": true, inline: thumbnailInline } }, 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", { "aria-busy": toAriaBoolean(this.loading), class: { [CSS.container]: true } }, this.selectable ? this.renderCheckbox() : null, this.renderHeader(), h("div", { class: "card-content" }, h("slot", null)), this.renderFooter()), !thumbnailStart && this.renderThumbnail()));
+    }
     effectiveLocaleChange() {
         updateMessages(this, this.effectiveLocale);
     }
-    renderCheckboxDeprecated() {
-        return (h("calcite-label", { class: CSS.checkboxWrapperDeprecated }, h("calcite-checkbox", { checked: this.selected, label: this.messages.select, onClick: this.selectCardDeprecated, onKeyDown: this.cardSelectKeyDownDeprecated })));
+    selectCard() {
+        this.selected = !this.selected;
+        this.calciteCardSelect.emit();
     }
     renderThumbnail() {
         return getSlotted(this.el, SLOTS.thumbnail) ? (h("section", { class: CSS.thumbnailWrapper }, h("slot", { name: SLOTS.thumbnail }))) : null;
     }
-    renderSelectionIcon() {
-        const icon = this.selectionMode === "multiple" && this.selected
-            ? ICONS.selected
-            : this.selectionMode === "multiple"
-                ? ICONS.unselected
-                : this.selected
-                    ? ICONS.selectedSingle
-                    : ICONS.unselectedSingle;
-        return (h("div", { class: CSS.checkboxWrapper, onPointerDown: this.cardSelectClick, tabIndex: -1 }, h("calcite-icon", { icon: icon, scale: "s" })));
+    renderCheckbox() {
+        return (h("calcite-label", { class: CSS.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown }, h("calcite-checkbox", { checked: this.selected, label: this.messages.select })));
     }
     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 subtitle = getSlotted(el, SLOTS.subtitle);
+        const hasHeader = title || subtitle;
+        return hasHeader ? (h("header", { class: CSS.header }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.subtitle }))) : null;
     }
     renderFooter() {
         const { el } = this;
@@ -203,42 +121,22 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
         const hasFooter = startFooter || endFooter;
         return hasFooter ? (h("footer", { class: CSS.footer }, h("slot", { name: SLOTS.footerStart }), h("slot", { name: SLOTS.footerEnd }))) : null;
     }
-    render() {
-        const thumbnailInline = this.thumbnailPosition.startsWith("inline");
-        const thumbnailStart = this.thumbnailPosition.endsWith("start");
-        const role = this.selectionMode === "multiple"
-            ? "checkbox"
-            : this.selectionMode !== "none"
-                ? "radio"
-                : undefined;
-        return (h(Host, { key: '8fa8f2d7e3ff03d01d746fd00236958a910cc60b' }, h(InteractiveContainer, { key: 'f1a65dcd2389a060c9de2ab0d9ee9b4ab23609f9', disabled: this.disabled }, h("div", { key: '093dc24588252efa9ce7f58cbd6791f9010ab9b9', "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, role: role, tabIndex: !this.selectable || this.disabled ? 0 : -1,
-            // eslint-disable-next-line react/jsx-sort-props
-            ref: (el) => (this.containerEl = el) }, 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: 'efe0f6b35e6e4ed6ceacd4e9d0e7879e9527e331', "aria-busy": toAriaBoolean(this.loading), class: { [CSS.container]: true } }, this.renderHeader(), h("div", { key: 'd74667dc72d6320d3d97ff6b386f1659d53174f5', class: {
-                [CSS.cardContent]: true,
-                [CSS.hasSlottedContent]: this.hasContent,
-            } }, h("slot", { key: 'dbcd8cb5f7979f33a93810dd38124b10c8174b43', onSlotchange: this.handleDefaultSlotChange })), this.renderFooter()), !thumbnailStart && this.renderThumbnail()))));
-    }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
     static get watchers() { return {
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
-    static get style() { return CalciteCardStyle0; }
+    static get style() { return cardCss; }
 }, [1, "calcite-card", {
         "loading": [516],
-        "thumbnailPosition": [513, "thumbnail-position"],
-        "disabled": [516],
-        "label": [1],
-        "selectable": [516],
         "selected": [1540],
+        "selectable": [516],
+        "thumbnailPosition": [513, "thumbnail-position"],
         "messages": [1040],
-        "selectionMode": [1, "selection-mode"],
         "messageOverrides": [1040],
         "effectiveLocale": [32],
-        "defaultMessages": [32],
-        "hasContent": [32],
-        "setFocus": [64]
+        "defaultMessages": [32]
     }, undefined, {
         "messageOverrides": ["onMessagesChange"],
         "effectiveLocale": ["effectiveLocaleChange"]
@@ -247,7 +145,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["calcite-card", "calcite-checkbox", "calcite-icon", "calcite-label", "calcite-loader"];
+    const components = ["calcite-card", "calcite-checkbox", "calcite-label", "calcite-loader"];
     components.forEach(tagName => { switch (tagName) {
         case "calcite-card":
             if (!customElements.get(tagName)) {
@@ -255,11 +153,6 @@ function defineCustomElement$1() {
             }
             break;
         case "calcite-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "calcite-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

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

@@ -4,12 +4,12 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { h as slotChangeGetAssignedElements, x as focusElementInGroup, t as toAriaBoolean } from './dom.js';
+import { w 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 { c as createObserver } from './observers.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}";
-const CalciteChipGroupStyle0 = chipGroupCss;
 
 const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLElement {
     constructor() {
@@ -17,6 +17,7 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
         this.__registerHost();
         this.__attachShadow();
         this.calciteChipGroupSelect = createEvent(this, "calciteChipGroupSelect", 6);
+        this.mutationObserver = createObserver("mutation", () => this.updateItems());
         this.items = [];
         //--------------------------------------------------------------------------
         //
@@ -24,28 +25,18 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
         //
         //--------------------------------------------------------------------------
         this.updateItems = (event) => {
-            var _a, _b, _c;
-            const itemsFromSlot = (_a = this.slotRefEl) === null || _a === void 0 ? void 0 : _a.assignedElements({ flatten: true }).filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-chip"));
-            this.items = !event
-                ? itemsFromSlot
-                : slotChangeGetAssignedElements(event);
-            if (((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) < 1) {
-                return;
-            }
-            (_c = this.items) === null || _c === void 0 ? void 0 : _c.forEach((el) => {
+            var _a;
+            const target = event ? event.target : this.slotRefEl;
+            this.items = target === null || target === void 0 ? void 0 : target.assignedElements({ flatten: true }).filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-chip"));
+            (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach((el) => {
                 el.interactive = true;
                 el.scale = this.scale;
                 el.selectionMode = this.selectionMode;
-                el.parentChipGroup = this.el;
             });
             this.setSelectedItems(false);
         };
-        this.updateSelectedItems = () => {
-            var _a;
-            this.selectedItems = (_a = this.items) === null || _a === void 0 ? void 0 : _a.filter((el) => el.selected);
-        };
         this.setSelectedItems = (emit, elToMatch) => {
-            var _a;
+            var _a, _b;
             if (elToMatch) {
                 (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach((el) => {
                     const matchingEl = elToMatch === el;
@@ -64,7 +55,7 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
                     }
                 });
             }
-            this.updateSelectedItems();
+            this.selectedItems = (_b = this.items) === null || _b === void 0 ? void 0 : _b.filter((el) => el.selected);
             if (emit) {
                 this.calciteChipGroupSelect.emit();
             }
@@ -84,7 +75,9 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
     //
     //--------------------------------------------------------------------------
     connectedCallback() {
+        var _a;
         connectInteractive(this);
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     }
     componentDidRender() {
         disconnectInteractive(this);
@@ -93,6 +86,10 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
     componentDidLoad() {
         setComponentLoaded(this);
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     async componentWillLoad() {
         setUpLoadableComponent(this);
     }
@@ -120,7 +117,6 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
                     break;
             }
         }
-        event.stopPropagation();
     }
     calciteChipCloseListener(event) {
         var _a, _b, _c, _d;
@@ -137,28 +133,11 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
             }
         }
         this.items = (_d = this.items) === null || _d === void 0 ? void 0 : _d.filter((el) => el !== item);
-        event.stopPropagation();
     }
     calciteChipSelectListener(event) {
         if (event.composedPath().includes(this.el)) {
             this.setSelectedItems(true, event.target);
         }
-        event.stopPropagation();
-    }
-    calciteInternalChipSelectListener(event) {
-        if (event.composedPath().includes(this.el)) {
-            this.setSelectedItems(false, event.target);
-        }
-        event.stopPropagation();
-    }
-    calciteInternalSyncSelectedChips(event) {
-        if (event.composedPath().includes(this.el)) {
-            this.updateSelectedItems();
-            if (this.selectionMode === "single" && this.selectedItems.length > 1) {
-                this.setSelectedItems(false, event.target);
-            }
-        }
-        event.stopPropagation();
     }
     // --------------------------------------------------------------------------
     //
@@ -183,15 +162,13 @@ 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: '9611ab9bbadf169969834f1e39a29b79ad7ca68b', onSlotchange: this.updateItems,
-            // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
-            ref: (el) => (this.slotRefEl = el) }))));
+        return (h(InteractiveContainer, { disabled: disabled }, h("div", { "aria-disabled": toAriaBoolean(disabled), "aria-label": this.label, class: "container", role: role }, h("slot", { onSlotchange: this.updateItems, ref: (el) => (this.slotRefEl = el) }))));
     }
     get el() { return this; }
     static get watchers() { return {
         "selectionMode": ["onSelectionModeChange"]
     }; }
-    static get style() { return CalciteChipGroupStyle0; }
+    static get style() { return chipGroupCss; }
 }, [1, "calcite-chip-group", {
         "disabled": [516],
         "label": [1],
@@ -199,7 +176,7 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
         "selectionMode": [513, "selection-mode"],
         "selectedItems": [1040],
         "setFocus": [64]
-    }, [[0, "calciteInternalChipKeyEvent", "calciteInternalChipKeyEventListener"], [0, "calciteChipClose", "calciteChipCloseListener"], [0, "calciteChipSelect", "calciteChipSelectListener"], [0, "calciteInternalChipSelect", "calciteInternalChipSelectListener"], [0, "calciteInternalSyncSelectedChips", "calciteInternalSyncSelectedChips"]], {
+    }, [[0, "calciteInternalChipKeyEvent", "calciteInternalChipKeyEventListener"], [0, "calciteChipClose", "calciteChipCloseListener"], [0, "calciteChipSelect", "calciteChipSelectListener"]], {
         "selectionMode": ["onSelectionModeChange"]
     }]);
 function defineCustomElement$1() {