@pine-ds/core 4.4.3 → 4.5.0

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { HostStylingKeeper } from "../../utils/attributes";
 import { assignDescription, isSpecTest, messageId, exposeTypeProperty } from "../../utils/form";
 import { danger, enlarge } from "@pine-ds/icons/icons";
 /**
@@ -7,6 +8,7 @@ import { danger, enlarge } from "@pine-ds/icons/icons";
 export class PdsSelect {
     constructor() {
         this._type = 'select-one';
+        this.hostKeeper = new HostStylingKeeper();
         /**
          * Indicates whether or not the select field is disabled.
          * @defaultValue false
@@ -88,6 +90,7 @@ export class PdsSelect {
         this._type = this.multiple ? 'select-multiple' : 'select-one';
     }
     connectedCallback() {
+        this.hostKeeper.connect(this.el);
         // Initialize ElementInternals for form association (only once per element instance)
         if (this.el.attachInternals && !this.internals) {
             this.internals = this.el.attachInternals();
@@ -95,6 +98,9 @@ export class PdsSelect {
         // Expose type property on the element instance to match native form element behavior
         exposeTypeProperty(this.el, () => this._type);
     }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
     componentWillLoad() {
         // Set initial type based on multiple prop
         this.updateType();
@@ -228,7 +234,13 @@ export class PdsSelect {
     }
     render() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
-        return (h(Host, { key: '89ba8f5f06b2a1bf82a495992efcb8490021e19f', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '009dd8fe960889fd85a6cbe3239d94f81eddc9bb', class: "pds-select" }, !this.hideLabel && (h("div", { key: 'e198c3dcd664da65c0356b7eb7f9b4dff8c27035', class: "pds-select__label-wrapper" }, h("label", { key: '914b278a8e154b17365ffadcfe655139d3bef915', htmlFor: this.componentId }, h("span", { key: '6cd42f182ae8c585364a781044b8fd2fa3d61304', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: '7a3a91336f938ffb13a1e7ea1632090c37b5ad78', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: 'd3ddc61e4458e5ec0af1e700e69355d1cabaa651', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: 'dae8f36dd59e84f502500a24fec97a6fad305167', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '66fd7ed9fd065b6aff73df75234fa9534c828b6f', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
+        const hostClass = this.classNames();
+        const hostAttributes = {
+            'aria-disabled': this.disabled ? 'true' : null,
+            'has-action': hasAction && !this.hideLabel ? 'true' : null,
+        };
+        this.hostKeeper.record(hostClass, {}, hostAttributes);
+        return (h(Host, Object.assign({ key: 'c99bfc000ad351298e154554a8b22635b1abb718', class: hostClass }, hostAttributes), h("div", { key: '35374b150cbef745c6a6068ba5a2fde0803c0314', class: "pds-select" }, !this.hideLabel && (h("div", { key: 'a3b9bae451c5c384606790a29bf8ab5fc70427c0', class: "pds-select__label-wrapper" }, h("label", { key: '80d7740a05a6d3cce6d51224169eb6c2501c4896', htmlFor: this.componentId }, h("span", { key: 'a51c02d7c84f75bb168889dab50cae807271c63d', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: '11444dad795bd02c008252a60e701125861e4af0', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: 'ce54fa1df287d96a7503bb19cd2ba6c74a6da638', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '22c55e78999076a37d43fb708dabc7379dd4cee3', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '45628074fbcdb259b8bba42299082423309a6968', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get is() { return "pds-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js

@@ -1,10 +1,13 @@
 import { Host, h } from "@stencil/core";
+import { HostStylingKeeper } from "../../../utils/attributes";
 import { handle as handleIcon } from "@pine-ds/icons/icons";
 /**
  * @slot sortable-item-actions - Content is placed within the `pds-sortable-item__actions` element as children. This slot is only rendered if `actions` is set to `true`.
+ * @lightDom renders-markup
  */
 export class PdsSortableItem {
     constructor() {
+        this.hostKeeper = new HostStylingKeeper();
         /**
          * Determines whether `sortable-item-actions` slot should be enabled.
          * @defaultValue false
@@ -16,6 +19,12 @@ export class PdsSortableItem {
          */
         this.showHandle = false;
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
     // Discards stale handle/actions siblings left by a page-cache (Turbo, bfcache) reconnect; the fresh handle is always first, the fresh actions wrapper always last.
     componentDidRender() {
         const handles = Array.from(this.el.children).filter((child) => child.matches('.pds-sortable-item__handle'));
@@ -38,7 +47,8 @@ export class PdsSortableItem {
         }
     }
     render() {
-        return (h(Host, { key: 'a401963153e64b33f47f8897f2e8a157557d625e', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'e93df2aea5fcad497bd64f54b09a3e700141dfa6', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '9454196233b1c12a232815a2a14f05e41721a152', "aria-hidden": "true", icon: handleIcon }))), h("slot", { key: 'da456ae383e8fe7dd9375eada035bee755cdd684' }), this.enableActions && (h("div", { key: 'bed7efa1c242e59b547e5e09018b1aacb1c1b172', class: "pds-sortable-item__actions" }, h("slot", { key: 'c4563d2a50c3bb55108527ae1f0a68a84d5749a7', name: "sortable-item-actions" })))));
+        this.hostKeeper.record('pds-sortable-item');
+        return (h(Host, { key: '3f9098a7c938bfa6443f08fb8b0a7c7217230890', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '77718a6867ddd8bc029bb3ef995f6ee9a5999ce7', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'aad7f46e776ece85858798f8f1a1a50c9022b84f', "aria-hidden": "true", icon: handleIcon }))), h("slot", { key: 'afa9346ec8fd7aa6132a15dd44d3b1cae24500b9' }), this.enableActions && (h("div", { key: 'c28c85391117542999c12d673879768394002c90', class: "pds-sortable-item__actions" }, h("slot", { key: '88ab53f3ba4ed47715e31935b861d9ab42342b32', name: "sortable-item-actions" })))));
     }
     static get is() { return "pds-sortable-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,5 +1,9 @@
 import { Host, h } from "@stencil/core";
+import { HostStylingKeeper } from "../../utils/attributes";
 import Sortable from "sortablejs";
+/**
+ * @lightDom host-only
+ */
 export class PdsSortable {
     constructor() {
         /**
@@ -20,6 +24,7 @@ export class PdsSortable {
          * Determines the grabbable area for the `pds-sortable-item`.
          */
         this.handleType = 'row';
+        this.hostKeeper = new HostStylingKeeper();
     }
     handleDisabledChange() {
         var _a;
@@ -41,6 +46,12 @@ export class PdsSortable {
         }
         return classNames.join('  ');
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
     componentDidLoad() {
         let sortableOptions = {
             animation: 150,
@@ -57,7 +68,9 @@ export class PdsSortable {
         this.sortableInstance = Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (h(Host, { key: '6ff85345305337587c3d06b6f6c333125707efe8', class: this.classNames(), id: this.componentId }, h("slot", { key: 'e25c441574cc8b59bb1865a69af8691ce37ff341' })));
+        const classNames = this.classNames();
+        this.hostKeeper.record(classNames);
+        return (h(Host, { key: 'fb6e9a79babf01980c04ee7208d195510493a7dc', class: classNames, id: this.componentId }, h("slot", { key: '5735ca3af531a736f07d1fafde8ae544d00a75bb' })));
     }
     static get is() { return "pds-sortable"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { assignDescription, isSpecTest, messageId, exposeTypeProperty } from "../../utils/form";
 import { danger } from "@pine-ds/icons/icons";
-import { inheritAriaAttributes } from "../../utils/attributes";
+import { inheritAriaAttributes, HostStylingKeeper } from "../../utils/attributes";
 /**
  * @slot label - Content displayed as the switch label in place of the `label` text. Clicking it toggles the switch.
  */
@@ -9,6 +9,7 @@ export class PdsSwitch {
     constructor() {
         this.inheritedAttributes = {};
         this._type = 'checkbox';
+        this.hostKeeper = new HostStylingKeeper();
         this.hasLabelSlot = false;
         /**
          * Determines the input 'checked' state.
@@ -52,6 +53,7 @@ export class PdsSwitch {
         };
     }
     connectedCallback() {
+        this.hostKeeper.connect(this.el);
         // Initialize ElementInternals for form association (only once per element instance)
         if (this.el.attachInternals && !this.internals) {
             this.internals = this.el.attachInternals();
@@ -59,6 +61,9 @@ export class PdsSwitch {
         // Expose type property on the element instance to match native form element behavior
         exposeTypeProperty(this.el, () => this._type);
     }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
     componentDidLoad() {
         this.updateFormValue();
     }
@@ -93,9 +98,12 @@ export class PdsSwitch {
         this.updateHasLabelSlot();
     }
     render() {
-        return (h(Host, { key: 'b04295a8cc5acec33c5c6461516e9ec57ff9c396', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: 'f052e2409b0d7603598fd59bcdd382d6091cd794', htmlFor: this.componentId }, h("input", Object.assign({ key: 'd61df3ac3762af2dcc27a8800f7317ac03994ea3', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: '0f921ea88d5706c364b1d8e4e05afac95be9f092', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: '10f20c7f761635be8d90580be85fd7d62e2968f3', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
-            h("div", { key: '97a0281aa88b9208128fa169740cc710beed5538', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '26dd988675278031577df77560557484a8187cd5', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'ed674224e564f330ea797d0b4196442ad372ae99', icon: danger, size: "small" }), this.errorMessage)));
+        const hostClass = this.switchClassNames();
+        const ariaDisabled = this.disabled ? 'true' : null;
+        this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
+        return (h(Host, { key: '6d4b51307f2619a99981e344f782f69871aabf0f', class: hostClass, "aria-disabled": ariaDisabled }, h("label", { key: '068ef3759e2bc3d9870cff36714de0e9cf558b2b', htmlFor: this.componentId }, h("input", Object.assign({ key: 'aa28fb67332bb2d81c09b6c749c1cb0f079e327f', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: 'd237980a9ce2abc04d57085df022f28dfa2768e4', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: '83d0e2110cfdcd3208319302af237178dfd419a4', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
+            h("div", { key: '137d9e5626b34ade33f68c4c24c3dcb154500dc6', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '64c3b8884d0568e26953f67a95d045aa5731c41f', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'f99f8045eb33d0c60518f3b4c6a0183170a50f4a', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,8 @@
 import { Fragment, Host, h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
+/**
+ * @lightDom renders-markup
+ */
 export class PdsTab {
     constructor() {
         /**

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

@@ -1,5 +1,8 @@
 import { Host, h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
+/**
+ * @lightDom renders-markup
+ */
 export class PdsTabpanel {
     constructor() {
         /**
@@ -18,7 +21,7 @@ export class PdsTabpanel {
         unwrapReconnectedContent(this.el.querySelector('.pds-tabpanel'), '.pds-tabpanel');
     }
     render() {
-        return (h(Host, { key: 'cce5229aaa694a4eeb30ceacb7edbb7b03f7e24a', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, h("div", { key: '614187ea6676c80d94acd9aef7c8e10137fb6179', 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: '368f81238023d647d42b3c1f6dc14795245bbc87' }))));
+        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' }))));
     }
     static get is() { return "pds-tabpanel"; }
     static get originalStyleUrls() {

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { HostStylingKeeper } from "../../utils/attributes";
 /**
 * @slot tabs - Content is placed within the `div[role="tablist"]` element as children
 * @slot tabpanels - Content is placed directly after the `div[role="tablist"]` element as siblings
@@ -6,6 +7,7 @@ import { Host, h } from "@stencil/core";
 */
 export class PdsTabs {
     constructor() {
+        this.hostKeeper = new HostStylingKeeper();
         /**
          * Adds a divider rule beneath the tab list.
          * @defaultValue false
@@ -26,6 +28,12 @@ export class PdsTabs {
          */
         this.nav = false;
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
     tabClickHandler(event) {
         if (this.componentId === event.detail[1]) {
             this.activeTabIndex = event.detail[0];
@@ -160,7 +168,11 @@ export class PdsTabs {
         // Navigation mode: a <nav> landmark of links (aria-current marks the current
         // page). Panel mode: the ARIA tablist of role=tab buttons over tabpanels.
         const tabList = this.isNav ? (h("nav", { class: "pds-tabs__tablist", "aria-label": this.tablistLabel || undefined, part: "tab-list" }, h("slot", { name: "tabs" }))) : (h("div", { class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, h("slot", { name: "tabs" })));
-        return (h(Host, { key: 'db689b695d53916eb40a7c6f4596a20925fd4b2e', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, h("slot", { key: 'd2e79967a75d4e2fc33bff5321c62cc89ac74491', name: "tabpanels" })));
+        const hostClass = this.classNames();
+        // 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" })));
     }
     static get is() { return "pds-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,6 +3,7 @@ import { autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/
 /**
  * @slot (default) - The tooltip's target element
  * @slot content - HTML content for the tooltip
+ * @lightDom renders-markup
  */
 export class PdsTooltip {
     constructor() {
@@ -342,9 +343,9 @@ export class PdsTooltip {
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (h(Host, { key: 'd63b6632a084fbaebd2004a569fb96e0fff91f41', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '79b8b9c2bb9fc2afaf8cbb06dbc102d18c060362', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+        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,
             /* focusin/out bubble; ensure keyboard users see tooltips */
-            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: '9e12d130ac5f392d966f442d91673c3864962b01' })), h("div", { key: '5b83f093b2cbb2b22af0c440278ee318c456087a', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: 'c0243ad0a833326e8daf799d41b1bf8048c6dee9', name: "content" }))));
+            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" }))));
     }
     static get is() { return "pds-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/global/pine-global.js

@@ -0,0 +1,6 @@
+import { keepPineHydrated } from "../utils/keep-hydrated";
+// Stencil runs this when the loader loads, before any component is defined, and again for each
+// server-rendered document, where it does nothing.
+export default () => {
+    keepPineHydrated();
+};

package/dist/collection/index.js

@@ -1,3 +1,4 @@
 export * from './components';
 export { TEXT_SIZES } from './utils/types';
+export { keepPineHydrated } from './utils/keep-hydrated';
 import "@pine-ds/icons";

package/dist/collection/utils/attributes.js

@@ -1,3 +1,71 @@
+import { classNamesOf, isStencilClass } 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.
+ * @param el - Element to write to
+ * @param attributes - Attribute names and the values they should have
+ */
+export const setAttributesIfChanged = (el, attributes) => {
+    Object.entries(attributes).forEach(([name, value]) => {
+        if (el.getAttribute(name) !== value)
+            el.setAttribute(name, value);
+    });
+};
+/**
+ * Puts back any of `expected`'s classes or style properties that are missing from `el`. It only
+ * adds what's missing, never rewrites a value that's there, because browsers normalize some style
+ * values (`flex: 1` reads back as `1 1 0%`): comparing values would rewrite them forever.
+ * @param el - Host element
+ * @param expected - Classes and style properties the component rendered
+ */
+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);
+    });
+};
+/**
+ * Watches a component's own host and puts back what it rendered when something strips it. A DOM
+ * morph does: it makes the host match the server's HTML, which carries the component's props but not
+ * the classes, styles and attributes it wrote, and Stencil won't write them again because it diffs
+ * against its previous render, not the live DOM.
+ *
+ * It also means a script that removes one of these on purpose sees it come back: change them through
+ * the component's props instead.
+ * @param el - Host element
+ * @param expected - Reads what the component last rendered
+ * @returns The observer, to disconnect when the component is removed; `null` without MutationObserver
+ */
+const keepHostStyling = (el, expected) => {
+    if (typeof MutationObserver === 'undefined')
+        return null;
+    const observer = new MutationObserver((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] }));
+        // 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.
+        records.forEach(({ attributeName: name, oldValue }) => {
+            var _a;
+            const rendered = (_a = styling.attributes) === null || _a === void 0 ? void 0 : _a[name];
+            if (oldValue == null || rendered == null || rendered === false || el.hasAttribute(name))
+                return;
+            el.setAttribute(name, oldValue);
+        });
+    });
+    observer.observe(el, { attributes: true, attributeOldValue: true });
+    return observer;
+};
 /**
  * Inherit attributes from the host element
  * @param el - Host element
@@ -81,3 +149,25 @@ export const inheritAriaAttributes = (el, ignoreList) => {
     }
     return inheritAttributes(el, attributesToInherit);
 };
+/**
+ * One component's use of `keepHostStyling`: `record` what `render()` puts on the host, `connect` in
+ * `connectedCallback` and `disconnect` in `disconnectedCallback`.
+ */
+export class HostStylingKeeper {
+    constructor() {
+        this.styling = { classes: [], styles: {} };
+        this.observer = null;
+    }
+    record(classes, styles = {}, attributes = {}) {
+        this.styling = { classes: classNamesOf(classes), styles, attributes };
+    }
+    connect(el) {
+        var _a;
+        (_a = this.observer) !== null && _a !== void 0 ? _a : (this.observer = keepHostStyling(el, () => this.styling));
+    }
+    disconnect() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.observer = null;
+    }
+}

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

@@ -0,0 +1,61 @@
+/**
+ * Whether a class is one Stencil itself puts on a host: its default `hydratedFlag` (Pine doesn't
+ * change it), or a scoped component's own scope classes (`sc-pds-radio`, `sc-pds-radio-h`,
+ * `sc-pds-radio-s`), which its CSS needs. Only the host's own: another `sc-` class may be a
+ * consumer's (styled-components ids).
+ * @param el - Host element
+ * @param name - Class name
+ */
+export const isStencilClass = (el, name) => {
+    const scope = `sc-${el.localName}`;
+    return name === 'hydrated' || name === scope || name === `${scope}-h` || name === `${scope}-s`;
+};
+/**
+ * The class names in a rendered `class` value: a string, or Stencil's `{ name: boolean }` form.
+ */
+export const classNamesOf = (classes) => typeof classes === 'string'
+    ? classes.split(/\s+/).filter(Boolean)
+    : Object.keys(classes).filter((name) => classes[name]);
+// 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');
+/**
+ * Puts Stencil's own classes back on any Pine component that loses them. Stencil hides a component
+ * until it has `hydrated`, so a DOM morph that strips a host's `class` makes it vanish, and nothing
+ * rewrites it. One observer on the whole document covers every component, including the ones with no
+ * 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`.
+ *
+ * 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.
+ * Calling it again does nothing, and without `MutationObserver` (server rendering) neither does the
+ * first call.
+ */
+export const keepPineHydrated = () => {
+    if (typeof MutationObserver === 'undefined' || typeof document === 'undefined')
+        return;
+    const store = globalThis;
+    if (store[OBSERVER])
+        return;
+    const observer = new MutationObserver((records) => {
+        records.forEach(({ target, oldValue }) => {
+            const el = target;
+            if (oldValue == null || !el.localName.startsWith('pds-'))
+                return;
+            const missing = classNamesOf(oldValue).filter((name) => isStencilClass(el, name) && !el.classList.contains(name));
+            if (missing.length > 0)
+                el.classList.add(...missing);
+        });
+    });
+    // The document rather than its root element, so replacing `<html>` doesn't end the watch.
+    observer.observe(document, {
+        subtree: true,
+        attributes: true,
+        attributeFilter: ['class'],
+        attributeOldValue: true,
+    });
+    store[OBSERVER] = observer;
+};

package/dist/collection/utils/reflected-attribute-default.js

@@ -0,0 +1,40 @@
+/**
+ * Restores a reflected prop's default when its attribute is removed.
+ *
+ * A reflected `@Prop` with a default writes that default onto the host as an
+ * attribute even when the author leaves it out. Removing the attribute doesn't
+ * restore the default: Stencil's `attributeChangedCallback` sets the prop to
+ * `null` (or `false` for a boolean), even when its default is `true`. A Turbo
+ * morph hits this whenever the author relied on the default, since the
+ * server's HTML never carries the attribute Pine wrote.
+ *
+ * A `null` or `undefined` falls back to the default, whether the attribute was
+ * removed or a consumer (or a framework clearing a prop) assigned it. Any other
+ * value is a real write and is kept, except a boolean's `false`: that's also
+ * what removing the attribute produces, so it's told apart by the host's actual
+ * attribute. Present, trust it; absent, fall back to the default.
+ *
+ * Falling back also writes the default back onto the host. Stencil won't: it
+ * diffs a reflected attribute against the previous render, not the live DOM,
+ * so when the removed attribute held the default (`'lg'` → `null` → `'lg'`)
+ * the values match and it skips the write. Left absent, the attribute would
+ * make a later `copytext.border = false` fall back to the default too.
+ *
+ * Wire up from a `@Watch` on the prop and reassign the prop to the result.
+ *
+ * `attr` is the HTML attribute name, not the prop name — pass the kebab-case
+ * form (e.g. `'is-loading'`) for a camelCase prop. They're the same string
+ * for every current caller (`size`, `variant`, `placement`, `border`), but
+ * `hasAttribute` would silently always return `false` for a multi-word prop
+ * if the prop name were passed instead.
+ */
+export function restoreReflectedDefault(el, attr, value, defaultValue) {
+    // Only a boolean's `false` needs the attribute to tell a write from a removal. Checking it for
+    // other values would let a `null` write strip the attribute and reset every later write.
+    if (value != null && (value !== false || el.hasAttribute(attr)))
+        return value;
+    if (defaultValue !== false && defaultValue != null) {
+        el.setAttribute(attr, defaultValue === true ? '' : String(defaultValue));
+    }
+    return defaultValue;
+}

package/dist/collection/utils/test/host-strip.js

@@ -0,0 +1,50 @@
+// The browser-side code below is passed as strings, the same workaround `runAxe` uses: under Jest's
+// coverage instrumentation, a function passed to `page.$eval` is serialized with injected `cov_*`
+// counter calls that don't exist in the browser, which throws a `ReferenceError` there.
+const inBrowser = (page, selector, body, args = null) => page.evaluate(`
+    (() => {
+      const el = document.querySelector(${JSON.stringify(selector)});
+      const args = ${JSON.stringify(args)};
+      ${body}
+    })()
+  `);
+// Computed properties a host class, style or attribute tends to drive, for the host and everything
+// it renders (its shadow tree, or its light DOM for a shadowless component).
+const snapshotStyles = (page, selector) => inBrowser(page, selector, `
+      const nodes = [el, ...Array.from((el.shadowRoot || el).querySelectorAll('*'))];
+      return nodes.map((node) => {
+        const style = getComputedStyle(node);
+        // No sizes: text width shifts as web fonts load, and inner elements can be mid-animation. The
+        // class check covers what a size would have caught.
+        return [
+          style.display, style.visibility, style.opacity, style.position, style.clip, style.overflow, style.flexDirection, style.flex, style.minHeight, style.gap,
+          style.paddingTop, style.maxWidth, style.color, style.backgroundColor, style.fontWeight,
+          style.borderTopStyle, style.borderTopColor, style.borderTopWidth,
+          style.borderBottomStyle, style.borderBottomColor, style.borderBottomWidth,
+          style.animationName, style.cursor,
+        ].join(' | ');
+      });
+    `);
+/**
+ * Strips the host's `class` (keeping a `consumer` class the markup must carry), its `style`, and any
+ * `removeAttributes`, as a DOM morph does when the server's HTML lacks what the component wrote.
+ * Expects every class and removed attribute to come back, and every computed style of the host and
+ * what it renders to be unchanged.
+ */
+export const expectStylingSurvivesStrip = async (page, selector, { removeAttributes = [] } = {}) => {
+    const host = () => inBrowser(page, selector, `
+        return {
+          classes: Array.from(el.classList).sort(),
+          attributes: args.map((name) => [name, el.getAttribute(name)]),
+        };
+      `, removeAttributes);
+    const before = { host: await host(), styles: await snapshotStyles(page, selector) };
+    await inBrowser(page, selector, `
+      el.setAttribute('class', 'consumer');
+      el.removeAttribute('style');
+      args.forEach((name) => el.removeAttribute(name));
+    `, removeAttributes);
+    await page.waitForChanges();
+    expect(await host()).toEqual(before.host);
+    expect(await snapshotStyles(page, selector)).toEqual(before.styles);
+};