@pine-ds/core 4.0.0-mercury.0 → 4.1.0

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

@@ -0,0 +1,330 @@
+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
+ */
+export class PdsToast {
+    constructor() {
+        /**
+         * Whether the toast can be dismissed manually via the close button.
+         * Note: This only controls manual dismissal. Auto-dismissal via duration still applies.
+         * @default true
+         */
+        this.dismissible = true;
+        /**
+         * The duration in milliseconds to show the toast before auto-dismissing.
+         * Set to 0 to disable auto-dismiss.
+         * @default 4500
+         */
+        this.duration = 4500;
+        /**
+         * The type of toast to display.
+         * - default: Grey background (default)
+         * - danger: Red background
+         * - loading: With spinner animation
+         * @default 'default'
+         */
+        this.type = 'default';
+        /**
+         * Accessible label for the dismiss button. Pass a translated string to
+         * localize it; defaults to English.
+         * @defaultValue 'Dismiss message'
+         */
+        this.dismissLabel = 'Dismiss message';
+        /**
+         * Whether the toast is currently visible.
+         */
+        this.isVisible = true;
+        /**
+         * Whether the toast is animating out.
+         */
+        this.isAnimatingOut = false;
+    }
+    componentDidLoad() {
+        if (this.duration > 0) {
+            this.startDismissTimer();
+        }
+    }
+    disconnectedCallback() {
+        this.cleanup();
+    }
+    handleDurationChange(newDuration) {
+        if (this.dismissTimer) {
+            window.clearTimeout(this.dismissTimer);
+            this.dismissTimer = undefined;
+        }
+        if (newDuration > 0) {
+            this.startDismissTimer();
+        }
+    }
+    async dismiss() {
+        // Start the animation out
+        this.isAnimatingOut = true;
+        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);
+            this.dismissTimer = undefined;
+        }
+    }
+    startDismissTimer() {
+        this.dismissTimer = window.setTimeout(() => {
+            this.dismiss();
+        }, this.duration);
+    }
+    renderIcon() {
+        // Loading type takes priority
+        if (this.type === 'loading') {
+            return (h("div", { class: "pds-toast__loader" }, h("svg", { class: "pds-toast__loader-spinner", viewBox: "25 25 50 50", "aria-hidden": "true" }, h("circle", { class: "pds-toast__loader-path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }))));
+        }
+        // Return icon if provided, otherwise undefined (which renders as nothing)
+        return this.icon && h("pds-icon", { name: this.icon, class: "pds-toast__icon" });
+    }
+    render() {
+        return (h(Host, { key: 'aa1d20ad8b511950338a16cd9277f33a6438bfe5', hidden: !this.isVisible }, h("div", { key: 'b19ddfcdec17bd3339cf6b283cca475ad8dda75b', 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: '8f4553ac467032c6e398e1665b41d78eedc56e30', class: "pds-toast__message" }, h("slot", { key: '0a04edffd081298f6cd7f6feb3f50e89276d4e09' })), this.dismissible && (h("button", { key: 'b42a2ab16a011b42e278e77fa4c0698eea3950e0', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
+                this.dismiss();
+            }, "aria-label": this.dismissLabel }, h("pds-icon", { key: 'e5ea3485a7d943ba3be144506eecb9a25b55b07d', name: "remove" }))))));
+    }
+    static get is() { return "pds-toast"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-toast.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-toast.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Whether the toast can be dismissed manually via the close button.\nNote: This only controls manual dismissal. Auto-dismissal via duration still applies."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "true"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "4500"
+                        }],
+                    "text": "The duration in milliseconds to show the toast before auto-dismissing.\nSet to 0 to disable auto-dismiss."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "duration",
+                "defaultValue": "4500"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icon to display in the toast."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'danger' | 'loading'",
+                    "resolved": "\"danger\" | \"default\" | \"loading\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'default'"
+                        }],
+                    "text": "The type of toast to display.\n- default: Grey background (default)\n- danger: Red background\n- loading: With spinner animation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'default'"
+            },
+            "dismissLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'Dismiss message'"
+                        }],
+                    "text": "Accessible label for the dismiss button. Pass a translated string to\nlocalize it; defaults to English."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismiss-label",
+                "defaultValue": "'Dismiss message'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {},
+            "isAnimatingOut": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsToastDismissed",
+                "name": "pdsToastDismissed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the toast is dismissed, either manually or automatically."
+                },
+                "complexType": {
+                    "original": "{ componentId?: string }",
+                    "resolved": "{ componentId?: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "dismiss": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "duration",
+                "methodName": "handleDurationChange"
+            }];
+    }
+}

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

@@ -0,0 +1,95 @@
+import { html } from 'lit';
+
+
+export default {
+
+  component: 'pds-toast',
+  title: 'components/Toast',
+  parameters: {},
+}
+
+const BaseTemplate = (args) => html`
+<pds-toast
+  ?dismissible=${args.dismissible}
+  component-id="${args.componentId}"
+  duration="${args.duration}"
+  icon="${args.icon || ''}"
+  type="${args.type}"
+>
+  ${args.content || ''}
+</pds-toast>`;
+
+const WithLinkTemplate = (args) => html`
+<pds-toast
+  ?dismissible=${args.dismissible}
+  component-id="${args.componentId}"
+  duration="${args.duration}"
+  icon="${args.icon || ''}"
+  type="${args.type}"
+>
+  New update available. <a href="#">Learn more</a>
+</pds-toast>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  componentId: 'toast-default',
+  content: 'This is a default toast message',
+  dismissible: true,
+  duration: 0, // Set to 0 for demo purposes
+  type: 'default',
+};
+
+export const Danger = BaseTemplate.bind();
+Danger.args = {
+  componentId: 'toast-danger',
+  content: 'An error occurred. Please try again.',
+  dismissible: true,
+  duration: 0,
+  type: 'danger',
+};
+
+export const Loading = BaseTemplate.bind();
+Loading.args = {
+  componentId: 'toast-loading',
+  content: 'Processing your request...',
+  dismissible: false,
+  duration: 0,
+  type: 'loading',
+};
+
+export const WithIcon = BaseTemplate.bind();
+WithIcon.args = {
+  componentId: 'toast-with-icon',
+  content: 'Successfully saved!',
+  dismissible: true,
+  duration: 0,
+  icon: 'check-circle-filled',
+  type: 'default',
+};
+
+export const WithLink = WithLinkTemplate.bind();
+WithLink.args = {
+  componentId: 'toast-with-link',
+  dismissible: true,
+  duration: 0,
+  type: 'default',
+};
+
+export const NonDismissible = BaseTemplate.bind();
+NonDismissible.args = {
+  componentId: 'toast-non-dismissible',
+  content: 'This toast cannot be manually dismissed and will auto-dismiss after 4.5 seconds',
+  dismissible: false,
+  duration: 4500,
+  type: 'default',
+};
+
+export const AutoDismiss = BaseTemplate.bind();
+AutoDismiss.args = {
+  componentId: 'toast-auto-dismiss',
+  type: 'default',
+  content: 'This toast will auto-dismiss after 2 seconds',
+  dismissible: true,
+  duration: 2000
+};
+

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

@@ -1,146 +1,128 @@
-:host {
-  --border-radius-overlay: var(--pine-border-radius-125);
-  --border-width-arrow-down: var(--sizing-arrow-default) var(--sizing-arrow-default) 0;
-  --border-width-arrow-left: var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;
-  --border-width-arrow-right: var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);
-  --border-width-arrow-up: 0 var(--sizing-arrow-default) var(--sizing-arrow-default);
-  --box-shadow-default: var(--pine-box-shadow-md);
-  --color-background-default: var(--pine-color-charcoal-400);
-  --color-text-default: var(--pine-color-white);
-  --font-size-overlay: var(--pine-font-size-087);
-  --line-height-overlay: var(--pine-line-height-125);
-  --sizing-arrow-default: 6px;
-  --sizing-arrow-offset: 14px;
-  --sizing-width-default: 320px;
-  --spacing-padding-overlay: var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);
-  display: inline-block;
-  position: relative;
-}
-:host ::slotted(*) {
-  display: flex;
-}
-:host ::slotted([slot=content]) {
-  display: block;
-  white-space: normal;
-  width: var(--sizing-width-default);
+.pds-tooltip {
+  --tooltip-border-width-arrow-down: var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;
+  --tooltip-border-width-arrow-left: var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;
+  --tooltip-border-width-arrow-right: var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);
+  --tooltip-border-width-arrow-up: 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);
+  --tooltip-sizing-arrow: 6px;
+  --tooltip-sizing-arrow-offset: 14px;
+  --tooltip-dimension-max-width: 320px;
 }
 
 .pds-tooltip__content {
-  background-color: var(--color-background-default);
-  border-radius: var(--border-radius-overlay);
-  box-shadow: var(--box-shadow-default);
-  color: var(--color-text-default);
-  font-size: var(--font-size-overlay);
-  line-height: var(--line-height-overlay);
+  background-color: var(--pine-color-primary);
+  border-radius: calc(var(--pine-dimension-xs) * 1.25);
+  box-shadow: var(--pine-box-shadow);
+  color: var(--pine-color-text-primary);
+  max-width: var(--tooltip-dimension-max-width);
   opacity: 0;
-  padding: var(--spacing-padding-overlay);
-  position: absolute;
+  padding: var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);
+  position: relative;
   visibility: hidden;
   width: max-content;
 }
 .pds-tooltip--is-open .pds-tooltip__content {
   opacity: 1;
   visibility: visible;
-  z-index: 1;
+  z-index: var(--pine-z-index-raised);
 }
-:host(.pds-tooltip--has-html-content) .pds-tooltip__content {
-  width: auto;
+.pds-tooltip.pds-tooltip--has-html-content .pds-tooltip__content {
+  width: fit-content;
 }
 .pds-tooltip__content::after {
   border-color: transparent;
   border-right-color: transparent;
   border-style: solid;
-  border-width: var(--border-width-arrow-left);
+  border-width: var(--tooltip-border-width-arrow-left);
   content: "";
   height: 0;
   position: absolute;
   width: 0;
 }
 .pds-tooltip--right .pds-tooltip__content::after {
-  border-inline-end-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-left);
-  left: calc(var(--sizing-arrow-default) * -1);
+  border-inline-end-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-left);
+  left: calc(var(--tooltip-sizing-arrow) * -1);
   top: 50%;
   transform: translateY(-50%);
 }
 .pds-tooltip--right-end .pds-tooltip__content::after {
-  border-inline-end-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-left);
-  bottom: var(--sizing-arrow-offset);
-  left: calc(var(--sizing-arrow-default) * -1);
+  border-inline-end-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-left);
+  bottom: var(--tooltip-sizing-arrow-offset);
+  left: calc(var(--tooltip-sizing-arrow) * -1);
   top: initial;
 }
 .pds-tooltip--right-start .pds-tooltip__content::after {
-  border-inline-end-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-left);
-  left: calc(var(--sizing-arrow-default) * -1);
-  top: var(--sizing-arrow-offset);
+  border-inline-end-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-left);
+  left: calc(var(--tooltip-sizing-arrow) * -1);
+  top: var(--tooltip-sizing-arrow-offset);
 }
 .pds-tooltip--top .pds-tooltip__content::after {
-  border-block-start-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-down);
-  bottom: calc(var(--sizing-arrow-default) * -1);
+  border-block-start-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-down);
+  bottom: calc(var(--tooltip-sizing-arrow) * -1);
   left: 50%;
   top: initial;
   transform: translateX(-50%);
 }
 .pds-tooltip--top-start .pds-tooltip__content::after {
-  border-block-start-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-down);
-  bottom: calc(var(--sizing-arrow-default) * -1);
-  left: var(--sizing-arrow-offset);
+  border-block-start-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-down);
+  bottom: calc(var(--tooltip-sizing-arrow) * -1);
+  left: var(--tooltip-sizing-arrow-offset);
   top: initial;
 }
 .pds-tooltip--top-end .pds-tooltip__content::after {
-  border-block-start-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-down);
-  bottom: calc(var(--sizing-arrow-default) * -1);
+  border-block-start-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-down);
+  bottom: calc(var(--tooltip-sizing-arrow) * -1);
   left: initial;
-  right: var(--sizing-arrow-offset);
+  right: var(--tooltip-sizing-arrow-offset);
   top: initial;
 }
 .pds-tooltip--left .pds-tooltip__content::after {
-  border-inline-start-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-right);
+  border-inline-start-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-right);
   left: initial;
-  right: calc(var(--sizing-arrow-default) * -1);
+  right: calc(var(--tooltip-sizing-arrow) * -1);
   top: 50%;
   transform: translateY(-50%);
 }
 .pds-tooltip--left-end .pds-tooltip__content::after {
-  border-inline-start-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-right);
-  bottom: var(--sizing-arrow-offset);
+  border-inline-start-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-right);
+  bottom: var(--tooltip-sizing-arrow-offset);
   left: initial;
-  right: calc(var(--sizing-arrow-default) * -1);
+  right: calc(var(--tooltip-sizing-arrow) * -1);
   top: initial;
 }
 .pds-tooltip--left-start .pds-tooltip__content::after {
-  border-inline-start-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-right);
+  border-inline-start-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-right);
   left: initial;
-  right: calc(var(--sizing-arrow-default) * -1);
-  top: var(--sizing-arrow-offset);
+  right: calc(var(--tooltip-sizing-arrow) * -1);
+  top: var(--tooltip-sizing-arrow-offset);
 }
 .pds-tooltip--bottom .pds-tooltip__content::after {
-  border-block-end-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-up);
+  border-block-end-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-up);
   left: 50%;
-  top: calc(var(--sizing-arrow-default) * -1);
+  top: calc(var(--tooltip-sizing-arrow) * -1);
   transform: translateX(-50%);
 }
 .pds-tooltip--bottom-end .pds-tooltip__content::after {
-  border-block-end-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-up);
+  border-block-end-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-up);
   left: initial;
-  right: var(--sizing-arrow-offset);
-  top: calc(var(--sizing-arrow-default) * -1);
+  right: var(--tooltip-sizing-arrow-offset);
+  top: calc(var(--tooltip-sizing-arrow) * -1);
 }
 .pds-tooltip--bottom-start .pds-tooltip__content::after {
-  border-block-end-color: var(--color-background-default);
-  border-width: var(--border-width-arrow-up);
-  left: var(--sizing-arrow-offset);
-  top: calc(var(--sizing-arrow-default) * -1);
+  border-block-end-color: var(--pine-color-primary);
+  border-width: var(--tooltip-border-width-arrow-up);
+  left: var(--tooltip-sizing-arrow-offset);
+  top: calc(var(--tooltip-sizing-arrow) * -1);
 }
 .pds-tooltip--no-arrow .pds-tooltip__content::after {
   border-width: 0;