@pine-ds/core 4.3.0 → 4.4.0

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

@@ -90,6 +90,23 @@ export default {
       control: 'number',
       description: 'Maximum chips shown inline before collapsing to a "+N more" badge.',
     },
+    optionDisplay: {
+      control: 'select',
+      options: ['text', 'chip'],
+      description: 'Controls how options are displayed in the dropdown panel.',
+    },
+    optionActions: {
+      control: 'boolean',
+      description: 'Shows an action icon on each option that has an actionIcon.',
+    },
+    optionActionLabel: {
+      control: 'text',
+      description: 'Tooltip for an option action icon when the option has no actionLabel; {text} is interpolated.',
+    },
+    optionActionDescription: {
+      control: 'text',
+      description: 'Screen-reader hint on each option that has an action; {action} is interpolated.',
+    },
   },
 };
 
@@ -110,12 +127,16 @@ export const Default = {
     label: 'Select Tags',
     placeholder: 'Select...',
     value: [],
+    optionDisplay: 'text',
+    optionActions: false,
   },
   render: (args, { updateArgs } = {}) => html`
     <pds-multiselect
       component-id="${args.componentId}"
       label="${args.label}"
       placeholder="${args.placeholder}"
+      option-display="${args.optionDisplay}"
+      ?option-actions=${args.optionActions}
       ?hide-selected-items=${args.hideSelectedItems}
       .value=${args.value}
       @pdsMultiselectChange=${(e) => updateArgs?.({ value: e.detail.values })}
@@ -728,4 +749,118 @@ export const PillDisabled = {
       Disabled state: chips show as text variant without close buttons.
     </p>
   `,
-};
+};
+
+const labelOptions = `
+  <option value="1">Featured</option>
+  <option value="2">On sale</option>
+  <option value="3">Archived</option>
+`;
+
+export const OptionDisplay = {
+  args: {
+    componentId: 'multiselect-option-display',
+    label: 'Labels',
+    optionDisplay: 'chip',
+    value: ['1'],
+  },
+  render: (args, { updateArgs } = {}) => html`
+    <pds-multiselect
+      component-id="${args.componentId}"
+      label="${args.label}"
+      option-display="${args.optionDisplay}"
+      .value=${args.value}
+      @pdsMultiselectChange=${(e) => updateArgs?.({ value: e.detail.values })}
+    >
+      <option value="1" data-dot-color="--pine-color-purple-600">Featured</option>
+      <option value="2" data-dot-color="--pine-color-green-600">On sale</option>
+      <option value="3" data-dot-color="--pine-color-grey-600">Archived</option>
+    </pds-multiselect>
+  `,
+};
+
+const customTriggerLabels = [
+  { value: '1', text: 'Featured' },
+  { value: '2', text: 'On sale' },
+  { value: '3', text: 'Archived' },
+];
+
+export const CustomTrigger = {
+  args: {
+    componentId: 'multiselect-custom-trigger',
+    value: ['1'],
+  },
+  render: (args, { updateArgs } = {}) => {
+    const selected = customTriggerLabels.filter((label) => args.value.includes(label.value));
+    const triggerName = selected.length ? `Labels: ${selected.map((label) => label.text).join(', ')}` : 'Add label';
+
+    return html`
+      <pds-multiselect
+        component-id="${args.componentId}"
+        label="Labels"
+        hide-label
+        .value=${args.value}
+        @pdsMultiselectChange=${(e) => updateArgs?.({ value: e.detail.values })}
+      >
+        ${unsafeHTML(labelOptions)}
+        <button
+          slot="trigger"
+          type="button"
+          aria-label=${triggerName}
+          style="align-items: center; background: none; border: 0; cursor: pointer; display: inline-flex; flex-wrap: wrap; gap: var(--pine-dimension-2xs); padding: var(--pine-dimension-2xs);"
+        >
+          ${selected.length
+            ? selected.map((label) => html`<pds-chip sentiment="subtle">${label.text}</pds-chip>`)
+            : html`<pds-icon name="add" size="small" aria-hidden="true"></pds-icon> Add label`}
+        </button>
+      </pds-multiselect>
+    `;
+  },
+};
+
+export const OptionActions = {
+  args: {
+    componentId: 'multiselect-option-actions',
+    label: 'Labels',
+    value: ['1'],
+    lastAction: '',
+  },
+  render: (args, { updateArgs } = {}) => html`
+    <pds-multiselect
+      component-id="${args.componentId}"
+      label="${args.label}"
+      option-actions
+      .value=${args.value}
+      @pdsMultiselectChange=${(e) => updateArgs?.({ value: e.detail.values })}
+      @pdsMultiselectOptionAction=${(e) => updateArgs?.({ lastAction: e.detail.option.text })}
+    >
+      <option value="1" data-action-icon="pen">Featured</option>
+      <option value="2" data-action-icon="pen">On sale</option>
+      <option value="3" data-action-icon="info-circle" data-action-label="View {text}">Archived</option>
+    </pds-multiselect>
+    <p style="margin-top: var(--pine-dimension-sm); color: var(--pine-color-text-secondary);">
+      ${args.lastAction
+        ? `Action ran for ${args.lastAction}.`
+        : 'Hover an option and click its icon, or highlight it and press Right Arrow.'}
+    </p>
+  `,
+};
+
+export const WithFooter = {
+  args: {
+    componentId: 'multiselect-with-footer',
+    label: 'Labels',
+    value: ['1'],
+  },
+  render: (args, { updateArgs } = {}) => html`
+    <pds-multiselect
+      component-id="${args.componentId}"
+      label="${args.label}"
+      .value=${args.value}
+      @pdsMultiselectChange=${(e) => updateArgs?.({ value: e.detail.values })}
+    >
+      ${unsafeHTML(labelOptions)}
+      <pds-link slot="footer" href="#manage-labels" variant="plain" font-size="md">Manage labels</pds-link>
+    </pds-multiselect>
+  `,
+};

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { containsComposed } from "../../utils/closest";
 /**
  * @slot trigger - The trigger element for the popover
  * @slot (default) - The content to display inside the popover
@@ -72,12 +73,7 @@ export class PdsPopover {
             if (assignedElements.length > 0) {
                 // Use the first assigned element as the trigger
                 this.triggerEl = assignedElements[0];
-                // Set ARIA attributes to establish relationship between trigger and popover
-                // This mirrors the native Popover API's accessibility behavior
-                if (this.portalEl) {
-                    this.triggerEl.setAttribute('aria-expanded', String(this.active));
-                    this.triggerEl.setAttribute('aria-controls', this.portalEl.id);
-                }
+                this.linkTriggerToPortal();
                 // Attach click listener to handle popover visibility
                 this.triggerEl.addEventListener('click', this.handleTriggerClick);
             }
@@ -138,6 +134,18 @@ export class PdsPopover {
             Object.defineProperty(slotChangeEvent, 'target', { value: triggerSlot, enumerable: true });
             this.handleTriggerSlotChange(slotChangeEvent);
         }
+        else {
+            // A component trigger delays componentDidLoad, so its slotchange ran before the portal existed.
+            this.linkTriggerToPortal();
+        }
+    }
+    // Set ARIA attributes to establish relationship between trigger and popover
+    // This mirrors the native Popover API's accessibility behavior
+    linkTriggerToPortal() {
+        if (this.triggerEl == null || this.portalEl == null)
+            return;
+        this.triggerEl.setAttribute('aria-expanded', String(this.active));
+        this.triggerEl.setAttribute('aria-controls', this.portalEl.id);
     }
     disconnectedCallback() {
         this.isComponentMounted = false;
@@ -333,6 +341,8 @@ export class PdsPopover {
         if (!this.active || !this.portalEl)
             return;
         this.active = false;
+        // Restoring the content drops its focus to the body, so check where focus is first.
+        const focusWasInside = this.portalEl.contains(document.activeElement);
         // Update ARIA expanded state on trigger
         if (this.triggerEl) {
             this.triggerEl.setAttribute('aria-expanded', 'false');
@@ -345,7 +355,9 @@ export class PdsPopover {
         this.portalEl.style.visibility = 'hidden';
         // Return focus to trigger for keyboard accessibility
         // This mirrors native Popover API behavior on close
-        this.returnFocusToTrigger();
+        if (focusWasInside) {
+            this.returnFocusToTrigger();
+        }
         // Remove all listeners
         this.removeLightDismissListeners();
         this.removeScrollAndResizeListeners();
@@ -401,7 +413,7 @@ export class PdsPopover {
      * Handles clicks outside the popover for light dismiss (auto type only)
      */
     handleClickOutside(event) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         // Ignore events that occurred at or before the popover opened
         // This prevents the opening click from immediately closing the popover
         // Convert event.timeStamp (DOMHighResTimeStamp from performance.now()) to epoch time
@@ -413,9 +425,15 @@ export class PdsPopover {
             return;
         }
         const target = event.target;
+        // A datepicker's calendar is portaled to the body: a click in the calendar of a datepicker
+        // inside this popover, in its content or its trigger, isn't outside it.
+        const calendar = (_b = (_a = target).closest) === null || _b === void 0 ? void 0 : _b.call(_a, '.pds-datepicker-calendar-portal');
+        const owner = calendar === null || calendar === void 0 ? void 0 : calendar.pdsDatepicker;
+        if (owner && (containsComposed(this.portalEl, owner) || containsComposed(this.triggerEl, owner)))
+            return;
         // Check if click is outside both the popover portal and the trigger
-        const clickedInsidePopover = (_a = this.portalEl) === null || _a === void 0 ? void 0 : _a.contains(target);
-        const clickedInsideTrigger = (_b = this.triggerEl) === null || _b === void 0 ? void 0 : _b.contains(target);
+        const clickedInsidePopover = (_c = this.portalEl) === null || _c === void 0 ? void 0 : _c.contains(target);
+        const clickedInsideTrigger = (_d = this.triggerEl) === null || _d === void 0 ? void 0 : _d.contains(target);
         if (!clickedInsidePopover && !clickedInsideTrigger) {
             this.hide();
         }
@@ -554,7 +572,7 @@ export class PdsPopover {
         }, 16); // ~1 frame at 60fps
     }
     render() {
-        return (h(Host, { key: '760428c178ed92dfc35293181b7cef8fac3b4e26', id: this.componentId }, h("span", { key: 'd12a6a33dcf0fe6f3b61972ae8e5ac604263b2ac', class: "pds-popover__trigger-wrapper" }, h("slot", { key: 'd975e355a3acb9bc6d95202ec177f631bddb43bf', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: 'f99ae2d97c75ed8ec63fbd0a859f8b7b9f78f0d2', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: 'd1620c57d993496045fc3c47b55cdd0c1d07b36c', onSlotchange: this.handleContentSlotChange }))));
+        return (h(Host, { key: '7f02e4a9af4d2dc4cafb9187fc2263edaa79af86', id: this.componentId }, h("span", { key: '128828d5fc52478b3e9670418a8e9c2d5ce6e7f6', class: "pds-popover__trigger-wrapper" }, h("slot", { key: 'c479f39a3653d6627a20d05c3a87ea1a5e2bebf2', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: 'e730149edce755c8789ec700c0a95dfa4b4ab835', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '2f5ab80b4d75c114568d364ce9a74a658e426766', onSlotchange: this.handleContentSlotChange }))));
     }
     static get is() { return "pds-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,7 +20,7 @@ export class PdsProgress {
     }
     render() {
         const normalizedFillColor = normalizeColorValue(this.fillColor);
-        return (h(Host, { key: 'acca17890c316c056c61e4fad2917f0279126c39', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: 'f8140ac930335bd67e3576a0f3739092d492d884', class: "pds-progress" }, h("label", { key: '66416d0472024ae14a6413e4e533f08970cbc857', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '2bbbe4e1e3d186c2895401ac4b68dabac60a1df9', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '672956684adf944ea1de8769dbaba615c82a85b6', class: "pds-progress__percentage" }, this.percent, "%")));
+        return (h(Host, { key: '2aaabbb78cef6237b47408a6766936a4ce065e40', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '192ce4a08155a84577ed46d9dc342a744354213a', class: "pds-progress" }, h("label", { key: '3e9f16f9a4c5d822ef6493d6457dbb657835903a', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '35b4cd422bb247b8ae8eeaa7c3ea231d312197c9', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: 'a4952bcda7ab062da7ff706b519476f8e7fff898', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get is() { return "pds-progress"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@ export class PdsProperty {
         this.icon = 'star';
     }
     render() {
-        return (h(Host, { key: '1ce4509363c6c40c76d7d6c17335721b348abf04', id: this.componentId }, h("pds-box", { key: '8c6f5dd171e0383640aa550ccbe1b20e74de5b07', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '31c19e7ff0c466f2fe54ad2d2366929311f01364', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: 'b5ddb877ef6f3239992a892c7990bbd4fcfa77ae' }))));
+        return (h(Host, { key: '0f6195faaaf3adb11ad14f09a36c78f94e2bdf65', id: this.componentId }, h("pds-box", { key: '0a9670c0e38065f5fbe035b81703e21155396ff8', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '13b497e8670bc5210a752b8c24b9fd6397b1a8c9', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: 'a9b3cf5fd830b7551f68866a62341670f8b61b34' }))));
     }
     static get is() { return "pds-property"; }
     static get encapsulation() { return "shadow"; }

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

@@ -92,11 +92,11 @@ export class PdsRadio {
     }
     render() {
         const renderLabelAndMessages = () => [
-            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: 'faa2d815e03f6b05108af0e7934101b2d5f71c59', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), h("span", { key: '22df3067667a7815e03dca45e4ef49d0e1caadcc', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
+            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: '4a8736c360681b399c4e70ef9e6612d4cb4f9285', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), h("span", { key: '093d96ac788d713eafb2e537c812145869dddad8', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
             this.helperMessage && (h("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
-            this.errorMessage && (h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '6dac17ccd12d558d3b25ffb77c55d160a619d6ab', icon: danger, size: "small" }), this.errorMessage))
+            this.errorMessage && (h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '55fc5ab2a5a18734dbd8ed452c4e3794ece7fe15', icon: danger, size: "small" }), this.errorMessage))
         ];
-        return (h(Host, { key: 'b464057b9e8d5de710183803c7d5e825316b3c3b', class: this.classNames() }, this.hasImage() && (h("div", { key: '692b2681221596cdf4bf6a21574edb2373d5127b', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'd68951b5b671863d582ad1a98543a51832966b36', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
+        return (h(Host, { key: '97d0f61aeb93bb29e3d21281e72775cb274de072', class: this.classNames() }, this.hasImage() && (h("div", { key: '0d1fb05dc00617945350e9d1ffeec9e17fc4affa', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: '1cd8494378269651730ea64f25af4e9572ede794', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
     static get is() { return "pds-radio"; }
     static get encapsulation() { return "scoped"; }

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

@@ -160,13 +160,13 @@ export class PdsRadioGroup {
     render() {
         const gapValue = this.getGapValue();
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h(Host, { key: '048d4676df7c31a9ab08e4d4fc2b93866c1241fd', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
+        return (h(Host, { key: '3f35b3cea2933ed25174387fc45d80f0d6bceced', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
                 '--pds-radio-group-gap': gapValue,
-            } }, this.groupLabel && (h("div", { key: '414363733d6053517bb63888fb9813af6554d4df', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: 'd368dc474bf76f5cf7d633e59f929060fbf60b83', class: {
+            } }, this.groupLabel && (h("div", { key: '83764282e3049b0802e966c306654bbdda4f0c02', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: '39c0e97e5280527d9ab597dcf4f5b0282b19d69a', 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: '210e1ba8d276c2832017ea7bf3d03348aa46106a', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: '06015935856640afdcddfcd8833a3a0659c58698', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: '44256d9a050feda9651f90093a298a12d9e97250', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '2b3aa1ffaa0f6a3ad0ce83d2becfcfdcc2f56fbc', icon: danger, size: "small" }), this.errorMessage))));
+            } }, h("slot", { key: 'ef827a254e8b9bac58f297f5bbd6a37f8e132677', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: '4d2f58d979a34e685d00f04483c20a0f9e286af2', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: 'c05a32676fd6fe8aee30e1ea5c476424e10945f3', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '1bc3177459e179af3709f1cacd329980a8a45df7', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-radio-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -55,7 +55,7 @@ export class PdsRow {
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return h(Host, { key: '556bb00908d60df442b1fae17e28e54353f85f20', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return h(Host, { key: '2d71570cba49c0e896ffe29c0a7727d7c2872036', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get is() { return "pds-row"; }
     static get originalStyleUrls() {

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

@@ -228,7 +228,7 @@ export class PdsSelect {
     }
     render() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
-        return (h(Host, { key: '6b240f3f91bcbdc52f019b0b6c57afda91abcbc9', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '5bcacb3b861b69d4b2a16b917bad3d7c356eab13', class: "pds-select" }, !this.hideLabel && (h("div", { key: '4707b7b50a9e3144316f6c3e8b78767aee56553e', class: "pds-select__label-wrapper" }, h("label", { key: '89992c65158f26fef606b4f613baf139e9fe17c8', htmlFor: this.componentId }, h("span", { key: '8f05323646aca793a80310515b1cc6e0e8597736', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: '8381fe48cce4c6ec32ae2c0dd16bc3e188fbfda0', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: 'c05f059e3c4e21d304ac1da08613d2b2d84aa342', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: 'b52f06405693803c0d2309e97f2611598cac7b70', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: 'e1e7af5249a928402a3c5dfe418f695b4e1fa7d4', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
+        return (h(Host, { key: '89ba8f5f06b2a1bf82a495992efcb8490021e19f', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '009dd8fe960889fd85a6cbe3239d94f81eddc9bb', class: "pds-select" }, !this.hideLabel && (h("div", { key: 'e198c3dcd664da65c0356b7eb7f9b4dff8c27035', class: "pds-select__label-wrapper" }, h("label", { key: '914b278a8e154b17365ffadcfe655139d3bef915', htmlFor: this.componentId }, h("span", { key: '6cd42f182ae8c585364a781044b8fd2fa3d61304', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: '7a3a91336f938ffb13a1e7ea1632090c37b5ad78', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: 'd3ddc61e4458e5ec0af1e700e69355d1cabaa651', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: 'dae8f36dd59e84f502500a24fec97a6fad305167', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '66fd7ed9fd065b6aff73df75234fa9534c828b6f', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get is() { return "pds-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,7 +38,7 @@ export class PdsSortableItem {
         }
     }
     render() {
-        return (h(Host, { key: '07dcd36e87b8fcfae7ff5f33a7bd8d44322fcbb3', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'cb2de083316c50beb63d700288c9091d01a99240', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '90906fe69419f1a240aa976e7024872577d00bd3', "aria-hidden": "true", icon: handleIcon }))), h("slot", { key: 'a6969eb7d575919db12f98e3fc5d82708128be8e' }), this.enableActions && (h("div", { key: '5688ea0ead3c2adba9e21a7fa327adc6fdbc71b1', class: "pds-sortable-item__actions" }, h("slot", { key: 'f62b4ecf0c92edae854e9b3ca5e9da6a5051f77d', name: "sortable-item-actions" })))));
+        return (h(Host, { key: 'a401963153e64b33f47f8897f2e8a157557d625e', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'e93df2aea5fcad497bd64f54b09a3e700141dfa6', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '9454196233b1c12a232815a2a14f05e41721a152', "aria-hidden": "true", icon: handleIcon }))), h("slot", { key: 'da456ae383e8fe7dd9375eada035bee755cdd684' }), this.enableActions && (h("div", { key: 'bed7efa1c242e59b547e5e09018b1aacb1c1b172', class: "pds-sortable-item__actions" }, h("slot", { key: 'c4563d2a50c3bb55108527ae1f0a68a84d5749a7', name: "sortable-item-actions" })))));
     }
     static get is() { return "pds-sortable-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -57,7 +57,7 @@ export class PdsSortable {
         this.sortableInstance = Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (h(Host, { key: '235879c63aa8e55ea819fd3bcdb30ef56dd2c0b3', class: this.classNames(), id: this.componentId }, h("slot", { key: '28cb6ef1a3b1f7de15f1f2728ffa625c879890dc' })));
+        return (h(Host, { key: '6ff85345305337587c3d06b6f6c333125707efe8', class: this.classNames(), id: this.componentId }, h("slot", { key: 'e25c441574cc8b59bb1865a69af8691ce37ff341' })));
     }
     static get is() { return "pds-sortable"; }
     static get encapsulation() { return "scoped"; }

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

@@ -60,6 +60,9 @@ label {
   display: flex;
   gap: var(--pine-dimension-150);
 }
+:host(.pds-switch--label-slot) label {
+  align-items: center;
+}
 .pds-switch--error label {
   color: inherit;
 }

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

@@ -2,10 +2,14 @@ import { Host, h } from "@stencil/core";
 import { assignDescription, isSpecTest, messageId, exposeTypeProperty } from "../../utils/form";
 import { danger } from "@pine-ds/icons/icons";
 import { inheritAriaAttributes } from "../../utils/attributes";
+/**
+ * @slot label - Content displayed as the switch label in place of the `label` text. Clicking it toggles the switch.
+ */
 export class PdsSwitch {
     constructor() {
         this.inheritedAttributes = {};
         this._type = 'checkbox';
+        this.hasLabelSlot = false;
         /**
          * Determines the input 'checked' state.
          */
@@ -38,8 +42,14 @@ export class PdsSwitch {
             if (this.helperMessage !== undefined) {
                 switchClasses += " pds-switch--message";
             }
+            if (this.hasLabelSlot) {
+                switchClasses += " pds-switch--label-slot";
+            }
             return switchClasses;
         };
+        this.updateHasLabelSlot = () => {
+            this.hasLabelSlot = Array.from(this.el.children).some((child) => child.getAttribute('slot') === 'label');
+        };
     }
     connectedCallback() {
         // Initialize ElementInternals for form association (only once per element instance)
@@ -80,11 +90,12 @@ export class PdsSwitch {
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.updateHasLabelSlot();
     }
     render() {
-        return (h(Host, { key: '0f7a97cc04485d5ead92f1d9e1deff176bef7859', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: 'bb8d0849e8ac5fd63d83f30d892bb195c7ed984c', htmlFor: this.componentId }, h("input", Object.assign({ key: 'd4f1c469ed61e5511fb4fef2b587b7320b7b8d10', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: 'a902c71c77d143e5930f18ab3f37d3442d9190e3', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: '3802a9cc1068caa4955634be3c728f283dedab16', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: 'be0d4094af7f9c59be32faf42aed585ec92fd730', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'f0f342b703fc5db7a4b03891ed5101e0ebcde47e', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'b04295a8cc5acec33c5c6461516e9ec57ff9c396', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: 'f052e2409b0d7603598fd59bcdd382d6091cd794', htmlFor: this.componentId }, h("input", Object.assign({ key: 'd61df3ac3762af2dcc27a8800f7317ac03994ea3', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: '0f921ea88d5706c364b1d8e4e05afac95be9f092', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: '727c77545b82e3f6f6399f5fc9d26657e42cc3f5', name: "label", onSlotchange: this.updateHasLabelSlot }, this.label))), this.helperMessage &&
+            h("div", { key: 'a9882d0246c772e0caec145c5c7f1170ea860624', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '10b51b743e43f995a4352470b92cff7bce24a897', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '00bbbf4bf88321b307a1536f7d9d436b0646c6eb', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -245,7 +256,7 @@ export class PdsSwitch {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -316,6 +327,11 @@ export class PdsSwitch {
             }
         };
     }
+    static get states() {
+        return {
+            "hasLabelSlot": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "pdsSwitchChange",

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class PdsTableBody {
     render() {
-        return (h(Host, { key: '38b6b6121a4652e5b98f2ff22721e687ae401437', role: "rowgroup", part: "body" }, h("slot", { key: '7ce84ac64307b9e19a8b4b72efe3e8eab34f99bf' })));
+        return (h(Host, { key: '0278bf4c680e9054748039dddbbb5cfcce3bb4e6', role: "rowgroup", part: "body" }, h("slot", { key: '44cf68f3b0dff78312a3d31d898209544ce8131e' })));
     }
     static get is() { return "pds-table-body"; }
     static get encapsulation() { return "shadow"; }

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

@@ -123,11 +123,11 @@ export class PdsTableCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '1c37f341c8171d322d60647b25bfa92fdd9ea339', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
+        return (h(Host, { key: 'c32bd43c6080e9a8a98578016973de9025e5d367', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '339b2217df131c58d76258f581a53c0bd46cbd03' })));
+                : {} }, h("slot", { key: '5b2af30784f41dcc7a0f66187f222ec2472f207f' })));
     }
     static get is() { return "pds-table-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,7 +42,7 @@ export class PdsTableHead {
         }
     }
     render() {
-        return (h(Host, { key: '5815389e77b61a323dd4430625b0917a7428bf02', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '161fdced5a7c7cd13a62fb7c1ed96e82ad2dbfd0', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (h("pds-checkbox", { key: 'd6e90d844d314ef347ffb4db8b360ba36887c311', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" })))), h("slot", { key: '1dd5dd37d4fca230000a6eb4b96fee87e4e67802' })));
+        return (h(Host, { key: 'ca88406002f440e9b9eefa639dac056e85403bd8', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '7c1939791a0573c6eccdec66d7b6d5de122a42c1', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (h("pds-checkbox", { key: '3a8581bbf9b5fc26396937e7d0bab370f6078090', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" })))), h("slot", { key: 'a736a10378936d4e4de5b139f3f57a345483c1bb' })));
     }
     static get is() { return "pds-table-head"; }
     static get encapsulation() { return "shadow"; }

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

@@ -199,11 +199,11 @@ export class PdsTableHeadCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'c30192a432bbd8868326fc7ed4199b98a33991ff', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
+        return (h(Host, { key: 'de7b2fb674def0a8046e1940488d435176dc9851', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: 'e725a7e576f6bc56d385c8cb0822ce255544fbcb' }), this.sortable && this.isActive && (h("pds-icon", { key: '52068d114bfadcd6d4e02c86e703349bc7833716', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
+                : {} }, h("slot", { key: '4ada173faf7d106cca34920540703a1d04f7e5bd' }), this.sortable && this.isActive && (h("pds-icon", { key: '1b0e87d74b6fa359e901a8e66479f37a88cdcf1c', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
     }
     static get is() { return "pds-table-head-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -137,7 +137,7 @@ export class PdsTableRow {
         }
     }
     render() {
-        return (h(Host, { key: '4188f670137051d35cf73a5ca86566f65c3eca09', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '122ff6ec96ea4857b863f9283bd46946dc403bff', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '9997b31c86190fe8f25ba4d1b42b8753facbba70', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: 'f9bc0700386b11a35f78d639118351675ab7150d' })));
+        return (h(Host, { key: '16ca08eefa74468559a1c084b7619836f01b27af', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '4b4d2ae15d519e08cd6710ddb6759923d478457c', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '78b9a731113cce82c59f40713561033f563ffc5f', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: '5522f2335912f59013e9fc1e1fc6070d645cd519' })));
     }
     static get is() { return "pds-table-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ export class PdsTabpanel {
         unwrapReconnectedContent(this.el.querySelector('.pds-tabpanel'), '.pds-tabpanel');
     }
     render() {
-        return (h(Host, { key: 'e1dd3a854d6ceffff0688afb7ed02f3d56ae9333', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, h("div", { key: '381a763bc540659c8944ff48ccc1a41ad94dc087', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: 'bdb11c6e68f701cf91fda68db5122bb9dfe7d894' }))));
+        return (h(Host, { key: 'cce5229aaa694a4eeb30ceacb7edbb7b03f7e24a', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, h("div", { key: '614187ea6676c80d94acd9aef7c8e10137fb6179', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: '368f81238023d647d42b3c1f6dc14795245bbc87' }))));
     }
     static get is() { return "pds-tabpanel"; }
     static get originalStyleUrls() {

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

@@ -160,7 +160,7 @@ export class PdsTabs {
         // Navigation mode: a <nav> landmark of links (aria-current marks the current
         // page). Panel mode: the ARIA tablist of role=tab buttons over tabpanels.
         const tabList = this.isNav ? (h("nav", { class: "pds-tabs__tablist", "aria-label": this.tablistLabel || undefined, part: "tab-list" }, h("slot", { name: "tabs" }))) : (h("div", { class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, h("slot", { name: "tabs" })));
-        return (h(Host, { key: 'f9d0e94dcacd7b94691368f08eb77b45475c0a35', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, h("slot", { key: '93c605b2bd4b8ad3dcd8f494a82fd30833e8b300', name: "tabpanels" })));
+        return (h(Host, { key: 'db689b695d53916eb40a7c6f4596a20925fd4b2e', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, h("slot", { key: 'd2e79967a75d4e2fc33bff5321c62cc89ac74491', name: "tabpanels" })));
     }
     static get is() { return "pds-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -83,7 +83,7 @@ export class PdsText {
             ? `pds-text--decoration-${this.decoration}`
             : ''}
     `;
-        return (h(Tag, { key: 'cf597479ded618a0674d68fd726b828d88c0e642', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: 'f9c163be5662522b012bca6b0a23cfe00860e474' })));
+        return (h(Tag, { key: '98269ec5b06387f89026a4f1327688c611b25a46', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: '73b6169bdd25a73930d1a01db3a0b5359491ab67' })));
     }
     static get is() { return "pds-text"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { assignDescription, isRequired, isSpecTest, messageId, exposeTypeProperty } from "../../utils/form";
-import { debounceEvent } from "../../utils/utils";
+import { cancelDebouncedEvent, debounceEvent, flushDebouncedEvent } from "../../utils/utils";
 import { inheritAttributes, inheritAriaAttributes } from "../../utils/attributes";
 import { danger } from "@pine-ds/icons/icons";
 import { formatMessage } from "../../i18n";
@@ -100,6 +100,8 @@ export class PdsTextarea {
     debounceChanged() {
         const { pdsInput, debounce, originalPdsInput } = this;
         this.pdsInput = debounce === undefined ? originalPdsInput !== null && originalPdsInput !== void 0 ? originalPdsInput : pdsInput : debounceEvent(pdsInput, debounce);
+        // After the swap, so an emit made while flushing goes to the new emitter, not the old one.
+        flushDebouncedEvent(pdsInput);
     }
     /**
      * Update the native input element when the value changes
@@ -161,6 +163,9 @@ export class PdsTextarea {
         return classNames.join('  ');
     }
     connectedCallback() {
+        var _a;
+        // Keep the raw emitter before the first wrap, so clearing debounce can restore it.
+        (_a = this.originalPdsInput) !== null && _a !== void 0 ? _a : (this.originalPdsInput = this.pdsInput);
         this.debounceChanged();
         // Initialize ElementInternals for form association (only once per element instance)
         if (this.el.attachInternals && !this.internals) {
@@ -168,6 +173,7 @@ export class PdsTextarea {
         }
     }
     disconnectedCallback() {
+        cancelDebouncedEvent(this.pdsInput);
         // Clean up ResizeObserver
         if (this.resizeObserver) {
             this.resizeObserver.disconnect();
@@ -178,7 +184,6 @@ export class PdsTextarea {
         this.hasAction = this.el.querySelector('[slot="action"]') !== null;
     }
     componentDidLoad() {
-        this.originalPdsInput = this.pdsInput;
         // Set initial form value
         this.updateFormValue();
         // Setup ResizeObserver for character counter positioning
@@ -301,10 +306,10 @@ export class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: '838d12ba686fb041996c44522d3fd30e1b56c610', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'bd3eef138a5c8f2cd4e48c007561bb1b12f4e575', class: "pds-textarea" }, this.label &&
-            h("div", { key: 'f83f23b17cd157d48bb5c0c5067ca5f611d73529', class: "pds-textarea__label-wrapper" }, h("label", { key: '896b7b495ad6f7deb8d4738e623f0676f0a98c1f', htmlFor: this.componentId }, h("span", { key: '02b06db969467f6c4e83e0f713bee0be76f8dfff', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '15c5964576e73db36cee4a9ca868c28571250a27', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '4493797e03322993a8cbe5530a18a9ef984b9796', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
-            h("p", { key: '9c8794ec733a3ece5eaeac74ef6a1ebb223558c3', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: 'c4b9be66c3f3c39ddf495708f0f03cfda03e7fc6', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'c117b8d62c055382f5d43caa7f2cb880796c495b', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: '2544624ceb5a51981954b76eb7a96f8bf0a258b5', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'e85e356a15dd11bbea276b122e67da23342e6ceb', class: "pds-textarea" }, this.label &&
+            h("div", { key: '452e96073c2045c2cb2dfa0c9ef7f7102096ab51', class: "pds-textarea__label-wrapper" }, h("label", { key: '84f88bb8211120801cab8b0d7a4915a128fadbfb', htmlFor: this.componentId }, h("span", { key: '43038785de0cb8c833ccd546a00bfc8879c94ecb', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '868a11635731026168c1ff75d81121ddb96ab7a6', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '80cb7da264045aba177d20f18df31b274afbf485', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
+            h("p", { key: '493b4378b668a96c7c66cbf2435f9c9d06bd0a72', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: 'ae6826d389a2a92fbff8de62a0fd55811764eb15', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'e3dd638311ee2617c8b8ae5743b4e87e5a773ebd', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }