@pine-ds/core 4.8.0 → 4.9.0

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: '88a46a17abc1c7b3b3e90543ce8dcf38a14c878c', "aria-hidden": "true", 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

@@ -240,7 +240,7 @@ export class PdsChip {
         const hostClass = this.classNames();
         const hostStyles = this.hostStyles;
         this.hostKeeper.record(hostClass, hostStyles);
-        return (h(Host, { key: 'fa432fa987afb5b856e5e7d3894a88be043805d2', 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.
@@ -2302,9 +2328,10 @@ export class PdsCombobox {
     /** 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() {
@@ -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: 'c4bc64f28f6f8f2170d199bd89ba02b3fbe41bad', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '7648c513d133e11376e50a9a15bc9a227b8fe1d2', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (h("label", { key: '1be4dce04b943119265b99c2b14002e5faba337f', 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: 'f9aca483c67dd0cdf2fcbdc651a13cfb8fcfe7f1', style: { display: 'none' } }, h("slot", { key: '7a0dc5718ccf377b41bd1716030f16a135700518', 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,

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-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() {