@pine-ds/core 4.3.0 → 4.4.0

package/dist/esm/pds-multiselect.entry.js

@@ -1,12 +1,15 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DcT8--Dn.js';
-import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as size } from './floating-ui.dom-DDtwbwIl.js';
-import { d as debounceEvent } from './utils-u_0lxWnH.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CB8Yh0Nt.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as size } from './floating-ui.dom-BPqJgIq6.js';
+import { c as cancelDebouncedEvent, d as debounceEvent, f as flushDebouncedEvent } from './utils-OYK5-nwe.js';
 import { i as isSpecTest, a as assignDescription, m as messageId } from './form-BuRbS7Hp.js';
-import { e as enlarge, b as danger } from './index-BU1hN5Vy.js';
-import { f as formatMessage, p as pluralize } from './i18n-format-BKsJZTyn.js';
+import { e as enlarge, b as danger } from './index-DxI-61GK.js';
+import { f as formatMessage, p as pluralize } from './i18n-format-BJgZHCWe.js';
 
-const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
+const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:fixed;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__option-action{-ms-flex-align:center;align-items:center;block-size:var(--pine-dimension-md);color:var(--pine-color-icon);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-md);-ms-flex-pack:center;justify-content:center;-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__footer{-webkit-border-before:var(--pine-border);border-block-start:var(--pine-border);border-block-start-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
 
+// Names only: pds-icon's `icon` prop also fetches URLs and data: SVGs, unsanitized.
+const PINE_ICON_NAME = /^[a-z0-9-]+$/i;
+const TABBABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 const PdsMultiselect = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -15,6 +18,8 @@ const PdsMultiselect = class {
         this.pdsMultiselectLoadOptions = createEvent(this, "pdsMultiselectLoadOptions");
         this.pdsMultiselectCreate = createEvent(this, "pdsMultiselectCreate");
         this.pdsMultiselectDismiss = createEvent(this, "pdsMultiselectDismiss");
+        this.pdsMultiselectOptionAction = createEvent(this, "pdsMultiselectOptionAction");
+        this.hasDisabledSlottedTrigger = false;
         /**
          * Placeholder text for the input field. Pass a translated string to localize it; defaults to English.
          * @defaultValue 'Select...'
@@ -140,6 +145,13 @@ const PdsMultiselect = class {
          * @default 3
          */
         this.maxInlinePills = 3;
+        /**
+         * Display mode for options in the dropdown panel.
+         * `'text'` shows each option's text (default). `'chip'` shows each option as a
+         * pds-chip, with a dot when the option has a `dotColor`.
+         * @defaultValue 'text'
+         */
+        this.optionDisplay = 'text';
         /**
          * If true, the multiselect is required.
          */
@@ -152,6 +164,21 @@ const PdsMultiselect = class {
          * CSRF header name for authenticated requests. Defaults to `X-CSRF-Token`.
          */
         this.csrfHeaderName = 'X-CSRF-Token';
+        /**
+         * Shows an action icon on each option that has an `actionIcon`, such as an edit pencil.
+         * The icon shows on the hovered or highlighted option; clicking it, or pressing Right Arrow on the highlighted option, emits `pdsMultiselectOptionAction`.
+         */
+        this.optionActions = false;
+        /**
+         * Tooltip for an option's action icon when the option has no `actionLabel`. Pass a translated string to localize it; `{text}` is interpolated.
+         * @defaultValue 'Edit {text}'
+         */
+        this.optionActionLabel = 'Edit {text}';
+        /**
+         * Screen-reader hint on each option that has an action, naming the key that runs it. Pass a translated string to localize it; `{action}` is interpolated with the option's action label.
+         * @defaultValue 'Press Right Arrow to {action}'
+         */
+        this.optionActionDescription = 'Press Right Arrow to {action}';
         // Internal state
         this.isOpen = false;
         this.searchQuery = '';
@@ -175,7 +202,7 @@ const PdsMultiselect = class {
                 return;
             // In inline-pill mode, ignore clicks that originated inside a pds-chip.
             // Chip close-button clicks are handled by handlePillRemove; chip body clicks should not toggle the panel.
-            if (e && this.selectedDisplay === 'pill' && this.pillPosition === 'inline') {
+            if (e && !this.slottedTriggerEl && this.selectedDisplay === 'pill' && this.pillPosition === 'inline') {
                 const fromChip = e.composedPath().some(el => { var _a; return ((_a = el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'pds-chip'; });
                 if (fromChip)
                     return;
@@ -188,9 +215,11 @@ const PdsMultiselect = class {
             }
         };
         this.handleTriggerKeyDown = (e) => {
+            if (this.disabled)
+                return;
             // Ignore keydown events that bubbled from child elements (e.g. chip close buttons).
             // Only handle keys when the trigger itself is the event target.
-            if (e.target !== this.triggerEl)
+            if (e.target !== this.activeTriggerEl)
                 return;
             switch (e.key) {
                 case 'ArrowDown':
@@ -254,10 +283,43 @@ const PdsMultiselect = class {
                         }
                     }
                     break;
+                // Right Arrow still moves the caret through typed text; a plain Right Arrow at the end runs the action.
+                case 'ArrowRight': {
+                    const option = filteredOptions[this.highlightedIndex];
+                    const isPlainKey = !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey && !e.isComposing;
+                    if (isPlainKey && option && this.hasOptionAction(option) && this.isCaretAtEndOfSearch()) {
+                        e.preventDefault();
+                        this.runOptionAction(option);
+                    }
+                    break;
+                }
                 // Escape is handled by the global @Listen('keydown') handler
-                case 'Tab':
-                    this.closeDropdown();
+                case 'Tab': {
+                    const firstFooterTabbable = e.shiftKey ? undefined : this.getFooterTabbables()[0];
+                    firstFooterTabbable === null || firstFooterTabbable === void 0 ? void 0 : firstFooterTabbable.focus();
+                    if (firstFooterTabbable === null || firstFooterTabbable === void 0 ? void 0 : firstFooterTabbable.matches(':focus')) {
+                        // Each option's checkbox is a tab stop, so jump past them to the footer.
+                        e.preventDefault();
+                    }
+                    else {
+                        this.closeDropdown();
+                    }
                     break;
+                }
+            }
+        };
+        this.handleFooterKeyDown = (e) => {
+            var _a;
+            if (e.key !== 'Tab')
+                return;
+            const tabbables = this.getFooterTabbables();
+            const focused = e.composedPath()[0];
+            if (e.shiftKey && focused === tabbables[0]) {
+                e.preventDefault();
+                (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else if (!e.shiftKey && focused === tabbables[tabbables.length - 1]) {
+                this.closeDropdown();
             }
         };
         this.handleContainerFocusOut = () => {
@@ -272,9 +334,9 @@ const PdsMultiselect = class {
                 const activeElement = document.activeElement;
                 // Check if focus is within our component's shadow root
                 const isInShadowRoot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement);
-                // Also check if focus is on the host element itself
-                const isOnHost = activeElement === this.el;
-                if (!isInShadowRoot && !isOnHost) {
+                // Also check the host itself and its light DOM, where slotted trigger and footer content live
+                const isInHost = this.el.contains(activeElement);
+                if (!isInShadowRoot && !isInHost) {
                     this.pdsMultiselectDismiss.emit();
                     this.closeDropdown();
                 }
@@ -289,6 +351,18 @@ const PdsMultiselect = class {
                 return;
             this.highlightedIndex = index;
         };
+        this.handleOptionActionMouseDown = (e) => {
+            // Stops the row's mousedown from toggling the option, and keeps focus in the search input.
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        this.handleOptionActionClick = (option) => () => {
+            this.runOptionAction(option);
+        };
+        // Keeps focus in the search input so the panel stays open until the footer's click lands.
+        this.handleFooterMouseDown = (e) => {
+            e.preventDefault();
+        };
         this.handleScroll = (e) => {
             if (!this.asyncUrl || !this.hasMore || this.loading)
                 return;
@@ -310,7 +384,7 @@ const PdsMultiselect = class {
             const optionId = String(item.id);
             this.value = this.value.filter(v => v !== optionId);
             this.syncSelectedItems();
-            this.pdsMultiselectChange.emit({ values: this.value, items: this.selectedItems });
+            this.emitChange({ removed: [optionId] });
             // Clear first so screen readers re-announce even when the same item is removed twice
             this.removalAnnouncement = '';
             queueMicrotask(() => { this.removalAnnouncement = formatMessage(this.itemRemovedLabel, { item: item.text }); });
@@ -319,7 +393,7 @@ const PdsMultiselect = class {
                 (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
             }
             else {
-                (_b = this.triggerEl) === null || _b === void 0 ? void 0 : _b.focus();
+                (_b = this.activeTriggerEl) === null || _b === void 0 ? void 0 : _b.focus();
             }
             setTimeout(() => { this.isClosingViaSelection = false; }, 0);
         };
@@ -333,6 +407,7 @@ const PdsMultiselect = class {
     componentWillLoad() {
         this.originalSearchEmitter = this.pdsMultiselectSearch;
         this.syncSelectedItems();
+        this.syncSlottedTrigger();
     }
     componentDidLoad() {
         this.setupDebounce();
@@ -366,6 +441,7 @@ const PdsMultiselect = class {
     }
     disconnectedCallback() {
         var _a, _b;
+        cancelDebouncedEvent(this.pdsMultiselectSearch);
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
         (_b = this.cleanupAutoUpdate) === null || _b === void 0 ? void 0 : _b.call(this);
         this.clearAsyncFetchState();
@@ -375,6 +451,8 @@ const PdsMultiselect = class {
         this.pdsMultiselectSearch = debounce === undefined
             ? originalSearchEmitter !== null && originalSearchEmitter !== void 0 ? originalSearchEmitter : pdsMultiselectSearch
             : debounceEvent(pdsMultiselectSearch, debounce);
+        // After the swap, so an emit made while flushing goes to the new emitter, not the old one.
+        flushDebouncedEvent(pdsMultiselectSearch);
     }
     valueChanged(newValue) {
         // Handle JSON string values (from HTML attributes)
@@ -420,26 +498,42 @@ const PdsMultiselect = class {
         // This handles the case where value is set before options are loaded (e.g., from slot)
         this.syncSelectedItems();
     }
+    isOpenChanged() {
+        var _a;
+        (_a = this.slottedTriggerEl) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', String(this.isOpen));
+    }
+    disabledChanged() {
+        this.syncSlottedTrigger();
+    }
     /**
      * Sets focus on the trigger button.
      */
     async setFocus() {
         var _a;
-        (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+        (_a = this.activeTriggerEl) === 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 !== '';
+        const removed = this.ensureValueArray();
         this.value = [];
         this.searchQuery = '';
         this.syncSelectedItems();
         this.updateFormValue();
         if (hadValues) {
-            this.pdsMultiselectChange.emit({ values: [], items: [] });
+            this.emitChange({ removed });
         }
     }
+    /**
+     * Refetches the first page of options from `asyncUrl` for the current search, such as after an option is renamed
+     * or recolored elsewhere. Selected items in that page pick up the new text and dot color without emitting a change;
+     * other selected items keep the text and dot color they were last loaded with. Does nothing without `asyncUrl`.
+     */
+    async refreshOptions() {
+        await this.fetchOptions(this.searchQuery, 1);
+    }
     /**
      * Handle global keyboard events for accessibility.
      * Closes dropdown on Escape key press regardless of focus location.
@@ -452,12 +546,70 @@ const PdsMultiselect = class {
             event.preventDefault();
             this.pdsMultiselectDismiss.emit();
             this.closeDropdown();
-            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+            (_a = this.activeTriggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    get activeTriggerEl() {
+        var _a;
+        return (_a = this.slottedTriggerEl) !== null && _a !== void 0 ? _a : this.triggerEl;
+    }
+    syncSlottedTrigger() {
+        const trigger = Array.from(this.el.children).find(child => child.getAttribute('slot') === 'trigger');
+        if (trigger !== this.slottedTriggerEl) {
+            const previous = this.slottedTriggerEl;
+            if (previous) {
+                previous.removeEventListener('click', this.handleTriggerClick);
+                previous.removeEventListener('keydown', this.handleTriggerKeyDown);
+                previous.removeAttribute('aria-expanded');
+                previous.removeAttribute('aria-haspopup');
+                previous.removeAttribute('aria-disabled');
+                this.setSlottedTriggerDisabled(previous, false);
+            }
+            trigger === null || trigger === void 0 ? void 0 : trigger.addEventListener('click', this.handleTriggerClick);
+            trigger === null || trigger === void 0 ? void 0 : trigger.addEventListener('keydown', this.handleTriggerKeyDown);
+            this.slottedTriggerEl = trigger;
+        }
+        if (!trigger)
+            return;
+        trigger.setAttribute('aria-haspopup', 'listbox');
+        trigger.setAttribute('aria-expanded', String(this.isOpen));
+        if (this.disabled) {
+            trigger.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            trigger.removeAttribute('aria-disabled');
+        }
+        this.setSlottedTriggerDisabled(trigger, this.disabled);
+    }
+    setSlottedTriggerDisabled(trigger, disabled) {
+        if (!('disabled' in trigger)) {
+            // A custom element gets its `disabled` property once it's defined, which can be after the multiselect loads.
+            if (disabled && trigger.localName.includes('-') && customElements.get(trigger.localName) === undefined) {
+                customElements.whenDefined(trigger.localName).then(() => this.syncSlottedTrigger());
+            }
+            return;
+        }
+        const control = trigger;
+        // Only re-enable a trigger the multiselect disabled, so one the consumer disabled stays disabled.
+        if (disabled && !control.disabled) {
+            control.disabled = true;
+            this.hasDisabledSlottedTrigger = true;
+        }
+        else if (!disabled && this.hasDisabledSlottedTrigger) {
+            control.disabled = false;
+            this.hasDisabledSlottedTrigger = false;
         }
     }
     setupMutationObserver() {
-        this.observer = new MutationObserver(() => {
-            this.updateOptionsFromSlot();
+        this.observer = new MutationObserver(records => {
+            if (records.some(record => record.target === this.el)) {
+                this.syncSlottedTrigger();
+            }
+            // Changes inside the slotted trigger, like re-rendered chips, can't change the options.
+            const trigger = this.slottedTriggerEl;
+            if (!trigger || records.some(record => !trigger.contains(record.target))) {
+                this.updateOptionsFromSlot();
+            }
         });
         this.observer.observe(this.el, {
             childList: true,
@@ -471,18 +623,12 @@ const PdsMultiselect = class {
             return;
         const options = [];
         slot.assignedElements({ flatten: true }).forEach(el => {
-            var _a;
             if (el.tagName === 'OPTGROUP') {
                 const optgroup = el;
                 const groupLabel = optgroup.label;
                 const groupDisabled = optgroup.disabled;
                 optgroup.querySelectorAll('option').forEach((opt) => {
-                    var _a;
-                    const option = {
-                        id: opt.value,
-                        text: ((_a = opt.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || opt.value,
-                        disabled: opt.disabled || groupDisabled || undefined,
-                    };
+                    const option = this.parseSlottedOption(opt, groupDisabled);
                     if (groupLabel) {
                         option.group = groupLabel;
                     }
@@ -490,12 +636,7 @@ const PdsMultiselect = class {
                 });
             }
             else if (el.tagName === 'OPTION') {
-                const opt = el;
-                options.push({
-                    id: opt.value,
-                    text: ((_a = opt.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || opt.value,
-                    disabled: opt.disabled || undefined,
-                });
+                options.push(this.parseSlottedOption(el, false));
             }
         });
         // Only update if we actually found options AND we're not using async/external options
@@ -504,6 +645,27 @@ const PdsMultiselect = class {
             this.internalOptions = options;
         }
     }
+    parseSlottedOption(opt, groupDisabled) {
+        var _a;
+        const option = {
+            id: opt.value,
+            text: ((_a = opt.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || opt.value,
+            disabled: opt.disabled || groupDisabled || undefined,
+        };
+        const dotColor = opt.getAttribute('data-dot-color');
+        if (dotColor) {
+            option.dotColor = dotColor;
+        }
+        const actionIcon = opt.getAttribute('data-action-icon');
+        if (actionIcon) {
+            option.actionIcon = actionIcon;
+        }
+        const actionLabel = opt.getAttribute('data-action-label');
+        if (actionLabel) {
+            option.actionLabel = actionLabel;
+        }
+        return option;
+    }
     clearAsyncFetchState() {
         var _a;
         if (this.fetchDebounceTimer !== undefined) {
@@ -613,7 +775,7 @@ const PdsMultiselect = class {
             this.internals.setFormValue(formData);
             // Update validity state for required validation
             if (this.required && valueArray.length === 0) {
-                this.internals.setValidity({ valueMissing: true }, 'Please select at least one option.', this.triggerEl);
+                this.internals.setValidity({ valueMissing: true }, 'Please select at least one option.', this.activeTriggerEl);
             }
             else {
                 this.internals.setValidity({});
@@ -766,10 +928,7 @@ const PdsMultiselect = class {
                 newOption,
             });
             // Emit change event with synced items
-            this.pdsMultiselectChange.emit({
-                values: this.value,
-                items: this.selectedItems,
-            });
+            this.emitChange({ added: [String(newOption.id)] });
             // Clear search and keep dropdown open
             this.searchQuery = '';
             this.highlightedIndex = -1;
@@ -786,6 +945,44 @@ const PdsMultiselect = class {
             this.creating = false;
         }
     }
+    getFooterTabbables() {
+        const candidates = [];
+        Array.from(this.el.children)
+            .filter(child => child.getAttribute('slot') === 'footer')
+            .forEach(content => candidates.push(content, ...Array.from(content.querySelectorAll('*'))));
+        // Browsers without checkVisibility (Safari before 17.4) count every control as visible.
+        return candidates
+            .map(el => { var _a; return (el.matches(TABBABLE_SELECTOR) ? el : (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(TABBABLE_SELECTOR)); })
+            .filter((el) => { var _a, _b; return !!el && ((_b = (_a = el.checkVisibility) === null || _a === void 0 ? void 0 : _a.call(el)) !== null && _b !== void 0 ? _b : true); });
+    }
+    isCaretAtEndOfSearch() {
+        var _a, _b;
+        const input = this.searchInputEl;
+        if (!input)
+            return true;
+        const end = input.value.length;
+        return ((_a = input.selectionStart) !== null && _a !== void 0 ? _a : end) === end && ((_b = input.selectionEnd) !== null && _b !== void 0 ? _b : end) === end;
+    }
+    hasOptionAction(option) {
+        return (this.optionActions &&
+            typeof option.actionIcon === 'string' &&
+            PINE_ICON_NAME.test(option.actionIcon) &&
+            !option.isCreateOption &&
+            !option.disabled);
+    }
+    // Without hover, revealing the icon would take a tap that also toggles the option, so touch shows every icon.
+    get isHoverless() {
+        var _a, _b, _c;
+        (_a = this.hoverlessQuery) !== null && _a !== void 0 ? _a : (this.hoverlessQuery = (_b = window.matchMedia) === null || _b === void 0 ? void 0 : _b.call(window, '(hover: none)'));
+        return !!((_c = this.hoverlessQuery) === null || _c === void 0 ? void 0 : _c.matches);
+    }
+    runOptionAction(option) {
+        var _a;
+        this.isClosingViaSelection = true;
+        this.closeDropdown();
+        (_a = this.activeTriggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+        this.pdsMultiselectOptionAction.emit({ option });
+    }
     openDropdown() {
         if (this.disabled)
             return;
@@ -830,12 +1027,12 @@ const PdsMultiselect = class {
             return;
         // In inline pill mode, triggerEl is the small chevron button — use the full-width
         // wrapper div as the Floating UI reference so the panel aligns with the whole trigger.
-        const referenceEl = this.pillInlineTriggerEl || this.triggerEl || this.containerEl;
+        const referenceEl = this.slottedTriggerEl || this.pillInlineTriggerEl || this.triggerEl || this.containerEl;
         const { minWidth, panelWidth } = this;
         const updatePosition = () => {
             computePosition(referenceEl, this.panelEl, {
                 placement: 'bottom-start',
-                strategy: 'absolute',
+                strategy: 'fixed',
                 middleware: [
                     offset(12),
                     flip(),
@@ -872,6 +1069,9 @@ const PdsMultiselect = class {
             highlighted === null || highlighted === void 0 ? void 0 : highlighted.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
         });
     }
+    emitChange({ added = [], removed = [] }) {
+        this.pdsMultiselectChange.emit({ values: this.value, items: this.selectedItems, added, removed });
+    }
     toggleOption(option) {
         var _a, _b;
         if (option.disabled)
@@ -900,14 +1100,11 @@ const PdsMultiselect = class {
         // Sync selected items to ensure no duplicates and accurate state
         this.syncSelectedItems();
         // Emit change event with synced items
-        this.pdsMultiselectChange.emit({
-            values: this.value,
-            items: this.selectedItems,
-        });
+        this.emitChange(isSelected ? { removed: [optionId] } : { added: [optionId] });
         if (this.closePanelOnSelect) {
             this.isClosingViaSelection = true;
             this.closeDropdown();
-            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+            (_a = this.activeTriggerEl) === null || _a === void 0 ? void 0 : _a.focus();
         }
         else {
             // Keep focus on search input, don't close dropdown
@@ -944,13 +1141,22 @@ const PdsMultiselect = class {
         const isHighlighted = index === this.highlightedIndex && !isCreateOption;
         const optionId = `${this.componentId}-option-${index}`;
         const isCreateDisabled = isCreateOption && this.creating;
+        const hasAction = this.hasOptionAction(option);
         return (h("li", { key: String(option.id), id: optionId, class: {
                 'pds-multiselect__option': true,
                 'pds-multiselect__option--highlighted': isHighlighted,
                 'pds-multiselect__option--selected': isSelected,
                 'pds-multiselect__option--create': isCreateOption,
                 'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
-            }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (h("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, h("pds-icon", { name: "add", size: "small" }), h("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }))));
+            }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (h("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, h("pds-icon", { name: "add", size: "small" }), h("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (h("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
+    }
+    renderOptionAction(option, optionId, isHighlighted) {
+        var _a;
+        const label = formatMessage((_a = option.actionLabel) !== null && _a !== void 0 ? _a : this.optionActionLabel, { text: option.text });
+        return [
+            h("span", { class: "pds-multiselect__option-action", title: label, "aria-hidden": "true", onMouseDown: this.handleOptionActionMouseDown, onClick: this.handleOptionActionClick(option) }, (isHighlighted || this.isHoverless) && h("pds-icon", { name: option.actionIcon })),
+            h("span", { id: `${optionId}-action-description`, hidden: true }, formatMessage(this.optionActionDescription, { action: label })),
+        ];
     }
     renderSelectedItemsList() {
         if (this.hideSelectedItems || this.selectedItems.length === 0)
@@ -964,12 +1170,13 @@ const PdsMultiselect = class {
         const valueArray = this.ensureValueArray();
         const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
         const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
+        const hasSlottedFooter = !!this.el.querySelector('[slot="footer"]');
         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": this.searchOptionsLabel, "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 || this.optionsLabel, 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, this.noOptionsFoundLabel)))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
             if (item.type === 'group') {
                 return (h("li", { key: `group-${itemIndex}`, role: "group", "aria-label": item.group, class: "pds-multiselect__group" }, h("span", { class: "pds-multiselect__group-header", "aria-hidden": "true" }, item.group), h("ul", { class: "pds-multiselect__group-list", role: "presentation" }, item.options.map(({ option, index }) => this.renderOption(option, index, valueArray)))));
             }
             return this.renderOption(item.option, item.index, valueArray);
-        }), this.hasMore && !this.loading && (h("li", { class: "pds-multiselect__load-more", role: "presentation" }, h("pds-loader", { size: "small" }))))));
+        }), this.hasMore && !this.loading && (h("li", { class: "pds-multiselect__load-more", role: "presentation" }, h("pds-loader", { size: "small" })))), hasSlottedFooter && (h("div", { class: "pds-multiselect__footer", onMouseDown: this.handleFooterMouseDown, onKeyDown: this.handleFooterKeyDown }, h("slot", { name: "footer" })))));
     }
     renderInlinePills() {
         const hasSelections = this.selectedItems.length > 0;
@@ -1023,17 +1230,17 @@ const PdsMultiselect = class {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (h(Host, { key: '5d4de9ca729d5bfb63a8a73f8f40328b9ab48f57', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '2b5e1e01caaa4a6540a67e2638a20072e9f706cb', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: 'f23b840feb4e243d90b3a9913dab1b238e7c497d', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (h(Host, { key: '295354c218d03a512ee87a9f19d2267a59731eb1', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '8696c02fad869239fa85dcec7f92a3efb402c963', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: '2a9cc565c5dbcf78305eb65e94d795669fb0f93b', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), h("div", { key: '2e1f89d6f06332e957858c0eea34fca1a9629921', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+            } }, this.label)), h("div", { key: '9358ebffb50e74fe4ceb9ca1c13cf819cc3e96e6', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", 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,
                 'pds-multiselect__trigger--pill-inline': true,
-            }, onClick: this.handleTriggerClick }, this.renderInlinePills(), h("button", { ref: el => (this.triggerEl = el), type: "button", id: this.componentId, part: "pill-toggle", class: "pds-multiselect__pill-toggle", disabled: this.disabled, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-labelledby": this.label ? `${this.componentId}-label` : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onKeyDown: this.handleTriggerKeyDown }, h("pds-icon", { class: "pds-multiselect__icon", icon: enlarge })))) : (h("button", { ref: el => (this.triggerEl = el), type: "button", part: "trigger", class: {
+            }, onClick: this.handleTriggerClick }, this.renderInlinePills(), h("button", { ref: el => (this.triggerEl = el), type: "button", id: this.componentId, part: "pill-toggle", class: "pds-multiselect__pill-toggle", disabled: this.disabled, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-labelledby": this.label ? `${this.componentId}-label` : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onKeyDown: this.handleTriggerKeyDown }, h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge })))) : (h("button", { ref: el => (this.triggerEl = el), type: "button", part: "trigger", class: {
                 'pds-multiselect__trigger': true,
                 'pds-multiselect__trigger--open': this.isOpen,
                 'pds-multiselect__trigger--disabled': this.disabled,
@@ -1042,7 +1249,7 @@ const PdsMultiselect = 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.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, h("span", { class: {
                 'pds-multiselect__trigger-text': true,
                 'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
-            } }, this.getTriggerText()), h("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '3d2e201157ce16abbcd12fa9254ced7f2b562a8f', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '3bbf405df2e72ae730529f28273b003b3332e980', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: 'ef4a27162b00b14c3c9dfcb695f311961f2f56e5', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '99fb12375e2d660018276091bf8014b9bc9a672e', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '8fc6369015e8d04d1dec582007733eb5db6776f5', style: { display: 'none' } }, h("slot", { key: 'a808ecb0f4b2c00fca478cda5c0054c6aba29a8d' })))));
+            } }, this.getTriggerText()), h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '722da251199792366dc72b6c7f016e24ae807b30', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '7b4da9b2e04f53f3e8f245c119135f3b664897ec', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '95a152f6a350eee2f67dbab2930f19e583ca3b85', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '7b9cded907054757a6f054d0d325811a2199e496', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '8b07974c8e2d838d76c17c3a52ba4282fb101968', style: { display: 'none' } }, h("slot", { key: '0a34d582bc4dd780072f00ac13bfdce7e297191e' })))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -1058,6 +1265,12 @@ const PdsMultiselect = class {
             }],
         "internalOptions": [{
                 "internalOptionsChanged": 0
+            }],
+        "isOpen": [{
+                "isOpenChanged": 0
+            }],
+        "disabled": [{
+                "disabledChanged": 0
             }]
     }; }
 };