@pine-ds/core 3.20.0 → 3.21.1

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

@@ -1 +1 @@
-{"version":3,"file":"pds-accordion.entry.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":[],"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,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,EAAA,EAC9C,CAAA,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,EAC5F,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,kBAAkB,EAAA,EAC9B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAe,EAAA,SAAA,CAAA,EACjC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,gBAAgB,GAAG,CAC3C,EACV,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,qBAAqB,EAAA,EACpD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACE,CACL;;;;;;;;;;"}
+{"version":3,"file":"pds-accordion.entry.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":[],"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,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,EAAA,EAC9C,CAAA,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,EAC5F,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,kBAAkB,EAAA,EAC9B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAe,EAAA,SAAA,CAAA,EACjC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,gBAAgB,GAAG,CAC3C,EACV,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,qBAAqB,EAAA,EACpD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACE,CACL;;;;;;;;;;"}

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

@@ -2004,6 +2004,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() {
@@ -2616,10 +2624,10 @@ const PdsCombobox = class {
     }
     render() {
         const triggerClass = `pds-combobox__button-trigger pds-combobox__button-trigger--${this.triggerVariant}`;
-        return (h(Host, { key: '969d61af2b58a33d582259df5fe62a4d509a9f7b' }, h("div", { key: 'fd4fae653c654b4cdc582f6a7d51100844d5a050', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && (h("label", { key: 'fc90ccdb48bc951873b92e6c315cecbbd74a52b5', htmlFor: this.componentId, class: "pds-combobox__label" }, h("span", { key: 'be72c23cc4759cf8dadbcdcb6121adf33cefc237', class: this.hideLabel ? 'visually-hidden' : '' }, this.label))), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
+        return (h(Host, { key: '8972918e55f8c0fba10399d963a49ab31b49eeae' }, h("div", { key: '5f5782e3fb83c7ff3fea2d4344324d888110b8fc', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && (h("label", { key: '286cab5baba38486c7e661384f0b5a6a38976891', htmlFor: this.componentId, class: "pds-combobox__label" }, h("span", { key: '3ccb30ead595d633bfe3ce624c99f9483c0d6265', class: this.hideLabel ? 'visually-hidden' : '' }, this.label))), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
                 this.inputEl = el;
                 this.triggerEl = el;
-            }, class: "pds-combobox__input", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), h("div", { key: 'db0c3c6aa9d332c2ab0d31e43afd499e604b5ce8', style: { display: 'none' } }, 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" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), h("div", { key: '02597d696490153015a5d41190598f24fa1b034e', style: { display: 'none' } }, h("slot", { key: '3bb35ff0c7cdde0cb3c4c0eeb9fc4879fcef62c6', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }