@pine-ds/core 3.26.4 → 3.28.0

package/components/truncation-tooltip.js

@@ -1,247 +1 @@
-import { c as computePosition, o as offset, f as flip, s as shift } from './floating-ui.dom.js';
-
-/** CSS class prefix used for truncation tooltip portal elements */
-const TOOLTIP_CLASS = 'pds-truncation-tooltip';
-/**
- * Injects the truncation tooltip styles into the document head.
- * Uses the same design tokens as pds-tooltip for visual consistency.
- * Only injects once — checks the DOM to avoid duplicates.
- *
- * Z-Index Strategy:
- * Uses --pine-z-index-nuclear (9999) to ensure tooltips appear above all other UI elements.
- * This is necessary because tooltips are portaled to document.body and must overlay:
- * - Modal dialogs
- * - Dropdown menus
- * - Other floating UI elements
- * If you encounter z-index conflicts, ensure your overlays use Pine's z-index tokens
- * or adjust --pine-z-index-nuclear in your theme.
- */
-function injectStyles() {
-    if (document.querySelector('[data-pds-truncation-tooltip]'))
-        return;
-    const style = document.createElement('style');
-    style.setAttribute('data-pds-truncation-tooltip', '');
-    style.textContent = `
-    .${TOOLTIP_CLASS} {
-      position: fixed;
-      z-index: var(--pine-z-index-nuclear, 9999);
-    }
-    .${TOOLTIP_CLASS}__content {
-      background-color: var(--pine-color-primary, #1a1a2e);
-      border-radius: calc(var(--pine-dimension-xs, 4px) * 1.25);
-      box-shadow: var(--pine-box-shadow, 0 2px 8px rgba(0,0,0,0.15));
-      color: var(--pine-color-text-primary, #fff);
-      cursor: text;
-      font-family: var(--pine-font-family-body, sans-serif);
-      font-size: var(--pine-font-size-body-sm, 0.875rem);
-      letter-spacing: var(--pine-letter-spacing, normal);
-      line-height: var(--pine-line-height-body, 1.5);
-      max-width: 320px;
-      opacity: 0;
-      padding: var(--pine-dimension-xs, 4px) calc(var(--pine-dimension-md, 12px) / 2);
-      transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
-      user-select: text;
-      visibility: hidden;
-      width: max-content;
-      word-break: break-word;
-    }
-    .${TOOLTIP_CLASS}--visible .${TOOLTIP_CLASS}__content {
-      opacity: 1;
-      visibility: visible;
-    }
-  `;
-    document.head.appendChild(style);
-}
-/**
- * Checks if an element's content is overflowing horizontally (i.e. text is truncated).
- */
-function isOverflowing(el) {
-    return el.scrollWidth > el.clientWidth;
-}
-/**
- * Sets up automatic tooltip behavior for a truncated element.
- *
- * When the element's text overflows, hovering or focusing the host element
- * will display a tooltip showing the full text content. The tooltip is
- * rendered as a portal on document.body and positioned with Floating UI.
- *
- * @returns A cleanup function that removes all listeners, observers, and DOM elements.
- */
-function setupTruncationTooltip(options) {
-    const { hostEl, contentEl, getTooltipText, placement = 'top' } = options;
-    injectStyles();
-    let portalEl = null;
-    let isHovering = false;
-    let isHoveringPortal = false;
-    let isFocused = false;
-    let hideTimeout = null;
-    let resizeObserver = null;
-    let resizeDebounce = null;
-    // Use ResizeObserver to re-evaluate overflow when the element resizes
-    // Debounced to prevent performance issues during rapid window resizing
-    if (typeof ResizeObserver !== 'undefined') {
-        resizeObserver = new ResizeObserver(() => {
-            if (resizeDebounce) {
-                clearTimeout(resizeDebounce);
-            }
-            resizeDebounce = setTimeout(() => {
-                resizeDebounce = null;
-                // If tooltip is showing but text no longer overflows, hide it
-                if (portalEl && portalEl.isConnected && !isOverflowing(contentEl)) {
-                    hideTooltip();
-                }
-            }, 100);
-        });
-        resizeObserver.observe(contentEl);
-    }
-    function createPortal() {
-        if (portalEl)
-            return;
-        const text = getTooltipText();
-        if (!text || text.trim() === '')
-            return;
-        portalEl = document.createElement('div');
-        portalEl.className = TOOLTIP_CLASS;
-        portalEl.setAttribute('role', 'tooltip');
-        portalEl.setAttribute('aria-hidden', 'false');
-        const contentDiv = document.createElement('div');
-        contentDiv.className = `${TOOLTIP_CLASS}__content`;
-        contentDiv.textContent = text.trim();
-        portalEl.appendChild(contentDiv);
-        document.body.appendChild(portalEl);
-        // Allow the user to hover into the tooltip to select/copy text
-        portalEl.addEventListener('mouseenter', handlePortalMouseEnter);
-        portalEl.addEventListener('mouseleave', handlePortalMouseLeave);
-        positionTooltip().then(() => {
-            if (portalEl) {
-                portalEl.classList.add(`${TOOLTIP_CLASS}--visible`);
-            }
-        });
-    }
-    async function positionTooltip() {
-        if (!portalEl)
-            return;
-        try {
-            const { x, y } = await computePosition(hostEl, portalEl, {
-                placement,
-                strategy: 'fixed',
-                middleware: [offset(4), flip(), shift({ padding: 5 })],
-            });
-            Object.assign(portalEl.style, {
-                left: `${x}px`,
-                top: `${y}px`,
-            });
-        }
-        catch (_a) {
-            // Fallback: position above the element with bounds checking
-            if (portalEl) {
-                const rect = hostEl.getBoundingClientRect();
-                const portalRect = portalEl.getBoundingClientRect();
-                const padding = 5;
-                // Ensure tooltip stays within viewport bounds
-                const left = Math.max(padding, Math.min(rect.left, window.innerWidth - portalRect.width - padding));
-                const top = Math.max(padding, rect.top - portalRect.height - 8);
-                portalEl.style.left = `${left}px`;
-                portalEl.style.top = `${top}px`;
-            }
-        }
-    }
-    function removePortal() {
-        if (portalEl) {
-            portalEl.removeEventListener('mouseenter', handlePortalMouseEnter);
-            portalEl.removeEventListener('mouseleave', handlePortalMouseLeave);
-            portalEl.classList.remove(`${TOOLTIP_CLASS}--visible`);
-            // Check if portal is still in the DOM before removing
-            if (portalEl.parentNode && portalEl.isConnected) {
-                try {
-                    portalEl.parentNode.removeChild(portalEl);
-                }
-                catch (e) {
-                    // Portal was already removed, ignore error
-                }
-            }
-            portalEl = null;
-        }
-    }
-    function cancelHideTimeout() {
-        if (hideTimeout !== null) {
-            clearTimeout(hideTimeout);
-            hideTimeout = null;
-        }
-    }
-    function showTooltip() {
-        cancelHideTimeout();
-        if (!isOverflowing(contentEl))
-            return;
-        createPortal();
-    }
-    function hideTooltip() {
-        if (isHovering || isHoveringPortal || isFocused)
-            return;
-        removePortal();
-    }
-    /**
-     * Schedules tooltip removal after a short delay.
-     *
-     * The 100ms delay serves two purposes:
-     * 1. Gives users time to move their cursor from the truncated text to the tooltip portal
-     *    without it closing, enabling text selection/copying from the tooltip
-     * 2. Prevents flickering when the user briefly moves the cursor during normal interaction
-     */
-    function scheduleHide() {
-        cancelHideTimeout();
-        hideTimeout = setTimeout(() => {
-            hideTimeout = null;
-            hideTooltip();
-        }, 100);
-    }
-    function handleMouseEnter() {
-        isHovering = true;
-        showTooltip();
-    }
-    function handleMouseLeave() {
-        isHovering = false;
-        scheduleHide();
-    }
-    function handlePortalMouseEnter() {
-        isHoveringPortal = true;
-        cancelHideTimeout();
-    }
-    function handlePortalMouseLeave() {
-        isHoveringPortal = false;
-        scheduleHide();
-    }
-    function handleFocusIn() {
-        isFocused = true;
-        showTooltip();
-    }
-    function handleFocusOut() {
-        isFocused = false;
-        scheduleHide();
-    }
-    hostEl.addEventListener('mouseenter', handleMouseEnter);
-    hostEl.addEventListener('mouseleave', handleMouseLeave);
-    hostEl.addEventListener('focusin', handleFocusIn);
-    hostEl.addEventListener('focusout', handleFocusOut);
-    // Return cleanup function
-    return () => {
-        cancelHideTimeout();
-        if (resizeDebounce) {
-            clearTimeout(resizeDebounce);
-            resizeDebounce = null;
-        }
-        if (resizeObserver) {
-            resizeObserver.disconnect();
-        }
-        hostEl.removeEventListener('mouseenter', handleMouseEnter);
-        hostEl.removeEventListener('mouseleave', handleMouseLeave);
-        hostEl.removeEventListener('focusin', handleFocusIn);
-        hostEl.removeEventListener('focusout', handleFocusOut);
-        removePortal();
-    };
-}
-
-export { setupTruncationTooltip as s };
-//# sourceMappingURL=truncation-tooltip.js.map
-
-//# sourceMappingURL=truncation-tooltip.js.map
+import{c as n,o as e,f as t,s as i}from"./floating-ui.dom.js";const o="pds-truncation-tooltip";function a(n){return n.scrollWidth>n.clientWidth}function s(s){const{hostEl:r,contentEl:c,getTooltipText:u,placement:l="top"}=s;!function(){if(document.querySelector("[data-pds-truncation-tooltip]"))return;const n=document.createElement("style");n.setAttribute("data-pds-truncation-tooltip",""),n.textContent=`\n    .${o} {\n      position: fixed;\n      z-index: var(--pine-z-index-nuclear, 9999);\n    }\n    .${o}__content {\n      background-color: var(--pine-color-primary, #1a1a2e);\n      border-radius: calc(var(--pine-dimension-xs, 4px) * 1.25);\n      box-shadow: var(--pine-box-shadow, 0 2px 8px rgba(0,0,0,0.15));\n      color: var(--pine-color-text-primary, #fff);\n      cursor: text;\n      font-family: var(--pine-font-family-body, sans-serif);\n      font-size: var(--pine-font-size-body-sm, 0.875rem);\n      letter-spacing: var(--pine-letter-spacing, normal);\n      line-height: var(--pine-line-height-body, 1.5);\n      max-width: 320px;\n      opacity: 0;\n      padding: var(--pine-dimension-xs, 4px) calc(var(--pine-dimension-md, 12px) / 2);\n      transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n      user-select: text;\n      visibility: hidden;\n      width: max-content;\n      word-break: break-word;\n    }\n    .${o}--visible .${o}__content {\n      opacity: 1;\n      visibility: visible;\n    }\n  `,document.head.appendChild(n)}();let d=null,f=!1,p=!1,m=!1,v=null,x=null,b=null;function y(){if(d){if(d.removeEventListener("mouseenter",_),d.removeEventListener("mouseleave",k),d.classList.remove(`${o}--visible`),d.parentNode&&d.isConnected)try{d.parentNode.removeChild(d)}catch(n){}d=null}}function h(){null!==v&&(clearTimeout(v),v=null)}function g(){h(),a(c)&&function(){if(d)return;const a=u();if(!a||""===a.trim())return;d=document.createElement("div"),d.className=o,d.setAttribute("role","tooltip"),d.setAttribute("aria-hidden","false");const s=document.createElement("div");s.className=`${o}__content`,s.textContent=a.trim(),d.appendChild(s),document.body.appendChild(d),d.addEventListener("mouseenter",_),d.addEventListener("mouseleave",k),async function(){if(d)try{const{x:o,y:a}=await n(r,d,{placement:l,strategy:"fixed",middleware:[e(4),t(),i({padding:5})]});Object.assign(d.style,{left:`${o}px`,top:`${a}px`})}catch(n){if(d){const n=r.getBoundingClientRect(),e=d.getBoundingClientRect(),t=5,i=Math.max(t,Math.min(n.left,window.innerWidth-e.width-t)),o=Math.max(t,n.top-e.height-8);d.style.left=`${i}px`,d.style.top=`${o}px`}}}().then((()=>{d&&d.classList.add(`${o}--visible`)}))}()}function w(){f||p||m||y()}function $(){h(),v=setTimeout((()=>{v=null,w()}),100)}function T(){f=!0,g()}function z(){f=!1,$()}function _(){p=!0,h()}function k(){p=!1,$()}function M(){m=!0,g()}function O(){m=!1,$()}return"undefined"!=typeof ResizeObserver&&(x=new ResizeObserver((()=>{b&&clearTimeout(b),b=setTimeout((()=>{b=null,d&&d.isConnected&&!a(c)&&w()}),100)})),x.observe(c)),r.addEventListener("mouseenter",T),r.addEventListener("mouseleave",z),r.addEventListener("focusin",M),r.addEventListener("focusout",O),()=>{h(),b&&(clearTimeout(b),b=null),x&&x.disconnect(),r.removeEventListener("mouseenter",T),r.removeEventListener("mouseleave",z),r.removeEventListener("focusin",M),r.removeEventListener("focusout",O),y()}}export{s}

package/components/utils.js

@@ -1,74 +1 @@
-const hasShadowDom = (el) => {
-    return !!el.shadowRoot && !!el.attachShadow;
-};
-const debounceEvent = (event, wait) => {
-    const original = event._original || event;
-    return {
-        _original: event,
-        emit: debounce(original.emit.bind(original), wait),
-    };
-};
-const debounce = (func, wait = 0) => {
-    let timer;
-    return (...args) => {
-        clearTimeout(timer);
-        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
- * @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
- */
-const normalizeColorValue = (value, options) => {
-    if (!value)
-        return undefined;
-    const trimmed = value.trim();
-    // Treat whitespace-only as undefined to avoid invalid CSS values
-    if (trimmed === '')
-        return undefined;
-    // If a semantic map is provided and the value matches a key, return mapped CSS var
-    if ((options === null || options === void 0 ? void 0 : options.semanticMap) && options.semanticMap[trimmed]) {
-        return options.semanticMap[trimmed];
-    }
-    // If already a CSS var, pass through
-    if (trimmed.startsWith('var('))
-        return trimmed;
-    // If raw token is provided (e.g., --pine-color-foo), wrap in var(...)
-    if (trimmed.startsWith('--'))
-        return `var(${trimmed})`;
-    // Otherwise treat as literal CSS color value
-    return trimmed;
-};
-const setColor = (color, customColors) => {
-    // Return an empty object for empty/whitespace/undefined inputs to avoid invalid CSS styles
-    if (!color)
-        return {};
-    const defaultColors = {
-        primary: 'var(--pine-color-text-primary)',
-        secondary: 'var(--pine-color-text-secondary)',
-        neutral: 'var(--pine-color-text-neutral)',
-        accent: 'var(--pine-color-text-accent)',
-        danger: 'var(--pine-color-text-danger)',
-        info: 'var(--pine-color-text-info)',
-        success: 'var(--pine-color-text-success)',
-        warning: 'var(--pine-color-text-warning)',
-    };
-    // Merge defaults with any custom overrides so defaults are preserved
-    const semanticMap = Object.assign(Object.assign({}, defaultColors), (customColors || {}));
-    // Use the shared normalizer so components accept semantic names, raw tokens, var(...), or literals
-    const resolved = normalizeColorValue(color, { semanticMap });
-    // Ensure we never return an undefined style value; if unresolved, omit the property
-    if (!resolved)
-        return {};
-    return {
-        '--color': resolved
-    };
-};
-
-export { debounceEvent as d, hasShadowDom as h, normalizeColorValue as n, setColor as s };
-//# sourceMappingURL=utils.js.map
-
-//# sourceMappingURL=utils.js.map
+const r=r=>!!r.shadowRoot&&!!r.attachShadow,e=(r,e)=>{const n=r._original||r;return{_original:r,emit:t(n.emit.bind(n),e)}},t=(r,e=0)=>{let t;return(...n)=>{clearTimeout(t),t=setTimeout(r,e,...n)}},n=(r,e)=>{if(!r)return;const t=r.trim();return""!==t?(null==e?void 0:e.semanticMap)&&e.semanticMap[t]?e.semanticMap[t]:t.startsWith("var(")?t:t.startsWith("--")?`var(${t})`:t:void 0},o=(r,e)=>{if(!r)return{};const t=Object.assign(Object.assign({},{primary:"var(--pine-color-text-primary)",secondary:"var(--pine-color-text-secondary)",neutral:"var(--pine-color-text-neutral)",accent:"var(--pine-color-text-accent)",danger:"var(--pine-color-text-danger)",info:"var(--pine-color-text-info)",success:"var(--pine-color-text-success)",warning:"var(--pine-color-text-warning)"}),e||{}),o=n(r,{semanticMap:t});return o?{"--color":o}:{}};export{e as d,r as h,n,o as s}

package/dist/cjs/attributes-oNMnBEnP.js

@@ -83,6 +83,3 @@ const inheritAriaAttributes = (el, ignoreList) => {
 
 exports.inheritAriaAttributes = inheritAriaAttributes;
 exports.inheritAttributes = inheritAttributes;
-//# sourceMappingURL=attributes-oNMnBEnP.js.map
-
-//# sourceMappingURL=attributes-oNMnBEnP.js.map

package/dist/cjs/closest-BZXvuB_Y.js

@@ -9,6 +9,3 @@ const closest = (selector, el) => {
 };
 
 exports.closest = closest;
-//# sourceMappingURL=closest-BZXvuB_Y.js.map
-
-//# sourceMappingURL=closest-BZXvuB_Y.js.map

package/dist/cjs/floating-ui.dom-BZk7Blsu.js

@@ -1633,6 +1633,3 @@ exports.flip = flip;
 exports.offset = offset;
 exports.shift = shift;
 exports.size = size;
-//# sourceMappingURL=floating-ui.dom-BZk7Blsu.js.map
-
-//# sourceMappingURL=floating-ui.dom-BZk7Blsu.js.map

package/dist/cjs/form-CpM5Z8q7.js

@@ -63,6 +63,3 @@ exports.exposeTypeProperty = exposeTypeProperty;
 exports.isRequired = isRequired;
 exports.isSpecTest = isSpecTest;
 exports.messageId = messageId;
-//# sourceMappingURL=form-CpM5Z8q7.js.map
-
-//# sourceMappingURL=form-CpM5Z8q7.js.map

package/dist/cjs/i18n-format-CrpIhahc.js

@@ -0,0 +1,64 @@
+'use strict';
+
+/**
+ * i18n formatting helpers for Pine components.
+ *
+ * Pine stays string-agnostic: user-facing text is supplied by the consumer as
+ * props (English-defaulted). These helpers only handle the two things a prop
+ * value can't express on its own — interpolating live component state into a
+ * translated template, and picking the right plural form. No stored strings, no
+ * locale registry; the locale is read from the DOM (`lang`), the web-standard
+ * signal a consumer already sets.
+ *
+ * Two limitations of DOM-`lang` locale resolution, both inherent to inferring
+ * locale from the DOM rather than being told it:
+ *
+ * 1. Not reactive. `resolveLocale` is read during render; Stencil has no
+ *    reactive dependency on a DOM attribute, so changing `lang` at runtime
+ *    (`document.documentElement.lang = 'pl'`) does NOT re-render mounted
+ *    components — the plural form stays stale until unrelated state forces a
+ *    render. Fine when locale changes via full-page navigation; a consumer that
+ *    switches locale client-side should pass the already-formatted/pluralized
+ *    string as the prop instead.
+ * 2. Does not cross shadow boundaries. `el.closest('[lang]')` stops at the host's
+ *    shadow root. A Pine component nested inside another custom element whose
+ *    `lang` sits on that outer host will not see it and falls back to
+ *    `document.documentElement.lang`. Set `lang` on (or above) the Pine element
+ *    in the same tree, or pass a pre-formatted string, when that matters.
+ */
+/** Replace `{token}` placeholders with `vars`; unknown tokens stay literal. */
+function formatMessage(template, vars) {
+    if (!vars)
+        return template;
+    return template.replace(/\{(\w+)\}/g, (_match, key) => key in vars ? String(vars[key]) : `{${key}}`);
+}
+/** Nearest `[lang]` ancestor, then `<html lang>`, then `'en'`. */
+function resolveLocale(el) {
+    var _a;
+    const fromEl = el && typeof el.closest === 'function' ? (_a = el.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.getAttribute('lang') : null;
+    const fromDoc = typeof document !== 'undefined' ? document.documentElement.lang : '';
+    return fromEl || fromDoc || 'en';
+}
+/**
+ * Pick the CLDR plural form for `count` in the element's locale (via the
+ * platform `Intl.PluralRules`) and interpolate `{count}`. `forms` come from the
+ * caller — component props, English-defaulted — and fall back to `other`.
+ */
+function pluralize(el, count, forms, vars) {
+    let category = 'other';
+    try {
+        category = new Intl.PluralRules(resolveLocale(el)).select(count);
+    }
+    catch (_a) {
+        /* invalid locale tag → fall back to 'other' */
+    }
+    // Prefer the selected category, then the required `other`, then `one`; never
+    // return empty. `||` (not `??`) so an empty-string form is skipped too, not
+    // treated as present — a bare `{count}` still shows the number rather than
+    // leaving the trigger with no accessible name.
+    const template = forms[category] || forms.other || forms.one || '{count}';
+    return formatMessage(template, Object.assign({ count }, vars));
+}
+
+exports.formatMessage = formatMessage;
+exports.pluralize = pluralize;