@pine-ds/core 4.5.0 → 4.6.0

package/dist/collection/components/pds-tabs/pds-tab/pds-tab.js

@@ -1,10 +1,12 @@
 import { Fragment, Host, h } from "@stencil/core";
+import { HostStylingKeeper } from "../../../utils/attributes";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
 /**
  * @lightDom renders-markup
  */
 export class PdsTab {
     constructor() {
+        this.hostKeeper = new HostStylingKeeper();
         /**
          * Determines the tab's disabled state.
          * @defaultValue false
@@ -23,6 +25,12 @@ export class PdsTab {
         /** @internal */
         this.selected = false;
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
     // Unwraps a nested <a>/<button> left by a page-cache (Turbo, bfcache) reconnect.
     componentDidRender() {
         unwrapReconnectedContent(this.el.querySelector('.pds-tab__content'), 'a.pds-tab, button.pds-tab', '.pds-tab__content');
@@ -58,6 +66,9 @@ export class PdsTab {
         return classes.filter(Boolean).join(' ');
     }
     render() {
+        // The docs show consumers omitting `slot`, so server HTML doesn't carry it — a DOM morph
+        // that strips it leaves this tab unslotted, and pds-tabs has no default slot. Put it back.
+        this.hostKeeper.record('', {}, { slot: 'tabs' });
         const availabilityTabEdgeInlineStart = (h("span", { class: "pds-tab-edge", role: "presentation" }));
         const availabilityTabEdgeInlineEnd = (h("span", { class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
         const content = (h(Fragment, null, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { class: "pds-tab__content" }, h("slot", null))));

package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js

@@ -1,10 +1,12 @@
 import { Host, h } from "@stencil/core";
+import { HostStylingKeeper } from "../../../utils/attributes";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
 /**
  * @lightDom renders-markup
  */
 export class PdsTabpanel {
     constructor() {
+        this.hostKeeper = new HostStylingKeeper();
         /**
          * Keeps track of the tabpanel selected state, this property is passed by parent component
          */
@@ -16,12 +18,22 @@ export class PdsTabpanel {
         /** @internal */
         this.stretch = false;
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
     // Unwraps a nested .pds-tabpanel left by a page-cache (Turbo, bfcache) reconnect.
     componentDidRender() {
         unwrapReconnectedContent(this.el.querySelector('.pds-tabpanel'), '.pds-tabpanel');
     }
     render() {
-        return (h(Host, { key: '87b00d828c9cddbcccd5d6e89dab7541a3c5c839', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, h("div", { key: 'd7058a727d010351c73b5287f45991d48ef71151', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: '97861fcd8432206a1115135fad919d75dc327112' }))));
+        const hostClass = this.stretch && this.selected ? "pds-tabpanel--stretch-active" : "";
+        // The docs show consumers omitting `slot`, so server HTML doesn't carry it — a DOM morph
+        // that strips it (and the stretch-active class) leaves this panel unslotted. Put both back.
+        this.hostKeeper.record(hostClass, {}, { slot: 'tabpanels' });
+        return (h(Host, { key: '5d867e31d0f5f14e18f1c81035991c90bb5fe529', slot: "tabpanels", class: hostClass || undefined }, h("div", { key: '255d37a73089904cfb170cd89f7b829756f6295f', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: '714d3d0cf0fc6173e243a2b077d9b9918ae4acf9' }))));
     }
     static get is() { return "pds-tabpanel"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-tabs/pds-tabs.js

@@ -8,6 +8,35 @@ import { HostStylingKeeper } from "../../utils/attributes";
 export class PdsTabs {
     constructor() {
         this.hostKeeper = new HostStylingKeeper();
+        this.slotChangeScheduled = false;
+        // The tab that most recently had focus, tracked continuously via `focusin` rather
+        // than sampled inside handleSlotChange: removing a focused element blurs it to
+        // <body> synchronously, but slotchange only fires later (a microtask checkpoint),
+        // by which point the sample would already read <body>.
+        this.lastFocusedTab = null;
+        this.handleFocusIn = (event) => {
+            var _a;
+            const tab = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('pds-tab');
+            if (tab && tab.closest('pds-tabs') === this.el) {
+                this.lastFocusedTab = tab;
+            }
+        };
+        // Focus that leaves a tab forgets it, so replacing the tab later doesn't pull focus back,
+        // including focus that moves into a panel. Focus moving to another tab is tracked again
+        // by focusin, which follows focusout. Removing a focused tab also fires focusout (with no
+        // relatedTarget), while the tab is still connected, so that case is checked a microtask
+        // later: a tab that's gone by then was removed, and is kept so its focus can be restored.
+        this.handleFocusOut = (event) => {
+            const tab = this.lastFocusedTab;
+            if (event.relatedTarget) {
+                this.lastFocusedTab = null;
+                return;
+            }
+            queueMicrotask(() => {
+                if (this.lastFocusedTab === tab && (tab === null || tab === void 0 ? void 0 : tab.isConnected))
+                    this.lastFocusedTab = null;
+            });
+        };
         /**
          * Adds a divider rule beneath the tab list.
          * @defaultValue false
@@ -27,12 +56,44 @@ export class PdsTabs {
          * @defaultValue false
          */
         this.nav = false;
+        // The tabs and tabpanels slots fire slotchange separately, even for the same morph
+        // (both swapped together). Coalesce same-tick firings into one re-collection pass
+        // with a microtask, the way a single DOM mutation already only triggers one event.
+        this.handleSlotChange = () => {
+            if (this.slotChangeScheduled)
+                return;
+            this.slotChangeScheduled = true;
+            this.activeTabNameBeforeSlotChange = this.activeTabName;
+            queueMicrotask(() => {
+                this.slotChangeScheduled = false;
+                this.recollectAfterSlotChange();
+            });
+        };
     }
     connectedCallback() {
         this.hostKeeper.connect(this.el);
+        this.el.addEventListener('focusin', this.handleFocusIn);
+        this.el.addEventListener('focusout', this.handleFocusOut);
+        // componentDidLoad only runs once, so a reconnect (the element moved in the DOM) re-attaches
+        // the slotchange listeners disconnectedCallback removed. Before the first render the slots
+        // don't exist yet, so this is a no-op and componentDidLoad attaches them.
+        const isReconnect = this.tabsSlot != null;
+        this.setupSlotChangeListeners();
+        // Content can change while detached, with no listener to see it — re-collect now
+        // instead of waiting on a slotchange that may never come if nothing changes again.
+        if (isReconnect)
+            this.handleSlotChange();
     }
     disconnectedCallback() {
+        var _a, _b;
         this.hostKeeper.disconnect();
+        this.el.removeEventListener('focusin', this.handleFocusIn);
+        this.el.removeEventListener('focusout', this.handleFocusOut);
+        (_a = this.tabsSlot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
+        (_b = this.tabPanelsSlot) === null || _b === void 0 ? void 0 : _b.removeEventListener('slotchange', this.handleSlotChange);
+    }
+    componentDidLoad() {
+        this.setupSlotChangeListeners();
     }
     tabClickHandler(event) {
         if (this.componentId === event.detail[1]) {
@@ -60,8 +121,8 @@ export class PdsTabs {
     // Navigation mode is an explicit, single source of truth: `nav` drives both the
     // container (<nav> of links vs role=tablist of buttons) and every child tab (via
     // `navMode`), so the tabs present when the strip initializes can't mix the two.
-    // (Child discovery is load-time only, like `variant`/`id`; tabs added after load
-    // aren't managed.)
+    // Unlike child discovery (re-run on slotchange), `nav` itself isn't watched — it's
+    // a load-time mode switch, not something a consumer is expected to toggle live.
     get isNav() {
         return !!this.nav;
     }
@@ -114,9 +175,52 @@ export class PdsTabs {
         this.tabs = allTabs.filter(tab => tab.closest('pds-tabs') === this.el);
         this.tabPanels = allTabPanels.filter(panel => panel.closest('pds-tabs') === this.el);
     }
+    // The initial collection (componentWillLoad) only sees tabs/panels present at load.
+    // A tab or panel added, removed or replaced afterwards — including by a DOM morph
+    // swapping in a fresh copy — needs to be re-collected the same way pds-dropdown-menu,
+    // pds-select and pds-multiselect already do for their own slotted content.
+    setupSlotChangeListeners() {
+        var _a, _b, _c, _d;
+        this.tabsSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="tabs"]');
+        this.tabPanelsSlot = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="tabpanels"]');
+        (_c = this.tabsSlot) === null || _c === void 0 ? void 0 : _c.addEventListener('slotchange', this.handleSlotChange);
+        (_d = this.tabPanelsSlot) === null || _d === void 0 ? void 0 : _d.addEventListener('slotchange', this.handleSlotChange);
+    }
+    recollectAfterSlotChange() {
+        const previousActiveTabName = this.activeTabNameBeforeSlotChange;
+        // A removed node stays referenced but disconnected — checked before
+        // findAllChildren() re-collects, since that doesn't affect this either way.
+        const focusedTabWasRemoved = !this.isNav && this.lastFocusedTab != null && !this.lastFocusedTab.isConnected;
+        this.findAllChildren();
+        this.warnOnNavConfig();
+        // Keep the current selection if it still exists. Otherwise clear it so
+        // passPropsToChildren() falls back to the first enabled tab, the same way
+        // it does when a consumer never set activeTabName in the first place.
+        if (previousActiveTabName != null && !this.tabs.some((tab) => tab.name === previousActiveTabName)) {
+            this.activeTabName = undefined;
+        }
+        this.passPropsToChildren();
+        // If the tab that last had focus was removed (e.g. replaced by a fresh copy),
+        // the browser already silently dropped focus to <body> — restore it to the new
+        // active tab's button so keyboard/screen-reader users don't lose their place.
+        // Deferred a frame since a freshly-created pds-tab's button doesn't exist until
+        // its own render completes; re-checked then in case focus moved on its own, to
+        // the tabs or anywhere else — only focus the removal dropped to <body> is restored.
+        if (focusedTabWasRemoved) {
+            this.lastFocusedTab = null;
+            requestAnimationFrame(() => {
+                var _a;
+                const active = document.activeElement;
+                if (active && active !== document.body)
+                    return;
+                const newActiveTab = this.tabs.find((tab) => tab.name === this.activeTabName);
+                (_a = newActiveTab === null || newActiveTab === void 0 ? void 0 : newActiveTab.querySelector('button')) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+    }
     propGeneration(child, index = 0) {
         child.parentComponentId = this.componentId.toString();
-        child.variant = this.variant.toString();
+        child.variant = this.variant;
         child.selected = (this.activeTabName === child.name) ? true : false;
         child['index'] = index;
     }
@@ -172,7 +276,7 @@ export class PdsTabs {
         // Only the classes: `active-tab-name` backs the mutable activeTabName prop, so a morph that drops
         // it is a prop change, not a strip.
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: 'ea26bc4e4cadd4621511afa01ca2a353a053fd0e', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, h("slot", { key: '3f920708c647920af3d0d50f74b5409d30d70af8', name: "tabpanels" })));
+        return (h(Host, { key: '91a9a5cf4348b73ef5ec21430db20468fb67906c', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, h("slot", { key: 'f0ec002e513f3e91956e905c23e35dae0e6328ad', name: "tabpanels" })));
     }
     static get is() { return "pds-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -234,11 +338,11 @@ export class PdsTabs {
                     "resolved": "\"availability\" | \"filter\" | \"pill\" | \"primary\"",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Sets tabs variant styles as outlined in Figma documentation"
+                    "text": "Sets tabs variant styles as outlined in Figma documentation.\nApplies in both panel and nav mode; omitting it renders the primary style."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/pds-text/pds-text.js

@@ -83,7 +83,7 @@ export class PdsText {
             ? `pds-text--decoration-${this.decoration}`
             : ''}
     `;
-        return (h(Tag, { key: '98269ec5b06387f89026a4f1327688c611b25a46', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: '73b6169bdd25a73930d1a01db3a0b5359491ab67' })));
+        return (h(Tag, { key: '6ae89af63963745cd4e8fa734a62f37bc27c59ac', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: '008f5852aeb4b43cff1a2fea9be9d8fbba9f7934' })));
     }
     static get is() { return "pds-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-textarea/pds-textarea.js

@@ -306,10 +306,10 @@ export class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: '2544624ceb5a51981954b76eb7a96f8bf0a258b5', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'e85e356a15dd11bbea276b122e67da23342e6ceb', class: "pds-textarea" }, this.label &&
-            h("div", { key: '452e96073c2045c2cb2dfa0c9ef7f7102096ab51', class: "pds-textarea__label-wrapper" }, h("label", { key: '84f88bb8211120801cab8b0d7a4915a128fadbfb', htmlFor: this.componentId }, h("span", { key: '43038785de0cb8c833ccd546a00bfc8879c94ecb', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '868a11635731026168c1ff75d81121ddb96ab7a6', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '80cb7da264045aba177d20f18df31b274afbf485', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
-            h("p", { key: '493b4378b668a96c7c66cbf2435f9c9d06bd0a72', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: 'ae6826d389a2a92fbff8de62a0fd55811764eb15', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'e3dd638311ee2617c8b8ae5743b4e87e5a773ebd', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: '5933dab0c3cd25b1cf2f6851ece8e8064bc7f3b9', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '4f1752514d8e5b0f0e3439515cb9e5f043607da1', class: "pds-textarea" }, this.label &&
+            h("div", { key: 'd4e6df0b381d781b70eeae72ff2f0e9428c0d901', class: "pds-textarea__label-wrapper" }, h("label", { key: '747d82067eb571d02840cfd981865821099f288b', htmlFor: this.componentId }, h("span", { key: 'bfab6e8ede66d0169dd020b7dd97e125aba417b0', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: 'a18611c03270e7491c1af69f931419c832192c06', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '868382c7b04a4e59c0daa9d98afcdc9048f6224f', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
+            h("p", { key: 'dcb36f21443d2a782c25b7c29c4ce6215f3b212b', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: 'be30fb1a38453296e26b775955389c0ec569df67', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'd93dce10d9d9db5815ac5f331848940aed735ba0', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-toast/pds-toast.js

@@ -121,13 +121,13 @@ export class PdsToast {
         return this.icon && h("pds-icon", { name: this.icon, class: "pds-toast__icon" });
     }
     render() {
-        return (h(Host, { key: '250f871e3dfe412a11e8fe4c0e43c5ef7d886e9b', hidden: !this.isVisible }, h("div", { key: '8c9d995cd597544a3c6ded08d18e09ff4619b364', class: {
+        return (h(Host, { key: '754a4583cefca47a3d3fea7dab036c06ea8aabcd', hidden: !this.isVisible }, h("div", { key: '8ac294344ca459202c0883e724e09a4218342cc4', class: {
                 'pds-toast': true,
                 [`pds-toast--${this.type}`]: this.type !== 'default',
                 'pds-toast--animating-out': this.isAnimatingOut
-            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: '83c4cad9b619ca0ad77721b7472e240719459290', class: "pds-toast__message" }, h("slot", { key: 'c2420b955c89eb8e32dd4a1aa8d89bbbbf1b9ca9' })), this.dismissible && (h("button", { key: '940bb9f1d235d7c31a334bec9aefdfdbd1c5ccfd', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: 'eaf615d41c138e2c73088d29bac9349f49a63ba7', class: "pds-toast__message" }, h("slot", { key: '33973447154d80b016f5a7954b0473db03228379' })), this.dismissible && (h("button", { key: 'e189834633e1e648282ee43633fd05e53ce38869', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": this.dismissLabel }, h("pds-icon", { key: 'f6b68f4cf9df23b367ade351dd4f00fc6f6e6442', name: "remove" }))))));
+            }, "aria-label": this.dismissLabel }, h("pds-icon", { key: '623a0e4d56e30781fb31bcd085511c17a4777edc', name: "remove" }))))));
     }
     static get is() { return "pds-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-tooltip/pds-tooltip.js

@@ -343,9 +343,9 @@ export class PdsTooltip {
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (h(Host, { key: 'e80abb11248d9bf6aec1ae738c61692594975630', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '9ff484925a1792302eee230a5c37a0268d536935', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+        return (h(Host, { key: '2e28dff93cd22fd3816d71b67e38883061a8b2bc', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '9e7ea50427587f61dcea1ea97e10d71f4d0c9d92', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
             /* focusin/out bubble; ensure keyboard users see tooltips */
-            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: '738c314a816e82fd81a0c0e9895d51af45b75eb2' })), h("div", { key: '5b0477cd433cae0b53c4d5ce5767dc703be28ee0', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '51ad497357c1d1547bba69d07fd7fa1b675c021f', name: "content" }))));
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: '08c1ff63c91b97b4df1362eb9b2e42b6fd556b11' })), h("div", { key: '5cfe25e21d1f096b76335570fbb930a7bc8c95f8', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: 'e7e8728d7c8a0c74933cef070aa38f88a1f53a32', name: "content" }))));
     }
     static get is() { return "pds-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/utils/attributes.js

@@ -1,4 +1,4 @@
-import { classNamesOf, isStencilClass } from "./keep-hydrated";
+import { classNamesOf, HOST_RESTORE, limitRestores, stencilClassesOf } from "./keep-hydrated";
 /**
  * Sets each attribute whose current value differs, and leaves the rest alone. A `MutationObserver`
  * that calls this to restore attributes sees its own writes once and then settles, so it can't loop.
@@ -6,10 +6,14 @@ import { classNamesOf, isStencilClass } from "./keep-hydrated";
  * @param attributes - Attribute names and the values they should have
  */
 export const setAttributesIfChanged = (el, attributes) => {
+    let wrote = false;
     Object.entries(attributes).forEach(([name, value]) => {
-        if (el.getAttribute(name) !== value)
+        if (el.getAttribute(name) !== value) {
             el.setAttribute(name, value);
+            wrote = true;
+        }
     });
+    return wrote;
 };
 /**
  * Puts back any of `expected`'s classes or style properties that are missing from `el`. It only
@@ -22,10 +26,9 @@ export const restoreHostStyling = (el, { classes, styles }) => {
     const missing = classes.filter((name) => !el.classList.contains(name));
     if (missing.length > 0)
         el.classList.add(...missing);
-    Object.entries(styles).forEach(([name, value]) => {
-        if (value && el.style.getPropertyValue(name) === '')
-            el.style.setProperty(name, value);
-    });
+    const missingStyles = Object.entries(styles).filter(([name, value]) => value && el.style.getPropertyValue(name) === '');
+    missingStyles.forEach(([name, value]) => el.style.setProperty(name, value));
+    return missing.length > 0 || missingStyles.length > 0;
 };
 /**
  * Watches a component's own host and puts back what it rendered when something strips it. A DOM
@@ -42,16 +45,18 @@ export const restoreHostStyling = (el, { classes, styles }) => {
 const keepHostStyling = (el, expected) => {
     if (typeof MutationObserver === 'undefined')
         return null;
-    const observer = new MutationObserver((records) => {
+    const tag = el.tagName.toLowerCase();
+    const seenStencilClasses = new Set();
+    const observer = new MutationObserver(limitRestores((records) => {
         const styling = expected();
         // A strip takes Stencil's own classes too: without `hydrated` Stencil hides the component, and
         // without its scope classes a scoped component's CSS stops matching. Put back only the ones that
         // were there, so this never runs ahead of Stencil. `keepPineHydrated` does the same for every
         // component, but the custom-elements build only runs it if the consumer calls it, so keep this.
         const stencilClasses = records
-            .filter((record) => record.attributeName === 'class' && record.oldValue != null)
-            .flatMap((record) => classNamesOf(record.oldValue).filter((name) => isStencilClass(el, name)));
-        restoreHostStyling(el, Object.assign(Object.assign({}, styling), { classes: [...styling.classes, ...stencilClasses] }));
+            .filter((record) => record.attributeName === 'class')
+            .flatMap((record) => stencilClassesOf(seenStencilClasses, el, record.oldValue));
+        let wrote = restoreHostStyling(el, Object.assign(Object.assign({}, styling), { classes: [...styling.classes, ...stencilClasses] }));
         // An attribute the component still renders comes back with the value it had, which is what
         // Stencil wrote (a boolean `true` lands as an empty value). One it stopped rendering stays
         // removed, since that was Stencil's own write.
@@ -61,8 +66,10 @@ const keepHostStyling = (el, expected) => {
             if (oldValue == null || rendered == null || rendered === false || el.hasAttribute(name))
                 return;
             el.setAttribute(name, oldValue);
+            wrote = true;
         });
-    });
+        return wrote;
+    }, `${tag}: stopped restoring its host, as another script keeps changing it. Use props instead.`, el, HOST_RESTORE));
     observer.observe(el, { attributes: true, attributeOldValue: true });
     return observer;
 };

package/dist/collection/utils/css.js

@@ -0,0 +1,41 @@
+/**
+ * Escapes a string so it's safe to interpolate into a CSS identifier (an id selector like `#${id}`)
+ * or into CSS text (a stylesheet rule referencing that id). Equivalent to the native `CSS.escape`,
+ * reimplemented because Stencil's unit-test DOM (`newSpecPage`'s mock-doc) doesn't provide it.
+ * @param value - The string to escape, e.g. a consumer-supplied id
+ */
+export const cssEscape = (value) => {
+    const string = String(value);
+    const length = string.length;
+    const firstCodeUnit = string.charCodeAt(0);
+    let result = '';
+    for (let index = 0; index < length; index++) {
+        const codeUnit = string.charCodeAt(index);
+        if (codeUnit === 0x0000) {
+            result += '�';
+            continue;
+        }
+        if ((codeUnit >= 0x0001 && codeUnit <= 0x001f) ||
+            codeUnit === 0x007f ||
+            (index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+            (index === 1 && codeUnit >= 0x0030 && codeUnit <= 0x0039 && firstCodeUnit === 0x002d)) {
+            result += `\\${codeUnit.toString(16)} `;
+            continue;
+        }
+        if (index === 0 && length === 1 && codeUnit === 0x002d) {
+            result += `\\${string.charAt(index)}`;
+            continue;
+        }
+        if (codeUnit >= 0x0080 ||
+            codeUnit === 0x002d ||
+            codeUnit === 0x005f ||
+            (codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+            (codeUnit >= 0x0041 && codeUnit <= 0x005a) ||
+            (codeUnit >= 0x0061 && codeUnit <= 0x007a)) {
+            result += string.charAt(index);
+            continue;
+        }
+        result += `\\${string.charAt(index)}`;
+    }
+    return result;
+};

package/dist/collection/utils/keep-hydrated.js

@@ -16,6 +16,109 @@ export const isStencilClass = (el, name) => {
 export const classNamesOf = (classes) => typeof classes === 'string'
     ? classes.split(/\s+/).filter(Boolean)
     : Object.keys(classes).filter((name) => classes[name]);
+// Each restore that writes something counts. A real strip costs one, but a script that undoes the
+// restore as soon as it lands (from a MutationObserver) keeps both going forever, all in
+// microtasks, so the page never renders or takes input. More writes than this before the next task
+// means that kind of fight. A script that undoes it from a timer or animation frame gets a fresh
+// budget each task; the page stays responsive then, so that fight isn't capped.
+const MAX_RESTORES_PER_TASK = 5;
+// Callbacks waiting for the next task, all run by one message. A MessageChannel message isn't slowed
+// down like a timer is in a background tab (or frozen by test fake timers); a timer is the fallback
+// where it's missing. One message for all of them, so a morph that strips many hosts doesn't open a
+// channel for each.
+const nextTaskCallbacks = new Set();
+const runNextTaskCallbacks = () => {
+    const callbacks = Array.from(nextTaskCallbacks);
+    nextTaskCallbacks.clear();
+    callbacks.forEach((callback) => callback());
+};
+const onNextTask = (callback) => {
+    nextTaskCallbacks.add(callback);
+    if (nextTaskCallbacks.size > 1)
+        return;
+    if (typeof MessageChannel === 'undefined') {
+        setTimeout(runNextTaskCallbacks);
+        return;
+    }
+    const channel = new MessageChannel();
+    channel.port1.onmessage = () => {
+        channel.port1.close();
+        runNextTaskCallbacks();
+    };
+    channel.port2.postMessage(null);
+};
+/**
+ * The restore kind for a host's own classes, styles and attributes, shared by a component's own
+ * host restore and `keepPineHydrated`: one fight on a host's classes stops both, and warns once.
+ */
+export const HOST_RESTORE = 'host';
+/**
+ * Remembers the Stencil classes an element has had, and returns all of them. A restore can't read
+ * them from the latest mutation alone: after a script's last strip they're gone from its old value
+ * too, and the next change would restore nothing.
+ */
+export const stencilClassesOf = (seen, el, oldValue) => {
+    [...classNamesOf(oldValue !== null && oldValue !== void 0 ? oldValue : ''), ...Array.from(el.classList)]
+        .filter((name) => isStencilClass(el, name))
+        .forEach((name) => seen.add(name));
+    return Array.from(seen);
+};
+// What each element has already been warned about, by kind of restore. A host with its own restore
+// is also watched for its Stencil classes, so one fight on its classes stops both and needs one
+// warning; a fight over a trigger's ARIA is a different kind, and warns on its own. On the global
+// object, like `OBSERVER` below, so two copies of Pine on a page share it.
+const WARNED = Symbol.for('@pine-ds/core/restoreWarnings');
+const warnedKinds = () => {
+    var _a;
+    const store = globalThis;
+    return ((_a = store[WARNED]) !== null && _a !== void 0 ? _a : (store[WARNED] = new WeakMap()));
+};
+/** Whether `el` was already warned about for `kind`; records it if not. */
+const alreadyWarned = (el, kind) => {
+    var _a;
+    const kinds = (_a = warnedKinds().get(el)) !== null && _a !== void 0 ? _a : new Set();
+    warnedKinds().set(el, kinds);
+    if (kinds.has(kind))
+        return true;
+    kinds.add(kind);
+    return false;
+};
+/**
+ * Wraps a restore callback, which returns whether it wrote anything, so that it writes at most
+ * `MAX_RESTORES_PER_TASK` times before the next task (until the message posted after its first write
+ * runs). Past that, another script is undoing every restore as soon as it lands, so it stops and
+ * lets that script win rather than hang the page. What that script left stays until something
+ * changes the element again: the count resets on the next task, so a later change is restored, but
+ * nothing is restored on its own. The first give-up warns, logging `el` so it can be found in
+ * devtools; later ones, and other restores of the same `kind` giving up on the same element, are
+ * silent.
+ * @param restore - Puts back what something removed; returns `true` if it wrote anything
+ * @param warning - What the console warning says was given up
+ * @param el - The element being restored, logged with the warning
+ * @param kind - What's being restored; one warning per element for each kind
+ */
+export const limitRestores = (restore, warning, el, kind = warning) => {
+    let writes = 0;
+    let warned = false;
+    return (...args) => {
+        if (writes >= MAX_RESTORES_PER_TASK) {
+            if (!warned) {
+                warned = true;
+                if (el && alreadyWarned(el, kind))
+                    return;
+                // The warning as an argument, not the format string: it carries the tag name, which the HTML
+                // parser lets contain `%`.
+                console.warn('%s', warning, el);
+            }
+            return;
+        }
+        if (!restore(...args))
+            return;
+        if (writes === 0)
+            onNextTask(() => (writes = 0));
+        writes += 1;
+    };
+};
 // On the global object, not in this module, so a page with two copies of Pine (the CDN build and a
 // bundled `@pine-ds/react`) still has one observer.
 const OBSERVER = Symbol.for('@pine-ds/core/keepPineHydrated');
@@ -26,8 +129,9 @@ const OBSERVER = Symbol.for('@pine-ds/core/keepPineHydrated');
  * host restore of their own. It only restores classes the element had, so it never runs ahead of
  * Stencil. It can't see inside shadow roots, which a morph doesn't reach either.
  *
- * A script that removes `hydrated` on purpose sees it come back, and one that removes it every time it
- * appears never settles: don't strip Pine's classes from a `MutationObserver`.
+ * A script that removes `hydrated` on purpose sees it come back. One that removes it every time it
+ * appears (from a `MutationObserver`, say) wins after a few rounds, and the component logs a console
+ * warning. The component then stays hidden, as that script left it, until its class changes again.
  *
  * Pine's global script calls this, so the CDN and `dist` builds get it on load. The custom-elements
  * build (`@pine-ds/core/components/*`, `@pine-ds/react`) has no global script: call it once yourself.
@@ -40,14 +144,37 @@ export const keepPineHydrated = () => {
     const store = globalThis;
     if (store[OBSERVER])
         return;
+    // One capped restore per element, so a script fighting one component doesn't stop the others,
+    // and the Stencil classes each one has had.
+    const restores = new WeakMap();
+    const seen = new WeakMap();
+    const restoreFor = (el) => {
+        let restore = restores.get(el);
+        if (!restore) {
+            restore = limitRestores((names) => {
+                const missing = names.filter((name) => !el.classList.contains(name));
+                if (missing.length > 0)
+                    el.classList.add(...missing);
+                return missing.length > 0;
+            }, `${el.localName}: stopped putting back its hydrated and scope classes, as another script keeps removing them.`, el, HOST_RESTORE);
+            restores.set(el, restore);
+        }
+        return restore;
+    };
     const observer = new MutationObserver((records) => {
         records.forEach(({ target, oldValue }) => {
             const el = target;
-            if (oldValue == null || !el.localName.startsWith('pds-'))
+            if (!el.localName.startsWith('pds-'))
+                return;
+            // No old value is a `class` being added. Stencil's first `hydrated` arrives that way, which
+            // needs nothing; for an element already seen, it's the class coming back after a removal.
+            if (oldValue == null && !seen.has(el))
                 return;
-            const missing = classNamesOf(oldValue).filter((name) => isStencilClass(el, name) && !el.classList.contains(name));
-            if (missing.length > 0)
-                el.classList.add(...missing);
+            if (!seen.has(el))
+                seen.set(el, new Set());
+            const names = stencilClassesOf(seen.get(el), el, oldValue);
+            if (names.length > 0)
+                restoreFor(el)(names);
         });
     });
     // The document rather than its root element, so replacing `<html>` doesn't end the watch.