@pine-ds/core 4.7.2 → 4.9.0

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

@@ -22,6 +22,7 @@ export default {
     trigger: 'input',
     triggerVariant: 'secondary',
     triggerWidth: 'fit-content',
+    truncate: false,
     chipSentiment: 'neutral',
     chipLarge: false,
     chipIcon: null,
@@ -55,6 +56,7 @@ const BaseTemplate = (args) => html`
   trigger=${args.trigger}
   trigger-variant=${args.triggerVariant}
   trigger-width=${args.triggerWidth}
+  truncate=${args.truncate}
   chip-sentiment=${args.chipSentiment}
   chip-large=${args.chipLarge}
   chip-icon=${args.chipIcon}
@@ -604,6 +606,48 @@ OptionIconsWithGroups.args = {
   ],
 };
 
+// truncate: a long label in the trigger and the options, without it (wrapping, as by default) and
+// with it (one line, with an ellipsis). Options with an icon and in a group truncate too.
+const truncateOptions = [
+  { id: 'onboarding', text: 'Assessment for the quarterly onboarding cohort', icon: 'assessment' },
+  { id: 'contact', text: 'Contact who joined during the spring membership launch', icon: 'contact' },
+  { id: 'broadcast', text: 'Broadcast to everyone who joined the spring membership launch', group: 'Email', groupIcon: 'mail' },
+  { id: 'sequence', text: 'Sequence', group: 'Email' },
+  { id: 'tag', text: 'Tag', icon: 'hashtag' },
+];
+
+export const Truncate = (args) => html`
+<div style="display: flex; gap: 48px; min-height: 360px;">
+  ${[false, true].map(truncate => html`
+  <pds-combobox
+    component-id=${`combobox-truncate-${truncate ? 'on' : 'off'}`}
+    label=${truncate ? 'With truncate' : 'Without truncate'}
+    trigger=${args.trigger}
+    trigger-shape=${args.triggerShape}
+    trigger-variant=${args.triggerVariant}
+    mode="select-only"
+    trigger-width=${args.triggerWidth}
+    dropdown-width=${args.triggerWidth}
+    value=${args.value}
+    ?truncate=${truncate}
+    .options=${args.options}
+  ></pds-combobox>`)}
+</div>`;
+
+Truncate.args = {
+  trigger: 'button',
+  triggerShape: 'input',
+  triggerVariant: 'secondary',
+  triggerWidth: '240px',
+  value: 'onboarding',
+  options: truncateOptions,
+};
+
+Truncate.argTypes = {
+  trigger: { control: 'select', options: ['input', 'button'] },
+  triggerShape: { control: 'select', options: ['pill', 'input'] },
+};
+
 // 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: '8a9b10b5d0e348b73f8a6bd7933083c596df10d8', class: { [`pds-container--${this.size}`]: isNamed }, style: Object.keys(hostStyle).length ? hostStyle : undefined }, h(Tag, { key: '55fb22be49377c4cccf08381e7cf954a3f097d08', part: "container" }, h("slot", { key: '4cd9c4fa74a2c6a056e076ab67a0279c395b5c79' }))));
+        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' }))));
     }
     static get is() { return "pds-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -107,7 +107,7 @@ export class PdsCopytext {
     render() {
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: 'a3517b135fc3e3677e30b6ad5811c1170a819b65', class: hostClass, id: this.componentId }, h("pds-button", { key: '02f56bed02ed3963a3d80a92148d6619a845224a', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '95fd1284e3d227b74dab613eb71f5385c3a0be29', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '21af67a8c9165e56d2d2b0cf19df7c7e3f290c72', "aria-hidden": "true", icon: copyIcon, size: "16px" }))));
+        return (h(Host, { key: '35d74eaecedd432f7852545522f9ce72396f9ab9', class: hostClass, id: this.componentId }, h("pds-button", { key: '9550ce2fb21166e9726b08b5928036244c7b729e', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '47af45448759c911ca4ca03d0158088289b622e0', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '3ddab7c3e7063843cd606ffb19481cae3792db43', "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: '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", {
+        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", {
             // 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: '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)));
+        }, 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)));
     }
     static get is() { return "pds-datepicker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -93,7 +93,7 @@ WithValue.args = {
 
 export const MinAndMax = BaseTemplate.bind({});
 MinAndMax.args = {
-  componentId: 'pds-datepicker-range-example',
+  componentId: 'pds-datepicker-min-max-example',
   helperMessage: 'Pick a day between October 5 and November 20.',
   label: 'Delivery date',
   max: '2026-11-20',

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

@@ -29,7 +29,7 @@ export class PdsDivider {
         return classNames.join(' ');
     }
     render() {
-        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() }))));
+        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() }))));
     }
     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: 'f307939ab0a94f6a0d8a3675c658def0ded68b98', class: "pds-drawer-content" }, h("slot", { key: 'dadac08ac15bb8ded98ea982511e2d57bea9bdca' })));
+        return (h("div", { key: 'b15b087506c1292f9d67e531e8d935069749c09d', class: "pds-drawer-content" }, h("slot", { key: '9c60ca75c7905e7e994f9c41eee213b962afb833' })));
     }
     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: 'b58c68d88b467e8baa3682d16f97076d06ea2414', class: "pds-drawer__footer" }, h("slot", { key: 'ff2306202c14029b397d40b5bb3d672a8aa571c0' })));
+        return (h("footer", { key: 'a4eec0aff617c605b94f8d3b9ec1e2d98cded6fb', class: "pds-drawer__footer" }, h("slot", { key: '6dc379c940e37edfd05d99728be9dff58ca1d717' })));
     }
     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: '280e6ca734317d5733e4c595431c8070eff13d58', class: "pds-drawer__header" }, h("slot", { key: 'cc6af6084600c4dc60d7bd99e040376abdf5ffe3' })));
+        return (h("header", { key: '6b9338e5dbf7a7e580c11b28c95ca53693528382', class: "pds-drawer__header" }, h("slot", { key: '0990fbcf94c0c438b98cf1e8945f1e2fd9aa33dc' })));
     }
     static get is() { return "pds-drawer-header"; }
     static get originalStyleUrls() {

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

@@ -148,11 +148,11 @@ export class PdsDrawer {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '287bf043c991209488eb1b617031acffb59ff9af', class: {
+        return (h(Host, { key: '7cf13256457914e48e8fde422832a2a52ee0c13b', class: {
                 'pds-drawer': true,
                 [`pds-drawer--${this.side}`]: true,
                 [`pds-drawer--${this.size}`]: true,
-            } }, h("pds-modal", { key: 'cd86fb552353f5cc12fb36fc956033432a91847c', class: { 'pds-drawer__modal': true, 'pds-drawer__modal--modal': this.modal }, ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: !this.modal, backdropDismiss: this.lightDismiss, disableInitialFocus: !this.modal && this.initialFocus === 'none' }, h("slot", { key: '56bbe9b5c26b10b07c0f503ba147899a57a5de85' }))));
+            } }, h("pds-modal", { key: 'd4ceb5b4c0b03930aa3d001ae1bbbfbf449bde33', class: { 'pds-drawer__modal': true, 'pds-drawer__modal--modal': this.modal }, ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: !this.modal, backdropDismiss: this.lightDismiss, disableInitialFocus: !this.modal && this.initialFocus === 'none' }, h("slot", { key: '41bfdea76282b333ca6950048999cb9d94e69438' }))));
     }
     static get is() { return "pds-drawer"; }
     static get originalStyleUrls() {

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

@@ -42,6 +42,14 @@
   outline-offset: var(--pine-border-width);
 }
 
+:host(.is-informational) {
+  cursor: default;
+}
+:host(.is-informational) .pds-dropdown-menu-item__content:hover {
+  background-color: transparent;
+  color: var(--pine-color-text);
+}
+
 :host(.destructive) .pds-dropdown-menu-item__content {
   --pds-context-link-color: var(--pine-color-danger);
   --pds-context-link-color-hover: var(--pine-color-danger-hover);

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

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 /**
- * @part button
+ * @part button - Exposes the item's inner element for styling. Appears on button and informational items, not on links.
  */
 export class PdsDropdownMenuItem {
     constructor() {
@@ -14,9 +14,17 @@ export class PdsDropdownMenuItem {
          * @defaultValue false
          */
         this.disabled = false;
+        /**
+         * It determines whether or not the dropdown-item is informational: text that the arrow keys
+         * reach but that can't be activated. Takes precedence over `href` and `destructive`.
+         * Screen readers announce it as dimmed or unavailable, the same way as a disabled item.
+         * @defaultValue false
+         */
+        this.informational = false;
         /**
          * Determines whether the link should open in a new tab and display an external icon.
          * This is a simpler alternative to using `target="_blank"` for the common case.
+         * Ignored when `informational` is set.
          * @defaultValue false
          */
         this.external = false;
@@ -27,6 +35,12 @@ export class PdsDropdownMenuItem {
         this.handleBlur = () => {
             this.hasFocus = false;
         };
+        // Space would otherwise scroll the page, since nothing in the item takes the key.
+        this.handleInformationalKeyDown = (event) => {
+            if (event.key === ' ') {
+                event.preventDefault();
+            }
+        };
         this.handleKeyDown = (event) => {
             // Handle keyboard events
             if (!this.disabled && (event.key === 'Enter')) {
@@ -48,6 +62,8 @@ export class PdsDropdownMenuItem {
     ;
     handleClick() {
         var _a;
+        if (this.informational)
+            return;
         // Filter only pds-dropdown-menu-item elements and find the index of the current item
         const menuItems = Array.from(this.host.parentNode.children).filter((child) => child.tagName.toLowerCase() === 'pds-dropdown-menu-item');
         const itemIndex = menuItems.indexOf(this.host);
@@ -60,8 +76,14 @@ export class PdsDropdownMenuItem {
         });
     }
     renderElement() {
+        if (this.informational) {
+            return (h("div", { class: {
+                    'pds-dropdown-menu-item__content': true,
+                    'has-focus': this.hasFocus
+                }, role: "menuitem", "aria-disabled": "true", part: "button", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleInformationalKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("slot", null)));
+        }
         if (this.href != null) {
-            return (h("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, target: this.target, class: {
+            return (h("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, externalLabel: this.externalLabel, target: this.target, class: {
                     'pds-dropdown-menu-item__content': true,
                     'has-focus': this.hasFocus
                 }, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-disabled": this.disabled ? 'true' : null }, h("slot", null)));
@@ -72,7 +94,14 @@ 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: '2d499a06768bdc4b9a34774d16c1f1e10804b3d5', 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: 'a69947d99160783919f711d7c53e0592694f9565', id: this.componentId, class: {
+                'is-disabled': this.disabled,
+                'is-informational': this.informational,
+                'destructive': !this.disabled && !this.informational && this.destructive
+            }, onClick: () => !this.disabled && this.handleClick(), role: "none",
+            // ARIA ignores role="none" on focusable elements, so a focusable host would sit between
+            // the menu and the informational menuitem as an unexpected child.
+            tabIndex: this.informational ? null : -1, "aria-disabled": this.disabled && !this.informational ? 'true' : null }, this.renderElement()));
     }
     static get is() { return "pds-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -165,7 +194,7 @@ export class PdsDropdownMenuItem {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Prompts the user to save the linked URL instead of navigating to it.\nIt can be used without a value to download with the default filename,\nor with a string value to suggest a specific filename for the download.\nOnly applies when href is set."
+                    "text": "Prompts the user to save the linked URL instead of navigating to it.\nIt can be used without a value to download with the default filename,\nor with a string value to suggest a specific filename for the download.\nOnly applies when href is set. Ignored when `informational` is set."
                 },
                 "getter": false,
                 "setter": false,
@@ -184,13 +213,36 @@ export class PdsDropdownMenuItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button."
+                    "text": "If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button.\nIgnored when `informational` is set."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "href"
             },
+            "informational": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "It determines whether or not the dropdown-item is informational: text that the arrow keys\nreach but that can't be activated. Takes precedence over `href` and `destructive`.\nScreen readers announce it as dimmed or unavailable, the same way as a disabled item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "informational",
+                "defaultValue": "false"
+            },
             "external": {
                 "type": "boolean",
                 "mutable": false,
@@ -206,7 +258,7 @@ export class PdsDropdownMenuItem {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Determines whether the link should open in a new tab and display an external icon.\nThis is a simpler alternative to using `target=\"_blank\"` for the common case."
+                    "text": "Determines whether the link should open in a new tab and display an external icon.\nThis is a simpler alternative to using `target=\"_blank\"` for the common case.\nIgnored when `informational` is set."
                 },
                 "getter": false,
                 "setter": false,
@@ -214,6 +266,28 @@ export class PdsDropdownMenuItem {
                 "attribute": "external",
                 "defaultValue": "false"
             },
+            "externalLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'(opens in a new tab)'"
+                        }],
+                    "text": "Accessible label for the external-link icon, passed to the inner\n`pds-link`. Pass a translated string to localize it; defaults to English.\nPass an empty string to make the icon decorative."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "external-label"
+            },
             "target": {
                 "type": "string",
                 "mutable": false,
@@ -229,7 +303,7 @@ export class PdsDropdownMenuItem {
                             "name": "defaultValue",
                             "text": "undefined"
                         }],
-                    "text": "Specifies where to open the linked document when href is provided.\nTakes precedence over the `external` prop if both are set.\nOnly applies when href is set."
+                    "text": "Specifies where to open the linked document when href is provided.\nTakes precedence over the `external` prop if both are set.\nOnly applies when href is set. Ignored when `informational` is set."
                 },
                 "getter": false,
                 "setter": false,

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: '60407a2edc8b4667d39cbd1ba9a859d09b0b8ff1', id: this.componentId }, h("hr", { key: '8485d1c8508c5fe5e3635505f25e278f45f45b82' })));
+        return (h(Host, { key: '72f29c5015d2379d9986c90ec966f34f41298226', id: this.componentId }, h("hr", { key: '72c2155d0fbee6346f3f38997009a7d9e14ad0c8' })));
     }
     static get is() { return "pds-dropdown-menu-separator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -201,11 +201,11 @@ export class PdsDropdownMenu {
             if (tagName === 'pds-dropdown-menu-item') {
                 // For pds-dropdown-menu-item, focus the inner element
                 const menuItem = item;
-                const innerButton = (_a = menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
+                const innerControl = (_a = menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [role="menuitem"]');
                 const innerLink = ((_d = (_c = (_b = menuItem.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('pds-link')) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('a'))
                     || ((_e = menuItem.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('a'));
-                if (innerButton) {
-                    innerButton.focus();
+                if (innerControl) {
+                    innerControl.focus();
                 }
                 else if (innerLink) {
                     innerLink.focus();
@@ -357,7 +357,7 @@ export class PdsDropdownMenu {
         }
     }
     render() {
-        return (h(Host, { key: '18dac4d59ea236fe171f4c16f6571cb1547059c6', id: this.componentId }, h("slot", { key: '95201a75a33ccb70dbd51a5cf9d78c76ebf26f65', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '7fc588f40f607ad81ad70bf74a525d078d32a80b', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, h("div", { key: '73d13d94edccb68db7b703f930b50f729334efa8', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, h("slot", { key: '7066f3a6f71c8961326f38f0509f1c0cc17098ae', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '9f07ec488b688c58c6422b575015ccd364075fe8', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, h("slot", { key: 'd0aad3f9ac3b58779669411523adbb8878dec61c', onSlotchange: this.handleSlotChange })))));
+        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 })))));
     }
     static get is() { return "pds-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,3 +36,42 @@ Default.args = {
   componentId: 'base-dropdown',
   placement: 'bottom-start',
 }
+
+const InformationalTemplate = (args) => html`
+<div style="height: 200px">
+  <pds-dropdown-menu
+    component-id=${args.componentId}
+    placement=${args.placement}
+  >
+    <pds-button slot="trigger" variant="secondary">Used on</pds-button>
+    <pds-dropdown-menu-item href="#products">3 products</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item informational>2 forms</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item href="#emails">5 emails</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item informational href="#pages">1 page</pds-dropdown-menu-item>
+  </pds-dropdown-menu>
+</div>`;
+
+export const Informational = InformationalTemplate.bind();
+Informational.args = {
+  componentId: 'informational-dropdown',
+  placement: 'bottom-start',
+}
+
+const InformationalOnlyTemplate = (args) => html`
+<div style="height: 200px">
+  <pds-dropdown-menu
+    component-id=${args.componentId}
+    placement=${args.placement}
+  >
+    <pds-button slot="trigger" variant="secondary">Used on</pds-button>
+    <pds-dropdown-menu-item informational>3 products</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item informational>2 forms</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item informational>5 emails</pds-dropdown-menu-item>
+  </pds-dropdown-menu>
+</div>`;
+
+export const InformationalOnly = InformationalOnlyTemplate.bind();
+InformationalOnly.args = {
+  componentId: 'informational-only-dropdown',
+  placement: 'bottom-start',
+}

package/dist/collection/components/pds-filters/pds-filter/pds-filter.js

@@ -485,7 +485,7 @@ export class PdsFilter {
         return null;
     }
     render() {
-        return (h(Host, { key: '3cae951aee1f9c75f3e207cf6c68633a23f8f6dc', id: this.componentId }, h("button", { key: 'f4c644710dc936248995be9a49cef8ad13031d61', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, h("span", { key: '2dd87e53f363118becc762051ea1be664258b8b6', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: '733ceb5e07198e844fbdc1af294d2046c4c571d8', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: 'beb65a21192c6f5c16703aec7ab9a92ea378ef3c', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: '5a481cc6b143b059a5fc33d377abe5ab79aefb4e' })))));
+        return (h(Host, { key: '9b2286e9a0d7f88b7f6bc90f8444185cfec832c8', id: this.componentId }, h("button", { key: '968953600d615f2739757a91422dafdb817c9a6f', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, h("span", { key: 'ee479f7e510ffcb54f7857cb7d1345f2a5c1d76a', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: 'e98aa8b915a2460f3c7d49e20ec7d43853ee5f9f', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: '3084babfba2d96880b2829a60d2ef00140a6813b', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: 'e901488be75a18bedc6b2c42be5c398fd2cf2a29' })))));
     }
     static get is() { return "pds-filter"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class PdsFilters {
     render() {
-        return (h(Host, { key: '8688235fe7cdea1b4fc540156ff21bb9711b41b6', id: this.componentId }, h("div", { key: 'e51a37977df8c31f99b28d8c7e4bedb0d63e53c6', class: "pds-filters" }, h("slot", { key: '8ce936da4d3f0213408090bc3eeb011920f9aa6c' }))));
+        return (h(Host, { key: '6f785fc222e3b5b7cf932f704b56aa7f1f52ead3', id: this.componentId }, h("div", { key: '0ffd2894cdeb1e632228b4c3fa523069dcffa4b2', class: "pds-filters" }, h("slot", { key: 'a3f42dedcda1b0fec78a33793d085791d9b9fc5c' }))));
     }
     static get is() { return "pds-filters"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,9 +15,9 @@ export class PdsImage {
         this.loading = 'eager';
     }
     render() {
-        return (h(Host, { key: '1e8bb3882c2a629004ce1441e85d5c5a75a84e98', class: {
+        return (h(Host, { key: '6d2d48c468c39f53d67e63999dd83f3ad61053b5', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: 'b50b19d51431d45027c7a918a4ba4c38493741d5', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+            }, id: this.componentId }, h("img", { key: '393cc584586e37e8d5b602fbdcda1783bf80cf9b', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
     }
     static get is() { return "pds-image"; }
     static get encapsulation() { return "shadow"; }

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

@@ -289,10 +289,10 @@ export class PdsInput {
             'has-prepend': this.hasPrepend,
             'has-append': this.hasAppend,
         };
-        return (h(Host, { key: '75eb8bc6cda5e947f8677ebefe7995688f03f947', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, h("div", { key: '93d7f90b9a64daccea1533abc08a8cb18825b828', class: "pds-input" }, label && (h("div", { key: '948109b3bfa1a1b8171572da9160425e3e35a7a6', class: {
+        return (h(Host, { key: '1706e29a68d25a8bb83c36d6bddace04a448f6f5', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, h("div", { key: '1488b6ea995c4ffc4068757f566494c0ac073950', class: "pds-input" }, label && (h("div", { key: 'e2fe4e461e626648ec51882e92e02fea179e3e13', class: {
                 'pds-input__label-wrapper': true,
                 'visually-hidden': this.hideLabel,
-            } }, h("label", { key: 'bb0e6c6febb97ad4aa3942ac5e67ac42dc1bde0a', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: 'c6a122f829aa3b92ccb715c3f3975f6baadb3028' }, label, this.required && h("span", { key: 'dce7d1a9c010a545992734bd238e9f6a4ca7b4ce', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: '1b92ab5d649a4a9cf8112ea9b8a8a1095714f6d0', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: 'bc3c4b907312149d375bb78f9912e4501da59348', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (h("p", { key: 'f7bcbafc17a20310d602fce14a0adad522acbcb1', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'bbbd6dc3203b89e5759587147de74d2ce3ce6177', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: '68a6a92c82c1756ad99f431e0cb56756e3cdf75c', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
+            } }, h("label", { key: 'c926a6fbb3130afdc6c86d509b92fb6650391c4b', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: 'dbbaf9d0db49f949f69f1faf848e7c6193e32793' }, label, this.required && h("span", { key: '42e6325a0f5ee276ed92cf2eb71942c268c3d1aa', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: '4715743733f2d7d3e4edf9ac4ab6d69ffde04d00', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: '438ac0fc6d497a8227c83e628d29d4633ffc208a', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (h("p", { key: '43b5c3a332072f19a38be316565602932c61504d', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: '54fd4fc2dcbc645377edbe4d04cfd82c7d1591e8', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: '2bd509a575ec5c7a548955dd7f706d7c1d42557e', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
     }
     static get is() { return "pds-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -211,8 +211,8 @@ export const withSuffixButton = (args) => html`<pds-input
   ?required=${args.required}
   type="text"
   value="${args.value}">
-  <pds-button slot="suffix" variant="unstyled" class="pds-input__suffix">
-    <pds-icon name="search" size="small"></pds-icon>
+  <pds-button slot="suffix" variant="unstyled" class="pds-input__suffix" aria-label="Submit search">
+    <pds-icon name="search" size="small" aria-hidden="true"></pds-icon>
   </pds-button>
 </pds-input>`;
 
@@ -355,8 +355,8 @@ export const withPrependAndSuffix = (args) => html`<pds-input
     <option value="EUR">EUR</option>
     <option value="GBP">GBP</option>
   </pds-select>
-  <pds-button slot="suffix" variant="unstyled" class="pds-input__suffix">
-    <pds-icon name="remove-circle" size="small"></pds-icon>
+  <pds-button slot="suffix" variant="unstyled" class="pds-input__suffix" aria-label="Clear amount">
+    <pds-icon name="remove-circle" size="small" aria-hidden="true"></pds-icon>
   </pds-button>
 </pds-input>`;
 
@@ -399,7 +399,7 @@ export const withActionButton = (args) => html`<pds-input
   ?required=${args.required}
   type="text"
   value="${args.value}">
-  <pds-button slot="action" variant="unstyled">
-    <pds-icon name="question-circle"></pds-icon>
+  <pds-button slot="action" variant="unstyled" aria-label="Help with username">
+    <pds-icon name="question-circle" aria-hidden="true"></pds-icon>
   </pds-button>
 </pds-input>`;

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

@@ -1,6 +1,8 @@
 import { h } from "@stencil/core";
 import { setColor } from "../../utils/utils";
 import { launch } from "@pine-ds/icons/icons";
+// Used when `externalLabel` is unset; an empty string hides the icon instead.
+const DEFAULT_EXTERNAL_LABEL = '(opens in a new tab)';
 /**
  * @part link - Link element styles.
  * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.
@@ -53,11 +55,18 @@ export class PdsLink {
         return linkStyles;
     }
     render() {
+        var _a;
         const targetValue = this.target || (this.external ? '_blank' : undefined);
         const showExternalIcon = this.external;
-        const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
-        return (h("a", { key: '3b6f9d19d7f50d0606cf5f3c3a97b85ee4aa63b0', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, h("slot", { key: 'a265f1c4c9b6ff089b23906d8f650bfd65b25013' }, this.href), showExternalIcon &&
-            h("pds-icon", { key: '9553a8256b6811296ea4b762e32662c1a2f4aecf', icon: launch, size: this.fontSize })));
+        const opensInNewTab = targetValue === '_blank';
+        const relValue = opensInNewTab ? 'noopener noreferrer' : undefined;
+        // A `target` other than _blank overrides `external`, and then the label
+        // would be false, so the icon is decorative there, as it is when the
+        // label is empty.
+        const externalLabel = (_a = this.externalLabel) !== null && _a !== void 0 ? _a : DEFAULT_EXTERNAL_LABEL;
+        const externalIconLabel = opensInNewTab && externalLabel !== '' ? externalLabel : undefined;
+        return (h("a", { key: 'ae7928aa6dce42657545a1d17581818d3724746f', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, h("slot", { key: 'e61374c58fddec869f2f5dda54634a0b1ba9f345' }, this.href), showExternalIcon &&
+            h("pds-icon", { key: '161657146e5f3ce360480c573ea8f14c9012cb1f', icon: launch, size: this.fontSize, "aria-label": externalIconLabel, "aria-hidden": externalIconLabel === undefined ? 'true' : undefined })));
     }
     static get is() { return "pds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -179,6 +188,28 @@ export class PdsLink {
                 "attribute": "external",
                 "defaultValue": "false"
             },
+            "externalLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'(opens in a new tab)'"
+                        }],
+                    "text": "Accessible label for the icon that `external` shows, appended to the\nlink's name. It isn't announced when `target` keeps the link in the same\ntab. Pass a translated string to localize it; defaults to English. Pass an\nempty string to make the icon decorative."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "external-label"
+            },
             "target": {
                 "type": "string",
                 "mutable": false,