@pine-ds/core 3.20.0 → 3.21.1

package/dist/cjs/pds-accordion.cjs.entry.js

@@ -8,6 +8,7 @@ const pdsAccordionCss = ":host{display:block}details{--number-animation-transfor
 const PdsAccordion = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.pdsAccordionToggle = index.createEvent(this, "pdsAccordionToggle");
         /**
          * Can be used to manually set the open state of the accordion.
          * @defaultValue false
@@ -24,13 +25,13 @@ const PdsAccordion = class {
         };
     }
     handleOpenState(newValue) {
-        this.isOpen = newValue;
+        this.pdsAccordionToggle.emit(newValue);
     }
     componentDidLoad() {
         this.detailsEl.addEventListener('toggle', this.handleToggle);
     }
     render() {
-        return (index.h(index.Host, { key: 'd53fcdad106563a15bb6d1631cf29c9f1a43828e', class: "pds-accordion", id: this.componentId }, index.h("details", Object.assign({ key: 'cc3cda2e1e4df8c1b9ed7762329cfa082b1df756' }, this.getOpenAttribute(), { ref: (el) => (this.detailsEl = el) }), index.h("summary", { key: 'd2ee68e36d384e1701909647e5ded2eecb9309e0', part: "accordion-button" }, index.h("slot", { key: '7c68d676a7928d53ff6785c71a0f3b08c4a2176b', name: "label" }, "Details"), index.h("pds-icon", { key: '523c340fc5741f4cbf792f5a5a39f537f6db588c', icon: index$1.downSmall, part: "accordion-icon" })), index.h("div", { key: '87a896973b005365494b82a8200646a8b67b27e5', part: "accordion-body", class: "pds-accordion__body" }, index.h("slot", { key: 'd307f6de804cfa3e9a39646058e9ea1fb465abda' })))));
+        return (index.h(index.Host, { key: 'dd45657cb2bfe2e26f3a2fcad6a941559f1968c5', class: "pds-accordion", id: this.componentId }, index.h("details", Object.assign({ key: '9dff1b1a3e4cdd308537c1e5f4020d6b74e4ac4e' }, this.getOpenAttribute(), { ref: (el) => (this.detailsEl = el) }), index.h("summary", { key: '59152e8eece069bedd0109d1952dc1de95bc5d9a', part: "accordion-button" }, index.h("slot", { key: '73881348e657d880c60a5420a758217789f03b0c', name: "label" }, "Details"), index.h("pds-icon", { key: 'dfe5c28de56ef76bda50f36a406ac2072ed4bd77', icon: index$1.downSmall, part: "accordion-icon" })), index.h("div", { key: '08d019728935164bb315035369044dd513a2c9db', part: "accordion-body", class: "pds-accordion__body" }, index.h("slot", { key: 'a67ce7ec1acf795827db51465b80c1ecad96a3e3' })))));
     }
     static get watchers() { return {
         "isOpen": ["handleOpenState"]

package/dist/cjs/pds-accordion.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-accordion.entry.cjs.js","sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\ndetails {\n  --number-animation-transform-timing: 200ms;\n\n  border-radius: var(--pine-dimension-xs);\n\n  pds-icon {\n    transform: scaleY(1);\n  }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n  background-color: var(--pine-color-background-container);\n\n  summary {\n    color: var(--pine-color-text-active);\n    font-weight: var(--pine-font-weight-semi-bold);\n\n    pds-icon {\n      transform: scaleY(-1);\n    }\n  }\n}\n\nsummary {\n  background-color: var(--pine-color-background-container);\n  border-radius: var(--pine-dimension-xs);\n  color: var(--pine-color-text-muted);\n  font-family: var(--pine-font-family-body);\n  font-size: var(--pine-font-size-body-md);\n  font-weight: var(--pine-font-weight-medium);\n  letter-spacing: var(--pine-letter-spacing);\n  line-height: var(--pine-line-height-body);\n  padding-block: calc(var(--pine-dimension-2xs) * 1.5);\n  padding-inline-end: var(--pine-dimension-2xs);\n  padding-inline-start: var(--pine-dimension-xs);\n\n  // Removes marker on Firefox/Chrome\n  /* stylelint-disable-next-line */\n  align-items: center;\n  display: flex;\n\n  // Removes marker on Safari\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &:hover {\n    background: var(--pine-color-background-container-hover);\n    color: var(--pine-color-text);\n    cursor: pointer;\n  }\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n    position: relative;\n  }\n\n  pds-icon {\n    margin-inline-start: auto;\n  }\n}\n\n.pds-accordion__body {\n  padding-block-end: calc(var(--pine-dimension-sm) + 2);\n  padding-inline: calc(var(--pine-dimension-2xs) * 1.5);\n}\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @part accordion-body - Accordion body styles.\n * @part accordion-button - Accordion button/trigger styles.\n * @part accordion-icon - Accordion icon styles.\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n  tag: 'pds-accordion',\n  styleUrls: ['pds-accordion.scss'],\n  shadow: true,\n})\nexport class PdsAccordion {\n  private detailsEl: HTMLDetailsElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   * @defaultValue null\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Can be used to manually set the open state of the accordion.\n   * @defaultValue false\n   */\n  @Prop({\n    attribute: 'open',\n    mutable: true,\n    reflect: true,\n  }) isOpen: boolean = false;\n\n  @Watch('isOpen')\n  handleOpenState(newValue: boolean) {\n    this.isOpen = newValue;\n  }\n\n  private handleToggle = () => {\n    this.isOpen = this.detailsEl.open;\n  };\n\n  private getOpenAttribute = () => {\n    if (this.isOpen !== false) {\n      return { open: true };\n    }\n    return '';\n  };\n\n  componentDidLoad() {\n    this.detailsEl.addEventListener('toggle', this.handleToggle);\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-accordion\" id={this.componentId}>\n        <details {...this.getOpenAttribute()} ref={(el) => (this.detailsEl = el as HTMLDetailsElement)}>\n          <summary part=\"accordion-button\">\n            <slot name=\"label\">Details</slot>\n            <pds-icon icon={downSmall} part=\"accordion-icon\" />\n          </summary>\n          <div part=\"accordion-body\" class=\"pds-accordion__body\">\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","downSmall"],"mappings":";;;;;AAAA,MAAM,eAAe,GAAG,miDAAmiD;;MCe9iD,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAcE;;;AAGG;AAKA,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAOlB,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI;AACnC,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;AACzB,gBAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE;;AAEvB,YAAA,OAAO,EAAE;AACX,SAAC;AAqBF;AAlCC,IAAA,eAAe,CAAC,QAAiB,EAAA;AAC/B,QAAA,IAAI,CAAC,MAAM,GAAG,QAAQ;;IAcxB,gBAAgB,GAAA;QACd,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;IAG9D,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,EAAA,EAC9CD,OAAA,CAAA,SAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAa,IAAI,CAAC,gBAAgB,EAAE,EAAE,EAAA,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAwB,CAAC,EAAA,CAAA,EAC5FA,OAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,kBAAkB,EAAA,EAC9BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAe,EAAA,SAAA,CAAA,EACjCA,OAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAEE,iBAAS,EAAE,IAAI,EAAC,gBAAgB,GAAG,CAC3C,EACVF,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,qBAAqB,EAAA,EACpDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACE,CACL;;;;;;;;;;"}
+{"version":3,"file":"pds-accordion.entry.cjs.js","sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\ndetails {\n  --number-animation-transform-timing: 200ms;\n\n  border-radius: var(--pine-dimension-xs);\n\n  pds-icon {\n    transform: scaleY(1);\n  }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n  background-color: var(--pine-color-background-container);\n\n  summary {\n    color: var(--pine-color-text-active);\n    font-weight: var(--pine-font-weight-semi-bold);\n\n    pds-icon {\n      transform: scaleY(-1);\n    }\n  }\n}\n\nsummary {\n  background-color: var(--pine-color-background-container);\n  border-radius: var(--pine-dimension-xs);\n  color: var(--pine-color-text-muted);\n  font-family: var(--pine-font-family-body);\n  font-size: var(--pine-font-size-body-md);\n  font-weight: var(--pine-font-weight-medium);\n  letter-spacing: var(--pine-letter-spacing);\n  line-height: var(--pine-line-height-body);\n  padding-block: calc(var(--pine-dimension-2xs) * 1.5);\n  padding-inline-end: var(--pine-dimension-2xs);\n  padding-inline-start: var(--pine-dimension-xs);\n\n  // Removes marker on Firefox/Chrome\n  /* stylelint-disable-next-line */\n  align-items: center;\n  display: flex;\n\n  // Removes marker on Safari\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &:hover {\n    background: var(--pine-color-background-container-hover);\n    color: var(--pine-color-text);\n    cursor: pointer;\n  }\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n    position: relative;\n  }\n\n  pds-icon {\n    margin-inline-start: auto;\n  }\n}\n\n.pds-accordion__body {\n  padding-block-end: calc(var(--pine-dimension-sm) + 2);\n  padding-inline: calc(var(--pine-dimension-2xs) * 1.5);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @part accordion-body - Accordion body styles.\n * @part accordion-button - Accordion button/trigger styles.\n * @part accordion-icon - Accordion icon styles.\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n  tag: 'pds-accordion',\n  styleUrls: ['pds-accordion.scss'],\n  shadow: true,\n})\nexport class PdsAccordion {\n  private detailsEl: HTMLDetailsElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   * @defaultValue null\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Can be used to manually set the open state of the accordion.\n   * @defaultValue false\n   */\n  @Prop({\n    attribute: 'open',\n    mutable: true,\n    reflect: true,\n  }) isOpen: boolean = false;\n\n  /**\n   * Emitted when the accordion open state changes.\n   */\n  @Event() pdsAccordionToggle: EventEmitter<boolean>;\n\n  @Watch('isOpen')\n  handleOpenState(newValue: boolean) {\n    this.pdsAccordionToggle.emit(newValue);\n  }\n\n  private handleToggle = () => {\n    this.isOpen = this.detailsEl.open;\n  };\n\n  private getOpenAttribute = () => {\n    if (this.isOpen !== false) {\n      return { open: true };\n    }\n    return '';\n  };\n\n  componentDidLoad() {\n    this.detailsEl.addEventListener('toggle', this.handleToggle);\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-accordion\" id={this.componentId}>\n        <details {...this.getOpenAttribute()} ref={(el) => (this.detailsEl = el as HTMLDetailsElement)}>\n          <summary part=\"accordion-button\">\n            <slot name=\"label\">Details</slot>\n            <pds-icon icon={downSmall} part=\"accordion-icon\" />\n          </summary>\n          <div part=\"accordion-body\" class=\"pds-accordion__body\">\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","downSmall"],"mappings":";;;;;AAAA,MAAM,eAAe,GAAG,miDAAmiD;;MCe9iD,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAcE;;;AAGG;AAKA,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAYlB,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI;AACnC,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;AACzB,gBAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE;;AAEvB,YAAA,OAAO,EAAE;AACX,SAAC;AAqBF;AAlCC,IAAA,eAAe,CAAC,QAAiB,EAAA;AAC/B,QAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAcxC,gBAAgB,GAAA;QACd,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;IAG9D,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,EAAA,EAC9CD,OAAA,CAAA,SAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAa,IAAI,CAAC,gBAAgB,EAAE,EAAE,EAAA,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAwB,CAAC,EAAA,CAAA,EAC5FA,OAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,kBAAkB,EAAA,EAC9BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAe,EAAA,SAAA,CAAA,EACjCA,OAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAEE,iBAAS,EAAE,IAAI,EAAC,gBAAgB,GAAG,CAC3C,EACVF,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,qBAAqB,EAAA,EACpDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACE,CACL;;;;;;;;;;"}

package/dist/cjs/pds-combobox.cjs.entry.js

@@ -2006,6 +2006,14 @@ const PdsCombobox = class {
             this.optionEls.push(optionEl);
             this.allItems.push(optionEl);
         });
+        // Re-apply preselection if a value is set but no option has been selected yet.
+        // This handles the case where `value` is set before async options have loaded.
+        if (this.value && !this.selectedOption) {
+            const matchingOption = this.optionEls.find(opt => opt.value === this.value);
+            if (matchingOption) {
+                this.setSelectedOption(matchingOption);
+            }
+        }
         this.filterOptions();
     }
     updateOptions() {
@@ -2618,10 +2626,10 @@ const PdsCombobox = class {
     }
     render() {
         const triggerClass = `pds-combobox__button-trigger pds-combobox__button-trigger--${this.triggerVariant}`;
-        return (index.h(index.Host, { key: '969d61af2b58a33d582259df5fe62a4d509a9f7b' }, index.h("div", { key: 'fd4fae653c654b4cdc582f6a7d51100844d5a050', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && (index.h("label", { key: 'fc90ccdb48bc951873b92e6c315cecbbd74a52b5', htmlFor: this.componentId, class: "pds-combobox__label" }, index.h("span", { key: 'be72c23cc4759cf8dadbcdcb6121adf33cefc237', class: this.hideLabel ? 'visually-hidden' : '' }, this.label))), this.trigger === 'input' ? (index.h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, index.h("input", { ref: el => {
+        return (index.h(index.Host, { key: '8972918e55f8c0fba10399d963a49ab31b49eeae' }, index.h("div", { key: '5f5782e3fb83c7ff3fea2d4344324d888110b8fc', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && (index.h("label", { key: '286cab5baba38486c7e661384f0b5a6a38976891', htmlFor: this.componentId, class: "pds-combobox__label" }, index.h("span", { key: '3ccb30ead595d633bfe3ce624c99f9483c0d6265', class: this.hideLabel ? 'visually-hidden' : '' }, this.label))), this.trigger === 'input' ? (index.h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, index.h("input", { ref: el => {
                 this.inputEl = el;
                 this.triggerEl = el;
-            }, class: "pds-combobox__input", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), index.h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (index.h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (index.h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), index.h("div", { key: 'db0c3c6aa9d332c2ab0d31e43afd499e604b5ce8', style: { display: 'none' } }, index.h("slot", { key: '3a9eef50b933e311222c0c067dfa29dc867b19cd', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
+            }, class: "pds-combobox__input", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), index.h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (index.h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (index.h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), index.h("div", { key: '02597d696490153015a5d41190598f24fa1b034e', style: { display: 'none' } }, index.h("slot", { key: '3bb35ff0c7cdde0cb3c4c0eeb9fc4879fcef62c6', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }