@pine-ds/core 4.10.0 → 4.12.0

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

@@ -1711,7 +1711,7 @@ class FlyoutController {
     }
 }
 
-const pdsComboboxCss = () => `:host{display:block}:host([truncate]){display:block;min-width:0}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__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-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input: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-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-950)}.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled){border-color:var(--pine-color-border-danger)}.pds-combobox__input.pds-combobox__input--invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:calc(var(--pine-z-index-raised) - 1)}.pds-combobox__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)}.pds-combobox__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)}.pds-combobox__error pds-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-combobox__listbox{background:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-background-muted)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-background-muted)}.pds-combobox__option--disabled,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger,.pds-combobox__group-back--disabled>.pds-combobox__group-back-trigger,.pds-combobox__group--disabled>.pds-combobox__group-label{color:var(--pine-color-text-disabled)}.pds-combobox__option--disabled{cursor:not-allowed}.pds-combobox__option--disabled .pds-combobox__option-chip,.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper,.pds-combobox__option--disabled .pds-combobox__option-badge,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger>.pds-combobox__group-badge,.pds-combobox__group--disabled>.pds-combobox__group-label>.pds-combobox__group-badge{opacity:0.5}.pds-combobox__option-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__option-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--truncate .pds-combobox__option-label{-ms-flex:1 1 auto;flex:1 1 auto;overflow-wrap:normal}.pds-combobox__listbox--truncate .pds-combobox__option-check{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__option--with-badge{-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs)}.pds-combobox__option-badge,.pds-combobox__group-badge{-ms-flex-negative:0;flex-shrink:0;isolation:isolate;margin-block:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:auto;margin-inline-start:auto}.pds-combobox__option--with-badge .pds-combobox__option-check{-webkit-margin-start:calc(var(--pine-dimension-150) - var(--pine-dimension-xs));margin-inline-start:calc(var(--pine-dimension-150) - var(--pine-dimension-xs))}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group{list-style:none;-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150)}.pds-combobox__group:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group-list{list-style:none;margin:0;padding:0}.pds-combobox__listbox--grouped .pds-combobox__group-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs)}.pds-combobox__group-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__group-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__group-label--with-badge{-ms-flex-align:center;align-items:center;-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex}.pds-combobox__group-label-text{min-width:0;overflow-wrap:anywhere}.pds-combobox__group-label>.pds-combobox__group-badge{margin-block:calc(var(--pine-dimension-xs) * -1);text-transform:none}.pds-combobox__group-row{list-style:none;position:relative}.pds-combobox__group-row-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);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;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.pds-combobox__group-row-trigger,.pds-combobox__group-row--has-selection>.pds-combobox__group-row-trigger,.pds-combobox__group-row--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-back--highlighted>.pds-combobox__group-row-trigger{background:var(--pine-color-background-muted)}.pds-combobox__listbox--pointer-hover .pds-combobox__group-row-trigger:hover{background:var(--pine-color-background-muted)}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out{overflow-x:hidden}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out:dir(rtl){--pds-combobox-drill-from:var(--pine-dimension-sm)}.pds-combobox__listbox--drill-out,.pds-combobox__listbox--drill-in:dir(rtl){--pds-combobox-drill-from:calc(var(--pine-dimension-sm) * -1)}.pds-combobox__listbox--drill-in .pds-combobox__drill-in-options>li,.pds-combobox__listbox--drill-in .pds-combobox__group-back-trigger,.pds-combobox__listbox--drill-out>li{-webkit-animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}@keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__group-row-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__group-row-caret{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--grouped,.pds-combobox__flyout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);padding:var(--pine-dimension-2xs)}.pds-combobox__flyout{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);list-style:none;margin:0;overflow-y:auto;position:fixed;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1}.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:0}.pds-combobox__listbox-options{-ms-flex:1;flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-combobox__listbox-options.pds-combobox__listbox--grouped{padding:var(--pine-dimension-2xs)}.pds-combobox__panel-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;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-sm)}.pds-combobox__panel-search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:0;flex-shrink:0}.pds-combobox__panel-search:focus-within{border-block-end-color:var(--pine-color-border-active)}.pds-combobox__panel-search-input{background:transparent;border:0;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:0;outline:none;padding:0}.pds-combobox__panel-search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none}.pds-combobox__group-back-trigger{-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in.pds-combobox__listbox--grouped{-webkit-padding-before:0;padding-block-start:0}.pds-combobox__listbox-options--drilled-in:focus{outline:none}.pds-combobox__listbox-options--drilled-in:focus .pds-combobox__group-back-trigger{border-block-end-color:var(--pine-color-border-active)}:where(.pds-combobox__listbox-options--drilled-in) .pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay);-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);border-radius:0;color:var(--pine-color-text-strong);font:var(--pine-typography-body);inset-block-start:0;letter-spacing:var(--pine-letter-spacing);margin-inline:calc(var(--pine-dimension-2xs) * -1);padding:var(--pine-dimension-sm);position:-webkit-sticky;position:sticky;z-index:1}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none;margin:0;padding:0}.visually-hidden{border:0;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:0;position:absolute;white-space:nowrap;width:1px}.pds-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__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-150)}:host(.pds-combobox-dropdown-portal) .pds-combobox__listbox{position:fixed;z-index:var(--pine-z-index-priority)}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;text-align:start}.pds-combobox__button-trigger-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__button-trigger-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger--truncate{max-width:100%}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-label{overflow-wrap:normal}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-chevron{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger-text,.pds-combobox__listbox--truncate .pds-combobox__option-text{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150)}.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder{color:var(--pine-color-text-muted)}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:"";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}`;
+const pdsComboboxCss = () => `:host{display:block}:host([truncate]){display:block;min-width:0}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__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-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input: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-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-950)}.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled){border-color:var(--pine-color-border-danger)}.pds-combobox__input.pds-combobox__input--invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:calc(var(--pine-z-index-raised) - 1)}.pds-combobox__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)}.pds-combobox__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)}.pds-combobox__error pds-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-combobox__listbox{--pds-combobox-open-from:calc(var(--pine-dimension-2xs) * -1);-webkit-animation:pds-combobox-open var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-open var(--pine-motion-duration-base) var(--pine-motion-easing-out);background:var(--pine-color-background-overlay);border:0;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;list-style:none;margin:0;min-width:calc(220px + var(--pine-dimension-xs) * 2);overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;width:calc(236px + var(--pine-dimension-xs) * 2);z-index:var(--pine-z-index-raised)}.pds-combobox__listbox[data-placement^=top]{--pds-combobox-open-from:var(--pine-dimension-2xs)}@-webkit-keyframes pds-combobox-open{0%{-webkit-margin-before:var(--pds-combobox-open-from);margin-block-start:var(--pds-combobox-open-from);opacity:0}40%{opacity:1}}@keyframes pds-combobox-open{0%{-webkit-margin-before:var(--pds-combobox-open-from);margin-block-start:var(--pds-combobox-open-from);opacity:0}40%{opacity:1}}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted{background:var(--pine-color-background-muted)}.pds-combobox__option--disabled,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger,.pds-combobox__group-back--disabled>.pds-combobox__group-back-trigger,.pds-combobox__group--disabled>.pds-combobox__group-label{color:var(--pine-color-text-disabled)}.pds-combobox__option--disabled{cursor:not-allowed}.pds-combobox__option--disabled .pds-combobox__option-chip,.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper,.pds-combobox__option--disabled .pds-combobox__option-badge,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger>.pds-combobox__group-badge,.pds-combobox__group--disabled>.pds-combobox__group-label>.pds-combobox__group-badge{opacity:0.5}.pds-combobox__option-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__option-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__option-chip{min-width:0;overflow-wrap:anywhere}.pds-combobox__listbox--truncate .pds-combobox__option-label{-ms-flex:1 1 auto;flex:1 1 auto;overflow-wrap:normal}.pds-combobox__listbox--truncate .pds-combobox__option-check{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__option--with-badge{-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs)}.pds-combobox__option-badge,.pds-combobox__group-badge{-ms-flex-negative:0;flex-shrink:0;isolation:isolate;margin-block:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:auto;margin-inline-start:auto}.pds-combobox__option--with-badge .pds-combobox__option-check{-webkit-margin-start:calc(var(--pine-dimension-150) - var(--pine-dimension-xs));margin-inline-start:calc(var(--pine-dimension-150) - var(--pine-dimension-xs))}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group{list-style:none;-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150)}.pds-combobox__group:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group-list{list-style:none;margin:0;padding:0}.pds-combobox__listbox--grouped .pds-combobox__group-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-combobox__group-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__group-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__group-label--with-badge{-ms-flex-align:center;align-items:center;-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex}.pds-combobox__group-label-text{min-width:0;overflow-wrap:anywhere}.pds-combobox__group-label>.pds-combobox__group-badge{margin-block:calc(var(--pine-dimension-xs) * -1);text-transform:none}.pds-combobox__group-row{list-style:none;position:relative}.pds-combobox__group-row-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.pds-combobox__group-row-trigger,.pds-combobox__group-row--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-back--highlighted>.pds-combobox__group-row-trigger{background:var(--pine-color-background-muted)}.pds-combobox__listbox--pointer-hover .pds-combobox__group-row-trigger:hover{background:var(--pine-color-background-muted)}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out{overflow-x:hidden}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out:dir(rtl),.pds-combobox__panel-search--drill-out:dir(rtl){--pds-combobox-drill-from:var(--pine-dimension-sm)}.pds-combobox__listbox--drill-out,.pds-combobox__listbox--drill-in:dir(rtl),.pds-combobox__panel-search--drill-out{--pds-combobox-drill-from:calc(var(--pine-dimension-sm) * -1)}.pds-combobox__listbox--drill-in .pds-combobox__drill-in-options>li,.pds-combobox__listbox--drill-in .pds-combobox__group-back-trigger>*,.pds-combobox__listbox--drill-out>li,.pds-combobox__panel-search--drill-out>*{-webkit-animation:pds-combobox-drill var(--pine-motion-duration-slow) var(--pine-motion-easing-out);animation:pds-combobox-drill var(--pine-motion-duration-slow) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}@keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}.pds-combobox__listbox--height-glide{-webkit-animation:pds-combobox-open var(--pine-motion-duration-base) var(--pine-motion-easing-out), pds-combobox-height-glide var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-open var(--pine-motion-duration-base) var(--pine-motion-easing-out), pds-combobox-height-glide var(--pine-motion-duration-base) var(--pine-motion-easing-out)}.pds-combobox__listbox--height-glide,.pds-combobox__listbox--height-glide .pds-combobox__listbox-options,.pds-combobox__listbox--height-glide .pds-combobox__drill-in-options,.pds-combobox__listbox--height-hold,.pds-combobox__listbox--height-hold .pds-combobox__listbox-options,.pds-combobox__listbox--height-hold .pds-combobox__drill-in-options{overflow-y:hidden}@-webkit-keyframes pds-combobox-height-glide{from{height:var(--pds-combobox-glide-from)}to{height:var(--pds-combobox-glide-to)}}@keyframes pds-combobox-height-glide{from{height:var(--pds-combobox-glide-from)}to{height:var(--pds-combobox-glide-to)}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__option.pds-combobox__option--keyboard{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__group-row-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__group-row-caret{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--grouped,.pds-combobox__flyout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-2xs)}.pds-combobox__listbox--grouped .pds-combobox__option,.pds-combobox__listbox--grouped .pds-combobox__group-label{padding-inline:var(--pine-dimension-150)}.pds-combobox__listbox--grouped .pds-combobox__group-label{font:var(--pine-typography-body-sm);margin-block:0;padding-block:var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:none}.pds-combobox__listbox--grouped .pds-combobox__group{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__flyout{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;list-style:none;margin:0;overflow-y:auto;position:fixed;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1}.pds-combobox__listbox.pds-combobox__listbox--grouped{min-width:calc(220px + var(--pine-dimension-2xs) * 2);width:calc(236px + var(--pine-dimension-2xs) * 2)}.pds-combobox__listbox.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:220px;overflow:hidden;padding:0;width:236px}.pds-combobox__listbox-options{-ms-flex:1;flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-combobox__listbox-options.pds-combobox__listbox--grouped{padding:var(--pine-dimension-2xs)}.pds-combobox__panel-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-active);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-150) var(--pine-dimension-sm)}.pds-combobox__panel-search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:0;flex-shrink:0}.pds-combobox__panel-search-input{background:transparent;border:0;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:0;outline:none;padding:0}.pds-combobox__panel-search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__listbox--grouped.pds-combobox__listbox--grouped:has(>.pds-combobox__group-back){display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:0}.pds-combobox__listbox.pds-combobox__listbox--grouped:has(>.pds-combobox__group-back){min-width:220px;width:236px}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;list-style:none;min-height:0}.pds-combobox__group-back-trigger{-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in:focus{outline:none}:where(.pds-combobox__listbox--grouped) .pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay);-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-active);border-radius:0;color:var(--pine-color-text-secondary);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-150) var(--pine-dimension-sm);position:relative}:where(.pds-combobox__listbox--grouped) .pds-combobox__group-back-trigger .pds-combobox__group-row-caret{margin-inline:calc(var(--pine-dimension-2xs) * -1) var(--pine-dimension-2xs)}.pds-combobox__listbox--grouped .pds-combobox__group-back>.pds-combobox__group-back-trigger{isolation:isolate}.pds-combobox__listbox--grouped .pds-combobox__group-back>.pds-combobox__group-back-trigger::before{border-radius:var(--pine-dimension-xs);content:"";inset:var(--pine-dimension-2xs);position:absolute;-webkit-transition:background 0.15s;transition:background 0.15s;z-index:-1}.pds-combobox__listbox--pointer-hover.pds-combobox__listbox--grouped .pds-combobox__group-back>.pds-combobox__group-back-trigger:hover,.pds-combobox__listbox--grouped .pds-combobox__group-back--highlighted>.pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay)}.pds-combobox__listbox--pointer-hover.pds-combobox__listbox--grouped .pds-combobox__group-back>.pds-combobox__group-back-trigger:hover::before,.pds-combobox__listbox--grouped .pds-combobox__group-back--highlighted>.pds-combobox__group-back-trigger::before{background:var(--pine-color-background-muted)}.pds-combobox__listbox--grouped .pds-combobox__group-back--keyboard>.pds-combobox__group-back-trigger{outline:none}.pds-combobox__listbox--grouped .pds-combobox__group-back--keyboard>.pds-combobox__group-back-trigger::before{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:0;min-height:0;overflow-x:hidden;overflow-y:auto;padding:var(--pine-dimension-2xs)}.visually-hidden{border:0;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:0;position:absolute;white-space:nowrap;width:1px}.pds-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__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-150)}:host(.pds-combobox-dropdown-portal) .pds-combobox__listbox{position:fixed;z-index:var(--pine-z-index-priority)}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;text-align:start}.pds-combobox__button-trigger-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__button-trigger-label--value-in{-webkit-animation:pds-combobox-value-in var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-value-in var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-value-in{from{opacity:0}}@keyframes pds-combobox-value-in{from{opacity:0}}.pds-combobox__button-trigger-icon{block-size:var(--pine-dimension-sm);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-sm)}.pds-combobox__button-trigger--truncate{max-width:100%}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-label{overflow-wrap:normal}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-chevron{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger-text,.pds-combobox__listbox--truncate .pds-combobox__option-text{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150)}.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape{--color-background-hover:var(--pine-color-secondary)}.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder{color:var(--pine-color-text-muted)}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:"";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}`;
 
 const PdsCombobox = class {
     constructor(hostRef) {
@@ -1741,11 +1741,6 @@ const PdsCombobox = class {
          * @default 'bottom-start'
          */
         this.dropdownPlacement = 'bottom-start';
-        /**
-         * Width of the dropdown. Any valid CSS width value.
-         * @default '236px'
-         */
-        this.dropdownWidth = '236px';
         /**
          * Where to mount the dropdown listbox (`host` or `body`, sometimes called “append to body”).
          * Use `body` inside scrollable containers (for example modals) so the list is not clipped by
@@ -1773,16 +1768,18 @@ const PdsCombobox = class {
          */
         this.noOptionsFoundLabel = 'No options found';
         /**
-         * Maximum width of a group's flyout when `group-display` is `flyout`. Any valid CSS width value.
-         * @default '380px'
+         * Maximum width of a group's flyout when `group-display` is `flyout`. Any valid CSS width
+         * value, including its padding.
+         * @default '388px'
          */
-        this.flyoutMaxWidth = '380px';
+        this.flyoutMaxWidth = '388px';
         /**
-         * Minimum width of a group's flyout when `group-display` is `flyout`. Any valid CSS width value.
-         * The flyout is as wide as its options, between this and `flyout-max-width`.
-         * @default '280px'
+         * Minimum width of a group's flyout when `group-display` is `flyout`. Any valid CSS width
+         * value, including its padding. The flyout is as wide as its options, between this and
+         * `flyout-max-width`.
+         * @default '288px'
          */
-        this.flyoutMinWidth = '280px';
+        this.flyoutMinWidth = '288px';
         /**
          * How option groups (`<optgroup>`, or the `group` field of `options`) are shown in the dropdown.
          * `inline` lists each group's label above its options. `flyout` lists the groups, and opens a
@@ -1869,7 +1866,7 @@ const PdsCombobox = class {
          */
         this.chipDot = false;
         /**
-         * The value of the combobox input.
+         * The `value` of the selected option.
          */
         this.value = '';
         /**
@@ -1993,15 +1990,30 @@ const PdsCombobox = class {
          * the list shows every option until the user types (then normal filtering applies).
          */
         this.expandFilterListWhileOpen = false;
+        this.onHeightGlideCancel = (event) => {
+            const panel = this.listboxEl;
+            if (event.animationName !== 'pds-combobox-height-glide' || event.target !== panel)
+                return;
+            // Turning around mid-glide cancels the old glide as the new one starts; only a glide with none
+            // left running cleans up.
+            const running = panel.getAnimations().some(a => a.animationName === 'pds-combobox-height-glide');
+            // A drill waiting to render glides from here next; it cleans up then.
+            if (!running && this.drillFromHeight === undefined)
+                this.endHeightGlide();
+        };
         this.onPanelPointer = (event) => {
             const canHover = event.pointerType !== 'touch';
             if (this.pointerCanHover !== canHover)
                 this.pointerCanHover = canHover;
         };
         this.onDrillAnimationEnd = (event) => {
-            // Only the slide's own end: slotted consumer content can animate inside the list too.
+            // Only the component's own ends (the slide by name, the glide by its target): slotted consumer
+            // content can animate inside the list too.
             if (event.animationName === 'pds-combobox-drill')
                 this.drillDirection = null;
+            if (event.animationName === 'pds-combobox-height-glide' && event.target === this.listboxEl && this.drillFromHeight === undefined) {
+                this.endHeightGlide();
+            }
         };
         /** `<label for>` only works on the input trigger; for a div trigger a click on the label focuses it. */
         this.onLabelClick = () => {
@@ -2299,6 +2311,8 @@ const PdsCombobox = class {
                 }
             }
         };
+        /** A pick that fills the field from its placeholder fades in; a value it loads with doesn't. */
+        this.fadesValueIn = false;
         this.handleScroll = (e) => {
             if (!this.asyncUrl || !this.hasMore || this.loading)
                 return;
@@ -2417,6 +2431,14 @@ const PdsCombobox = class {
         if (this.usesBodyPortal && this.isOpen) {
             this.syncBodyPortal();
         }
+        // Opening places the dropdown a tick later, which can run before the dropdown has rendered and
+        // then skips it, leaving it without its dropdown-width and max-height. Place a newly rendered
+        // dropdown here too.
+        if (this.isOpen && this.triggerEl && this.listboxEl && this.listboxEl !== this.placedListboxEl) {
+            this.placedListboxEl = this.listboxEl;
+            void this.positionDropdown();
+        }
+        this.glideDrillHeight();
         const row = (_a = this.listboxEl) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-combobox__group-row--open');
         const flyoutEl = row === null || row === void 0 ? void 0 : row.querySelector('.pds-combobox__flyout');
         if (this.isOpen && this.listboxEl && row && flyoutEl) {
@@ -2425,18 +2447,6 @@ const PdsCombobox = class {
         else {
             this.flyout.stopPositioning();
         }
-        // The row back is sticky over the group's options; scrolling an option into view stops below
-        // it. Set before any scroll below, and when it first applies, scroll the highlighted option
-        // again: the list keeps its offset on drilling in, and an earlier scroll had no padding.
-        if (this.panelTreeEl) {
-            const header = this.hidesPanelSearch ? this.panelTreeEl.querySelector('.pds-combobox__group-back-trigger') : null;
-            const padding = header ? `${header.offsetHeight}px` : '';
-            if (this.panelTreeEl.style.scrollPaddingBlockStart !== padding) {
-                this.panelTreeEl.style.scrollPaddingBlockStart = padding;
-                if (padding !== '' && this.highlightedIndex >= 0)
-                    this.pendingOptionFocus = true;
-            }
-        }
         if (this.pendingOptionFocus) {
             this.pendingOptionFocus = false;
             this.updateOptionFocus();
@@ -2464,8 +2474,7 @@ const PdsCombobox = class {
      * Scrolls just enough to show `el`, as `scrollIntoView({ block: 'nearest' })` does. In the drill-in
      * panel it scrolls the list alone, and never sideways: while a drill-in slide offsets a row past
      * the list's edge, `scrollIntoView` also scrolls the list horizontally to reach it, which eats most
-     * of the slide. There it keeps clear of the sticky row back, through the scroll padding set for it,
-     * but doesn't scroll the page or a scrolling ancestor.
+     * of the slide. It doesn't scroll the page or a scrolling ancestor.
      */
     scrollIntoViewNearest(el, smooth) {
         const behavior = smooth ? 'smooth' : 'auto';
@@ -2473,18 +2482,29 @@ const PdsCombobox = class {
             el.scrollIntoView({ block: 'nearest', behavior });
             return;
         }
-        const list = this.usesPanelSearch ? this.panelTreeEl : this.listboxEl;
+        // The row back is the drilled-in header, above the scrolling options: always in view.
+        if (el.classList.contains('pds-combobox__group-back-trigger'))
+            return;
+        const list = this.scrollListEl;
         if (!list)
             return;
         const offset = el.getBoundingClientRect().top - list.getBoundingClientRect().top - list.clientTop;
-        // The padding keeps rows clear of the sticky row back; the row back itself doesn't need it.
-        const padding = el.classList.contains('pds-combobox__group-back-trigger') ? 0 : parseFloat(list.style.scrollPaddingBlockStart) || 0;
-        const top = list.scrollTop + offset - padding;
+        const top = list.scrollTop + offset;
         const bottom = list.scrollTop + offset + el.offsetHeight - list.clientHeight;
         const target = top < list.scrollTop ? top : bottom > list.scrollTop ? bottom : null;
         if (target !== null)
             list.scrollTo({ top: target, behavior });
     }
+    /**
+     * The element that scrolls the panel's rows. Every layer is a header (the search field, or a
+     * drilled-in group's row back) above the rows that scroll: drilled in, the group's options;
+     * otherwise the list under the search field, or the panel itself.
+     */
+    get scrollListEl() {
+        var _a;
+        const list = this.usesPanelSearch ? this.panelTreeEl : this.listboxEl;
+        return (_a = list === null || list === void 0 ? void 0 : list.querySelector('.pds-combobox__group-back > .pds-combobox__drill-in-options')) !== null && _a !== void 0 ? _a : list;
+    }
     focusPanel(el) {
         var _a, _b;
         this.panelFocusEl = el;
@@ -2502,6 +2522,7 @@ const PdsCombobox = class {
         this.openGroup = null;
         // The reset isn't a drill-out, so it doesn't slide either.
         this.drillDirection = null;
+        this.endHeightGlide();
     }
     openGroupChanged(next, previous) {
         this.handPanelFocusToList();
@@ -2513,6 +2534,74 @@ const PdsCombobox = class {
             this.drillDirection = 'in';
         else if (next === null && previous !== null)
             this.drillDirection = 'out';
+        else
+            return;
+        // The views differ in height; measured now, before the next one renders, so it can glide.
+        const panel = this.listboxEl;
+        if (!panel)
+            return;
+        const from = panel.getBoundingClientRect().height;
+        this.drillFromHeight = from;
+        // Pinned there until componentDidRender measures the new view, however late: a child component
+        // that renders late could otherwise let the browser paint the new view at its full height first.
+        panel.style.height = `${from}px`;
+        panel.classList.add('pds-combobox__listbox--height-hold');
+        this.syncPanelOverflow();
+    }
+    releaseHeightHold() {
+        const panel = this.listboxEl;
+        panel === null || panel === void 0 ? void 0 : panel.style.removeProperty('height');
+        panel === null || panel === void 0 ? void 0 : panel.classList.remove('pds-combobox__listbox--height-hold');
+    }
+    /**
+     * Hands the dropdown's height before and after a drill to the SCSS glide. Neither is known ahead,
+     * so they're measured: CSS can't animate to the height its content turns out to be.
+     */
+    glideDrillHeight() {
+        const from = this.drillFromHeight;
+        this.drillFromHeight = undefined;
+        const panel = this.listboxEl;
+        if (from === undefined || !panel)
+            return;
+        // A drill back mid-glide starts from where the last one is now, then measures the real height.
+        this.releaseHeightHold();
+        panel.classList.remove('pds-combobox__listbox--height-glide');
+        this.syncPanelOverflow();
+        const to = panel.getBoundingClientRect().height;
+        if (Math.abs(to - from) < 1) {
+            this.endHeightGlide();
+            return;
+        }
+        panel.style.setProperty('--pds-combobox-glide-from', `${from}px`);
+        panel.style.setProperty('--pds-combobox-glide-to', `${to}px`);
+        panel.classList.add('pds-combobox__listbox--height-glide');
+        this.syncPanelOverflow();
+        // A glide cut short without ending (the panel hidden mid-way) still cleans up. JSX has no
+        // `onAnimationCancel`; adding the same listener again is a no-op.
+        panel.addEventListener('animationcancel', this.onHeightGlideCancel);
+    }
+    /** Ends a glide, and a drill still waiting to glide, so nothing starts once it renders. */
+    endHeightGlide() {
+        this.drillFromHeight = undefined;
+        this.releaseHeightHold();
+        const panel = this.listboxEl;
+        panel === null || panel === void 0 ? void 0 : panel.classList.remove('pds-combobox__listbox--height-glide');
+        this.syncPanelOverflow();
+        panel === null || panel === void 0 ? void 0 : panel.style.removeProperty('--pds-combobox-glide-from');
+        panel === null || panel === void 0 ? void 0 : panel.style.removeProperty('--pds-combobox-glide-to');
+        panel === null || panel === void 0 ? void 0 : panel.removeEventListener('animationcancel', this.onHeightGlideCancel);
+    }
+    /**
+     * With `max-height`, the panel's own scroll, set inline so it outranks the stylesheet: hidden under a
+     * fixed search field, and while the height glides (so no scrollbar flashes), otherwise auto.
+     */
+    syncPanelOverflow() {
+        var _a;
+        if (((_a = this.maxHeight) !== null && _a !== void 0 ? _a : '') === '' || !this.listboxEl)
+            return;
+        const gliding = this.listboxEl.classList.contains('pds-combobox__listbox--height-glide') ||
+            this.listboxEl.classList.contains('pds-combobox__listbox--height-hold');
+        this.listboxEl.style.overflowY = this.usesPanelSearch || gliding ? 'hidden' : 'auto';
     }
     /** A flyout with no room beside the dropdown drills in, which can hide the focused search field too. */
     flyoutFallbackChanged() {
@@ -2544,6 +2633,7 @@ const PdsCombobox = class {
     }
     isOpenChanged(isOpen) {
         if (!isOpen) {
+            this.endHeightGlide();
             this.revealedGroupLabel = null;
             this.drillDirection = null;
             this.openGroup = null;
@@ -2903,61 +2993,66 @@ const PdsCombobox = class {
             this.updateOptionsFromAsync();
             return;
         }
-        // Get all elements from the slot
+        // Get all elements from the slot. Before the first render there's no slot yet, so read the
+        // host's own children that it will hold (through any slot passing options on): otherwise a
+        // combobox created with a `value`, such as a form re-rendered after a pick, paints its
+        // placeholder for a frame, until `slotchange` finds the selected option.
         const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="option"], slot:not([name])');
-        if (slot) {
-            const allElements = slot.assignedElements({ flatten: true });
-            // Separate options from group labels and flatten optgroups
-            this.allItems = [];
-            this.optionEls = [];
-            allElements.forEach(el => {
-                if (el.tagName === 'OPTION') {
-                    this.optionEls.push(el);
-                    this.allItems.push(el);
-                }
-                else if (el.tagName === 'OPTGROUP') {
-                    const optgroup = el;
-                    this.allItems.push(optgroup);
-                    // Add optgroup children (options)
-                    Array.from(optgroup.children).forEach(child => {
-                        if (child.tagName === 'OPTION') {
-                            this.optionEls.push(child);
-                            this.allItems.push(child);
-                        }
-                    });
-                }
-                else if (el.tagName === 'PDS-TEXT') {
-                    this.allItems.push(el);
-                }
-            });
-            // Set initial selected option based on value property
-            let initialSelected = null;
-            // Check if value property matches any option
-            if (this.value) {
-                initialSelected = this.optionEls.find(opt => opt.value === this.value) || null;
-                if (initialSelected) {
-                    // Update the display text to show the option's text content
-                    this.displayText = this.getOptionLabel(initialSelected);
-                    // Keep this.value as the actual option value (already correct)
-                }
+        const allElements = slot
+            ? slot.assignedElements({ flatten: true })
+            : Array.from(this.el.children)
+                .filter(el => !el.getAttribute('slot'))
+                .flatMap(el => (el.tagName === 'SLOT' ? el.assignedElements({ flatten: true }) : [el]));
+        // Separate options from group labels and flatten optgroups
+        this.allItems = [];
+        this.optionEls = [];
+        allElements.forEach(el => {
+            if (el.tagName === 'OPTION') {
+                this.optionEls.push(el);
+                this.allItems.push(el);
             }
-            // For chip triggers, ensure we always have a selected option
-            const firstEnabled = this.optionEls.find(opt => !isOptionDisabled(opt));
-            if (initialSelected === null && this.trigger === 'chip' && firstEnabled !== undefined) {
-                initialSelected = firstEnabled;
-                this.value = initialSelected.value;
-                this.displayText = this.getOptionLabel(initialSelected);
-                console.warn('PDS Combobox: Chip triggers should always have a selected option. Automatically selected the first enabled option.');
+            else if (el.tagName === 'OPTGROUP') {
+                const optgroup = el;
+                this.allItems.push(optgroup);
+                // Add optgroup children (options)
+                Array.from(optgroup.children).forEach(child => {
+                    if (child.tagName === 'OPTION') {
+                        this.optionEls.push(child);
+                        this.allItems.push(child);
+                    }
+                });
             }
-            // Update selection if we found a different selected option or if we don't have one
-            if (initialSelected && initialSelected !== this.selectedOption) {
-                this.setSelectedOption(initialSelected);
+            else if (el.tagName === 'PDS-TEXT') {
+                this.allItems.push(el);
             }
-            else if (!this.selectedOption && initialSelected) {
-                this.setSelectedOption(initialSelected);
+        });
+        // Set initial selected option based on value property
+        let initialSelected = null;
+        // Check if value property matches any option
+        if (this.value) {
+            initialSelected = this.optionEls.find(opt => opt.value === this.value) || null;
+            if (initialSelected) {
+                // Update the display text to show the option's text content
+                this.displayText = this.getOptionLabel(initialSelected);
+                // Keep this.value as the actual option value (already correct)
             }
-            this.filterOptions();
         }
+        // For chip triggers, ensure we always have a selected option
+        const firstEnabled = this.optionEls.find(opt => !isOptionDisabled(opt));
+        if (initialSelected === null && this.trigger === 'chip' && firstEnabled !== undefined) {
+            initialSelected = firstEnabled;
+            this.value = initialSelected.value;
+            this.displayText = this.getOptionLabel(initialSelected);
+            console.warn('PDS Combobox: Chip triggers should always have a selected option. Automatically selected the first enabled option.');
+        }
+        // Update selection if we found a different selected option or if we don't have one
+        if (initialSelected && initialSelected !== this.selectedOption) {
+            this.setSelectedOption(initialSelected);
+        }
+        else if (!this.selectedOption && initialSelected) {
+            this.setSelectedOption(initialSelected);
+        }
+        this.filterOptions();
     }
     // Helper method to get option label, falling back to text content if no label attribute
     getOptionLabel(option) {
@@ -3033,10 +3128,19 @@ const PdsCombobox = class {
         else {
             this.selectedOptionChipProps = null;
         }
+        // Immediately update layout content too, the same way: the @Watch('selectedOption') below
+        // isn't active yet the first time this runs, during componentWillLoad's initial selection,
+        // so a preselected layout option would otherwise show its plain label until some later change
+        // triggers the watcher.
+        this.selectedOptionLayoutContent = option && this.isOptionLayout(option)
+            ? this.getOptionLayoutContent(option)
+            : '';
     }
     filterOptions() {
-        // A new list replaces the rows a slide was animating, so its end event may never come.
+        // A new list replaces the rows a slide or height glide was animating, so their end events may
+        // never come.
         this.drillDirection = null;
+        this.endHeightGlide();
         // Ensure allItems includes optionEls if not already populated (for edge cases)
         if (this.allItems.length === 0 && this.optionEls.length > 0) {
             this.allItems = [...this.optionEls];
@@ -3055,11 +3159,13 @@ const PdsCombobox = class {
                     if (groupLabel !== null && groupLabel.toLowerCase().includes(val))
                         return true;
                 }
-                // For layout options, search both text content and data-search-text attribute
-                if (this.isOptionLayout(option)) {
-                    const searchText = option.getAttribute('data-search-text') || option.textContent || '';
+                // `data-search-text`, when set, is what search matches, so an option can be found by more
+                // than its label without a custom layout. A layout option otherwise matches its text.
+                const searchText = option.getAttribute('data-search-text');
+                if (searchText)
                     return searchText.toLowerCase().includes(val);
-                }
+                if (this.isOptionLayout(option))
+                    return (option.textContent || '').toLowerCase().includes(val);
                 return this.getOptionLabel(option).toLowerCase().includes(val);
             });
             // Rebuild filtered items maintaining group structure - simplified approach
@@ -3109,6 +3215,7 @@ const PdsCombobox = class {
         }
     }
     positionDropdown() {
+        var _a;
         if (!this.triggerEl || !this.listboxEl) {
             return;
         }
@@ -3116,20 +3223,23 @@ const PdsCombobox = class {
         const zIndex = this.usesBodyPortal
             ? 'var(--pine-z-index-priority)'
             : 'var(--pine-z-index-raised)';
-        this.listboxEl.style.width = this.dropdownWidth;
+        // Unset, the panel's own width applies, which differs with its padding (see the dropdown panel styles).
+        this.listboxEl.style.width = (_a = this.dropdownWidth) !== null && _a !== void 0 ? _a : '';
         if (this.maxHeight) {
             this.listboxEl.style.maxHeight = this.maxHeight;
             // With panel search, the options list scrolls under a fixed search field.
-            this.listboxEl.style.overflowY = this.usesPanelSearch ? 'hidden' : 'auto';
+            this.syncPanelOverflow();
         }
         return floatingUi_dom.computePosition(this.triggerEl, this.listboxEl, {
             placement: this.dropdownPlacement,
             strategy,
-            middleware: [floatingUi_dom.offset(12), floatingUi_dom.flip(), floatingUi_dom.shift({ padding: 5 })],
-        }).then(({ x, y }) => {
+            middleware: [floatingUi_dom.offset(8), floatingUi_dom.flip(), floatingUi_dom.shift({ padding: 5 })],
+        }).then(({ x, y, placement }) => {
             if (!this.listboxEl) {
                 return;
             }
+            // Where it landed after flipping, so the opening motion moves away from the field.
+            this.listboxEl.dataset.placement = placement;
             Object.assign(this.listboxEl.style, {
                 left: `${x}px`,
                 top: `${y}px`,
@@ -3415,6 +3525,8 @@ const PdsCombobox = class {
     highlightOptionAt(options, index) {
         if (options.length === 0)
             return;
+        // Only the keys move it, so it shows the keyboard's ring, as in the grouped panel.
+        this.keyboardNavigating = true;
         this.highlightedIndex = Math.max(0, Math.min(options.length - 1, index));
         this.updateOptionFocus();
     }
@@ -3842,6 +3954,8 @@ const PdsCombobox = class {
     handleOptionClick(option) {
         if (isOptionDisabled(option))
             return;
+        if (this.selectedIcon === null)
+            this.fadesValueIn = true;
         // Update reactive state - single source of truth
         // The @Watch('selectedOption') will handle displayText, value, and form internals
         this.setSelectedOption(option);
@@ -3849,12 +3963,34 @@ const PdsCombobox = class {
         this.clearExpandFilterList();
         this.pdsComboboxChange.emit({ value: option.value });
     }
+    /** The row shown while options load: at the top of the list, or of a drilled-in group's options. */
+    renderLoadingRow() {
+        if (!this.loading)
+            return null;
+        const hasSlottedLoading = !this.usesBodyPortal && !!this.el.querySelector('[slot="loading"]');
+        return (index.h("li", { class: "pds-combobox__loading", role: "presentation" }, hasSlottedLoading ? index.h("slot", { name: "loading" }) : index.h("pds-loader", { size: "small" })));
+    }
+    /** The row after the last option while more can load, inside whatever scrolls them. */
+    renderLoadMoreRow() {
+        if (!this.hasMore || this.loading)
+            return null;
+        return (index.h("li", { class: "pds-combobox__load-more", role: "presentation" }, index.h("pds-loader", { size: "small" })));
+    }
+    /** Drilled into a group: the group and its place among the panel's entries; otherwise null. */
+    drilledInEntry(entries) {
+        if (this.effectiveGroupDisplay !== 'drill-in' || this.openGroup === null)
+            return null;
+        const position = entries.findIndex(entry => entry.kind === 'group' && entry.group.optgroup === this.openGroup);
+        const open = entries[position];
+        return (open === null || open === void 0 ? void 0 : open.kind) === 'group' ? { group: open.group, position } : null;
+    }
     renderDropdown() {
         if (!this.isOpen) {
             return null;
         }
         const hasSlottedEmpty = !this.usesBodyPortal && !!this.el.querySelector('[slot="empty"]');
-        const hasSlottedLoading = !this.usesBodyPortal && !!this.el.querySelector('[slot="loading"]');
+        // Drilled in, the group's options scroll under the row back, so their loading rows go with them.
+        const drilledIn = this.showsGroupedPanel && this.drilledInEntry(this.panelEntries()) !== null;
         const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
         const withSearch = this.usesPanelSearch;
         // While a drilled-in group hides the search field, the list takes focus in its place.
@@ -3876,11 +4012,11 @@ const PdsCombobox = class {
                     this.panelTreeEl = el;
                 else
                     this.listboxEl = el;
-            }, onScroll: this.handleScroll }, this.loading && (index.h("li", { class: "pds-combobox__loading", role: "presentation" }, hasSlottedLoading ? (index.h("slot", { name: "loading" })) : (index.h("pds-loader", { size: "small" })))), !this.loading && this.filteredItems.length === 0 && (index.h("li", { class: "pds-combobox__empty", role: "presentation" }, hasSlottedEmpty ? (index.h("slot", { name: "empty" })) : (index.h("span", null, this.noOptionsFoundLabel)))), this.showsGroupedPanel ? this.renderGroupedPanel() : this.renderListboxItems(selectableOptions.length), this.hasMore && !this.loading && (index.h("li", { class: "pds-combobox__load-more", role: "presentation" }, index.h("pds-loader", { size: "small" })))));
+            }, onScroll: this.handleScroll }, !drilledIn && this.renderLoadingRow(), !this.loading && this.filteredItems.length === 0 && (index.h("li", { class: "pds-combobox__empty", role: "presentation" }, hasSlottedEmpty ? (index.h("slot", { name: "empty" })) : (index.h("span", null, this.noOptionsFoundLabel)))), this.showsGroupedPanel ? this.renderGroupedPanel() : this.renderListboxItems(selectableOptions.length), !drilledIn && this.renderLoadMoreRow()));
         if (!withSearch)
             return list;
         // The search field sits above the list; the wrapper is what's positioned and portaled.
-        return (index.h("div", { class: "pds-combobox__listbox pds-combobox__listbox--with-search", ref: el => (this.listboxEl = el), onMouseDown: this.onPanelMouseDown,
+        return (index.h("div", { class: "pds-combobox__listbox pds-combobox__listbox--with-search", ref: el => (this.listboxEl = el), onAnimationEnd: this.onDrillAnimationEnd, onMouseDown: this.onPanelMouseDown,
             // Portaled, the panel sits outside .pds-combobox, so its focusout wouldn't reach that handler.
             onFocusout: this.usesBodyPortal ? this.onComboboxFocusOut : undefined }, !listTakesFocus && this.renderPanelSearch(), list));
     }
@@ -4020,7 +4156,11 @@ const PdsCombobox = class {
         return true;
     }
     renderPanelSearch() {
-        return (index.h("div", { key: "panel-search", class: "pds-combobox__panel-search" }, index.h("pds-icon", { name: "search", size: "regular", "aria-hidden": "true" }), index.h("input", { ref: el => (this.panelSearchEl = el), type: "text", class: "pds-combobox__panel-search-input", placeholder: this.searchPlaceholder, value: this.panelQuery, role: "combobox", "aria-label": this.searchOptionsLabel, "aria-haspopup": this.popupRole, "aria-controls": this.listboxId, "aria-autocomplete": "list", "aria-expanded": "true", "aria-activedescendant": this.activeDescendantId, autocomplete: "off", onInput: this.onPanelSearchInput, onKeyDown: this.onPanelSearchKeyDown })));
+        return (index.h("div", { key: "panel-search", class: {
+                'pds-combobox__panel-search': true,
+                // Coming back from a group, the search field slides in with the groups.
+                'pds-combobox__panel-search--drill-out': this.drillDirection === 'out',
+            } }, index.h("pds-icon", { name: "search", size: "regular", "aria-hidden": "true" }), index.h("input", { ref: el => (this.panelSearchEl = el), type: "text", class: "pds-combobox__panel-search-input", placeholder: this.searchPlaceholder, value: this.panelQuery, role: "combobox", "aria-label": this.searchOptionsLabel, "aria-haspopup": this.popupRole, "aria-controls": this.listboxId, "aria-autocomplete": "list", "aria-expanded": "true", "aria-activedescendant": this.activeDescendantId, autocomplete: "off", onInput: this.onPanelSearchInput, onKeyDown: this.onPanelSearchKeyDown })));
     }
     /**
      * An option, as a listbox `option` or, given a tree `level`, a `treeitem`. `posinset` and
@@ -4039,6 +4179,8 @@ const PdsCombobox = class {
                 : badge && `${this.getOptionLabel(option)}, ${badge.label}`, tabindex: this.usesBodyPortal || this.usesPanelSearch || tree ? '-1' : isHighlighted ? '0' : '-1', class: {
                 'pds-combobox__option': true,
                 'pds-combobox__option--highlighted': isHighlighted,
+                // The keyboard's place, as on the group rows (`--keyboard`).
+                'pds-combobox__option--keyboard': isHighlighted && this.keyboardNavigating,
                 'pds-combobox__option--layout': isLayout,
                 'pds-combobox__option--chip': isChip,
                 'pds-combobox__option--disabled': isDisabled,
@@ -4100,12 +4242,9 @@ const PdsCombobox = class {
     renderGroupedPanel() {
         const entries = this.panelEntries();
         const setsize = entries.length;
-        if (this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null) {
-            const position = entries.findIndex(entry => entry.kind === 'group' && entry.group.optgroup === this.openGroup);
-            const open = entries[position];
-            if ((open === null || open === void 0 ? void 0 : open.kind) === 'group')
-                return this.renderGroupBackRow(open.group, { posinset: position + 1, setsize });
-        }
+        const drilled = this.drilledInEntry(entries);
+        if (drilled)
+            return this.renderGroupBackRow(drilled.group, { posinset: drilled.position + 1, setsize });
         this.renderedGroups = [];
         return entries.map((entry, position) => {
             const placement = { posinset: position + 1, setsize };
@@ -4133,13 +4272,13 @@ const PdsCombobox = class {
                 // As the group rows: shaded for the keys, and by `:hover` for the pointer.
                 'pds-combobox__group-back--highlighted': this.keyboardNavigating && this.highlightedGroupRow === group.optgroup,
                 'pds-combobox__group-back--keyboard': this.keyboardNavigating && this.highlightedGroupRow === group.optgroup,
-            }, role: "treeitem", "aria-expanded": "true", "aria-disabled": disabled ? 'true' : undefined, "aria-level": 1, "aria-posinset": posinset, "aria-setsize": setsize, "aria-labelledby": `${id}-label` }, index.h("div", { class: "pds-combobox__group-row-trigger pds-combobox__group-back-trigger", onMouseDown: this.onOptionMouseDown, onMouseEnter: this.onGroupBackMouseEnter, onClick: this.onGroupBackClick }, index.h("span", { class: "pds-combobox__group-row-label", id: `${id}-label` }, index.h("pds-icon", { name: "caret-left", size: "regular", "aria-hidden": "true", class: "pds-combobox__group-row-caret" }), index.h("span", { class: "visually-hidden" }, this.drillInBackLabel, ": "), group.label)), index.h("ul", { class: "pds-combobox__drill-in-options", role: "group", "aria-label": group.label }, this.renderGroupOptions(group))));
+            }, role: "treeitem", "aria-expanded": "true", "aria-disabled": disabled ? 'true' : undefined, "aria-level": 1, "aria-posinset": posinset, "aria-setsize": setsize, "aria-labelledby": `${id}-label` }, index.h("div", { class: "pds-combobox__group-row-trigger pds-combobox__group-back-trigger", onMouseDown: this.onOptionMouseDown, onMouseEnter: this.onGroupBackMouseEnter, onClick: this.onGroupBackClick }, index.h("span", { class: "pds-combobox__group-row-label", id: `${id}-label` }, index.h("pds-icon", { name: "caret-left", size: "regular", "aria-hidden": "true", class: "pds-combobox__group-row-caret" }), index.h("span", { class: "visually-hidden" }, this.drillInBackLabel, ": "), group.label)), index.h("ul", { class: "pds-combobox__drill-in-options", role: "group", "aria-label": group.label, onScroll: this.handleScroll }, this.renderLoadingRow(), this.renderGroupOptions(group), this.renderLoadMoreRow())));
     }
     renderGroupRow(group, groupIndex, { posinset, setsize }) {
         const flyout = this.effectiveGroupDisplay === 'flyout';
         const isOpen = flyout && this.openGroup === group.optgroup;
-        // Drill-in shades a group row only for the keys: not for the group holding the selection, or the
-        // row the pointer or a click-open left highlighted, which read as picked. `:hover` covers the pointer.
+        // `--has-selection` is a state hook only (tests read it), not styled. The fill follows
+        // `--highlighted` (always in flyout, in drill-in only for the keys) and a flyout's `--open` row.
         const hasSelection = flyout && group.options.some(({ option }) => this.isOptionSelected(option));
         const isCurrent = this.highlightedGroupRow === group.optgroup;
         const disabled = isGroupDisabled(group);
@@ -4170,6 +4309,7 @@ const PdsCombobox = class {
                 'pds-combobox__button-trigger-label': true,
                 'pds-combobox__button-trigger-label--placeholder': !this.selectedLabel,
                 'pds-combobox__button-trigger-label--with-icon': icon !== null,
+                'pds-combobox__button-trigger-label--value-in': icon !== null && this.fadesValueIn,
             } }, icon !== null && (
         // `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
         index.h("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.truncate ? (
@@ -4310,13 +4450,13 @@ const PdsCombobox = class {
         ]
             .filter(Boolean)
             .join(' ');
-        return (index.h(index.Host, { key: '104eb1c4cdca4494b10dea660e27a98b0c18bf64', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: '2548ff2b304bb6a5a249b5059a0b60b55cdf2152', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (index.h("label", { key: '7a261c72452ca7a278e1067e41c6eed52f29edc8', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, 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: '3a7f09752d2dff0fbf653852cd9ea474a44c61d5', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: '56d3bf86655abfd945228ee0bc3a556a6ad766b3', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (index.h("label", { key: 'a07f37d62bca1b15df3aa258d94c0df4609b93b3', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, 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': true,
                 'pds-combobox__input--invalid': this.isInvalid(),
-            }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": form.assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "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: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": form.assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, 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: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": form.assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, onMouseEnter: this.truncate ? this.onButtonTriggerMouseEnter : undefined, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), index.h("div", { key: 'ffd3bc72b34a7278f3fa706a236017a26b86ea3f', style: { display: 'none' } }, index.h("slot", { key: 'f47a81191ad7fd8c6bf63cf8ef39934cbf7fd28c', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
+            }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": form.assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "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: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": form.assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, 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: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": form.assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, onMouseEnter: this.truncate ? this.onButtonTriggerMouseEnter : undefined, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), index.h("div", { key: '0c0accd76b79aba9fa3072eb68800102d458d0a7', style: { display: 'none' } }, index.h("slot", { key: 'be9cc4c897788342bbc96321f033ed4fd97e80ff', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
             index.h("span", { key: "drill-status", class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : ''),
             // Its own region: sharing one, revealing a row then opening it would leave the text the
             // same, and opening the group would go unannounced.