@pine-ds/core 4.9.1 → 4.11.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/date-utils.js

@@ -130,3 +130,45 @@ export function dateFormatter(locale, options) {
 export function formatDate(date, locale, options) {
     return dateFormatter(locale, options).format(date);
 }
+/**
+ * Month-day mode's year. A leap year, so February has its 29th; every date the mode holds is in it,
+ * and the value drops it (`--MM-DD`).
+ */
+export const MONTH_DAY_YEAR = 2000;
+const MONTH_DAY = /^--(\d{2})-(\d{2})$/;
+/** The same month and day in month-day mode's year. */
+export function inMonthDayYear(date) {
+    return new Date(Date.UTC(MONTH_DAY_YEAR, date.getUTCMonth(), date.getUTCDate()));
+}
+/**
+ * Parses a month and day, `--MM-DD` (ISO 8601 without a year), to a date in month-day mode's year.
+ * A full `YYYY-MM-DD` reads as its month and day. `null` when it isn't a real month and day.
+ */
+export function parseMonthDay(value) {
+    const text = (value !== null && value !== void 0 ? value : '').trim();
+    const match = MONTH_DAY.exec(text);
+    if (match)
+        return parseIsoDate(`${MONTH_DAY_YEAR}-${match[1]}-${match[2]}`);
+    const date = parseIsoDate(text);
+    return date && inMonthDayYear(date);
+}
+/** A date's month and day as `--MM-DD`. */
+export function toMonthDay(date) {
+    return `-${toIsoDate(date).slice(4)}`;
+}
+/**
+ * A month's days for month-day mode, which has no weekdays: rows of seven from the 1st, with the
+ * last row filled out with `null`.
+ */
+export function monthDayRows(month) {
+    const cells = [];
+    for (let day = 1; day <= daysInMonth(MONTH_DAY_YEAR, month); day++) {
+        cells.push(new Date(Date.UTC(MONTH_DAY_YEAR, month, day)));
+    }
+    while (cells.length % 7 !== 0)
+        cells.push(null);
+    const rows = [];
+    for (let i = 0; i < cells.length; i += 7)
+        rows.push(cells.slice(i, i + 7));
+    return rows;
+}