@pine-ds/core 4.5.0 → 4.6.0

package/dist/esm/pds-table-head-cell.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
-import { i as upSmall, d as downSmall } from './index-DxI-61GK.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
+import { i as upSmall, d as downSmall } from './index-BJXk71tO.js';
 import { a as isScrolledFromInlineStart } from './scroll-DtgUQhjl.js';
-import './keep-hydrated-Dv7ssOTc.js';
+import './keep-hydrated-BLG6RDBt.js';
 
 const pdsTableHeadCellCss = () => `:host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--pine-color-text);display:table-cell;font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-regular);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);padding:var(--pine-dimension-sm);position:relative;text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--pine-dimension-2xs)}:host(.is-fixed){background:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host(.is-fixed.has-head-background){background-color:var(--pine-color-background-subtle)}:host(.has-head-border){-webkit-border-before:var(--border-head-cell-default);border-block-start:var(--border-head-cell-default)}:host-context([dir=rtl]){--box-shadow-default:-3px 3px 6px -2px rgba(0, 0, 0, 0.1)}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);-webkit-padding-before:2px;padding-block-start:2px;position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--pine-color-text-strong)}:host(.pds-table-head-cell--align-start){text-align:start}:host(.pds-table-head-cell--align-center){text-align:center}:host(.pds-table-head-cell--align-end){text-align:end}:host(.pds-table-head-cell--align-justify){text-align:justify}`;
 
@@ -205,11 +205,11 @@ const PdsTableHeadCell = class {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'de7b2fb674def0a8046e1940488d435176dc9851', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
+        return (h(Host, { key: '13de42d136c5b037cd1545cd5b789b4660e23b87', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '4ada173faf7d106cca34920540703a1d04f7e5bd' }), this.sortable && this.isActive && (h("pds-icon", { key: '1b0e87d74b6fa359e901a8e66479f37a88cdcf1c', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
+                : {} }, h("slot", { key: '96084d87a34d7b601a8e8325f344f1fe6601204e' }), this.sortable && this.isActive && (h("pds-icon", { key: 'cba838fa029b280561676c2b57af7f8f00055511', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/pds-table-head.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
 import { a as closest } from './closest-DHPzKMVS.js';
-import './keep-hydrated-Dv7ssOTc.js';
+import './keep-hydrated-BLG6RDBt.js';
 
 const pdsTableHeadCss = () => `:host{--border-head-default:var(--pine-border-width-thin) solid var(--pine-color-background-subtle);border-color:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table-header-group;vertical-align:middle}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host pds-table-checkbox-cell{-webkit-border-after:var(--border-head-default);border-block-end:var(--border-head-default)}:host([border]){-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);-webkit-border-before:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-start:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host([border]) pds-table-head-cell{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);-webkit-border-before:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-start:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host([background]){background-color:var(--pine-color-background-subtle)}:host([background]) pds-table-head-cell{background-color:var(--pine-color-background-subtle)}`;
 
@@ -48,7 +48,7 @@ const PdsTableHead = class {
         }
     }
     render() {
-        return (h(Host, { key: 'ca88406002f440e9b9eefa639dac056e85403bd8', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '7c1939791a0573c6eccdec66d7b6d5de122a42c1', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (h("pds-checkbox", { key: '3a8581bbf9b5fc26396937e7d0bab370f6078090', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" })))), h("slot", { key: 'a736a10378936d4e4de5b139f3f57a345483c1bb' })));
+        return (h(Host, { key: 'de3faae735e90f5fde1258b5acb826f5f9dbd170', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: 'e590e57c8b37ec0ad18e96077401c4692bbd45a4', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (h("pds-checkbox", { key: '44ca7eda63185672939909e121a86e6502080a7d', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" })))), h("slot", { key: '0671df85d7989cff7266bfd3d1b4d62b332d2e81' })));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/pds-table-row.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
 import { a as closest } from './closest-DHPzKMVS.js';
-import './keep-hydrated-Dv7ssOTc.js';
+import './keep-hydrated-BLG6RDBt.js';
 
 const pdsTableRowCss = () => `:host{--color-background-interactive:var(--pine-color-background-subtle);border-color:inherit;display:table-row;vertical-align:inherit}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host(:hover),:host(:hover)::part(checkbox-cell),:host(:hover) ::slotted(pds-table-cell),:host(.is-selected),:host(.is-selected)::part(checkbox-cell),:host(.is-selected) ::slotted(pds-table-cell){background:var(--color-background-interactive)}:host(.has-divider) ::slotted(pds-table-cell),:host(.has-divider) pds-table-cell{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host(.has-divider.is-last-row) ::slotted(pds-table-cell),:host(.has-divider.is-last-row) pds-table-cell{-webkit-border-after:0;border-block-end:0}`;
 
@@ -143,7 +143,7 @@ const PdsTableRow = class {
         }
     }
     render() {
-        return (h(Host, { key: '16ca08eefa74468559a1c084b7619836f01b27af', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '4b4d2ae15d519e08cd6710ddb6759923d478457c', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '78b9a731113cce82c59f40713561033f563ffc5f', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: '5522f2335912f59013e9fc1e1fc6070d645cd519' })));
+        return (h(Host, { key: '5323521abc5c2464299cf77520fb38ec81297866', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: 'eb94dd282f885d3466b6177b2454cbcc4f932466', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '222eaaedd4bebddc18cebf01bf4da81004773a96', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: '010f222fa02b1809ff818f7a030c2a12fc3e3abb' })));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/pds-table.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
 import { g as getScrollOffsetFromStart } from './scroll-DtgUQhjl.js';
-import './keep-hydrated-Dv7ssOTc.js';
+import './keep-hydrated-BLG6RDBt.js';
 
 const pdsTableCss = () => `@charset "UTF-8";:host{--color-background-default:var(--pine-color-background-container);background:var(--color-background-default);border-collapse:separate;border-radius:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;isolation:isolate;width:100%}:host(:focus-visible){outline:var(--pine-outline-focus)}:host(.pds-table-responsive-host){border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;display:block !important;max-width:100% !important;overflow:hidden !important;position:relative !important;width:100% !important}.pds-table-responsive-container{border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;overflow-x:auto !important;overflow-y:visible !important;position:relative !important;width:100% !important}.pds-table-responsive-wrapper{border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;display:block !important;position:relative !important;width:100% !important}.pds-table-responsive-wrapper .pds-table{display:table !important;min-width:-webkit-max-content !important;min-width:-moz-max-content !important;min-width:max-content !important;table-layout:auto !important;white-space:nowrap !important;width:100% !important}.scroll-shadow-left,.scroll-shadow-right{height:100%;opacity:0;pointer-events:none;position:absolute;top:0;-webkit-transition:opacity 0.1s ease;transition:opacity 0.1s ease;width:4px;z-index:var(--pine-z-index)}.scroll-shadow-left{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);border-end-start-radius:inherit;border-start-start-radius:inherit;inset-inline-start:0}:host-context([dir=rtl]) .scroll-shadow-left{background:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent)}.scroll-shadow-right{background:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);border-end-end-radius:inherit;border-start-end-radius:inherit;inset-inline-end:0}:host-context([dir=rtl]) .scroll-shadow-right{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent)}`;
 

package/dist/esm/pds-tabpanel.entry.js

@@ -1,12 +1,14 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
+import { H as HostStylingKeeper } from './attributes-WXw_I_uJ.js';
 import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
-import './keep-hydrated-Dv7ssOTc.js';
+import './keep-hydrated-BLG6RDBt.js';
 
 const pdsTabpanelCss = () => `:host{display:block}:host(.pds-tabpanel--stretch-active){-ms-flex:1 1 auto;flex:1 1 auto;min-block-size:0}:host(.pds-tabpanel--stretch-active) .pds-tabpanel.is-active{block-size:100%}.pds-tabpanel{display:none;margin-top:var(--tabs-dimension-panel-margin-top);padding:var(--tabs-dimension-panel-padding)}.pds-tabpanel:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabpanel.is-active{display:block}`;
 
 const PdsTabpanel = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.hostKeeper = new HostStylingKeeper();
         /**
          * Keeps track of the tabpanel selected state, this property is passed by parent component
          */
@@ -18,12 +20,22 @@ const PdsTabpanel = class {
         /** @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' }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/pds-tabs.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
-import { H as HostStylingKeeper } from './attributes-CF5K2pxn.js';
-import './keep-hydrated-Dv7ssOTc.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
+import { H as HostStylingKeeper } from './attributes-WXw_I_uJ.js';
+import './keep-hydrated-BLG6RDBt.js';
 
 const pdsTabsCss = () => `:host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-md)}:host(.pds-tabs--divider) .pds-tabs__tablist{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host(.pds-tabs--stretch){block-size:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.pds-tabs--stretch) .pds-tabs__tablist{-ms-flex:0 0 auto;flex:0 0 auto}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--pine-dimension-xs)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--pine-dimension-sm)}:host(.pds-tabs--pill) .pds-tabs__tablist{background-color:var(--pine-color-background-app);border:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-radius:var(--pine-dimension-100);display:-ms-inline-flexbox;display:inline-flex;display:-ms-flexbox;display:flex;gap:0;height:var(--pine-dimension-450)}`;
 
@@ -8,6 +8,35 @@ const PdsTabs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         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 @@ const PdsTabs = class {
          * @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 @@ const PdsTabs = class {
     // 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 @@ const PdsTabs = class {
         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 @@ const PdsTabs = class {
         // 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" })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/pds-text.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, a as getElement } from './index-2HMD-zUO.js';
+import { r as registerInstance, h, a as getElement } from './index-Cw9J31qd.js';
 import { s as setColor } from './utils-OYK5-nwe.js';
 import { s as setupTruncationTooltip } from './truncation-tooltip-_902ENWC.js';
 import { TEXT_SIZES } from './index.js';
-import './keep-hydrated-Dv7ssOTc.js';
+import './keep-hydrated-BLG6RDBt.js';
 import './floating-ui.dom-BPqJgIq6.js';
 
 const pdsTextCss = () => `:host{display:inline}:host([decoration=underline-dotted])>*{-webkit-text-decoration-color:var(--pine-color-text-tertiary);text-decoration-color:var(--pine-color-text-tertiary);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-decoration-thickness:12%;text-underline-offset:0.3rem;text-underline-position:under}:host([decoration=strikethrough])>*{text-decoration:line-through}h1{font:var(--pine-typography-heading-1);letter-spacing:var(--pine-letter-spacing-heading-1)}h2{font:var(--pine-typography-heading-2);letter-spacing:var(--pine-letter-spacing-heading-2)}h3{font:var(--pine-typography-heading-3);letter-spacing:var(--pine-letter-spacing-heading-3)}h4{font:var(--pine-typography-heading-4);letter-spacing:var(--pine-letter-spacing-heading-4)}h5{font:var(--pine-typography-heading-5);letter-spacing:var(--pine-letter-spacing-heading-5)}h6{font:var(--pine-typography-heading-6);letter-spacing:var(--pine-letter-spacing-heading-6)}code,em,p,pre,strong{font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing)}code,pre{font-family:monospace;letter-spacing:0;line-height:1}em{font-style:normal}strong{font-weight:bolder}:host([truncate]){display:block;min-width:0}:host([truncate])>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([italic])>*{font-style:italic}.pds-text{color:var(--color, var(--pine-color-text));margin:var(--pine-dimension-none)}.pds-text--size-2xl{font-size:var(--pine-font-size-body-2xl)}.pds-text--size-xl{font-size:var(--pine-font-size-body-xl)}.pds-text--size-lg{font-size:var(--pine-font-size-body-lg)}.pds-text--size-md{font-size:var(--pine-font-size-body-md)}.pds-text--size-sm{font-size:var(--pine-font-size-body-sm)}.pds-text--size-xs{font-size:var(--pine-font-size-body-xs)}.pds-text--size-2xs{font-size:var(--pine-font-size-body-2xs)}.pds-text--size-h1{font-size:var(--pine-font-size-heading-1)}.pds-text--size-h2{font-size:var(--pine-font-size-heading-2)}.pds-text--size-h3{font-size:var(--pine-font-size-heading-3)}.pds-text--size-h4{font-size:var(--pine-font-size-heading-4)}.pds-text--size-h5{font-size:var(--pine-font-size-heading-5)}.pds-text--size-h6{font-size:var(--pine-font-size-heading-6)}.pds-text--weight-extra-light{font-weight:var(--pine-font-weight-extra-light)}.pds-text--weight-light{font-weight:var(--pine-font-weight-light)}.pds-text--weight-regular{font-weight:var(--pine-font-weight-regular)}.pds-text--weight-medium{font-weight:var(--pine-font-weight-medium)}.pds-text--weight-semibold{font-weight:var(--pine-font-weight-semi-bold)}.pds-text--weight-bold{font-weight:var(--pine-font-weight-bold)}.pds-text--gutter-2xl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}.pds-text--gutter-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-text--gutter-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-text--gutter-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-text--gutter-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-text--gutter-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-text--gutter-2xs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-text--align-start{text-align:start}.pds-text--align-center{text-align:center}.pds-text--align-end{text-align:end}.pds-text--align-justify{text-align:justify}`;
@@ -86,7 +86,7 @@ const PdsText = class {
             ? `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' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/pds-textarea.entry.js

@@ -1,10 +1,10 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
 import { i as isSpecTest, b as isRequired, e as exposeTypeProperty, a as assignDescription, m as messageId } from './form-BuRbS7Hp.js';
 import { d as debounceEvent, f as flushDebouncedEvent, c as cancelDebouncedEvent } from './utils-OYK5-nwe.js';
-import { i as inheritAriaAttributes, a as inheritAttributes } from './attributes-CF5K2pxn.js';
-import { b as danger } from './index-DxI-61GK.js';
+import { i as inheritAriaAttributes, a as inheritAttributes } from './attributes-WXw_I_uJ.js';
+import { b as danger } from './index-BJXk71tO.js';
 import { f as formatMessage } from './i18n-format-BJgZHCWe.js';
-import './keep-hydrated-Dv7ssOTc.js';
+import './keep-hydrated-BLG6RDBt.js';
 
 const labelCss = () => `:host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
 
@@ -317,10 +317,10 @@ const PdsTextarea = class {
     }
     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 formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/pds-toast.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
-import './keep-hydrated-Dv7ssOTc.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
+import './keep-hydrated-BLG6RDBt.js';
 
 const pdsToastCss = () => `:host{--animation-duration:var(--pine-motion-duration-slow);--animation-timing:var(--pine-motion-easing-in-out);--padding-inline:var(--pine-dimension-md);--padding-inline-desktop:var(--pine-dimension-2xl);--sizing-height-default:68px;--sizing-min-width:calc(var(--sizing-total-width) - (var(--padding-inline) * 2));--sizing-min-width-desktop:calc(var(--sizing-total-width) - (var(--padding-inline-desktop) * 2));--sizing-total-width:350px;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;font:var(--pine-typography-body-medium)}.pds-toast{-ms-flex-align:center;align-items:center;-webkit-animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);background-color:var(--pine-color-primary);border-radius:var(--pine-dimension-xs);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);display:-ms-flexbox;display:flex;height:var(--sizing-height-default);-ms-flex-pack:start;justify-content:flex-start;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);max-width:90vw;min-width:var(--sizing-min-width);padding:0 var(--padding-inline);position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (max-width: 767px){.pds-toast{height:36px;max-width:calc(100vw - var(--pine-dimension-2xs) * 2);min-width:auto;padding-inline:var(--pine-dimension-2xs)}}.pds-toast--danger{background-color:var(--pine-color-danger)}.pds-toast--loading .pds-toast__loader{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);position:relative}.pds-toast--loading .pds-toast__loader-spinner{-webkit-animation:pds-toast-rotate 2s linear infinite;animation:pds-toast-rotate 2s linear infinite;height:20px;width:20px}.pds-toast--loading .pds-toast__loader-path{-webkit-animation:pds-toast-dash 1.5s ease-in-out infinite;animation:pds-toast-dash 1.5s ease-in-out infinite;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}.pds-toast__icon{color:var(--pine-color-text-primary);display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-toast__message{font:var(--pine-typography-body-sm-medium);-webkit-margin-end:auto;margin-inline-end:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-toast__message ::slotted(a){color:var(--pine-color-text-primary);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs);opacity:0.7;text-decoration:underline}.pds-toast__message ::slotted(a):hover,.pds-toast__message ::slotted(a):focus-visible{opacity:1}.pds-toast__message ::slotted(a):focus-visible{outline:2px solid var(--pine-color-text-primary);outline-offset:2px}.pds-toast__button{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);color:inherit;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);opacity:0.7;padding:0;white-space:nowrap}.pds-toast__button:hover,.pds-toast__button:focus{opacity:1}.pds-toast__button:focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-dimension-2xs)}@-webkit-keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}:host([hidden]) .pds-toast,.pds-toast--animating-out{-webkit-animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;pointer-events:none;}`;
 
@@ -124,13 +124,13 @@ const PdsToast = class {
         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" }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/pds-tooltip.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
 import { c as computePosition, a as autoUpdate, o as offset, f as flip, s as shift } from './floating-ui.dom-BPqJgIq6.js';
-import './keep-hydrated-Dv7ssOTc.js';
+import './keep-hydrated-BLG6RDBt.js';
 
 const pdsTooltipCss = () => `.pds-tooltip{--tooltip-border-width-arrow-down:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-left:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-right:var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-border-width-arrow-up:0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-sizing-arrow:6px;--tooltip-sizing-arrow-offset:14px;--tooltip-dimension-max-width:320px}.pds-tooltip__content{background-color:var(--pine-color-primary);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);max-width:var(--tooltip-dimension-max-width);opacity:0;padding:var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);position:relative;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:var(--pine-z-index-raised)}.pds-tooltip.pds-tooltip--has-html-content .pds-tooltip__content{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--tooltip-border-width-arrow-left);content:"";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);bottom:var(--tooltip-sizing-arrow-offset);left:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:initial;right:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);bottom:var(--tooltip-sizing-arrow-offset);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:50%;top:calc(var(--tooltip-sizing-arrow) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:initial;right:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}`;
 
@@ -343,9 +343,9 @@ const PdsTooltip = class {
     }
     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" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {