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

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

@@ -0,0 +1,85 @@
+:host {
+  --pine-alert-color-background: var(--pine-color-grey-150);
+  --pine-alert-color-border: var(--pine-color-grey-300);
+  --pine-alert-color-dismiss: var(--pine-color-grey-900);
+  --pine-alert-color-dismiss-hover: var(--pine-color-grey-300);
+  --pine-alert-color-icon: var(--pine-color-grey-700);
+  --pine-alert-color-link: var(--pine-color-grey-900);
+  --pine-alert-color-link-hover: var(--pine-color-grey-950);
+  --pine-alert-color-text: var(--pine-color-grey-950);
+  --pine-alert-color-danger-background: var(--pine-color-red-150);
+  --pine-alert-color-danger-border: var(--pine-color-red-300);
+  --pine-alert-color-danger-dismiss: var(--pine-color-red-900);
+  --pine-alert-color-danger-dismiss-hover: var(--pine-color-red-300);
+  --pine-alert-color-danger-icon: var(--pine-color-red-700);
+  --pine-alert-color-danger-link: var(--pine-color-red-900);
+  --pine-alert-color-danger-link-hover: var(--pine-color-red-950);
+  --pine-alert-color-danger-text: var(--pine-color-red-950);
+  --pine-alert-color-info-background: var(--pine-color-blue-150);
+  --pine-alert-color-info-border: var(--pine-color-blue-300);
+  --pine-alert-color-info-dismiss: var(--pine-color-blue-900);
+  --pine-alert-color-info-dismiss-hover: var(--pine-color-blue-300);
+  --pine-alert-color-info-icon: var(--pine-color-blue-700);
+  --pine-alert-color-info-link: var(--pine-color-blue-900);
+  --pine-alert-color-info-link-hover: var(--pine-color-blue-950);
+  --pine-alert-color-info-text: var(--pine-color-blue-950);
+  --pine-alert-color-success-background: var(--pine-color-green-150);
+  --pine-alert-color-success-border: var(--pine-color-green-300);
+  --pine-alert-color-success-dismiss: var(--pine-color-green-900);
+  --pine-alert-color-success-dismiss-hover: var(--pine-color-green-300);
+  --pine-alert-color-success-icon: var(--pine-color-green-700);
+  --pine-alert-color-success-link: var(--pine-color-green-900);
+  --pine-alert-color-success-link-hover: var(--pine-color-green-950);
+  --pine-alert-color-success-text: var(--pine-color-green-950);
+  --pine-alert-color-warning-background: var(--pine-color-yellow-150);
+  --pine-alert-color-warning-border: var(--pine-color-yellow-300);
+  --pine-alert-color-warning-dismiss: var(--pine-color-yellow-900);
+  --pine-alert-color-warning-dismiss-hover: var(--pine-color-yellow-300);
+  --pine-alert-color-warning-icon: var(--pine-color-yellow-700);
+  --pine-alert-color-warning-link: var(--pine-color-yellow-900);
+  --pine-alert-color-warning-link-hover: var(--pine-color-yellow-950);
+  --pine-alert-color-warning-text: var(--pine-color-yellow-950);
+}
+
+:host-context([data-theme=dark]) {
+  --pine-alert-color-background: var(--pine-color-grey-800);
+  --pine-alert-color-border: var(--pine-color-grey-600);
+  --pine-alert-color-dismiss: var(--pine-color-grey-200);
+  --pine-alert-color-dismiss-hover: var(--pine-color-grey-700);
+  --pine-alert-color-icon: var(--pine-color-grey-300);
+  --pine-alert-color-link: var(--pine-color-grey-300);
+  --pine-alert-color-link-hover: var(--pine-color-grey-050);
+  --pine-alert-color-text: var(--pine-color-grey-100);
+  --pine-alert-color-danger-background: var(--pine-color-red-900);
+  --pine-alert-color-danger-border: var(--pine-color-red-800);
+  --pine-alert-color-danger-dismiss: var(--pine-color-red-200);
+  --pine-alert-color-danger-dismiss-hover: var(--pine-color-red-800);
+  --pine-alert-color-danger-icon: var(--pine-color-red-400);
+  --pine-alert-color-danger-link: var(--pine-color-red-300);
+  --pine-alert-color-danger-link-hover: var(--pine-color-red-200);
+  --pine-alert-color-danger-text: var(--pine-color-red-100);
+  --pine-alert-color-info-background: var(--pine-color-blue-900);
+  --pine-alert-color-info-border: var(--pine-color-blue-800);
+  --pine-alert-color-info-dismiss: var(--pine-color-blue-200);
+  --pine-alert-color-info-dismiss-hover: var(--pine-color-blue-800);
+  --pine-alert-color-info-icon: var(--pine-color-blue-400);
+  --pine-alert-color-info-link: var(--pine-color-blue-300);
+  --pine-alert-color-info-link-hover: var(--pine-color-blue-200);
+  --pine-alert-color-info-text: var(--pine-color-blue-100);
+  --pine-alert-color-success-background: var(--pine-color-green-900);
+  --pine-alert-color-success-border: var(--pine-color-green-800);
+  --pine-alert-color-success-dismiss: var(--pine-color-green-200);
+  --pine-alert-color-success-dismiss-hover: var(--pine-color-green-800);
+  --pine-alert-color-success-icon: var(--pine-color-green-400);
+  --pine-alert-color-success-link: var(--pine-color-green-300);
+  --pine-alert-color-success-link-hover: var(--pine-color-green-200);
+  --pine-alert-color-success-text: var(--pine-color-green-100);
+  --pine-alert-color-warning-background: var(--pine-color-yellow-900);
+  --pine-alert-color-warning-border: var(--pine-color-yellow-800);
+  --pine-alert-color-warning-dismiss: var(--pine-color-yellow-200);
+  --pine-alert-color-warning-dismiss-hover: var(--pine-color-yellow-800);
+  --pine-alert-color-warning-icon: var(--pine-color-yellow-400);
+  --pine-alert-color-warning-link: var(--pine-color-yellow-300);
+  --pine-alert-color-warning-link-hover: var(--pine-color-yellow-200);
+  --pine-alert-color-warning-text: var(--pine-color-yellow-100);
+}

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

@@ -0,0 +1,110 @@
+import { html } from 'lit';
+
+
+export default {
+
+  component: 'pds-alert',
+  parameters: {},
+  title: 'components/Alert',
+};
+
+const BaseTemplate = (args) => html` <pds-alert
+  component-id="${args.componentId}"
+  variant="${args.variant}"
+  heading="${args.heading}"
+  ?small=${args.small}
+  ?dismissible=${args.dismissible}
+  ?hide-icon=${args.hideIcon}
+>${args.description}</pds-alert>`;
+
+const ActionsTemplate = (args) => html` <pds-alert
+  component-id="${args.componentId}"
+  variant="${args.variant}"
+  heading="${args.heading}"
+  ?small=${args.small}
+  ?dismissible=${args.dismissible}
+  ?hide-icon=${args.hideIcon}
+>
+  ${args.description}
+  <pds-button slot="actions" variant="primary">Button</pds-button>
+  <pds-link slot="actions" variant="plain" href="#">Link</pds-link>
+</pds-alert>`;
+
+const SmallActionsTemplate = (args) => html` <pds-alert
+  component-id="${args.componentId}"
+  variant="${args.variant}"
+  heading="${args.heading}"
+  ?small=${args.small}
+  ?dismissible=${args.dismissible}
+  ?hide-icon=${args.hideIcon}
+>
+  ${args.description}
+  <pds-link slot="actions" variant="plain" href="#">Link</pds-link>
+  <pds-link slot="actions" variant="plain" href="#">Link</pds-link>
+</pds-alert>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  componentId: 'default-alert',
+  variant: 'default',
+  heading: 'Default alert heading',
+  description: 'Alerts can also have description text that can be used to provide more information about the alert.',
+  small: false,
+  dismissible: false,
+  hideIcon: false,
+};
+
+export const Small = BaseTemplate.bind();
+Small.args = {
+  componentId: 'small-alert',
+  variant: 'default',
+  heading: 'Small alert heading',
+  description: 'Small alerts use the description to provide more information about the alert, but are truncated when the text becomes too long for the alert to fit the screen.',
+  small: true,
+  dismissible: true,
+  hideIcon: false,
+};
+
+export const Actions = ActionsTemplate.bind();
+Actions.args = {
+  componentId: 'actions-alert',
+  variant: 'default',
+  heading: 'Alert with actions',
+  description: 'This alert includes action button and link in the actions slot.',
+  small: false,
+  dismissible: true,
+  hideIcon: false,
+};
+
+export const SmallActions = SmallActionsTemplate.bind();
+SmallActions.args = {
+  componentId: 'small-actions-alert',
+  variant: 'default',
+  heading: 'Small alert with actions',
+  description: 'This small alert has an inline action link which is displayed on the same line as the description.',
+  small: true,
+  dismissible: false,
+  hideIcon: false,
+};
+
+export const Dismissible = BaseTemplate.bind();
+Dismissible.args = {
+  componentId: 'dismissible-alert',
+  variant: 'success',
+  heading: 'Dismissible alert',
+  description: 'This alert can be dismissed by the user.',
+  small: false,
+  dismissible: true,
+  hideIcon: false,
+};
+
+export const HideIcon = BaseTemplate.bind();
+HideIcon.args = {
+  componentId: 'hide-icon-alert',
+  variant: 'info',
+  heading: 'Alert without icon',
+  description: 'This alert has the leading icon hidden.',
+  small: false,
+  dismissible: false,
+  hideIcon: true,
+};

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

@@ -3,22 +3,16 @@
 }
 
 div {
-  --color-background-container: var(--pine-color-blue-100);
-  --color-background-badge: var(--pine-color-white);
-  --color-border-badge: var(--pine-color-white);
-  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
-  --border-radius-round: var(--pine-border-radius-round);
-  --border-radius-none: var(--pine-border-radius-0);
-  --spacing-none: var(--pine-spacing-0);
+  --color-background-container: var(--pine-color-background-container-hover);
   align-items: center;
   background-color: var(--color-background-container);
-  border-radius: var(--border-radius-admin-round, var(--border-radius-round));
+  border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));
   display: inline-flex;
   justify-content: center;
   position: relative;
 }
 :host(.pds-avatar--admin) div {
-  --border-radius-admin-round: var(--pine-spacing-150);
+  --border-radius-admin-round: var(--pine-dimension-150);
   border-radius: var(--border-radius-admin-round);
 }
 :host(.pds-avatar--has-image) div {
@@ -31,35 +25,74 @@ div {
 }
 
 .pds-avatar__button {
-  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
-  --border-radius-round: var(--pine-border-radius-round);
   align-items: center;
   appearance: none;
   background: transparent;
-  border: var(--border-radius-none);
-  border-radius: var(--border-radius-round);
+  border: var(--pine-dimension-none);
+  border-radius: var(--pine-border-radius-full);
   cursor: pointer;
   display: flex;
-  padding: var(--spacing-none);
+  padding: var(--pine-dimension-none);
 }
 .pds-avatar__button:focus-visible {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
+  outline: var(--pine-outline-focus);
 }
 
 .pds-avatar__badge {
-  background-color: var(--color-background-badge);
-  border: var(--border-default);
-  border-color: var(--color-border-badge);
-  border-radius: var(--border-radius-round);
-  bottom: var(--spacing-none);
+  background-color: transparent;
+  border: var(--pine-dimension-none);
+  border-color: transparent;
+  border-radius: var(--pine-border-radius-round);
+  inset-block-end: var(--pine-dimension-none);
+  inset-inline-end: var(--pine-dimension-none);
   position: absolute;
-  right: var(--spacing-none);
+}
+
+:host([status=online]) {
+  --pds-avatar-status-color: var(--pine-color-green-500);
+}
+
+:host([status=away]) {
+  --pds-avatar-status-color: var(--pine-color-yellow-500);
+}
+
+:host([status=offline]) {
+  --pds-avatar-status-color: var(--pine-color-background-inset-emphasized);
+}
+
+.pds-avatar__status {
+  background-color: var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized));
+  block-size: 28%;
+  border-radius: var(--pine-border-radius-full);
+  box-shadow: 0 0 0 var(--pine-border-width-thick) var(--pine-color-background-container);
+  inline-size: 28%;
+  inset-block-end: var(--pine-dimension-none);
+  inset-inline-end: var(--pine-dimension-none);
+  min-block-size: var(--pine-dimension-100);
+  min-inline-size: var(--pine-dimension-100);
+  position: absolute;
+}
+
+:host(.pds-avatar--status-ring) div {
+  box-shadow: 0 0 0 var(--pine-border-width-thick) var(--pds-avatar-status-color, var(--pine-color-background-inset-emphasized));
 }
 
 img {
-  border-radius: var(--border-radius-admin-round, var(--border-radius-round));
+  border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));
   height: 100%;
   object-fit: cover;
   width: 100%;
+}
+
+.pds-avatar__initials {
+  color: var(--pine-color-brand);
+  fill: var(--pine-color-brand);
+  font-size: var(--pine-font-size-085);
+  font-weight: var(--pine-font-weight-semi-bold);
+  height: 100%;
+  text-align: center;
+  width: 100%;
+}
+.pds-avatar__initials text {
+  text-anchor: middle;
 }

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

@@ -1,47 +1,122 @@
 import { Host, h } from "@stencil/core";
 import { checkCircleFilled, userFilled } from "@pine-ds/icons/icons";
 /**
+ * @part asset-wrapper
+ * @part button
  * @part image - The main image element that represents the avatar component.
+ * @part initials - The text element that renders the avatar's initials, for restyling their color.
 */
 export class PdsAvatar {
     constructor() {
+        /**
+         * The alt for a custom user image.
+         * @defaultValue null
+         */
+        this.alt = null;
+        /**
+         * Determines whether the badge is visible or not.
+         * @defaultValue false
+         */
+        this.badge = false;
+        /**
+         * Determines whether the avatar functions as a dropdown trigger.
+         * @defaultValue false
+         */
+        this.dropdown = false;
+        /**
+         * The src for a custom user image.
+         * @defaultValue null
+         */
+        this.image = null;
+        /**
+         * The initials to display in the avatar when no image is provided.
+         * @defaultValue null
+         */
+        this.initials = null;
+        /**
+         * Size of the avatar. Value can be preset or custom.
+         * @defaultValue lg
+         */
+        this.size = 'lg';
+        /**
+         * Displays a presence status indicator (a dot) on the avatar: `online`
+         * (success), `away` (warning), or `offline` (neutral). For a simple
+         * active/inactive presence, map active to `online` and inactive to `offline`.
+         * Takes precedence over `badge` — they share the same corner, so the badge is
+         * hidden while `status` is set.
+         * @defaultValue null
+         */
+        this.status = null;
+        /**
+         * Determines whether a ring is shown around the avatar in the `status` color.
+         * Has no effect unless `status` is set.
+         * @defaultValue false
+         */
+        this.statusRing = false;
+        /**
+         * Determines the variant of avatar. Changes appearance accordingly.
+         * @defaultValue customer
+         */
+        this.variant = 'customer';
+        /**
+         * Accessible label for the dropdown trigger button. Pass a translated string
+         * to localize it; defaults to English.
+         * @defaultValue 'Avatar dropdown trigger'
+         */
+        this.triggerLabel = 'Avatar dropdown trigger';
         this.renderAssetWrapper = () => {
             const style = {
                 height: this.avatarSize(),
                 width: this.avatarSize()
             };
-            return (h("div", { style: style, part: "asset-wrapper" }, this.renderIconOrImage(), this.renderBadge()));
+            return (h("div", { style: style, part: "asset-wrapper" }, this.renderIconOrImage(), this.renderBadge(), this.renderStatus()));
         };
         this.renderAvatar = () => {
             return (this.dropdown
                 ?
-                    h("button", { class: "pds-avatar__button", type: "button", "aria-label": "Avatar dropdown trigger" }, this.renderAssetWrapper())
+                    h("button", { class: "pds-avatar__button", type: "button", part: "button", "aria-label": this.triggerLabel }, this.renderAssetWrapper())
                 :
                     this.renderAssetWrapper());
         };
-        this.renderBadge = () => (this.badge
+        this.renderBadge = () => (
+        // `badge` and `status` share the bottom-end corner; `status` wins so the
+        // presence dot is never painted over the badge.
+        this.badge && !this.status
             // Percentage is average size of icon in relation to total avatar size
             // of all preset sizes found in Figma.
             // Used to allow icons to scale to container size
-            && h("pds-icon", { class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%" }));
-        this.renderIconOrImage = () => (this.image
-            ? h("img", { alt: this.alt, src: this.image })
+            && h("pds-icon", { color: "var(--pine-color-purple-600)", class: "pds-avatar__badge", icon: checkCircleFilled, size: "33.53%" }));
+        this.renderStatus = () => {
+            var _a;
+            if (!this.status)
+                return null;
+            // Inside the dropdown trigger, the button's aria-label owns the accessible
+            // name, so the dot's own label is never announced. Mark it decorative there
+            // and let consumers convey presence via `triggerLabel`.
+            if (this.dropdown) {
+                return h("span", { class: "pds-avatar__status", part: "status", "aria-hidden": "true" });
+            }
+            return (h("span", { class: "pds-avatar__status", part: "status", role: "img", "aria-label": (_a = this.statusLabel) !== null && _a !== void 0 ? _a : `${this.status} status` }));
+        };
+        this.renderIconOrImage = () => {
+            if (this.image) {
+                return h("img", { alt: this.alt, src: this.image });
+            }
+            if (this.initials) {
+                return (h("svg", { class: "pds-avatar__initials", part: "initials", viewBox: "0 0 32 32" }, h("text", { x: "16", y: "20" }, this.initials)));
+            }
             // Percentage is average size of icon in relation to total avatar size
             // of all preset sizes found in Figma.
             // Used to allow icons to scale to container size
-            : h("pds-icon", { color: "var(--pine-color-blue-400)", icon: userFilled, size: "33.53%" }));
+            return h("pds-icon", { color: "var(--pine-color-brand)", icon: userFilled, size: "33.53%" });
+        };
         this.classNames = () => ({
             'pds-avatar': true,
             [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector
-            [`pds-avatar--${this.variant}`]: this.variant === 'admin'
+            [`pds-avatar--has-initials`]: this.initials !== '' && this.initials !== null,
+            [`pds-avatar--${this.variant}`]: this.variant === 'admin',
+            [`pds-avatar--status-ring`]: !!this.status && this.statusRing,
         });
-        this.alt = null;
-        this.badge = false;
-        this.componentId = undefined;
-        this.dropdown = false;
-        this.image = null;
-        this.size = 'lg';
-        this.variant = 'customer';
     }
     avatarSize() {
         const sizes = {
@@ -59,7 +134,7 @@ export class PdsAvatar {
         }
     }
     render() {
-        return (h(Host, { key: '8c43a9de8b7799b5aafff0c12c2e95e53bed2041', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
+        return (h(Host, { key: 'fe2bd31070db6840c79d7054ac50802e8f14f572', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
     }
     static get is() { return "pds-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -92,8 +167,10 @@ export class PdsAvatar {
                         }],
                     "text": "The alt for a custom user image."
                 },
-                "attribute": "alt",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "alt",
                 "defaultValue": "null"
             },
             "badge": {
@@ -113,8 +190,10 @@ export class PdsAvatar {
                         }],
                     "text": "Determines whether the badge is visible or not."
                 },
-                "attribute": "badge",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "badge",
                 "defaultValue": "false"
             },
             "componentId": {
@@ -131,8 +210,10 @@ export class PdsAvatar {
                     "tags": [],
                     "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"
             },
             "dropdown": {
                 "type": "boolean",
@@ -151,8 +232,10 @@ export class PdsAvatar {
                         }],
                     "text": "Determines whether the avatar functions as a dropdown trigger."
                 },
-                "attribute": "dropdown",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "dropdown",
                 "defaultValue": "false"
             },
             "image": {
@@ -172,8 +255,33 @@ export class PdsAvatar {
                         }],
                     "text": "The src for a custom user image."
                 },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
                 "attribute": "image",
+                "defaultValue": "null"
+            },
+            "initials": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "null"
+                        }],
+                    "text": "The initials to display in the avatar when no image is provided."
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "initials",
                 "defaultValue": "null"
             },
             "size": {
@@ -193,10 +301,80 @@ export class PdsAvatar {
                         }],
                     "text": "Size of the avatar. Value can be preset or custom."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "'lg'"
             },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'online' | 'away' | 'offline' | null",
+                    "resolved": "\"away\" | \"offline\" | \"online\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "null"
+                        }],
+                    "text": "Displays a presence status indicator (a dot) on the avatar: `online`\n(success), `away` (warning), or `offline` (neutral). For a simple\nactive/inactive presence, map active to `online` and inactive to `offline`.\nTakes precedence over `badge` \u2014 they share the same corner, so the badge is\nhidden while `status` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "status",
+                "defaultValue": "null"
+            },
+            "statusLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "null"
+                        }],
+                    "text": "Accessible label for the presence status indicator. Pass a translated\nstring to localize it; defaults to English (`\"{status} status\"`). Has no\neffect on dropdown avatars, where the trigger's `triggerLabel` owns the\naccessible name \u2014 fold presence into `triggerLabel` there."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status-label"
+            },
+            "statusRing": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether a ring is shown around the avatar in the `status` color.\nHas no effect unless `status` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status-ring",
+                "defaultValue": "false"
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
@@ -214,11 +392,35 @@ export class PdsAvatar {
                         }],
                     "text": "Determines the variant of avatar. Changes appearance accordingly."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "variant",
                 "defaultValue": "'customer'"
+            },
+            "triggerLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'Avatar dropdown trigger'"
+                        }],
+                    "text": "Accessible label for the dropdown trigger button. Pass a translated string\nto localize it; defaults to English."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-label",
+                "defaultValue": "'Avatar dropdown trigger'"
             }
         };
     }
 }
-//# sourceMappingURL=pds-avatar.js.map