@pine-ds/core 3.7.0 → 3.8.0

package/components/pds-combobox.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as computePosition, o as offset, f as flip, s as shift } from './floating-ui.dom.js';
-import { d as defineCustomElement$3 } from './pds-box2.js';
+import { d as defineCustomElement$4 } from './pds-box2.js';
+import { d as defineCustomElement$3 } from './pds-chip2.js';
 import { d as defineCustomElement$2 } from './pds-icon2.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 */
@@ -1338,7 +1339,7 @@ function createDOMPurify() {
 }
 var purify = createDOMPurify();
 
-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{display:block;font-size:0.95rem;-webkit-margin-after:var(--pine-dimension-150);margin-block-end:var(--pine-dimension-150)}.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:1}.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);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: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)}";
+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$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends HTMLElement {
     constructor() {
@@ -1384,7 +1385,7 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
          */
         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';
@@ -1398,10 +1399,29 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
          * @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 the display text shown in the input/trigger
+         */
+        this.displayText = '';
         /**
          * Internal state for filtered options and group labels
          */
@@ -1422,11 +1442,16 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
          * 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);
@@ -1436,6 +1461,7 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
             if (!this.isOpen) {
                 this.isOpen = true;
                 this.filterOptions();
+                this.setInitialHighlightedIndex();
                 setTimeout(() => this.openDropdownPositioning(), 0);
             }
         };
@@ -1445,10 +1471,7 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
                 this.isOpen = true;
                 this.filterOptions();
                 // Set highlighted index immediately for testing
-                const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
-                if (selectableOptions.length > 0) {
-                    this.highlightedIndex = 0;
-                }
+                this.setInitialHighlightedIndex();
                 setTimeout(() => {
                     this.openDropdownPositioning();
                     // For input trigger, keep focus on input and use aria-activedescendant
@@ -1527,6 +1550,13 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
                         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;
@@ -1571,12 +1601,9 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
             if (this.isOpen) {
                 this.filterOptions();
                 // Set highlighted index and prepare for keyboard navigation
-                const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
-                if (selectableOptions.length > 0) {
-                    this.highlightedIndex = 0;
-                    // For button trigger, prepare for arrow-key navigation mode
-                    this.isArrowKeyNavigationMode = true;
-                }
+                this.setInitialHighlightedIndex();
+                // For button trigger, prepare for arrow-key navigation mode
+                this.isArrowKeyNavigationMode = true;
                 setTimeout(() => this.openDropdownPositioning(), 0);
             }
             else {
@@ -1592,10 +1619,7 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
                 this.isOpen = true;
                 this.filterOptions();
                 // Set highlighted index immediately
-                const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
-                if (selectableOptions.length > 0) {
-                    this.highlightedIndex = 0;
-                }
+                this.setInitialHighlightedIndex();
                 setTimeout(() => {
                     this.openDropdownPositioning();
                     // For all button trigger keyboard opening, focus the first option so subsequent navigation works
@@ -1636,24 +1660,110 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
                 this.highlightedIndex = -1;
                 this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
                 this.updateAriaActiveDescendant(); // Clear aria-activedescendant
-                // 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);
+                // 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;
@@ -1684,9 +1794,29 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
                     this.allItems.push(el);
                 }
             });
-            // 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;
+            // 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();
@@ -1736,6 +1866,22 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
     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;
@@ -1743,6 +1889,13 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
     // 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)
@@ -1753,7 +1906,7 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
             this.filteredItems = [...this.allItems];
         }
         else {
-            const val = this.value.toLowerCase();
+            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)) {
@@ -1807,7 +1960,7 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
                     left: `${x}px`,
                     top: `${y}px`,
                     position: 'absolute',
-                    zIndex: 1000,
+                    zIndex: 'var(--pine-z-index-raised)',
                 });
             });
         }
@@ -1824,6 +1977,27 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
             (_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
      */
@@ -1831,7 +2005,7 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
         if (this.isOpen) {
             const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
             if (selectableOptions.length > 0) {
-                this.highlightedIndex = 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
@@ -1850,20 +2024,20 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
             this.isArrowKeyNavigationMode = true;
             const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
             if (selectableOptions.length > 0) {
-                this.highlightedIndex = 0;
-                // For arrow key navigation, actually focus the first option
+                this.setInitialHighlightedIndex();
+                // For arrow key navigation, actually focus the highlighted option
                 if (this.listboxEl) {
                     const optionElements = this.listboxEl.querySelectorAll('[role="option"]');
-                    const firstOption = optionElements[0];
-                    if (firstOption) {
+                    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 first option
-                        firstOption.setAttribute('tabindex', '0');
-                        firstOption.focus();
-                        firstOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                        // Set tabindex and focus on highlighted option
+                        highlightedOption.setAttribute('tabindex', '0');
+                        highlightedOption.focus();
+                        highlightedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
                     }
                 }
                 // Update aria-activedescendant on trigger
@@ -1929,7 +2103,7 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
     }
     // 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() {
@@ -1939,10 +2113,110 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
     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 });
     }
@@ -1966,12 +2240,14 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
                 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 ? option.getAttribute('aria-label') || this.getOptionLabel(option) : undefined, tabindex: isHighlighted ? '0' : '-1', class: {
+                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,
-                    }, "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) })) : (this.getOptionLabel(option)), isSelected && h("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
+                        '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;
         })));
@@ -1992,6 +2268,23 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
     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) {
@@ -2008,21 +2301,88 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
         // 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: 'a7e29f0e0c5ee43f1516b3668dbabb3231ecf728' }, h("div", { key: '67da7d8953761ec64f30a4292785b7e8ed5d1449', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut }, this.label && (h("label", { key: '0f013de1a3d6ccdce2fe31c18b144f7178a2c30f', htmlFor: this.componentId, class: "pds-combobox__label" }, h("span", { key: '3c7dfa84d68565e10b5784aa2365d9c5164b7d06', class: this.hideLabel ? 'visually-hidden' : '' }, this.label))), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
+        return (h(Host, { key: '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", 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.value, 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" }))) : (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: 'cbf26d489f2ffc32fc1f0820f962aef74b62bed4', style: { display: 'none' } }, h("slot", { key: 'ad01cd795f9cd5aba1bbe25d0dac2d489b3e5f20', 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 this; }
     static get watchers() { return {
         "value": ["handleValueChange"],
         "selectedOption": ["handleSelectedOptionChange"]
     }; }
     static get style() { return pdsComboboxCss; }
-}, [1, "pds-combobox", {
+}, [65, "pds-combobox", {
         "componentId": [1, "component-id"],
+        "name": [513],
         "customOptionLayouts": [4, "custom-option-layouts"],
         "customTriggerContent": [4, "custom-trigger-content"],
         "disabled": [4],
@@ -2036,12 +2396,18 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
         "trigger": [1],
         "triggerWidth": [1, "trigger-width"],
         "triggerVariant": [1, "trigger-variant"],
+        "chipSentiment": [1, "chip-sentiment"],
+        "chipLarge": [4, "chip-large"],
+        "chipIcon": [1, "chip-icon"],
+        "chipDot": [4, "chip-dot"],
         "value": [1025],
+        "displayText": [32],
         "filteredItems": [32],
         "highlightedIndex": [32],
         "isOpen": [32],
         "selectedOption": [32],
         "selectedOptionLayoutContent": [32],
+        "selectedOptionChipProps": [32],
         "setFocus": [64],
         "getSelectedValue": [64]
     }, undefined, {
@@ -2052,7 +2418,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pds-combobox", "pds-box", "pds-icon"];
+    const components = ["pds-combobox", "pds-box", "pds-chip", "pds-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "pds-combobox":
             if (!customElements.get(tagName)) {
@@ -2060,6 +2426,11 @@ function defineCustomElement$1() {
             }
             break;
         case "pds-box":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "pds-chip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }