@pine-ds/core 3.1.0 → 3.3.0

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

@@ -50,27 +50,59 @@ export class PdsPopover {
         const offset = 8;
         switch (this.placement) {
             case 'top':
+                top = triggerRect.top - popoverRect.height - offset;
+                left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
+                break;
+            case 'top-start':
                 top = triggerRect.top - popoverRect.height - offset;
                 left = triggerRect.left;
                 break;
+            case 'top-end':
+                top = triggerRect.top - popoverRect.height - offset;
+                left = triggerRect.right - popoverRect.width;
+                break;
             case 'right':
+                top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
+                left = triggerRect.right + offset;
+                break;
+            case 'right-start':
                 top = triggerRect.top;
                 left = triggerRect.right + offset;
                 break;
+            case 'right-end':
+                top = triggerRect.bottom - popoverRect.height;
+                left = triggerRect.right + offset;
+                break;
             case 'bottom':
+                top = triggerRect.bottom + offset;
+                left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
+                break;
+            case 'bottom-start':
                 top = triggerRect.bottom + offset;
                 left = triggerRect.left;
                 break;
+            case 'bottom-end':
+                top = triggerRect.bottom + offset;
+                left = triggerRect.right - popoverRect.width;
+                break;
             case 'left':
+                top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
+                left = triggerRect.left - popoverRect.width - offset;
+                break;
+            case 'left-start':
                 top = triggerRect.top;
                 left = triggerRect.left - popoverRect.width - offset;
                 break;
+            case 'left-end':
+                top = triggerRect.bottom - popoverRect.height;
+                left = triggerRect.left - popoverRect.width - offset;
+                break;
         }
         popoverEl.style.top = `${top}px`;
         popoverEl.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: '3bed0c38e97500efb2bffcef8321a6b38215c434' }, h("button", { key: '0db59e1815568cb980ce0bbe5ef3502177015a1d', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction, onClick: this.handleClick }, this.text), h("div", { key: 'd8c70cd36614cb3fc83669a843b00af0d18b03d4', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, h("slot", { key: 'e7408b199525e88c0e975f9cc3e96200f82ea23e' }))));
+        return (h(Host, { key: '35e5f4c21884f02b17dcb920e5c7ba73b8bed849' }, h("button", { key: '586880a84a4ad659a00500206e5b3c6c5e7e1a37', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction, onClick: this.handleClick }, this.text), h("div", { key: 'fcb97e9b4033eef58bdca4915572b986dabde43c', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, h("slot", { key: '1ffb626c69e06f17379ebf4ff4d5498f030909e8' }))));
     }
     static get is() { return "pds-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"pds-popover.js","sourceRoot":"","sources":["../../../src/components/pds-popover/pds-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Listen, h, Prop, State } from '@stencil/core';\nimport { PlacementType } from '@utils/types';\n\n@Component({\n  tag: 'pds-popover',\n  styleUrl: 'pds-popover.scss',\n  shadow: true,\n})\nexport class PdsPopover {\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsPopoverElement;\n\n  /**\n   * Determines when the popover is active\n   * @defaultValue false\n   */\n  @State() active = false;\n\n  /**\n   * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.\n   * @defaultValue \"show\"\n   */\n  @Prop() popoverTargetAction: 'show' | 'toggle' | 'hide' = 'show';\n\n  /**\n   * Determines the type of popover. Auto popovers can be \"light dismissed\" by clicking outside of the popover.\n   * Manual popovers require the consumer to handle the visibility of the popover.\n   */\n  @Prop() popoverType: 'auto' | 'manual' = 'auto';\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Text that appears on the trigger element\n   */\n  @Prop() text: string;\n\n  /**\n   * Sets the maximum width of the popover content\n   * @defaultValue 352\n   */\n  @Prop() maxWidth?: number = 352;\n\n  /**\n   * Determines the preferred position of the popover\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement: PlacementType = 'right';\n\n  componentWillRender() {\n    this.handlePopoverPositioning();\n  }\n\n  @Listen('click', {\n    capture: true\n  })\n  handleClick() {\n    this.active = !this.active;\n  }\n\n  @Listen('scroll', {\n    target: 'window',\n    capture: true\n  })\n  handleScroll() {\n    if (this.active) {\n      this.handlePopoverPositioning();\n    }\n  }\n\n  private handlePopoverPositioning() {\n    const triggerEl = this.el.shadowRoot.querySelector('.pds-popover__trigger') as HTMLElement;\n    const popoverEl = this.el.shadowRoot.querySelector('div[popover]') as HTMLElement;\n\n    if (!triggerEl || !popoverEl) return;\n\n    const triggerRect = triggerEl.getBoundingClientRect();\n    const popoverRect = popoverEl.getBoundingClientRect();\n\n    let top = 0;\n    let left = 0;\n    const offset = 8\n\n    switch (this.placement) {\n      case 'top':\n        top = triggerRect.top - popoverRect.height - offset;\n        left = triggerRect.left;\n        break;\n      case 'right':\n        top = triggerRect.top;\n        left = triggerRect.right + offset;\n        break;\n      case 'bottom':\n        top = triggerRect.bottom + offset;\n        left = triggerRect.left;\n        break;\n      case 'left':\n        top = triggerRect.top;\n        left = triggerRect.left - popoverRect.width - offset;\n        break;\n    }\n\n    popoverEl.style.top = `${top}px`;\n    popoverEl.style.left = `${left}px`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class=\"pds-popover__trigger\"\n          popoverTarget={this.componentId}\n          popoverTargetAction={this.popoverTargetAction}\n          onClick={this.handleClick}\n        >\n          {this.text}\n        </button>\n        <div\n          class={`pds-popover ${this.active ? 'pds-popover--active' : ''}`}\n          id={this.componentId}\n          popover={this.popoverType}\n          style={{ maxWidth: `${this.maxWidth}px` }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-popover.js","sourceRoot":"","sources":["../../../src/components/pds-popover/pds-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Listen, h, Prop, State } from '@stencil/core';\nimport { PlacementType } from '@utils/types';\n\n@Component({\n  tag: 'pds-popover',\n  styleUrl: 'pds-popover.scss',\n  shadow: true,\n})\nexport class PdsPopover {\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsPopoverElement;\n\n  /**\n   * Determines when the popover is active\n   * @defaultValue false\n   */\n  @State() active = false;\n\n  /**\n   * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.\n   * @defaultValue \"show\"\n   */\n  @Prop() popoverTargetAction: 'show' | 'toggle' | 'hide' = 'show';\n\n  /**\n   * Determines the type of popover. Auto popovers can be \"light dismissed\" by clicking outside of the popover.\n   * Manual popovers require the consumer to handle the visibility of the popover.\n   */\n  @Prop() popoverType: 'auto' | 'manual' = 'auto';\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Text that appears on the trigger element\n   */\n  @Prop() text: string;\n\n  /**\n   * Sets the maximum width of the popover content\n   * @defaultValue 352\n   */\n  @Prop() maxWidth?: number = 352;\n\n  /**\n   * Determines the preferred position of the popover\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement: PlacementType = 'right';\n\n  componentWillRender() {\n    this.handlePopoverPositioning();\n  }\n\n  @Listen('click', {\n    capture: true\n  })\n  handleClick() {\n    this.active = !this.active;\n  }\n\n  @Listen('scroll', {\n    target: 'window',\n    capture: true\n  })\n  handleScroll() {\n    if (this.active) {\n      this.handlePopoverPositioning();\n    }\n  }\n\n  private handlePopoverPositioning() {\n    const triggerEl = this.el.shadowRoot.querySelector('.pds-popover__trigger') as HTMLElement;\n    const popoverEl = this.el.shadowRoot.querySelector('div[popover]') as HTMLElement;\n\n    if (!triggerEl || !popoverEl) return;\n\n    const triggerRect = triggerEl.getBoundingClientRect();\n    const popoverRect = popoverEl.getBoundingClientRect();\n\n    let top = 0;\n    let left = 0;\n    const offset = 8\n\n    switch (this.placement) {\n      case 'top':\n        top = triggerRect.top - popoverRect.height - offset;\n        left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;\n        break;\n      case 'top-start':\n        top = triggerRect.top - popoverRect.height - offset;\n        left = triggerRect.left;\n        break;\n      case 'top-end':\n        top = triggerRect.top - popoverRect.height - offset;\n        left = triggerRect.right - popoverRect.width;\n        break;\n      case 'right':\n        top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;\n        left = triggerRect.right + offset;\n        break;\n      case 'right-start':\n        top = triggerRect.top;\n        left = triggerRect.right + offset;\n        break;\n      case 'right-end':\n        top = triggerRect.bottom - popoverRect.height;\n        left = triggerRect.right + offset;\n        break;\n      case 'bottom':\n        top = triggerRect.bottom + offset;\n        left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;\n        break;\n      case 'bottom-start':\n        top = triggerRect.bottom + offset;\n        left = triggerRect.left;\n        break;\n      case 'bottom-end':\n        top = triggerRect.bottom + offset;\n        left = triggerRect.right - popoverRect.width;\n        break;\n      case 'left':\n        top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;\n        left = triggerRect.left - popoverRect.width - offset;\n        break;\n      case 'left-start':\n        top = triggerRect.top;\n        left = triggerRect.left - popoverRect.width - offset;\n        break;\n      case 'left-end':\n        top = triggerRect.bottom - popoverRect.height;\n        left = triggerRect.left - popoverRect.width - offset;\n        break;\n    }\n\n    popoverEl.style.top = `${top}px`;\n    popoverEl.style.left = `${left}px`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class=\"pds-popover__trigger\"\n          popoverTarget={this.componentId}\n          popoverTargetAction={this.popoverTargetAction}\n          onClick={this.handleClick}\n        >\n          {this.text}\n        </button>\n        <div\n          class={`pds-popover ${this.active ? 'pds-popover--active' : ''}`}\n          id={this.componentId}\n          popover={this.popoverType}\n          style={{ maxWidth: `${this.maxWidth}px` }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -18,7 +18,7 @@ export class PdsProgress {
         this.showPercent = false;
     }
     render() {
-        return (h(Host, { key: 'a0a7cde165c1acc884366dfe7a368db5d7c4150e', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: 'c2a8f262e0a6393448a0bc8a05dc49f30c451754', class: "pds-progress" }, h("label", { key: '422c51d5b06ef6d99e23cb2721b861ba9611b1df', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '57081cc95c8bb44d6fa26cd7d1f7933108982165', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '37b88967a8584b43407314b0ba70faf4e43a9e5a', class: "pds-progress__percentage" }, this.percent, "%")));
+        return (h(Host, { key: '2a7768cc769f62579bfee6d8f9e6109d10df0aaf', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '1eef3758e8c6e470f8cdd170e8d6c49e25bf9aa3', class: "pds-progress" }, h("label", { key: '5b75150a747a15379fdf0ee23b1be561e6d990e7', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'e20ad7d705d97ac11173ae515332fc1620a96328', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '8bafb39b5976149b80e720952e625f60f1e3c73c', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get is() { return "pds-progress"; }
     static get encapsulation() { return "shadow"; }

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

@@ -43,9 +43,9 @@ export class PdsRadio {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '7366c979970c03d9c6b26d355ba2f14c2e040907', class: this.classNames() }, h("label", { key: 'c48405dc725f4d7b0a027e66c3b0b04e72843445', htmlFor: this.componentId }, h("input", { key: 'cd38a200a73572d2f07ada9bc1ec08cae0863044', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "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 }), h("span", { key: 'a21fb68b4326afb2bf25b08cf6022cd26f3c83ba', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: 'b4c201465e085096ac5fac05e43b01cee045310e', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '2c0475efbe1ebedd762de9d432864f5dab8f0448', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '40ece3a429d9475c17f262d772cdb7332a7089b2', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: '8c215fa4193cf8bd246cd83edf97b8316685714e', class: this.classNames() }, h("label", { key: '578530f26dd25f73ccbbb39c773290cd275920cf', htmlFor: this.componentId }, h("input", { key: '9ab61a2683246fae862feb5e432a0872288b7a87', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "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 }), h("span", { key: 'f48c47ddb347bf0d7388359665dbbf3abf1b4859', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: 'b8dbb34af90eed82f69621ceaadd8da668f0b3de', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'e777e4f2397ba833aefb7e8cd4ab9a32ea93685a', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '13bd73d91bb3d676757ac9f4dcfcef7d2a5fcc55', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-radio"; }
     static get encapsulation() { return "scoped"; }

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

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

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

@@ -1,3 +1,15 @@
+:host {
+  --pds-select-background: var(--pine-color-background-container);
+  --pds-select-border: var(--pine-border);
+  --pds-select-border-radius: var(--pine-dimension-125);
+  --pds-select-border-radius-start-end: var(--pine-dimension-125);
+  --pds-select-border-radius-start-start: var(--pine-dimension-125);
+  --pds-select-border-radius-end-end: var(--pine-dimension-125);
+  --pds-select-border-radius-end-start: var(--pine-dimension-125);
+  --pds-select-min-height: 36px;
+  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);
+  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);
+}
 :host .hidden,
 :host :host([hidden]) {
   display: none;
@@ -20,12 +32,17 @@ label {
 
 select {
   appearance: none;
-  background: var(--pine-color-background-container);
-  border: var(--pine-border);
-  border-radius: var(--pine-dimension-125);
+  background-color: var(--pds-select-background);
+  border: var(--pds-select-border);
+  border-radius: var(--pds-select-border-radius);
+  border-bottom-left-radius: var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));
+  border-bottom-right-radius: var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));
+  border-top-left-radius: var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));
+  border-top-right-radius: var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));
   font: var(--pine-typography-body);
   grid-area: field;
   letter-spacing: var(--pine-letter-spacing);
+  min-height: var(--pds-select-min-height);
   padding: var(--pine-dimension-xs) var(--pine-dimension-150);
   padding-inline-end: var(--pine-dimension-450);
   position: relative;
@@ -84,8 +101,21 @@ select:has(~ .pds-select__message .pds-select__error-message):focus-visible {
   display: flex;
   grid-column: -1/-2;
   grid-row: 2/3;
-  height: 2.5rem;
+  height: var(--pds-select-min-height);
   pointer-events: none;
   position: relative;
   z-index: 1;
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: polygon(0 0, 0 0, 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }

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

@@ -114,8 +114,7 @@ export class PdsSelect {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '6eea9a5492e4b7e415922bce0aa8f2295792a9e4', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames() }, h("div", { key: '3180e1eff494f846f395d9db6730926d86d1e54a', class: "pds-select" }, this.label &&
-            h("label", { key: '90dc521ef10b81a9f58a0f0a2cfa4bc685312119', htmlFor: this.componentId }, this.label), h("select", { key: 'd6576d25601de6c41893568927b64e530bf9f266', autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: '87c53bb7bf315e170f60e5b58afcbf623d1aa65c', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '8cafbc8cc8e23de0ab69b9d6b7d23c896df530b6', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '48758d321edbd38ff6bd31ddd1902627202e196e', class: "pds-select__select-icon", icon: enlarge }))));
+        return (h(Host, { key: 'c0a0b391e6b5c35d5d3d7fce9d1f92583c582aa5', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames() }, h("div", { key: '4f91cfcfcc570cf79d8e6a2f86d741f471489591', class: "pds-select" }, !this.hideLabel && (h("label", { key: '21fa83cfdad6a46be1efa22ebc4df696ca49b7b1', htmlFor: this.componentId }, h("span", { key: '760e46f98327c3b8e9ceb48ee158202ce42b8bb6', class: this.hideLabel ? 'visually-hidden' : '' }, this.label))), h("select", { key: '78d92779624d84df9ae73515bbda74d9d44a8919', "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, onChange: this.onSelectUpdate, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: '9a75bf791747df08018d59de49855410c6dc2312', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '1a974b4e171971e922aa04e9a56d6e6f26635724', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '9cbc569418617092229d660b34b2c17a2826c878', class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get is() { return "pds-select"; }
     static get encapsulation() { return "shadow"; }
@@ -211,6 +210,25 @@ export class PdsSelect {
                 "attribute": "error-message",
                 "reflect": false
             },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-label",
+                "reflect": false
+            },
             "helperMessage": {
                 "type": "string",
                 "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"pds-select.js","sourceRoot":"","sources":["../../../src/components/pds-select/pds-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId } from '../../utils/form';\nimport { danger, enlarge } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-select',\n  styleUrls: ['pds-select.tokens.scss', '../../global/styles/utils/label.scss', 'pds-select.scss'],\n  shadow: true,\n})\nexport class PdsSelect {\n\n  private selectEl!: HTMLSelectElement;\n  private slotContainer!: HTMLDivElement;\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the select field is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false\n\n  /**\n   * Displays error message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Displays helper message text below select.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines whether or not the select is invalid.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the select label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Indicates whether multiple options can be selected.\n   * @defaultValue false\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name!: string;\n\n  /**\n   * Indicates whether or not the select field is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value(s) of the selected option(s).\n   *\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n  @Watch('value')\n  /**\n   * Handles the change in the value of the select component.\n   * This method is called whenever the value of the select component changes.\n   * It updates the selected option accordingly.\n   */\n  valueChanged() {\n    this.updateSelectedOption();\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption();\n  }\n\n  /**\n   * Updates the selected option in the select element based on the current value.\n   *\n   * This method iterates through all the options of the select element and sets the\n   * 'selected' attribute on the option that matches the current value. If an option\n   * does not match the current value, the 'selected' attribute is removed.\n   *\n   * @private\n   * @returns {void}\n   */\n  private updateSelectedOption() {\n    if (this.selectEl) {\n      const options = this.selectEl.options;\n\n      // Update the selected attribute for all options.\n      Array.from(options).map((option: HTMLOptionElement) => {\n        if (Array.isArray(this.value)) {\n          option.selected = this.value.includes(option.value);\n        } else {\n          option.selected = this.value === option.value;\n        }\n      });\n    };\n  }\n\n  /**\n   * Emits an event on input change.\n  */\n  private onSelectUpdate = (e: Event) => {\n    const target = e.target as HTMLSelectElement\n\n    const values = Array.from(target.options)\n        .filter((option) => ( option.selected))\n        .map((option) => ( option.value));\n\n    if (values.length === 1 && !this.multiple) {\n        this.value = values[0];\n    } else {\n        this.value = values;\n    }\n\n    this.pdsSelectChange.emit(e as InputEvent);\n  };\n\n  /**\n   * Handles the change event for the slot element.\n   * This method is triggered when the slot content changes.\n   * It updates the inner HTML of the select element by cloning and appending\n   * the assigned <option> elements from the slot.\n   */\n  private handleSlotChange = () => {\n    const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n    this.selectEl.innerHTML = '';\n    const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement | HTMLOptGroupElement)[];\n\n    assignedElements.forEach((item) => {\n      if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n        const clonedItem = item.cloneNode(true) as HTMLOptionElement | HTMLOptGroupElement;\n        if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n          (clonedItem as HTMLOptionElement).selected = true;\n        }\n        this.selectEl.appendChild(clonedItem);\n      }\n    });\n\n    this.updateSelectedOption();\n  };\n\n  private getHelperMessage() {\n    return this.helperMessage && (\n      <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n        {this.helperMessage}\n      </p>\n    );\n  }\n\n  private getErrorMessage() {\n    return this.errorMessage && (\n      <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n        <pds-icon icon={danger} size=\"small\"></pds-icon>\n        {this.errorMessage}\n      </p>\n    );\n  }\n\n  private renderMessages() {\n    if (!this.helperMessage && !this.errorMessage) return null;\n\n    return (\n      <div class=\"pds-select__message\">\n        {this.getHelperMessage()}\n        {this.getErrorMessage()}\n      </div>\n    );\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()}>\n        <div class=\"pds-select\">\n          {this.label &&\n            <label htmlFor={this.componentId}>{this.label}</label>\n          }\n          <select\n            autocomplete={this.autocomplete || undefined}\n            class=\"pds-select__field\"\n            disabled={this.disabled}\n            id={this.componentId}\n            multiple={this.multiple}\n            name={this.name}\n            onChange={this.onSelectUpdate}\n            required={this.required}\n            ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n          ></select>\n          <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n            <slot onSlotchange={this.handleSlotChange}></slot>\n          </div>\n          {this.renderMessages()}\n          {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-select.js","sourceRoot":"","sources":["../../../src/components/pds-select/pds-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId } from '../../utils/form';\nimport { danger, enlarge } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-select',\n  styleUrls: ['pds-select.tokens.scss', '../../global/styles/utils/label.scss', 'pds-select.scss'],\n  shadow: true,\n})\nexport class PdsSelect {\n\n  private selectEl!: HTMLSelectElement;\n  private slotContainer!: HTMLDivElement;\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Indicates whether or not the select field is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false\n\n  /**\n   * Displays error message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n  @Prop() hideLabel: boolean;\n\n  /**\n   * Displays helper message text below select.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines whether or not the select is invalid.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the select label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Indicates whether multiple options can be selected.\n   * @defaultValue false\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name!: string;\n\n  /**\n   * Indicates whether or not the select field is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value(s) of the selected option(s).\n   *\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n  @Watch('value')\n  /**\n   * Handles the change in the value of the select component.\n   * This method is called whenever the value of the select component changes.\n   * It updates the selected option accordingly.\n   */\n  valueChanged() {\n    this.updateSelectedOption();\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption();\n  }\n\n  /**\n   * Updates the selected option in the select element based on the current value.\n   *\n   * This method iterates through all the options of the select element and sets the\n   * 'selected' attribute on the option that matches the current value. If an option\n   * does not match the current value, the 'selected' attribute is removed.\n   *\n   * @private\n   * @returns {void}\n   */\n  private updateSelectedOption() {\n    if (this.selectEl) {\n      const options = this.selectEl.options;\n\n      // Update the selected attribute for all options.\n      Array.from(options).map((option: HTMLOptionElement) => {\n        if (Array.isArray(this.value)) {\n          option.selected = this.value.includes(option.value);\n        } else {\n          option.selected = this.value === option.value;\n        }\n      });\n    };\n  }\n\n  /**\n   * Emits an event on input change.\n  */\n  private onSelectUpdate = (e: Event) => {\n    const target = e.target as HTMLSelectElement\n\n    const values = Array.from(target.options)\n        .filter((option) => ( option.selected))\n        .map((option) => ( option.value));\n\n    if (values.length === 1 && !this.multiple) {\n        this.value = values[0];\n    } else {\n        this.value = values;\n    }\n\n    this.pdsSelectChange.emit(e as InputEvent);\n  };\n\n  /**\n   * Handles the change event for the slot element.\n   * This method is triggered when the slot content changes.\n   * It updates the inner HTML of the select element by cloning and appending\n   * the assigned <option> elements from the slot.\n   */\n  private handleSlotChange = () => {\n    const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n    this.selectEl.innerHTML = '';\n    const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement | HTMLOptGroupElement)[];\n\n    assignedElements.forEach((item) => {\n      if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n        const clonedItem = item.cloneNode(true) as HTMLOptionElement | HTMLOptGroupElement;\n        if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n          (clonedItem as HTMLOptionElement).selected = true;\n        }\n        this.selectEl.appendChild(clonedItem);\n      }\n    });\n\n    this.updateSelectedOption();\n  };\n\n  private getHelperMessage() {\n    return this.helperMessage && (\n      <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n        {this.helperMessage}\n      </p>\n    );\n  }\n\n  private getErrorMessage() {\n    return this.errorMessage && (\n      <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n        <pds-icon icon={danger} size=\"small\"></pds-icon>\n        {this.errorMessage}\n      </p>\n    );\n  }\n\n  private renderMessages() {\n    if (!this.helperMessage && !this.errorMessage) return null;\n\n    return (\n      <div class=\"pds-select__message\">\n        {this.getHelperMessage()}\n        {this.getErrorMessage()}\n      </div>\n    );\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()}>\n        <div class=\"pds-select\">\n          {!this.hideLabel && (\n            <label htmlFor={this.componentId}>\n              <span class={this.hideLabel ? 'visually-hidden' : ''}>\n                {this.label}\n              </span>\n            </label>\n          )}\n          <select\n            aria-label={this.hideLabel ? this.label : undefined}\n            autocomplete={this.autocomplete || undefined}\n            class=\"pds-select__field\"\n            disabled={this.disabled}\n            id={this.componentId}\n            multiple={this.multiple}\n            name={this.name}\n            onChange={this.onSelectUpdate}\n            part=\"select\"\n            required={this.required}\n            ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n          ></select>\n          <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n            <slot onSlotchange={this.handleSlotChange}></slot>\n          </div>\n          {this.renderMessages()}\n          {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -7,6 +7,7 @@ export default {
     autocomplete: null,
     disabled: false,
     errorMessage: null,
+    hideLabel: false,
     helperMessage: null,
     invalid: false,
     multiple: false,
@@ -52,6 +53,7 @@ const BaseTemplate = (args) =>
     disabled="${args.disabled}"
     error-message="${args.errorMessage}"
     helper-message="${args.helperMessage}"
+    hide-label="${args.hideLabel}"
     invalid="${args.invalid}"
     label="${args.label}"
     multiple="${args.multiple}"

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

@@ -25,7 +25,7 @@ export class PdsSortableItem {
         }
     }
     render() {
-        return (h(Host, { key: '1a5e7d46d027bf6aa95b9d688e390ab42a40cc8d', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'a6653d963a7a8f39937507dd94042943b4627686', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'a5c340eaf2f3f4d3fb4a0cc66371444d8844b078', icon: handleIcon }))), h("slot", { key: '647f24778a2450c040596c6bea279236b0148e0f' }), this.enableActions && (h("div", { key: '7b8c76b0519c21fe0bd29cb5ef3f213296f30ef4', class: "pds-sortable-item__actions" }, h("slot", { key: '636480cd939b04ed739a2e6a7dbc489680a18a57', name: "sortable-item-actions" })))));
+        return (h(Host, { key: 'b7817592ed6329f84e09ff5c5e200bc4305275bc', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'c31df5f0c81bd684ac60690044e2409d0cbc7831', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'ff764a5ef70560c073474a7a51f45dd89df53190', icon: handleIcon }))), h("slot", { key: 'e1f33a5e56b37405b7e46bff24dc91e4ece71870' }), this.enableActions && (h("div", { key: '569563f7c7d5b069888a8c3ee8e50fd3d626b1b2', class: "pds-sortable-item__actions" }, h("slot", { key: '9ca544725723703ddac0de3f0bb9a4b0884d1571', 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

@@ -44,7 +44,7 @@ export class PdsSortable {
         Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (h(Host, { key: 'd120089730b34d5e787a34439f5d308e0c476c7a', class: this.classNames(), id: this.componentId }, h("slot", { key: 'b796c6aca1acde55085163049ecb869952cf8fb6' })));
+        return (h(Host, { key: 'c5353036ad9b108f742e55b1a28ebb449cf556d0', class: this.classNames(), id: this.componentId }, h("slot", { key: 'cb71736fb3388f5829476c5b4802d5aa5f811ac7' })));
     }
     static get is() { return "pds-sortable"; }
     static get encapsulation() { return "scoped"; }

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

@@ -43,9 +43,9 @@ export class PdsSwitch {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
     }
     render() {
-        return (h(Host, { key: '1ccbfafc2087558aae2fe82c9a97c640a9c3ab66', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: '9cd218cace5c432f57f03514c91c27ba32eeb97f', htmlFor: this.componentId }, h("input", Object.assign({ key: 'ce995e0706a576dd36a4f1b31ca862ae614f7e2d', "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "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: 'ea20d65944a429e24b8bd0ae58dafd7ece29e9a7', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: '45656b263c5169d0c6b60dd19e8537e0f12df342', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '53ca563b419ce20ff4f4c81c90eee8f687e355b8', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'b8e38204aea3e9e1c542d5c945f57d389d800b66', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'c91cd6368fff2cbcc6b4974505d94139fa2722c5', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: 'e46f5f6a8073236ec0d55b2bcc8087dc32ad5a68', htmlFor: this.componentId }, h("input", Object.assign({ key: '9a2db3481c6c5e223819066df34bc220a139df03', "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "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: 'c3b138eb7b6800d01e5676e94c17988c8a52d4b2', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: 'fcaaa0ea30c8ad155a0b43004e77549abf888a57', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '045311e393d47bebd536d8fbe220260d112ceb3f', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '035488794764ffaee3275edfa9a3e9fad2d11ddb', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-switch"; }
     static get encapsulation() { return "shadow"; }

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: 'c01028ed3108a0404ef3da77f1cf7a3b97a40b52', role: "rowgroup" }, h("slot", { key: 'f8491f02e732d28b01bc9cf2436c6edca3cbfc0e' })));
+        return (h(Host, { key: 'ac8d361f2d78eb929c17523843d2ca0ac53f6789', role: "rowgroup" }, h("slot", { key: '132782ab9466a9dbd4350247aae762d731e7aa71' })));
     }
     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

@@ -37,11 +37,11 @@ export class PdsTableCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '4d7c288150875806711b91436c2673fb3cb55ee6', class: this.classNames(), role: "gridcell", style: this.tableRef &&
+        return (h(Host, { key: '801c1c1de26cb633280f308274861e8fd3629091', class: this.classNames(), role: "gridcell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '817efadaba22b60410fffc5a41bcacc2d9656939' })));
+                : {} }, h("slot", { key: '0000fae3c9f199e3e80328afa7dd4347f429980b' })));
     }
     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

@@ -32,7 +32,7 @@ export class PdsTableHead {
         }
     }
     render() {
-        return (h(Host, { key: '13fc9ae7847a0fcb938b335b8b3c3aa6d243e387', role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '960af222613758a88bd140a1d0aaec51114834df', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, h("pds-checkbox", { key: '1b3bead263f15861010c2229b50dc8bcf9a08524', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected }))), h("slot", { key: '922d1b7aa67a44c91bbc70cc4d0e07abcada73aa' })));
+        return (h(Host, { key: '38eaecd17a328791e5993d020a490f63f67cd9d5', role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '438086205f3e018f597c868e98f300d28c4f3384', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, h("pds-checkbox", { key: '835bbe3c1f3a0fcb217f62cf862b9ea80ddff38e', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected }))), h("slot", { key: 'aa5507016e20951eab86f62680720c54de5a5a86' })));
     }
     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

@@ -61,11 +61,11 @@ export class PdsTableHeadCell {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '8b7b8472a8e7f05e8f5b3c7cc3de2cd45c7f3f57', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
+        return (h(Host, { key: '2e75e9b8d1254ec21c786fd7e8304aaf38b26377', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '86266623f850b38494eb9f2cbca9baf54e082d7e' }), this.sortable && (h("pds-icon", { key: 'e1e7f058ecab154e50ae3200b75de55244b31428', icon: this.sortingDirection === 'asc' ? upSmall : downSmall }))));
+                : {} }, h("slot", { key: 'f9c7aae07eb7907a18dcf1a59813a2810341f2e9' }), this.sortable && (h("pds-icon", { key: 'd24a2f2c1db5bb15216ba64bc5a7299e18c23626', icon: this.sortingDirection === 'asc' ? upSmall : downSmall }))));
     }
     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

@@ -43,7 +43,7 @@ export class PdsTableRow {
         }
     }
     render() {
-        return (h(Host, { key: '8dfdc0200b16d9db1988eb655540eeae40baaffc', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '120ea20f06308f95ea77e5c2f0664b673b367f3b', part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: 'eaf6e41d00b5f5664d7ed99a993202c871822d0a', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected }))), h("slot", { key: 'e87e93a24e87b2a8faffd47fd4e4c1f22e63916c' })));
+        return (h(Host, { key: '651138280f94fd837a77e172c7e0ae5181ce8357', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '739cd15863b52d60f9a00bffcf0d900b1ce1f545', part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '2b2000bc223fa72e2be0edea25e72e4d26a98fa1', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected }))), h("slot", { key: '9d3be777c57b1ba4be066cc4ffa5496289fbdc02' })));
     }
     static get is() { return "pds-table-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -83,7 +83,7 @@ export class PdsTable {
         headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;
     }
     render() {
-        return (h(Host, { key: '7208900f692fa61b763567f14cc505a9c0a8fd88', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("slot", { key: '03f938219c8e0efd224b69e41db95f9f1b8b91c5' })));
+        return (h(Host, { key: '8fbd30502d23962edf8977e9d23b8e990f043e23', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("slot", { key: '5041e5f588db255c747406c47bcfb3524cd58450' })));
     }
     static get is() { return "pds-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,9 +11,9 @@ export class PdsTab {
         this.pdsTabClick.emit([index, parentComponentId]);
     }
     render() {
-        const availabilityTabEdgeInlineStart = (h("span", { key: 'f03f2a822bc603cf61483202ae9a249b8586ed02', class: "pds-tab-edge", role: "presentation" }));
-        const availabilityTabEdgeInlineEnd = (h("span", { key: 'ccf11be9b997f174b555021cd50e07a4128c7182', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
-        return (h(Host, { key: '8643374d23c0e3329f4f39f4ee5c025f95a06b30', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '469df7696312659dd0af97561fb92aad22f054c0', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.selected ? "0" : "-1", "aria-selected": this.selected ? "true" : "false", class: this.selected ? "pds-tab is-active" : "pds-tab", onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { key: 'e759f2c4d52db51f0b92bf4424bcc42d6b266e37', class: "pds-tab__content" }, h("slot", { key: '88226acf10ef132470aeefad0459dd377609b325' })))));
+        const availabilityTabEdgeInlineStart = (h("span", { key: 'cdf38229fcb4548cf188e401d8949f0fdddd8160', class: "pds-tab-edge", role: "presentation" }));
+        const availabilityTabEdgeInlineEnd = (h("span", { key: 'ffd68b6f2c2a521560495411455185d426d41446', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
+        return (h(Host, { key: 'afc723cff632012e447cecf9e4a2d7258b846d48', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: 'f7f814b9ef9ac505a741ce74abd91934116f975f', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.selected ? "0" : "-1", "aria-selected": this.selected ? "true" : "false", class: this.selected ? "pds-tab is-active" : "pds-tab", onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { key: '12fea0cfdf4a1e9acee497ff3e60cb276f6ae649', class: "pds-tab__content" }, h("slot", { key: 'bf4455e277526a453111542ce7c80a0621135f18' })))));
     }
     static get is() { return "pds-tab"; }
     static get originalStyleUrls() {

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

@@ -8,7 +8,7 @@ export class PdsTabpanel {
         this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
     }
     render() {
-        return (h(Host, { key: 'aef4969e26b1f6e98eebdba3bcfe7bebe2d75e52', slot: "tabpanels" }, h("div", { key: 'e90ebc7253b40a7c9d5e120584e8887855d3730c', 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: '79d03b545cf3fc73c54d660eb46661d5d1adbe64' }))));
+        return (h(Host, { key: '021d0c1f2fd740087bdd88069ac82455b8b5ede1', slot: "tabpanels" }, h("div", { key: '036aca9a0a29ba7cfc8aa0132eab027898a661f2', 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: 'd6b61e7b8af79204dbb5d3e421028715236a7bb1' }))));
     }
     static get is() { return "pds-tabpanel"; }
     static get originalStyleUrls() {

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

@@ -76,7 +76,7 @@ export class PdsTabs {
         this.passPropsToChildren();
     }
     render() {
-        return (h(Host, { key: '33e22ebb5d4ae476cef5c4c95cb455b1c54fd083', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: '7219b9019640a50cfae5442b36ece10aff6a5e51', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: '32e2c4f0a1feec88f3693c720019b548932687ff', name: "tabs" })), h("slot", { key: '6235cfb2ef48346a96239c4a619c3ae900f6101e', name: "tabpanels" })));
+        return (h(Host, { key: 'ed163de5068114e7c7dd8314c7ed036859d0d0af', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: '4b0f2bce407b2ea5c7ceb1435f4f91531334557e', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: 'a61fb9bd35056f87233c1fec66dda175b201b265', name: "tabs" })), h("slot", { key: 'd78cc498b17ddd84015174802e4eb18fc5053ec2', name: "tabpanels" })));
     }
     static get is() { return "pds-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class PdsText {
       ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}
       ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}
     `;
-        return (h(Tag, { key: '1c2ed722c094e0c6181fac5ea3ba2a2ef6751b33', style: this.color && setColor(this.color), class: typeClasses }, h("slot", { key: 'd1ba6f29df4f8b809a2a900c23c6c77480d3e3ca' })));
+        return (h(Tag, { key: '327e3b37535dd5eb28cf3ea0430e544261e570c0', style: this.color && setColor(this.color), class: typeClasses }, h("slot", { key: '97010a619baa6fd4a45e79ab9354097e99af0ae2' })));
     }
     static get is() { return "pds-text"; }
     static get encapsulation() { return "shadow"; }
@@ -203,7 +203,7 @@ export class PdsText {
                 "getter": false,
                 "setter": false,
                 "attribute": "truncate",
-                "reflect": false
+                "reflect": true
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"pds-text.js","sourceRoot":"","sources":["../../../src/components/pds-text/pds-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAO7C,MAAM,OAAO,OAAO;IALpB;QAsEE;;WAEG;QACK,QAAG,GAWF,GAAG,CAAC;KAyBd;IAlBC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAErB,MAAM,WAAW,GAAG;;QAEhB,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE;QAC3F,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QAC/F,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QACvF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QAC/F,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,wBAAwB,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE;KAClH,CAAC;QAEF,OAAO,CACL,EAAC,GAAG,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,WAAW;YAChE,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\nimport { setColor } from '../../utils/utils';\n\n@Component({\n  tag: 'pds-text',\n  styleUrl: 'pds-text.scss',\n  shadow: true,\n})\nexport class PdsText {\n  @Element() el: HTMLPdsTextElement;\n  /**\n   * Sets the text alignment.\n   */\n  @Prop() align?: 'start' | 'center' | 'end' | 'justify';\n\n  /**\n   * Sets the text color.\n   */\n  @Prop() color?: string;\n\n  /**\n   * Sets the text decoration.\n   */\n  @Prop() decoration?:\n  | 'strikethrough'\n  | 'underline-dotted';\n\n  /**\n   * Set the bottom margin for the text.\n   */\n  @Prop() gutter?:\n  | '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs';\n\n  /**\n   * If set or `true`, the text will be italic.\n   */\n  @Prop() italic?: boolean;\n\n  /**\n   * Sets the font size.\n   */\n  @Prop() size?:\n  | '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6';\n\n  /**\n   * Sets the font weight.\n   */\n  @Prop() weight?:\n  | 'extra-light'\n  | 'light'\n  | 'regular'\n  | 'medium'\n  | 'semibold'\n  | 'bold';\n\n  /**\n   * Determines what semantic text tag to render.\n   */\n  @Prop() tag:\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'p'\n  | 'code'\n  | 'pre'\n  | 'strong'\n  | 'em' = \"p\";\n\n  /**\n   * If set or `true`, the text will be truncated. Must add a `width` to the element.\n   */\n  @Prop() truncate?: boolean;\n\n  render() {\n    const Tag = this.tag;\n\n    const typeClasses = `\n      pds-text\n      ${this.align !== undefined && this.align.trim() !== '' ? `pds-text--align-${this.align}` : ''}\n      ${this.gutter !== undefined && this.gutter.trim() !== '' ? `pds-text--gutter-${this.gutter}` : ''}\n      ${this.size !== undefined && this.size.trim() !== '' ? `pds-text--size-${this.size}` : ''}\n      ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}\n      ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}\n    `;\n\n    return (\n      <Tag style={this.color && setColor(this.color)} class={typeClasses}>\n        <slot />\n      </Tag>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-text.js","sourceRoot":"","sources":["../../../src/components/pds-text/pds-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAO7C,MAAM,OAAO,OAAO;IALpB;QAsEE;;WAEG;QACK,QAAG,GAWF,GAAG,CAAC;KAyBd;IAlBC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAErB,MAAM,WAAW,GAAG;;QAEhB,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE;QAC3F,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QAC/F,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QACvF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QAC/F,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,wBAAwB,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE;KAClH,CAAC;QAEF,OAAO,CACL,EAAC,GAAG,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,WAAW;YAChE,8DAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\nimport { setColor } from '../../utils/utils';\n\n@Component({\n  tag: 'pds-text',\n  styleUrl: 'pds-text.scss',\n  shadow: true,\n})\nexport class PdsText {\n  @Element() el: HTMLPdsTextElement;\n  /**\n   * Sets the text alignment.\n   */\n  @Prop() align?: 'start' | 'center' | 'end' | 'justify';\n\n  /**\n   * Sets the text color.\n   */\n  @Prop() color?: string;\n\n  /**\n   * Sets the text decoration.\n   */\n  @Prop() decoration?:\n  | 'strikethrough'\n  | 'underline-dotted';\n\n  /**\n   * Set the bottom margin for the text.\n   */\n  @Prop() gutter?:\n  | '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs';\n\n  /**\n   * If set or `true`, the text will be italic.\n   */\n  @Prop() italic?: boolean;\n\n  /**\n   * Sets the font size.\n   */\n  @Prop() size?:\n  | '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6';\n\n  /**\n   * Sets the font weight.\n   */\n  @Prop() weight?:\n  | 'extra-light'\n  | 'light'\n  | 'regular'\n  | 'medium'\n  | 'semibold'\n  | 'bold';\n\n  /**\n   * Determines what semantic text tag to render.\n   */\n  @Prop() tag:\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'p'\n  | 'code'\n  | 'pre'\n  | 'strong'\n  | 'em' = \"p\";\n\n  /**\n   * If set or `true`, the text will be truncated. Must add a `width` to the element.\n   */\n  @Prop({ reflect: true }) truncate?: boolean;\n\n  render() {\n    const Tag = this.tag;\n\n    const typeClasses = `\n      pds-text\n      ${this.align !== undefined && this.align.trim() !== '' ? `pds-text--align-${this.align}` : ''}\n      ${this.gutter !== undefined && this.gutter.trim() !== '' ? `pds-text--gutter-${this.gutter}` : ''}\n      ${this.size !== undefined && this.size.trim() !== '' ? `pds-text--size-${this.size}` : ''}\n      ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}\n      ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}\n    `;\n\n    return (\n      <Tag style={this.color && setColor(this.color)} class={typeClasses}>\n        <slot />\n      </Tag>\n    );\n  }\n}\n"]}

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

@@ -121,10 +121,10 @@ export class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: '6c5edcf968b607f1fccc9992d1c4974e5be38e94', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: 'f8d9eb6ec8ce7ed1a44c7802972a9bcb31d734a4', class: "pds-textarea" }, this.label &&
-            h("label", { key: 'a7d3c200c40f61773b1139efe7ef86333975753e', htmlFor: this.componentId }, this.label), h("textarea", Object.assign({ key: '178f1393bce68322ce0597dd072bc5a60062f855', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, 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 }, this.inheritedAttributes), value), this.helperMessage &&
-            h("p", { key: 'a9d026ad670ae391a87d1ba6d183241ca2e52456', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: '0b794b20c024f40ee850183a797a8c3bcc0b600c', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '889e8d84f53be8f963fd250f60fb54b35f46c7b5', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: 'ebbf2c30176e11c92f04de02cad236496bc50a44', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: '687811120416068af1b6d23a5fa8af149674669b', class: "pds-textarea" }, this.label &&
+            h("label", { key: '40fa708e95ff63881f3d41646bf99841625631d6', htmlFor: this.componentId }, this.label), h("textarea", Object.assign({ key: '543b7d6996b441b32f124f13025787c76340218d', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, 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 }, this.inheritedAttributes), value), this.helperMessage &&
+            h("p", { key: '47cd46e8c8c5daaa3ff6fa830e5dde3624403575', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: 'd84d1aece21db4ef596c154919fe689d66f4bd66', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'cb4627c36e25e14f6699ad0cfddd4bf8528755e0', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }