@pine-ds/core 3.6.0 → 3.8.0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Bf1dou5H.js';
 import { c as computePosition, o as offset, f as flip, s as shift } from './floating-ui.dom-DbQzNDdQ.js';
 
 /*! @license DOMPurify 3.2.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.6/LICENSE */
@@ -1336,7 +1336,7 @@ function createDOMPurify() {
 }
 var purify = createDOMPurify();
 
-const pdsComboboxCss = ":host{display:block}.pds-combobox{position:relative}.pds-combobox__label{display:block;font-size:0.95rem;-webkit-margin-after:var(--pine-dimension-150);margin-block-end:var(--pine-dimension-150)}.pds-combobox__input{background:var(--pine-color-background-container);border:1px solid var(--pine-color-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color 0.2s ease;transition:border-color 0.2s 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__listbox{background:var(--pine-color-background-container);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:1000}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);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);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-grey-150)}.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,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-grey-150)}.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__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);color:var(--color-text-default, #ffffff);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;text-align:start}.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-text-primary);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}.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}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}";
+const pdsComboboxCss = ":host{display:block}:host([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:1px solid var(--pine-color-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);-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 0.2s ease;transition:border-color 0.2s 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-icon{color:var(--pine-color-text-secondary);pointer-events:none;position:absolute;right:var(--pine-dimension-150);z-index:var(--pine-z-index-raised)}.pds-combobox__listbox{background:var(--pine-color-background-container);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-grey-150)}.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-grey-150)}.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-placeholder);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__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);color:var(--color-text-default, #ffffff);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;text-align:start}.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-text-primary);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}.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}[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);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) {
@@ -1380,7 +1380,7 @@ const PdsCombobox = class {
          */
         this.mode = 'filter';
         /**
-         * Determines the combobox trigger: 'input' (editable input) or 'button' (button-like, non-editable).
+         * Determines the combobox trigger: 'input' (editable input), 'button' (button-like, non-editable), or 'chip' (chip-like, non-editable).
          * @default 'input'
          */
         this.trigger = 'input';
@@ -1394,14 +1394,33 @@ const PdsCombobox = class {
          * @default 'secondary'
          */
         this.triggerVariant = 'secondary';
+        /**
+         * The sentiment for the chip trigger. Matches Pine chip sentiments.
+         * @default 'neutral'
+         */
+        this.chipSentiment = 'neutral';
+        /**
+         * Whether the chip trigger should be displayed in a larger size.
+         * @default false
+         */
+        this.chipLarge = false;
+        /**
+         * Whether a dot should be displayed on the chip trigger.
+         * @default false
+         */
+        this.chipDot = false;
         /**
          * The value of the combobox input.
          */
         this.value = '';
         /**
-         * Internal state for filtered options
+         * Internal state for the display text shown in the input/trigger
+         */
+        this.displayText = '';
+        /**
+         * Internal state for filtered options and group labels
          */
-        this.filteredOptions = [];
+        this.filteredItems = [];
         /**
          * Internal state for the currently highlighted option index
          */
@@ -1418,45 +1437,143 @@ const PdsCombobox = class {
          * Internal state for the sanitized layout content of the selected option
          */
         this.selectedOptionLayoutContent = '';
+        /**
+         * Internal state to track chip properties for automatic rendering
+         */
+        this.selectedOptionChipProps = null;
         this.optionEls = [];
+        this.allItems = [];
+        this.isUpdatingFromSelection = false;
         this.handleInput = (e) => {
             const target = e.target;
-            this.value = target.value;
+            this.displayText = target.value;
             this.isOpen = true;
             this.filterOptions();
             setTimeout(() => this.openDropdownPositioning(), 0);
         };
-        this.handleFocus = () => {
-            this.isOpen = true;
-            this.filterOptions();
-            setTimeout(() => this.openDropdownPositioning(), 0);
+        this.handleInputClick = () => {
+            // Open dropdown when input is clicked (but not when tabbed into)
+            if (!this.isOpen) {
+                this.isOpen = true;
+                this.filterOptions();
+                this.setInitialHighlightedIndex();
+                setTimeout(() => this.openDropdownPositioning(), 0);
+            }
         };
         this.handleKeyDown = (e) => {
-            if (!this.isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+            if (!this.isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp' || (e.altKey && e.key === 'ArrowDown'))) {
+                e.preventDefault();
                 this.isOpen = true;
+                this.filterOptions();
+                // Set highlighted index immediately for testing
+                this.setInitialHighlightedIndex();
+                setTimeout(() => {
+                    this.openDropdownPositioning();
+                    // For input trigger, keep focus on input and use aria-activedescendant
+                    // For button trigger, move focus to first option for keyboard navigation
+                    if (this.trigger === 'input') {
+                        this.focusFirstOption();
+                    }
+                    else {
+                        this.focusFirstOptionForArrowKeys();
+                    }
+                }, 0);
+                return;
+            }
+            if (!this.isOpen) {
                 return;
             }
+            // Get only the option elements (skip group labels) for navigation
+            const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
             switch (e.key) {
                 case 'ArrowDown':
-                    this.highlightedIndex = Math.min(this.highlightedIndex + 1, this.filteredOptions.length - 1);
+                    e.preventDefault();
+                    // If no option is highlighted and we have options, start at 0
+                    if (this.highlightedIndex < 0 && selectableOptions.length > 0) {
+                        this.highlightedIndex = 0;
+                    }
+                    else {
+                        this.highlightedIndex = Math.min(this.highlightedIndex + 1, selectableOptions.length - 1);
+                    }
+                    this.updateOptionFocus();
                     break;
                 case 'ArrowUp':
-                    this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
+                    e.preventDefault();
+                    // If no option is highlighted and we have options, start at last option
+                    if (this.highlightedIndex < 0 && selectableOptions.length > 0) {
+                        this.highlightedIndex = selectableOptions.length - 1;
+                    }
+                    else {
+                        this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
+                    }
+                    this.updateOptionFocus();
+                    break;
+                case 'Home':
+                    e.preventDefault();
+                    if (selectableOptions.length > 0) {
+                        this.highlightedIndex = 0;
+                        this.updateOptionFocus();
+                    }
+                    break;
+                case 'End':
+                    e.preventDefault();
+                    if (selectableOptions.length > 0) {
+                        this.highlightedIndex = selectableOptions.length - 1;
+                        this.updateOptionFocus();
+                    }
+                    break;
+                case 'PageDown':
+                    e.preventDefault();
+                    if (selectableOptions.length > 0) {
+                        const nextIndex = Math.min(this.highlightedIndex + 10, selectableOptions.length - 1);
+                        this.highlightedIndex = nextIndex;
+                        this.updateOptionFocus();
+                    }
+                    break;
+                case 'PageUp':
+                    e.preventDefault();
+                    if (selectableOptions.length > 0) {
+                        const prevIndex = Math.max(this.highlightedIndex - 10, 0);
+                        this.highlightedIndex = prevIndex;
+                        this.updateOptionFocus();
+                    }
                     break;
                 case 'Enter':
-                    if (this.isOpen && this.highlightedIndex >= 0 && this.highlightedIndex < this.filteredOptions.length) {
-                        this.handleOptionClick(this.filteredOptions[this.highlightedIndex]);
+                    e.preventDefault();
+                    if (this.highlightedIndex >= 0 && this.highlightedIndex < selectableOptions.length) {
+                        this.handleOptionClick(selectableOptions[this.highlightedIndex]);
+                        this.restoreFocusToTrigger();
+                    }
+                    break;
+                case ' ':
+                    e.preventDefault();
+                    if (this.highlightedIndex >= 0 && this.highlightedIndex < selectableOptions.length) {
+                        this.handleOptionClick(selectableOptions[this.highlightedIndex]);
+                        this.restoreFocusToTrigger();
                     }
                     break;
                 case 'Escape':
+                    e.preventDefault();
                     this.isOpen = false;
+                    this.highlightedIndex = -1;
+                    this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
+                    this.restoreFocusToTrigger();
+                    break;
+                case 'Tab':
+                    // Allow normal tab behavior to close dropdown and move focus
+                    this.isOpen = false;
+                    this.highlightedIndex = -1;
+                    this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
                     break;
             }
         };
+        // Track if we're in arrow-key navigation mode (focus should move between options)
+        this.isArrowKeyNavigationMode = false;
         // Event handler for option click
         this.onOptionClick = (event) => {
             const idx = Number(event.currentTarget.getAttribute('data-option-index'));
-            const option = this.filteredOptions[idx];
+            const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
+            const option = selectableOptions[idx];
             this.handleOptionClick(option);
         };
         // Event handler for mouse enter on option
@@ -1468,58 +1585,233 @@ const PdsCombobox = class {
         this.onOptionMouseDown = (event) => {
             event.preventDefault();
         };
+        // Event handler for option keyboard events
+        this.onOptionKeyDown = (event) => {
+            // Delegate to main keyboard handler
+            this.handleKeyDown(event);
+        };
         // Handler for button trigger click
         this.onButtonTriggerClick = () => {
             this.isOpen = !this.isOpen;
-            if (this.isOpen)
+            if (this.isOpen) {
+                this.filterOptions();
+                // Set highlighted index and prepare for keyboard navigation
+                this.setInitialHighlightedIndex();
+                // For button trigger, prepare for arrow-key navigation mode
+                this.isArrowKeyNavigationMode = true;
                 setTimeout(() => this.openDropdownPositioning(), 0);
+            }
+            else {
+                // Reset navigation mode when closing
+                this.isArrowKeyNavigationMode = false;
+            }
         };
         // Handler for button trigger keyboard events
         this.onButtonTriggerKeyDown = (e) => {
-            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+            if ((e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown' || e.key === 'ArrowUp') && !this.isOpen) {
                 e.preventDefault();
+                e.stopPropagation(); // Prevent the event from bubbling and triggering click
                 this.isOpen = true;
-                this.highlightedIndex = 0;
-                setTimeout(() => this.openDropdownPositioning(), 0);
+                this.filterOptions();
+                // Set highlighted index immediately
+                this.setInitialHighlightedIndex();
+                setTimeout(() => {
+                    this.openDropdownPositioning();
+                    // For all button trigger keyboard opening, focus the first option so subsequent navigation works
+                    this.focusFirstOptionForArrowKeys();
+                }, 0);
             }
             else if (e.key === 'Escape') {
-                this.isOpen = false;
+                e.preventDefault();
+                if (this.isOpen) {
+                    this.isOpen = false;
+                    this.highlightedIndex = -1;
+                    this.updateAriaActiveDescendant(); // Clear aria-activedescendant
+                    this.restoreFocusToTrigger();
+                }
+            }
+            else if (this.isOpen) {
+                // Delegate other keys to main keyboard handler when dropdown is open
+                this.handleKeyDown(e);
+            }
+        };
+        // Handler for button trigger keyup events - prevents space key from triggering synthetic click
+        this.onButtonTriggerKeyUp = (e) => {
+            if (e.key === ' ') {
+                e.preventDefault();
+                e.stopPropagation();
             }
         };
         // Close dropdown when focus leaves the combobox
         this.onComboboxFocusOut = (event) => {
+            var _a;
             const relatedTarget = event.relatedTarget;
-            if (!this.el.contains(relatedTarget)) {
+            // Check if the related target is within our shadow DOM (listbox options)
+            const isRelatedTargetInListbox = relatedTarget && ((_a = this.listboxEl) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget));
+            const isRelatedTargetInCombobox = this.el.contains(relatedTarget);
+            // Don't close if focus is moving to an option in the listbox or staying within the combobox
+            if (!isRelatedTargetInCombobox && !isRelatedTargetInListbox) {
                 this.isOpen = false;
-                // If there's a selected option but the input value doesn't match, restore the selected option's value
-                if (this.selectedOption && this.value !== this.getOptionLabel(this.selectedOption)) {
-                    this.value = this.getOptionLabel(this.selectedOption);
+                this.highlightedIndex = -1;
+                this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
+                this.updateAriaActiveDescendant(); // Clear aria-activedescendant
+                // If there's a selected option but the display text doesn't match, restore the selected option's display text
+                if (this.selectedOption && this.displayText !== this.getOptionLabel(this.selectedOption)) {
+                    this.displayText = this.getOptionLabel(this.selectedOption);
+                    // The @Watch('selectedOption') will handle value and form internals if needed
                 }
             }
         };
     }
+    connectedCallback() {
+        // Initialize ElementInternals for form association
+        if (this.el.attachInternals) {
+            this.internals = this.el.attachInternals();
+        }
+    }
     componentWillLoad() {
         this.updateOptions();
     }
+    componentDidLoad() {
+        var _a, _b, _c;
+        // Check for value-based preselection if no option is selected yet
+        if (!this.selectedOption && this.value && this.optionEls.length > 0) {
+            const matchingOption = this.optionEls.find(opt => opt.value === this.value);
+            if (matchingOption) {
+                this.setSelectedOption(matchingOption);
+                // Update the display text to show the option's text content
+                this.displayText = this.getOptionLabel(matchingOption);
+                // Keep this.value as the actual option value
+                // this.value remains unchanged (already matches matchingOption.value)
+            }
+        }
+        // Initialize form value with current value
+        if (this.internals) {
+            try {
+                this.internals.setFormValue((_c = (_b = (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.value) !== null && _c !== void 0 ? _c : '');
+            }
+            catch (e) {
+                // ElementInternals.setFormValue not available in unit tests
+            }
+        }
+    }
     handleValueChange() {
         this.filterOptions();
+        // Sync with form internals for form association
+        if (this.internals) {
+            try {
+                this.internals.setFormValue(this.value);
+            }
+            catch (e) {
+                // ElementInternals.setFormValue not available in unit tests
+            }
+        }
+        // Find and select option that matches the value (for external value changes)
+        // Only do this if we're not already updating from a selection
+        if (!this.isUpdatingFromSelection && this.value && this.optionEls.length > 0) {
+            const currentSelectedValue = this.selectedOption ? this.selectedOption.value : null;
+            // If the value doesn't match the currently selected option's value, we need to update
+            if (this.value !== currentSelectedValue) {
+                const matchingOption = this.optionEls.find(opt => opt.value === this.value);
+                if (matchingOption) {
+                    this.isUpdatingFromSelection = true;
+                    this.setSelectedOption(matchingOption);
+                    // Update the display text to show the option's text content
+                    this.displayText = this.getOptionLabel(matchingOption);
+                    // Keep this.value as the actual option value (already correct)
+                    this.isUpdatingFromSelection = false;
+                }
+            }
+        }
     }
     handleSelectedOptionChange() {
         // Update the layout content when selected option changes
         this.selectedOptionLayoutContent = this.selectedOption && this.isOptionLayout(this.selectedOption)
             ? this.getOptionLayoutContent(this.selectedOption)
             : '';
+        // Update chip properties for automatic rendering when selected option changes
+        this.selectedOptionChipProps = this.selectedOption && this.isOptionChip(this.selectedOption)
+            ? this.getOptionChipProps(this.selectedOption)
+            : null;
+        // Update display text when selected option changes
+        if (this.selectedOption) {
+            this.displayText = this.getOptionLabel(this.selectedOption);
+            this.value = this.selectedOption.value;
+            // Update form internals with the actual option value
+            if (this.internals) {
+                try {
+                    this.internals.setFormValue(this.selectedOption.value);
+                }
+                catch (e) {
+                    // ElementInternals.setFormValue not available in unit tests
+                }
+            }
+        }
+        else {
+            this.displayText = '';
+            this.value = '';
+            if (this.internals) {
+                try {
+                    this.internals.setFormValue('');
+                }
+                catch (e) {
+                    // ElementInternals.setFormValue not available in unit tests
+                }
+            }
+        }
     }
     updateOptions() {
         var _a;
-        // Get all <option> elements from the slot
+        // Get all elements from the slot
         const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="option"], slot:not([name])');
         if (slot) {
-            this.optionEls = slot.assignedElements({ flatten: true })
-                .filter(el => el.tagName === 'OPTION');
-            // Set initial selected option if one exists (only check DOM on initialization)
-            if (!this.selectedOption) {
-                const initialSelected = this.optionEls.find(opt => opt.hasAttribute('selected')) || null;
+            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)
+                }
+            }
+            // For chip triggers, ensure we always have a selected option
+            if (!initialSelected && this.trigger === 'chip' && this.optionEls.length > 0) {
+                initialSelected = this.optionEls[0]; // Select first option as default
+                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 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();
@@ -1569,6 +1861,22 @@ const PdsCombobox = class {
     isOptionLayout(option) {
         return this.customOptionLayouts && option.hasAttribute('data-layout');
     }
+    // Helper method to check if option has chip attributes (new automatic approach)
+    isOptionChip(option) {
+        return option.hasAttribute('chip-sentiment') ||
+            option.hasAttribute('chip-large') ||
+            option.hasAttribute('chip-icon') ||
+            option.hasAttribute('chip-dot');
+    }
+    // Helper method to get chip properties from option attributes
+    getOptionChipProps(option) {
+        return {
+            sentiment: option.getAttribute('chip-sentiment') || 'neutral',
+            large: option.hasAttribute('chip-large'),
+            icon: option.getAttribute('chip-icon') || undefined,
+            dot: option.hasAttribute('chip-dot')
+        };
+    }
     // Helper method to check if option is selected (single source of truth)
     isOptionSelected(option) {
         return this.selectedOption === option;
@@ -1576,14 +1884,25 @@ const PdsCombobox = class {
     // Helper method to set selected option (centralized state management)
     setSelectedOption(option) {
         this.selectedOption = option;
+        // Immediately update chip properties for automatic rendering to ensure reactivity
+        if (option && this.isOptionChip(option)) {
+            this.selectedOptionChipProps = this.getOptionChipProps(option);
+        }
+        else {
+            this.selectedOptionChipProps = null;
+        }
     }
     filterOptions() {
+        // Ensure allItems includes optionEls if not already populated (for edge cases)
+        if (this.allItems.length === 0 && this.optionEls.length > 0) {
+            this.allItems = [...this.optionEls];
+        }
         if (this.mode === 'select-only') {
-            this.filteredOptions = this.optionEls;
+            this.filteredItems = [...this.allItems];
         }
         else {
-            const val = this.value.toLowerCase();
-            this.filteredOptions = this.optionEls.filter(option => {
+            const val = this.displayText.toLowerCase();
+            const filteredOptions = this.optionEls.filter(option => {
                 // 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 || '';
@@ -1591,6 +1910,31 @@ const PdsCombobox = class {
                 }
                 return this.getOptionLabel(option).toLowerCase().includes(val);
             });
+            // Rebuild filtered items maintaining group structure - simplified approach
+            this.filteredItems = [];
+            let currentGroupLabel = null;
+            this.allItems.forEach(item => {
+                if (item.tagName === 'OPTGROUP' || item.tagName === 'PDS-TEXT') {
+                    currentGroupLabel = item;
+                }
+                else if (item.tagName === 'OPTION' && filteredOptions.includes(item)) {
+                    const optionEl = item;
+                    const parent = optionEl.parentElement;
+                    let labelToUse = null;
+                    if (parent && parent.tagName === 'OPTGROUP') {
+                        // Only use the actual parent optgroup as label
+                        labelToUse = parent;
+                    }
+                    else if (currentGroupLabel && currentGroupLabel.tagName === 'PDS-TEXT') {
+                        // Allow pds-text to label subsequent top-level options until another label appears
+                        labelToUse = currentGroupLabel;
+                    }
+                    if (labelToUse && !this.filteredItems.includes(labelToUse)) {
+                        this.filteredItems.push(labelToUse);
+                    }
+                    this.filteredItems.push(optionEl);
+                }
+            });
         }
         this.highlightedIndex = -1;
     }
@@ -1611,7 +1955,7 @@ const PdsCombobox = class {
                     left: `${x}px`,
                     top: `${y}px`,
                     position: 'absolute',
-                    zIndex: 1000,
+                    zIndex: 'var(--pine-z-index-raised)',
                 });
             });
         }
@@ -1621,7 +1965,130 @@ const PdsCombobox = class {
      */
     async setFocus() {
         var _a;
-        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        if (this.inputEl) {
+            this.inputEl.focus();
+        }
+        else {
+            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    /**
+     * Sets the initial highlighted index when dropdown opens.
+     * If there's a selected option, highlight it. Otherwise, highlight the first option.
+     */
+    setInitialHighlightedIndex() {
+        const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
+        if (selectableOptions.length === 0) {
+            this.highlightedIndex = -1;
+            return;
+        }
+        // If there's a selected option, find its index in the filtered options
+        if (this.selectedOption) {
+            const selectedIndex = selectableOptions.findIndex(option => option === this.selectedOption);
+            if (selectedIndex >= 0) {
+                this.highlightedIndex = selectedIndex;
+                return;
+            }
+        }
+        // No selected option or selected option not in filtered results, highlight first option
+        this.highlightedIndex = 0;
+    }
+    /**
+     * Focus management helper - moves focus to the first option when dropdown opens
+     */
+    focusFirstOption() {
+        if (this.isOpen) {
+            const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
+            if (selectableOptions.length > 0) {
+                this.setInitialHighlightedIndex();
+                // DON'T focus the option elements - keep focus on trigger and use aria-activedescendant
+                // This prevents the focusout event that was closing the dropdown
+                // But still call updateOptionFocus for scrolling
+                if (this.listboxEl) {
+                    this.updateOptionFocus();
+                }
+            }
+        }
+    }
+    /**
+     * Focus management helper - actually focuses the first option when opened via arrow keys
+     */
+    focusFirstOptionForArrowKeys() {
+        if (this.isOpen) {
+            // Set arrow-key navigation mode
+            this.isArrowKeyNavigationMode = true;
+            const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
+            if (selectableOptions.length > 0) {
+                this.setInitialHighlightedIndex();
+                // For arrow key navigation, actually focus the highlighted option
+                if (this.listboxEl) {
+                    const optionElements = this.listboxEl.querySelectorAll('[role="option"]');
+                    const highlightedOption = optionElements[this.highlightedIndex];
+                    if (highlightedOption) {
+                        // Remove tabindex from all options first
+                        optionElements.forEach(option => {
+                            option.setAttribute('tabindex', '-1');
+                        });
+                        // Set tabindex and focus on highlighted option
+                        highlightedOption.setAttribute('tabindex', '0');
+                        highlightedOption.focus();
+                        highlightedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                    }
+                }
+                // Update aria-activedescendant on trigger
+                this.updateAriaActiveDescendant();
+            }
+        }
+    }
+    /**
+     * Focus management helper - updates visual state and scrolling for the currently highlighted option
+     * Note: We don't actually focus the option to prevent focusout events that close the dropdown
+     */
+    updateOptionFocus() {
+        if (!this.listboxEl || this.highlightedIndex < 0)
+            return;
+        const optionElements = this.listboxEl.querySelectorAll('[role="option"]');
+        const currentOption = optionElements[this.highlightedIndex];
+        if (currentOption) {
+            // Check if any option currently has focus OR if we're in arrow-key navigation mode
+            const hasOptionFocus = Array.from(optionElements).some(el => el === document.activeElement);
+            if (hasOptionFocus || this.isArrowKeyNavigationMode) {
+                // We're in arrow-key navigation mode, so actually move focus between options
+                optionElements.forEach(option => {
+                    option.setAttribute('tabindex', '-1');
+                });
+                currentOption.setAttribute('tabindex', '0');
+                currentOption.focus();
+            }
+            // Always scroll the option into view
+            currentOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        }
+        // Always update aria-activedescendant on the trigger element
+        this.updateAriaActiveDescendant();
+    }
+    /**
+     * Updates aria-activedescendant on the trigger element
+     */
+    updateAriaActiveDescendant() {
+        if (this.triggerEl && this.highlightedIndex >= 0) {
+            this.triggerEl.setAttribute('aria-activedescendant', `pds-combobox-option-${this.highlightedIndex}`);
+        }
+        else if (this.triggerEl) {
+            this.triggerEl.removeAttribute('aria-activedescendant');
+        }
+    }
+    /**
+     * Focus management helper - restores focus to the trigger element
+     */
+    restoreFocusToTrigger() {
+        setTimeout(() => {
+            if (this.inputEl) {
+                this.inputEl.focus();
+            }
+            else if (this.triggerEl) {
+                this.triggerEl.focus();
+            }
+        }, 0);
     }
     /**
      * Gets the value of the currently selected option.
@@ -1631,7 +2098,7 @@ const PdsCombobox = class {
     }
     // Get the label of the selected option
     get selectedLabel() {
-        return this.selectedOption ? this.getOptionLabel(this.selectedOption) : '';
+        return this.displayText || '';
     }
     // Get the layout content of the selected option for button trigger
     get selectedLayoutContent() {
@@ -1641,30 +2108,148 @@ const PdsCombobox = class {
     get selectedHasLayout() {
         return this.selectedOption ? this.isOptionLayout(this.selectedOption) : false;
     }
+    // Extract chip sentiment from selected option's attributes, layout content, or slotted trigger content
+    get selectedChipSentiment() {
+        // First priority: Check selected option's chip attributes (new automatic approach)
+        if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
+            const sentiment = this.selectedOption.getAttribute('chip-sentiment');
+            if (sentiment)
+                return sentiment;
+        }
+        // Second priority: Check selected option's layout content (existing custom layout approach)
+        if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
+            const chipElement = this.selectedOption.querySelector('pds-chip');
+            const sentiment = chipElement === null || chipElement === void 0 ? void 0 : chipElement.getAttribute('sentiment');
+            if (sentiment)
+                return sentiment;
+        }
+        // Third priority: Check if we have custom trigger content with a chip (initial state)
+        if (this.customTriggerContent) {
+            const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
+            if (slottedChip) {
+                const sentiment = slottedChip.getAttribute('sentiment');
+                if (sentiment)
+                    return sentiment;
+            }
+        }
+        // Fallback: Use component props
+        return this.chipSentiment;
+    }
+    // Extract chip large from selected option's attributes, layout content, or slotted trigger content
+    get selectedChipLarge() {
+        // First priority: Check selected option's chip attributes (new automatic approach)
+        if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
+            if (this.selectedOption.hasAttribute('chip-large'))
+                return true;
+        }
+        // Second priority: Check selected option's layout content (existing custom layout approach)
+        if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
+            const chipElement = this.selectedOption.querySelector('pds-chip');
+            if (chipElement === null || chipElement === void 0 ? void 0 : chipElement.hasAttribute('large'))
+                return true;
+        }
+        // Third priority: Check if we have custom trigger content with a chip (initial state)
+        if (this.customTriggerContent) {
+            const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
+            if (slottedChip && slottedChip.hasAttribute('large')) {
+                return true;
+            }
+        }
+        // Fallback: Use component props
+        return this.chipLarge;
+    }
+    // Extract chip icon from selected option's attributes, layout content, or slotted trigger content
+    get selectedChipIcon() {
+        // First priority: Check selected option's chip attributes (new automatic approach)
+        if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
+            const icon = this.selectedOption.getAttribute('chip-icon');
+            if (icon)
+                return icon;
+        }
+        // Second priority: Check selected option's layout content (existing custom layout approach)
+        if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
+            const chipElement = this.selectedOption.querySelector('pds-chip');
+            const icon = chipElement === null || chipElement === void 0 ? void 0 : chipElement.getAttribute('icon');
+            if (icon)
+                return icon;
+        }
+        // Third priority: Check if we have custom trigger content with a chip (initial state)
+        if (this.customTriggerContent) {
+            const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
+            if (slottedChip) {
+                const icon = slottedChip.getAttribute('icon');
+                if (icon)
+                    return icon;
+            }
+        }
+        // Fallback: Use component props
+        return this.chipIcon;
+    }
+    // Extract chip dot from selected option's attributes, layout content, or slotted trigger content
+    get selectedChipDot() {
+        // First priority: Check selected option's chip attributes (new automatic approach)
+        if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
+            if (this.selectedOption.hasAttribute('chip-dot'))
+                return true;
+        }
+        // Second priority: Check selected option's layout content (existing custom layout approach)
+        if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
+            const chipElement = this.selectedOption.querySelector('pds-chip');
+            if (chipElement === null || chipElement === void 0 ? void 0 : chipElement.hasAttribute('dot'))
+                return true;
+        }
+        // Third priority: Check if we have custom trigger content with a chip (initial state)
+        if (this.customTriggerContent) {
+            const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
+            if (slottedChip && slottedChip.hasAttribute('dot')) {
+                return true;
+            }
+        }
+        // Fallback: Use component props
+        return this.chipDot;
+    }
     handleOptionClick(option) {
         // Update reactive state - single source of truth
+        // The @Watch('selectedOption') will handle displayText, value, and form internals
         this.setSelectedOption(option);
-        this.value = this.getOptionLabel(option);
         this.isOpen = false;
         this.pdsComboboxChange.emit({ value: option.value });
     }
     renderDropdown() {
-        if (!this.isOpen || this.filteredOptions.length === 0)
+        if (!this.isOpen || this.filteredItems.length === 0) {
+            return null;
+        }
+        let optionIndex = 0;
+        const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
+        return (h("ul", { class: "pds-combobox__listbox", role: "listbox", id: "pds-combobox-listbox", "aria-label": this.label || 'Options', "aria-multiselectable": "false", ref: el => (this.listboxEl = el) }, this.filteredItems.map((item, itemIdx) => {
+            if (item.tagName === 'OPTGROUP') {
+                const optgroup = item;
+                return (h("li", { key: `optgroup-${itemIdx}`, class: "pds-combobox__group-label", role: "presentation", "aria-label": optgroup.label }, optgroup.label));
+            }
+            else if (item.tagName === 'PDS-TEXT') {
+                const pdsText = item;
+                return (h("li", { key: `pds-text-${itemIdx}`, class: "pds-combobox__group-label", role: "presentation" }, pdsText.textContent));
+            }
+            else if (item.tagName === 'OPTION') {
+                const option = item;
+                const isSelected = this.isOptionSelected(option);
+                const isHighlighted = this.highlightedIndex === optionIndex;
+                const isLayout = this.isOptionLayout(option);
+                const isChip = this.isOptionChip(option);
+                const currentOptionIndex = optionIndex++;
+                return (h("li", { key: option.value, id: `pds-combobox-option-${currentOptionIndex}`, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-setsize": selectableOptions.length, "aria-posinset": currentOptionIndex + 1, "aria-label": isLayout || isChip ? option.getAttribute('aria-label') || this.getOptionLabel(option) : undefined, tabindex: isHighlighted ? '0' : '-1', class: {
+                        'pds-combobox__option': true,
+                        'pds-combobox__option--highlighted': isHighlighted,
+                        'pds-combobox__option--layout': isLayout,
+                        'pds-combobox__option--chip': isChip,
+                    }, "data-option-index": currentOptionIndex, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (h("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : (this.getOptionLabel(option)), isSelected && h("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
+            }
             return null;
-        return (h("ul", { class: "pds-combobox__listbox", role: "listbox", id: "pds-combobox-listbox", ref: el => (this.listboxEl = el) }, this.filteredOptions.map((option, idx) => {
-            const isSelected = this.isOptionSelected(option);
-            const isHighlighted = this.highlightedIndex === idx;
-            const isLayout = this.isOptionLayout(option);
-            return (h("li", { key: option.value, id: `pds-combobox-option-${idx}`, role: "option", "aria-selected": isSelected ? 'true' : 'false', class: {
-                    'pds-combobox__option': true,
-                    'pds-combobox__option--highlighted': isHighlighted,
-                    'pds-combobox__option--layout': isLayout,
-                }, "data-option-index": idx, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter }, isLayout ? (h("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : (this.getOptionLabel(option)), isSelected && h("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
         })));
     }
     // Helper method to render the caret icon
     renderCaretIcon() {
-        return h("pds-icon", { icon: "caret-down", "aria-hidden": "true", "aria-label": "dropdown indicator", class: "pds-combobox__button-trigger-chevron" });
+        return h("pds-icon", { icon: "caret-down", "aria-hidden": "true", class: "pds-combobox__button-trigger-chevron" });
     }
     // Helper method to render layout content
     renderLayoutContent() {
@@ -1678,6 +2263,23 @@ const PdsCombobox = class {
     shouldShowLayoutContent() {
         return this.selectedHasLayout && !!this.selectedLayoutContent;
     }
+    // Helper method to build chip trigger CSS classes
+    getChipTriggerClass() {
+        const classes = ['pds-combobox__chip-trigger'];
+        // Add sentiment class
+        classes.push(`pds-combobox__chip-trigger--${this.selectedChipSentiment}`);
+        // Always use dropdown variant for chip triggers
+        classes.push('pds-combobox__chip-trigger--dropdown');
+        // Add large class if needed
+        if (this.selectedChipLarge) {
+            classes.push('pds-combobox__chip-trigger--large');
+        }
+        // Add dot class if needed
+        if (this.selectedChipDot) {
+            classes.push('pds-combobox__chip-trigger--dot');
+        }
+        return classes.join(' ');
+    }
     renderButtonTriggerContent() {
         // Case 1: Custom trigger content with layout priority
         if (this.customTriggerContent) {
@@ -1694,13 +2296,79 @@ const PdsCombobox = class {
         // Case 3: Standard mode with default text content
         return [this.renderDefaultContent(), this.renderCaretIcon()];
     }
+    renderChipTriggerContent() {
+        // Case 1: Custom trigger content with layout priority
+        if (this.customTriggerContent) {
+            if (this.shouldShowLayoutContent()) {
+                // When using custom layouts, the chip handles its own dropdown arrow
+                return this.renderChipTriggerLayoutContent();
+            }
+            // Fall back to slot content when no layout is available - chip handles its own dropdown arrow
+            return h("slot", { name: "trigger-content" });
+        }
+        // Case 2: Standard mode with layout content
+        if (this.shouldShowLayoutContent()) {
+            // When using custom layouts, the chip handles its own dropdown arrow
+            return this.renderChipTriggerLayoutContent();
+        }
+        // Case 3: Automatic chip mode - selected option has chip attributes
+        if (this.selectedOption && this.selectedOptionChipProps) {
+            // Render as chip automatically - chip handles its own dropdown arrow
+            return this.renderSelectedOptionAsChip();
+        }
+        // Case 4: Standard mode with default text content
+        return [
+            this.renderChipTriggerDefaultContent(),
+            this.renderCaretIcon()
+        ];
+    }
+    // Helper method to render selected option as chip for trigger (automatic approach)
+    renderSelectedOptionAsChip() {
+        if (!this.selectedOption || !this.selectedOptionChipProps)
+            return null;
+        return (h("pds-chip", { sentiment: this.selectedOptionChipProps.sentiment, variant: "dropdown" // Always use dropdown variant for triggers
+            ,
+            large: this.selectedOptionChipProps.large, icon: this.selectedOptionChipProps.icon, dot: this.selectedOptionChipProps.dot, class: "pds-combobox__chip-trigger-auto" }, this.getOptionLabel(this.selectedOption)));
+    }
+    // Helper method to render chip trigger layout content
+    renderChipTriggerLayoutContent() {
+        return (h("div", { class: "pds-combobox__chip-trigger-layout-wrapper", innerHTML: this.getModifiedLayoutContentForTrigger() }));
+    }
+    // Helper method to modify layout content for trigger use (ensure dropdown variant)
+    getModifiedLayoutContentForTrigger() {
+        let content = this.selectedLayoutContent;
+        // If the content contains a pds-chip, ensure it has variant="dropdown"
+        if (content.includes('<pds-chip')) {
+            // Use a temporary div to parse and modify the HTML
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = content;
+            const chipElement = tempDiv.querySelector('pds-chip');
+            if (chipElement) {
+                chipElement.setAttribute('variant', 'dropdown');
+                content = tempDiv.innerHTML;
+            }
+        }
+        return content;
+    }
+    // Helper method to render chip trigger default content
+    renderChipTriggerDefaultContent() {
+        return (h("span", { class: "pds-combobox__chip-trigger-label" }, this.selectedChipIcon && h("pds-icon", { icon: this.selectedChipIcon, class: "pds-combobox__chip-trigger-icon" }), this.selectedLabel || this.placeholder));
+    }
+    // Helper method to render option as chip (new automatic approach)
+    renderOptionChip(option) {
+        const chipProps = this.getOptionChipProps(option);
+        return (h("pds-chip", { sentiment: chipProps.sentiment, variant: "text" // Dropdown options use text variant, not dropdown
+            ,
+            large: chipProps.large, icon: chipProps.icon, dot: chipProps.dot, class: "pds-combobox__option-chip" }, this.getOptionLabel(option)));
+    }
     render() {
         const triggerClass = `pds-combobox__button-trigger pds-combobox__button-trigger--${this.triggerVariant}`;
-        return (h(Host, { key: 'ecc1f18dcb9869055af047446364afd66d13e5f6' }, h("div", { key: 'caf80cf07647666e6ea21bc7e8fa7e944a98f3b5', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut }, this.label && (h("label", { key: '08d38b21ce3c2d78a6a405b81e4291d2f5e61aed', htmlFor: this.componentId, class: "pds-combobox__label" }, h("span", { key: '58a3986e2656522377fce50dfad73a0960e8a9db', class: this.hideLabel ? 'visually-hidden' : '' }, this.label))), this.trigger === 'input' ? (h("input", { ref: el => {
+        return (h(Host, { key: 'd62992abd6eae05cfff52cfc0272490ca6370291' }, h("div", { key: 'affff971535065b7352daee494742bf7b65a61f4', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut }, this.label && (h("label", { key: 'c27f88928932bc4535698cb88595b1559cb22e55', htmlFor: this.componentId, class: "pds-combobox__label" }, h("span", { key: '0b65e67897735819cb2a4dc7d6d7d355af2f28d5', class: this.hideLabel ? 'visually-hidden' : '' }, this.label))), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
                 this.inputEl = el;
                 this.triggerEl = el;
-            }, class: "pds-combobox__input", style: { width: this.triggerWidth }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" })) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), h("div", { key: 'a91eb5b7998c9274de0f7e7e5184def30d23ad06', style: { display: 'none' } }, h("slot", { key: '40dbc40a9286b8caade78bfb70af366193bb08f2', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
+            }, class: "pds-combobox__input", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), h("div", { key: '47c259c2bc5b6f4f1d249d9bddd476b11c5a90fe', style: { display: 'none' } }, h("slot", { key: '83355a804fe978b6fb58838b4174bc815cf2f933', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
     }
+    static get formAssociated() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
         "value": ["handleValueChange"],