@pine-ds/core 4.4.2 → 4.4.4

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-10-15T19:24:14",
+  "timestamp": "2026-10-16T19:30:58",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -889,7 +889,7 @@
             "resolved": "string",
             "references": {}
           },
-          "mutable": false,
+          "mutable": true,
           "attr": "size",
           "reflectToAttr": true,
           "docs": "Size of the avatar. Value can be preset or custom.",
@@ -1042,7 +1042,7 @@
             "resolved": "\"admin\" | \"customer\"",
             "references": {}
           },
-          "mutable": false,
+          "mutable": true,
           "attr": "variant",
           "reflectToAttr": true,
           "docs": "Determines the variant of avatar. Changes appearance accordingly.",
@@ -1113,7 +1113,12 @@
       "tag": "pds-box",
       "readme": "# pds-box\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "lightDom",
+          "text": "host-only"
+        }
+      ],
       "usage": {},
       "props": [
         {
@@ -14293,6 +14298,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "noOptionsFoundLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "no-options-found-label",
+          "reflectToAttr": false,
+          "docs": "Text shown when no options match the search. Pass a translated string to localize it; defaults to English.",
+          "docsTags": [
+            {
+              "name": "defaultValue",
+              "text": "'No options found'"
+            }
+          ],
+          "default": "'No options found'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "options",
           "type": "ComboboxOption[]",
@@ -14931,7 +14965,7 @@
             "resolved": "boolean",
             "references": {}
           },
-          "mutable": false,
+          "mutable": true,
           "attr": "border",
           "reflectToAttr": true,
           "docs": "Determines whether `copytext` should have a visible border.",
@@ -16697,7 +16731,12 @@
       "tag": "pds-drawer",
       "readme": "# pds-drawer\n\n\n",
       "docs": "A non-modal side panel composed from `pds-modal`.\n\nUnlike `pds-modal`, the page stays interactive while a drawer is open: no\ndimming, no blur, no scroll lock, no click blocking. `pds-drawer` renders a\n`pds-modal` internally with `disableTopLayer` always on and its backdrop\nsuppressed, and adds the edge, width and dismiss behavior a side panel\nneeds on top. It does not reimplement focus, Escape or dialog semantics —\nthose come from `pds-modal` unchanged.",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "lightDom",
+          "text": "renders-markup"
+        }
+      ],
       "usage": {},
       "props": [
         {
@@ -16982,7 +17021,12 @@
       "tag": "pds-drawer-content",
       "readme": "# pds-drawer-content\n\n\n",
       "docs": "Fills the drawer panel's height by default — unlike `pds-modal-content`,\nwhich caps itself against the viewport for a centered, possibly-shorter\nmodal, a drawer panel is already edge-to-edge, so its content can simply\nflex to fill whatever space the header and footer leave.",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "lightDom",
+          "text": "renders-markup"
+        }
+      ],
       "usage": {},
       "props": [],
       "methods": [],
@@ -17002,7 +17046,12 @@
       "tag": "pds-drawer-footer",
       "readme": "# pds-drawer-footer\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "lightDom",
+          "text": "renders-markup"
+        }
+      ],
       "usage": {},
       "props": [],
       "methods": [],
@@ -17022,7 +17071,12 @@
       "tag": "pds-drawer-header",
       "readme": "# pds-drawer-header\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "lightDom",
+          "text": "renders-markup"
+        }
+      ],
       "usage": {},
       "props": [],
       "methods": [],
@@ -19536,7 +19590,7 @@
             "resolved": "string",
             "references": {}
           },
-          "mutable": false,
+          "mutable": true,
           "attr": "size",
           "reflectToAttr": true,
           "docs": "Sets the size of the spinner loader. Value can be preset or custom.",
@@ -19633,7 +19687,12 @@
       "tag": "pds-modal",
       "readme": "# pds-modal\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "lightDom",
+          "text": "renders-markup"
+        }
+      ],
       "usage": {},
       "props": [
         {
@@ -19967,7 +20026,12 @@
       "tag": "pds-modal-content",
       "readme": "# pds-modal-content\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "lightDom",
+          "text": "renders-markup"
+        }
+      ],
       "usage": {},
       "props": [
         {
@@ -20030,7 +20094,12 @@
       "tag": "pds-modal-footer",
       "readme": "# pds-modal-footer\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "lightDom",
+          "text": "renders-markup"
+        }
+      ],
       "usage": {},
       "props": [],
       "methods": [],
@@ -20050,7 +20119,12 @@
       "tag": "pds-modal-header",
       "readme": "# pds-modal-header\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "lightDom",
+          "text": "renders-markup"
+        }
+      ],
       "usage": {},
       "props": [],
       "methods": [],
@@ -21791,7 +21865,7 @@
               }
             }
           },
-          "mutable": false,
+          "mutable": true,
           "attr": "placement",
           "reflectToAttr": true,
           "docs": "Determines the preferred position of the popover",
@@ -22347,6 +22421,10 @@
         {
           "name": "part",
           "text": "image-container - The container for the image"
+        },
+        {
+          "name": "lightDom",
+          "text": "renders-markup"
         }
       ],
       "usage": {},
@@ -22710,6 +22788,10 @@
         {
           "name": "slot",
           "text": "(default) - Child pds-radio components"
+        },
+        {
+          "name": "lightDom",
+          "text": "renders-markup"
         }
       ],
       "usage": {},
@@ -23036,7 +23118,12 @@
       "tag": "pds-row",
       "readme": "# pds-row\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "lightDom",
+          "text": "host-only"
+        }
+      ],
       "usage": {},
       "props": [
         {
@@ -24087,7 +24174,12 @@
       "tag": "pds-sortable",
       "readme": "# pds-sortable\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "lightDom",
+          "text": "host-only"
+        }
+      ],
       "usage": {},
       "props": [
         {
@@ -24278,6 +24370,10 @@
         {
           "name": "slot",
           "text": "sortable-item-actions - Content is placed within the `pds-sortable-item__actions` element as children. This slot is only rendered if `actions` is set to `true`."
+        },
+        {
+          "name": "lightDom",
+          "text": "renders-markup"
         }
       ],
       "usage": {},
@@ -24726,7 +24822,12 @@
       "tag": "pds-tab",
       "readme": "# pds-tabs\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "lightDom",
+          "text": "renders-markup"
+        }
+      ],
       "usage": {},
       "props": [
         {
@@ -25812,7 +25913,12 @@
       "tag": "pds-tabpanel",
       "readme": "# pds-tabs\n\n\n",
       "docs": "",
-      "docsTags": [],
+      "docsTags": [
+        {
+          "name": "lightDom",
+          "text": "renders-markup"
+        }
+      ],
       "usage": {},
       "props": [
         {
@@ -27413,6 +27519,10 @@
         {
           "name": "slot",
           "text": "content - HTML content for the tooltip"
+        },
+        {
+          "name": "lightDom",
+          "text": "renders-markup"
         }
       ],
       "usage": {},

package/dist/esm/attributes-myrJDwbR.js

@@ -0,0 +1,183 @@
+/**
+ * Sets each attribute whose current value differs, and leaves the rest alone. A `MutationObserver`
+ * that calls this to restore attributes sees its own writes once and then settles, so it can't loop.
+ * @param el - Element to write to
+ * @param attributes - Attribute names and the values they should have
+ */
+const setAttributesIfChanged = (el, attributes) => {
+    Object.entries(attributes).forEach(([name, value]) => {
+        if (el.getAttribute(name) !== value)
+            el.setAttribute(name, value);
+    });
+};
+// Classes Stencil itself puts on a host: its default `hydratedFlag` (Pine doesn't change it), and a
+// scoped component's own scope classes (`sc-pds-radio`, `sc-pds-radio-h`, `sc-pds-radio-s`), which
+// its CSS needs. Only the host's own: another `sc-` class may be a consumer's (styled-components ids).
+const isStencilClass = (el, name) => {
+    const scope = `sc-${el.localName}`;
+    return name === 'hydrated' || name === scope || name === `${scope}-h` || name === `${scope}-s`;
+};
+/**
+ * The class names in a rendered `class` value: a string, or Stencil's `{ name: boolean }` form.
+ */
+const classNamesOf = (classes) => typeof classes === 'string'
+    ? classes.split(/\s+/).filter(Boolean)
+    : Object.keys(classes).filter((name) => classes[name]);
+/**
+ * Puts back any of `expected`'s classes or style properties that are missing from `el`. It only
+ * adds what's missing, never rewrites a value that's there, because browsers normalize some style
+ * values (`flex: 1` reads back as `1 1 0%`): comparing values would rewrite them forever.
+ * @param el - Host element
+ * @param expected - Classes and style properties the component rendered
+ */
+const restoreHostStyling = (el, { classes, styles }) => {
+    const missing = classes.filter((name) => !el.classList.contains(name));
+    if (missing.length > 0)
+        el.classList.add(...missing);
+    Object.entries(styles).forEach(([name, value]) => {
+        if (value && el.style.getPropertyValue(name) === '')
+            el.style.setProperty(name, value);
+    });
+};
+/**
+ * Watches a component's own host and puts back what it rendered when something strips it. A DOM
+ * morph does: it makes the host match the server's HTML, which carries the component's props but not
+ * the classes, styles and attributes it wrote, and Stencil won't write them again because it diffs
+ * against its previous render, not the live DOM.
+ *
+ * It also means a script that removes one of these on purpose sees it come back: change them through
+ * the component's props instead.
+ * @param el - Host element
+ * @param expected - Reads what the component last rendered
+ * @returns The observer, to disconnect when the component is removed; `null` without MutationObserver
+ */
+const keepHostStyling = (el, expected) => {
+    if (typeof MutationObserver === 'undefined')
+        return null;
+    const observer = new MutationObserver((records) => {
+        const styling = expected();
+        // A strip takes Stencil's own classes too: without `hydrated` Stencil hides the component, and
+        // without its scope classes a scoped component's CSS stops matching. Put back only the ones that
+        // were there, so this never runs ahead of Stencil.
+        const stencilClasses = records
+            .filter((record) => record.attributeName === 'class' && record.oldValue != null)
+            .flatMap((record) => classNamesOf(record.oldValue).filter((name) => isStencilClass(el, name)));
+        restoreHostStyling(el, Object.assign(Object.assign({}, styling), { classes: [...styling.classes, ...stencilClasses] }));
+        // An attribute the component still renders comes back with the value it had, which is what
+        // Stencil wrote (a boolean `true` lands as an empty value). One it stopped rendering stays
+        // removed, since that was Stencil's own write.
+        records.forEach(({ attributeName: name, oldValue }) => {
+            var _a;
+            const rendered = (_a = styling.attributes) === null || _a === void 0 ? void 0 : _a[name];
+            if (oldValue == null || rendered == null || rendered === false || el.hasAttribute(name))
+                return;
+            el.setAttribute(name, oldValue);
+        });
+    });
+    observer.observe(el, { attributes: true, attributeOldValue: true });
+    return observer;
+};
+/**
+ * Inherit attributes from the host element
+ * @param el - Host element
+ * @param attributes - Array of attributes to inherit
+ */
+const inheritAttributes = (el, attributes = []) => {
+    const attributeObject = {};
+    attributes.forEach((attr) => {
+        if (el.hasAttribute(attr)) {
+            const value = el.getAttribute(attr);
+            if (value !== null) {
+                attributeObject[attr] = el.getAttribute(attr);
+            }
+            el.removeAttribute(attr);
+        }
+    });
+    return attributeObject;
+};
+/**
+ * List of available ARIA attributes + `role`.
+ * Removed deprecated attributes.
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
+ */
+const ariaAttributes = [
+    'role',
+    'aria-activedescendant',
+    'aria-atomic',
+    'aria-autocomplete',
+    'aria-braillelabel',
+    'aria-brailleroledescription',
+    'aria-busy',
+    'aria-checked',
+    'aria-colcount',
+    'aria-colindex',
+    'aria-colindextext',
+    'aria-colspan',
+    'aria-controls',
+    'aria-current',
+    'aria-describedby',
+    'aria-description',
+    'aria-details',
+    'aria-disabled',
+    'aria-errormessage',
+    'aria-expanded',
+    'aria-flowto',
+    'aria-haspopup',
+    'aria-hidden',
+    'aria-invalid',
+    'aria-keyshortcuts',
+    'aria-label',
+    'aria-labelledby',
+    'aria-level',
+    'aria-live',
+    'aria-multiline',
+    'aria-multiselectable',
+    'aria-orientation',
+    'aria-owns',
+    'aria-placeholder',
+    'aria-posinset',
+    'aria-pressed',
+    'aria-readonly',
+    'aria-relevant',
+    'aria-required',
+    'aria-roledescription',
+    'aria-rowcount',
+    'aria-rowindex',
+    'aria-rowindextext',
+    'aria-rowspan',
+    'aria-selected',
+    'aria-setsize',
+    'aria-sort',
+    'aria-valuemax',
+    'aria-valuemin',
+    'aria-valuenow',
+    'aria-valuetext',
+];
+const inheritAriaAttributes = (el, ignoreList) => {
+    let attributesToInherit = ariaAttributes;
+    return inheritAttributes(el, attributesToInherit);
+};
+/**
+ * One component's use of `keepHostStyling`: `record` what `render()` puts on the host, `connect` in
+ * `connectedCallback` and `disconnect` in `disconnectedCallback`.
+ */
+class HostStylingKeeper {
+    constructor() {
+        this.styling = { classes: [], styles: {} };
+        this.observer = null;
+    }
+    record(classes, styles = {}, attributes = {}) {
+        this.styling = { classes: classNamesOf(classes), styles, attributes };
+    }
+    connect(el) {
+        var _a;
+        (_a = this.observer) !== null && _a !== void 0 ? _a : (this.observer = keepHostStyling(el, () => this.styling));
+    }
+    disconnect() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.observer = null;
+    }
+}
+
+export { HostStylingKeeper as H, inheritAttributes as a, inheritAriaAttributes as i, setAttributesIfChanged as s };