@pine-ds/core 4.5.0 → 4.7.0

package/dist/collection/components/pds-combobox/pds-combobox.js

@@ -4,7 +4,7 @@ import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/d
 import { cancelDebouncedEvent, debounceEvent, flushDebouncedEvent } from "../../utils/utils";
 import { closest } from "../../utils/closest";
 import DOMPurify from "dompurify";
-import { FlyoutController, buildPanelEntries, findGroup, groupIconOf, groupLabelOf, isGroupDisabled, isOptionDisabled, panelColumn, parentOptgroupOf, } from "./grouped-options-panel";
+import { FlyoutController, buildPanelEntries, findGroup, groupIconOf, groupLabelOf, isGroupDisabled, isOptionDisabled, optionIconOf, panelColumn, parentOptgroupOf, } from "./grouped-options-panel";
 /**
  * @slot option - Option elements for the combobox dropdown
  * @slot trigger-content - Custom content for the button trigger when customTriggerContent is true
@@ -207,6 +207,17 @@ export class PdsCombobox {
         this.highlightedGroup = null;
         /** The keys, not the pointer, moved the highlight last; the focus ring shows only then. */
         this.keyboardNavigating = false;
+        /**
+         * A drill-in group row the first arrow showed rather than moved past. `aria-activedescendant`
+         * already pointed at it, so the status region says it instead.
+         */
+        this.revealedGroupLabel = null;
+        /**
+         * The pointer in the panel can hover: a mouse or pen, not touch. Touch browsers keep a tapped row
+         * hovered, so group rows shade on `:hover` only for a pointer that can hover. Checked on the
+         * pointer itself rather than `(hover: hover)`, which a touch-first device with a trackpad fails.
+         */
+        this.pointerCanHover = true;
         /**
          * What's typed in the dropdown's own search field (`panelSearch`).
          */
@@ -251,6 +262,11 @@ export class PdsCombobox {
         });
         /** The groups in the flyout panel's last render, so a row's index finds its optgroup. */
         this.renderedGroups = [];
+        /**
+         * Where each ungrouped option and optgroup built from the `options` prop came in the data, so
+         * the flyout and drill-in panels draw them in that order. Slotted markup is already in order.
+         */
+        this.panelPositions = new WeakMap();
         /** 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. */
@@ -264,10 +280,14 @@ export class PdsCombobox {
          * the list shows every option until the user types (then normal filtering applies).
          */
         this.expandFilterListWhileOpen = false;
+        this.onPanelPointer = (event) => {
+            const canHover = event.pointerType !== 'touch';
+            if (this.pointerCanHover !== canHover)
+                this.pointerCanHover = canHover;
+        };
         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'))
+            if (event.animationName === '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. */
@@ -467,6 +487,9 @@ export class PdsCombobox {
         };
         // Handler for button trigger click
         this.onButtonTriggerClick = () => {
+            // The button and chip triggers are divs, so a click reaches them even while disabled.
+            if (this.disabled)
+                return;
             this.isOpen = !this.isOpen;
             if (this.isOpen) {
                 this.prepareExpandFilterListOnOpen();
@@ -486,6 +509,13 @@ export class PdsCombobox {
         };
         // Handler for button trigger keyboard events
         this.onButtonTriggerKeyDown = (e) => {
+            // Disabled takes it out of the tab order, but setFocus() or a click can still focus it.
+            if (this.disabled) {
+                // Keep Space from scrolling the page, as on a native disabled button.
+                if (e.key === ' ')
+                    e.preventDefault();
+                return;
+            }
             // 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;
@@ -506,8 +536,9 @@ export class PdsCombobox {
                 }, 0);
             }
             else if (e.key === 'Escape') {
-                e.preventDefault();
+                // Only an open dropdown claims Escape; a closed one leaves it to a modal or popover around it.
                 if (this.isOpen) {
+                    e.preventDefault();
                     this.isOpen = false;
                     this.highlightedIndex = -1;
                     this.clearExpandFilterList();
@@ -686,6 +717,31 @@ export class PdsCombobox {
             this.focusPanel(panelFocusEl);
         }
     }
+    /**
+     * Scrolls just enough to show `el`, as `scrollIntoView({ block: 'nearest' })` does. In the drill-in
+     * panel it scrolls the list alone, and never sideways: while a drill-in slide offsets a row past
+     * the list's edge, `scrollIntoView` also scrolls the list horizontally to reach it, which eats most
+     * of the slide. There it keeps clear of the sticky row back, through the scroll padding set for it,
+     * but doesn't scroll the page or a scrolling ancestor.
+     */
+    scrollIntoViewNearest(el, smooth) {
+        const behavior = smooth ? 'smooth' : 'auto';
+        if (!this.showsGroupedPanel || this.effectiveGroupDisplay !== 'drill-in') {
+            el.scrollIntoView({ block: 'nearest', behavior });
+            return;
+        }
+        const list = this.usesPanelSearch ? this.panelTreeEl : this.listboxEl;
+        if (!list)
+            return;
+        const offset = el.getBoundingClientRect().top - list.getBoundingClientRect().top - list.clientTop;
+        // The padding keeps rows clear of the sticky row back; the row back itself doesn't need it.
+        const padding = el.classList.contains('pds-combobox__group-back-trigger') ? 0 : parseFloat(list.style.scrollPaddingBlockStart) || 0;
+        const top = list.scrollTop + offset - padding;
+        const bottom = list.scrollTop + offset + el.offsetHeight - list.clientHeight;
+        const target = top < list.scrollTop ? top : bottom > list.scrollTop ? bottom : null;
+        if (target !== null)
+            list.scrollTo({ top: target, behavior });
+    }
     focusPanel(el) {
         var _a, _b;
         this.panelFocusEl = el;
@@ -706,6 +762,7 @@ export class PdsCombobox {
     }
     openGroupChanged(next, previous) {
         this.handPanelFocusToList();
+        this.revealedGroupLabel = null;
         // Only moves between the drill-in panel's views slide; search results don't.
         if (!this.isOpen || this.effectiveGroupDisplay !== 'drill-in' || !this.showsGroupedPanel)
             return;
@@ -726,8 +783,25 @@ export class PdsCombobox {
         if (this.isOpen && this.hidesPanelSearch && this.panelTreeEl)
             this.focusPanel(this.panelTreeEl);
     }
+    disabledChanged(disabled) {
+        var _a, _b, _c, _d, _e;
+        if (!disabled || !this.isOpen)
+            return;
+        const shadowActive = (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) !== null && _b !== void 0 ? _b : null;
+        const focusInDropdown = !!((_d = (_c = this.portalEl) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.activeElement) || (!!shadowActive && !!((_e = this.listboxEl) === null || _e === void 0 ? void 0 : _e.contains(shadowActive)));
+        this.isOpen = false;
+        this.highlightedIndex = -1;
+        this.isArrowKeyNavigationMode = false;
+        this.clearExpandFilterList();
+        this.updateAriaActiveDescendant();
+        // Closing removes the search field or option that held focus. A button or chip trigger can still
+        // take it (aria-disabled), so focus doesn't fall to the page; a disabled input can't, as natively.
+        if (focusInDropdown && this.trigger !== 'input')
+            this.restoreFocusToTrigger();
+    }
     isOpenChanged(isOpen) {
         if (!isOpen) {
+            this.revealedGroupLabel = null;
             this.drillDirection = null;
             this.openGroup = null;
             this.highlightedGroup = null;
@@ -1006,20 +1080,25 @@ export class PdsCombobox {
         // 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.
+        // options come first, so none reads as part of the group above it. The flyout and drill-in
+        // panels draw groups as rows, where that can't happen, so they keep the data's order instead.
         const asyncOptions = this.options || this.internalOptions;
         const groups = new Map();
         const ungrouped = [];
         const groupEntries = [];
-        asyncOptions.forEach(opt => {
+        this.panelPositions = new WeakMap();
+        asyncOptions.forEach((opt, position) => {
             const optionEl = document.createElement('option');
             optionEl.value = String(opt.id);
             optionEl.textContent = opt.text;
             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.icon === 'string' && opt.icon !== '')
+                optionEl.setAttribute('data-icon', opt.icon);
             if (typeof opt.group !== 'string' || opt.group === '') {
                 ungrouped.push(optionEl);
+                this.panelPositions.set(optionEl, position);
                 return;
             }
             let optgroup = groups.get(opt.group);
@@ -1028,6 +1107,7 @@ export class PdsCombobox {
                 optgroup.label = opt.group;
                 groups.set(opt.group, optgroup);
                 groupEntries.push(optgroup);
+                this.panelPositions.set(optgroup, position);
             }
             if (!optgroup.hasAttribute('data-icon') && typeof opt.groupIcon === 'string' && opt.groupIcon !== '') {
                 optgroup.setAttribute('data-icon', opt.groupIcon);
@@ -1493,6 +1573,7 @@ export class PdsCombobox {
     handleGroupedPanelKey(e) {
         if (!this.showsGroupedPanel)
             return false;
+        const highlightShown = this.keyboardNavigating;
         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.
@@ -1502,23 +1583,32 @@ export class PdsCombobox {
             if (e.key === ' ' || e.key === 'Home' || e.key === 'End')
                 return false;
         }
-        const entries = buildPanelEntries(this.filteredItems);
+        const entries = this.panelEntries();
         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);
+        // Drill-in doesn't shade a group row the pointer or a click-open highlighted, so the first Up or
+        // Down shows that row rather than moving past one the user never saw.
+        const unseenRow = !highlightShown && this.effectiveGroupDisplay === 'drill-in' && current !== null && typeof current !== 'number' && current !== this.openGroup;
         const moveTo = (to) => {
             e.preventDefault();
             this.highlightPanelItem(column[Math.max(0, Math.min(column.length - 1, to))]);
+            this.revealedGroupLabel = null;
+            return true;
+        };
+        const reveal = () => {
+            e.preventDefault();
+            this.revealedGroupLabel = current.label;
             return true;
         };
         switch (e.key) {
             case 'ArrowDown':
-                return moveTo(position < 0 ? 0 : position + 1);
+                return unseenRow ? reveal() : moveTo(position < 0 ? 0 : position + 1);
             case 'ArrowUp':
-                return moveTo(position < 0 ? column.length - 1 : position - 1);
+                return unseenRow ? reveal() : moveTo(position < 0 ? column.length - 1 : position - 1);
             case 'Home':
                 return moveTo(0);
             case 'End':
@@ -1651,7 +1741,7 @@ export class PdsCombobox {
         // 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));
+            const first = this.panelEntries().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;
@@ -1716,8 +1806,13 @@ export class PdsCombobox {
             }
             // 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' });
+            const row = Array.from(this.listboxEl.querySelectorAll('[role="treeitem"]'))
+                .find(item => item.id === id);
+            // The row's trigger, not its item: the row back's item wraps the group's options, and showing
+            // all of a group taller than the list would scroll the row back itself out of view.
+            const trigger = Array.from((_a = row === null || row === void 0 ? void 0 : row.children) !== null && _a !== void 0 ? _a : []).find(child => child.classList.contains('pds-combobox__group-row-trigger'));
+            if (trigger)
+                this.scrollIntoViewNearest(trigger, false);
             this.updateAriaActiveDescendant();
             return;
         }
@@ -1768,7 +1863,7 @@ export class PdsCombobox {
                 this.flyout.reveal(flyout, currentOption);
             }
             else {
-                currentOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                this.scrollIntoViewNearest(currentOption, true);
             }
         }
         // Always update aria-activedescendant on the trigger element
@@ -1865,6 +1960,8 @@ export class PdsCombobox {
         this.highlightedIndex = -1;
         this.highlightedGroup = group;
         this.keyboardNavigating = false;
+        // So revealing this row again later is announced again.
+        this.revealedGroupLabel = null;
     }
     // Get the label of the selected option
     get selectedLabel() {
@@ -2020,7 +2117,8 @@ export class PdsCombobox {
                 '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",
+                'pds-combobox__listbox--pointer-hover': this.pointerCanHover,
+            }, onAnimationEnd: this.onDrillAnimationEnd, onPointerMove: this.onPanelPointer, onPointerDown: this.onPanelPointer, 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 => {
@@ -2186,7 +2284,21 @@ export class PdsCombobox {
                 '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" })));
+            }, "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.renderOptionLabel(option)), isSelected && h("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
+    }
+    /** An option's text, after its `data-icon` when it has one. */
+    renderOptionLabel(option) {
+        const icon = optionIconOf(option);
+        if (icon === null)
+            return this.getOptionLabel(option);
+        return (h("span", { class: "pds-combobox__option-label" }, h("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }), this.getOptionLabel(option)));
+    }
+    /** The grouped panel's rows, in the order the panel draws them and the keyboard moves through. */
+    panelEntries() {
+        // Slotted markup is already in order; only options from data record positions.
+        if (this.options === undefined && !this.asyncUrl)
+            return buildPanelEntries(this.filteredItems);
+        return buildPanelEntries(this.filteredItems, element => this.panelPositions.get(element));
     }
     /**
      * `flyout`: one row per group, its options in a flyout beside it. `drill-in`: the same rows, and
@@ -2194,7 +2306,7 @@ export class PdsCombobox {
      * 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 entries = this.panelEntries();
         const setsize = entries.length;
         if (this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null) {
             const position = entries.findIndex(entry => entry.kind === 'group' && entry.group.optgroup === this.openGroup);
@@ -2225,22 +2337,26 @@ export class PdsCombobox {
         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,
+                // As the group rows: shaded for the keys, and by `:hover` for the pointer.
+                'pds-combobox__group-back--highlighted': this.keyboardNavigating && this.highlightedGroupRow === group.optgroup,
                 'pds-combobox__group-back--keyboard': this.keyboardNavigating && this.highlightedGroupRow === group.optgroup,
             }, role: "treeitem", "aria-expanded": "true", "aria-disabled": disabled ? 'true' : undefined, "aria-level": 1, "aria-posinset": posinset, "aria-setsize": setsize, "aria-labelledby": `${id}-label` }, 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));
+        // Drill-in shades a group row only for the keys: not for the group holding the selection, or the
+        // row the pointer or a click-open left highlighted, which read as picked. `:hover` covers the pointer.
+        const hasSelection = flyout && group.options.some(({ option }) => this.isOptionSelected(option));
+        const isCurrent = this.highlightedGroupRow === group.optgroup;
         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--highlighted': isCurrent && (flyout || this.keyboardNavigating),
+                'pds-combobox__group-row--keyboard': isCurrent && this.keyboardNavigating,
                 '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.
@@ -2256,7 +2372,23 @@ export class PdsCombobox {
     }
     // Helper method to render default text content
     renderDefaultContent() {
-        return (h("span", { class: { 'pds-combobox__button-trigger-label': true, 'pds-combobox__button-trigger-label--placeholder': !this.selectedLabel } }, this.selectedLabel || this.placeholder));
+        const icon = this.selectedIcon;
+        return (h("span", { class: {
+                'pds-combobox__button-trigger-label': true,
+                'pds-combobox__button-trigger-label--placeholder': !this.selectedLabel,
+                'pds-combobox__button-trigger-label--with-icon': icon !== null,
+            } }, icon !== null && (
+        // `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
+        h("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.selectedLabel || this.placeholder));
+    }
+    /** The selection's icon for the button trigger: the option's own, or else its group's. */
+    get selectedIcon() {
+        var _a;
+        const option = this.selectedOption;
+        if (!option)
+            return null;
+        const optgroup = parentOptgroupOf(option);
+        return (_a = optionIconOf(option)) !== null && _a !== void 0 ? _a : (optgroup !== null ? groupIconOf(optgroup) : null);
     }
     // Helper method to check if we should show layout content
     shouldShowLayoutContent() {
@@ -2374,6 +2506,7 @@ export class PdsCombobox {
         ];
     }
     render() {
+        var _a;
         const triggerClass = [
             'pds-combobox__button-trigger',
             `pds-combobox__button-trigger--${this.triggerVariant}`,
@@ -2381,13 +2514,18 @@ export class PdsCombobox {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h(Host, { key: '960558b36010eb059c98acc37439656f2f7ff657', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'b0abcd004aa98b630819cfdd0cfb85ebde2ee2f8', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (h("label", { key: 'ae42f12fe4d0c498c99c0baae7673ff90e1be576', 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 => {
+        return (h(Host, { key: 'c3bda161c67bab75f306c7f38435d279e5a88756', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '92b3f83c14a7296b3b2671eaef538a15743f695f', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (h("label", { key: '4a2dba09dd6db9893e21346b861b4c6cb891112b', 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-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: 'ab0dba6db0a989cb2e41632cb8412062f96c38cd', style: { display: 'none' } }, h("slot", { key: '337461c5ead6dda1d04911fd4b5a23b1dc6b9726', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && (h("span", { key: 'd8d82d69381548b2e3266d9109c98ab0397b22e0', class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : '')))));
+            }, 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: 'b8d358339bb26037b6c3c464bd4e13fe978f7857', style: { display: 'none' } }, h("slot", { key: '4aa4c2b8f2b57e13d1e958cc745c61e39e800529', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
+            h("span", { key: "drill-status", class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : ''),
+            // Its own region: sharing one, revealing a row then opening it would leave the text the
+            // same, and opening the group would go unannounced.
+            h("span", { key: "reveal-status", class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen ? (_a = this.revealedGroupLabel) !== null && _a !== void 0 ? _a : '' : ''),
+        ])));
     }
     static get is() { return "pds-combobox"; }
     static get encapsulation() { return "shadow"; }
@@ -3284,6 +3422,8 @@ export class PdsCombobox {
             "drillDirection": {},
             "highlightedGroup": {},
             "keyboardNavigating": {},
+            "revealedGroupLabel": {},
+            "pointerCanHover": {},
             "panelQuery": {},
             "flyoutFallback": {},
             "selectedOption": {},
@@ -3422,6 +3562,9 @@ export class PdsCombobox {
             }, {
                 "propName": "flyoutFallback",
                 "methodName": "flyoutFallbackChanged"
+            }, {
+                "propName": "disabled",
+                "methodName": "disabledChanged"
             }, {
                 "propName": "isOpen",
                 "methodName": "isOpenChanged"

package/dist/collection/components/pds-combobox/stories/pds-combobox.stories.js

@@ -559,6 +559,51 @@ GroupDisplayDrillInWithPanelSearch.argTypes = {
   noOptionsFoundLabel: { control: 'text' },
 };
 
+// A category picker: ungrouped categories with icons, and groups listed between them in the
+// data's order. Once a category is chosen, the trigger shows its icon, or its group's.
+export const OptionIconsWithGroups = (args) => html`
+<div style="min-height: 480px;">
+  <pds-combobox
+    component-id="combobox-option-icons"
+    label=${args.label}
+    hide-label
+    placeholder=${args.placeholder}
+    trigger="button"
+    trigger-shape="input"
+    mode="select-only"
+    group-display=${args.groupDisplay}
+    panel-search
+    search-placeholder=${args.searchPlaceholder}
+    search-options-label=${args.searchPlaceholder}
+    drill-in-back-label="Back"
+    trigger-width=${args.triggerWidth}
+    dropdown-width=${args.triggerWidth}
+    .options=${args.options}
+  ></pds-combobox>
+</div>`;
+
+OptionIconsWithGroups.args = {
+  label: 'Category',
+  placeholder: 'Select category',
+  searchPlaceholder: 'Search categories',
+  groupDisplay: 'drill-in',
+  triggerWidth: '360px',
+  options: [
+    { id: 'assessment', text: 'Assessment', icon: 'assessment' },
+    { id: 'contact', text: 'Contact', icon: 'contact' },
+    { id: 'coupon', text: 'Coupon', icon: 'coupon' },
+    { id: 'broadcast', text: 'Broadcast', group: 'Email', groupIcon: 'mail' },
+    { id: 'email-activity', text: 'Email activity', group: 'Email' },
+    { id: 'marketing-status', text: 'Email marketing status', group: 'Email' },
+    { id: 'sequence', text: 'Sequence', group: 'Email' },
+    { id: 'event', text: 'Event', icon: 'calendar-date' },
+    { id: 'custom-fields', text: 'Custom fields', group: 'Fields', groupIcon: 'columns' },
+    { id: 'default-fields', text: 'Default fields', group: 'Fields' },
+    { id: 'form', text: 'Form', icon: 'form' },
+    { id: 'tag', text: 'Tag', icon: 'hashtag' },
+  ],
+};
+
 // A large action catalog: many groups, a button trigger and panel search. The narrower widths
 // leave room for the flyout beside the dropdown on a narrow canvas.
 export const GroupDisplayActionCatalog = (args) => html`

package/dist/collection/components/pds-container/pds-container.js

@@ -25,7 +25,7 @@ export class PdsContainer {
             hostStyle['--pine-container-max-width'] = customSize;
         if (!this.centered)
             hostStyle['margin-inline'] = '0';
-        return (h(Host, { key: '8a01369c4d1817dd083b1ac714ff7c02920f817e', class: { [`pds-container--${this.size}`]: isNamed }, style: Object.keys(hostStyle).length ? hostStyle : undefined }, h(Tag, { key: '7428cb0040896dc11004065cf91ae9d3c3a99c49', part: "container" }, h("slot", { key: '5a5b5bbc87c03afc23f1c9a0523fced8c0795efb' }))));
+        return (h(Host, { key: '8a9b10b5d0e348b73f8a6bd7933083c596df10d8', class: { [`pds-container--${this.size}`]: isNamed }, style: Object.keys(hostStyle).length ? hostStyle : undefined }, h(Tag, { key: '55fb22be49377c4cccf08381e7cf954a3f097d08', part: "container" }, h("slot", { key: '4cd9c4fa74a2c6a056e076ab67a0279c395b5c79' }))));
     }
     static get is() { return "pds-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-copytext/pds-copytext.js

@@ -102,7 +102,7 @@ export class PdsCopytext {
     render() {
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: '1c43941f808f58a53f1c445e0f5693985c793c35', class: hostClass, id: this.componentId }, h("pds-button", { key: 'd771d2587a11f1b27bded17b5df5e649ea93cd90', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '0d4fd25220cac636b328fd1ee1aba40d07296265', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '832a044c10843bb90833301cc3f3ea1f7b755f42', "aria-hidden": "true", icon: copyIcon, size: "16px" }))));
+        return (h(Host, { key: 'd9bd40af6e435d606841cb551341eab33c5983b7', class: hostClass, id: this.componentId }, h("pds-button", { key: '7a42b32678fccb2cbe0d7a68a5da6d5fe5276a4a', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '732db283b8075ebad8e1daff70692bac2978aade', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: 'ebfd34b9b5a47b78783302ce97d752af09e3f3e3', "aria-hidden": "true", icon: copyIcon, size: "16px" }))));
     }
     static get is() { return "pds-copytext"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-datepicker/pds-datepicker.js

@@ -1309,14 +1309,14 @@ export class PdsDatepicker {
     }
     render() {
         const locale = this.resolvedLocale;
-        return (h(Host, { key: 'a761f0ca6eeedcac3e4bd90760aa9781cd37dcdc', class: { 'pds-datepicker--range': this.range, 'pds-datepicker--time': this.timePicker }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, h("pds-input", { key: '2eb04f9fd4e2f7a2437145d250c629c2cc8a0bf6', ref: (el) => (this.inputEl = el), componentId: this.baseId, label: this.label, hideLabel: this.hideLabel, helperMessage: this.helperMessage, errorMessage: this.errorMessage, invalid: this.invalid || !!this.textError || !!this.valueError(), disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.fieldPlaceholder, fullWidth: this.fullWidth, autocomplete: "off", value: this.text, onClick: this.onFieldClick, onPdsInput: this.onTextInput, onPdsChange: this.onTextChange, onPdsKeyDown: this.onTextKeyDown, onPdsFocus: this.stopInnerEvent, onPdsBlur: this.stopInnerEvent }, this.clearable && !!this.value && this.isInteractive && (h("button", {
+        return (h(Host, { key: '82ffd88b7741a90edc28b66a7384178eb2a9a86c', class: { 'pds-datepicker--range': this.range, 'pds-datepicker--time': this.timePicker }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, h("pds-input", { key: 'f2b9aad64d1fe8d94327cc3d4f87cd6904eb3076', ref: (el) => (this.inputEl = el), componentId: this.baseId, label: this.label, hideLabel: this.hideLabel, helperMessage: this.helperMessage, errorMessage: this.errorMessage, invalid: this.invalid || !!this.textError || !!this.valueError(), disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.fieldPlaceholder, fullWidth: this.fullWidth, autocomplete: "off", value: this.text, onClick: this.onFieldClick, onPdsInput: this.onTextInput, onPdsChange: this.onTextChange, onPdsKeyDown: this.onTextKeyDown, onPdsFocus: this.stopInnerEvent, onPdsBlur: this.stopInnerEvent }, this.clearable && !!this.value && this.isInteractive && (h("button", {
             // Keyed, as is the calendar button: when Clear appears after a pick, the focused
             // calendar button must stay that button rather than be reused as Clear.
             key: "clear", slot: "suffix", type: "button", class: "pds-datepicker__clear", ref: (el) => (this.clearEl = el), "aria-label": this.label ? `${this.clearLabel} ${this.label}` : this.clearLabel,
             // Out of the tab order, as a native search field's clear button is: Tab from a field
             // just emptied would land on it as the change removes it, dropping focus to the page.
             tabindex: "-1", onMouseDown: this.onClearMouseDown, onClick: this.onClearClick
-        }, h("pds-icon", { key: '98c325fbba8ea78b2d409bc77099db3206738508', icon: remove, "aria-hidden": "true" }))), h("button", { key: "trigger", slot: "suffix", type: "button", class: "pds-datepicker__trigger", ref: (el) => (this.triggerEl = el), "aria-label": this.triggerAccessibleName(locale), "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', disabled: !this.isInteractive, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("pds-icon", { key: 'cb8483febe1b485058b7bb4271b749981a7747a1', icon: calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
+        }, h("pds-icon", { key: 'f2c784e9d6577d4900b7641ee58aa43f5922fc75', icon: remove, "aria-hidden": "true" }))), h("button", { key: "trigger", slot: "suffix", type: "button", class: "pds-datepicker__trigger", ref: (el) => (this.triggerEl = el), "aria-label": this.triggerAccessibleName(locale), "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', disabled: !this.isInteractive, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("pds-icon", { key: '98b2e773240c8ea2bbd5a1acfa3c9ba74cb7917b', icon: calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
     }
     static get is() { return "pds-datepicker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-divider/pds-divider.js

@@ -29,7 +29,7 @@ export class PdsDivider {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '072cc8552bd33c4a00d216f15a5a848cfc97fd92', id: this.componentId }, this.hasLabel ? (h("div", { class: this.classNames(), role: "separator", "aria-label": this.label }, h("span", { class: "pds-divider__label", part: "label", "aria-hidden": "true" }, this.label))) : (h("hr", { class: this.classNames() }))));
+        return (h(Host, { key: 'ef2a5ee85e8f37036be5b8df490683636ffb66f0', id: this.componentId }, this.hasLabel ? (h("div", { class: this.classNames(), role: "separator", "aria-label": this.label }, h("span", { class: "pds-divider__label", part: "label", "aria-hidden": "true" }, this.label))) : (h("hr", { class: this.classNames() }))));
     }
     static get is() { return "pds-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-drawer/pds-drawer-content/pds-drawer-content.js

@@ -13,7 +13,7 @@ export class PdsDrawerContent {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
     }
     render() {
-        return (h("div", { key: 'b15b087506c1292f9d67e531e8d935069749c09d', class: "pds-drawer-content" }, h("slot", { key: '9c60ca75c7905e7e994f9c41eee213b962afb833' })));
+        return (h("div", { key: 'f307939ab0a94f6a0d8a3675c658def0ded68b98', class: "pds-drawer-content" }, h("slot", { key: 'dadac08ac15bb8ded98ea982511e2d57bea9bdca' })));
     }
     static get is() { return "pds-drawer-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-drawer/pds-drawer-footer/pds-drawer-footer.js

@@ -9,7 +9,7 @@ export class PdsDrawerFooter {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
     }
     render() {
-        return (h("footer", { key: 'a4eec0aff617c605b94f8d3b9ec1e2d98cded6fb', class: "pds-drawer__footer" }, h("slot", { key: '6dc379c940e37edfd05d99728be9dff58ca1d717' })));
+        return (h("footer", { key: 'b58c68d88b467e8baa3682d16f97076d06ea2414', class: "pds-drawer__footer" }, h("slot", { key: 'ff2306202c14029b397d40b5bb3d672a8aa571c0' })));
     }
     static get is() { return "pds-drawer-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-drawer/pds-drawer-header/pds-drawer-header.js

@@ -9,7 +9,7 @@ export class PdsDrawerHeader {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
     }
     render() {
-        return (h("header", { key: '6b9338e5dbf7a7e580c11b28c95ca53693528382', class: "pds-drawer__header" }, h("slot", { key: '0990fbcf94c0c438b98cf1e8945f1e2fd9aa33dc' })));
+        return (h("header", { key: '280e6ca734317d5733e4c595431c8070eff13d58', class: "pds-drawer__header" }, h("slot", { key: 'cc6af6084600c4dc60d7bd99e040376abdf5ffe3' })));
     }
     static get is() { return "pds-drawer-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-drawer/pds-drawer.css

@@ -1,10 +1,13 @@
 .pds-drawer__modal > .pds-modal__backdrop {
   align-items: stretch;
+}
+
+.pds-drawer__modal:not(.pds-drawer__modal--modal) > .pds-modal__backdrop {
   background-color: transparent;
   pointer-events: none;
 }
 @supports (backdrop-filter: blur(3px)) {
-  .pds-drawer__modal > .pds-modal__backdrop {
+  .pds-drawer__modal:not(.pds-drawer__modal--modal) > .pds-modal__backdrop {
     backdrop-filter: none;
   }
 }