@pine-ds/core 3.16.3 → 3.18.0

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

@@ -1,7 +1,9 @@
 import { Host, h } from "@stencil/core";
 import { copy as copyIcon } from "@pine-ds/icons/icons";
+import { setupTruncationTooltip } from "../../utils/truncation-tooltip";
 export class PdsCopytext {
     constructor() {
+        this.truncationCleanup = null;
         /**
          * Determines whether `copytext` should have a visible border.
          * @defaultValue true
@@ -14,6 +16,7 @@ export class PdsCopytext {
         this.fullWidth = false;
         /**
          * Determines whether the `value` should truncate and display with an ellipsis.
+         * When text overflows, a tooltip showing the full value will appear on hover/focus.
          * @defaultValue false
          */
         this.truncate = false;
@@ -32,6 +35,43 @@ export class PdsCopytext {
             this.copyToClipboard(this.value);
         };
     }
+    handleTruncateChange(newValue) {
+        if (newValue) {
+            this.initTruncationTooltip();
+        }
+        else {
+            this.destroyTruncationTooltip();
+        }
+    }
+    handleValueChange() {
+        if (this.truncate) {
+            this.initTruncationTooltip();
+        }
+    }
+    componentDidLoad() {
+        if (this.truncate) {
+            this.initTruncationTooltip();
+        }
+    }
+    disconnectedCallback() {
+        this.destroyTruncationTooltip();
+    }
+    initTruncationTooltip() {
+        this.destroyTruncationTooltip();
+        if (this.valueSpanEl) {
+            this.truncationCleanup = setupTruncationTooltip({
+                hostEl: this.el,
+                contentEl: this.valueSpanEl,
+                getTooltipText: () => this.value || '',
+            });
+        }
+    }
+    destroyTruncationTooltip() {
+        if (this.truncationCleanup) {
+            this.truncationCleanup();
+            this.truncationCleanup = null;
+        }
+    }
     classNames() {
         const classNames = ['pds-copytext'];
         if (this.border) {
@@ -46,7 +86,7 @@ export class PdsCopytext {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'a2922d7401e2fab4c49824354321abf49c0ee6ee', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '7a783ada0778a25b5f46e549353a6b454ac5001e', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: 'a14fbee0958bfe08abc9ebaebd71e0cfe3ab0e8f' }, this.value), h("pds-icon", { key: '5134fd11dcfb2a05779818d51561fbe4c4fbf00a', icon: copyIcon, size: "16px" }))));
+        return (h(Host, { key: 'bbca278ca4f2567d3aa5dfa27106fc09f0f4d959', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '8a62ae4d01681648a95b313970a89f8641f1d8c9', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '465585ce0780a19113f8e7897a9c7af7114b2a1d', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: 'db0295dfec0c4a1acbea50b849d631ea6325bf00', icon: copyIcon, size: "16px" }))));
     }
     static get is() { return "pds-copytext"; }
     static get encapsulation() { return "shadow"; }
@@ -142,7 +182,7 @@ export class PdsCopytext {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Determines whether the `value` should truncate and display with an ellipsis."
+                    "text": "Determines whether the `value` should truncate and display with an ellipsis.\nWhen text overflows, a tooltip showing the full value will appear on hover/focus."
                 },
                 "getter": false,
                 "setter": false,
@@ -189,5 +229,15 @@ export class PdsCopytext {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "truncate",
+                "methodName": "handleTruncateChange"
+            }, {
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
 }
 //# sourceMappingURL=pds-copytext.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pds-copytext.js","sourceRoot":"","sources":["../../../../src/components/pds-copytext/pds-copytext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE9E,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAOxD,MAAM,OAAO,WAAW;IALxB;QAME;;;WAGG;QACsB,WAAM,GAAG,IAAI,CAAC;QAOvC;;;WAGG;QACK,cAAS,GAAG,KAAK,CAAC;QAE1B;;;WAGG;QACK,aAAQ,GAAG,KAAK,CAAC;QAYjB,oBAAe,GAAG,KAAK,EAAE,KAAa,EAAE,EAAE;YAChD,IAAI,CAAC;gBACH,IAAI,OAAO,SAAS,CAAC,SAAS,KAAK,WAAW,EAAE,CAAC;oBAC/C,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;oBAC3C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;gBACpD,CAAC;YACH,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,oCAAoC,GAAG,EAAE,CAAC,CAAC;YACxE,CAAC;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC;KA8BH;IA5BS,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,cAAc,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,UAAU,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;QAC5C,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,UAAU,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAC9C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YAClD,mEAAY,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW;gBACpE,+DAAO,IAAI,CAAC,KAAK,CAAQ;gBACzB,iEAAU,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,MAAM,GAAY,CACtC,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\nimport { copy as copyIcon } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-copytext',\n  styleUrls: ['pds-copytext.scss'],\n  shadow: true,\n})\nexport class PdsCopytext {\n  /**\n   * Determines whether `copytext` should have a visible border.\n   * @defaultValue true\n   */\n  @Prop({ reflect: true }) border = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `copytext` should expand to the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Determines whether the `value` should truncate and display with an ellipsis.\n   * @defaultValue false\n   */\n  @Prop() truncate = false;\n\n  /**\n   * The string displayed that is also copied to the clipboard upon interaction.\n   */\n  @Prop() value!: string;\n\n  /**\n   * Event fired when copyText button is clicked.\n   */\n  @Event() pdsCopyTextClick: EventEmitter<string>;\n\n  private copyToClipboard = async (value: string) => {\n    try {\n      if (typeof navigator.clipboard !== 'undefined') {\n        await navigator.clipboard.writeText(value);\n        this.pdsCopyTextClick.emit('Copied to clipboard');\n      }\n    } catch (err) {\n      this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n    }\n  };\n\n  private handleClick = () => {\n    this.copyToClipboard(this.value);\n  };\n\n  private classNames() {\n    const classNames = ['pds-copytext'];\n\n    if (this.border) {\n      classNames.push('pds-copytext--bordered');\n    }\n\n    if (this.fullWidth) {\n      classNames.push('pds-copytext--full-width');\n    }\n\n    if (this.truncate) {\n      classNames.push('pds-copytext--truncated');\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n          <span>{this.value}</span>\n          <pds-icon icon={copyIcon} size=\"16px\"></pds-icon>\n        </pds-button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-copytext.js","sourceRoot":"","sources":["../../../../src/components/pds-copytext/pds-copytext.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\n\nimport { copy as copyIcon } from '@pine-ds/icons/icons';\nimport { setupTruncationTooltip } from '../../utils/truncation-tooltip';\n\n@Component({\n  tag: 'pds-copytext',\n  styleUrls: ['pds-copytext.scss'],\n  shadow: true,\n})\nexport class PdsCopytext {\n  @Element() el: HTMLPdsCopytextElement;\n  private truncationCleanup: (() => void) | null = null;\n  private valueSpanEl: HTMLSpanElement;\n\n  /**\n   * Determines whether `copytext` should have a visible border.\n   * @defaultValue true\n   */\n  @Prop({ reflect: true }) border = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `copytext` should expand to the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Determines whether the `value` should truncate and display with an ellipsis.\n   * When text overflows, a tooltip showing the full value will appear on hover/focus.\n   * @defaultValue false\n   */\n  @Prop() truncate = false;\n\n  /**\n   * The string displayed that is also copied to the clipboard upon interaction.\n   */\n  @Prop() value!: string;\n\n  @Watch('truncate')\n  handleTruncateChange(newValue: boolean) {\n    if (newValue) {\n      this.initTruncationTooltip();\n    } else {\n      this.destroyTruncationTooltip();\n    }\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    if (this.truncate) {\n      this.initTruncationTooltip();\n    }\n  }\n\n  componentDidLoad() {\n    if (this.truncate) {\n      this.initTruncationTooltip();\n    }\n  }\n\n  disconnectedCallback() {\n    this.destroyTruncationTooltip();\n  }\n\n  private initTruncationTooltip() {\n    this.destroyTruncationTooltip();\n\n    if (this.valueSpanEl) {\n      this.truncationCleanup = setupTruncationTooltip({\n        hostEl: this.el,\n        contentEl: this.valueSpanEl,\n        getTooltipText: () => this.value || '',\n      });\n    }\n  }\n\n  private destroyTruncationTooltip() {\n    if (this.truncationCleanup) {\n      this.truncationCleanup();\n      this.truncationCleanup = null;\n    }\n  }\n\n  /**\n   * Event fired when copyText button is clicked.\n   */\n  @Event() pdsCopyTextClick: EventEmitter<string>;\n\n  private copyToClipboard = async (value: string) => {\n    try {\n      if (typeof navigator.clipboard !== 'undefined') {\n        await navigator.clipboard.writeText(value);\n        this.pdsCopyTextClick.emit('Copied to clipboard');\n      }\n    } catch (err) {\n      this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n    }\n  };\n\n  private handleClick = () => {\n    this.copyToClipboard(this.value);\n  };\n\n  private classNames() {\n    const classNames = ['pds-copytext'];\n\n    if (this.border) {\n      classNames.push('pds-copytext--bordered');\n    }\n\n    if (this.fullWidth) {\n      classNames.push('pds-copytext--full-width');\n    }\n\n    if (this.truncate) {\n      classNames.push('pds-copytext--truncated');\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n          <span ref={(el) => this.valueSpanEl = el}>{this.value}</span>\n          <pds-icon icon={copyIcon} size=\"16px\"></pds-icon>\n        </pds-button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -14,6 +14,16 @@ export class PdsMultiselect {
          * Placeholder text for the input field.
          */
         this.placeholder = 'Select...';
+        /**
+         * Placeholder text for the search input inside the dropdown panel.
+         * @default 'Find...'
+         */
+        this.searchPlaceholder = 'Find...';
+        /**
+         * Whether to close the panel after an option is selected.
+         * Defaults to `false` (panel stays open for multi-select).
+         */
+        this.closePanelOnSelect = false;
         /**
          * Array of selected option values.
          */
@@ -50,6 +60,10 @@ export class PdsMultiselect {
          * Visually hides the label but keeps it accessible.
          */
         this.hideLabel = false;
+        /**
+         * Hides the selected items summary section in the dropdown panel.
+         */
+        this.hideSelectedItems = false;
         /**
          * If true, the multiselect is required.
          */
@@ -73,6 +87,8 @@ export class PdsMultiselect {
         this.creating = false;
         // Flag to prevent focusout from closing during open transition
         this.isOpening = false;
+        // Flag to suppress dismiss event when panel closes due to selection (not user dismissal)
+        this.isClosingViaSelection = false;
         // Flag to track if initial async fetch has been triggered (prevents double fetch)
         this.initialAsyncFetchTriggered = false;
         // Flag to track if value changed during loading and needs resolution after fetch completes
@@ -144,8 +160,9 @@ export class PdsMultiselect {
             // before we decide to close the dropdown
             setTimeout(() => {
                 var _a;
-                // Don't close if we're in the middle of opening or already closed
-                if (!this.isOpen || this.isOpening)
+                // Don't close if we're in the middle of opening, already closed,
+                // or closing due to a selection (not a user dismissal)
+                if (!this.isOpen || this.isOpening || this.isClosingViaSelection)
                     return;
                 const activeElement = document.activeElement;
                 // Check if focus is within our component's shadow root
@@ -153,6 +170,7 @@ export class PdsMultiselect {
                 // Also check if focus is on the host element itself
                 const isOnHost = activeElement === this.el;
                 if (!isInShadowRoot && !isOnHost) {
+                    this.pdsMultiselectDismiss.emit();
                     this.closeDropdown();
                 }
             }, 0);
@@ -282,6 +300,19 @@ export class PdsMultiselect {
         var _a;
         (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
+    /**
+     * Clears all selected values and resets the component.
+     */
+    async clear() {
+        const hadValues = this.value.length > 0 || this.searchQuery !== '';
+        this.value = [];
+        this.searchQuery = '';
+        this.syncSelectedItems();
+        this.updateFormValue();
+        if (hadValues) {
+            this.pdsMultiselectChange.emit({ values: [], items: [] });
+        }
+    }
     /**
      * Handle global keyboard events for accessibility.
      * Closes dropdown on Escape key press regardless of focus location.
@@ -292,6 +323,7 @@ export class PdsMultiselect {
             return;
         if (event.key === 'Escape') {
             event.preventDefault();
+            this.pdsMultiselectDismiss.emit();
             this.closeDropdown();
             (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
         }
@@ -629,6 +661,12 @@ export class PdsMultiselect {
         this.isOpen = false;
         this.highlightedIndex = -1;
         this.searchQuery = '';
+        // Reset the selection-close guard after the focusout handler's setTimeout has resolved
+        if (this.isClosingViaSelection) {
+            setTimeout(() => {
+                this.isClosingViaSelection = false;
+            }, 0);
+        }
         // Clean up auto-update
         if (this.cleanupAutoUpdate) {
             this.cleanupAutoUpdate();
@@ -681,7 +719,7 @@ export class PdsMultiselect {
         });
     }
     toggleOption(option) {
-        var _a;
+        var _a, _b;
         // Handle create option
         if (option.isCreateOption) {
             // Prevent multiple create calls while one is in-flight
@@ -690,17 +728,18 @@ export class PdsMultiselect {
             }
             return;
         }
-        const isSelected = this.value.includes(String(option.id));
+        const optionId = String(option.id);
+        const isSelected = this.value.includes(optionId);
         if (isSelected) {
             // Remove from selection
-            this.value = this.value.filter(v => v !== String(option.id));
+            this.value = this.value.filter(v => v !== optionId);
         }
         else {
             // Add to selection
             if (this.maxSelections && this.value.length >= this.maxSelections) {
                 return;
             }
-            this.value = [...this.value, String(option.id)];
+            this.value = [...this.value, optionId];
         }
         // Sync selected items to ensure no duplicates and accurate state
         this.syncSelectedItems();
@@ -709,15 +748,22 @@ export class PdsMultiselect {
             values: this.value,
             items: this.selectedItems,
         });
-        // Keep focus on search input, don't close dropdown
-        (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        if (this.closePanelOnSelect) {
+            this.isClosingViaSelection = true;
+            this.closeDropdown();
+            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            // Keep focus on search input, don't close dropdown
+            (_b = this.searchInputEl) === null || _b === void 0 ? void 0 : _b.focus();
+        }
     }
     selectOption(option) {
         // For keyboard navigation - toggle the option
         this.toggleOption(option);
     }
     renderSelectedItemsList() {
-        if (this.selectedItems.length === 0)
+        if (this.hideSelectedItems || this.selectedItems.length === 0)
             return null;
         return (h("div", { class: "pds-multiselect__selected-section" }, h("ul", { class: "pds-multiselect__selected-list", role: "list" }, this.selectedItems.map(item => (h("li", { key: String(item.id), class: "pds-multiselect__selected-item" }, item.text))))));
     }
@@ -728,7 +774,7 @@ export class PdsMultiselect {
         const valueArray = this.ensureValueArray();
         const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
         const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
-        return (h("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, h("div", { class: "pds-multiselect__search" }, h("pds-icon", { name: "search", size: "small" }), h("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: "Find...", value: this.searchQuery, "aria-label": "Search options", "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), h("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || 'Options', id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (h("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (h("slot", { name: "loading" })) : (h("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (h("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (h("slot", { name: "empty" })) : (h("span", null, "No options found")))), filteredOptions.map((option, index) => {
+        return (h("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, h("div", { class: "pds-multiselect__search" }, h("pds-icon", { name: "search", size: "small" }), h("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label": "Search options", "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), h("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || 'Options', id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (h("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (h("slot", { name: "loading" })) : (h("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (h("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (h("slot", { name: "empty" })) : (h("span", null, "No options found")))), filteredOptions.map((option, index) => {
             const isSelected = valueArray.includes(String(option.id));
             const isCreateOption = option.isCreateOption;
             const isHighlighted = index === this.highlightedIndex && !isCreateOption;
@@ -752,19 +798,19 @@ export class PdsMultiselect {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (h(Host, { key: '52253faa88bce1a67e657e160b2d260ff92bc28b', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '43f73781a96bd421b7079984aaf4e1905a2ec29e', class: "pds-multiselect" }, this.label && (h("label", { key: '926e23ac24621da0af4336bfc64b9d4a6d44579b', htmlFor: this.componentId, class: {
+        return (h(Host, { key: '824364c4ab70a90abc5542ac66eb8259e727e4e6', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'ff103de53850eef00dad44e97333c58a54c8ae59', class: "pds-multiselect" }, this.label && (h("label", { key: '0524860c38d53aeddf35e9905abe783cb1174d6b', htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), h("div", { key: '5051808a8b883ee8b5e7e3acef927091f206aaaf', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), onFocusout: this.handleContainerFocusOut, style: { width: this.triggerWidth } }, h("button", { key: '4590bd41e14927fc9d652e0920b0cd7900bf4b1a', ref: el => (this.triggerEl = el), type: "button", class: {
+            } }, this.label)), h("div", { key: 'b6313b12f499656e98c33af524240fd51a332e68', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), onFocusout: this.handleContainerFocusOut, style: { width: this.triggerWidth } }, h("button", { key: 'fbf274a4dace5f039ce1ce46674d66a08c5c280d', ref: el => (this.triggerEl = el), type: "button", class: {
                 'pds-multiselect__trigger': true,
                 'pds-multiselect__trigger--open': this.isOpen,
                 'pds-multiselect__trigger--disabled': this.disabled,
                 'pds-multiselect__trigger--invalid': this.invalid || !!this.errorMessage,
                 'pds-multiselect__trigger--has-value': hasSelections,
-            }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, h("span", { key: '3033d029f02288071a16b2ef4a5399bb4b86ae7e', class: {
+            }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, h("span", { key: '314fc7f00db71a170f1fc7c83306cebc3397a451', class: {
                 'pds-multiselect__trigger-text': true,
                 'pds-multiselect__trigger-text--placeholder': !hasSelections,
-            } }, this.getTriggerText()), h("pds-icon", { key: '4d971d7a95e5e47c9141a6614f71b194bfa74dfb', class: "pds-multiselect__icon", icon: enlarge })), this.renderDropdown()), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '3571fafc7c78f785ccd7a1a8d73675b5e33fa317', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '4acd308de067093578520a4ec85f299960f6e2c0', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'a4cdf56804b77e474b9c757512ed6da54ddc5535', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '10eac87a742d793b3f4e3acb55bbe469b547e3d3', style: { display: 'none' } }, h("slot", { key: '1d55851a6f4a35f86684af5be7b6c840c2ed083b' })))));
+            } }, this.getTriggerText()), h("pds-icon", { key: 'e81690095180cfe9b4799c531ba5d7a9952a2a6c', class: "pds-multiselect__icon", icon: enlarge })), this.renderDropdown()), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: 'd2a511d548d10a1bc5b9704f7de6f050e00cb9f4', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '2cca6e85a6ca9033e7baea24a509bb6d7064119d', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '6f680d14585dac5c6de3d0ec864ef1311241d2d2', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '5be84a5f96531cb2add1d490c292a7482b444b83', style: { display: 'none' } }, h("slot", { key: 'cf9bece8f341293b6fa701b185db3926510c3845' })))));
     }
     static get is() { return "pds-multiselect"; }
     static get encapsulation() { return "shadow"; }
@@ -839,6 +885,49 @@ export class PdsMultiselect {
                 "attribute": "placeholder",
                 "defaultValue": "'Select...'"
             },
+            "searchPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'Find...'"
+                        }],
+                    "text": "Placeholder text for the search input inside the dropdown panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-placeholder",
+                "defaultValue": "'Find...'"
+            },
+            "closePanelOnSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to close the panel after an option is selected.\nDefaults to `false` (panel stays open for multi-select)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-panel-on-select",
+                "defaultValue": "false"
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -1093,6 +1182,26 @@ export class PdsMultiselect {
                 "attribute": "hide-label",
                 "defaultValue": "false"
             },
+            "hideSelectedItems": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the selected items summary section in the dropdown panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-selected-items",
+                "defaultValue": "false"
+            },
             "errorMessage": {
                 "type": "string",
                 "mutable": false,
@@ -1393,6 +1502,21 @@ export class PdsMultiselect {
                         }
                     }
                 }
+            }, {
+                "method": "pdsMultiselectDismiss",
+                "name": "pdsMultiselectDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dropdown is dismissed via Escape key or click outside.\n\nThis event fires only when the user explicitly dismisses the panel without making a selection:\n- \u2705 Fires: Pressing Escape key while dropdown is open\n- \u2705 Fires: Clicking outside the component while dropdown is open\n- \u274C Does NOT fire: When panel closes due to selection (including when `closePanelOnSelect` is true)\n- \u274C Does NOT fire: When panel closes programmatically via `closeDropdown()`\n\nEquivalent to Sage's `onEscapeHook`. Use this to restore parent UI state or run cleanup when the user cancels their interaction."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -1413,6 +1537,23 @@ export class PdsMultiselect {
                     "text": "Sets focus on the trigger button.",
                     "tags": []
                 }
+            },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears all selected values and resets the component.",
+                    "tags": []
+                }
             }
         };
     }