@pine-ds/core 3.24.4 → 3.25.1

package/components/pds-alert.js

@@ -24,6 +24,11 @@ const PdsAlert$1 = /*@__PURE__*/ proxyCustomElement(class PdsAlert extends HTMLE
          * @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'
@@ -59,7 +64,7 @@ const PdsAlert$1 = /*@__PURE__*/ proxyCustomElement(class PdsAlert extends HTMLE
         };
         // Get the icon name based on the current variant
         const iconName = iconMap[this.variant] || iconMap.default;
-        return (h(Host, { key: 'b3280d4851c764c63649aa5078f950920290b155', class: "pds-alert", id: this.componentId, variant: this.variant }, h("pds-box", { key: '60b6f666bbf72ed99260a3a97ac27919f4ae2289', 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: '17a1e9e1dcd92409b762d3c8fec4ea6bb34dfa3a', gap: "sm", display: "flex" }, h("pds-icon", { key: '9866970bfbdee3a09db537d7bd5536bac7b0cba4', 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: '751647dc2a27e7c5fa31801ded4d0466e338ce12', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (h("pds-text", { key: 'a603335ef15246a638e1a3b2556bf10ac7073d8f', 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: '81fe893cb8dab3f93f5f5d9c515a8806e5b7d79b', class: "pds-alert__dismiss", type: "button", part: "dismiss", "aria-label": "Dismiss alert", onClick: this.handleCloseClick }, h("pds-icon", { key: 'de431f51b5597399b702cc6503c6ee7b029b8fe3', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
+        return (h(Host, { key: 'fb36c6626a4b775971032936f3cc876d2471fc71', class: "pds-alert", id: this.componentId, variant: this.variant }, h("pds-box", { key: '5f80f68bfce168e11b9e83760b4a8d08b4a73b6b', 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: '6047b04859a12d5dc48f263cdf66074a2a2940f1', gap: "sm", display: "flex" }, !this.hideIcon && (h("pds-icon", { key: '578a6932dd90984c21e797b8e57523ca29e9a723', 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: 'abf825088987691dcf716937d2c0ad831e0f6bcf', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (h("pds-text", { key: '539bda19f7b9e01192442a8895fa9439db56bd93', 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: 'a233aabbc825584339cd1bcf7919db11b8a27479', class: "pds-alert__dismiss", type: "button", part: "dismiss", "aria-label": "Dismiss alert", onClick: this.handleCloseClick }, h("pds-icon", { key: '887a026480d80f407472e79cb1def7f691bd1a2d', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
     }
     get el() { return this; }
     static get style() { return pdsAlertTokensCss + pdsAlertCss; }
@@ -68,6 +73,7 @@ const PdsAlert$1 = /*@__PURE__*/ proxyCustomElement(class PdsAlert extends HTMLE
         "heading": [1],
         "small": [4],
         "dismissible": [4],
+        "hideIcon": [4, "hide-icon"],
         "variant": [1],
         "hasActionsContent": [32]
     }]);

package/components/pds-alert.js.map

@@ -1 +1 @@
-{"file":"pds-alert.js","mappings":"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","names":["PdsAlert","__stencil_proxyCustomElement"],"sources":["src/components/pds-alert/pds-alert.tokens.scss?tag=pds-alert&encapsulation=shadow","src/components/pds-alert/pds-alert.scss?tag=pds-alert&encapsulation=shadow","src/components/pds-alert/pds-alert.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-alert/pds-alert.tokens.css';\n",":host {\n  // Context link colors for slotted pds-link components (default variant)\n  --pds-context-link-color: var(--pine-alert-color-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-link-hover);\n\n  display: block;\n  line-height: 1;\n  width: 100%;\n}\n\n:host([variant=\"danger\"]) {\n  --pds-context-link-color: var(--pine-alert-color-danger-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-danger-link-hover);\n}\n\n:host([variant=\"info\"]) {\n  --pds-context-link-color: var(--pine-alert-color-info-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-info-link-hover);\n}\n\n:host([variant=\"success\"]) {\n  --pds-context-link-color: var(--pine-alert-color-success-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-success-link-hover);\n}\n\n:host([variant=\"warning\"]) {\n  --pds-context-link-color: var(--pine-alert-color-warning-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-warning-link-hover);\n}\n\n.pds-alert__container {\n  --pds-alert-icon-size: var(--pine-dimension-sm);\n  --pds-alert-border-dismiss-outline: 2px solid var(--pds-alert-color-dismiss);\n\n  --pds-alert-background: var(--pine-alert-color-background);\n  --pds-alert-border-color: var(--pine-alert-color-border);\n  --pds-alert-color-icon: var(--pine-alert-color-icon);\n  --pds-alert-color-text: var(--pine-alert-color-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-dismiss-hover);\n\n  padding: var(--pine-dimension-250);\n}\n\n.pds-alert__container--danger {\n  --pds-alert-background: var(--pine-alert-color-danger-background);\n  --pds-alert-border-color: var(--pine-alert-color-danger-border);\n  --pds-alert-color-icon: var(--pine-alert-color-danger-icon);\n  --pds-alert-color-text: var(--pine-alert-color-danger-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-danger-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-danger-dismiss-hover);\n}\n\n.pds-alert__container--info {\n  --pds-alert-background: var(--pine-alert-color-info-background);\n  --pds-alert-border-color: var(--pine-alert-color-info-border);\n  --pds-alert-color-icon: var(--pine-alert-color-info-icon);\n  --pds-alert-color-text: var(--pine-alert-color-info-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-info-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-info-dismiss-hover);\n}\n\n.pds-alert__container--success {\n  --pds-alert-background: var(--pine-alert-color-success-background);\n  --pds-alert-border-color: var(--pine-alert-color-success-border);\n  --pds-alert-color-icon: var(--pine-alert-color-success-icon);\n  --pds-alert-color-text: var(--pine-alert-color-success-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-success-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-success-dismiss-hover);\n}\n\n.pds-alert__container--warning {\n  --pds-alert-background: var(--pine-alert-color-warning-background);\n  --pds-alert-border-color: var(--pine-alert-color-warning-border);\n  --pds-alert-color-icon: var(--pine-alert-color-warning-icon);\n  --pds-alert-color-text: var(--pine-alert-color-warning-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-warning-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-warning-dismiss-hover);\n}\n\n.pds-alert__icon {\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-alert__icon--small {\n  margin-block-start: calc(var(--pine-dimension-2xs) / 2); // half the default icon margin\n}\n\n.pds-alert__content-wrapper {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  width: 100%;\n}\n\n.pds-alert__dismiss {\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: var(--pine-border-radius-full);\n  cursor: pointer;\n  display: flex;\n  height: var(--pine-dimension-250);\n  justify-content: center;\n  padding: var(--pine-dimension-xs);\n  width: var(--pine-dimension-250);\n}\n\n.pds-alert__dismiss:hover {\n  background: var(--pds-alert-background-dismiss-hover);\n  opacity: 0.8;\n}\n\n.pds-alert__dismiss:focus-visible {\n  outline: var(--pds-alert-border-dismiss-outline);\n}\n\n.pds-alert__description--small {\n  flex: 1 1 auto;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pds-alert__actions {\n  margin-block-start: var(--pine-dimension-sm);\n}\n\n.pds-alert__actions--small {\n  flex-shrink: 0;\n  margin-inline-start: auto;\n  white-space: nowrap;\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\n\n/**\n * @slot actions - Slot for alert actions.\n * @part dismiss\n */\n\n@Component({\n  tag: 'pds-alert',\n  styleUrls: ['pds-alert.tokens.scss', 'pds-alert.scss'],\n  shadow: true,\n})\nexport class PdsAlert {\n\n  @Element() el: HTMLPdsAlertElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Text displayed as the heading of the alert.\n   */\n  @Prop() heading: string;\n\n  /**\n   * If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed.\n   */\n  @Prop() small = false;\n\n  /**\n   * If true, shows the dismiss button. If false, the dismiss button is hidden.\n   * @defaultValue false\n   */\n  @Prop() dismissible = false;\n\n  /**\n   * Sets the style variant of the alert.\n   * @defaultValue 'default'\n   */\n  @Prop() variant: 'default' | 'danger' | 'info' | 'success' | 'warning' = 'default';\n\n  /**\n   * Event emitted when the dismiss button is clicked.\n   */\n  @Event() pdsAlertDismissClick: EventEmitter<void>;\n\n  @State() hasActionsContent = false;\n\n  private handleCloseClick = () => {\n    this.pdsAlertDismissClick.emit();\n  };\n\n  componentWillRender() {\n    // Check if the actions slot has any content.\n    // If not, hide the actions container to prevent empty space.\n    const actionsSlot = this.el.querySelector('[slot=\"actions\"]');\n    this.hasActionsContent = !!actionsSlot;\n  }\n\n  private renderActions(isSmall: boolean) {\n    return (\n      <pds-box class={isSmall ? \"pds-alert__actions--small\" : \"pds-alert__actions\"} gap=\"sm\" flex={isSmall ? \"none\" : undefined} align-items={isSmall ? undefined : \"center\"}>\n        <slot name=\"actions\"></slot>\n      </pds-box>\n    );\n  }\n\n  private renderContent() {\n    if (this.small) {\n      return (\n        <pds-box display=\"flex\" gap=\"md\" align-items=\"center\">\n          <pds-text\n            truncate={this.small}\n            class=\"pds-alert__description--small\"\n            color=\"var(--pds-alert-color-text)\"\n            tag=\"p\"\n          >\n            <slot></slot>\n          </pds-text>\n          {this.hasActionsContent && this.renderActions(true)}\n        </pds-box>\n      );\n    }\n\n    return (\n      <div>\n        <pds-text class=\"pds-alert__description\" color=\"var(--pds-alert-color-text)\" tag=\"p\">\n          <slot></slot>\n        </pds-text>\n        {this.hasActionsContent && this.renderActions(false)}\n      </div>\n    );\n  }\n\n  render() {\n    const iconMap = {\n      danger: 'warning-filled',\n      default: 'info-circle-filled',\n      info: 'info-circle-filled',\n      success: 'check-circle-filled',\n      warning: 'info-circle-filled',\n    };\n\n    // Get the icon name based on the current variant\n    const iconName = iconMap[this.variant] || iconMap.default;\n\n    return (\n      <Host class=\"pds-alert\" id={this.componentId} variant={this.variant}>\n        <pds-box\n          class={`pds-alert__container pds-alert__container--${this.variant}`}\n          background-color=\"var(--pds-alert-background)\"\n          border-color=\"var(--pds-alert-border-color)\"\n          border-radius=\"md\"\n          border\n          display=\"block\"\n        >\n          <pds-box gap=\"sm\" display=\"flex\">\n            <pds-icon\n              class={`pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`}\n              color=\"var(--pds-alert-color-icon)\"\n              icon={iconName}\n              size=\"var(--pds-alert-icon-size)\"\n            />\n            <pds-box class=\"pds-alert__content-wrapper\" direction=\"column\" gap=\"xs\" flex=\"grow\">\n              {this.heading && !this.small && (\n                <pds-text class=\"pds-alert__heading\" color=\"var(--pds-alert-color-text)\" size=\"h5\" tag=\"h3\" weight=\"medium\">\n                  {this.heading}\n                </pds-text>\n              )}\n\n              {this.renderContent()}\n            </pds-box>\n\n            {this.dismissible && (\n              <button class=\"pds-alert__dismiss\" type=\"button\" part=\"dismiss\" aria-label=\"Dismiss alert\" onClick={this.handleCloseClick}>\n                <pds-icon icon=\"remove\" size=\"var(--pds-alert-icon-size)\" aria-hidden=\"true\" color=\"var(--pds-alert-color-dismiss)\" />\n              </button>\n            )}\n          </pds-box>\n        </pds-box>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-alert.js","mappings":"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","names":["PdsAlert","__stencil_proxyCustomElement"],"sources":["src/components/pds-alert/pds-alert.tokens.scss?tag=pds-alert&encapsulation=shadow","src/components/pds-alert/pds-alert.scss?tag=pds-alert&encapsulation=shadow","src/components/pds-alert/pds-alert.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-alert/pds-alert.tokens.css';\n",":host {\n  // Context link colors for slotted pds-link components (default variant)\n  --pds-context-link-color: var(--pine-alert-color-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-link-hover);\n\n  display: block;\n  line-height: 1;\n  width: 100%;\n}\n\n:host([variant=\"danger\"]) {\n  --pds-context-link-color: var(--pine-alert-color-danger-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-danger-link-hover);\n}\n\n:host([variant=\"info\"]) {\n  --pds-context-link-color: var(--pine-alert-color-info-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-info-link-hover);\n}\n\n:host([variant=\"success\"]) {\n  --pds-context-link-color: var(--pine-alert-color-success-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-success-link-hover);\n}\n\n:host([variant=\"warning\"]) {\n  --pds-context-link-color: var(--pine-alert-color-warning-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-warning-link-hover);\n}\n\n.pds-alert__container {\n  --pds-alert-icon-size: var(--pine-dimension-sm);\n  --pds-alert-border-dismiss-outline: 2px solid var(--pds-alert-color-dismiss);\n\n  --pds-alert-background: var(--pine-alert-color-background);\n  --pds-alert-border-color: var(--pine-alert-color-border);\n  --pds-alert-color-icon: var(--pine-alert-color-icon);\n  --pds-alert-color-text: var(--pine-alert-color-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-dismiss-hover);\n\n  padding: var(--pine-dimension-250);\n}\n\n.pds-alert__container--danger {\n  --pds-alert-background: var(--pine-alert-color-danger-background);\n  --pds-alert-border-color: var(--pine-alert-color-danger-border);\n  --pds-alert-color-icon: var(--pine-alert-color-danger-icon);\n  --pds-alert-color-text: var(--pine-alert-color-danger-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-danger-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-danger-dismiss-hover);\n}\n\n.pds-alert__container--info {\n  --pds-alert-background: var(--pine-alert-color-info-background);\n  --pds-alert-border-color: var(--pine-alert-color-info-border);\n  --pds-alert-color-icon: var(--pine-alert-color-info-icon);\n  --pds-alert-color-text: var(--pine-alert-color-info-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-info-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-info-dismiss-hover);\n}\n\n.pds-alert__container--success {\n  --pds-alert-background: var(--pine-alert-color-success-background);\n  --pds-alert-border-color: var(--pine-alert-color-success-border);\n  --pds-alert-color-icon: var(--pine-alert-color-success-icon);\n  --pds-alert-color-text: var(--pine-alert-color-success-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-success-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-success-dismiss-hover);\n}\n\n.pds-alert__container--warning {\n  --pds-alert-background: var(--pine-alert-color-warning-background);\n  --pds-alert-border-color: var(--pine-alert-color-warning-border);\n  --pds-alert-color-icon: var(--pine-alert-color-warning-icon);\n  --pds-alert-color-text: var(--pine-alert-color-warning-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-warning-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-warning-dismiss-hover);\n}\n\n.pds-alert__icon {\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-alert__icon--small {\n  margin-block-start: calc(var(--pine-dimension-2xs) / 2); // half the default icon margin\n}\n\n.pds-alert__content-wrapper {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  width: 100%;\n}\n\n.pds-alert__dismiss {\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: var(--pine-border-radius-full);\n  cursor: pointer;\n  display: flex;\n  height: var(--pine-dimension-250);\n  justify-content: center;\n  padding: var(--pine-dimension-xs);\n  width: var(--pine-dimension-250);\n}\n\n.pds-alert__dismiss:hover {\n  background: var(--pds-alert-background-dismiss-hover);\n  opacity: 0.8;\n}\n\n.pds-alert__dismiss:focus-visible {\n  outline: var(--pds-alert-border-dismiss-outline);\n}\n\n.pds-alert__description--small {\n  flex: 1 1 auto;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pds-alert__actions {\n  margin-block-start: var(--pine-dimension-sm);\n}\n\n.pds-alert__actions--small {\n  flex-shrink: 0;\n  margin-inline-start: auto;\n  white-space: nowrap;\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\n\n/**\n * @slot actions - Slot for alert actions.\n * @part dismiss\n */\n\n@Component({\n  tag: 'pds-alert',\n  styleUrls: ['pds-alert.tokens.scss', 'pds-alert.scss'],\n  shadow: true,\n})\nexport class PdsAlert {\n\n  @Element() el: HTMLPdsAlertElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Text displayed as the heading of the alert.\n   */\n  @Prop() heading: string;\n\n  /**\n   * If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed.\n   */\n  @Prop() small = false;\n\n  /**\n   * If true, shows the dismiss button. If false, the dismiss button is hidden.\n   * @defaultValue false\n   */\n  @Prop() dismissible = false;\n\n  /**\n   * If true, the leading icon is hidden.\n   * @defaultValue false\n   */\n  @Prop() hideIcon = false;\n\n  /**\n   * Sets the style variant of the alert.\n   * @defaultValue 'default'\n   */\n  @Prop() variant: 'default' | 'danger' | 'info' | 'success' | 'warning' = 'default';\n\n  /**\n   * Event emitted when the dismiss button is clicked.\n   */\n  @Event() pdsAlertDismissClick: EventEmitter<void>;\n\n  @State() hasActionsContent = false;\n\n  private handleCloseClick = () => {\n    this.pdsAlertDismissClick.emit();\n  };\n\n  componentWillRender() {\n    // Check if the actions slot has any content.\n    // If not, hide the actions container to prevent empty space.\n    const actionsSlot = this.el.querySelector('[slot=\"actions\"]');\n    this.hasActionsContent = !!actionsSlot;\n  }\n\n  private renderActions(isSmall: boolean) {\n    return (\n      <pds-box class={isSmall ? \"pds-alert__actions--small\" : \"pds-alert__actions\"} gap=\"sm\" flex={isSmall ? \"none\" : undefined} align-items={isSmall ? undefined : \"center\"}>\n        <slot name=\"actions\"></slot>\n      </pds-box>\n    );\n  }\n\n  private renderContent() {\n    if (this.small) {\n      return (\n        <pds-box display=\"flex\" gap=\"md\" align-items=\"center\">\n          <pds-text\n            truncate={this.small}\n            class=\"pds-alert__description--small\"\n            color=\"var(--pds-alert-color-text)\"\n            tag=\"p\"\n          >\n            <slot></slot>\n          </pds-text>\n          {this.hasActionsContent && this.renderActions(true)}\n        </pds-box>\n      );\n    }\n\n    return (\n      <div>\n        <pds-text class=\"pds-alert__description\" color=\"var(--pds-alert-color-text)\" tag=\"p\">\n          <slot></slot>\n        </pds-text>\n        {this.hasActionsContent && this.renderActions(false)}\n      </div>\n    );\n  }\n\n  render() {\n    const iconMap = {\n      danger: 'warning-filled',\n      default: 'info-circle-filled',\n      info: 'info-circle-filled',\n      success: 'check-circle-filled',\n      warning: 'info-circle-filled',\n    };\n\n    // Get the icon name based on the current variant\n    const iconName = iconMap[this.variant] || iconMap.default;\n\n    return (\n      <Host class=\"pds-alert\" id={this.componentId} variant={this.variant}>\n        <pds-box\n          class={`pds-alert__container pds-alert__container--${this.variant}`}\n          background-color=\"var(--pds-alert-background)\"\n          border-color=\"var(--pds-alert-border-color)\"\n          border-radius=\"md\"\n          border\n          display=\"block\"\n        >\n          <pds-box gap=\"sm\" display=\"flex\">\n            {!this.hideIcon && (\n              <pds-icon\n                class={`pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`}\n                color=\"var(--pds-alert-color-icon)\"\n                icon={iconName}\n                size=\"var(--pds-alert-icon-size)\"\n              />\n            )}\n            <pds-box class=\"pds-alert__content-wrapper\" direction=\"column\" gap=\"xs\" flex=\"grow\">\n              {this.heading && !this.small && (\n                <pds-text class=\"pds-alert__heading\" color=\"var(--pds-alert-color-text)\" size=\"h5\" tag=\"h3\" weight=\"medium\">\n                  {this.heading}\n                </pds-text>\n              )}\n\n              {this.renderContent()}\n            </pds-box>\n\n            {this.dismissible && (\n              <button class=\"pds-alert__dismiss\" type=\"button\" part=\"dismiss\" aria-label=\"Dismiss alert\" onClick={this.handleCloseClick}>\n                <pds-icon icon=\"remove\" size=\"var(--pds-alert-icon-size)\" aria-hidden=\"true\" color=\"var(--pds-alert-color-dismiss)\" />\n              </button>\n            )}\n          </pds-box>\n        </pds-box>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-combobox.js

@@ -1440,6 +1440,8 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
         this.hideLabel = false;
         /**
          * Determines the combobox mode: 'filter' (filter options as you type) or 'select-only' (show all options).
+         * In filter mode, reopening the menu while the input still shows the label of the selected option temporarily lists
+         * all options until you type (so you can switch to a different choice without clearing the field first).
          * @default 'filter'
          */
         this.mode = 'filter';
@@ -1542,8 +1544,15 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
         this.optionEls = [];
         this.allItems = [];
         this.isUpdatingFromSelection = false;
+        /**
+         * In filter mode, after choosing an option the input still shows the label and would
+         * otherwise filter the list to matching substrings only. While this flag is true,
+         * the list shows every option until the user types (then normal filtering applies).
+         */
+        this.expandFilterListWhileOpen = false;
         this.handleInput = (e) => {
             const target = e.target;
+            this.clearExpandFilterList();
             this.displayText = target.value;
             this.isOpen = true;
             this.filterOptions();
@@ -1559,19 +1568,26 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
             // Open dropdown when input is clicked (but not when tabbed into)
             if (!this.isOpen) {
                 this.isOpen = true;
+                this.prepareExpandFilterListOnOpen();
                 this.filterOptions();
                 // Trigger initial fetch if async and no options loaded yet
                 if (this.asyncUrl && this.internalOptions.length === 0) {
                     this.debouncedFetchAsyncOptions(this.displayText, 1);
                 }
                 this.setInitialHighlightedIndex();
-                setTimeout(() => this.openDropdownPositioning(), 0);
+                setTimeout(() => {
+                    this.openDropdownPositioning();
+                    if (this.trigger === 'input' && this.expandFilterListWhileOpen && this.inputEl) {
+                        this.inputEl.select();
+                    }
+                }, 0);
             }
         };
         this.handleKeyDown = (e) => {
             if (!this.isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp' || (e.altKey && e.key === 'ArrowDown'))) {
                 e.preventDefault();
                 this.isOpen = true;
+                this.prepareExpandFilterListOnOpen();
                 this.filterOptions();
                 // Set highlighted index immediately for testing
                 this.setInitialHighlightedIndex();
@@ -1664,6 +1680,7 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
                     e.preventDefault();
                     this.isOpen = false;
                     this.highlightedIndex = -1;
+                    this.clearExpandFilterList();
                     this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
                     this.restoreFocusToTrigger();
                     break;
@@ -1671,6 +1688,7 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
                     // Allow normal tab behavior to close dropdown and move focus
                     this.isOpen = false;
                     this.highlightedIndex = -1;
+                    this.clearExpandFilterList();
                     this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
                     break;
             }
@@ -1702,6 +1720,7 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
         this.onButtonTriggerClick = () => {
             this.isOpen = !this.isOpen;
             if (this.isOpen) {
+                this.prepareExpandFilterListOnOpen();
                 this.filterOptions();
                 // Trigger initial fetch if async and no options loaded yet
                 if (this.asyncUrl && this.internalOptions.length === 0) {
@@ -1715,6 +1734,7 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
             }
             else {
                 // Reset navigation mode when closing
+                this.clearExpandFilterList();
                 this.isArrowKeyNavigationMode = false;
             }
         };
@@ -1724,6 +1744,7 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
                 e.preventDefault();
                 e.stopPropagation(); // Prevent the event from bubbling and triggering click
                 this.isOpen = true;
+                this.prepareExpandFilterListOnOpen();
                 this.filterOptions();
                 // Set highlighted index immediately
                 this.setInitialHighlightedIndex();
@@ -1738,6 +1759,7 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
                 if (this.isOpen) {
                     this.isOpen = false;
                     this.highlightedIndex = -1;
+                    this.clearExpandFilterList();
                     this.updateAriaActiveDescendant(); // Clear aria-activedescendant
                     this.restoreFocusToTrigger();
                 }
@@ -1765,6 +1787,7 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
             if (!isRelatedTargetInCombobox && !isRelatedTargetInListbox) {
                 this.isOpen = false;
                 this.highlightedIndex = -1;
+                this.clearExpandFilterList();
                 this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
                 this.updateAriaActiveDescendant(); // Clear aria-activedescendant
                 // If there's a selected option but the display text doesn't match, restore the selected option's display text
@@ -2162,7 +2185,7 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
         if (this.allItems.length === 0 && this.optionEls.length > 0) {
             this.allItems = [...this.optionEls];
         }
-        if (this.mode === 'select-only') {
+        if (this.mode === 'select-only' || this.expandFilterListWhileOpen) {
             this.filteredItems = [...this.allItems];
         }
         else {
@@ -2203,6 +2226,23 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
         }
         this.highlightedIndex = -1;
     }
+    clearExpandFilterList() {
+        this.expandFilterListWhileOpen = false;
+    }
+    /**
+     * When reopening the dropdown in filter mode with the input still showing the
+     * committed selection label, show the full option list until the user edits the query.
+     */
+    prepareExpandFilterListOnOpen() {
+        if (this.mode === 'filter' &&
+            this.selectedOption &&
+            this.displayText === this.getOptionLabel(this.selectedOption)) {
+            this.expandFilterListWhileOpen = true;
+        }
+        else {
+            this.expandFilterListWhileOpen = false;
+        }
+    }
     openDropdownPositioning() {
         if (this.triggerEl && this.listboxEl) {
             // Apply width and max-height BEFORE positioning calculations
@@ -2478,6 +2518,7 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
         // The @Watch('selectedOption') will handle displayText, value, and form internals
         this.setSelectedOption(option);
         this.isOpen = false;
+        this.clearExpandFilterList();
         this.pdsComboboxChange.emit({ value: option.value });
     }
     renderDropdown() {
@@ -2636,10 +2677,10 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
         ]
             .filter(Boolean)
             .join(' ');
-        return (h(Host, { key: '6a8f372c89a896d2d7e67661e84053c4c95b93c9' }, h("div", { key: '7b4747885bfa9aaa6e698bf13b6cdf9d4e77b3b1', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && !this.hideLabel && (h("label", { key: '46acd60080458de682516becc6144b38675a3f2d', htmlFor: this.componentId, class: "pds-combobox__label" }, this.label)), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
+        return (h(Host, { key: '28c9653028e7fd67ccd8361a84108fbe11b1303f' }, h("div", { key: 'd9a3d6c4d3ca1c6135501e702be8beeffcafdf0d', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && !this.hideLabel && (h("label", { key: '8832180ca4ee60506d464115aff2503d3aeb6c52', htmlFor: this.componentId, class: "pds-combobox__label" }, this.label)), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
                 this.inputEl = el;
                 this.triggerEl = el;
-            }, class: "pds-combobox__input", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), h("div", { key: '4e4bd7cb7139416f3f59b1c9736a1fad85c09c24', style: { display: 'none' } }, h("slot", { key: '79e4c181d161a56acba68e1f7ca932369e938e10', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
+            }, class: "pds-combobox__input", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), h("div", { key: '3f2ac580f226fc9a0bf72539804d0b514a93f5b8', style: { display: 'none' } }, h("slot", { key: '075205fb4fed8d0e4aec43531593444c1ab8e1cd', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
     }
     static get formAssociated() { return true; }
     get el() { return this; }