@pine-ds/core 4.1.0 → 4.3.0

package/dist/collection/components/pds-table/pds-table-head/pds-table-head.js

@@ -42,7 +42,7 @@ export class PdsTableHead {
         }
     }
     render() {
-        return (h(Host, { key: '972440cfae0388fb28018929bcf79330cfc5f4d5', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '13080928a925352bd35318bb5871d2ad3041d616', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (h("pds-checkbox", { key: '57e7872a8620a2a7a295f2bc5354bfbe75541eba', 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: 'e1d459755b5db56bbbbbaf69f40ed994d1604b83' })));
+        return (h(Host, { key: '5815389e77b61a323dd4430625b0917a7428bf02', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '161fdced5a7c7cd13a62fb7c1ed96e82ad2dbfd0', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (h("pds-checkbox", { key: 'd6e90d844d314ef347ffb4db8b360ba36887c311', 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: '1dd5dd37d4fca230000a6eb4b96fee87e4e67802' })));
     }
     static get is() { return "pds-table-head"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js

@@ -199,11 +199,11 @@ export class PdsTableHeadCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'a9862d24c53e7db944724d5bc351935ae7aea5b3', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
+        return (h(Host, { key: 'c30192a432bbd8868326fc7ed4199b98a33991ff', 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: '2a78068e2a35f0c7c608535784dafc1401727ecc' }), this.sortable && this.isActive && (h("pds-icon", { key: '7d4c28385f00450326b8796666dc81230ccb4f54', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
+                : {} }, h("slot", { key: 'e725a7e576f6bc56d385c8cb0822ce255544fbcb' }), this.sortable && this.isActive && (h("pds-icon", { key: '52068d114bfadcd6d4e02c86e703349bc7833716', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
     }
     static get is() { return "pds-table-head-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js

@@ -137,7 +137,7 @@ export class PdsTableRow {
         }
     }
     render() {
-        return (h(Host, { key: '570628eae542c3962db9b2a81615cbc9d6b7bb3c', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '78fd4b1a2823759c0c113aa9a78ccaa0e859989d', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '953debb5b0537543185e0feb7c38947818964a96', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: '357ace6cfc64552a6cd26c66801e131f9d5d1bed' })));
+        return (h(Host, { key: '4188f670137051d35cf73a5ca86566f65c3eca09', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '122ff6ec96ea4857b863f9283bd46946dc403bff', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '9997b31c86190fe8f25ba4d1b42b8753facbba70', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: 'f9bc0700386b11a35f78d639118351675ab7150d' })));
     }
     static get is() { return "pds-table-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ export class PdsTabpanel {
         unwrapReconnectedContent(this.el.querySelector('.pds-tabpanel'), '.pds-tabpanel');
     }
     render() {
-        return (h(Host, { key: 'be561d592a9c7d2458987bcc09fe5d8d253bd2ba', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, h("div", { key: '98cb5eda73378d95519de8ce24c60f9263e89add', 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: '27b707d8fae77685f0cea7b0dc8c8dbcdb808f65' }))));
+        return (h(Host, { key: 'e1dd3a854d6ceffff0688afb7ed02f3d56ae9333', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, h("div", { key: '381a763bc540659c8944ff48ccc1a41ad94dc087', 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: 'bdb11c6e68f701cf91fda68db5122bb9dfe7d894' }))));
     }
     static get is() { return "pds-tabpanel"; }
     static get originalStyleUrls() {

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

@@ -160,7 +160,7 @@ 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: '43be427fec88d758d9caa2200320a0a327ac9e4d', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, h("slot", { key: 'e4b1db5920dc0264811f08706406fd45c48106f9', name: "tabpanels" })));
+        return (h(Host, { key: 'f9d0e94dcacd7b94691368f08eb77b45475c0a35', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, h("slot", { key: '93c605b2bd4b8ad3dcd8f494a82fd30833e8b300', name: "tabpanels" })));
     }
     static get is() { return "pds-tabs"; }
     static get encapsulation() { return "shadow"; }

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: 'deef66327ac6089ba6b32d80d41c0be60b5ee768', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content", tabIndex: this.truncate ? 0 : undefined }, h("slot", { key: 'b58f1d01a19f2da255abaed9c0e3e2d8fea30019' })));
+        return (h(Tag, { key: 'cf597479ded618a0674d68fd726b828d88c0e642', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: 'f9c163be5662522b012bca6b0a23cfe00860e474' })));
     }
     static get is() { return "pds-text"; }
     static get encapsulation() { return "shadow"; }
@@ -271,7 +271,7 @@ export class PdsText {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If set or `true`, the text will be truncated. Must add a `width` to the element.\nWhen text overflows, a tooltip showing the full text will appear on hover/focus.\nNote: When truncate is enabled, the element automatically receives tabindex=\"0\" for keyboard accessibility."
+                    "text": "If set or `true`, the text will be truncated. Must add a `width` to the element.\nWhen text overflows, a tooltip showing the full text will appear on hover/focus.\nNote: While the text is overflowing, the element receives tabindex=\"0\" so the\ntooltip can be reached by keyboard. Text that fits is left out of the tab order."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -301,10 +301,10 @@ export class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: '07e82bbbcc38d04c540b8576fadb366797c9bae3', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'fd9f64b75ff5ab4e7a1ec40fbb9f5288efee80b3', class: "pds-textarea" }, this.label &&
-            h("div", { key: 'a1004e2af8d34ab2a43d2f97efeffac5e61bc8d6', class: "pds-textarea__label-wrapper" }, h("label", { key: 'cb1bb601f4e2f085bdabd1fe4f4706b1cc9b3d1e', htmlFor: this.componentId }, h("span", { key: '350b9c9b9ea1774a48721cc316df8ebb4aaa4764', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '3e471b7a666640e042fb8051a0759c8cab3440db', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: 'ccab2538b28689d3c0a78b541b4c9cff70b98396', 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: '2e50b8cbab077ab6c9149d2c5b5fbb4c6de067c4', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: '58fbf2e03ec60524a9c4830dc5adc9d816d7d100', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '144b6e6133d9970c4969f27d1e719216a416991f', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: '838d12ba686fb041996c44522d3fd30e1b56c610', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'bd3eef138a5c8f2cd4e48c007561bb1b12f4e575', class: "pds-textarea" }, this.label &&
+            h("div", { key: 'f83f23b17cd157d48bb5c0c5067ca5f611d73529', class: "pds-textarea__label-wrapper" }, h("label", { key: '896b7b495ad6f7deb8d4738e623f0676f0a98c1f', htmlFor: this.componentId }, h("span", { key: '02b06db969467f6c4e83e0f713bee0be76f8dfff', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '15c5964576e73db36cee4a9ca868c28571250a27', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '4493797e03322993a8cbe5530a18a9ef984b9796', 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: '9c8794ec733a3ece5eaeac74ef6a1ebb223558c3', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: 'c4b9be66c3f3c39ddf495708f0f03cfda03e7fc6', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'c117b8d62c055382f5d43caa7f2cb880796c495b', 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: 'aa1d20ad8b511950338a16cd9277f33a6438bfe5', hidden: !this.isVisible }, h("div", { key: 'b19ddfcdec17bd3339cf6b283cca475ad8dda75b', class: {
+        return (h(Host, { key: 'a1ec97158a6665aa25b58b1954b4b5c622590615', hidden: !this.isVisible }, h("div", { key: 'd9b01164364c76512852a260cede50000b73a563', 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: '8f4553ac467032c6e398e1665b41d78eedc56e30', class: "pds-toast__message" }, h("slot", { key: '0a04edffd081298f6cd7f6feb3f50e89276d4e09' })), this.dismissible && (h("button", { key: 'b42a2ab16a011b42e278e77fa4c0698eea3950e0', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: '1f581c7c29ea3fc795dfca061d3575c5a9895b3c', class: "pds-toast__message" }, h("slot", { key: '645b31eae3be23de63ab2562234caf0be2510645' })), this.dismissible && (h("button", { key: '44a62b304468c0fca0b8d490ad9c8b5932176ac9', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": this.dismissLabel }, h("pds-icon", { key: 'e5ea3485a7d943ba3be144506eecb9a25b55b07d', name: "remove" }))))));
+            }, "aria-label": this.dismissLabel }, h("pds-icon", { key: 'fde63f279f696d9f02875cc1beee3542c97f0c7e', name: "remove" }))))));
     }
     static get is() { return "pds-toast"; }
     static get encapsulation() { return "shadow"; }

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

@@ -342,9 +342,9 @@ export class PdsTooltip {
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (h(Host, { key: 'd9fa5c688ba3baeac14334ec9c03e887ef16115e', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '44ee5332139567d3f25070f73c1e73630f00eec4', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+        return (h(Host, { key: 'a4f25d10de27757ab2551af0e5b8a53336bf8cb4', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '5e9f9afbecbb335ad68b02edf999d2ec62f31a8e', 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: '4eb9c2f891c8cdb9d7f9d944d99bf423908cbc0f' })), h("div", { key: '985b373be21f07c14cd5c8c3095d5e8d290d3e7f', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: 'cd8d6c2dca87b7d72fd01f51e5b1d538c2d93531', name: "content" }))));
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: 'e142f4f09406b7bd3d1ce9005f624b91cf7ec176' })), h("div", { key: 'ebe0faae0af623477486dbba56c24bc3e0a6bc66', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '833d31509ba48f10cd0b5eb2f5e8dc509854c25e', name: "content" }))));
     }
     static get is() { return "pds-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/index.js

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

package/dist/collection/utils/test/reduced-motion.js

@@ -0,0 +1,78 @@
+/**
+ * Reads a target's computed `transition-duration` from within `hostTag`,
+ * optionally on a pseudo-element (e.g. `::after`). Works whether `hostTag`
+ * renders to a real shadow root (`shadow: true`) or scoped/light DOM
+ * (`shadow: false` / `scoped: true`) — Pine components use both.
+ *
+ * `innerSelector` may be omitted (or `null`) to read the host element itself.
+ *
+ * Embeds the arguments in a string-evaluated IIFE, the same workaround
+ * `runAxe` uses, rather than passing a real function to `page.$eval`: under
+ * Jest's coverage instrumentation, a function reference gets serialized with
+ * injected `cov_*` counter calls that don't exist in the browser's isolated
+ * execution context, throwing a `ReferenceError` there.
+ */
+async function readTransitionDuration(page, hostTag, innerSelector, pseudoElement) {
+    // Normalise to the `::` form. Chrome, which is what these e2e tests drive,
+    // accepts a bare `after` and returns the pseudo-element's style -- verified,
+    // so no assertion is wrong today. The CSSOM spec treats a colonless value as
+    // invalid and returns the originating element's style instead, which would
+    // turn a knob assertion into a silent re-test of its host. Cheap to not
+    // depend on the lenient reading.
+    const normalisedPseudo = pseudoElement
+        ? `::${pseudoElement.replace(/^:{1,2}/, '')}`
+        : null;
+    const argsJson = JSON.stringify({ hostTag, innerSelector, pseudoElement: normalisedPseudo });
+    return page.evaluate(`
+    (() => {
+      const args = ${argsJson};
+      const el = document.querySelector(args.hostTag);
+      const root = el.shadowRoot || el;
+      const target = args.innerSelector ? root.querySelector(args.innerSelector) : el;
+      return getComputedStyle(target, args.pseudoElement || null).transitionDuration;
+    })()
+  `);
+}
+/**
+ * Asserts that an element's `transition-duration` collapses to `0s` once the
+ * page emulates `prefers-reduced-motion: reduce`.
+ *
+ * This is the runtime counterpart to the `pine-design-system/no-hardcoded-motion`
+ * Stylelint rule: the rule can only see a component's *source* — that it
+ * references `var(--pine-motion-duration-*)` somewhere. It can't see whether
+ * that reference actually reaches the declaration that runs at render time
+ * (a `var()` could be shadowed, overridden, or simply never wired up right).
+ * This closes that gap by reading the real computed style before and after
+ * emulating the preference, so a target that *doesn't* zero out fails loudly
+ * here even if it fooled the lint rule.
+ *
+ * Usage:
+ *
+ * ```ts
+ * const page = await newE2EPage();
+ * await page.setContent('<pds-switch></pds-switch>');
+ * await expectRespectsReducedMotion(page, 'pds-switch', 'input', 'after');
+ * ```
+ *
+ * @param page Stencil E2E page.
+ * @param hostTag Custom element tag hosting the shadow root to read from.
+ * @param innerSelector Selector for the element within `hostTag`'s shadow
+ *   root, or `null`/omitted to read `hostTag` itself.
+ * @param pseudoElement Pseudo-element to read from the target (e.g. `'after'`
+ *   for `::after`), or `null`/omitted to read the element's own style.
+ */
+export async function expectRespectsReducedMotion(page, hostTag, innerSelector = null, pseudoElement = null) {
+    const before = await readTransitionDuration(page, hostTag, innerSelector, pseudoElement);
+    await page.emulateMediaFeatures([{ name: 'prefers-reduced-motion', value: 'reduce' }]);
+    await page.waitForChanges();
+    const after = await readTransitionDuration(page, hostTag, innerSelector, pseudoElement);
+    // `transitionDuration` can list one value per transitioned property
+    // (e.g. "0.2s, 0.2s"); every one of them must have zeroed out.
+    const allZero = after.split(',').every((part) => parseFloat(part.trim()) === 0);
+    if (!allZero) {
+        const target = `${hostTag}${innerSelector ? ` >>> ${innerSelector}` : ''}${pseudoElement ? `::${pseudoElement}` : ''}`;
+        throw new Error(`Expected "${target}" to have a zero transition-duration under prefers-reduced-motion, ` +
+            `but got "${after}" (was "${before}" before emulating the preference). Its transition ` +
+            `is not actually routed through a --pine-motion-duration-* token at render time.`);
+    }
+}

package/dist/collection/utils/truncation-tooltip.js

@@ -64,10 +64,12 @@ function isOverflowing(el) {
  * will display a tooltip showing the full text content. The tooltip is
  * rendered as a portal on document.body and positioned with Floating UI.
  *
+ * Also owns the element's `tabindex` while it is clipped — see syncTabIndex.
+ *
  * @returns A cleanup function that removes all listeners, observers, and DOM elements.
  */
 export function setupTruncationTooltip(options) {
-    const { hostEl, contentEl, getTooltipText, placement = 'top' } = options;
+    const { hostEl, contentEl, getTooltipText, placement = 'top', manageTabIndex = true } = options;
     injectStyles();
     let portalEl = null;
     let isHovering = false;
@@ -76,6 +78,34 @@ export function setupTruncationTooltip(options) {
     let hideTimeout = null;
     let resizeObserver = null;
     let resizeDebounce = null;
+    let ownsTabIndex = false;
+    let disposed = false;
+    /**
+     * The tab stop exists only to give the tooltip a focusable anchor, so it
+     * belongs on the element while the text is actually clipped and not a moment
+     * longer. Deriving it from the caller's prop instead leaves a dead stop on
+     * every element that opted into truncation but happens to fit — in a row of
+     * chips that doubles the tab stops, half of them landing on a span with no
+     * role, no name of its own, and nothing to reveal.
+     *
+     * Ownership is tracked rather than inferred from the value: if the consumer
+     * already put a tabindex on the element (a roving -1, say), that is theirs
+     * and we never touch it.
+     */
+    function syncTabIndex() {
+        if (!manageTabIndex)
+            return;
+        if (isOverflowing(contentEl)) {
+            if (!ownsTabIndex && contentEl.hasAttribute('tabindex'))
+                return;
+            ownsTabIndex = true;
+            contentEl.setAttribute('tabindex', '0');
+        }
+        else if (ownsTabIndex) {
+            ownsTabIndex = false;
+            contentEl.removeAttribute('tabindex');
+        }
+    }
     // Use ResizeObserver to re-evaluate overflow when the element resizes
     // Debounced to prevent performance issues during rapid window resizing
     if (typeof ResizeObserver !== 'undefined') {
@@ -85,6 +115,7 @@ export function setupTruncationTooltip(options) {
             }
             resizeDebounce = setTimeout(() => {
                 resizeDebounce = null;
+                syncTabIndex();
                 // If tooltip is showing but text no longer overflows, hide it
                 if (portalEl && portalEl.isConnected && !isOverflowing(contentEl)) {
                     hideTooltip();
@@ -93,6 +124,18 @@ export function setupTruncationTooltip(options) {
         });
         resizeObserver.observe(contentEl);
     }
+    // Measure now so the common case is right on the first paint, rather than
+    // waiting out the observer's debounce.
+    syncTabIndex();
+    // A web font swapping in changes scrollWidth without changing the clipped
+    // box's size, so ResizeObserver never fires for it — the element would keep
+    // whatever the fallback font measured. Re-measure once the fonts settle.
+    if (typeof document !== 'undefined' && document.fonts !== undefined) {
+        document.fonts.ready.then(() => {
+            if (!disposed)
+                syncTabIndex();
+        });
+    }
     function createPortal() {
         if (portalEl)
             return;
@@ -224,6 +267,7 @@ export function setupTruncationTooltip(options) {
     hostEl.addEventListener('focusout', handleFocusOut);
     // Return cleanup function
     return () => {
+        disposed = true;
         cancelHideTimeout();
         if (resizeDebounce) {
             clearTimeout(resizeDebounce);
@@ -232,6 +276,12 @@ export function setupTruncationTooltip(options) {
         if (resizeObserver) {
             resizeObserver.disconnect();
         }
+        // Hand the element back as we found it — truncation may simply have been
+        // turned off, in which case the element outlives this teardown.
+        if (ownsTabIndex) {
+            ownsTabIndex = false;
+            contentEl.removeAttribute('tabindex');
+        }
         hostEl.removeEventListener('mouseenter', handleMouseEnter);
         hostEl.removeEventListener('mouseleave', handleMouseLeave);
         hostEl.removeEventListener('focusin', handleFocusIn);

package/dist/collection/utils/utils.js

@@ -15,9 +15,16 @@ export const debounce = (func, wait = 0) => {
         timer = setTimeout(func, wait, ...args);
     };
 };
-// Add shared color normalization utility to unify token handling across components
 /**
- * Normalizes color values to ensure consistent CSS variable usage
+ * Normalizes color values to ensure consistent CSS variable usage.
+ *
+ * This is the single low-level primitive for color-prop normalization in
+ * Pine. A component with its own semantic-keyword set (e.g. pds-chip's
+ * sentiment-to-dot-color map) should call this directly with its own
+ * `semanticMap` rather than inventing a new normalization helper. Reach for
+ * `setColor` below only when its specific text-role semantic set and
+ * `--color` output key already match what the component needs.
+ *
  * @param value - Raw token (--token), CSS variable (var(--token)), semantic name, or literal color
  * @param options.semanticMap - Optional mapping of semantic names to CSS variables
  * @returns Normalized color value or undefined for invalid inputs
@@ -42,6 +49,13 @@ export const normalizeColorValue = (value, options) => {
     // Otherwise treat as literal CSS color value
     return trimmed;
 };
+/**
+ * Convenience wrapper around `normalizeColorValue` for the common text-role
+ * semantic set (primary/secondary/accent/etc.), returned as a `--color`
+ * custom property. If a component needs a different semantic map or a
+ * different custom-property name (e.g. pds-chip's dot/icon-specific tokens),
+ * call `normalizeColorValue` directly instead of extending this function.
+ */
 export const setColor = (color, customColors) => {
     // Return an empty object for empty/whitespace/undefined inputs to avoid invalid CSS styles
     if (!color)