@pine-ds/core 4.0.0 → 4.2.0

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: '87c9b15656a2765eb9e722c85dba5c5edbe07c42', hidden: !this.isVisible }, h("div", { key: 'bd8b26ef0c33b96603313bce74505953d8fe7410', 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: '5f7fd6b70fe130d8b0915da07640bec01b3b2bcb', class: "pds-toast__message" }, h("slot", { key: '4aa0cf737b420ae51297126b423b44d2a8610226' })), this.dismissible && (h("button", { key: 'a8b8e5e9ba956b2d9cca284d114afa37b80570cf', 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: 'dac8f2099b2ab8a68d208aac288d48019df6d7e7', 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: '10913091177f60b7de464e302067998e1a847304', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: 'f61689273c965a8374e44907003f1ec83b8f28d4', 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: '7dbbcff01c291b1ec431c80fce898c1ac3b30a86' })), h("div", { key: 'f87df4b6ead21e9f96271c5717ed93b2d9992f65', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: 'def9f799ef340e59fbf34a0fb3c0271f0fcfd2ca', 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);