@pine-ds/core 4.2.0 → 4.4.0

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CTLu1TM4.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CB8Yh0Nt.js';
 import { i as isSpecTest, m as messageId, a as assignDescription } from './form-BuRbS7Hp.js';
-import { c as computePosition, a as autoUpdate, o as offset, f as flip, s as shift } from './floating-ui.dom-DDtwbwIl.js';
-import { d as debounceEvent } from './utils-tJa4KYNO.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as size, h as hide } from './floating-ui.dom-BPqJgIq6.js';
+import { c as cancelDebouncedEvent, d as debounceEvent, f as flushDebouncedEvent } from './utils-OYK5-nwe.js';
 
 /*! @license DOMPurify 3.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.3.3/LICENSE */
 
@@ -1389,7 +1389,269 @@ function createDOMPurify() {
 }
 var purify = createDOMPurify();
 
-const pdsComboboxCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-950)}.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled){border-color:var(--pine-color-border-danger)}.pds-combobox__input.pds-combobox__input--invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:calc(var(--pine-z-index-raised) - 1)}.pds-combobox__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error pds-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-combobox__listbox{background:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-background-muted)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-background-muted)}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.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, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);min-height:var(--pine-dimension-500)}.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-white);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}.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)}`;
+/** The optgroup an option sits in, or null for an ungrouped option. */
+function parentOptgroupOf(option) {
+    const parent = option === null || option === void 0 ? void 0 : option.parentElement;
+    return parent !== null && parent !== undefined && parent.tagName === 'OPTGROUP' ? parent : null;
+}
+/** A Pine icon name: letters, digits and hyphens, such as `hashtag`. Never a URL or file path. */
+const PINE_ICON_NAME = /^[a-z0-9-]+$/i;
+/**
+ * An optgroup's `data-icon` when it's a Pine icon name, or null. One definition of a usable group
+ * icon for every mode, checked here rather than trusting `pds-icon` to reject anything else; it is
+ * only ever passed to `pds-icon` as `name`.
+ */
+function groupIconOf(optgroup) {
+    const icon = optgroup.getAttribute('data-icon');
+    return icon !== null && PINE_ICON_NAME.test(icon) ? icon : null;
+}
+/** An option is disabled by its own `disabled` or its optgroup's, as in a native select. */
+function isOptionDisabled(option) {
+    var _a;
+    if (option === null || option === undefined)
+        return false;
+    return option.hasAttribute('disabled') || ((_a = parentOptgroupOf(option)) === null || _a === void 0 ? void 0 : _a.hasAttribute('disabled')) === true;
+}
+/** A group with no option left to choose. It still opens, so its options can be seen. */
+function isGroupDisabled(group) {
+    return group.options.every(({ option }) => isOptionDisabled(option));
+}
+/**
+ * Groups the combobox's filtered items for the panel: each optgroup becomes one entry holding its
+ * options, and ungrouped options stay where they are. Indexes count options in list order, the
+ * same as the inline listbox, so `data-option-index` means the same thing in every mode.
+ */
+function buildPanelEntries(items) {
+    const entries = [];
+    const groups = new Map();
+    let index = 0;
+    items.forEach(item => {
+        if (item.tagName !== 'OPTION')
+            return;
+        const option = item;
+        const optgroup = parentOptgroupOf(option);
+        if (optgroup !== null) {
+            let group = groups.get(optgroup);
+            if (!group) {
+                group = { optgroup, label: optgroup.label, icon: groupIconOf(optgroup), options: [] };
+                groups.set(optgroup, group);
+                entries.push({ kind: 'group', group });
+            }
+            group.options.push({ option, index: index++ });
+        }
+        else {
+            entries.push({ kind: 'option', option, index: index++ });
+        }
+    });
+    return entries;
+}
+/** The label of the optgroup an option sits in, or null for an ungrouped option. */
+function groupLabelOf(option) {
+    var _a, _b;
+    return (_b = (_a = parentOptgroupOf(option)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : null;
+}
+/**
+ * The items Up and Down move through from `current`, one tree level at a time: the panel's rows
+ * (groups and ungrouped options), or the open group's options. Drilled into a group, its row
+ * (drawn as the row back) comes first, above its options, as a tree draws a parent above its children.
+ * Disabled options and groups stay in it, as the APG listbox and tree patterns advise, so they're
+ * announced as unavailable rather than hidden from the keyboard.
+ */
+function panelColumn(entries, openGroup, current, drilledIn) {
+    const open = openGroup === null ? undefined : findGroup(entries, openGroup);
+    if (open !== undefined) {
+        const options = open.options.map(({ index }) => index);
+        if (drilledIn)
+            return [open.optgroup, ...options];
+        if (typeof current === 'number' && options.includes(current))
+            return options;
+    }
+    return entries.map(entry => (entry.kind === 'group' ? entry.group.optgroup : entry.index));
+}
+/** The panel's group for an optgroup, if it's showing. */
+function findGroup(entries, optgroup) {
+    for (const entry of entries) {
+        if (entry.kind === 'group' && entry.group.optgroup === optgroup)
+            return entry.group;
+    }
+    return undefined;
+}
+/** Moving from one group row to another waits this long, so a diagonal trip into the flyout doesn't switch groups. */
+const SWITCH_DELAY_MS = 120;
+/** Leaving a group (into the gap beside its flyout, say) waits this long before closing it. */
+const CLOSE_DELAY_MS = 200;
+/** Space between the panel's edge and the flyout: --pine-dimension-050 (4px), per the Figma frames. */
+const FLYOUT_GAP_PX = 4;
+/** How close the flyout may come to the viewport edge: --pine-dimension-100 (8px). */
+const VIEWPORT_PADDING_PX = 8;
+/** A flyout never shrinks below roughly three rows, even when little space is left. */
+const MIN_FLYOUT_HEIGHT_PX = 120;
+/**
+ * Opens and closes a group's flyout with hover intent, and keeps the open flyout positioned beside
+ * its group row. The flyout renders inside the row, so moving the pointer into it never leaves
+ * the row; the delays cover the gap between panel and flyout and diagonal moves across rows.
+ */
+/**
+ * Scrolls `el` into view inside `container` only. A flyout option needs this: the flyout is `fixed`
+ * beside the panel but sits inside it in the DOM, so `scrollIntoView` would also scroll the panel
+ * and the page, moving the flyout's row out from under it.
+ */
+function scrollIntoViewWithin(container, el) {
+    const bounds = container.getBoundingClientRect();
+    const rect = el.getBoundingClientRect();
+    if (rect.top < bounds.top) {
+        container.scrollTop -= bounds.top - rect.top;
+    }
+    else if (rect.bottom > bounds.bottom) {
+        container.scrollTop += rect.bottom - bounds.bottom;
+    }
+}
+class FlyoutController {
+    constructor(getOpenGroup, setOpenGroup) {
+        this.getOpenGroup = getOpenGroup;
+        this.setOpenGroup = setOpenGroup;
+    }
+    /** Pointer entered a group row (or its flyout, which sits inside it). */
+    enter(label) {
+        this.clearClose();
+        const open = this.getOpenGroup();
+        if (open === label) {
+            this.clearSwitch();
+            return;
+        }
+        if (open === null) {
+            this.setOpenGroup(label);
+            return;
+        }
+        this.clearSwitch();
+        this.switchTimer = setTimeout(() => {
+            this.switchTimer = undefined;
+            this.setOpenGroup(label);
+        }, SWITCH_DELAY_MS);
+    }
+    /** Pointer left a group row and its flyout. */
+    leave(label) {
+        this.clearSwitch();
+        if (this.getOpenGroup() !== label)
+            return;
+        this.clearClose();
+        this.closeTimer = setTimeout(() => {
+            this.closeTimer = undefined;
+            if (this.getOpenGroup() === label)
+                this.setOpenGroup(null);
+        }, CLOSE_DELAY_MS);
+    }
+    /**
+     * A click or tap on a group row opens it. It never closes it: on desktop the hover that preceded
+     * the click has already opened it, and touch browsers fire an emulated mouseenter and then click
+     * in the same tap. Closing happens on leaving the row or closing the panel.
+     */
+    open(label) {
+        this.clearTimers();
+        this.setOpenGroup(label);
+    }
+    /**
+     * Keeps `flyout` beside `row`: horizontally against the panel's edge, vertically so its first
+     * option lines up with the row. `fixed` positioning so the panel's scrolling can't clip it,
+     * including when the panel is portaled into a dialog.
+     */
+    position(row, panel, flyout) {
+        if (this.positionedFlyout === flyout && this.stopAutoUpdate)
+            return;
+        this.stopPositioning();
+        this.positionedFlyout = flyout;
+        const reference = {
+            getBoundingClientRect: () => {
+                const panelRect = panel.getBoundingClientRect();
+                const rowRect = row.getBoundingClientRect();
+                return {
+                    x: panelRect.x,
+                    y: rowRect.y,
+                    left: panelRect.left,
+                    right: panelRect.right,
+                    top: rowRect.top,
+                    bottom: rowRect.bottom,
+                    width: panelRect.width,
+                    height: rowRect.height,
+                };
+            },
+            contextElement: row,
+        };
+        // The flyout's own top padding, so its first option, not its edge, lines up with the row.
+        const flyoutPaddingTop = parseFloat(getComputedStyle(flyout).paddingTop) || 0;
+        const update = () => computePosition(reference, flyout, {
+            placement: 'right-start',
+            strategy: 'fixed',
+            middleware: [
+                offset({ mainAxis: FLYOUT_GAP_PX, crossAxis: -flyoutPaddingTop }),
+                flip({ fallbackPlacements: ['left-start'] }),
+                shift({ padding: VIEWPORT_PADDING_PX }),
+                // A long group scrolls inside the flyout instead of running off the viewport.
+                size({
+                    padding: VIEWPORT_PADDING_PX,
+                    apply({ availableHeight }) {
+                        flyout.style.maxHeight = `${Math.max(availableHeight, MIN_FLYOUT_HEIGHT_PX)}px`;
+                    },
+                }),
+                // Hidden with its row when the panel scrolls the row out of view.
+                hide({ strategy: 'referenceHidden' }),
+            ],
+        }).then(({ x, y, middlewareData }) => {
+            var _a;
+            // It starts hidden (see the stylesheet) so it never flashes in the row before it's placed.
+            Object.assign(flyout.style, {
+                position: 'fixed',
+                left: `${x}px`,
+                top: `${y}px`,
+                visibility: ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) === true ? 'hidden' : 'visible',
+            });
+            const reveal = this.pendingReveal;
+            this.pendingReveal = undefined;
+            if (reveal !== undefined && flyout.contains(reveal))
+                scrollIntoViewWithin(flyout, reveal);
+        });
+        this.stopAutoUpdate = autoUpdate(reference, flyout, () => {
+            void update();
+        });
+    }
+    /**
+     * Scrolls `option` into view inside its flyout. Before the flyout's first placement its height
+     * isn't capped yet, so the option looks visible; it's revealed again once the placement lands.
+     */
+    reveal(flyout, option) {
+        scrollIntoViewWithin(flyout, option);
+        if (flyout.style.maxHeight === '')
+            this.pendingReveal = option;
+    }
+    stopPositioning() {
+        var _a;
+        (_a = this.stopAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.stopAutoUpdate = undefined;
+        this.positionedFlyout = undefined;
+        this.pendingReveal = undefined;
+    }
+    /** The panel closed or the component left the page. */
+    reset() {
+        this.clearTimers();
+        this.stopPositioning();
+    }
+    clearTimers() {
+        this.clearSwitch();
+        this.clearClose();
+    }
+    clearSwitch() {
+        if (this.switchTimer !== undefined)
+            clearTimeout(this.switchTimer);
+        this.switchTimer = undefined;
+    }
+    clearClose() {
+        if (this.closeTimer !== undefined)
+            clearTimeout(this.closeTimer);
+        this.closeTimer = undefined;
+    }
+}
+
+const pdsComboboxCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-950)}.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled){border-color:var(--pine-color-border-danger)}.pds-combobox__input.pds-combobox__input--invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:calc(var(--pine-z-index-raised) - 1)}.pds-combobox__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-combobox__error pds-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-combobox__listbox{background:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-background-muted)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-background-muted)}.pds-combobox__option--disabled,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger,.pds-combobox__group-back--disabled>.pds-combobox__group-back-trigger,.pds-combobox__group--disabled>.pds-combobox__group-label{color:var(--pine-color-text-disabled)}.pds-combobox__option--disabled{cursor:not-allowed}.pds-combobox__option--disabled .pds-combobox__option-chip,.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper{opacity:0.5}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group{list-style:none;-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150)}.pds-combobox__group:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group-list{list-style:none;margin:0;padding:0}.pds-combobox__listbox--grouped .pds-combobox__group-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs)}.pds-combobox__group-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__group-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__group-row{list-style:none;position:relative}.pds-combobox__group-row-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.pds-combobox__group-row-trigger,.pds-combobox__group-row--has-selection>.pds-combobox__group-row-trigger,.pds-combobox__group-row--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-back--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-row-trigger:hover{background:var(--pine-color-background-muted)}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out{overflow-x:hidden}.pds-combobox__listbox--drill-in>.pds-combobox__group-back{-webkit-animation:pds-combobox-drill-from-end var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill-from-end var(--pine-motion-duration-base) var(--pine-motion-easing-out)}.pds-combobox__listbox--drill-out>li{-webkit-animation:pds-combobox-drill-from-start var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill-from-start var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-drill-from-end{from{opacity:0;-webkit-transform:translateX(var(--pine-dimension-sm));transform:translateX(var(--pine-dimension-sm))}}@keyframes pds-combobox-drill-from-end{from{opacity:0;-webkit-transform:translateX(var(--pine-dimension-sm));transform:translateX(var(--pine-dimension-sm))}}@-webkit-keyframes pds-combobox-drill-from-start{from{opacity:0;-webkit-transform:translateX(calc(var(--pine-dimension-sm) * -1));transform:translateX(calc(var(--pine-dimension-sm) * -1))}}@keyframes pds-combobox-drill-from-start{from{opacity:0;-webkit-transform:translateX(calc(var(--pine-dimension-sm) * -1));transform:translateX(calc(var(--pine-dimension-sm) * -1))}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__group-row-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0}.pds-combobox__group-row-caret{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--grouped,.pds-combobox__flyout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);padding:var(--pine-dimension-2xs)}.pds-combobox__flyout{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;overflow-y:auto;position:fixed;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1}.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:0}.pds-combobox__listbox-options{-ms-flex:1;flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-combobox__listbox-options.pds-combobox__listbox--grouped{padding:var(--pine-dimension-2xs)}.pds-combobox__panel-search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-combobox__panel-search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:0;flex-shrink:0}.pds-combobox__panel-search:focus-within{border-block-end-color:var(--pine-color-border-active)}.pds-combobox__panel-search-input{background:transparent;border:0;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:0;outline:none}.pds-combobox__panel-search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none}.pds-combobox__group-back-trigger{-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in.pds-combobox__listbox--grouped{-webkit-padding-before:0;padding-block-start:0}.pds-combobox__listbox-options--drilled-in:focus{outline:none}.pds-combobox__listbox-options--drilled-in:focus .pds-combobox__group-back-trigger{border-block-end-color:var(--pine-color-border-active)}:where(.pds-combobox__listbox-options--drilled-in) .pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay);-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);border-radius:0;inset-block-start:0;margin-inline:calc(var(--pine-dimension-2xs) * -1);position:-webkit-sticky;position:sticky;z-index:1}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none;margin:0;padding:0}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.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, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);min-height:var(--pine-dimension-500)}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:"";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}`;
 
 const PdsCombobox = class {
     constructor(hostRef) {
@@ -1436,6 +1698,35 @@ const PdsCombobox = class {
          * @default 'host'
          */
         this.dropdownMount = 'host';
+        /**
+         * Accessible prefix for the row that returns to the group list when `group-display` is
+         * `drill-in`, read before the open group's label. Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Back'
+         */
+        this.drillInBackLabel = 'Back';
+        /**
+         * Maximum width of a group's flyout when `group-display` is `flyout`. Any valid CSS width value.
+         * @default '380px'
+         */
+        this.flyoutMaxWidth = '380px';
+        /**
+         * Minimum width of a group's flyout when `group-display` is `flyout`. Any valid CSS width value.
+         * The flyout is as wide as its options, between this and `flyout-max-width`.
+         * @default '280px'
+         */
+        this.flyoutMinWidth = '280px';
+        /**
+         * How option groups (`<optgroup>`, or the `group` field of `options`) are shown in the dropdown.
+         * `inline` lists each group's label above its options. `flyout` lists the groups, and opens a
+         * group's options in a panel beside it on hover or click; while searching, the matching options
+         * are listed under their group labels, and search also matches group labels. `flyout` groups
+         * by `<optgroup>` (or `group`) only: options under a `<pds-text>` heading are listed ungrouped.
+         * `drill-in` lists the groups too, but a click replaces the list with that group's options and a
+         * row back to the groups; use it where nothing can open beside the dropdown, such as a side
+         * panel. `flyout` falls back to `drill-in` when there is no room for a flyout on either side.
+         * @default 'inline'
+         */
+        this.groupDisplay = 'inline';
         /**
          * Visually hides the label text for instances where only the combobox should be displayed.
          * The visible `<label>` is omitted (same pattern as `pds-select`) so label spacing does not reserve layout;
@@ -1449,6 +1740,23 @@ const PdsCombobox = class {
          * @default 'filter'
          */
         this.mode = 'filter';
+        /**
+         * Shows a search field at the top of the dropdown for the `button` and `chip` triggers, which
+         * can't be typed into. Search filters the options the same way typing in the `input` trigger
+         * does; in a grouped display it also matches group labels.
+         * @default false
+         */
+        this.panelSearch = false;
+        /**
+         * Accessible label for the search input inside the dropdown panel (`panel-search`). Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Search options'
+         */
+        this.searchOptionsLabel = 'Search options';
+        /**
+         * Placeholder text for the search input inside the dropdown panel (`panel-search`). Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Find...'
+         */
+        this.searchPlaceholder = 'Find...';
         /**
          * Determines the combobox trigger: 'input' (editable input), 'button' (button-like, non-editable), or 'chip' (chip-like, non-editable).
          * @default 'input'
@@ -1521,6 +1829,30 @@ const PdsCombobox = class {
          * Internal state for dropdown open/close
          */
         this.isOpen = false;
+        /**
+         * The optgroup whose flyout is open, when `groupDisplay` is `flyout`.
+         */
+        this.openGroup = null;
+        /**
+         * Which way drill-in just moved, so the list slides that way: `in` to a group, `out` back to the
+         * groups. Cleared once the slide ends, so later renders don't animate.
+         */
+        this.drillDirection = null;
+        /**
+         * The group row highlighted in the grouped panel. It counts only while no option is
+         * highlighted (`highlightedIndex` is -1); see `highlightedGroupRow`.
+         */
+        this.highlightedGroup = null;
+        /** The keys, not the pointer, moved the highlight last; the focus ring shows only then. */
+        this.keyboardNavigating = false;
+        /**
+         * What's typed in the dropdown's own search field (`panelSearch`).
+         */
+        this.panelQuery = '';
+        /**
+         * `groupDisplay` is `flyout` but there's no room beside the dropdown, so groups drill in instead.
+         */
+        this.flyoutFallback = false;
         /**
          * Internal state for the currently selected option
          */
@@ -1550,12 +1882,39 @@ const PdsCombobox = class {
         this.portalEl = null;
         this.bodyPortalAutoUpdateActive = false;
         this.isUpdatingFromSelection = false;
+        this.flyout = new FlyoutController(() => this.openGroup, group => {
+            this.openGroup = group;
+        });
+        /** The groups in the flyout panel's last render, so a row's index finds its optgroup. */
+        this.renderedGroups = [];
+        /** Room for a flyout was checked for this open. */
+        this.flyoutRoomChecked = false;
+        /** The highlighted option sits in a flyout that hasn't rendered yet; focus it after the next render. */
+        this.pendingOptionFocus = false;
+        /** Group rows' DOM ids, stable across renders so `aria-activedescendant` can point at a row. */
+        this.groupIds = new WeakMap();
+        this.groupIdCount = 0;
         /**
          * In filter mode, after choosing an option the input still shows the label and would
          * otherwise filter the list to matching substrings only. While this flag is true,
          * the list shows every option until the user types (then normal filtering applies).
          */
         this.expandFilterListWhileOpen = false;
+        this.onDrillAnimationEnd = (event) => {
+            var _a;
+            // Only the slide's own end: slotted consumer content can animate inside the list too.
+            if ((_a = event.animationName) === null || _a === void 0 ? void 0 : _a.startsWith('pds-combobox-drill'))
+                this.drillDirection = null;
+        };
+        /** `<label for>` only works on the input trigger; for a div trigger a click on the label focuses it. */
+        this.onLabelClick = () => {
+            var _a;
+            if (this.trigger !== 'input' && !this.disabled) {
+                (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        /** The query behind the options loaded from `async-url`. */
+        this.lastFetchedQuery = '';
         this.handleInput = (e) => {
             const target = e.target;
             this.clearExpandFilterList();
@@ -1592,6 +1951,7 @@ const PdsCombobox = class {
         this.handleKeyDown = (e) => {
             if (!this.isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp' || (e.altKey && e.key === 'ArrowDown'))) {
                 e.preventDefault();
+                this.keyboardNavigating = true;
                 this.isOpen = true;
                 this.prepareExpandFilterListOnOpen();
                 this.filterOptions();
@@ -1613,75 +1973,53 @@ const PdsCombobox = class {
             if (!this.isOpen) {
                 return;
             }
+            if (this.handleGroupedPanelKey(e))
+                return;
+            // The input trigger's text keeps Space, Home and End while the grouped panel shows.
+            if (this.showsGroupedPanel && this.trigger === 'input' && (e.key === ' ' || e.key === 'Home' || e.key === 'End'))
+                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':
                     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();
+                    // If no option is highlighted, start at the first
+                    this.highlightOptionAt(selectableOptions, this.highlightedIndex < 0 ? 0 : this.highlightedIndex + 1);
                     break;
                 case 'ArrowUp':
                     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();
+                    // If no option is highlighted, start at the last
+                    this.highlightOptionAt(selectableOptions, this.highlightedIndex < 0 ? selectableOptions.length - 1 : this.highlightedIndex - 1);
                     break;
                 case 'Home':
                     e.preventDefault();
-                    if (selectableOptions.length > 0) {
-                        this.highlightedIndex = 0;
-                        this.updateOptionFocus();
-                    }
+                    this.highlightOptionAt(selectableOptions, 0);
                     break;
                 case 'End':
                     e.preventDefault();
-                    if (selectableOptions.length > 0) {
-                        this.highlightedIndex = selectableOptions.length - 1;
-                        this.updateOptionFocus();
-                    }
+                    this.highlightOptionAt(selectableOptions, selectableOptions.length - 1);
                     break;
                 case 'PageDown':
                     e.preventDefault();
-                    if (selectableOptions.length > 0) {
-                        const nextIndex = Math.min(this.highlightedIndex + 10, selectableOptions.length - 1);
-                        this.highlightedIndex = nextIndex;
-                        this.updateOptionFocus();
-                    }
+                    this.highlightOptionAt(selectableOptions, this.highlightedIndex + 10);
                     break;
                 case 'PageUp':
                     e.preventDefault();
-                    if (selectableOptions.length > 0) {
-                        const prevIndex = Math.max(this.highlightedIndex - 10, 0);
-                        this.highlightedIndex = prevIndex;
-                        this.updateOptionFocus();
-                    }
+                    this.highlightOptionAt(selectableOptions, this.highlightedIndex - 10);
                     break;
                 case 'Enter':
+                case ' ': {
                     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]);
+                    // An option in a flyout the pointer has since closed isn't on screen; don't choose it.
+                    if (this.showsGroupedPanel && this.activeDescendantId === undefined)
+                        break;
+                    const option = selectableOptions[this.highlightedIndex];
+                    if (option !== undefined && !isOptionDisabled(option)) {
+                        this.handleOptionClick(option);
                         this.restoreFocusToTrigger();
                     }
                     break;
+                }
                 case 'Escape':
                     e.preventDefault();
                     this.isOpen = false;
@@ -1706,12 +2044,53 @@ const PdsCombobox = class {
             const idx = Number(event.currentTarget.getAttribute('data-option-index'));
             const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
             const option = selectableOptions[idx];
+            if (isOptionDisabled(option))
+                return;
             this.handleOptionClick(option);
+            // The search field closes with the panel; send focus back to the trigger instead of losing it.
+            // (Enter and Space already restore focus in the key handler.)
+            if (this.usesPanelSearch)
+                this.restoreFocusToTrigger();
         };
         // Event handler for mouse enter on option
         this.onOptionMouseEnter = (event) => {
             const idx = Number(event.currentTarget.getAttribute('data-option-index'));
             this.highlightedIndex = idx;
+            this.keyboardNavigating = false;
+        };
+        this.onGroupRowMouseEnter = (event) => {
+            const group = this.groupFromEvent(event);
+            if (group !== null)
+                this.flyout.enter(group);
+        };
+        this.onGroupRowMouseLeave = (event) => {
+            const group = this.groupFromEvent(event);
+            if (group !== null)
+                this.flyout.leave(group);
+        };
+        // The pointer highlights a group's row as it does an option, so the keys carry on from there.
+        this.onGroupRowTriggerMouseEnter = (event) => {
+            const group = this.groupFromEvent(event);
+            if (group !== null)
+                this.highlightGroupRowByPointer(group);
+        };
+        this.onGroupBackMouseEnter = () => {
+            if (this.openGroup !== null)
+                this.highlightGroupRowByPointer(this.openGroup);
+        };
+        this.onGroupRowClick = (event) => {
+            var _a;
+            const group = this.groupFromEvent(event);
+            if (group === null)
+                return;
+            this.flyout.open(group);
+            // Highlight the group's first option, so the arrow keys carry on from the group just opened
+            // rather than from wherever the highlight was before.
+            const first = (_a = this.renderedGroups.find(entry => entry.optgroup === group)) === null || _a === void 0 ? void 0 : _a.options[0];
+            if (first !== undefined) {
+                this.highlightedIndex = first.index;
+                this.updateAriaActiveDescendant();
+            }
         };
         // Prevent blur on mousedown
         this.onOptionMouseDown = (event) => {
@@ -1728,10 +2107,7 @@ const PdsCombobox = class {
             if (this.isOpen) {
                 this.prepareExpandFilterListOnOpen();
                 this.filterOptions();
-                // Trigger initial fetch if async and no options loaded yet
-                if (this.asyncUrl && this.internalOptions.length === 0) {
-                    this.debouncedFetchAsyncOptions(this.displayText, 1);
-                }
+                this.fetchAsyncOptionsOnOpen();
                 // Set highlighted index and prepare for keyboard navigation
                 this.setInitialHighlightedIndex();
                 // For button trigger, prepare for arrow-key navigation mode
@@ -1746,12 +2122,17 @@ const PdsCombobox = class {
         };
         // Handler for button trigger keyboard events
         this.onButtonTriggerKeyDown = (e) => {
+            // Escape closes an open group before the dropdown. Other keys reach the tree through handleKeyDown.
+            if (this.isOpen && e.key === 'Escape' && this.handleGroupedPanelKey(e))
+                return;
             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.keyboardNavigating = true;
                 this.isOpen = true;
                 this.prepareExpandFilterListOnOpen();
                 this.filterOptions();
+                this.fetchAsyncOptionsOnOpen();
                 // Set highlighted index immediately
                 this.setInitialHighlightedIndex();
                 setTimeout(() => {
@@ -1784,11 +2165,13 @@ const PdsCombobox = class {
         };
         // Close dropdown when focus leaves the combobox
         this.onComboboxFocusOut = (event) => {
-            var _a, _b;
+            var _a, _b, _c;
             const relatedTarget = event.relatedTarget;
             const isRelatedTargetInListbox = relatedTarget &&
                 (((_a = this.listboxEl) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget)) || ((_b = this.portalEl) === null || _b === void 0 ? void 0 : _b.contains(relatedTarget)));
-            const isRelatedTargetInCombobox = this.el.contains(relatedTarget);
+            // `contains` doesn't cross into the shadow root, where the trigger lives; with panel search,
+            // focus leaves the search field for the trigger whenever it's clicked to close.
+            const isRelatedTargetInCombobox = relatedTarget !== null && (this.el.contains(relatedTarget) || !!((_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.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;
@@ -1811,11 +2194,58 @@ const PdsCombobox = class {
             // Load more when near bottom (within 50px)
             if (scrollBottom < 50) {
                 this.pdsComboboxLoadOptions.emit({
-                    query: this.displayText,
+                    query: this.activeQuery,
                     page: this.currentPage + 1,
                 });
-                this.debouncedFetchAsyncOptions(this.displayText, this.currentPage + 1);
+                this.debouncedFetchAsyncOptions(this.activeQuery, this.currentPage + 1);
+            }
+        };
+        // A press on the panel's padding, captions or status rows keeps focus in the search field;
+        // otherwise it would blur the field, closing a portaled panel or stranding the keys.
+        this.onPanelMouseDown = (event) => {
+            if (event.target !== this.panelSearchEl)
+                event.preventDefault();
+        };
+        this.onPanelSearchInput = (event) => {
+            this.setPanelQuery(event.target.value);
+        };
+        // Space, Home and End edit the search text rather than moving through the options.
+        this.onPanelSearchKeyDown = (event) => {
+            if (event.key === ' ' || event.key === 'Home' || event.key === 'End')
+                return;
+            if (this.handlePanelTab(event))
+                return;
+            this.handleKeyDown(event);
+        };
+        /**
+         * Keys in the list while a drilled-in group hides the search field. Backspace, like ArrowLeft,
+         * steps back to the groups; a character starts a search of the whole list. Characters typed
+         * before the search field renders and takes focus still land on the list, so they add to the
+         * query rather than starting it again.
+         */
+        this.onPanelTreeKeyDown = (event) => {
+            if (this.handlePanelTab(event))
+                return;
+            if (event.key === 'Backspace') {
+                event.preventDefault();
+                if (!this.leaveDrilledInGroup() && this.panelQuery !== '')
+                    this.setPanelQuery(this.panelQuery.slice(0, -1));
+                return;
             }
+            // AltGr (Ctrl+Alt on Windows) and Option on macOS type characters too; Meta and Ctrl alone are
+            // shortcuts.
+            if (event.key.length === 1 && event.key !== ' ' && !event.metaKey && (!event.ctrlKey || event.altKey)) {
+                event.preventDefault();
+                this.flyout.reset();
+                // The query first, so leaving the group reads as search results, not a slide back.
+                this.setPanelQuery(this.panelQuery + event.key);
+                this.openGroup = null;
+                return;
+            }
+            this.handleKeyDown(event);
+        };
+        this.onGroupBackClick = () => {
+            this.leaveDrilledInGroup();
         };
     }
     connectedCallback() {
@@ -1852,15 +2282,106 @@ const PdsCombobox = class {
             this.deferredPortalTeardownId = undefined;
         }
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        cancelDebouncedEvent(this.pdsComboboxSearch);
         this.clearAsyncFetchState();
         this.removeBodyPortal();
+        this.flyout.reset();
     }
     componentDidRender() {
+        var _a;
         if (this.usesBodyPortal && this.isOpen) {
             this.syncBodyPortal();
         }
+        const row = (_a = this.listboxEl) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-combobox__group-row--open');
+        const flyoutEl = row === null || row === void 0 ? void 0 : row.querySelector('.pds-combobox__flyout');
+        if (this.isOpen && this.listboxEl && row && flyoutEl) {
+            this.flyout.position(row, this.listboxEl, flyoutEl);
+        }
+        else {
+            this.flyout.stopPositioning();
+        }
+        // The row back is sticky over the group's options; scrolling an option into view stops below
+        // it. Set before any scroll below, and when it first applies, scroll the highlighted option
+        // again: the list keeps its offset on drilling in, and an earlier scroll had no padding.
+        if (this.panelTreeEl) {
+            const header = this.hidesPanelSearch ? this.panelTreeEl.querySelector('.pds-combobox__group-back-trigger') : null;
+            const padding = header ? `${header.offsetHeight}px` : '';
+            if (this.panelTreeEl.style.scrollPaddingBlockStart !== padding) {
+                this.panelTreeEl.style.scrollPaddingBlockStart = padding;
+                if (padding !== '' && this.highlightedIndex >= 0)
+                    this.pendingOptionFocus = true;
+            }
+        }
+        if (this.pendingOptionFocus) {
+            this.pendingOptionFocus = false;
+            this.updateOptionFocus();
+        }
+        // Panel search keeps focus in the search field, or in the list while a group hides the field.
+        const panelFocusEl = this.hidesPanelSearch ? this.panelTreeEl : this.panelSearchEl;
+        if (this.isOpen && this.usesPanelSearch && panelFocusEl && panelFocusEl !== this.panelFocusEl) {
+            this.focusPanel(panelFocusEl);
+        }
+    }
+    focusPanel(el) {
+        var _a, _b;
+        this.panelFocusEl = el;
+        // Before the dropdown is positioned it sits in the page's flow; don't scroll to it.
+        el.focus({ preventScroll: true });
+        // A search started by typing in the list carries its first character; type on after it.
+        if (el === this.panelSearchEl && this.panelQuery !== '') {
+            (_b = (_a = this.panelSearchEl).setSelectionRange) === null || _b === void 0 ? void 0 : _b.call(_a, this.panelQuery.length, this.panelQuery.length);
+        }
+        this.updateAriaActiveDescendant();
+    }
+    /** Switching display mode leaves no flyout or hover timer from the last one. */
+    groupDisplayChanged() {
+        this.flyout.reset();
+        this.openGroup = null;
+        // The reset isn't a drill-out, so it doesn't slide either.
+        this.drillDirection = null;
+    }
+    openGroupChanged(next, previous) {
+        this.handPanelFocusToList();
+        // Only moves between the drill-in panel's views slide; search results don't.
+        if (!this.isOpen || this.effectiveGroupDisplay !== 'drill-in' || !this.showsGroupedPanel)
+            return;
+        if (next !== null && previous === null)
+            this.drillDirection = 'in';
+        else if (next === null && previous !== null)
+            this.drillDirection = 'out';
+    }
+    /** A flyout with no room beside the dropdown drills in, which can hide the focused search field too. */
+    flyoutFallbackChanged() {
+        this.handPanelFocusToList();
+    }
+    /**
+     * Drilling into a group hides the search field, so focus moves to the list before the field
+     * unmounts: focus lost with it would leave the combobox and close the dropdown.
+     */
+    handPanelFocusToList() {
+        if (this.isOpen && this.hidesPanelSearch && this.panelTreeEl)
+            this.focusPanel(this.panelTreeEl);
     }
     isOpenChanged(isOpen) {
+        if (!isOpen) {
+            this.drillDirection = null;
+            this.openGroup = null;
+            this.highlightedGroup = null;
+            this.keyboardNavigating = false;
+            this.flyout.reset();
+            if (this.panelQuery !== '') {
+                // The field reopens empty, so tell consumers who filter `options` from this event.
+                this.panelQuery = '';
+                this.pdsComboboxSearch.emit({ query: '' });
+            }
+            // And with `async-url`, start loading the unsearched list now, so it's ready by the reopen.
+            if (this.usesPanelSearch && this.asyncUrl && this.lastFetchedQuery !== '') {
+                this.debouncedFetchAsyncOptions('', 1);
+            }
+            this.panelFocusEl = undefined;
+            this.flyoutRoomChecked = false;
+            this.flyoutFallback = false;
+        }
         if (isOpen && this.deferredPortalTeardownId !== undefined) {
             clearTimeout(this.deferredPortalTeardownId);
             this.deferredPortalTeardownId = undefined;
@@ -1893,17 +2414,52 @@ const PdsCombobox = class {
     get usesBodyPortal() {
         return this.dropdownMount === 'body';
     }
+    get labelId() {
+        return `${this.componentId}-label`;
+    }
+    /** One check for "the `<label>` is rendered", so the label and the reference to it can't disagree. */
+    get hasVisibleLabel() {
+        return Boolean(this.label) && !this.hideLabel;
+    }
+    /**
+     * The button and chip triggers are `div`s, which `<label for>` can't name, so they point at the
+     * visible label instead. With `hide-label` there is no visible label and `aria-label` names them.
+     * With panel search the trigger is a button, which has no value, so its own text (the selection
+     * or placeholder) joins the label in its name.
+     */
+    get triggerLabelledBy() {
+        if (!this.hasVisibleLabel)
+            return undefined;
+        return this.usesPanelSearch ? `${this.labelId} ${this.componentId}` : this.labelId;
+    }
+    /** The div triggers' `aria-label` when the label is hidden; with panel search it names the selection too. */
+    get triggerAriaLabel() {
+        if (!this.hideLabel)
+            return undefined;
+        const shown = this.selectedLabel || this.placeholder;
+        return this.usesPanelSearch && shown ? `${this.label}, ${shown}` : this.label;
+    }
     get listboxId() {
         return `${this.componentId}-listbox`;
     }
     optionDomId(optionIndex) {
         return `${this.componentId}-option-${optionIndex}`;
     }
+    groupDomId(optgroup) {
+        let id = this.groupIds.get(optgroup);
+        if (id === undefined) {
+            id = `${this.componentId}-group-${this.groupIdCount++}`;
+            this.groupIds.set(optgroup, id);
+        }
+        return id;
+    }
     setupDebounce() {
         const { pdsComboboxSearch, debounce, originalSearchEmitter } = this;
         this.pdsComboboxSearch = debounce === undefined
             ? originalSearchEmitter !== null && originalSearchEmitter !== void 0 ? originalSearchEmitter : pdsComboboxSearch
             : debounceEvent(pdsComboboxSearch, debounce);
+        // After the swap, so an emit made while flushing goes to the new emitter, not the old one.
+        flushDebouncedEvent(pdsComboboxSearch);
     }
     optionsChanged() {
         if (this.options) {
@@ -2050,6 +2606,8 @@ const PdsCombobox = class {
             });
             if (page === 1) {
                 this.internalOptions = formattedResults;
+                // Only once its results have loaded: a failed or aborted fetch leaves the last query's.
+                this.lastFetchedQuery = query;
             }
             else {
                 this.internalOptions = [...this.internalOptions, ...formattedResults];
@@ -2074,26 +2632,76 @@ const PdsCombobox = class {
         }
     }
     updateOptionsFromAsync() {
+        var _a;
         if (!this.asyncUrl && !this.options)
             return;
         // Clear existing slot-based options when using async
         this.optionEls = [];
         this.allItems = [];
-        // Create option elements from async data
+        // Create option elements from async data. Grouped options are nested in an optgroup, as
+        // slotted markup would be, so grouping, filtering and labels work the same either way. Each
+        // group is listed where it first appears with all of its options, even when the data
+        // interleaves groups, so an option never renders under another group's label. Ungrouped
+        // options come first, so none reads as part of the group above it.
         const asyncOptions = this.options || this.internalOptions;
+        const groups = new Map();
+        const ungrouped = [];
+        const groupEntries = [];
         asyncOptions.forEach(opt => {
             const optionEl = document.createElement('option');
             optionEl.value = String(opt.id);
             optionEl.textContent = opt.text;
-            this.optionEls.push(optionEl);
-            this.allItems.push(optionEl);
+            if (opt.disabled === true)
+                optionEl.setAttribute('disabled', '');
+            // Only strings group an option or name an icon; anything else from JS is ignored, not coerced.
+            if (typeof opt.group !== 'string' || opt.group === '') {
+                ungrouped.push(optionEl);
+                return;
+            }
+            let optgroup = groups.get(opt.group);
+            if (!optgroup) {
+                optgroup = document.createElement('optgroup');
+                optgroup.label = opt.group;
+                groups.set(opt.group, optgroup);
+                groupEntries.push(optgroup);
+            }
+            if (!optgroup.hasAttribute('data-icon') && typeof opt.groupIcon === 'string' && opt.groupIcon !== '') {
+                optgroup.setAttribute('data-icon', opt.groupIcon);
+            }
+            optgroup.appendChild(optionEl);
+        });
+        [...ungrouped, ...groupEntries].forEach(entry => {
+            if (entry.tagName === 'OPTGROUP') {
+                this.allItems.push(entry);
+                Array.from(entry.children).forEach(child => {
+                    this.optionEls.push(child);
+                    this.allItems.push(child);
+                });
+            }
+            else {
+                this.optionEls.push(entry);
+                this.allItems.push(entry);
+            }
         });
-        // Re-apply preselection if a value is set but no option has been selected yet.
-        // This handles the case where `value` is set before async options have loaded.
-        if (this.value && !this.selectedOption) {
+        // A rebuild replaces every optgroup. Follow the open group to its new element by label, so the
+        // flyout stays open across reloads and pagination, or close it if the group is gone. The hover
+        // timers still hold the old element, so they're cleared either way. filterOptions, below,
+        // resets the highlight.
+        if (this.openGroup !== null && !groupEntries.includes(this.openGroup)) {
+            this.flyout.reset();
+            this.openGroup = (_a = groups.get(this.openGroup.label)) !== null && _a !== void 0 ? _a : null;
+        }
+        // Re-apply the selection to the rebuilt options: when `value` is set before async options have
+        // loaded, and after any rebuild, which detaches the previously selected option element.
+        if (this.value && (!this.selectedOption || !this.optionEls.includes(this.selectedOption))) {
             const matchingOption = this.optionEls.find(opt => opt.value === this.value);
             if (matchingOption) {
+                // Relinking a selection keeps the same value, so it keeps any text being typed too, which
+                // the selectedOption watcher would otherwise reset to the label.
+                const typed = this.selectedOption ? this.displayText : undefined;
                 this.setSelectedOption(matchingOption);
+                if (typed !== undefined)
+                    this.displayText = typed;
             }
         }
         this.filterOptions();
@@ -2144,11 +2752,12 @@ const PdsCombobox = class {
                 }
             }
             // 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
+            const firstEnabled = this.optionEls.find(opt => !isOptionDisabled(opt));
+            if (initialSelected === null && this.trigger === 'chip' && firstEnabled !== undefined) {
+                initialSelected = firstEnabled;
                 this.value = initialSelected.value;
                 this.displayText = this.getOptionLabel(initialSelected);
-                console.warn('PDS Combobox: Chip triggers should always have a selected option. Automatically selected the first option.');
+                console.warn('PDS Combobox: Chip triggers should always have a selected option. Automatically selected the first enabled option.');
             }
             // Update selection if we found a different selected option or if we don't have one
             if (initialSelected && initialSelected !== this.selectedOption) {
@@ -2236,16 +2845,26 @@ const PdsCombobox = class {
         }
     }
     filterOptions() {
+        // A new list replaces the rows a slide was animating, so its end event may never come.
+        this.drillDirection = null;
         // 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.expandFilterListWhileOpen) {
+        const searchesPanel = this.usesPanelSearch;
+        if ((this.mode === 'select-only' && !searchesPanel) || this.expandFilterListWhileOpen || (searchesPanel && this.panelQuery === '')) {
             this.filteredItems = [...this.allItems];
         }
         else {
-            const val = this.displayText.toLowerCase();
+            const val = (searchesPanel ? this.panelQuery : this.displayText).toLowerCase();
             const filteredOptions = this.optionEls.filter(option => {
+                // Outside inline mode a group's label is part of what search matches, so "tag" finds
+                // every option in the Tag group.
+                if (this.groupDisplay !== 'inline') {
+                    const groupLabel = groupLabelOf(option);
+                    if (groupLabel !== null && groupLabel.toLowerCase().includes(val))
+                        return true;
+                }
                 // For layout options, search both text content and data-search-text attribute
                 if (this.isOptionLayout(option)) {
                     const searchText = option.getAttribute('data-search-text') || option.textContent || '';
@@ -2280,6 +2899,7 @@ const PdsCombobox = class {
             });
         }
         this.highlightedIndex = -1;
+        this.highlightedGroup = null;
     }
     clearExpandFilterList() {
         this.expandFilterListWhileOpen = false;
@@ -2309,7 +2929,8 @@ const PdsCombobox = class {
         this.listboxEl.style.width = this.dropdownWidth;
         if (this.maxHeight) {
             this.listboxEl.style.maxHeight = this.maxHeight;
-            this.listboxEl.style.overflowY = 'auto';
+            // With panel search, the options list scrolls under a fixed search field.
+            this.listboxEl.style.overflowY = this.usesPanelSearch ? 'hidden' : 'auto';
         }
         return computePosition(this.triggerEl, this.listboxEl, {
             placement: this.dropdownPlacement,
@@ -2325,8 +2946,30 @@ const PdsCombobox = class {
                 position: strategy,
                 zIndex,
             });
+            this.checkFlyoutRoom();
         });
     }
+    /**
+     * Once per open, after the dropdown is placed: with no room for a flyout on either side of it,
+     * `flyout` drills in instead. `flyout-min-width` is resolved through CSS, so any length works.
+     */
+    checkFlyoutRoom() {
+        if (!this.isOpen || this.groupDisplay !== 'flyout' || this.flyoutRoomChecked || !this.listboxEl)
+            return;
+        this.flyoutRoomChecked = true;
+        const probe = document.createElement('div');
+        // Fixed, like the flyout, so a percentage resolves against the viewport as the flyout's does.
+        probe.style.cssText = 'position:fixed;visibility:hidden;width:0;';
+        probe.style.minWidth = this.flyoutMinWidth;
+        this.listboxEl.appendChild(probe);
+        const needed = parseFloat(getComputedStyle(probe).minWidth);
+        probe.remove();
+        const rect = this.listboxEl.getBoundingClientRect();
+        const room = Math.max(window.innerWidth - rect.right, rect.left);
+        const fallback = Number.isFinite(needed) && needed > 0 && rect.width > 0 && room < needed;
+        if (fallback !== this.flyoutFallback)
+            this.flyoutFallback = fallback;
+    }
     openDropdownPositioning() {
         if (!this.triggerEl || !this.listboxEl) {
             return;
@@ -2429,6 +3072,130 @@ const PdsCombobox = class {
             this.listboxEl = undefined;
         }
     }
+    /**
+     * The tree keys in the grouped panel. Up, Down, Home, End, PageUp and PageDown move within one
+     * level; Right, Enter or Space opens a group at its first option; Left, or Escape, closes the
+     * open group back to its row. Returns false for keys the listbox handling covers, such as
+     * Enter on an option.
+     */
+    handleGroupedPanelKey(e) {
+        if (!this.showsGroupedPanel)
+            return false;
+        this.keyboardNavigating = true;
+        // In the input trigger, Left and Right still move the caret through typed text, and Space,
+        // Home and End edit it, as they do in the panel's search field.
+        if (this.trigger === 'input') {
+            if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight') && this.displayText !== '')
+                return false;
+            if (e.key === ' ' || e.key === 'Home' || e.key === 'End')
+                return false;
+        }
+        const entries = buildPanelEntries(this.filteredItems);
+        const drilledIn = this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null;
+        const current = this.currentPanelItem();
+        const column = panelColumn(entries, this.openGroup, current, drilledIn);
+        if (column.length === 0)
+            return false;
+        const position = current === null ? -1 : column.indexOf(current);
+        const moveTo = (to) => {
+            e.preventDefault();
+            this.highlightPanelItem(column[Math.max(0, Math.min(column.length - 1, to))]);
+            return true;
+        };
+        switch (e.key) {
+            case 'ArrowDown':
+                return moveTo(position < 0 ? 0 : position + 1);
+            case 'ArrowUp':
+                return moveTo(position < 0 ? column.length - 1 : position - 1);
+            case 'Home':
+                return moveTo(0);
+            case 'End':
+                return moveTo(column.length - 1);
+            case 'PageDown':
+                return moveTo(position < 0 ? 0 : position + 10);
+            case 'PageUp':
+                return moveTo(position < 0 ? column.length - 1 : position - 10);
+            case 'ArrowRight':
+            case 'Enter':
+            case ' ': {
+                if (current === null || typeof current === 'number')
+                    return false;
+                e.preventDefault();
+                if (!drilledIn || current !== this.openGroup) {
+                    this.expandGroup(entries, current);
+                }
+                else if (e.key === 'ArrowRight') {
+                    // On the row back of a drilled-in group: down into its options.
+                    if (column.length > 1)
+                        this.highlightPanelItem(column[1]);
+                }
+                else {
+                    this.leaveDrilledInGroup();
+                }
+                return true;
+            }
+            case 'ArrowLeft':
+            case 'Escape': {
+                // Escape with no group open closes the panel, through the listbox handling.
+                if (this.openGroup === null)
+                    return false;
+                e.preventDefault();
+                this.collapseToGroup(this.openGroup);
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Where the keyboard is in the grouped panel. An option highlighted in a group that has since
+     * closed (the pointer left its flyout) counts as its group's row, so the keys carry on from
+     * what's showing rather than from an option that isn't.
+     */
+    currentPanelItem() {
+        if (this.highlightedIndex < 0)
+            return this.highlightedGroup;
+        const selectable = this.filteredItems.filter(item => item.tagName === 'OPTION');
+        const group = parentOptgroupOf(selectable[this.highlightedIndex]);
+        return group !== null && group !== this.openGroup ? group : this.highlightedIndex;
+    }
+    /**
+     * Highlights the option at `index`, kept within the list. Disabled options can be highlighted,
+     * so assistive tech announces them as unavailable, but not chosen.
+     */
+    highlightOptionAt(options, index) {
+        if (options.length === 0)
+            return;
+        this.highlightedIndex = Math.max(0, Math.min(options.length - 1, index));
+        this.updateOptionFocus();
+    }
+    /** Highlights a group row or an option, opening or closing flyouts to match. */
+    highlightPanelItem(item) {
+        if (typeof item === 'number') {
+            this.highlightedIndex = item;
+        }
+        else {
+            this.highlightedIndex = -1;
+            this.highlightedGroup = item;
+        }
+        this.updateOptionFocus();
+    }
+    expandGroup(entries, optgroup) {
+        var _a;
+        this.flyout.open(optgroup);
+        const first = (_a = findGroup(entries, optgroup)) === null || _a === void 0 ? void 0 : _a.options[0];
+        if (first !== undefined)
+            this.highlightPanelItem(first.index);
+        // Its options render after this change; scroll to the first one then.
+        this.pendingOptionFocus = true;
+    }
+    /** Closes the open group and highlights its row, as a tree's Left does from a child. */
+    collapseToGroup(optgroup) {
+        this.flyout.reset();
+        this.openGroup = null;
+        this.highlightPanelItem(optgroup);
+        // The row renders after this change (in drill-in it replaces the row back); scroll to it then.
+        this.pendingOptionFocus = true;
+    }
     /**
      * Sets focus on the native input element.
      */
@@ -2442,8 +3209,9 @@ const PdsCombobox = class {
         }
     }
     /**
-     * Sets the initial highlighted index when dropdown opens.
-     * If there's a selected option, highlight it. Otherwise, highlight the first option.
+     * Sets the initial highlighted index when dropdown opens. Highlights the selected option unless
+     * it's disabled. Otherwise highlights the first enabled option, or, in the grouped panel, the
+     * first row with something to choose, or nothing when every option is disabled.
      */
     setInitialHighlightedIndex() {
         const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
@@ -2451,16 +3219,33 @@ const PdsCombobox = class {
             this.highlightedIndex = -1;
             return;
         }
-        // If there's a selected option, find its index in the filtered options
-        if (this.selectedOption) {
+        // If there's a selected option, find its index in the filtered options. A disabled one can be
+        // the value, as in a native select, but it isn't highlighted.
+        if (this.selectedOption && !isOptionDisabled(this.selectedOption)) {
             const selectedIndex = selectableOptions.findIndex(option => option === this.selectedOption);
             if (selectedIndex >= 0) {
                 this.highlightedIndex = selectedIndex;
+                // In the grouped panel, open on the selection's group, however the dropdown was opened, and
+                // scroll the selection into view once its group has rendered.
+                if (this.showsGroupedPanel) {
+                    this.openGroup = parentOptgroupOf(this.selectedOption);
+                    // Opening on the selection isn't drilling in, so it doesn't slide.
+                    this.drillDirection = null;
+                    this.pendingOptionFocus = true;
+                }
                 return;
             }
         }
-        // No selected option or selected option not in filtered results, highlight first option
-        this.highlightedIndex = 0;
+        // In the grouped panel, the first row with something to choose: a group stays closed until
+        // it's opened.
+        if (this.showsGroupedPanel) {
+            const first = buildPanelEntries(this.filteredItems).find(entry => entry.kind === 'group' ? !isGroupDisabled(entry.group) : !isOptionDisabled(entry.option));
+            this.highlightedIndex = (first === null || first === void 0 ? void 0 : first.kind) === 'option' ? first.index : -1;
+            this.highlightedGroup = (first === null || first === void 0 ? void 0 : first.kind) === 'group' ? first.group.optgroup : null;
+            return;
+        }
+        // No selected option or selected option not in filtered results, highlight the first enabled option
+        this.highlightedIndex = selectableOptions.findIndex(option => !isOptionDisabled(option));
     }
     /**
      * Focus management helper - moves focus to the first option when dropdown opens
@@ -2496,19 +3281,9 @@ const PdsCombobox = class {
         const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
         if (selectableOptions.length > 0) {
             this.setInitialHighlightedIndex();
-            if (this.listboxEl) {
-                const optionElements = this.listboxEl.querySelectorAll('[role="option"]');
-                const highlightedOption = optionElements[this.highlightedIndex];
-                if (highlightedOption) {
-                    optionElements.forEach(option => {
-                        option.setAttribute('tabindex', '-1');
-                    });
-                    highlightedOption.setAttribute('tabindex', '0');
-                    highlightedOption.focus();
-                    highlightedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-                }
-            }
-            this.updateAriaActiveDescendant();
+            // By index, through the same path as arrowing: it opens the option's flyout group first
+            // when it isn't rendered, and highlights it once it is.
+            this.updateOptionFocus();
         }
     }
     /**
@@ -2516,14 +3291,58 @@ const PdsCombobox = class {
      * Note: We don't actually focus the option to prevent focusout events that close the dropdown
      */
     updateOptionFocus() {
-        if (!this.listboxEl || this.highlightedIndex < 0)
+        var _a;
+        if (this.listboxEl === undefined || this.listboxEl === null)
+            return;
+        // A row highlighted outright; an option highlighted in a closed group opens it below instead.
+        const groupRow = this.showsGroupedPanel && this.highlightedIndex < 0 ? this.highlightedGroup : null;
+        if (groupRow !== null) {
+            // Arrowing onto another row closes a flyout that hover left open.
+            if (this.effectiveGroupDisplay === 'flyout' && this.openGroup !== null && this.openGroup !== groupRow) {
+                this.flyout.reset();
+                this.openGroup = null;
+            }
+            // Matched by id, not a selector: componentId is consumer text and may not be selector-safe.
+            const id = this.groupDomId(groupRow);
+            (_a = Array.from(this.listboxEl.querySelectorAll('[role="treeitem"]'))
+                .find(row => row.id === id)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest' });
+            this.updateAriaActiveDescendant();
             return;
+        }
+        if (this.highlightedIndex < 0)
+            return;
+        // In the flyout panel only the open group's options are rendered: open the highlighted
+        // option's group, and finish once it has rendered. Through the controller, so a hover timer
+        // left running by the pointer can't close or switch the group the keys just moved into.
+        if (this.showsGroupedPanel) {
+            const selectable = this.filteredItems.filter(item => item.tagName === 'OPTION');
+            const group = parentOptgroupOf(selectable[this.highlightedIndex]);
+            const changed = group !== this.openGroup;
+            if (group !== null) {
+                this.flyout.open(group);
+            }
+            else {
+                this.flyout.reset();
+                this.openGroup = null;
+            }
+            if (changed) {
+                this.pendingOptionFocus = true;
+                return;
+            }
+        }
         const optionElements = this.listboxEl.querySelectorAll('[role="option"]');
-        const currentOption = optionElements[this.highlightedIndex];
+        // By index, not position: the flyout panel renders only some options.
+        const currentOption = this.listboxEl.querySelector(`[data-option-index="${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);
-            const shouldFocusOption = !this.usesBodyPortal && (hasOptionFocus || this.isArrowKeyNavigationMode);
+            // The panel's search field keeps focus and points at the option with aria-activedescendant,
+            // and so does the trigger over the grouped panel, whose group rows can't take focus and
+            // whose options are hidden while a flyout is placed.
+            const shouldFocusOption = !this.usesBodyPortal &&
+                !this.usesPanelSearch &&
+                !this.showsGroupedPanel &&
+                (hasOptionFocus || this.isArrowKeyNavigationMode);
             if (shouldFocusOption) {
                 optionElements.forEach(option => {
                     option.setAttribute('tabindex', '-1');
@@ -2531,21 +3350,64 @@ const PdsCombobox = class {
                 currentOption.setAttribute('tabindex', '0');
                 currentOption.focus();
             }
-            // Always scroll the option into view
-            currentOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            // Always scroll the option into view; in a flyout, by scrolling the flyout alone.
+            const flyout = currentOption.closest('.pds-combobox__flyout');
+            if (flyout) {
+                this.flyout.reveal(flyout, currentOption);
+            }
+            else {
+                currentOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
         }
         // Always update aria-activedescendant on the trigger element
         this.updateAriaActiveDescendant();
     }
+    /** The highlighted group row in the grouped panel, or null while an option is highlighted. */
+    get highlightedGroupRow() {
+        if (!this.showsGroupedPanel)
+            return null;
+        if (this.highlightedIndex < 0)
+            return this.highlightedGroup;
+        // An option left highlighted in a flyout that has since closed shows as its group's row.
+        const current = this.currentPanelItem();
+        return typeof current === 'number' ? null : current;
+    }
     /**
-     * Updates aria-activedescendant on the trigger element
+     * The id of the highlighted option or group row, only while it's rendered. In the flyout panel
+     * an option in a closed group isn't in the DOM, and drilled into a group the other groups' rows
+     * aren't; `aria-activedescendant` must not point at a missing element.
      */
+    get activeDescendantId() {
+        if (!this.isOpen)
+            return undefined;
+        const groupRow = this.highlightedGroupRow;
+        if (groupRow !== null) {
+            const drilledIntoAnother = this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null && this.openGroup !== groupRow;
+            return drilledIntoAnother ? undefined : this.groupDomId(groupRow);
+        }
+        if (this.highlightedIndex < 0)
+            return undefined;
+        if (this.showsGroupedPanel) {
+            const selectable = this.filteredItems.filter(item => item.tagName === 'OPTION');
+            const group = parentOptgroupOf(selectable[this.highlightedIndex]);
+            if (group !== null && group !== this.openGroup)
+                return undefined;
+        }
+        return this.optionDomId(this.highlightedIndex);
+    }
+    /** Points the focused element's aria-activedescendant at the highlighted option, or clears it. */
     updateAriaActiveDescendant() {
-        if (this.triggerEl && this.highlightedIndex >= 0) {
-            this.triggerEl.setAttribute('aria-activedescendant', this.optionDomId(this.highlightedIndex));
+        // With panel search, the element with focus owns it, not the trigger: the search field, or
+        // the list while a drilled-in group hides the field.
+        const target = this.usesPanelSearch ? (this.hidesPanelSearch ? this.panelTreeEl : this.panelSearchEl) : this.triggerEl;
+        if (!target)
+            return;
+        const id = this.activeDescendantId;
+        if (id !== undefined) {
+            target.setAttribute('aria-activedescendant', id);
         }
-        else if (this.triggerEl) {
-            this.triggerEl.removeAttribute('aria-activedescendant');
+        else {
+            target.removeAttribute('aria-activedescendant');
         }
     }
     /**
@@ -2581,6 +3443,17 @@ const PdsCombobox = class {
             this.pdsComboboxChange.emit({ value: '' });
         }
     }
+    // Group rows in the flyout panel carry their group's index, as options carry theirs.
+    groupFromEvent(event) {
+        var _a, _b;
+        const index = Number(event.currentTarget.getAttribute('data-group-index'));
+        return (_b = (_a = this.renderedGroups[index]) === null || _a === void 0 ? void 0 : _a.optgroup) !== null && _b !== void 0 ? _b : null;
+    }
+    highlightGroupRowByPointer(group) {
+        this.highlightedIndex = -1;
+        this.highlightedGroup = group;
+        this.keyboardNavigating = false;
+    }
     // Get the label of the selected option
     get selectedLabel() {
         return this.displayText || '';
@@ -2693,7 +3566,24 @@ const PdsCombobox = class {
         // Fallback: Use component props
         return this.chipDot;
     }
+    /**
+     * With `async-url`, fetches when the button trigger opens: the first page if nothing has loaded.
+     * The panel's search field opens empty, so results left from the last search are refetched for
+     * an empty query.
+     */
+    fetchAsyncOptionsOnOpen() {
+        if (!this.asyncUrl)
+            return;
+        if (this.usesPanelSearch && (this.internalOptions.length === 0 || this.lastFetchedQuery !== '')) {
+            this.debouncedFetchAsyncOptions('', 1);
+        }
+        else if (this.internalOptions.length === 0) {
+            this.debouncedFetchAsyncOptions(this.displayText, 1);
+        }
+    }
     handleOptionClick(option) {
+        if (isOptionDisabled(option))
+            return;
         // Update reactive state - single source of truth
         // The @Watch('selectedOption') will handle displayText, value, and form internals
         this.setSelectedOption(option);
@@ -2707,33 +3597,242 @@ const PdsCombobox = class {
         }
         const hasSlottedEmpty = !this.usesBodyPortal && !!this.el.querySelector('[slot="empty"]');
         const hasSlottedLoading = !this.usesBodyPortal && !!this.el.querySelector('[slot="loading"]');
-        let optionIndex = 0;
         const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
-        return (h("ul", { class: "pds-combobox__listbox", role: "listbox", id: this.listboxId, "aria-label": this.label || 'Options', "aria-multiselectable": "false", ref: el => (this.listboxEl = el), onScroll: this.handleScroll }, this.loading && (h("li", { class: "pds-combobox__loading", role: "presentation" }, hasSlottedLoading ? (h("slot", { name: "loading" })) : (h("pds-loader", { size: "small" })))), !this.loading && this.filteredItems.length === 0 && (h("li", { class: "pds-combobox__empty", role: "presentation" }, hasSlottedEmpty ? (h("slot", { name: "empty" })) : (h("span", null, "No options found")))), this.filteredItems.map((item, itemIdx) => {
+        const withSearch = this.usesPanelSearch;
+        // While a drilled-in group hides the search field, the list takes focus in its place.
+        const listTakesFocus = this.hidesPanelSearch;
+        const list = (h("ul", { key: "panel-list", class: {
+                'pds-combobox__listbox': !withSearch,
+                'pds-combobox__listbox-options': withSearch,
+                'pds-combobox__listbox-options--drilled-in': listTakesFocus,
+                'pds-combobox__listbox--grouped': this.groupDisplay !== 'inline',
+                'pds-combobox__listbox--drill-in': this.drillDirection === 'in',
+                'pds-combobox__listbox--drill-out': this.drillDirection === 'out',
+            }, onAnimationEnd: this.onDrillAnimationEnd, role: this.showsGroupedPanel ? 'tree' : 'listbox', id: this.listboxId, "aria-label": this.label || 'Options', "aria-multiselectable": "false",
+            // Focusable but out of the tab order with panel search, so it can take focus when a
+            // drilled-in group hides the field. Dropping it while focused would blur the list and close.
+            tabIndex: withSearch ? -1 : undefined, "aria-activedescendant": listTakesFocus ? this.activeDescendantId : undefined, onKeyDown: withSearch ? this.onPanelTreeKeyDown : undefined, ref: el => {
+                if (withSearch)
+                    this.panelTreeEl = el;
+                else
+                    this.listboxEl = el;
+            }, onScroll: this.handleScroll }, this.loading && (h("li", { class: "pds-combobox__loading", role: "presentation" }, hasSlottedLoading ? (h("slot", { name: "loading" })) : (h("pds-loader", { size: "small" })))), !this.loading && this.filteredItems.length === 0 && (h("li", { class: "pds-combobox__empty", role: "presentation" }, hasSlottedEmpty ? (h("slot", { name: "empty" })) : (h("span", null, "No options found")))), this.showsGroupedPanel ? this.renderGroupedPanel() : this.renderListboxItems(selectableOptions.length), this.hasMore && !this.loading && (h("li", { class: "pds-combobox__load-more", role: "presentation" }, h("pds-loader", { size: "small" })))));
+        if (!withSearch)
+            return list;
+        // The search field sits above the list; the wrapper is what's positioned and portaled.
+        return (h("div", { class: "pds-combobox__listbox pds-combobox__listbox--with-search", ref: el => (this.listboxEl = el), onMouseDown: this.onPanelMouseDown,
+            // Portaled, the panel sits outside .pds-combobox, so its focusout wouldn't reach that handler.
+            onFocusout: this.usesBodyPortal ? this.onComboboxFocusOut : undefined }, !listTakesFocus && this.renderPanelSearch(), list));
+    }
+    /**
+     * The listbox's items. Each optgroup's options sit in a `group` named for it, as in
+     * `pds-multiselect`, so assistive tech announces the group on entering it; a `pds-text` label
+     * stays a caption above the options that follow it.
+     */
+    renderListboxItems(setSize) {
+        const rendered = [];
+        let optionIndex = 0;
+        let group = null;
+        const closeGroup = () => {
+            if (group === null)
+                return;
+            const { optgroup, key, options, members } = group;
+            const groupIcon = groupIconOf(optgroup);
+            // As in the grouped displays: disabled when there's nothing left in it to choose.
+            const disabled = members.length > 0 && members.every(member => isOptionDisabled(member));
+            rendered.push(h("li", { key: key, class: { 'pds-combobox__group': true, 'pds-combobox__group--disabled': disabled }, role: "group", "aria-label": optgroup.label, "aria-disabled": disabled ? 'true' : undefined }, h("div", { class: { 'pds-combobox__group-label': true, 'pds-combobox__group-label--with-icon': groupIcon !== null }, "aria-hidden": "true" }, groupIcon !== null && (
+            // `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
+            h("pds-icon", { name: groupIcon, size: "small", "aria-hidden": "true", class: "pds-combobox__group-icon" })), optgroup.label), h("ul", { class: "pds-combobox__group-list", role: "presentation" }, options)));
+            group = null;
+        };
+        this.filteredItems.forEach((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));
+                closeGroup();
+                group = { optgroup: item, key: `optgroup-${itemIdx}`, options: [], members: [] };
             }
             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));
+                closeGroup();
+                rendered.push(h("li", { key: `pds-text-${itemIdx}`, class: "pds-combobox__group-label", role: "presentation" }, item.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: this.optionDomId(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: this.usesBodyPortal ? '-1' : 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" })));
+                if (group !== null && parentOptgroupOf(option) !== group.optgroup)
+                    closeGroup();
+                const rendering = this.renderOption(option, optionIndex, { posinset: optionIndex + 1, setsize: setSize });
+                optionIndex++;
+                if (group !== null) {
+                    group.options.push(rendering);
+                    group.members.push(option);
+                }
+                else {
+                    rendered.push(rendering);
+                }
             }
-            return null;
-        }), this.hasMore && !this.loading && (h("li", { class: "pds-combobox__load-more", role: "presentation" }, h("pds-loader", { size: "small" })))));
+        });
+        closeGroup();
+        return rendered;
+    }
+    /** `panelSearch` applies to the triggers that can't be typed into. */
+    get usesPanelSearch() {
+        return this.panelSearch && this.trigger !== 'input';
+    }
+    /** `groupDisplay`, with `flyout` drilling in when there's no room beside the dropdown. */
+    get effectiveGroupDisplay() {
+        return this.groupDisplay === 'flyout' && this.flyoutFallback ? 'drill-in' : this.groupDisplay;
+    }
+    /**
+     * The popup's role, for the triggers' `aria-haspopup`: a `tree` while the grouped panel shows
+     * groups, and a `listbox` of options otherwise, search results included.
+     */
+    get popupRole() {
+        return this.showsGroupedPanel ? 'tree' : 'listbox';
+    }
+    /**
+     * The input trigger's `aria-haspopup`. While closed it names what opening shows: the full list,
+     * so the grouped panel in a grouped display, even though the input still holds the selection's
+     * label.
+     */
+    get inputPopupRole() {
+        if (this.isOpen)
+            return this.popupRole;
+        return this.effectiveGroupDisplay === 'inline' ? 'listbox' : 'tree';
+    }
+    /**
+     * The button and chip triggers' `aria-haspopup`. With panel search the trigger opens the panel,
+     * which starts as a tree in a grouped display, so typing in the panel doesn't change it.
+     */
+    get triggerPopupRole() {
+        if (!this.usesPanelSearch)
+            return this.popupRole;
+        return this.groupDisplay === 'inline' ? 'listbox' : 'tree';
+    }
+    /**
+     * Drilled into a group with panel search: the group's row back takes the search field's place,
+     * since one group's options don't need searching. Typing searches the whole list again.
+     */
+    get hidesPanelSearch() {
+        return this.usesPanelSearch && this.showsGroupedPanel && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null;
+    }
+    /** The grouped panel is showing groups rather than search results. */
+    get showsGroupedPanel() {
+        if (this.effectiveGroupDisplay === 'inline')
+            return false;
+        const searching = this.usesPanelSearch
+            ? this.panelQuery !== ''
+            : this.mode === 'filter' && !this.expandFilterListWhileOpen && this.displayText !== '';
+        return !searching;
+    }
+    setPanelQuery(query) {
+        this.panelQuery = query;
+        this.clearExpandFilterList();
+        this.filterOptions();
+        this.pdsComboboxSearch.emit({ query: this.panelQuery });
+        if (this.asyncUrl !== undefined && this.asyncUrl !== '') {
+            this.debouncedFetchAsyncOptions(this.panelQuery, 1);
+        }
+        // The list changes size, so place the dropdown again, as typing in the input trigger does.
+        setTimeout(() => this.openDropdownPositioning(), 0);
+    }
+    /** What's being searched: the panel's field, or the input trigger's text. */
+    get activeQuery() {
+        return this.usesPanelSearch ? this.panelQuery : this.displayText;
+    }
+    // Tab closes the dropdown and lands on the trigger, as Escape does: the focused field or list is
+    // about to unmount, so the browser can't tab on from it. The next Tab continues from the trigger.
+    handlePanelTab(event) {
+        if (event.key !== 'Tab')
+            return false;
+        event.preventDefault();
+        this.handleKeyDown(event);
+        this.restoreFocusToTrigger();
+        return true;
+    }
+    /** Returns from a drilled-in group to the group list; false when not drilled in. */
+    leaveDrilledInGroup() {
+        if (!this.showsGroupedPanel || this.effectiveGroupDisplay !== 'drill-in' || this.openGroup === null)
+            return false;
+        this.collapseToGroup(this.openGroup);
+        return true;
+    }
+    renderPanelSearch() {
+        return (h("div", { key: "panel-search", class: "pds-combobox__panel-search" }, h("pds-icon", { name: "search", size: "small", "aria-hidden": "true" }), h("input", { ref: el => (this.panelSearchEl = el), type: "text", class: "pds-combobox__panel-search-input", placeholder: this.searchPlaceholder, value: this.panelQuery, role: "combobox", "aria-label": this.searchOptionsLabel, "aria-haspopup": this.popupRole, "aria-controls": this.listboxId, "aria-autocomplete": "list", "aria-expanded": "true", "aria-activedescendant": this.activeDescendantId, autocomplete: "off", onInput: this.onPanelSearchInput, onKeyDown: this.onPanelSearchKeyDown })));
+    }
+    /**
+     * An option, as a listbox `option` or, given a tree `level`, a `treeitem`. `posinset` and
+     * `setsize` place it among its siblings.
+     */
+    renderOption(option, index, { posinset, setsize, level }) {
+        const isSelected = this.isOptionSelected(option);
+        const isHighlighted = this.highlightedIndex === index;
+        const isLayout = this.isOptionLayout(option);
+        const isChip = this.isOptionChip(option);
+        const isDisabled = isOptionDisabled(option);
+        const tree = level !== undefined;
+        return (h("li", { key: option.value, id: this.optionDomId(index), role: tree ? 'treeitem' : 'option', "aria-selected": isSelected ? 'true' : tree ? undefined : 'false', "aria-disabled": isDisabled ? 'true' : undefined, "aria-level": level, "aria-setsize": setsize, "aria-posinset": posinset, "aria-label": isLayout || isChip ? option.getAttribute('aria-label') || this.getOptionLabel(option) : undefined, tabindex: this.usesBodyPortal || this.usesPanelSearch || tree ? '-1' : isHighlighted ? '0' : '-1', class: {
+                'pds-combobox__option': true,
+                'pds-combobox__option--highlighted': isHighlighted,
+                'pds-combobox__option--layout': isLayout,
+                'pds-combobox__option--chip': isChip,
+                'pds-combobox__option--disabled': isDisabled,
+            }, "data-option-index": index, 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" })));
+    }
+    /**
+     * `flyout`: one row per group, its options in a flyout beside it. `drill-in`: the same rows, and
+     * an opened group replaces them with its row, drawn as a row back, above its options. Either way
+     * it's a tree: the rows and ungrouped options are level 1, a group's options level 2.
+     */
+    renderGroupedPanel() {
+        const entries = buildPanelEntries(this.filteredItems);
+        const setsize = entries.length;
+        if (this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null) {
+            const position = entries.findIndex(entry => entry.kind === 'group' && entry.group.optgroup === this.openGroup);
+            const open = entries[position];
+            if ((open === null || open === void 0 ? void 0 : open.kind) === 'group')
+                return this.renderGroupBackRow(open.group, { posinset: position + 1, setsize });
+        }
+        this.renderedGroups = [];
+        return entries.map((entry, position) => {
+            const placement = { posinset: position + 1, setsize };
+            if (entry.kind === 'option')
+                return this.renderOption(entry.option, entry.index, Object.assign(Object.assign({}, placement), { level: 1 }));
+            this.renderedGroups.push(entry.group);
+            return this.renderGroupRow(entry.group, this.renderedGroups.length - 1, placement);
+        });
+    }
+    /** A group's options, as its children in the tree. */
+    renderGroupOptions(group) {
+        return group.options.map(({ option, index }, position) => this.renderOption(option, index, { posinset: position + 1, setsize: group.options.length, level: 2 }));
+    }
+    /**
+     * Drilled into a group: its treeitem, expanded. Its row reads as a way back ("Back: Tag") and
+     * leads its options.
+     */
+    renderGroupBackRow(group, { posinset, setsize }) {
+        const id = this.groupDomId(group.optgroup);
+        const disabled = isGroupDisabled(group);
+        return (h("li", { key: "group-back", id: id, class: {
+                'pds-combobox__group-back': true,
+                'pds-combobox__group-back--disabled': disabled,
+                'pds-combobox__group-back--highlighted': this.highlightedGroupRow === group.optgroup,
+                'pds-combobox__group-back--keyboard': this.keyboardNavigating && this.highlightedGroupRow === group.optgroup,
+            }, role: "treeitem", "aria-expanded": "true", "aria-disabled": disabled ? 'true' : undefined, "aria-level": 1, "aria-posinset": posinset, "aria-setsize": setsize, "aria-labelledby": `${id}-label` }, h("div", { class: "pds-combobox__group-row-trigger pds-combobox__group-back-trigger", onMouseDown: this.onOptionMouseDown, onMouseEnter: this.onGroupBackMouseEnter, onClick: this.onGroupBackClick }, h("span", { class: "pds-combobox__group-row-label", id: `${id}-label` }, h("pds-icon", { name: "caret-left", size: "regular", "aria-hidden": "true", class: "pds-combobox__group-row-caret" }), h("span", { class: "visually-hidden" }, this.drillInBackLabel, ": "), group.label)), h("ul", { class: "pds-combobox__drill-in-options", role: "group", "aria-label": group.label }, this.renderGroupOptions(group))));
+    }
+    renderGroupRow(group, groupIndex, { posinset, setsize }) {
+        const flyout = this.effectiveGroupDisplay === 'flyout';
+        const isOpen = flyout && this.openGroup === group.optgroup;
+        const hasSelection = group.options.some(({ option }) => this.isOptionSelected(option));
+        const disabled = isGroupDisabled(group);
+        const id = this.groupDomId(group.optgroup);
+        return (h("li", { key: `group-${groupIndex}`, id: id, class: {
+                'pds-combobox__group-row': true,
+                'pds-combobox__group-row--open': isOpen,
+                'pds-combobox__group-row--has-selection': hasSelection,
+                'pds-combobox__group-row--highlighted': this.highlightedGroupRow === group.optgroup,
+                'pds-combobox__group-row--keyboard': this.keyboardNavigating && this.highlightedGroupRow === group.optgroup,
+                'pds-combobox__group-row--disabled': disabled,
+            }, role: "treeitem", "aria-expanded": isOpen ? 'true' : 'false', "aria-disabled": disabled ? 'true' : undefined, "aria-level": 1, "aria-posinset": posinset, "aria-setsize": setsize, "aria-labelledby": `${id}-label`, "data-group-index": groupIndex, onMouseEnter: flyout ? this.onGroupRowMouseEnter : undefined, onMouseLeave: flyout ? this.onGroupRowMouseLeave : undefined }, h("div", { class: "pds-combobox__group-row-trigger", "data-group-index": groupIndex, onMouseDown: this.onOptionMouseDown, onMouseEnter: this.onGroupRowTriggerMouseEnter, onClick: this.onGroupRowClick }, h("span", { class: "pds-combobox__group-row-label", id: `${id}-label` }, group.icon !== null && (
+        // `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
+        h("pds-icon", { name: group.icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__group-icon" })), group.label), h("pds-icon", { name: "caret-right", size: "regular", "aria-hidden": "true", class: "pds-combobox__group-row-caret" })), isOpen && (h("ul", { class: "pds-combobox__flyout", role: "group", "aria-label": group.label, style: { minWidth: this.flyoutMinWidth, maxWidth: this.flyoutMaxWidth } }, this.renderGroupOptions(group)))));
     }
     // Helper method to render the caret icon
     renderCaretIcon() {
@@ -2870,17 +3969,26 @@ const PdsCombobox = class {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h(Host, { key: 'a39df3c86a29028344943bd3a2828d5e99106d77', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '32cdb8ce31f9d7c9eac8f995cd233fe6f4d9dfc3', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && !this.hideLabel && (h("label", { key: '64ed7fe37082e2f895daae0090ae3dfac472e3c3', htmlFor: this.componentId, class: "pds-combobox__label" }, this.label)), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
+        return (h(Host, { key: 'd709320411c4d1706133376ea716756c3e1c1471', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '455a02fa764524c95fe0bbfd024eba7134b3ac34', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (h("label", { key: '0d243157491934d823156841e97bfd369e12c2d5', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, 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': true,
                 'pds-combobox__input--invalid': this.isInvalid(),
-            }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? this.optionDomId(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": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? this.optionDomId(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": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? this.optionDomId(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())), this.renderMessages(), h("div", { key: '48041c41a39987f2f4093bd048d6c495ea69514b', style: { display: 'none' } }, h("slot", { key: '5f4d95fefbd3dbdb33ecb25af593c9429df0e10b', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
+            }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), 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: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), h("div", { key: 'fd1eb34561f56df05e2f44c7acecde0e56b5e714', style: { display: 'none' } }, h("slot", { key: '68e11626a00175d0926c54086ae815be157e6bf0', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && (h("span", { key: '6f3c60c3400d411abbed08ddc6e596db097bb097', class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : '')))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "groupDisplay": [{
+                "groupDisplayChanged": 0
+            }],
+        "openGroup": [{
+                "openGroupChanged": 0
+            }],
+        "flyoutFallback": [{
+                "flyoutFallbackChanged": 0
+            }],
         "isOpen": [{
                 "isOpenChanged": 0
             }],