@pine-ds/core 3.1.0 → 3.3.0

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

@@ -0,0 +1,153 @@
+:host {
+  --animation-duration: 0.3s;
+  --animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
+  --padding-inline: var(--pine-dimension-md);
+  --padding-inline-desktop: var(--pine-dimension-2xl);
+  --sizing-height-default: 68px;
+  --sizing-min-width: calc(var(--sizing-total-width) - (var(--padding-inline) * 2));
+  --sizing-min-width-desktop: calc(var(--sizing-total-width) - (var(--padding-inline-desktop) * 2));
+  --sizing-total-width: 350px;
+  box-sizing: border-box;
+  display: block;
+  font: var(--pine-typography-body-medium);
+}
+
+.pds-toast {
+  align-items: center;
+  animation: pds-toast-animate-in var(--animation-duration) var(--animation-timing);
+  background-color: var(--pine-color-primary);
+  border-radius: var(--pine-dimension-xs);
+  box-shadow: var(--pine-box-shadow);
+  color: var(--pine-color-text-primary);
+  display: flex;
+  height: var(--sizing-height-default);
+  justify-content: flex-start;
+  margin-block-end: var(--pine-dimension-2xs);
+  max-width: 90vw;
+  min-width: var(--sizing-min-width);
+  padding: 0 var(--padding-inline);
+  position: relative;
+  width: fit-content;
+}
+@media screen and (max-width: 767px) {
+  .pds-toast {
+    height: 36px;
+    max-width: calc(100vw - var(--pine-dimension-2xs) * 2);
+    min-width: auto;
+    padding-inline: var(--pine-dimension-2xs);
+  }
+}
+.pds-toast--danger {
+  background-color: var(--pine-color-danger);
+}
+.pds-toast--loading .pds-toast__loader {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  margin-inline-end: var(--pine-dimension-sm);
+  position: relative;
+}
+.pds-toast--loading .pds-toast__loader-spinner {
+  animation: pds-toast-rotate 2s linear infinite;
+  height: 20px;
+  width: 20px;
+}
+.pds-toast--loading .pds-toast__loader-path {
+  animation: pds-toast-dash 1.5s ease-in-out infinite;
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+  stroke-linecap: round;
+}
+
+.pds-toast__icon {
+  color: var(--pine-color-text-primary);
+  display: inline-flex;
+  margin-inline-end: var(--pine-dimension-sm);
+}
+
+.pds-toast__message {
+  font: var(--pine-typography-body-sm-medium);
+  margin-inline-end: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pds-toast__message ::slotted(a) {
+  color: var(--pine-color-text-primary);
+  margin-inline-start: var(--pine-dimension-xs);
+  opacity: 0.7;
+  text-decoration: underline;
+}
+.pds-toast__message ::slotted(a):hover, .pds-toast__message ::slotted(a):focus-visible {
+  opacity: 1;
+}
+.pds-toast__message ::slotted(a):focus-visible {
+  outline: 2px solid var(--pine-color-text-primary);
+  outline-offset: 2px;
+}
+
+.pds-toast__button {
+  align-items: center;
+  background: none;
+  border: 0;
+  border-radius: var(--pine-border-radius-full);
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  margin-inline-start: var(--pine-dimension-md);
+  opacity: 0.7;
+  padding: 0;
+  white-space: nowrap;
+}
+.pds-toast__button:hover, .pds-toast__button:focus {
+  opacity: 1;
+}
+.pds-toast__button:focus {
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-dimension-2xs);
+}
+
+@keyframes pds-toast-animate-in {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes pds-toast-animate-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+@keyframes pds-toast-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes pds-toast-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124;
+  }
+}
+:host([hidden]) .pds-toast,
+.pds-toast--animating-out {
+  animation: pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;
+  pointer-events: none; /* Prevent interaction during animation */
+}

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

@@ -0,0 +1,263 @@
+import { h, Host } from "@stencil/core";
+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';
+        /**
+         * 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;
+        // Wait for animation to complete before hiding and cleanup
+        await new Promise((resolve) => setTimeout(resolve, 300)); // Match --animation-duration
+        this.isVisible = false;
+        this.cleanup();
+        this.pdsToastDismissed.emit({ componentId: this.componentId });
+    }
+    // Private methods
+    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: 'dbb28e20be685c46f8c6cb2dd1a5f58f28e27589', hidden: !this.isVisible }, h("div", { key: '471b6b387799754b92ad16baf70562e26c379616', 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: '638faa5e37de1bae0e59c994de35e27960fc625b', class: "pds-toast__message" }, h("slot", { key: 'e58c86bbe9a5467b6b362e0f67db4074b9cac0cb' })), this.dismissible && (h("button", { key: '43bd64963222a78163b337b37e9d5ff888236b45', type: "button", class: "pds-toast__button", onClick: () => {
+                this.dismiss();
+            }, "aria-label": "Dismiss message" }, h("pds-icon", { key: '0c924e96515a7934f51d80b4e57f97db5bfaed14', 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,
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "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,
+                "attribute": "dismissible",
+                "reflect": false,
+                "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,
+                "attribute": "duration",
+                "reflect": false,
+                "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,
+                "attribute": "icon",
+                "reflect": false
+            },
+            "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,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    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 watchers() {
+        return [{
+                "propName": "duration",
+                "methodName": "handleDurationChange"
+            }];
+    }
+}
+//# sourceMappingURL=pds-toast.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-toast.js","sourceRoot":"","sources":["../../../src/components/pds-toast/pds-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'pds-toast',\n  styleUrl: 'pds-toast.scss',\n  shadow: true,\n})\nexport class PdsToast {\n  // Props\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Whether the toast can be dismissed manually via the close button.\n   * Note: This only controls manual dismissal. Auto-dismissal via duration still applies.\n   * @default true\n   */\n  @Prop() dismissible: boolean = true;\n\n  /**\n   * The duration in milliseconds to show the toast before auto-dismissing.\n   * Set to 0 to disable auto-dismiss.\n   * @default 4500\n   */\n  @Prop() duration: number = 4500;\n\n  /**\n   * The name of the icon to display in the toast.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * The type of toast to display.\n   * - default: Grey background (default)\n   * - danger: Red background\n   * - loading: With spinner animation\n   * @default 'default'\n   */\n  @Prop() type: 'default' | 'danger' | 'loading' = 'default';\n\n  /**\n   * Whether the toast is currently visible.\n   */\n  @State() isVisible: boolean = true;\n\n  /**\n   * Whether the toast is animating out.\n   */\n  @State() isAnimatingOut: boolean = false;\n\n  // Private properties\n  /**\n   * Timer for auto-dismissal\n   */\n  private dismissTimer?: number;\n\n  /**\n   * Event emitted when the toast is dismissed, either manually or automatically.\n   */\n  @Event() pdsToastDismissed: EventEmitter<{ componentId?: string }>;\n\n  componentDidLoad() {\n    if (this.duration > 0) {\n      this.startDismissTimer();\n    }\n  }\n\n  disconnectedCallback() {\n    this.cleanup();\n  }\n\n  @Watch('duration')\n  handleDurationChange(newDuration: number) {\n    if (this.dismissTimer) {\n      window.clearTimeout(this.dismissTimer);\n      this.dismissTimer = undefined;\n    }\n    if (newDuration > 0) {\n      this.startDismissTimer();\n    }\n  }\n\n  @Method()\n  async dismiss(): Promise<void> {\n    // Start the animation out\n    this.isAnimatingOut = true;\n\n    // Wait for animation to complete before hiding and cleanup\n    await new Promise((resolve) => setTimeout(resolve, 300)); // Match --animation-duration\n\n    this.isVisible = false;\n    this.cleanup();\n    this.pdsToastDismissed.emit({ componentId: this.componentId });\n  }\n\n  // Private methods\n  private cleanup(): void {\n    if (this.dismissTimer) {\n      window.clearTimeout(this.dismissTimer);\n      this.dismissTimer = undefined;\n    }\n  }\n\n  private startDismissTimer(): void {\n    this.dismissTimer = window.setTimeout(() => {\n      this.dismiss();\n    }, this.duration);\n  }\n\n  private renderIcon() {\n    // Loading type takes priority\n    if (this.type === 'loading') {\n      return (\n        <div class=\"pds-toast__loader\">\n          <svg class=\"pds-toast__loader-spinner\" viewBox=\"25 25 50 50\" aria-hidden=\"true\">\n            <circle class=\"pds-toast__loader-path\" cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" />\n          </svg>\n        </div>\n      );\n    }\n\n    // Return icon if provided, otherwise undefined (which renders as nothing)\n    return this.icon && <pds-icon name={this.icon} class=\"pds-toast__icon\" />;\n  }\n\n  render() {\n    return (\n      <Host hidden={!this.isVisible}>\n        <div\n          class={{\n            'pds-toast': true,\n            [`pds-toast--${this.type}`]: this.type !== 'default',\n            'pds-toast--animating-out': this.isAnimatingOut\n          }}\n          role=\"alert\"\n          aria-live=\"polite\"\n        >\n          {this.renderIcon()}\n\n          <span class=\"pds-toast__message\">\n            <slot></slot>\n          </span>\n\n          {this.dismissible && (\n            <button\n              type=\"button\"\n              class=\"pds-toast__button\"\n              onClick={() => {\n                this.dismiss();\n              }}\n              aria-label=\"Dismiss message\"\n            >\n              <pds-icon name=\"remove\" />\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,103 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  argTypes: extractArgTypes('pds-toast'),
+  component: 'pds-toast',
+  title: 'components/Toast',
+  decorators: [withActions],
+  parameters: {
+    actions: {
+      handles: [
+        'pdsToastDismissed'
+      ],
+    },
+  },
+}
+
+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,4 +1,4 @@
-:host {
+.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);
@@ -6,16 +6,6 @@
   --tooltip-sizing-arrow: 6px;
   --tooltip-sizing-arrow-offset: 14px;
   --tooltip-dimension-max-width: 320px;
-  display: inline-block;
-  position: relative;
-}
-:host ::slotted(*) {
-  display: flex;
-}
-:host ::slotted([slot=content]) {
-  display: block;
-  max-width: var(--tooltip-dimension-max-width);
-  white-space: normal;
 }
 
 .pds-tooltip__content {
@@ -35,7 +25,7 @@
   visibility: visible;
   z-index: 1;
 }
-:host(.pds-tooltip--has-html-content) .pds-tooltip__content {
+.pds-tooltip.pds-tooltip--has-html-content .pds-tooltip__content {
   width: auto;
 }
 .pds-tooltip__content::after {