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

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

@@ -3,47 +3,37 @@
 }
 
 details {
-  --border-radius-default: var(--pine-border-radius-100);
-  --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);
-  --color-content-background-default: var(--pine-color-white);
-  --color-background-hover: var(--pine-color-grey-300);
-  --color-text-default: var(--pine-color-charcoal-200);
-  --color-text-active: var(--pine-color-charcoal-500);
-  --color-text-hover: var(--pine-color-charcoal-300);
   --number-animation-transform-timing: 200ms;
-  --spacing-details-padding-inline: var(--pine-spacing-150);
-  --spacing-summary-padding-block: var(--pine-spacing-050);
-  --spacing-summary-padding-inline-start: var(--pine-spacing-100);
-  --spacing-summary-padding-inline-end: var(--pine-spacing-050);
-  --typography-default: var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);
-  border-radius: var(--border-radius-default);
-  padding-inline: var(--spacing-details-padding-inline);
+  border-radius: var(--pine-dimension-xs);
 }
 details pds-icon {
   transform: scaleY(1);
-  transition: transform var(--number-animation-transform-timing);
 }
 
 /* stylelint-disable-next-line */
 details[open] {
-  background-color: var(--color-content-background);
+  background-color: var(--pine-color-background-container);
 }
 details[open] summary {
-  color: var(--color-text-active);
-  font: var(--typography-default);
+  color: var(--pine-color-text-active);
+  font-weight: var(--pine-font-weight-semi-bold);
 }
 details[open] summary pds-icon {
   transform: scaleY(-1);
-  transition: transform var(--number-animation-transform-timing);
 }
 
 summary {
-  border-radius: var(--border-radius-default);
-  color: var(--color-text-default);
-  font: var(--typography-default);
-  padding-block: var(--spacing-summary-padding-block);
-  padding-inline-end: var(--spacing-summary-padding-inline-end);
-  padding-inline-start: var(--spacing-summary-padding-inline-start);
+  background-color: var(--pine-color-background-container);
+  border-radius: var(--pine-dimension-xs);
+  color: var(--pine-color-text-muted);
+  font-family: var(--pine-font-family-body);
+  font-size: var(--pine-font-size-body-md);
+  font-weight: var(--pine-font-weight-medium);
+  letter-spacing: var(--pine-letter-spacing);
+  line-height: var(--pine-line-height-body);
+  padding-block: calc(var(--pine-dimension-2xs) * 1.5);
+  padding-inline-end: var(--pine-dimension-2xs);
+  padding-inline-start: var(--pine-dimension-xs);
   /* stylelint-disable-next-line */
   align-items: center;
   display: flex;
@@ -52,14 +42,19 @@ summary::-webkit-details-marker {
   display: none;
 }
 summary:hover {
-  background: var(--color-background-hover);
-  color: var(--color-text-hover);
+  background: var(--pine-color-background-container-hover);
+  color: var(--pine-color-text);
   cursor: pointer;
 }
 summary:focus-visible {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
+  outline: var(--pine-outline-focus);
+  position: relative;
 }
 summary pds-icon {
   margin-inline-start: auto;
+}
+
+.pds-accordion__body {
+  padding-block-end: calc(var(--pine-dimension-sm) + 2);
+  padding-inline: calc(var(--pine-dimension-2xs) * 1.5);
 }

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

@@ -1,11 +1,19 @@
 import { h, Host } from "@stencil/core";
 import { downSmall } from "@pine-ds/icons/icons";
 /**
+ * @part accordion-body - Accordion body styles.
+ * @part accordion-button - Accordion button/trigger styles.
+ * @part accordion-icon - Accordion icon styles.
  * @slot (default) - Accordion body content.
  * @slot label - Accordion trigger button content.
  */
 export class PdsAccordion {
     constructor() {
+        /**
+         * Can be used to manually set the open state of the accordion.
+         * @defaultValue false
+         */
+        this.isOpen = false;
         this.handleToggle = () => {
             this.isOpen = this.detailsEl.open;
         };
@@ -15,17 +23,15 @@ export class PdsAccordion {
             }
             return '';
         };
-        this.componentId = undefined;
-        this.isOpen = false;
     }
     handleOpenState(newValue) {
-        this.isOpen = newValue;
+        this.pdsAccordionToggle.emit(newValue);
     }
     componentDidLoad() {
         this.detailsEl.addEventListener('toggle', this.handleToggle);
     }
     render() {
-        return (h(Host, { key: '228d08704d0e735ed515308df91a7880c2c450ed', class: "pds-accordion", id: this.componentId }, h("details", Object.assign({ key: '442e319353f611a5f3d3de767de8dc0f86d2540e' }, this.getOpenAttribute(), { ref: (el) => (this.detailsEl = el) }), h("summary", { key: 'c3b11619644caee3ba90854e608072436ae0ac34' }, h("slot", { key: 'fb9b2fa1c0e6a8ddce8e9575b31da5c248f075d5', name: "label" }, "Details"), h("pds-icon", { key: '3435405fa293d47aa240a6bfa947fe0707c1154a', icon: downSmall })), h("div", { key: 'a35cb679b545fbbd408a4217764b66eabd495c6e', class: "pds-accordion__body" }, h("slot", { key: 'fa6efbc3624c1c1152eabca17201c24801eef3ee' })))));
+        return (h(Host, { key: 'dd45657cb2bfe2e26f3a2fcad6a941559f1968c5', class: "pds-accordion", id: this.componentId }, h("details", Object.assign({ key: '9dff1b1a3e4cdd308537c1e5f4020d6b74e4ac4e' }, this.getOpenAttribute(), { ref: (el) => (this.detailsEl = el) }), h("summary", { key: '59152e8eece069bedd0109d1952dc1de95bc5d9a', part: "accordion-button" }, h("slot", { key: '73881348e657d880c60a5420a758217789f03b0c', name: "label" }, "Details"), h("pds-icon", { key: '35fbb0c45bc97ce3b69fd8184ef085230253d675', "aria-hidden": "true", icon: downSmall, part: "accordion-icon" })), h("div", { key: 'c9bb44d8135560b0e486a730830642387c87a67a', part: "accordion-body", class: "pds-accordion__body" }, h("slot", { key: 'f18d2a5a87d5d2653ce92766bc34c4506b88d4f4' })))));
     }
     static get is() { return "pds-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -58,8 +64,10 @@ export class PdsAccordion {
                         }],
                     "text": "A unique identifier used for the underlying component `id` attribute."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
             },
             "isOpen": {
                 "type": "boolean",
@@ -78,12 +86,32 @@ export class PdsAccordion {
                         }],
                     "text": "Can be used to manually set the open state of the accordion."
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "open",
                 "defaultValue": "false"
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "pdsAccordionToggle",
+                "name": "pdsAccordionToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the accordion open state changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
     static get watchers() {
         return [{
                 "propName": "isOpen",
@@ -91,4 +119,3 @@ export class PdsAccordion {
             }];
     }
 }
-//# sourceMappingURL=pds-accordion.js.map

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

@@ -1,33 +1,27 @@
 import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
 
 export default {
   args: {
     componentId: '',
     isOpen: false,
   },
-  argTypes: extractArgTypes('pds-accordion'),
   component: 'pds-accordion',
   title: 'components/Accordion',
 }
 
 const BaseTemplate = (args) => html`
-	<pds-accordion component-id="${args.componentId}" open="${args.isOpen}">
-    <pds-row align-items="center" slot="label">
-      <pds-box align-items="center">
-        <pds-icon name="product"></pds-icon>
-        <span style="display: inline-block; margin-left: 8px;">Products</span>
-      </pds-box>
-    </pds-row>
-    <pds-row>
-      <pds-box direction="column" gap="xs" padding="xs">
-        <pds-link variant="plain" href="#">All products</pds-link>
-        <pds-link variant="plain" href="#">Courses</pds-link>
-        <pds-link variant="plain" href="#">Coaching</pds-link>
-        <pds-link variant="plain" href="#">Community</pds-link>
-        <pds-link variant="plain" href="#">Podcasts</pds-link>
-      </pds-box>
-    </pds-row>
+	<pds-accordion component-id="${args.componentId}" ?open=${args.isOpen}>
+    <pds-box align-items="center" slot="label">
+      <pds-icon name="product"></pds-icon>
+      <span style="display: inline-block; margin-left: 8px;">Products</span>
+    </pds-box>
+    <pds-box direction="column" gap="xs" padding="xs">
+      <pds-link variant="plain" href="#">All products</pds-link>
+      <pds-link variant="plain" href="#">Courses</pds-link>
+      <pds-link variant="plain" href="#">Coaching</pds-link>
+      <pds-link variant="plain" href="#">Community</pds-link>
+      <pds-link variant="plain" href="#">Podcasts</pds-link>
+    </pds-box>
   </pds-accordion>
 `;
 

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

@@ -0,0 +1,131 @@
+:host {
+  --pds-context-link-color: var(--pine-alert-color-link);
+  --pds-context-link-color-hover: var(--pine-alert-color-link-hover);
+  display: block;
+  line-height: 1;
+  width: 100%;
+}
+
+:host([variant=danger]) {
+  --pds-context-link-color: var(--pine-alert-color-danger-link);
+  --pds-context-link-color-hover: var(--pine-alert-color-danger-link-hover);
+}
+
+:host([variant=info]) {
+  --pds-context-link-color: var(--pine-alert-color-info-link);
+  --pds-context-link-color-hover: var(--pine-alert-color-info-link-hover);
+}
+
+:host([variant=success]) {
+  --pds-context-link-color: var(--pine-alert-color-success-link);
+  --pds-context-link-color-hover: var(--pine-alert-color-success-link-hover);
+}
+
+:host([variant=warning]) {
+  --pds-context-link-color: var(--pine-alert-color-warning-link);
+  --pds-context-link-color-hover: var(--pine-alert-color-warning-link-hover);
+}
+
+.pds-alert__container {
+  --pds-alert-icon-size: var(--pine-dimension-sm);
+  --pds-alert-border-dismiss-outline: 2px solid var(--pds-alert-color-dismiss);
+  --pds-alert-background: var(--pine-alert-color-background);
+  --pds-alert-border-color: var(--pine-alert-color-border);
+  --pds-alert-color-icon: var(--pine-alert-color-icon);
+  --pds-alert-color-text: var(--pine-alert-color-text);
+  --pds-alert-color-dismiss: var(--pine-alert-color-dismiss);
+  --pds-alert-background-dismiss-hover: var(--pine-alert-color-dismiss-hover);
+  padding: var(--pine-dimension-250);
+}
+
+.pds-alert__container--danger {
+  --pds-alert-background: var(--pine-alert-color-danger-background);
+  --pds-alert-border-color: var(--pine-alert-color-danger-border);
+  --pds-alert-color-icon: var(--pine-alert-color-danger-icon);
+  --pds-alert-color-text: var(--pine-alert-color-danger-text);
+  --pds-alert-color-dismiss: var(--pine-alert-color-danger-dismiss);
+  --pds-alert-background-dismiss-hover: var(--pine-alert-color-danger-dismiss-hover);
+}
+
+.pds-alert__container--info {
+  --pds-alert-background: var(--pine-alert-color-info-background);
+  --pds-alert-border-color: var(--pine-alert-color-info-border);
+  --pds-alert-color-icon: var(--pine-alert-color-info-icon);
+  --pds-alert-color-text: var(--pine-alert-color-info-text);
+  --pds-alert-color-dismiss: var(--pine-alert-color-info-dismiss);
+  --pds-alert-background-dismiss-hover: var(--pine-alert-color-info-dismiss-hover);
+}
+
+.pds-alert__container--success {
+  --pds-alert-background: var(--pine-alert-color-success-background);
+  --pds-alert-border-color: var(--pine-alert-color-success-border);
+  --pds-alert-color-icon: var(--pine-alert-color-success-icon);
+  --pds-alert-color-text: var(--pine-alert-color-success-text);
+  --pds-alert-color-dismiss: var(--pine-alert-color-success-dismiss);
+  --pds-alert-background-dismiss-hover: var(--pine-alert-color-success-dismiss-hover);
+}
+
+.pds-alert__container--warning {
+  --pds-alert-background: var(--pine-alert-color-warning-background);
+  --pds-alert-border-color: var(--pine-alert-color-warning-border);
+  --pds-alert-color-icon: var(--pine-alert-color-warning-icon);
+  --pds-alert-color-text: var(--pine-alert-color-warning-text);
+  --pds-alert-color-dismiss: var(--pine-alert-color-warning-dismiss);
+  --pds-alert-background-dismiss-hover: var(--pine-alert-color-warning-dismiss-hover);
+}
+
+.pds-alert__icon {
+  margin-block-start: var(--pine-dimension-2xs);
+}
+
+.pds-alert__icon--small {
+  margin-block-start: 0;
+}
+
+.pds-alert__content-wrapper {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  width: 100%;
+}
+
+.pds-alert__dismiss {
+  align-items: center;
+  background: none;
+  border: 0;
+  border-radius: var(--pine-border-radius-full);
+  cursor: pointer;
+  display: flex;
+  height: var(--pine-dimension-250);
+  justify-content: center;
+  padding: var(--pine-dimension-xs);
+  width: var(--pine-dimension-250);
+}
+
+.pds-alert__dismiss:hover {
+  background: var(--pds-alert-background-dismiss-hover);
+  opacity: 0.8;
+}
+
+.pds-alert__dismiss:focus-visible {
+  outline: var(--pds-alert-border-dismiss-outline);
+}
+
+.pds-alert__description--small {
+  flex: 1 1 auto;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pds-alert__actions {
+  margin-block-start: var(--pine-dimension-sm);
+}
+
+.pds-alert__actions--small {
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,255 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot actions - Slot for alert actions.
+ * @part dismiss
+ */
+export class PdsAlert {
+    constructor() {
+        /**
+         * If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed.
+         */
+        this.small = false;
+        /**
+         * If true, shows the dismiss button. If false, the dismiss button is hidden.
+         * @defaultValue false
+         */
+        this.dismissible = false;
+        /**
+         * If true, the leading icon is hidden.
+         * @defaultValue false
+         */
+        this.hideIcon = false;
+        /**
+         * Sets the style variant of the alert.
+         * @defaultValue 'default'
+         */
+        this.variant = 'default';
+        /**
+         * Accessible label for the dismiss button. Pass a translated string to
+         * localize it; defaults to English.
+         * @defaultValue 'Dismiss alert'
+         */
+        this.dismissLabel = 'Dismiss alert';
+        this.hasActionsContent = false;
+        this.handleCloseClick = () => {
+            this.pdsAlertDismissClick.emit();
+        };
+    }
+    componentWillRender() {
+        // Check if the actions slot has any content.
+        // If not, hide the actions container to prevent empty space.
+        const actionsSlot = this.el.querySelector('[slot="actions"]');
+        this.hasActionsContent = !!actionsSlot;
+    }
+    renderActions(isSmall) {
+        return (h("pds-box", { class: isSmall ? "pds-alert__actions--small" : "pds-alert__actions", gap: "sm", flex: isSmall ? "none" : undefined, "align-items": isSmall ? undefined : "center" }, h("slot", { name: "actions" })));
+    }
+    renderContent() {
+        if (this.small) {
+            return (h("pds-box", { display: "flex", gap: "md", "align-items": "center" }, h("pds-text", { truncate: this.small, class: "pds-alert__description--small", color: "var(--pds-alert-color-text)", tag: "p" }, h("slot", null)), this.hasActionsContent && this.renderActions(true)));
+        }
+        return (h("div", null, h("pds-text", { class: "pds-alert__description", color: "var(--pds-alert-color-text)", tag: "p" }, h("slot", null)), this.hasActionsContent && this.renderActions(false)));
+    }
+    render() {
+        const iconMap = {
+            danger: 'warning-filled',
+            default: 'info-circle-filled',
+            info: 'info-circle-filled',
+            success: 'check-circle-filled',
+            warning: 'info-circle-filled',
+        };
+        // Get the icon name based on the current variant
+        const iconName = iconMap[this.variant] || iconMap.default;
+        return (h(Host, { key: 'b143df0c24c077e412894f5f77f1bd7c0ced1c92', class: "pds-alert", id: this.componentId, variant: this.variant }, h("pds-box", { key: '928e3852507a1776069ee80906443ef650607ce7', class: `pds-alert__container pds-alert__container--${this.variant}`, "background-color": "var(--pds-alert-background)", "border-color": "var(--pds-alert-border-color)", "border-radius": "md", border: true, display: "block" }, h("pds-box", { key: '778046ab1c651a57e910e45fe00944a74a3c32f7', gap: "sm", display: "flex", "align-items": this.small ? "center" : undefined }, !this.hideIcon && (h("pds-icon", { key: '0199ef3e12a8dc9da20006fc8c4e133f83f4caf4', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)" })), h("pds-box", { key: 'b7b973c0c6154d72f90a585a116ea76ac48cc6e4', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (h("pds-text", { key: 'c969f9a7eabdc31bc2faca247033e89cc15caea0', class: "pds-alert__heading", color: "var(--pds-alert-color-text)", size: "h5", tag: "h3", weight: "medium" }, this.heading)), this.renderContent()), this.dismissible && (h("button", { key: '168c21de5a0112a65b73a854add4393fea9ede6f', class: "pds-alert__dismiss", type: "button", part: "dismiss", "aria-label": this.dismissLabel, onClick: this.handleCloseClick }, h("pds-icon", { key: 'f8e9311a4934c1b8458879cd6244a99e3a730be2', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
+    }
+    static get is() { return "pds-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-alert.tokens.scss", "pds-alert.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-alert.tokens.css", "pds-alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text displayed as the heading of the alert."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "small": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "small",
+                "defaultValue": "false"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "If true, shows the dismiss button. If false, the dismiss button is hidden."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "false"
+            },
+            "hideIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "If true, the leading icon is hidden."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-icon",
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'danger' | 'info' | 'success' | 'warning'",
+                    "resolved": "\"danger\" | \"default\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'default'"
+                        }],
+                    "text": "Sets the style variant of the alert."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "dismissLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'Dismiss alert'"
+                        }],
+                    "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 alert'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasActionsContent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsAlertDismissClick",
+                "name": "pdsAlertDismissClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the dismiss button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}