@pine-ds/core 4.9.0 → 4.10.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, optionIconOf, panelColumn, parentOptgroupOf, } from "./grouped-options-panel";
+import { FlyoutController, buildPanelEntries, findGroup, groupBadgeOf, groupIconOf, groupLabelOf, isGroupDisabled, isOptionDisabled, optionBadgeOf, 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
@@ -1133,6 +1133,7 @@ export class PdsCombobox {
             // 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);
+            this.setBadgeAttributes(optionEl, opt.badge);
             if (typeof opt.group !== 'string' || opt.group === '') {
                 ungrouped.push(optionEl);
                 this.panelPositions.set(optionEl, position);
@@ -1149,6 +1150,8 @@ export class PdsCombobox {
             if (!optgroup.hasAttribute('data-icon') && typeof opt.groupIcon === 'string' && opt.groupIcon !== '') {
                 optgroup.setAttribute('data-icon', opt.groupIcon);
             }
+            if (!optgroup.hasAttribute('data-badge'))
+                this.setBadgeAttributes(optgroup, opt.groupBadge);
             optgroup.appendChild(optionEl);
         });
         [...ungrouped, ...groupEntries].forEach(entry => {
@@ -1638,7 +1641,10 @@ export class PdsCombobox {
         };
         const reveal = () => {
             e.preventDefault();
-            this.revealedGroupLabel = current.label;
+            // The row's name, badge and all, as the row itself is named.
+            const optgroup = current;
+            const badge = groupBadgeOf(optgroup);
+            this.revealedGroupLabel = badge === null ? optgroup.label : `${optgroup.label}, ${badge.label}`;
             return true;
         };
         switch (e.key) {
@@ -2187,11 +2193,16 @@ export class PdsCombobox {
                 return;
             const { optgroup, key, options, members } = group;
             const groupIcon = groupIconOf(optgroup);
+            const badge = groupBadgeOf(optgroup);
             // As in the grouped displays: disabled when there's nothing left in it to choose.
             const disabled = members.length > 0 && members.every(member => isOptionDisabled(member));
-            rendered.push(h("li", { key: key, class: { 'pds-combobox__group': true, 'pds-combobox__group--disabled': disabled }, role: "group", "aria-label": optgroup.label, "aria-disabled": disabled ? 'true' : undefined }, h("div", { class: { 'pds-combobox__group-label': true, 'pds-combobox__group-label--with-icon': groupIcon !== null }, "aria-hidden": "true" }, groupIcon !== null && (
+            rendered.push(h("li", { key: key, class: { 'pds-combobox__group': true, 'pds-combobox__group--disabled': disabled }, role: "group", "aria-label": badge === null ? optgroup.label : `${optgroup.label}, ${badge.label}`, "aria-disabled": disabled ? 'true' : undefined }, h("div", { class: {
+                    'pds-combobox__group-label': true,
+                    'pds-combobox__group-label--with-icon': groupIcon !== null,
+                    'pds-combobox__group-label--with-badge': badge !== null,
+                }, "aria-hidden": "true" }, groupIcon !== null && (
             // `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
-            h("pds-icon", { name: groupIcon, size: "small", "aria-hidden": "true", class: "pds-combobox__group-icon" })), optgroup.label), h("ul", { class: "pds-combobox__group-list", role: "presentation" }, options)));
+            h("pds-icon", { name: groupIcon, size: "small", "aria-hidden": "true", class: "pds-combobox__group-icon" })), badge === null ? optgroup.label : h("span", { class: "pds-combobox__group-label-text" }, optgroup.label), this.renderBadge(badge, 'pds-combobox__group-badge')), h("ul", { class: "pds-combobox__group-list", role: "presentation" }, options)));
             group = null;
         };
         this.filteredItems.forEach((item, itemIdx) => {
@@ -2317,20 +2328,56 @@ export class PdsCombobox {
         const isChip = this.isOptionChip(option);
         const isDisabled = isOptionDisabled(option);
         const tree = level !== undefined;
-        return (h("li", { key: option.value, id: this.optionDomId(index), role: tree ? 'treeitem' : 'option', "aria-selected": isSelected ? 'true' : tree ? undefined : 'false', "aria-disabled": isDisabled ? 'true' : undefined, "aria-level": level, "aria-setsize": setsize, "aria-posinset": posinset, "aria-label": isLayout || isChip ? option.getAttribute('aria-label') || this.getOptionLabel(option) : undefined, tabindex: this.usesBodyPortal || this.usesPanelSearch || tree ? '-1' : isHighlighted ? '0' : '-1', class: {
+        const badge = isLayout || isChip ? null : optionBadgeOf(option);
+        return (h("li", { key: option.value, id: this.optionDomId(index), role: tree ? 'treeitem' : 'option', "aria-selected": isSelected ? 'true' : tree ? undefined : 'false', "aria-disabled": isDisabled ? 'true' : undefined, "aria-level": level, "aria-setsize": setsize, "aria-posinset": posinset, "aria-label": isLayout || isChip
+                ? option.getAttribute('aria-label') || this.getOptionLabel(option)
+                : badge && `${this.getOptionLabel(option)}, ${badge.label}`, tabindex: this.usesBodyPortal || this.usesPanelSearch || tree ? '-1' : isHighlighted ? '0' : '-1', class: {
                 'pds-combobox__option': true,
                 'pds-combobox__option--highlighted': isHighlighted,
                 'pds-combobox__option--layout': isLayout,
                 'pds-combobox__option--chip': isChip,
                 'pds-combobox__option--disabled': isDisabled,
-            }, "data-option-index": index, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (h("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : (this.renderOptionLabel(option)), isSelected && h("pds-icon", { icon: "check", size: "regular", "aria-hidden": "true", class: "pds-combobox__option-check" })));
+                'pds-combobox__option--with-badge': badge !== null,
+            }, "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), this.renderOptionBadge(option)]), isSelected && h("pds-icon", { icon: "check", size: "regular", "aria-hidden": "true", class: "pds-combobox__option-check" })));
     }
-    /** An option's text, after its `data-icon` when it has one. */
+    /** Copies an `options` badge to an option's or optgroup's `data-badge*` attributes; only strings count. */
+    setBadgeAttributes(element, badge) {
+        if (typeof badge !== 'object' || badge === null)
+            return;
+        const { label, sentiment, icon } = badge;
+        if (typeof label !== 'string' || label.trim() === '')
+            return;
+        element.setAttribute('data-badge', label);
+        if (typeof sentiment === 'string')
+            element.setAttribute('data-badge-sentiment', sentiment);
+        if (typeof icon === 'string')
+            element.setAttribute('data-badge-icon', icon);
+    }
+    /** An option's badge, after its text. */
+    renderOptionBadge(option) {
+        return this.renderBadge(optionBadgeOf(option), 'pds-combobox__option-badge');
+    }
+    /** A badge as a `pds-chip`: after an option's text, or a group's label. */
+    renderBadge(badge, className) {
+        var _a;
+        if (badge === null)
+            return null;
+        return (h("pds-chip", { size: "sm", sentiment: badge.sentiment,
+            // A Pine icon name only, checked by optionBadgeOf; pds-chip's `icon` also loads URLs.
+            icon: (_a = badge.icon) !== null && _a !== void 0 ? _a : undefined,
+            // A long label, often a translated one, truncates rather than squeezing the option's text.
+            maxWidth: "50%", class: className }, badge.label));
+    }
+    /**
+     * An option's text, after its `data-icon` when it has one. Beside a badge the text is always
+     * wrapped, so it can shrink and wrap rather than push the badge out of the row.
+     */
     renderOptionLabel(option) {
         const icon = optionIconOf(option);
         const label = this.truncate ? (h("span", { key: this.getOptionLabel(option), class: "pds-combobox__option-text" }, this.getOptionLabel(option))) : this.getOptionLabel(option);
-        if (icon === null)
-            return label;
+        if (icon === null) {
+            return optionBadgeOf(option) === null ? label : h("span", { class: "pds-combobox__option-label" }, label);
+        }
         return (h("span", { class: "pds-combobox__option-label" }, h("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }), label));
     }
     /** The grouped panel's rows, in the order the panel draws them and the keyboard moves through. */
@@ -2369,7 +2416,8 @@ export class PdsCombobox {
     }
     /**
      * Drilled into a group: its treeitem, expanded. Its row reads as a way back ("Back: Tag") and
-     * leads its options.
+     * leads its options. It leaves out the group's badge: the row is a way back, not a group to
+     * choose, and the badge was on the row that opened it. An option's own badge still shows.
      */
     renderGroupBackRow(group, { posinset, setsize }) {
         const id = this.groupDomId(group.optgroup);
@@ -2398,9 +2446,9 @@ export class PdsCombobox {
                 '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 && (
+            }, role: "treeitem", "aria-expanded": isOpen ? 'true' : 'false', "aria-disabled": disabled ? 'true' : undefined, "aria-level": 1, "aria-posinset": posinset, "aria-setsize": setsize, "aria-labelledby": group.badge === null ? `${id}-label` : undefined, "aria-label": group.badge === null ? undefined : `${group.label}, ${group.badge.label}`, "data-group-index": groupIndex, onMouseEnter: flyout ? this.onGroupRowMouseEnter : undefined, onMouseLeave: flyout ? this.onGroupRowMouseLeave : undefined }, h("div", { class: "pds-combobox__group-row-trigger", "data-group-index": groupIndex, onMouseDown: this.onOptionMouseDown, onMouseEnter: this.onGroupRowTriggerMouseEnter, onClick: this.onGroupRowClick }, h("span", { class: "pds-combobox__group-row-label", id: `${id}-label` }, group.icon !== null && (
         // `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
-        h("pds-icon", { name: group.icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__group-icon" })), group.label), h("pds-icon", { name: "caret-right", size: "regular", "aria-hidden": "true", class: "pds-combobox__group-row-caret" })), isOpen && (h("ul", { class: "pds-combobox__flyout", role: "group", "aria-label": group.label, style: { minWidth: this.flyoutMinWidth, maxWidth: this.flyoutMaxWidth } }, this.renderGroupOptions(group)))));
+        h("pds-icon", { name: group.icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__group-icon" })), group.label), this.renderBadge(group.badge, 'pds-combobox__group-badge'), h("pds-icon", { name: "caret-right", size: "regular", "aria-hidden": "true", class: "pds-combobox__group-row-caret" })), isOpen && (h("ul", { class: "pds-combobox__flyout", role: "group", "aria-label": group.label, style: { minWidth: this.flyoutMinWidth, maxWidth: this.flyoutMaxWidth } }, this.renderGroupOptions(group)))));
     }
     // Helper method to render the caret icon
     renderCaretIcon() {
@@ -2557,13 +2605,13 @@ export class PdsCombobox {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h(Host, { key: '2786062989bc490e87ea382b5c80f7e2758c1a8a', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'b3b272a99528d725a52d3092a3650efacaf54b34', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (h("label", { key: '8e2e0021e1f60cddfe41b918406c7d76659fbff1', 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: '104eb1c4cdca4494b10dea660e27a98b0c18bf64', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '2548ff2b304bb6a5a249b5059a0b60b55cdf2152', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (h("label", { key: '7a261c72452ca7a278e1067e41c6eed52f29edc8', 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, onMouseEnter: this.truncate ? this.onButtonTriggerMouseEnter : undefined, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), h("div", { key: '2216779564fa3f4efd1b4d0972ac045fa0851078', style: { display: 'none' } }, h("slot", { key: '77b344d7301193f435949cbe2be2b28e1d7f6602', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
+            }, 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, onMouseEnter: this.truncate ? this.onButtonTriggerMouseEnter : undefined, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), h("div", { key: 'ffd3bc72b34a7278f3fa706a236017a26b86ea3f', style: { display: 'none' } }, h("slot", { key: 'f47a81191ad7fd8c6bf63cf8ef39934cbf7fd28c', 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.

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

@@ -598,6 +598,7 @@ OptionIconsWithGroups.args = {
     { id: 'email-activity', text: 'Email activity', group: 'Email' },
     { id: 'marketing-status', text: 'Email marketing status', group: 'Email' },
     { id: 'sequence', text: 'Sequence', group: 'Email' },
+    { id: 'responsive', text: 'Responsive marketing emails', group: 'Email', badge: { label: 'New', sentiment: 'accent', icon: 'star' } },
     { 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' },
@@ -748,6 +749,53 @@ DisabledOptions.argTypes = {
   groupDisplay: { control: 'inline-radio', options: ['inline', 'flyout', 'drill-in'] },
 };
 
+// A plan-gated group: listed, disabled, with a Premium badge on its row, before the chevron.
+// The badge comes from the first option in the group that sets groupBadge.
+export const GroupBadges = (args) => html`
+<div style="min-height: 320px;">
+  <pds-combobox
+    component-id="combobox-group-badges"
+    label=${args.label}
+    placeholder=${args.placeholder}
+    trigger="button"
+    mode="select-only"
+    group-display=${args.groupDisplay}
+    drill-in-back-label="Back"
+    trigger-width="300px"
+    dropdown-width="300px"
+    .options=${args.options}
+  ></pds-combobox>
+</div>`;
+
+GroupBadges.args = {
+  label: 'Action',
+  placeholder: 'Choose an action',
+  groupDisplay: 'drill-in',
+  options: [
+    { id: 'email_send', text: 'Send an email', group: 'Email', groupIcon: 'mail' },
+    { id: 'contact_tag_add', text: 'Add a tag', group: 'Contact', groupIcon: 'contact' },
+    {
+      id: 'facebook_message_send',
+      text: 'Send a Facebook message',
+      group: 'Facebook',
+      groupBadge: { label: 'Premium', sentiment: 'brand', icon: 'premium' },
+      disabled: true,
+    },
+    { id: 'facebook_comment_reply', text: 'Reply to a comment', group: 'Facebook', disabled: true },
+    {
+      id: 'instagram_message_send',
+      text: 'Send an Instagram message',
+      group: 'Instagram',
+      groupBadge: { label: 'Premium', sentiment: 'brand', icon: 'premium' },
+      disabled: true,
+    },
+  ],
+};
+
+GroupBadges.argTypes = {
+  groupDisplay: { control: 'inline-radio', options: ['inline', 'flyout', 'drill-in'] },
+};
+
 export const OptionGroupsPdsText = (args) => html`
 <pds-combobox
   component-id="combobox-pds-text-groups"

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

@@ -1,4 +1,5 @@
 import { closest } from "../../utils/closest";
+import { findPortalTarget } from "../../utils/portal-target";
 /**
  * Where the open calendar lives: a `div` in `document.body`, or in the nearest `<dialog>` so it
  * shares a modal's top layer, outside any `overflow: hidden` or transformed ancestor that would
@@ -96,41 +97,3 @@ export class CalendarPortal {
     }
 }
 CalendarPortal.className = 'pds-datepicker-calendar-portal';
-/**
- * The native `<dialog>` or open `popover` (as pds-filter's) the datepicker sits in, so the
- * calendar shares its top layer and a click in it isn't outside it; otherwise `document.body`.
- * `closest()` stops at shadow boundaries and misses one that only wraps slotted content, so this
- * walks assigned slots and shadow hosts, as pds-combobox does.
- */
-export function findPortalTarget(from) {
-    const seen = new Set();
-    let current = from;
-    while (current && !seen.has(current)) {
-        seen.add(current);
-        if (current.nodeType === Node.ELEMENT_NODE && isTopLayerHost(current)) {
-            return current;
-        }
-        const assigned = current.nodeType === Node.ELEMENT_NODE ? current.assignedSlot : null;
-        if (assigned) {
-            current = assigned;
-            continue;
-        }
-        const parent = current.parentNode;
-        current = parent instanceof ShadowRoot ? parent.host : parent;
-    }
-    return document.body;
-}
-function isTopLayerHost(el) {
-    // Only an open dialog: inside a closed one, the calendar would be hidden with it.
-    if (el.localName === 'dialog')
-        return el.open;
-    if (!el.hasAttribute('popover'))
-        return false;
-    try {
-        return el.matches(':popover-open');
-    }
-    catch (_a) {
-        // A browser without the Popover API: no top layer to share.
-        return false;
-    }
-}

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

@@ -107,7 +107,7 @@ export class PdsDropdownMenu {
             this.currentFocusIndex = -1;
             // Return focus to trigger
             if (this.isFocusInMenu()) {
-                this.triggerEl.focus();
+                this.focusTrigger();
             }
         };
         // Handle click on the trigger element
@@ -158,6 +158,14 @@ export class PdsDropdownMenu {
         const focused = this.host.getRootNode().activeElement;
         return focused != null && this.host.contains(focused);
     }
+    // A trigger whose host can't take focus itself, such as pds-chip, passes it to the control inside.
+    focusTrigger() {
+        var _a, _b;
+        this.triggerEl.focus();
+        if (this.host.getRootNode().activeElement === this.triggerEl)
+            return;
+        (_b = (_a = this.triggerEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [href], [tabindex]:not([tabindex="-1"])')) === null || _b === void 0 ? void 0 : _b.focus();
+    }
     // Check if a menu item is disabled (handles both component and raw elements)
     isItemDisabled(item) {
         const tagName = item.tagName.toLowerCase();
@@ -253,6 +261,23 @@ export class PdsDropdownMenu {
             this.focusItemByIndex(prevIndex);
         }
     }
+    // Unlike the arrow keys, Tab stops at either end of the menu instead of wrapping.
+    adjacentEnabledIndex(fromIndex, step) {
+        for (let index = fromIndex + step; index >= 0 && index < this.menuItems.length; index += step) {
+            if (!this.isItemDisabled(this.menuItems[index]))
+                return index;
+        }
+        return -1;
+    }
+    // An enabled item can still refuse focus (hidden, or a link with no href), so each one is tried in turn.
+    focusAdjacentItem(fromIndex, step) {
+        for (let index = this.adjacentEnabledIndex(fromIndex, step); index !== -1; index = this.adjacentEnabledIndex(index, step)) {
+            this.focusItemByIndex(index);
+            if (this.getFocusedItemIndex() === index)
+                return true;
+        }
+        return false;
+    }
     // Escape is taken in document's capture phase, before a modal around the menu hears it on
     // document and closes too.
     handleEscapeKeyDown(event) {
@@ -261,6 +286,28 @@ export class PdsDropdownMenu {
         event.preventDefault();
         this.closeDropdown();
     }
+    // Taken in the capture phase, so a modal or popover around the menu that traps Tab finds the key
+    // already handled, or focus back on the trigger with the items hidden.
+    handleTabKeyDown(event) {
+        if (!this.isOpen || event.key !== 'Tab' || event.defaultPrevented)
+            return;
+        const currentIndex = this.getFocusedItemIndex();
+        if (currentIndex === -1) {
+            // The menu sits after the trigger, so Shift+Tab from the trigger leaves it behind. So does Shift+Tab
+            // from outside the menu, where focus stays after a mouse open in Safari.
+            if (event.shiftKey && (document.activeElement === this.triggerEl || !this.isFocusInMenu()))
+                this.closeDropdown();
+            return;
+        }
+        if (this.focusAdjacentItem(currentIndex, event.shiftKey ? -1 : 1)) {
+            event.preventDefault();
+            return;
+        }
+        // Past either end, closing moves focus to the trigger. Shift+Tab stays there; Tab carries on past it.
+        if (event.shiftKey)
+            event.preventDefault();
+        this.closeDropdown();
+    }
     // Handle keyboard events for the dropdown
     handleKeyDown(event) {
         if (!this.isOpen)
@@ -300,54 +347,19 @@ export class PdsDropdownMenu {
                     }
                 }
                 break;
-            case 'Tab':
-                if (event.shiftKey) {
-                    // Let Shift+Tab navigate naturally from first item to trigger
-                    // For all other items, move to previous item
-                    const currentIndex = this.getFocusedItemIndex();
-                    if (currentIndex > 0) {
-                        // If not on first item, prevent default and go to previous item
-                        event.preventDefault();
-                        this.focusPreviousItem(); // Use our method that skips disabled items
-                    }
-                    // If on first item or no item, let natural tab order move back to trigger
+            case 'Tab': {
+                // Tab from an item is handled in handleTabKeyDown; from anywhere else it moves into the menu.
+                if (event.shiftKey || this.getFocusedItemIndex() !== -1)
+                    break;
+                if (this.focusAdjacentItem(-1, 1)) {
+                    event.preventDefault();
                 }
                 else {
-                    // Forward Tab navigation
-                    const activeElement = document.activeElement;
-                    const isTriggerFocused = activeElement === this.triggerEl;
-                    const currentIndex = this.getFocusedItemIndex();
-                    if (isTriggerFocused && this.menuItems.length > 0) {
-                        // If trigger is focused, move to first non-disabled menu item
-                        event.preventDefault();
-                        // Find the first non-disabled item
-                        let firstFocusableIndex = 0;
-                        while (firstFocusableIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstFocusableIndex])) {
-                            firstFocusableIndex++;
-                        }
-                        if (firstFocusableIndex < this.menuItems.length) {
-                            this.focusItemByIndex(firstFocusableIndex);
-                        }
-                    }
-                    else if (currentIndex === -1 && this.menuItems.length > 0) {
-                        // If no menu item is focused, focus the first non-disabled one
-                        event.preventDefault();
-                        // Find the first non-disabled item
-                        let firstFocusableIndex = 0;
-                        while (firstFocusableIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstFocusableIndex])) {
-                            firstFocusableIndex++;
-                        }
-                        if (firstFocusableIndex < this.menuItems.length) {
-                            this.focusItemByIndex(firstFocusableIndex);
-                        }
-                    }
-                    else if (currentIndex !== -1) {
-                        // Use our method that skips disabled items
-                        event.preventDefault();
-                        this.focusNextItem();
-                    }
+                    // With no item to move to, Tab carries on past the menu, as it does past the last item.
+                    this.closeDropdown();
                 }
                 break;
+            }
         }
     }
     // Handle clicks outside the dropdown to close it
@@ -357,7 +369,7 @@ export class PdsDropdownMenu {
         }
     }
     render() {
-        return (h(Host, { key: '0ed3d8ee889a5423ca9de66a86791d084f75abf0', id: this.componentId }, h("slot", { key: '6bab71652d6afe094075623d3a48641a4d89b232', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: 'fcef0667f999ae5b8cd03eb94a0db0be7be502cb', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, h("div", { key: 'c78d5bd7e48c5483b12171341271f9132f4b2ff9', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, h("slot", { key: '6464994260720d6046da548f4aad0896965cc47c', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '3e97dfc4e1911f91ce8917faf981d436e71e5c24', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, h("slot", { key: 'dfd77a8b73df5ce9eef3e661d3f9501cb8bfdba2', onSlotchange: this.handleSlotChange })))));
+        return (h(Host, { key: 'aa4ce84354cf87638ee46fd7ed69520228b7e656', id: this.componentId }, h("slot", { key: '948800e67d18c8c6cc9e77ef3aeab635c5035453', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '3ce2a2879b14aad975cea8ae72fcbf8c3abcf20c', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, h("div", { key: 'ad25fbf4f3c7a24653c229e64fe2ce893a92e4c8', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, h("slot", { key: '35a5903543e08577997b456bcd312bdd009fd8fc', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: 'a9593adacf047918c1d87494f8c951a2a4a5f76f', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, h("slot", { key: '8d2def1cc7020608220099f4ced0f44e9838cce8', onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "pds-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -435,6 +447,12 @@ export class PdsDropdownMenu {
                 "target": "document",
                 "capture": true,
                 "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleTabKeyDown",
+                "target": "document",
+                "capture": true,
+                "passive": false
             }, {
                 "name": "keydown",
                 "method": "handleKeyDown",

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

@@ -13,9 +13,9 @@
 }
 .pds-link:focus-visible {
   border-radius: var(--pine-dimension-2xs);
+  isolation: isolate;
   outline: var(--pine-outline-focus);
   outline-offset: var(--pine-border-width-thick);
-  position: relative;
 }
 .pds-link:hover {
   color: var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));

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

@@ -73,3 +73,51 @@ export const NavTabs = {
     </nav>
   `,
 };
+
+// A whole row that is one link. The click area is the link part's ::after stretched over
+// the positioned row, so the row activates the link without nesting anything inside it.
+// Trailing controls sit above that box so they stay separately clickable, and the focus
+// ring is drawn on the stretched box rather than on the text.
+export const WholeRowLink = {
+  render: () => html`
+    <style>
+      .pds-link-row {
+        position: relative;
+      }
+
+      .pds-link-row:hover {
+        background-color: var(--pine-color-background-muted);
+      }
+
+      .pds-link-row pds-link::part(link)::after {
+        border-radius: var(--pine-border-radius-md);
+        content: "";
+        inset: 0;
+        position: absolute;
+      }
+
+      .pds-link-row pds-link::part(link):focus-visible {
+        outline: none;
+      }
+
+      .pds-link-row pds-link::part(link):focus-visible::after {
+        outline: var(--pine-outline-focus);
+        outline-offset: var(--pine-border-width-thick);
+      }
+
+      .pds-link-row__trailing {
+        position: relative;
+        z-index: 1;
+      }
+    </style>
+    <pds-box class="pds-link-row" border border-radius="md" padding="sm" align-items="center" justify-content="space-between">
+      <pds-box gap="xs" align-items="center">
+        <pds-icon name="file" aria-hidden="true"></pds-icon>
+        <pds-link href="#row-target" variant="plain">Quarterly report</pds-link>
+      </pds-box>
+      <pds-box class="pds-link-row__trailing">
+        <pds-button variant="secondary" size="small">Download</pds-button>
+      </pds-box>
+    </pds-box>
+  `,
+};

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

@@ -23,7 +23,7 @@
     backdrop-filter: blur(3px);
   }
 }
-pds-modal .pds-modal__backdrop {
+pds-modal pds-modal .pds-modal__backdrop {
   z-index: var(--pine-z-index-priority);
 }
 .pds-modal__backdrop::backdrop {

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

@@ -302,6 +302,12 @@ export class PdsMultiselect {
                     }
                     else {
                         this.closeDropdown();
+                        // Tab would move on to an option's checkbox, which closing removes, dropping focus to the page.
+                        // Land on the trigger instead, as Escape does; Shift+Tab already reaches it.
+                        const trigger = e.shiftKey ? undefined : this.activeTriggerEl;
+                        trigger === null || trigger === void 0 ? void 0 : trigger.focus();
+                        if (trigger === null || trigger === void 0 ? void 0 : trigger.matches(':focus'))
+                            e.preventDefault();
                     }
                     break;
                 }
@@ -1260,10 +1266,10 @@ export class PdsMultiselect {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (h(Host, { key: 'a92086af75e20b9b37b147365bfa517d96021700', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'd49e0442e3a348248e5ac3b37afc9f128b34956b', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: '41a081803dfd784e20a7135ecf5f5c4657908dd1', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (h(Host, { key: '8f1ce5ef092285ce7c0855643fae76a4ec86ee17', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'c14c3d52c1d55fb33a89f1a25055728215a1e4ab', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: 'aacd3339b0db2048b31fbc5963f7232bbff78efe', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), h("div", { key: '0e3c8a3aaf7c70b4ff71972c29b8d5599f62ec97', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+            } }, this.label)), h("div", { key: '5e1ef76aa5d46798519e5ac885bfa1c8d7c7106c', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
                 'pds-multiselect__trigger': true,
                 'pds-multiselect__trigger--open': this.isOpen,
                 'pds-multiselect__trigger--disabled': this.disabled,
@@ -1279,7 +1285,7 @@ export class PdsMultiselect {
             }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, h("span", { class: {
                 'pds-multiselect__trigger-text': true,
                 'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
-            } }, this.getTriggerText()), h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: 'd5cddc1d3374d94ecf0cce1bcaf7c7125bf3128d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: 'e3cb958b6fd2b1e138b769de0f53be1b8564902d', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: 'f6c2a30cc192391973d9b22fbb6732ce387832ac', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'f437effafaa383b81aec7b5bf635598c8b0075b8', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)), h("div", { key: 'f1e747137f2dc7cad3d4e1ff8fc293401e3173e1', style: { display: 'none' } }, h("slot", { key: 'f337137b3ca5983dc6641361101f6d19c972778c' })))));
+            } }, this.getTriggerText()), h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '590045e4769812a1a2f7a97580d21d95dbe4e872', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '419f4349b7cb17260f03d2bdcfd777561a62de42', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: 'b922af14c83348607aa9aaaefe9b03b39e71bd42', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'bd08726adf14a42f2ecf0cdfcd390e5639f9fd96', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '42ad7905fb1816ccdd29b6aa438779929804b368', style: { display: 'none' } }, h("slot", { key: '4f3bf380e93d216790efb0a5de85d6479862350e' })))));
     }
     static get is() { return "pds-multiselect"; }
     static get encapsulation() { return "shadow"; }