npm - @pine-ds/core - Versions diffs - 3.6.0 → 3.8.0 - Mend

@pine-ds/core 3.6.0 → 3.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (881) hide show

package/components/pds-combobox.js CHANGED Viewed

@@ -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}.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$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,14 +1399,33 @@ 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 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
          */
@@ -1422,45 +1442,143 @@ 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);
         };
-        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
@@ -1472,58 +1590,233 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
         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();
@@ -1573,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;
@@ -1580,14 +1889,25 @@ 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)
+        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 || '';
@@ -1595,6 +1915,31 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
                 }
                 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;
     }
@@ -1615,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)',
                 });
             });
         }
@@ -1625,7 +1970,130 @@ const PdsCombobox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCombobox extends
      */
     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.
@@ -1635,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() {
@@ -1645,30 +2113,148 @@ 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 });
     }
     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() {
@@ -1682,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) {
@@ -1698,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: '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 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],
@@ -1726,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],
-        "filteredOptions": [32],
+        "displayText": [32],
+        "filteredItems": [32],
         "highlightedIndex": [32],
         "isOpen": [32],
         "selectedOption": [32],
         "selectedOptionLayoutContent": [32],
+        "selectedOptionChipProps": [32],
         "setFocus": [64],
         "getSelectedValue": [64]
     }, undefined, {
@@ -1742,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)) {
@@ -1750,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();
             }