@pine-ds/core 4.5.0 → 4.6.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. */
@@ -686,6 +706,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 +751,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;
@@ -728,6 +774,7 @@ export class PdsCombobox {
     }
     isOpenChanged(isOpen) {
         if (!isOpen) {
+            this.revealedGroupLabel = null;
             this.drillDirection = null;
             this.openGroup = null;
             this.highlightedGroup = null;
@@ -1006,20 +1053,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 +1080,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 +1546,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 +1556,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 +1714,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 +1779,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 +1836,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 +1933,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 +2090,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 +2257,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 +2279,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 +2310,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 +2345,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 +2479,7 @@ export class PdsCombobox {
         ];
     }
     render() {
+        var _a;
         const triggerClass = [
             'pds-combobox__button-trigger',
             `pds-combobox__button-trigger--${this.triggerVariant}`,
@@ -2381,13 +2487,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: 'e934b937916e45f715e6fb54d23a2a5e7c8ce4f6', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '79d282907c4f218e124b4f9250e0aedb0e9ea51d', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (h("label", { key: 'd05a4a8fe5362b2b0a684f36115c127689c35c2f', 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: '38d9c018d59472ef8b7eb3facb47bea5c73f5f1e', style: { display: 'none' } }, h("slot", { key: '26acb32e5f301b568485d52e29b68e526ef1d525', 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 +3395,8 @@ export class PdsCombobox {
             "drillDirection": {},
             "highlightedGroup": {},
             "keyboardNavigating": {},
+            "revealedGroupLabel": {},
+            "pointerCanHover": {},
             "panelQuery": {},
             "flyoutFallback": {},
             "selectedOption": {},

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.js

@@ -134,11 +134,11 @@ export class PdsDrawer {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '166bc90b45d29f64f11b6840e7c6ae798bf14261', class: {
+        return (h(Host, { key: 'ae7e67ed196ef95a39c2b729e859712ce5c41144', class: {
                 'pds-drawer': true,
                 [`pds-drawer--${this.side}`]: true,
                 [`pds-drawer--${this.size}`]: true,
-            } }, h("pds-modal", { key: '2faa1cee1f34a85e9df0cabb8e78803982414982', class: "pds-drawer__modal", ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: true, backdropDismiss: this.lightDismiss, disableInitialFocus: this.initialFocus === 'none' }, h("slot", { key: '93968e612756c398f6d1faf9383f6c88c420da28' }))));
+            } }, h("pds-modal", { key: '9b35ce377c84612a844a561d5540e98b08c0e499', class: "pds-drawer__modal", ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: true, backdropDismiss: this.lightDismiss, disableInitialFocus: this.initialFocus === 'none' }, h("slot", { key: 'dda01aa40dc41b3d17073238a8cad8d816571e18' }))));
     }
     static get is() { return "pds-drawer"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js

@@ -72,7 +72,7 @@ export class PdsDropdownMenuItem {
             }, tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, h("slot", null)));
     }
     render() {
-        return (h(Host, { key: 'cf22f97df3869d59820ba0deff9a21bfee2628b8', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
+        return (h(Host, { key: '33bd645d7c9547e3fd07429cf795302e6a482296', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
     }
     static get is() { return "pds-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.js

@@ -8,7 +8,7 @@ export class PdsDropdownMenuSeparator {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '63bd5fd3112b1030d1e86b331a659ab3a92dd387', id: this.componentId }, h("hr", { key: '0a8504d34a9b91db03abdddd86ce918c00534410' })));
+        return (h(Host, { key: '60407a2edc8b4667d39cbd1ba9a859d09b0b8ff1', id: this.componentId }, h("hr", { key: '8485d1c8508c5fe5e3635505f25e278f45f45b82' })));
     }
     static get is() { return "pds-dropdown-menu-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.css

@@ -19,8 +19,22 @@
   border: var(--pine-border);
 }
 
-::slotted(a),
-::slotted(button) {
+.pds-dropdown-menu__header {
+  border-block-end: var(--pine-border-width-thin) solid var(--pine-color-border);
+  margin-block-end: var(--pine-dimension-xs);
+  margin-inline: calc(var(--pine-dimension-xs) * -1);
+  padding-block-end: var(--pine-dimension-xs);
+  padding-inline: calc(var(--pine-dimension-xs) * 2 + var(--pine-border-width) + 2px);
+  text-align: start;
+}
+
+.pds-dropdown-menu__items {
+  display: flex;
+  flex-direction: column;
+}
+
+::slotted(a:not([slot=header])),
+::slotted(button:not([slot=header])) {
   align-items: center;
   appearance: none;
   background: transparent;
@@ -40,12 +54,12 @@
   width: calc(100% - (var(--pine-border-width) + 2px) * 2);
 }
 
-::slotted(.destructive) {
+::slotted(.destructive:not([slot=header])) {
   color: var(--pine-color-danger) !important;
 }
 
-::slotted([aria-disabled=true]),
-::slotted([disabled]:not([disabled=false])) {
+::slotted([aria-disabled=true]:not([slot=header])),
+::slotted([disabled]:not([disabled=false]):not([slot=header])) {
   cursor: not-allowed;
   opacity: 0.5;
   pointer-events: none;