@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/cjs/pds-icon.cjs.entry.js

@@ -1,8 +1,7 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-46fb0736.js');
+var index = require('./index-D9iJuJCP.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
 let missingAssetPathWarning = false;
 /**
@@ -20,13 +19,13 @@ const getAssetPath = (path) => {
     // Get the asset path from the window object if available
     const windowAssetPath = window.__PINE_ASSET_PATH__;
     // Set the CDN Asset path using the latest version
-    const cdnAssetPath = 'https://cdn.jsdelivr.net/npm/@pine-ds/icons/dist/pds-icons/';
-    const assetBasePath = metaPineAssetPath || windowAssetPath || cdnAssetPath || '/';
+    const cdnAssetPath = 'https://cdn.jsdelivr.net/npm/@pine-ds/icons/dist/';
+    const assetBasePath = metaPineAssetPath || windowAssetPath || cdnAssetPath;
     // Display a warning if the assets are fetched from the CDN.
     if (assetBasePath.startsWith('https://cdn.jsdelivr.net/npm/') && !missingAssetPathWarning) {
         missingAssetPathWarning = true;
         console.warn(`
-      Fetching Pine asssets from jsDelivr CDN.\n\n It's recommended that you bundle Pine Assets with your application and setting the path accordingly.\n\nFor more information you read the documentation: \nhttps://pine-design-system.netlify.app/?path=/docs/resources-assets--docs
+      Fetching Pine assets from jsDelivr CDN.\n\n It's recommended that you bundle Pine Assets with your application and set the path accordingly.\n\nFor more information, read the documentation: \nhttps://pine-design-system.netlify.app/?path=/docs/guides-assets--docs
     `);
     }
     let assetPath = path;
@@ -102,13 +101,48 @@ const getUrl = (pdsIcon) => {
     }
     return null;
 };
+/**
+ * Returns `true` if the document or host element
+ * has a `dir` set to `rtl`. The host value will always
+ * take priority over the root document value.
+ */
+const isRTL = (hostEl) => {
+    if (hostEl) {
+        if (hostEl.dir !== '') {
+            return hostEl.dir.toLowerCase() === 'rtl';
+        }
+    }
+    return (document === null || document === void 0 ? void 0 : document.dir.toLowerCase()) === 'rtl';
+};
 const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
 const isStr = (val) => typeof val === 'string'; // eslint-disable-line @typescript-eslint/no-explicit-any
 const toLower = (val) => val.toLowerCase();
+/**
+ * Normalizes a color value for use as a CSS custom property value: a bare
+ * design token (--pine-color-foo) is wrapped in var(...), an already-wrapped
+ * var(--token) is passed through unchanged, and anything else (a literal CSS
+ * color, or currentColor) is passed through as-is. Mirrors the equivalent
+ * utility in the `pine` repo's `libs/core/src/utils/utils.ts`
+ * (`normalizeColorValue`) — duplicated here rather than imported because
+ * `@pine-ds/core` already depends on `@pine-ds/icons`, so the reverse
+ * dependency would be circular.
+ */
+const normalizeColorValue = (value) => {
+    if (!isStr(value))
+        return undefined;
+    const trimmed = value.trim();
+    if (trimmed === '')
+        return undefined;
+    if (trimmed.startsWith('var('))
+        return trimmed;
+    if (trimmed.startsWith('--'))
+        return `var(${trimmed})`;
+    return trimmed;
+};
 /**
  * Elements inside of web components sometimes need to inherit global attributes
- * set on the host. For example, the inner input in `ion-input` should inherit
- * the `title` attribute that developers set directly on `ion-input`. This
+ * set on the host. For example, the inner input in `pds-input` should inherit
+ * the `title` attribute that developers set directly on `pds-input`. This
  * helper function should be called in componentWillLoad and assigned to a variable
  * that is later used in the render function.
  *
@@ -128,6 +162,78 @@ const inheritAttributes = (el, attributes = []) => {
     });
     return attributeObject;
 };
+/**
+ * Determines if an icon should be flipped when RTL is enabled
+ * @param iconName - The name of the icon to check
+ * @param hostEl - Optional host element to check for RTL direction
+ * @returns {boolean} - True if the icon should be flipped in RTL mode, false otherwise
+ */
+const shouldRtlFlipIcon = (iconName, hostEl) => {
+    // First check if we're in RTL mode
+    const rtlEnabled = isRTL(hostEl);
+    // Only flip if we're in RTL mode and the icon is in the flip list
+    return rtlEnabled && ICONS_TO_FLIP.includes(iconName);
+};
+/**
+ * Array of available icon names
+ */
+const ICONS_TO_FLIP = [
+    'align-horizontal-bottom',
+    'align-horizontal-center',
+    'align-horizontal-top',
+    'align-left',
+    'align-right',
+    'align-vertical-left',
+    'align-vertical-right',
+    'arrow-corner',
+    'arrow-left',
+    'arrow-right',
+    'calendar-schedule',
+    'caret-left',
+    'caret-right',
+    'cart',
+    'cart-add',
+    'comment',
+    'comment-no',
+    'conversation',
+    'copy',
+    'copy-07',
+    'delete-key',
+    'delete-x',
+    'downsell',
+    'drawer-collapse',
+    'drawer-expand',
+    'duplicate',
+    'feedback',
+    'file-lock',
+    'file-search',
+    'form-field',
+    'form-filled',
+    'left-small',
+    'launch',
+    'list-bullet',
+    'list-numbers',
+    'margin-left',
+    'margin-right',
+    'move-left',
+    'move-right',
+    'newsletter-2',
+    'one-off-session',
+    'quote',
+    'redo',
+    'reset-password',
+    'right-small',
+    'send-message',
+    'share',
+    'super-admin',
+    'tablet-landscape',
+    'undo',
+    'user-star',
+    'user-star-filled',
+    'users',
+    'users-filled',
+    'users-tone'
+];
 
 const validateContent = (svgContent) => {
     const div = document.createElement('div');
@@ -185,10 +291,18 @@ const getSvgContent = (url, sanitize = false) => {
                 if (!parser) {
                     parser = new DOMParser();
                 }
-                const doc = parser.parseFromString(url, 'text/html');
-                const svg = doc.querySelector('svg');
-                if (svg) {
-                    pdsIconContent.set(url, svg.outerHTML);
+                try {
+                    const doc = parser.parseFromString(url, 'text/html');
+                    const svg = doc.querySelector('svg');
+                    if (svg) {
+                        pdsIconContent.set(url, svg.outerHTML);
+                    }
+                    else {
+                        pdsIconContent.set(url, '');
+                    }
+                }
+                catch (error) {
+                    pdsIconContent.set(url, '');
                 }
                 return Promise.resolve();
             }
@@ -198,12 +312,25 @@ const getSvgContent = (url, sanitize = false) => {
                     if (rsp.ok) {
                         return rsp.text().then((svgContent) => {
                             if (svgContent && sanitize !== false) {
-                                svgContent = validateContent(svgContent);
+                                try {
+                                    svgContent = validateContent(svgContent);
+                                }
+                                catch (validationError) {
+                                    svgContent = '';
+                                }
                             }
                             pdsIconContent.set(url, svgContent || '');
                         });
                     }
+                    else {
+                        // Handle HTTP errors
+                        throw new Error(`Failed to load SVG: ${rsp.status} ${rsp.statusText}`);
+                    }
+                }).catch((error) => {
+                    // Handle all fetch errors gracefully
+                    console.warn('Failed to load SVG:', url, error);
                     pdsIconContent.set(url, '');
+                    // Don't re-throw to prevent unhandled promise rejections
                 });
                 requests.set(url, req);
             }
@@ -216,25 +343,26 @@ const getSvgContent = (url, sanitize = false) => {
     return req;
 };
 
-const pdsIconCss = ":host{--dimension-icon-height:16px;--dimension-icon-width:16px;--color-icon-fill:currentColor;contain:strict;display:inline-block;fill:var(--color-icon-fill);height:var(--dimension-icon-height);width:var(--dimension-icon-width)}:host .pdsicon{fill:var(--color-icon-fill)}.pds-icon-fill-none{fill:none}.icon-inner,.pds-icon,svg{display:block;height:100%;width:100%}";
-const PdsIconStyle0 = pdsIconCss;
+const pdsIconCss = () => `:host{--dimension-icon-height:16px;--dimension-icon-width:16px;--color-icon-fill:currentColor;contain:strict;display:inline-block;fill:var(--color-icon-fill);-ms-flex-negative:0;flex-shrink:0;height:var(--dimension-icon-height);width:var(--dimension-icon-width)}:host .pdsicon{fill:var(--color-icon-fill)}.pds-icon-fill-none{fill:none}.icon-inner,.pds-icon,svg{display:block;height:100%;width:100%}:host(.flip-rtl):host-context([dir=rtl]) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.flip-rtl:dir(rtl)) .icon-inner{-webkit-transform:scaleX(-1);transform:scaleX(-1)}:host(.flip-rtl:dir(ltr)) .icon-inner{-webkit-transform:scaleX(1);transform:scaleX(1)}`;
 
+// The attributes that give an icon its own accessible name.
+const NAMING_ATTRIBUTES = ['aria-label', 'aria-labelledby'];
 const PdsIcon = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.didLoadIcon = false;
+        this.iconName = null;
+        this.warnedUnnamedFocusable = false;
         this.inheritedAttributes = {}; // eslint-disable-line @typescript-eslint/no-explicit-any
-        this.hasAriaHidden = () => {
-            const { el } = this;
-            return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';
-        };
-        this.ariaLabel = undefined;
+        this.isFocusable = false;
         this.isVisible = false;
-        this.svgContent = undefined;
-        this.color = undefined;
-        this.icon = undefined;
-        this.name = undefined;
+        /**
+         * The size of the icon. This can be
+         * 'small', 'regular', 'medium', 'large', or a
+         * custom value (40px, 1rem, etc)
+         *
+         */
         this.size = 'regular';
-        this.src = undefined;
     }
     iconSize() {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -253,32 +381,72 @@ const PdsIcon = class {
     }
     componentDidLoad() {
         this.setCSSVariables();
+        if (!this.didLoadIcon) {
+            this.loadIcon();
+        }
+        // Fallback: Ensure icon loads even if IntersectionObserver doesn't fire
+        setTimeout(() => {
+            if (!this.svgContent && !this.isVisible) {
+                this.isVisible = true;
+                this.loadIcon();
+            }
+        }, 100);
+        // Additional fallback for client-side navigation (React Router, etc.)
+        // React's useLayoutEffect and rendering cycles can delay visibility detection
+        setTimeout(() => {
+            if (!this.svgContent && !this.isVisible) {
+                this.isVisible = true;
+                this.loadIcon();
+            }
+        }, 500);
     }
     componentWillLoad() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
+        this.inheritedAttributes = inheritAttributes(this.el, NAMING_ATTRIBUTES);
+        this.isFocusable = this.el.hasAttribute('tabindex');
         this.setCSSVariables();
     }
     setCSSVariables() {
+        var _a;
         this.el.style.setProperty(`--dimension-icon-height`, this.iconSize());
         this.el.style.setProperty(`--dimension-icon-width`, this.iconSize());
-        this.el.style.setProperty(`--color-icon-fill`, typeof this.color !== 'undefined' ? this.color : 'currentColor');
+        this.el.style.setProperty(`--color-icon-fill`, (_a = normalizeColorValue(this.color)) !== null && _a !== void 0 ? _a : 'currentColor');
     }
     connectedCallback() {
-        this.waitUntilVisible(this.el, '50px', () => {
+        this.observeNamingAttributes();
+        // Handle re-connection during client-side navigation
+        if (!this.isVisible && !this.svgContent) {
+            this.waitUntilVisible(this.el, '50px', () => {
+                this.isVisible = true;
+                this.loadIcon();
+            });
+        }
+        // Immediate load attempt if already visible (e.g., during React navigation)
+        if (this.isElementInViewport(this.el)) {
             this.isVisible = true;
             this.loadIcon();
-        });
+        }
     }
     disconnectedCallback() {
         if (this.io) {
             this.io.disconnect();
             this.io = undefined;
         }
+        if (this.mo) {
+            this.mo.disconnect();
+            this.mo = undefined;
+        }
     }
     updateStyles() {
         this.setCSSVariables();
     }
+    onIconPropertyChange() {
+        this.loadIcon();
+    }
     loadIcon() {
+        // Reset load state when URL changes
+        this.didLoadIcon = false;
+        // Clear existing content to prevent stale content when switching icons
+        this.svgContent = undefined;
         if (this.isVisible) {
             const url = getUrl(this);
             if (url) {
@@ -286,22 +454,76 @@ const PdsIcon = class {
                     this.svgContent = pdsIconContent.get(url);
                 }
                 else {
-                    getSvgContent(url).then(() => (this.svgContent = pdsIconContent.get(url)));
+                    // Fix: Ensure promise callback triggers re-render and handle errors
+                    getSvgContent(url)
+                        .then(() => {
+                        // Force re-render by setting state in next tick
+                        setTimeout(() => {
+                            this.svgContent = pdsIconContent.get(url);
+                        }, 0);
+                    })
+                        .catch(() => {
+                        // Handle fetch errors gracefully
+                        this.svgContent = '';
+                    });
                 }
+                this.didLoadIcon = true;
             }
         }
-        const label = getName(this.name, this.icon);
-        if (label) {
-            this.ariaLabel = label.replace(/\-/g, ' ');
-        }
+        this.iconName = getName(this.name, this.icon);
     }
     render() {
-        const { ariaLabel, inheritedAttributes } = this;
-        return (index.h(index.Host, Object.assign({ key: '4bbc232e2530d43e8b5afefb754486d94ea6538b', "aria-label": ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null, alt: "", role: "img", class: Object.assign({}, createColorClasses(this.color)) }, inheritedAttributes), this.svgContent ? (index.h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (index.h("div", { class: "icon-inner" }))));
+        const { flipRtl, iconName, inheritedAttributes } = this;
+        const shouldIconAutoFlip = iconName
+            ? shouldRtlFlipIcon(iconName, this.el) && flipRtl !== false
+            : false;
+        const shouldFlip = flipRtl || shouldIconAutoFlip;
+        // An icon is decorative unless the author names it. A decorative icon is hidden
+        // from assistive technology, so it contributes nothing to the accessible name of
+        // the button or link it sits inside. Naming it from `name` instead would put an
+        // icon id ("rocket-tone") into that control's name, where neither a screen reader
+        // nor a page-inspecting agent can tell it apart from the real label.
+        //
+        // A focusable icon stays exposed even without a name: hiding something that
+        // takes focus leaves keyboard users on an element a screen reader can't see.
+        const isNamed = NAMING_ATTRIBUTES.some((attr) => inheritedAttributes[attr] !== undefined);
+        const isDecorative = !isNamed && !this.isFocusable;
+        return (index.h(index.Host
+        // undefined, not null: null would strip an aria-hidden the author set on a
+        // named icon once the component re-renders.
+        , Object.assign({ key: '6597475535756e7174072dc25c982137724d439d', "aria-hidden": isDecorative ? 'true' : undefined, alt: "", role: isDecorative ? null : 'img', class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'flip-rtl': shouldFlip, 'icon-rtl': shouldFlip && isRTL(this.el) }) }, inheritedAttributes), this.svgContent ? (index.h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (index.h("div", { class: "icon-inner" }))));
     }
     /*****
      * Private Methods
      ****/
+    // The hide/expose decision reads the naming attributes and tabindex, which can
+    // change after load (a React prop going from undefined to a string, or
+    // setAttribute from script). Re-read them when they do.
+    observeNamingAttributes() {
+        if (typeof MutationObserver === 'undefined' || this.mo)
+            return;
+        this.mo = new MutationObserver(() => {
+            const next = Object.assign({}, this.inheritedAttributes);
+            let changed = false;
+            NAMING_ATTRIBUTES.forEach((attr) => {
+                var _a;
+                const value = (_a = this.el.getAttribute(attr)) !== null && _a !== void 0 ? _a : undefined;
+                if (next[attr] !== value) {
+                    if (value === undefined) {
+                        delete next[attr];
+                    }
+                    else {
+                        next[attr] = value;
+                    }
+                    changed = true;
+                }
+            });
+            if (changed)
+                this.inheritedAttributes = next;
+            this.isFocusable = this.el.hasAttribute('tabindex');
+        });
+        this.mo.observe(this.el, { attributes: true, attributeFilter: [...NAMING_ATTRIBUTES, 'tabindex'] });
+    }
     waitUntilVisible(el, rootMargin, cb) {
         if (typeof window !== 'undefined' && (window).IntersectionObserver) {
             const io = (this.io = new (window).IntersectionObserver((data) => {
@@ -312,6 +534,18 @@ const PdsIcon = class {
                 }
             }, { rootMargin }));
             io.observe(el);
+            // Safety timeout for client-side navigation scenarios
+            // Sometimes IntersectionObserver doesn't fire during React navigation
+            setTimeout(() => {
+                if (this.io && !this.isVisible) {
+                    // Check if element is actually visible in viewport
+                    if (this.isElementInViewport(el)) {
+                        this.io.disconnect();
+                        this.io = undefined;
+                        cb();
+                    }
+                }
+            }, 1000);
         }
         else {
             // browser doesn't support IntersectionObserver
@@ -319,14 +553,72 @@ const PdsIcon = class {
             cb();
         }
     }
+    isElementInViewport(el) {
+        if (!el || !el.isConnected)
+            return false;
+        const rect = el.getBoundingClientRect();
+        const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+        const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+        return (rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= windowHeight &&
+            rect.right <= windowWidth) || (
+        // Also consider partially visible elements
+        rect.top < windowHeight &&
+            rect.bottom > 0 &&
+            rect.left < windowWidth &&
+            rect.right > 0);
+    }
+    /**
+     * Debug method to help diagnose loading issues
+     * Call from browser console: document.querySelector('pds-icon').debugIconState()
+     */
+    debugIconState() {
+        var _a;
+        const url = getUrl(this);
+        const rect = this.el.getBoundingClientRect();
+        console.log('PdsIcon Debug State:', {
+            name: this.name,
+            src: this.src,
+            icon: this.icon,
+            iconName: this.iconName,
+            url,
+            isVisible: this.isVisible,
+            didLoadIcon: this.didLoadIcon,
+            hasSvgContent: !!this.svgContent,
+            svgContentLength: ((_a = this.svgContent) === null || _a === void 0 ? void 0 : _a.length) || 0,
+            isInCache: url ? pdsIconContent.has(url) : false,
+            cachedContent: url ? pdsIconContent.get(url) : null,
+            element: this.el,
+            // Client-side navigation specific debug info
+            isConnected: this.el.isConnected,
+            isInViewport: this.isElementInViewport(this.el),
+            hasIntersectionObserver: !!this.io,
+            boundingClientRect: rect,
+            windowDimensions: {
+                width: window.innerWidth || document.documentElement.clientWidth,
+                height: window.innerHeight || document.documentElement.clientHeight
+            }
+        });
+    }
     static get assetsDirs() { return ["svg"]; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "size": ["updateStyles"],
-        "color": ["updateStyles"],
-        "name": ["loadIcon"],
-        "src": ["loadIcon"],
-        "icon": ["loadIcon"]
+        "size": [{
+                "updateStyles": 0
+            }],
+        "color": [{
+                "updateStyles": 0
+            }],
+        "name": [{
+                "onIconPropertyChange": 0
+            }],
+        "src": [{
+                "onIconPropertyChange": 0
+            }],
+        "icon": [{
+                "onIconPropertyChange": 0
+            }]
     }; }
 };
 const createColorClasses = (color) => {
@@ -337,8 +629,6 @@ const createColorClasses = (color) => {
         }
         : null;
 };
-PdsIcon.style = PdsIconStyle0;
+PdsIcon.style = pdsIconCss();
 
 exports.pds_icon = PdsIcon;
-
-//# sourceMappingURL=pds-icon.cjs.entry.js.map