@pine-ds/core 4.12.0 → 5.0.0

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: '74a214d61042d5759af5aef9d6410ed1a267083c', id: this.componentId }, h("hr", { key: 'c521eda51523fce09bd408af2586645fc9a9cd03' })));
+        return (h(Host, { key: '247de1e84622fc816f541e95da022c7d07b3852c' }, h("hr", { key: 'd66e06eee972fa962003152a4ec7703d7c66d620' })));
     }
     static get is() { return "pds-dropdown-menu-separator"; }
     static get encapsulation() { return "shadow"; }
@@ -36,7 +36,7 @@ export class PdsDropdownMenuSeparator {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute."
+                    "text": "A unique identifier for this component instance. Does not set the host element's `id` attribute \u2014 set `id` directly if you need one."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -444,7 +444,7 @@ export class PdsDropdownMenu {
         }
     }
     render() {
-        return (h(Host, { key: '1776921b263178df0de2cdf07a9fb81c668381b6', id: this.componentId }, h("slot", { key: '952fdc2b6bb3f1fca5a17dc1962af0e4c38f92e2', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: 'f5f95cebdcf4a4d78d0e4bc47b99c681045f8d38', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, h("div", { key: '8bff8a8dd06fe1f433bc512bc0ac9030fc9714e7', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, h("slot", { key: '1c248f137414dd00037d333b1e07c6b04a7b079d', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: 'db9954f26762a65e762f8c7b3dfd60e363ff8573', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, h("slot", { key: 'd5cb929db03966d673b23de150970744936cf26d', onSlotchange: this.handleSlotChange })))));
+        return (h(Host, { key: '3baa07d7761a581606704b5e79e68d7bc585ff36' }, h("slot", { key: '527afc60b7b6f7c869c62924fd00791de2538955', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '2efeff541331bc0b39ed271984c680e14892ed0b', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, h("div", { key: '591d61a9c12e10aef64638f1f51073321bddae69', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, h("slot", { key: 'c3a7fd69e0074be99508ae6b6c14bbd78fbc1f03', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '84c4f0cb77eadc86a5bb2b59c4b33f8691d2adfb', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, h("slot", { key: '8c16bfd158a2be6009545562940c38ca433e1c47', onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "pds-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -472,7 +472,7 @@ export class PdsDropdownMenu {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute."
+                    "text": "A unique identifier for this component instance. Does not set the host element's `id` attribute \u2014 set `id` directly if you need one."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -502,7 +502,7 @@ export class PdsFilter {
         return null;
     }
     render() {
-        return (h(Host, { key: '0876855dacf0172f83a6e1afcc8b9b1b6acf1251', id: this.componentId }, h("button", { key: 'e20b93644a520ed3351fb5802d1e6f0cb2465248', 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: '075e2f221d297ede0a52185853acbd3e74b99339', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: 'cd1d3a15e0969c3d960786a7fd7fd7b3195dd4de', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: '6524cb11b96f03ef5c528325a950c9f80f5ae9fa', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: '06cc2ca22068ccedbddf3ff69ce4a352fd01d142' })))));
+        return (h(Host, { key: 'ae727227de30a285588182dce73fa4867e66bb89' }, h("button", { key: '45ff52e203ff936d42c9ba037066756035d74d98', 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: '05fb0de22068e9fcc79d8903a617513db0d71da1', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: '4589b7fc0aed1ab3d7e6c06fea123553d2b77a3e', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: '4cbad5c76e8e28eb4a09d4a2c8a3d7c30024f114', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: 'c915f596e9d9efe1a7b1bd2edcf9b704d986438d' })))));
     }
     static get is() { return "pds-filter"; }
     static get encapsulation() { return "shadow"; }
@@ -530,7 +530,7 @@ export class PdsFilter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute."
+                    "text": "A unique identifier for this component instance, used to build its internal popover's `id`.\nDoes not set the host element's `id` attribute \u2014 set `id` directly if you need one."
                 },
                 "getter": false,
                 "setter": false,

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: '6f785fc222e3b5b7cf932f704b56aa7f1f52ead3', id: this.componentId }, h("div", { key: '0ffd2894cdeb1e632228b4c3fa523069dcffa4b2', class: "pds-filters" }, h("slot", { key: 'a3f42dedcda1b0fec78a33793d085791d9b9fc5c' }))));
+        return (h(Host, { key: '4a5ed2d7e80d82be9517682ee66e464fa61ea45b' }, h("div", { key: '7cabd4f934c17b14268c28f9ce99e8900795c516', class: "pds-filters" }, h("slot", { key: 'a1d01f1be8885c3cf68f98df59d67f56709f00e8' }))));
     }
     static get is() { return "pds-filters"; }
     static get encapsulation() { return "shadow"; }
@@ -32,7 +32,7 @@ export class PdsFilters {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute."
+                    "text": "A unique identifier for this component instance. Does not set the host element's `id` attribute \u2014 set `id` directly if you need one."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -146,10 +146,10 @@ export class PdsImage {
         const ratioStyle = hasRatio
             ? { aspectRatio: this.imageRatio(), objectFit: this.fit }
             : undefined;
-        return (h(Host, { key: 'cbc53c10c1ace7c37e3210f2a9f94043d6cd6e0c', class: {
+        return (h(Host, { key: 'f01ae0cef8a08b686a62affe14e58661115f1e2e', class: {
                 'pds-image': true,
                 'pds-image--has-ratio': hasRatio,
-            }, id: this.componentId }, h("img", { key: '139dbcebc7a71aa237deb8e2d7281abd40488096', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, style: ratioStyle, width: this.width, onLoad: this.emitLoad, onError: this.emitError, ref: (el) => (this.imageEl = el) })));
+            } }, h("img", { key: '3e609d3b73154ea5c83ae2df58352b0021075373', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, style: ratioStyle, width: this.width, onLoad: this.emitLoad, onError: this.emitError, ref: (el) => (this.imageEl = el) })));
     }
     static get is() { return "pds-image"; }
     static get encapsulation() { return "shadow"; }
@@ -200,7 +200,7 @@ export class PdsImage {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute."
+                    "text": "A unique identifier for this component instance. Does not set the host element's `id` attribute \u2014 set `id` directly if you need one."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -128,6 +128,7 @@ Invalid.args = {
   componentId: 'pds-input-invalid-example',
   label: 'Email',
   errorMessage: "Please provide a valid email address",
+  invalid: true,
   type: 'email',
   value: 'Frank Dux'
 };

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

@@ -71,6 +71,25 @@
   cursor: not-allowed;
 }
 
+.pds-multiselect__trigger-label {
+  display: grid;
+  flex: 1;
+  grid-template-columns: minmax(0, 1fr);
+  min-width: 0;
+}
+
+.pds-multiselect__trigger-sizer {
+  grid-area: 1/1;
+  overflow: hidden;
+  visibility: hidden;
+  white-space: nowrap;
+}
+
+.pds-multiselect__trigger-label > .pds-multiselect__trigger-text {
+  contain: inline-size;
+  grid-area: 1/1;
+}
+
 .pds-multiselect__trigger-text {
   color: var(--pine-color-text-strong);
   flex: 1;
@@ -224,7 +243,7 @@
   display: block;
   font: var(--pine-typography-body-sm-medium);
   letter-spacing: var(--pine-letter-spacing);
-  padding: var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);
+  padding: var(--pine-dimension-sm) var(--pine-dimension-sm) var(--pine-dimension-2xs);
   text-transform: uppercase;
 }
 
@@ -244,7 +263,7 @@
   border-radius: var(--pine-dimension-xs);
   cursor: pointer;
   display: flex;
-  padding: var(--pine-dimension-2xs) var(--pine-dimension-xs);
+  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
   /* stylelint-disable-next-line pine-design-system/no-hardcoded-motion -- 0.15s off-grid micro-transition; no exact motion token */
   transition: background 0.15s;
 }

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

@@ -87,6 +87,7 @@ export class PdsMultiselect {
         this.pillRemoveLabel = 'Remove';
         /**
          * Singular form of the selected-count trigger text. Pass a translated string to localize it; `{count}` is interpolated.
+         * A single selection shows the item's name instead, so this applies to other counts that a locale's plural rules treat as singular, and to a single selection whose item has no text.
          * @defaultValue '{count} item'
          */
         this.selectedCountLabelOne = '{count} item';
@@ -142,8 +143,9 @@ export class PdsMultiselect {
         this.hideSelectedItems = false;
         /**
          * Display mode for selected items outside the dropdown panel.
-         * `'count'` shows "N item(s)" text in the trigger (default). `'pill'` renders
-         * selected items as dismissible pds-chip tags.
+         * `'count'` shows the item's name in the trigger when one is selected and
+         * "N items" text otherwise (default). `'pill'` renders selected items as
+         * dismissible pds-chip tags.
          * @default 'count'
          */
         this.selectedDisplay = 'count';
@@ -1276,6 +1278,7 @@ export class PdsMultiselect {
         return (h("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--below", "aria-label": this.selectedItemsLabel }, this.selectedItems.map(item => (h("pds-chip", { key: String(item.id), "component-id": `${this.componentId}-pill-${item.id}`, variant: variant, size: "md", sentiment: "neutral", "dismiss-label": this.pillRemoveLabel, onPdsTagCloseClick: this.handlePillRemove(item) }, item.text)))));
     }
     getTriggerText() {
+        var _a;
         const count = this.selectedItems.length;
         if (count === 0 || (this.selectedDisplay === 'pill' && this.pillPosition === 'below')) {
             // Fall back to a non-empty string: the trigger's accessible name comes from
@@ -1283,8 +1286,24 @@ export class PdsMultiselect {
             // (WCAG 4.1.2). The prop is localizable; this last-resort default is not.
             return this.placeholder || 'Select...';
         }
+        // One selection shows its name; the count only says something once there's more than one.
+        // An option without text still falls back to the count, so the trigger is never nameless.
+        if (count === 1 && ((_a = this.selectedItems[0].text) === null || _a === void 0 ? void 0 : _a.trim())) {
+            return this.selectedItems[0].text;
+        }
         return pluralize(this.el, count, this.resolveCountForms());
     }
+    /**
+     * The text that sets the trigger's width. A single selection's name could be any length, so the
+     * trigger keeps the width the count would give it and the name truncates inside that, rather than
+     * widening a multiselect that has no width of its own.
+     */
+    getTriggerSizerText() {
+        const text = this.getTriggerText();
+        const count = this.selectedItems.length;
+        const showsName = count === 1 && text === this.selectedItems[0].text && !(this.selectedDisplay === 'pill' && this.pillPosition === 'below');
+        return showsName ? pluralize(this.el, count, this.resolveCountForms()) : text;
+    }
     /**
      * The `one`/`other` props are the ergonomic English defaults; `selectedCountLabels`
      * (object or JSON-string attribute) layers full CLDR forms on top for locales
@@ -1311,10 +1330,10 @@ export class PdsMultiselect {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (h(Host, { key: '2e5f7188cbb3928df3098644f9437449f5d5128d', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'f6b7d9d70e7635510bbcff648e1547c9cc222005', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: '9e3f0bc63e20e0a1f03f87f4b89c478331bf4001', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (h(Host, { key: '12298f9692ac8644230195cc1abe0e26bb5715a9', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '5d98f9edae2f471d9662c65454fbef7b2dec83e1', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: '2f6d4162d0649978bc53c34327b6149dc971fd4c', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), h("div", { key: 'efdf274b7223f77d646ac838f4163291ae310c31', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+            } }, this.label)), h("div", { key: '7a337e876c8fff854e5b9a067ef89b9d5136df4f', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
                 'pds-multiselect__trigger': true,
                 'pds-multiselect__trigger--open': this.isOpen,
                 'pds-multiselect__trigger--disabled': this.disabled,
@@ -1327,10 +1346,10 @@ export class PdsMultiselect {
                 'pds-multiselect__trigger--disabled': this.disabled,
                 'pds-multiselect__trigger--invalid': this.invalid || !!this.errorMessage,
                 'pds-multiselect__trigger--has-value': hasSelections,
-            }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, h("span", { class: {
+            }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, h("span", { class: "pds-multiselect__trigger-label" }, h("span", { class: "pds-multiselect__trigger-sizer", "aria-hidden": "true" }, this.getTriggerSizerText()), h("span", { class: {
                 'pds-multiselect__trigger-text': true,
                 'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
-            } }, this.getTriggerText()), h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: 'd90262ab6971d16dab6f8a367d038ab2607d888c', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '4baf142546462bea84ccb67b7ce288517f1de754', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: 'fdea175d93bc566d18cbad560e970f8c61495b1d', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '63977a25e35def8a6a4b39b0039e2da08f99d02e', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)), h("div", { key: 'cb43771ef04a682a6d14d80b0b37618acc5748ad', style: { display: 'none' } }, h("slot", { key: '7733626ae7bd4ba83cb30bbbdb81c28e413e46a3' })))));
+            } }, this.getTriggerText())), h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: 'd3cf5bb64a6c296c84af30628698559c0c904117', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: 'a711280151ff360758143906a76fa2d25f4078a9', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '17411d6bb55843f45f8d7ee410b627de846eed65', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '446ffc0ed08b7856f0ef8c49bdf06b6011404a12', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)), h("div", { key: 'a83ed6c5d84cbf38f267f7e15bd871d09534c554', style: { display: 'none' } }, h("slot", { key: '294ce6a2bd4405854161aed5d8166fcc86e211e3' })))));
     }
     static get is() { return "pds-multiselect"; }
     static get encapsulation() { return "shadow"; }
@@ -1630,7 +1649,7 @@ export class PdsMultiselect {
                             "name": "defaultValue",
                             "text": "'{count} item'"
                         }],
-                    "text": "Singular form of the selected-count trigger text. Pass a translated string to localize it; `{count}` is interpolated."
+                    "text": "Singular form of the selected-count trigger text. Pass a translated string to localize it; `{count}` is interpolated.\nA single selection shows the item's name instead, so this applies to other counts that a locale's plural rules treat as singular, and to a single selection whose item has no text."
                 },
                 "getter": false,
                 "setter": false,
@@ -1683,7 +1702,7 @@ export class PdsMultiselect {
                             "name": "defaultValue",
                             "text": "undefined"
                         }],
-                    "text": "Full CLDR plural forms for the selected-count trigger text, for locales with more than the English `one`/`other` categories (e.g. Polish `few`/`many`, Arabic `zero`/`two`). Accepts an object property or a JSON string attribute keyed by CLDR category \u2014 `{ one, other, few, many, two, zero }`. Any form omitted here falls back to `selectedCountLabelOne`/`selectedCountLabelOther`. `{count}` is interpolated."
+                    "text": "Full CLDR plural forms for the selected-count trigger text, for locales with more than the English `one`/`other` categories (e.g. Polish `few`/`many`, Arabic `zero`/`two`). Accepts an object property or a JSON string attribute keyed by CLDR category \u2014 `{ one, other, few, many, two, zero }`. Any form omitted here falls back to `selectedCountLabelOne`/`selectedCountLabelOther`. `{count}` is interpolated. A single selection shows the item's name instead of any form, unless the item has no text."
                 },
                 "getter": false,
                 "setter": false,
@@ -1999,7 +2018,7 @@ export class PdsMultiselect {
                             "name": "default",
                             "text": "'count'"
                         }],
-                    "text": "Display mode for selected items outside the dropdown panel.\n`'count'` shows \"N item(s)\" text in the trigger (default). `'pill'` renders\nselected items as dismissible pds-chip tags."
+                    "text": "Display mode for selected items outside the dropdown panel.\n`'count'` shows the item's name in the trigger when one is selected and\n\"N items\" text otherwise (default). `'pill'` renders selected items as\ndismissible pds-chip tags."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -7,7 +7,7 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: 'A multiselect component with a filter-style dropdown. Displays selected count in the trigger, with search and selected items shown in the dropdown panel. Use triggerWidth, panelWidth, and minWidth to control sizing.',
+        component: 'A multiselect component with a filter-style dropdown. Displays the name of a single selected item, or the selected count, in the trigger, with search and selected items shown in the dropdown panel. Use triggerWidth, panelWidth, and minWidth to control sizing.',
       },
     },
   },
@@ -22,7 +22,7 @@ export default {
     },
     placeholder: {
       control: 'text',
-      description: 'Placeholder text shown in the trigger when no items are selected. When items are selected, shows "X item(s)" instead.',
+      description: 'Placeholder text shown in the trigger when no items are selected. When one item is selected, shows its name instead; when more are selected, shows "N items".',
     },
     searchPlaceholder: {
       control: 'text',

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

@@ -1034,7 +1034,7 @@ export class PdsPopover {
         portal.style.left = `${left - origin.left}px`;
     }
     render() {
-        return (h(Host, { key: 'c76e121eb82b0d4f89f49bc83ff592ccf5774d57', id: this.componentId }, h("span", { key: '01061721f373e6f83729624d19f0beac0d6f093e', class: "pds-popover__trigger-wrapper" }, h("slot", { key: 'e68a2bd22ee6657e534da3d097bdaf3189815262', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("span", { key: 'd48301ebb6a9e0729083829a0587a0a285faedda', class: "pds-popover__tab-guard", ref: (el) => (this.tabGuardEl = el !== null && el !== void 0 ? el : null), onFocus: this.handleTabGuardFocus }), h("div", { key: 'c7d2e348545adaa7566da7c4f6b13a7ee78d1322', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '312f54fa917c135adc2f2a5ccbbb3159a980df24', onSlotchange: this.handleContentSlotChange }))));
+        return (h(Host, { key: '1767e44f8f0fba0938cc99fefdeb786cf9131384' }, h("span", { key: 'b5369451958d62562f007d600e7567809f281bfb', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '30a8273c6365eff7fd8265966ae09d66ac84e0a9', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("span", { key: 'a562458380244ca76af047edd00d40d012bc30ce', class: "pds-popover__tab-guard", ref: (el) => (this.tabGuardEl = el !== null && el !== void 0 ? el : null), onFocus: this.handleTabGuardFocus }), h("div", { key: '36db874a9f1bcdf0dc52d9cce368c5fc4f296b62', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '295f000fcdcaa4ef5249f4e98ed83cbd467351b0', onSlotchange: this.handleContentSlotChange }))));
     }
     static get is() { return "pds-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -1128,7 +1128,7 @@ export class PdsPopover {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute."
+                    "text": "A unique identifier for this component instance, used to build its portal element's `id`.\nDoes not set the host element's `id` attribute \u2014 set `id` directly if you need one."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -73,7 +73,7 @@ export const WithContent = (args) => html`
 					<pds-button
 						variant="unstyled"
 						icon-only
-						onclick="document.getElementById('${args.componentId || 'popover-rich'}').hide()"
+						onclick="document.querySelector('pds-popover[component-id=${args.componentId || 'popover-rich'}]').hide()"
 						aria-label="Close"
 					>
 						<pds-icon slot="start" name="remove"></pds-icon>

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

@@ -10,7 +10,7 @@ export class PdsProperty {
         this.icon = 'star';
     }
     render() {
-        return (h(Host, { key: '198ffd747b7a84a6f58a1b072890fc8bd3ed93aa', id: this.componentId }, h("pds-box", { key: 'be71f3d96efea0a45f357d888f71dbe5ad8b68d6', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '1a52407e00b158d5e6a515ad4b07ed3407d31f75', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: '46ac5019b27bdd079c7853abeef8f7c240d19c2c' }))));
+        return (h(Host, { key: '1bdcebaa09a696b18871651ef2615d0d400ddbb8' }, h("pds-box", { key: 'a4dc57f9e758b78fe3d4f2c096fadec53288e47b', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '2a89c7e1231163b5e4ac20d3d0c3d43af414a11a', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: '4c4d2ee5ed05ad2ec53bbe4f79fa11c04c8eb44d' }))));
     }
     static get is() { return "pds-property"; }
     static get encapsulation() { return "shadow"; }
@@ -38,7 +38,7 @@ export class PdsProperty {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute."
+                    "text": "A unique identifier for this component instance. Does not set the host element's `id` attribute \u2014 set `id` directly if you need one."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/pds-radio-group/pds-radio-group.js

@@ -2,6 +2,8 @@ import { Host, h, forceUpdate } from "@stencil/core";
 import { HostStylingKeeper } from "../../utils/attributes";
 import { messageId } from "../../utils/form";
 import { danger } from "@pine-ds/icons/icons";
+// The label and message ids a group without component-id generates for itself.
+const STALE_REFERENCE = /^radio-group-.+__(label|helper-message|error-message)$/;
 /**
  * @slot (default) - Child pds-radio components
  * @lightDom renders-markup
@@ -121,18 +123,21 @@ export class PdsRadioGroup {
                 : `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
             this._groupId = `radio-group-${uniqueId}`;
         }
-        // A restored or cloned host still carries the id and ARIA references an earlier instance wrote, pointing at
-        // that instance's label and messages. Drop them so this render writes its own: on first load, Stencil keeps a
-        // host attribute that's already there.
-        const previousId = this.el.getAttribute('id');
-        if (previousId && previousId !== this._groupId) {
-            ['aria-labelledby', 'aria-describedby'].forEach((name) => {
-                var _a, _b;
-                const ids = (_b = (_a = this.el.getAttribute(name)) === null || _a === void 0 ? void 0 : _a.split(/\s+/)) !== null && _b !== void 0 ? _b : [];
-                if (ids.some((id) => id.startsWith(`${previousId}__`)))
-                    this.el.removeAttribute(name);
-            });
-        }
+        // A restored or cloned host can still carry the ARIA references an earlier instance wrote, pointing at that
+        // instance's label and messages. Drop those tokens so this render writes its own, and keep any others.
+        ['aria-labelledby', 'aria-describedby'].forEach((name) => {
+            var _a;
+            const ids = (_a = this.el.getAttribute(name)) === null || _a === void 0 ? void 0 : _a.split(/\s+/).filter(Boolean);
+            if (!ids)
+                return;
+            const kept = ids.filter((id) => !STALE_REFERENCE.test(id) || id.startsWith(`${this._groupId}__`));
+            if (kept.length === ids.length)
+                return;
+            if (kept.length)
+                this.el.setAttribute(name, kept.join(' '));
+            else
+                this.el.removeAttribute(name);
+        });
     }
     componentDidLoad() {
         if (!this.name) {
@@ -222,13 +227,13 @@ export class PdsRadioGroup {
             'aria-describedby': ariaDescribedBy,
             'aria-labelledby': ariaLabelledBy === this.labelId ? ariaLabelledBy : undefined,
         });
-        return (h(Host, { key: 'c0d30ada4c215a2a316e55e0c564eb2d74f811be', class: hostClass, id: this._groupId, role: "radiogroup", "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, style: {
+        return (h(Host, { key: 'd379f29bc62f1855c1a244c3edd800b390a98f54', class: hostClass, role: "radiogroup", "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, style: {
                 '--pds-radio-group-gap': gapValue,
-            } }, this.groupLabel && (h("div", { key: 'c237d7907b458131fd248b50b36f45df3c49f084', class: "pds-radio-group__label", id: this.labelId }, this.groupLabel)), h("div", { key: 'd31f36e69c4ee2fc9f9c86f0a25d56a4a5272372', class: {
+            } }, this.groupLabel && (h("div", { key: 'e2db8af21186405b0c7b6c23422e34b46ca6bbbe', class: "pds-radio-group__label", id: this.labelId }, this.groupLabel)), h("div", { key: 'f818e2b84374979cda34d635ff6e9d1982d67c46', class: {
                 'pds-radio-group__radios': true,
                 'pds-radio-group__radios--row': this.direction === 'row',
                 'pds-radio-group__radios--column': this.direction === 'column',
-            } }, h("slot", { key: '20153277b51dfe816596d7c4d7d1d12eaf08362a', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: '1d48f78e3c3c56c949868a868bf9d73bdff81beb', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: 'c2d0d3f60b9a598d60b372945852f0a7e512abbf', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '2f187a2fea00871f9980cc0fe799c758723174fe', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
+            } }, h("slot", { key: 'f4d61c9495773c33119fcddf270f5a4d345e507b', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: '9ba493a3baf04085fba52f9f825024210122f0b5', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: '3a11a19683b897b565d615d888c7f9357e0e1ed3', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'c57a25a382cbcc216fffeab849eca06a78cb4b60', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-radio-group"; }
     static get encapsulation() { return "scoped"; }
@@ -256,7 +261,7 @@ export class PdsRadioGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute."
+                    "text": "A unique identifier for this component instance, used to build its helper and error message `id`s.\nDoes not set the host element's `id` attribute \u2014 set `id` directly if you need one."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js

@@ -68,10 +68,10 @@ export class PdsSortableItem {
         this.hostKeeper.record(hostClasses);
         const existingHandle = this.el.querySelector('.pds-sortable-item__handle');
         const wasPressed = (existingHandle === null || existingHandle === void 0 ? void 0 : existingHandle.getAttribute('aria-pressed')) === 'true';
-        return (h(Host, { key: '5fdef76101ce86c7769bb49bff9869246c3bdb32', class: hostClasses, id: this.componentId }, (this.showHandle || reorderable) && (h("div", { key: 'e54b5a0006b395dc67ff78c6a115e4e498cae096', class: {
+        return (h(Host, { key: '93566ff82e0603508392df14f6ecec11872e822c', class: hostClasses }, (this.showHandle || reorderable) && (h("div", { key: 'c3c6bd592ab827a0fc513c101b5afec8acc62cf4', class: {
                 'pds-sortable-item__handle': true,
                 'pds-sortable-item__handle--hidden': !this.showHandle,
-            }, role: reorderable ? 'button' : undefined, tabindex: reorderable ? '0' : undefined, "aria-label": reorderable ? formatMessage(sortable.handleLabel, { item: sortableItemLabel(this.el) }) : undefined, "aria-pressed": reorderable ? String(wasPressed) : undefined }, h("pds-icon", { key: 'e7099e03ea68c9f48c50d20868835081c4fdbc75', "aria-hidden": "true", icon: handleIcon }))), h("slot", { key: 'c75d20569c150da8d0698657db787aa6d27e3408' }), this.enableActions && (h("div", { key: '14281b2eaedfa57ff90342fb1dcbff48cd656242', class: "pds-sortable-item__actions" }, h("slot", { key: 'ec1f75b331d136a00fc39db9ab2cadd86a416e8d', name: "sortable-item-actions" })))));
+            }, role: reorderable ? 'button' : undefined, tabindex: reorderable ? '0' : undefined, "aria-label": reorderable ? formatMessage(sortable.handleLabel, { item: sortableItemLabel(this.el) }) : undefined, "aria-pressed": reorderable ? String(wasPressed) : undefined }, h("pds-icon", { key: 'a71dd5c7c7d368ec0ef326d7f86f33bcaeecf238', "aria-hidden": "true", icon: handleIcon }))), h("slot", { key: 'cf372e7f7a234829b77ae28604bfdbdced27b1e8' }), this.enableActions && (h("div", { key: 'abf8848c6c5ed09ddcf1b09be21f0ba851385f10', class: "pds-sortable-item__actions" }, h("slot", { key: 'e6b3b897c17529f5d803d72e6fcbeed66880f083', name: "sortable-item-actions" })))));
     }
     static get is() { return "pds-sortable-item"; }
     static get encapsulation() { return "scoped"; }
@@ -122,7 +122,7 @@ export class PdsSortableItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A unique identifier used for the sortable item `id` attribute."
+                    "text": "A unique identifier for this component instance. Does not set the host element's `id` attribute \u2014 set `id` directly if you need one."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -416,7 +416,7 @@ export class PdsSortable {
     render() {
         const classNames = this.classNames();
         this.hostKeeper.record(classNames);
-        return (h(Host, { key: 'a1fb28574e3aa92a923c4baeecec690d4052601f', class: classNames, id: this.componentId, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, onClick: this.handleClick }, h("slot", { key: 'b9a255d4f94a6b9976a4cac7e142e45210125828' })));
+        return (h(Host, { key: 'f758a8b71485f09185ba511b304c48c3fcdb5298', class: classNames, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, onClick: this.handleClick }, h("slot", { key: 'fecbafc235475dc67fb1d7fe051c42d2a51b4bfe' })));
     }
     static get is() { return "pds-sortable"; }
     static get encapsulation() { return "scoped"; }
@@ -490,7 +490,7 @@ export class PdsSortable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A unique identifier used for the sortable container `id` attribute."
+                    "text": "A unique identifier for this component instance. Does not set the host element's `id` attribute \u2014 set `id` directly if you need one."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -24,7 +24,7 @@ export class PdsSwitch {
          */
         this.disabled = false;
         /**
-         * Determines the input 'invalid' state, signifying an error is present.
+         * Determines whether or not the switch is invalid.
          */
         this.invalid = false;
         /**
@@ -175,12 +175,12 @@ export class PdsSwitch {
         const hostClass = this.switchClassNames();
         const ariaDisabled = this.isDisabled() ? 'true' : null;
         this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
-        return (h(Host, { key: 'e5100ae3ecfac3bb556582507cc628b2455ae6cc', class: hostClass, "aria-disabled": ariaDisabled }, h("label", { key: 'c337b8c4dc381c3a745100c707792c11711c01a1', htmlFor: this.componentId }, h("input", Object.assign({ key: 'f18ae27e7c91ef4d54b0192a04130420b991c9ff', "aria-describedby": this.ownDescriptionId(), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.isDisabled(), id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate,
+        return (h(Host, { key: '4c6f12c064caead89979cc4aa0ef25c4581381c3', class: hostClass, "aria-disabled": ariaDisabled }, h("label", { key: 'c97164a6d6318be6cbcc026373e3d5c0a9316d56', htmlFor: this.componentId }, h("input", Object.assign({ key: 'dfaf7408c3fbbed38bd0732ff156e53f57235100', "aria-describedby": this.ownDescriptionId(), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.isDisabled(), id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate,
             // A description added after the switch, or replaced by a framework or a DOM morph, is picked up by the
             // time focus reaches the switch and it's announced.
-            onFocus: this.forwardDescription, ref: (el) => (this.inputEl = el), required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: '4bddfc080db7fee6fa8080e890918757dacde3fb', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: 'c9302409719113e12f6debb426c78dd0caaee88a', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
-            h("div", { key: '60785b9779cb2d50e6f0f2b32179106256f55ebf', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '9b258e9302c5ef959e8c06bee780d7d43144359b', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'f8df779a8c65a6f0b6ea139ff3c31cca76eb48fa', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
+            onFocus: this.forwardDescription, ref: (el) => (this.inputEl = el), required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: '5e621fa2881bb2d1eddd3dcbc33173f3cf49bd93', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: 'ef682ce320b8d9f2897676af97e0b4d55c55358a', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
+            h("div", { key: '145da644abc8829de20ca6f9c4532f5341dec441', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '7766e34f6daaf760d78aec6f08b64f0de15deb4c', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '74dfd91aabf60608e8278ef84119466a2143ffc7', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -268,7 +268,7 @@ export class PdsSwitch {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Displays message text describing an invalid state."
+                    "text": "Displays an error message below the switch. It becomes the switch's accessible description only while `invalid` is set."
                 },
                 "getter": false,
                 "setter": false,
@@ -306,7 +306,7 @@ export class PdsSwitch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Displays help text for additional description of an input."
+                    "text": "Displays a message or hint below the switch."
                 },
                 "getter": false,
                 "setter": false,
@@ -325,7 +325,7 @@ export class PdsSwitch {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Determines the input 'invalid' state, signifying an error is present."
+                    "text": "Determines whether or not the switch is invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -345,7 +345,7 @@ export class PdsSwitch {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Displays text to describe the input."
+                    "text": "Text to be displayed as the switch label."
                 },
                 "getter": false,
                 "setter": false,
@@ -446,7 +446,7 @@ export class PdsSwitch {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emits an event on input change."
+                    "text": "Emitted when the user toggles the switch, by a click or `Space`. `detail` is the native `change` event, so read\nthe new state from the switch's `checked`.\n\nThis event will not emit when programmatically setting the `checked` property."
                 },
                 "complexType": {
                     "original": "InputEvent",

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

@@ -496,9 +496,9 @@ export class PdsTable {
     }
     render() {
         if (this.responsive) {
-            return (h(Host, { class: `${this.classNames()} pds-table-responsive-host`, id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0", part: "table responsive-table" }, h("div", { class: "scroll-shadow-left", part: "scroll-shadow-left" }), h("div", { class: "scroll-shadow-right", part: "scroll-shadow-right" }), h("div", { class: "pds-table-responsive-container", part: "responsive-container" }, h("div", { class: "pds-table-responsive-wrapper", part: "responsive-wrapper" }, h("div", { class: this.classNames(), part: "table-inner" }, h("slot", null))))));
+            return (h(Host, { class: `${this.classNames()} pds-table-responsive-host`, role: "grid", selectable: this.selectable, tabindex: "0", part: "table responsive-table" }, h("div", { class: "scroll-shadow-left", part: "scroll-shadow-left" }), h("div", { class: "scroll-shadow-right", part: "scroll-shadow-right" }), h("div", { class: "pds-table-responsive-container", part: "responsive-container" }, h("div", { class: "pds-table-responsive-wrapper", part: "responsive-wrapper" }, h("div", { class: this.classNames(), part: "table-inner" }, h("slot", null))))));
         }
-        return (h(Host, { class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0", part: "table" }, h("slot", null)));
+        return (h(Host, { class: this.classNames(), role: "grid", selectable: this.selectable, tabindex: "0", part: "table" }, h("slot", null)));
     }
     static get is() { return "pds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -545,7 +545,7 @@ export class PdsTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A unique identifier used for the table `id` attribute."
+                    "text": "A unique identifier for this component instance. Does not set the host element's `id` attribute \u2014 set `id` directly if you need one."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -276,7 +276,7 @@ export class PdsTabs {
         // Only the classes: `active-tab-name` backs the mutable activeTabName prop, so a morph that drops
         // it is a prop change, not a strip.
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: '69985d6800ac879a8655d52a6b4f72c5b6a20c61', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, h("slot", { key: '0fb1b2521b15c77a50d81431cc1f0f6a40360cfa', name: "tabpanels" })));
+        return (h(Host, { key: '6ededb588230706dc0848164e991694490436bf1', "active-tab-name": this.activeTabName, class: hostClass }, tabList, h("slot", { key: '68d090b7b6a3bae74ceb66e1487ce96666a38c6e', name: "tabpanels" })));
     }
     static get is() { return "pds-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -323,7 +323,7 @@ export class PdsTabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute."
+                    "text": "A unique identifier for this component instance, passed down to its tabs and panels.\nDoes not set the host element's `id` attribute \u2014 set `id` directly if you need one."
                 },
                 "getter": false,
                 "setter": false,