@pine-ds/core 4.7.2 → 4.9.0

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

@@ -1,6 +1,8 @@
 import { Host, h } from "@stencil/core";
 import { hasShadowDom } from "../../utils/utils";
+import { ARIA_REFERENCE_ATTRIBUTES, forwardAriaReferences } from "../../utils/aria-references";
 import { caretDown, addCircle } from "@pine-ds/icons/icons";
+const FORWARDED_ARIA_ATTRIBUTES = ['aria-current', 'aria-expanded', 'aria-haspopup', 'aria-label', 'aria-pressed'];
 /**
  * @part button - Exposes the underlying button (or anchor) element for styling, including custom size, shape, or surface on icon-only placements (e.g. a compact square or inverse icon button).
  * @part button-content - Exposes the button content for styling.
@@ -57,12 +59,22 @@ export class PdsButton {
         this.variant = 'primary';
         this.hasStartContent = false;
         this.hasEndContent = false;
-        this.triggerExpanded = null;
-        this.triggerHasPopup = null;
-        this.syncTriggerAria = () => {
-            this.triggerExpanded = this.el.getAttribute('aria-expanded');
-            this.triggerHasPopup = this.el.getAttribute('aria-haspopup');
-            this.forwardAriaControls();
+        this.forwardedAria = {};
+        // Copied rather than moved: frameworks and DOM morphs put host attributes back on every update,
+        // so taking them off the host would fight each one.
+        this.syncHostAria = () => {
+            const forwarded = {};
+            FORWARDED_ARIA_ATTRIBUTES.forEach((name) => (forwarded[name] = this.el.getAttribute(name)));
+            // A new object always re-renders, and frameworks re-set unchanged attributes on every render of their own.
+            if (FORWARDED_ARIA_ATTRIBUTES.some((name) => forwarded[name] !== this.forwardedAria[name])) {
+                this.forwardedAria = forwarded;
+            }
+            this.forwardAriaReferences();
+        };
+        // A hint added after the button, or replaced by a framework or a DOM morph, is picked up by the
+        // time focus reaches the button and it's announced.
+        this.handleFocusIn = () => {
+            this.forwardAriaReferences();
         };
         this.handleStartSlotChange = (event) => {
             this.hasStartContent = event.target.assignedElements({ flatten: true }).length > 0;
@@ -99,22 +111,22 @@ export class PdsButton {
         };
     }
     connectedCallback() {
-        this.syncTriggerAria();
+        this.syncHostAria();
         if (typeof MutationObserver === 'undefined')
             return;
-        // Popovers and menus set these on the host after render, but only the inner element is announced.
-        this.triggerAriaObserver = new MutationObserver(this.syncTriggerAria);
-        this.triggerAriaObserver.observe(this.el, {
-            attributeFilter: ['aria-controls', 'aria-expanded', 'aria-haspopup'],
+        // Consumers, popovers and menus set these on the host, often after render, but only the inner element is announced.
+        this.hostAriaObserver = new MutationObserver(this.syncHostAria);
+        this.hostAriaObserver.observe(this.el, {
+            attributeFilter: FORWARDED_ARIA_ATTRIBUTES.concat(ARIA_REFERENCE_ATTRIBUTES),
         });
     }
     disconnectedCallback() {
         var _a;
-        (_a = this.triggerAriaObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.triggerAriaObserver = undefined;
+        (_a = this.hostAriaObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.hostAriaObserver = undefined;
     }
     componentDidRender() {
-        this.forwardAriaControls();
+        this.forwardAriaReferences();
     }
     /**
      * Listen for Enter key presses on form inputs to trigger submit
@@ -165,25 +177,9 @@ export class PdsButton {
             }
         }
     }
-    // ID references can't cross the shadow boundary, so aria-controls is forwarded as element references.
-    forwardAriaControls() {
-        var _a, _b;
-        if (!this.contentEl || !('ariaControlsElements' in this.contentEl))
-            return;
-        const ids = (_b = (_a = this.el.getAttribute('aria-controls')) === null || _a === void 0 ? void 0 : _a.split(/\s+/).filter(Boolean)) !== null && _b !== void 0 ? _b : [];
-        const controlled = ids.map((id) => this.findInAncestorRoots(id)).filter((el) => el !== null);
-        this.contentEl.ariaControlsElements = controlled.length > 0 ? controlled : null;
-    }
-    // A trigger inside another component's shadow root still controls a popover portal on document.body.
-    findInAncestorRoots(id) {
-        let root = this.el.getRootNode();
-        while (root instanceof ShadowRoot) {
-            const found = root.getElementById(id);
-            if (found)
-                return found;
-            root = root.host.getRootNode();
-        }
-        return root instanceof Document ? root.getElementById(id) : null;
+    forwardAriaReferences() {
+        if (this.contentEl)
+            forwardAriaReferences(this.el, this.contentEl);
     }
     classNames() {
         const classNames = ['pds-button'];
@@ -229,16 +225,13 @@ export class PdsButton {
     }
     render() {
         // Common props for both button and anchor elements
-        const commonProps = {
-            'aria-expanded': this.triggerExpanded,
-            'aria-haspopup': this.triggerHasPopup,
-            class: this.classNames(),
-            part: 'button',
-            ref: (el) => (this.contentEl = el),
-        };
+        const commonProps = Object.assign(Object.assign({}, this.forwardedAria), { class: this.classNames(), part: 'button', ref: (el) => (this.contentEl = el) });
         const attributes = () => {
             if (this.href) {
-                return Object.assign(Object.assign({}, commonProps), { download: this.download, href: this.disabled ? null : this.href, target: this.target });
+                return Object.assign(Object.assign({}, commonProps), {
+                    // ARIA allows aria-pressed only on buttons, so a link never gets it.
+                    'aria-pressed': null, download: this.download, href: this.disabled ? null : this.href, target: this.target
+                });
             }
             return Object.assign(Object.assign({}, commonProps), { 'aria-busy': this.loading ? 'true' : null, 'aria-live': this.loading ? 'polite' : null, 'disabled': this.disabled, 'name': this.name, 'type': this.type, 'value': this.value });
         };
@@ -246,7 +239,7 @@ export class PdsButton {
         // Hide text when loading or iconOnly is true
         const hideText = this.loading || this.iconOnly;
         const content = (h("div", { class: "pds-button__content", part: "button-content" }, this.renderStartContent(), h("span", { class: `pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`, part: "button-text" }, h("slot", null)), this.loading && (h("span", { class: "pds-button__loader" }, h("pds-loader", { "is-loading": true, size: "var(--pine-font-size-body-2xl)", variant: "spinner", exportparts: "loader-svg" }, "Loading..."))), this.renderEndContent()));
-        return (h(Host, Object.assign({ "aria-disabled": this.disabled ? 'true' : null }, (this.componentId != null ? { id: this.componentId } : {}), { onClick: this.handleClick, variant: this.variant }), h(ContentElement, Object.assign({}, attributes()), content)));
+        return (h(Host, Object.assign({ "aria-disabled": this.disabled ? 'true' : null }, (this.componentId != null ? { id: this.componentId } : {}), { onClick: this.handleClick, onFocusin: this.handleFocusIn, variant: this.variant }), h(ContentElement, Object.assign({}, attributes()), content)));
     }
     static get is() { return "pds-button"; }
     static get encapsulation() { return "shadow"; }
@@ -567,8 +560,7 @@ export class PdsButton {
         return {
             "hasStartContent": {},
             "hasEndContent": {},
-            "triggerExpanded": {},
-            "triggerHasPopup": {}
+            "forwardedAria": {}
         };
     }
     static get events() {

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

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 
 import { customArgsWithIconControl } from '../../../stories/_helpers';
@@ -31,6 +32,7 @@ export default {
 
 const BaseTemplate = (args) => html`
   <pds-button
+    aria-label=${ifDefined(args.ariaLabel)}
     component-id=${args.componentId}
     ?disabled=${args.disabled}
     ?full-width=${args.fullWidth}
@@ -135,14 +137,12 @@ Disclosure.parameters = {
 
 export const IconOnly = BaseTemplate.bind();
 IconOnly.args = {
+  ariaLabel: 'Favorite',
   disabled: false,
   fullWidth: false,
   icon: 'favorite',
   iconOnly: true,
   loading: false,
-  slot: {
-    default: 'Icon Only',
-  },
   type: 'button',
   variant: 'secondary',
 };

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

@@ -155,4 +155,83 @@ label {
 }
 .pds-checkbox__message--error pds-icon {
   margin-block-start: var(--pine-dimension-025);
+}
+
+:host(.pds-checkbox--pill) {
+  position: relative;
+}
+:host(.pds-checkbox--pill) label {
+  align-items: center;
+  background: var(--pine-color-background-container);
+  border: var(--pine-border);
+  border-radius: var(--pine-border-radius-full);
+  box-sizing: border-box;
+  color: var(--pine-color-text-active);
+  cursor: pointer;
+  font: var(--pine-typography-body);
+  min-block-size: var(--pine-dimension-xl);
+  padding: 0 var(--pine-dimension-sm);
+  transition: border-color var(--pine-motion-duration-fast) ease;
+}
+:host(.pds-checkbox--pill) label span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+:host(.pds-checkbox--pill) label:hover {
+  border-color: var(--pine-color-text);
+}
+:host(.pds-checkbox--pill) label:has(input:checked) {
+  border-color: var(--pine-color-text-active);
+  box-shadow: inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);
+}
+:host(.pds-checkbox--pill) label:has(input:focus-visible) {
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width-thick);
+}
+:host(.pds-checkbox--pill) label:has(input:disabled) {
+  background: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
+  color: var(--pine-color-text-disabled);
+  cursor: not-allowed;
+}
+:host(.pds-checkbox--pill) label:has(input:disabled:checked) {
+  border-color: var(--pine-color-text-disabled);
+  box-shadow: inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled);
+}
+@media (forced-colors: active) {
+  :host(.pds-checkbox--pill) label:has(input:disabled) {
+    border-color: GrayText;
+  }
+  :host(.pds-checkbox--pill) label:has(input:checked) {
+    border-color: Highlight;
+    border-width: var(--pine-border-width-thick);
+    padding-inline: calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)));
+  }
+  :host(.pds-checkbox--pill) label:has(input:disabled:checked) {
+    border-color: GrayText;
+    border-width: var(--pine-border-width-thick);
+    padding-inline: calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)));
+  }
+}
+:host(.pds-checkbox--pill) .pds-checkbox__message {
+  margin-inline-start: 0;
+}
+
+:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label {
+  border-color: var(--pine-color-border-danger);
+  color: var(--pine-color-text-active);
+}
+:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked) {
+  border-color: var(--pine-color-border-danger);
+  box-shadow: inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger);
+}
+:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:focus-visible) {
+  outline: var(--pine-outline-focus-danger);
+}
+@media (forced-colors: active) {
+  :host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked) {
+    border-color: Highlight;
+    border-width: var(--pine-border-width-thick);
+    padding-inline: calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)));
+  }
 }

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

@@ -15,6 +15,11 @@ export class PdsCheckbox {
          * It determines whether or not the checkbox is checked.
          */
         this.checked = false;
+        /**
+         * Sets the style variant of the checkbox. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
+         * @defaultValue default
+         */
+        this.variant = 'default';
         this.handleCheckboxChange = (e) => {
             if (this.disabled) {
                 return;
@@ -54,6 +59,9 @@ export class PdsCheckbox {
         if (this.hasLabelSlot) {
             classNames.push('has-label-slot');
         }
+        if (this.variant === 'pill') {
+            classNames.push('pds-checkbox--pill');
+        }
         return classNames.join('  ');
     }
     connectedCallback() {
@@ -116,9 +124,9 @@ export class PdsCheckbox {
     render() {
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: 'bbe09a5e9eb55f62b2921b09a04ddc9476a871ae', class: hostClass }, h("label", { key: 'fa1856d9306eb8c0c19618ea5e2619ea20c3c51d', htmlFor: this.componentId }, h("input", Object.assign({ key: '8537d97a8e69a17d0d563306dac179e393885dda', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), h("span", { key: 'e523922889c80a2d18243cb560cd855bab95803d', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: 'b6ff34ecbc346d254a0211bfa610823feedb486b', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
-            h("div", { key: '55dcca850dff0aa93d9ba63d6827d9155ac35dab', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '5af843679994d29f084d41e90e41e0939c951063', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '10f7efe5d4b252d9dea6f398eff973ba32506898', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: '8e9185653796f250ad425350b9adc1f65fd047c1', class: hostClass }, h("label", { key: 'e17bab4b96b4ffc716e311ecea488a3025e1551c', htmlFor: this.componentId }, h("input", Object.assign({ key: '8af9bbc3dbe18409532e95b4b490eab4aabc8762', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput, class: this.variant === 'pill' ? 'visually-hidden' : undefined }, this.inheritedAttributes)), h("span", { key: '1e4d9a826b6b5ec429ae47096d4aede3af43d110', class: this.hideLabel && this.variant !== 'pill' ? 'visually-hidden' : '' }, h("slot", { key: '7b10c7d1e018be4afe019cb56e82a5ec7a638de8', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
+            h("div", { key: 'c5455322eb07bf73805a17c28bf6acc1b5384337', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '0f7c8ec00362c31b1c5bd11c185c6e7bfc177f22', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'f6eccfaac90505903aee379f2fc28b5735d8c4a9', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -243,7 +251,7 @@ export class PdsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the checkbox will visually appear as indeterminate.\nOnly JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)."
+                    "text": "If `true`, the checkbox will visually appear as indeterminate.\nOnly JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\nHas no visual style when `variant` is `pill`."
                 },
                 "getter": false,
                 "setter": false,
@@ -300,7 +308,7 @@ export class PdsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers."
+                    "text": "Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers. Ignored when `variant` is `pill`."
                 },
                 "getter": false,
                 "setter": false,
@@ -363,6 +371,29 @@ export class PdsCheckbox {
                 "setter": false,
                 "reflect": false,
                 "attribute": "value"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'pill'",
+                    "resolved": "\"default\" | \"pill\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "default"
+                        }],
+                    "text": "Sets the style variant of the checkbox. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
             }
         };
     }

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

@@ -8,6 +8,13 @@ export default {
     invalid: false,
     hideLabel: false,
     required: false,
+    variant: 'default',
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['default', 'pill'],
+    },
   },
   component: 'pds-checkbox',
   parameters: {},
@@ -28,6 +35,7 @@ const BaseTemplate = (args) =>
     name=${args.name}
     ?required=${args.required}
     value=${args.value}
+    variant=${args.variant}
   />`;
 
 export const Default = BaseTemplate.bind();
@@ -72,3 +80,33 @@ Invalid.args = {
   label: 'Label text',
   invalid: true,
 };
+
+export const Pill = BaseTemplate.bind();
+Pill.args = {
+  componentId: 'pill',
+  label: 'Label text',
+  variant: 'pill',
+};
+
+const PillGroupTemplate = (args) =>
+  html`<fieldset style="border: 0; margin: 0; padding: 0;">
+    <legend style="font: var(--pine-typography-body-medium); margin-block-end: var(--pine-dimension-xs); padding: 0;">Send to</legend>
+    <pds-box wrap gap="xs">
+      <pds-checkbox component-id="pill-email" name="channels" value="email" label="Email" variant="pill" checked ?disabled=${args.disabled} ?invalid=${args.invalid}></pds-checkbox>
+      <pds-checkbox component-id="pill-sms" name="channels" value="sms" label="SMS" variant="pill" ?disabled=${args.disabled} ?invalid=${args.invalid}></pds-checkbox>
+      <pds-checkbox component-id="pill-push" name="channels" value="push" label="Push notification" variant="pill" ?disabled=${args.disabled} ?invalid=${args.invalid}></pds-checkbox>
+    </pds-box>
+  </fieldset>`;
+
+export const PillGroup = PillGroupTemplate.bind();
+PillGroup.args = {};
+
+export const PillDisabled = PillGroupTemplate.bind();
+PillDisabled.args = {
+  disabled: true,
+};
+
+export const PillInvalid = PillGroupTemplate.bind();
+PillInvalid.args = {
+  invalid: true,
+};

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

@@ -234,13 +234,13 @@ export class PdsChip {
                 'aria-label': this.dismissLabel,
             };
         };
-        return (h(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), h("pds-icon", { icon: remove, size: this.iconSize })));
+        return (h(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), h("pds-icon", { icon: remove, size: this.iconSize, "aria-hidden": "true" })));
     }
     render() {
         const hostClass = this.classNames();
         const hostStyles = this.hostStyles;
         this.hostKeeper.record(hostClass, hostStyles);
-        return (h(Host, { key: 'f82d84a7f0a4f1c980d47bf75cd4ffeef042607d', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
+        return (h(Host, { key: '0e67ea3700e8a8e1ad3049b6eafced6934262335', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
     }
     static get is() { return "pds-chip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,6 +2,11 @@
   display: block;
 }
 
+:host([truncate]) {
+  display: block;
+  min-width: 0;
+}
+
 :host([aria-disabled=true]) .pds-combobox__input-icon {
   color: var(--pine-color-text-disabled);
   pointer-events: none;
@@ -184,6 +189,14 @@
   flex-shrink: 0;
 }
 
+.pds-combobox__listbox--truncate .pds-combobox__option-label {
+  flex: 1 1 auto;
+  overflow-wrap: normal;
+}
+.pds-combobox__listbox--truncate .pds-combobox__option-check {
+  flex-shrink: 0;
+}
+
 .pds-combobox__option-check {
   color: currentColor;
   font-size: var(--pine-dimension-150);
@@ -530,6 +543,26 @@
   flex-shrink: 0;
 }
 
+.pds-combobox__button-trigger--truncate {
+  max-width: 100%;
+}
+.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-label {
+  overflow-wrap: normal;
+}
+.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-chevron {
+  flex-shrink: 0;
+}
+
+.pds-combobox__button-trigger-text,
+.pds-combobox__listbox--truncate .pds-combobox__option-text {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .pds-combobox__button-trigger--input-shape {
   border-radius: var(--pine-dimension-125);
   font: var(--pine-typography-body);

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

@@ -140,6 +140,13 @@ export class PdsCombobox {
          * @default 'pill'
          */
         this.triggerShape = 'pill';
+        /**
+         * Determines whether the button trigger's label and the option labels should truncate and display with an ellipsis.
+         * When a label overflows, a `title` showing the full label will appear on hover.
+         * Chip options, custom layouts and group rows aren't affected.
+         * @defaultValue false
+         */
+        this.truncate = false;
         /**
          * The sentiment for the chip trigger. Matches Pine chip sentiments.
          * @default 'neutral'
@@ -436,10 +443,15 @@ export class PdsCombobox {
             if (this.usesPanelSearch)
                 this.restoreFocusToTrigger();
         };
+        this.onButtonTriggerMouseEnter = (event) => {
+            this.syncTitle(event.currentTarget, '.pds-combobox__button-trigger-text');
+        };
         // Event handler for mouse enter on option
         this.onOptionMouseEnter = (event) => {
-            const idx = Number(event.currentTarget.getAttribute('data-option-index'));
-            this.highlightedIndex = idx;
+            const row = event.currentTarget;
+            if (this.truncate)
+                this.syncTitle(row, '.pds-combobox__option-text');
+            this.highlightedIndex = Number(row.getAttribute('data-option-index'));
             this.keyboardNavigating = false;
         };
         this.onGroupRowMouseEnter = (event) => {
@@ -729,6 +741,19 @@ export class PdsCombobox {
             this.focusPanel(panelFocusEl);
         }
     }
+    // A `title` only while the text is cut, measured on hover. On the span, not the option or trigger,
+    // so it isn't read again as their description.
+    syncTitle(el, selector) {
+        const text = el.querySelector(selector);
+        if (!text)
+            return;
+        if (text.scrollWidth > text.clientWidth) {
+            text.title = text.textContent || '';
+        }
+        else {
+            text.removeAttribute('title');
+        }
+    }
     /**
      * Scrolls just enough to show `el`, as `scrollIntoView({ block: 'nearest' })` does. In the drill-in
      * panel it scrolls the list alone, and never sideways: while a drill-in slide offsets a row past
@@ -2131,6 +2156,7 @@ export class PdsCombobox {
                 'pds-combobox__listbox--drill-in': this.drillDirection === 'in',
                 'pds-combobox__listbox--drill-out': this.drillDirection === 'out',
                 'pds-combobox__listbox--pointer-hover': this.pointerCanHover,
+                'pds-combobox__listbox--truncate': this.truncate,
             }, onAnimationEnd: this.onDrillAnimationEnd, onPointerMove: this.onPanelPointer, onPointerDown: this.onPanelPointer, role: this.showsGroupedPanel ? 'tree' : 'listbox', id: this.listboxId, "aria-label": this.label || 'Options', "aria-multiselectable": "false",
             // Focusable but out of the tab order with panel search, so it can take focus when a
             // drilled-in group hides the field. Dropping it while focused would blur the list and close.
@@ -2297,14 +2323,15 @@ export class PdsCombobox {
                 'pds-combobox__option--layout': isLayout,
                 'pds-combobox__option--chip': isChip,
                 'pds-combobox__option--disabled': isDisabled,
-            }, "data-option-index": index, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (h("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : (this.renderOptionLabel(option)), isSelected && h("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
+            }, "data-option-index": index, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (h("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : (this.renderOptionLabel(option)), isSelected && h("pds-icon", { icon: "check", size: "regular", "aria-hidden": "true", class: "pds-combobox__option-check" })));
     }
     /** An option's text, after its `data-icon` when it has one. */
     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 this.getOptionLabel(option);
-        return (h("span", { class: "pds-combobox__option-label" }, h("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }), this.getOptionLabel(option)));
+            return 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. */
     panelEntries() {
@@ -2392,7 +2419,9 @@ export class PdsCombobox {
                 'pds-combobox__button-trigger-label--with-icon': icon !== null,
             } }, icon !== null && (
         // `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
-        h("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.selectedLabel || this.placeholder));
+        h("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__button-trigger-icon" })), this.truncate ? (
+        // Keyed so a new label drops a stale `title`.
+        h("span", { key: this.selectedLabel || this.placeholder, class: "pds-combobox__button-trigger-text" }, this.selectedLabel || this.placeholder)) : (this.selectedLabel || this.placeholder)));
     }
     /** The selection's icon for the button trigger: the option's own, or else its group's. */
     get selectedIcon() {
@@ -2496,7 +2525,7 @@ export class PdsCombobox {
     }
     // Helper method to render chip trigger default content
     renderChipTriggerDefaultContent() {
-        return (h("span", { class: "pds-combobox__chip-trigger-label" }, this.selectedChipIcon && h("pds-icon", { icon: this.selectedChipIcon, class: "pds-combobox__chip-trigger-icon" }), this.selectedLabel || this.placeholder));
+        return (h("span", { class: "pds-combobox__chip-trigger-label" }, this.selectedChipIcon && h("pds-icon", { icon: this.selectedChipIcon, "aria-hidden": "true", class: "pds-combobox__chip-trigger-icon" }), this.selectedLabel || this.placeholder));
     }
     // Helper method to render option as chip (new automatic approach)
     renderOptionChip(option) {
@@ -2524,16 +2553,17 @@ export class PdsCombobox {
             'pds-combobox__button-trigger',
             `pds-combobox__button-trigger--${this.triggerVariant}`,
             this.triggerShape === 'input' && 'pds-combobox__button-trigger--input-shape',
+            this.truncate && 'pds-combobox__button-trigger--truncate',
         ]
             .filter(Boolean)
             .join(' ');
-        return (h(Host, { key: 'ead770a3b7ba531a1cfdc6b02aef6d7159481ed0', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '3ca6fd299acd1db8a0e476eee5f7606bc6153625', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (h("label", { key: '44c72d099c5ccddce18400b9d3c66158f485de05', 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: '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 => {
                 this.inputEl = el;
                 this.triggerEl = el;
             }, class: {
                 'pds-combobox__input': true,
                 'pds-combobox__input--invalid': this.isInvalid(),
-            }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), h("div", { key: '349af9dc6fdae018d4443b178e21b1627fcc85ca', style: { display: 'none' } }, h("slot", { key: '9af42db6d08f148b7d7b5e4b3199f7c9af7699a4', 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: '2216779564fa3f4efd1b4d0972ac045fa0851078', style: { display: 'none' } }, h("slot", { key: '77b344d7301193f435949cbe2be2b28e1d7f6602', 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.
@@ -3161,6 +3191,29 @@ export class PdsCombobox {
                 "attribute": "trigger-shape",
                 "defaultValue": "'pill'"
             },
+            "truncate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether the button trigger's label and the option labels should truncate and display with an ellipsis.\nWhen a label overflows, a `title` showing the full label will appear on hover.\nChip options, custom layouts and group rows aren't affected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "truncate",
+                "defaultValue": "false"
+            },
             "chipSentiment": {
                 "type": "string",
                 "mutable": false,