@pine-ds/core 5.0.0-mercury.0 → 5.0.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: '245ae62c7427cfcad6eb6c3213c9b13aada4de79', class: "pds-accordion" }, h("details", Object.assign({ key: 'f69707beaacf2d10d75d604042fa8ed99b345db1' }, this.getOpenAttribute(), { ref: (el) => (this.detailsEl = el) }), h("summary", { key: '0329e0502b344834f2180c9ecd17136416dc8700', part: "accordion-button" }, h("slot", { key: '59085adef7239c0e697ae4a0d0104d7a9a95c8d6', name: "label" }, "Details"), h("pds-icon", { key: '7ea87ae13f047de27cf469c48bc3bad90f5a01e7', "aria-hidden": "true", icon: downSmall, part: "accordion-icon" })), h("div", { key: '1e4febc7cbe2da9ffdd2f6a11802cca22f5b2573', part: "accordion-body", class: "pds-accordion__body" }, h("slot", { key: 'fcee6efccbc7233a83b62a443172a42c0f800aea' })))));
     }
     static get is() { return "pds-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -56,10 +62,12 @@ export class PdsAccordion {
                             "name": "defaultValue",
                             "text": "null"
                         }],
-                    "text": "A unique identifier used for the underlying component `id` attribute."
+                    "text": "A unique identifier for this component instance. Does not set the host element's `id` attribute \u2014 set `id` directly if you need one."
                 },
-                "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,141 @@
+: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;
+}
+
+.pds-alert__actions {
+  margin-block-start: var(--pine-dimension-sm);
+}
+
+.pds-alert__actions--small {
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  white-space: nowrap;
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: polygon(0 0, 0 0, 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

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

@@ -0,0 +1,291 @@
+import { Host, h } from "@stencil/core";
+// What each variant announces when `severityLabel` isn't set. The `default`
+// variant has no severity.
+const SEVERITY_LABELS = {
+    danger: 'Error',
+    info: 'Info',
+    success: 'Success',
+    warning: 'Warning',
+};
+/**
+ * @slot (default) - The alert's description text.
+ * @slot actions - Slot for alert actions.
+ * @part dismiss - Exposes the dismiss button for styling. Appears only when `dismissible` is set.
+ */
+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)));
+    }
+    severityText() {
+        var _a;
+        return (_a = this.severityLabel) !== null && _a !== void 0 ? _a : SEVERITY_LABELS[this.variant];
+    }
+    render() {
+        const severity = this.severityText();
+        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: '1fc2d61c1740070616eb7819ff6a919241ce1f6e', class: "pds-alert", variant: this.variant }, h("pds-box", { key: 'd6ba30218ebbf89532a8a6c3d5db9b2e5321748a', 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: 'c08f2c190c1d5a9bb95c7e6351dd615a3441a48d', gap: "sm", display: "flex", "align-items": this.small ? "center" : undefined }, severity && h("span", { key: '8ca461e81ac655fa0f9ee837a5f4d2380f9dc0a0', class: "visually-hidden" }, severity), !this.hideIcon && (h("pds-icon", { key: '79583456f1b9b0a167afe296fc09aaa1ceb64209', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)", "aria-hidden": "true" })), h("pds-box", { key: 'f72b9ebea3fa5158d033c462b764f4135c3df240', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (h("pds-text", { key: '6f023c4c98fbe50be53f531fa648690bb086946c', 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: 'e366272888d222b184d8e56a74364abbb2b0799f', class: "pds-alert__dismiss", type: "button", part: "dismiss", "aria-label": this.dismissLabel, onClick: this.handleCloseClick }, h("pds-icon", { key: '10907ac14c1b24fbc73c2484e1e066c7e6c14ee2', 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 for this component instance. Does not set the host element's `id` attribute \u2014 set `id` directly if you need one."
+                },
+                "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'"
+            },
+            "severityLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "undefined"
+                        }],
+                    "text": "Accessible label announcing the alert's severity, read before the heading\nand message. Pass a translated string to localize it; defaults to English\nfor each variant (`Error`, `Info`, `Success`, `Warning`). The `default`\nvariant has no severity and announces none unless this is set; pass an\nempty string to announce none for any variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "severity-label"
+            }
+        };
+    }
+    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"; }
+}