@pine-ds/core 3.26.3 → 3.27.0

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { setColor } from "../../utils/utils";
 import { setupTruncationTooltip } from "../../utils/truncation-tooltip";
+import { TEXT_SIZES } from "../../utils/types";
 /**
  * @part content - The text content container
  */
@@ -20,6 +21,23 @@ export class PdsText {
             this.destroyTruncationTooltip();
         }
     }
+    validateSize(newValue) {
+        // Skip when the prop is omitted or explicitly cleared (an empty string is a
+        // common "unset" sentinel). Any other unsupported value — including a
+        // whitespace-only string — is a developer mistake worth warning about.
+        if (newValue === undefined || newValue === '') {
+            return;
+        }
+        if (!TEXT_SIZES.includes(newValue)) {
+            const display = newValue.length > 80 ? `${newValue.slice(0, 80)}…` : newValue;
+            console.warn(`pds-text: invalid size "${display}". Valid values are: ${TEXT_SIZES.join(', ')}.`);
+        }
+    }
+    componentWillLoad() {
+        // Validate the initial value before the first render so the warning precedes
+        // any attempt to apply an unknown size class. @Watch covers later changes.
+        this.validateSize(this.size);
+    }
     componentDidLoad() {
         if (this.truncate) {
             this.initTruncationTooltip();
@@ -65,7 +83,7 @@ export class PdsText {
             ? `pds-text--decoration-${this.decoration}`
             : ''}
     `;
-        return (h(Tag, { key: '1d4952d18c09b26a5f2c7f64574be86c90cca553', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content", tabIndex: this.truncate ? 0 : undefined }, h("slot", { key: '62a5caff5274601b79f35025c9382e2430118cdc' })));
+        return (h(Tag, { key: '36278c42c1669a3d2ff3ac2973727c03f2498023', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content", tabIndex: this.truncate ? 0 : undefined }, h("slot", { key: 'cb3c83b54cb84fe485fd14c7073148fc037d78cd' })));
     }
     static get is() { return "pds-text"; }
     static get encapsulation() { return "shadow"; }
@@ -180,9 +198,16 @@ export class PdsText {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "| '2xl'\n    | 'xl'\n    | 'lg'\n    | 'md'\n    | 'sm'\n    | 'xs'\n    | '2xs'\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'h5'\n    | 'h6'",
+                    "original": "TextSizeType",
                     "resolved": "\"2xl\" | \"2xs\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
-                    "references": {}
+                    "references": {
+                        "TextSizeType": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::TextSizeType",
+                            "referenceLocation": "TextSizeType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
@@ -260,7 +285,9 @@ export class PdsText {
         return [{
                 "propName": "truncate",
                 "methodName": "handleTruncateChange"
+            }, {
+                "propName": "size",
+                "methodName": "validateSize"
             }];
     }
 }
-//# sourceMappingURL=pds-text.js.map

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

@@ -721,7 +721,8 @@ export class PdsTextarea {
                         "TextareaInputEventDetail": {
                             "location": "import",
                             "path": "./textarea-interface",
-                            "id": "src/components/pds-textarea/textarea-interface.ts::TextareaInputEventDetail"
+                            "id": "src/components/pds-textarea/textarea-interface.ts::TextareaInputEventDetail",
+                            "referenceLocation": "TextareaInputEventDetail"
                         }
                     }
                 }
@@ -742,7 +743,8 @@ export class PdsTextarea {
                         "TextareaChangeEventDetail": {
                             "location": "import",
                             "path": "./textarea-interface",
-                            "id": "src/components/pds-textarea/textarea-interface.ts::TextareaChangeEventDetail"
+                            "id": "src/components/pds-textarea/textarea-interface.ts::TextareaChangeEventDetail",
+                            "referenceLocation": "TextareaChangeEventDetail"
                         }
                     }
                 }
@@ -803,4 +805,3 @@ export class PdsTextarea {
             }];
     }
 }
-//# sourceMappingURL=pds-textarea.js.map

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

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=textarea-interface.js.map

package/dist/collection/components/pds-toast/pds-toast.css

@@ -1,6 +1,6 @@
 :host {
-  --animation-duration: 0.3s;
-  --animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
+  --animation-duration: var(--pine-motion-duration-slow);
+  --animation-timing: var(--pine-motion-easing-in-out);
   --padding-inline: var(--pine-dimension-md);
   --padding-inline-desktop: var(--pine-dimension-2xl);
   --sizing-height-default: 68px;

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

@@ -1,4 +1,6 @@
 import { h, Host } from "@stencil/core";
+/** Fallback when computed `--animation-duration` is unavailable (matches `--pine-motion-duration-slow`). */
+const TOAST_DISMISS_ANIMATION_MS = 300;
 /**
  * @part dismiss
  */
@@ -53,13 +55,46 @@ export class PdsToast {
     async dismiss() {
         // Start the animation out
         this.isAnimatingOut = true;
-        // Wait for animation to complete before hiding and cleanup
-        await new Promise((resolve) => setTimeout(resolve, 300)); // Match --animation-duration
+        await this.waitForDismissAnimation();
         this.isVisible = false;
         this.cleanup();
         this.pdsToastDismissed.emit({ componentId: this.componentId });
     }
     // Private methods
+    waitForDismissAnimation() {
+        const durationMs = this.getDismissAnimationDurationMs();
+        if (durationMs <= 0) {
+            return Promise.resolve();
+        }
+        return new Promise((resolve) => window.setTimeout(resolve, durationMs));
+    }
+    getDismissAnimationDurationMs() {
+        if (typeof window === 'undefined') {
+            return TOAST_DISMISS_ANIMATION_MS;
+        }
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            return 0;
+        }
+        const fromCss = this.parseCssDurationToMs(getComputedStyle(this.el).getPropertyValue('--animation-duration').trim());
+        return fromCss !== null && fromCss !== void 0 ? fromCss : TOAST_DISMISS_ANIMATION_MS;
+    }
+    parseCssDurationToMs(value) {
+        if (!value) {
+            return undefined;
+        }
+        if (value === '0' || value === '0ms' || value === '0s') {
+            return 0;
+        }
+        if (value.endsWith('ms')) {
+            const ms = Number.parseFloat(value);
+            return Number.isFinite(ms) ? ms : undefined;
+        }
+        if (value.endsWith('s')) {
+            const seconds = Number.parseFloat(value);
+            return Number.isFinite(seconds) ? seconds * 1000 : undefined;
+        }
+        return undefined;
+    }
     cleanup() {
         if (this.dismissTimer) {
             window.clearTimeout(this.dismissTimer);
@@ -80,13 +115,13 @@ export class PdsToast {
         return this.icon && h("pds-icon", { name: this.icon, class: "pds-toast__icon" });
     }
     render() {
-        return (h(Host, { key: '5a626d33e284f1d19498f1a15f91810e6c184116', hidden: !this.isVisible }, h("div", { key: '9e3d7c1ccd5ee162f9cdc6c1ec7ba8b36b2492f0', class: {
+        return (h(Host, { key: '7768cbf398d4592b774734abdf5e9f1f4d4fb7e8', hidden: !this.isVisible }, h("div", { key: 'c17b00c76bd42d1040b8ef08a354e10346a79aa4', 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: '07fa7e9da50a3f25ad66f633de05cd62c08963ad', class: "pds-toast__message" }, h("slot", { key: '94b97c868003945d884fe82fc132ccf9c93883d3' })), this.dismissible && (h("button", { key: 'bbb35c6f1a4f2635c29f56d3c71870289c3dd765', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: 'cb7066fd49ae8674d5de80ecde21e63eecbcdf29', class: "pds-toast__message" }, h("slot", { key: '5c08d8b5cc54e02bed2906c2d52b894301fdca5d' })), this.dismissible && (h("button", { key: '4edd83a8521f76a2abddfe64caaac932962745ff', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": "Dismiss message" }, h("pds-icon", { key: '5a39aa843a9585f8814b15f334d7eb74cf6e815c', name: "remove" }))))));
+            }, "aria-label": "Dismiss message" }, h("pds-icon", { key: 'c5cf65f889bfcd85e3fdab437539e7ee3f6e0465', name: "remove" }))))));
     }
     static get is() { return "pds-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -256,6 +291,7 @@ export class PdsToast {
             }
         };
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "duration",
@@ -263,4 +299,3 @@ export class PdsToast {
             }];
     }
 }
-//# sourceMappingURL=pds-toast.js.map

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

@@ -423,7 +423,8 @@ export class PdsTooltip {
                         "PlacementType": {
                             "location": "import",
                             "path": "@utils/types",
-                            "id": "src/utils/types.ts::PlacementType"
+                            "id": "src/utils/types.ts::PlacementType",
+                            "referenceLocation": "PlacementType"
                         }
                     }
                 },
@@ -542,4 +543,3 @@ export class PdsTooltip {
     }
 }
 PdsTooltip.instanceCounter = 0;
-//# sourceMappingURL=pds-tooltip.js.map

package/dist/collection/global/pine-ui-global.js

@@ -1,2 +1 @@
 import "@pine-ds/icons";
-//# sourceMappingURL=pine-ui-global.js.map

package/dist/collection/index.js

@@ -1,3 +1,2 @@
 export * from './components';
 import "@pine-ds/icons";
-//# sourceMappingURL=index.js.map

package/dist/collection/utils/attributes.js

@@ -81,4 +81,3 @@ export const inheritAriaAttributes = (el, ignoreList) => {
     }
     return inheritAttributes(el, attributesToInherit);
 };
-//# sourceMappingURL=attributes.js.map

package/dist/collection/utils/closest.js

@@ -5,4 +5,3 @@ export const closest = (selector, el) => {
         (('closest' in el && el.closest(selector)) ||
             closest(selector, el.getRootNode().host)));
 };
-//# sourceMappingURL=closest.js.map

package/dist/collection/utils/form.js

@@ -55,4 +55,3 @@ export const isSpecTest = () => {
     var _a;
     return typeof process !== 'undefined' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.__STENCIL_SPEC_TESTS__) === 'true';
 };
-//# sourceMappingURL=form.js.map

package/dist/collection/utils/interfaces.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=interfaces.js.map

package/dist/collection/utils/overlay.js

@@ -82,4 +82,3 @@ export const positionTooltip = ({ elem, elemPlacement, overlay, offset = 8 }) =>
     }
     return true;
 };
-//# sourceMappingURL=overlay.js.map

package/dist/collection/utils/scroll.js

@@ -75,4 +75,3 @@ export function getScrollOffsetFromStart(container) {
 export function isScrolledFromInlineStart(container) {
     return getScrollOffsetFromStart(container) > 0;
 }
-//# sourceMappingURL=scroll.js.map

package/dist/collection/utils/test/axe.js

@@ -5,9 +5,10 @@
 export const DEFAULT_AXE_TAGS = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'];
 /**
  * Page-level axe rules that fire on the bare HTML harness Stencil's E2E
- * provides (no `<title>`, no `<html lang>`, no landmarks, no `<h1>`).
- * They are disabled by default because they describe document chrome,
- * not component behavior — flagging them at component scope yields noise.
+ * provides (no `<title>`, no `<html lang>`, no landmarks, no `<h1>`, and
+ * often without the full theme/global stylesheet).
+ * They are disabled by default because they describe document chrome or
+ * need themed context — flagging them at component scope yields noise or flakes.
  *
  * Tests can opt back in for a specific case:
  *
@@ -21,6 +22,11 @@ export const DEFAULT_DISABLED_RULES = [
     'landmark-one-main',
     'page-has-heading-one',
     'region',
+    // `color-contrast` cannot be measured reliably on the bare E2E harness: it
+    // renders without the full theme/global stylesheet and with fonts that may
+    // fail to load, so axe computes contrast against incidental colors (results
+    // are flaky run-to-run). Verify contrast in a themed context (Storybook).
+    'color-contrast',
 ];
 /**
  * Injects axe-core into an active Stencil E2EPage and returns any
@@ -98,4 +104,3 @@ export function formatViolations(violations) {
     })
         .join('\n\n');
 }
-//# sourceMappingURL=axe.js.map

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

@@ -239,4 +239,3 @@ export function setupTruncationTooltip(options) {
         removePortal();
     };
 }
-//# sourceMappingURL=truncation-tooltip.js.map

package/dist/collection/utils/types.js

@@ -1,2 +1,18 @@
-export {};
-//# sourceMappingURL=types.js.map
+// Single source of truth for `pds-text` `size` values. The `as const` tuple is
+// readable at runtime (for validation) and `TextSizeType` is derived from it,
+// so the supported list and the prop type cannot drift apart.
+export const TEXT_SIZES = [
+    '2xl',
+    'xl',
+    'lg',
+    'md',
+    'sm',
+    'xs',
+    '2xs',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+];

package/dist/collection/utils/utils.js

@@ -67,4 +67,3 @@ export const setColor = (color, customColors) => {
         '--color': resolved
     };
 };
-//# sourceMappingURL=utils.js.map

package/dist/docs.d.ts

@@ -38,6 +38,17 @@ interface ComponentCompilerTypeReference {
    * An ID for this type which is unique within a Stencil project.
    */
   id: string;
+  /**
+   * Whether this type was imported as a default import (e.g., `import MyEnum from './my-enum'`)
+   * vs a named import (e.g., `import { MyType } from './my-type'`)
+   */
+  isDefault?: boolean;
+  /**
+   * The name used in the import statement (before any user-defined alias).
+   * For `import { XAxisOption as moo }`, this would be "XAxisOption".
+   * This is the name exported by the source module.
+   */
+  referenceLocation?: string;
 }
 interface ComponentCompilerReferencedType {
   /**
@@ -196,6 +207,10 @@ export interface JsonDocsComponent {
    * Array of component Parts information, generate from `@part` tags
    */
   parts: JsonDocsPart[];
+  /**
+   * Array of custom states defined via @AttachInternals({ states: {...} })
+   */
+  customStates: JsonDocsCustomState[];
   /**
    * Array of metadata describing where the current component is used
    */
@@ -413,6 +428,28 @@ export interface JsonDocsPart {
    */
   docs: string;
 }
+/**
+ * A descriptor for a Custom State defined via @AttachInternals({ states: {...} })
+ *
+ * Custom states are exposed via the ElementInternals.states CustomStateSet
+ * and can be targeted with the CSS `:state()` pseudo-class.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet
+ */
+export interface JsonDocsCustomState {
+  /**
+   * The name of the custom state (without dashes)
+   */
+  name: string;
+  /**
+   * The initial/default value of the state
+   */
+  initialValue: boolean;
+  /**
+   * A textual description of the custom state
+   */
+  docs: string;
+}
 /**
  * Represents a parsed block comment in a CSS, Sass, etc. file for a custom property.
  */