@pine-ds/core 3.1.0 → 3.2.0

package/components/pds-popover.js.map

@@ -1 +1 @@
-{"file":"pds-popover.js","mappings":"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","names":["PdsPopover","__stencil_proxyCustomElement"],"sources":["src/components/pds-popover/pds-popover.scss?tag=pds-popover&encapsulation=shadow","src/components/pds-popover/pds-popover.tsx"],"sourcesContent":[":host {\n  --sizing-max-width-default: 352px;\n\n  display: inline-block;\n\n  [popover] {\n    background-color: var(--pine-color-background-container);\n    border: var(--pine-border);\n    border-radius: var(--pine-dimension-125);\n    box-shadow: var(--pine-box-shadow-200);\n    margin: var(--pine-dimension-none);\n    max-width: var(--sizing-max-width-default);\n    padding: var(--pine-dimension-md);\n    position: fixed;\n  }\n\n  button {\n    align-items: center;\n    background-color: var(--pine-color-secondary);\n    border: var(--pine-border);\n    border-radius: var(--pine-border-radius-full);\n    color: var(--pine-color-text-secondary);\n    display: flex;\n    font: var(--pine-typography-body-medium);\n    font-family: var(--pine-font-family-heading);\n    letter-spacing: var(--pine-letter-spacing);\n    min-height: 40px;\n    padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n    &:focus-visible {\n      outline: var(--pine-outline-focus);\n      outline-offset: var(--pine-border-width);\n    }\n\n    &:hover {\n      background-color: var(--pine-color-secondary-hover);\n    }\n  }\n}\n","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","mappings":"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","names":["PdsPopover","__stencil_proxyCustomElement"],"sources":["src/components/pds-popover/pds-popover.scss?tag=pds-popover&encapsulation=shadow","src/components/pds-popover/pds-popover.tsx"],"sourcesContent":[":host {\n  --sizing-max-width-default: 352px;\n\n  display: inline-block;\n\n  [popover] {\n    background-color: var(--pine-color-background-container);\n    border: var(--pine-border);\n    border-radius: var(--pine-dimension-125);\n    box-shadow: var(--pine-box-shadow-200);\n    margin: var(--pine-dimension-none);\n    max-width: var(--sizing-max-width-default);\n    padding: var(--pine-dimension-md);\n    position: fixed;\n  }\n\n  button {\n    align-items: center;\n    background-color: var(--pine-color-secondary);\n    border: var(--pine-border);\n    border-radius: var(--pine-border-radius-full);\n    color: var(--pine-color-text-secondary);\n    display: flex;\n    font: var(--pine-typography-body-medium);\n    font-family: var(--pine-font-family-heading);\n    letter-spacing: var(--pine-letter-spacing);\n    min-height: 40px;\n    padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n    &:focus-visible {\n      outline: var(--pine-outline-focus);\n      outline-offset: var(--pine-border-width);\n    }\n\n    &:hover {\n      background-color: var(--pine-color-secondary-hover);\n    }\n  }\n}\n","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"],"version":3}

package/components/pds-progress.js

@@ -24,7 +24,7 @@ const PdsProgress$1 = /*@__PURE__*/ proxyCustomElement(class PdsProgress extends
         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: '71ce602dccee62ee76ef51c3994af86829399452', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: 'c26188786bcfd4d6f039050032cd48982327355e', class: "pds-progress" }, h("label", { key: 'e18f75dae8fcf3fde684156638cc47f9d5e253dd', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '37a5bb5609e25912c006a89dd0bbc244cfa5896b', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '68e859cafbcf74c74fc3b72a5347fb03eda83556', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get style() { return pdsProgressCss; }
 }, [1, "pds-progress", {

package/components/pds-radio.js

@@ -52,9 +52,9 @@ const PdsRadio$1 = /*@__PURE__*/ proxyCustomElement(class PdsRadio extends HTMLE
         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: 'a31d9cd94150a104a83595043dc003fa5d9779a2', class: this.classNames() }, h("label", { key: '1d71e515a00c25bbaac7d0420f4a4ee6a5189836', htmlFor: this.componentId }, h("input", { key: '800b2bbf703e68fbf60f62d6c28228759d976436', "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: '33c241168498b07a25dfc5ac6f9244eb3ce93547', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: 'f159de72b68a0f1bf07abb52d50a0d6d89b4f766', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'fb5877c78e519db27964308c1607ab58fc2fcb08', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '1385571ed511a800778d64edf48e2853a1c4793e', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get style() { return labelCss + pdsRadioCss; }
 }, [2, "pds-radio", {

package/components/pds-row.js

@@ -38,7 +38,7 @@ const PdsRow$1 = /*@__PURE__*/ proxyCustomElement(class PdsRow extends HTMLEleme
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return h(Host, { key: 'e898a1a24bbb1177b024d2c87d9388b136c8bde9', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return h(Host, { key: '2e962d6f8edd5023b3d8d7c8192e4f4ea2b2d2be', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get style() { return pdsRowCss; }
 }, [0, "pds-row", {

package/components/pds-select.js

@@ -125,8 +125,8 @@ const PdsSelect$1 = /*@__PURE__*/ proxyCustomElement(class PdsSelect extends HTM
         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: '2d39b1eac389e27eea511728ef668d4d548d0c09', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames() }, h("div", { key: 'c0c4e64a19b7b11e0d64d94cbc529be7e455b12a', class: "pds-select" }, this.label &&
+            h("label", { key: '9eadfcc4e6fd6d42f718eb0ad1542f7c03b67052', htmlFor: this.componentId }, this.label), h("select", { key: 'eb1d368ed4f765dead79f6101265e922bd06ca94', 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: '1dcbfe5d51e55af333e80bb99995cef1693f36c1', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '4d0c76c632e9588dc178c859be5ef1fd474fa191', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '954d31034ed522ba128c9048998e92553592d12f', class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

package/components/pds-sortable-item.js

@@ -28,7 +28,7 @@ const PdsSortableItem$1 = /*@__PURE__*/ proxyCustomElement(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: handle }))), 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: 'b54ef05cc6a8f2dd3c6f7f971b32bd4566738600', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'fa402ec9c8ad9a75a73a23c28d2a5101bcf3d170', class: "pds-sortable-item__handle" }, h("pds-icon", { key: 'def73620ade698eccc0fb8abb4dfeb5b7de46c95', icon: handle }))), h("slot", { key: 'd9dfcc135b7bd8bf893360798baa30297d4fb4ea' }), this.enableActions && (h("div", { key: 'd0852370b35b213238739cea2aa1c3dcd91cbd9d', class: "pds-sortable-item__actions" }, h("slot", { key: 'cbf966a4c56be43ced57e200b91d64e68f5077d9', name: "sortable-item-actions" })))));
     }
     get el() { return this; }
     static get style() { return pdsSortableItemCss; }

package/components/pds-sortable.js

@@ -2712,7 +2712,7 @@ const PdsSortable$1 = /*@__PURE__*/ proxyCustomElement(class PdsSortable extends
         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: 'cbbd28ad002093f627befee44c5ae911f86b0221', class: this.classNames(), id: this.componentId }, h("slot", { key: 'f4ef09a82d8e47b471a2463912fd37ac3b9b383f' })));
     }
     get el() { return this; }
     static get style() { return pdsSortableCss; }

package/components/pds-switch.js

@@ -53,9 +53,9 @@ const PdsSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PdsSwitch extends HTM
         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: '04755f80f89f4eff8d44f8c8e76e6020f6be65fb', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: 'cdf1c4d58c640954ada9d50b4832fa26094b3476', htmlFor: this.componentId }, h("input", Object.assign({ key: 'f141885523b649f8dca4e9fe11494ebf640510bc', "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: 'f80b28bd0904dfae3a4e7b46bfecc46c82843764', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: '7b60b9c273f4773f9d0e90fd8132dc979c088183', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '9d068c8da41e985ff63851a909f985a80bdabf89', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '14a69e6ce04e3434f440f19d6ea0e9b347a9b352', icon: danger, size: "small" }), this.errorMessage)));
     }
     get el() { return this; }
     static get style() { return labelCss + pdsSwitchCss; }

package/components/pds-tab.js

@@ -17,9 +17,9 @@ const PdsTab$1 = /*@__PURE__*/ proxyCustomElement(class PdsTab extends HTMLEleme
         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: '5256039455be2b9e0dbfd18caf5a7a4f6ca2f047', class: "pds-tab-edge", role: "presentation" }));
+        const availabilityTabEdgeInlineEnd = (h("span", { key: 'c65bc9ccb5a43ee1c1f634fa19c4ac6d66259747', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
+        return (h(Host, { key: '0f379e0d4cce1590dc917196dd520b26bb5e89d9', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '70b033b21ff9093b2393565c026ff4954d74dbf3', 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: 'b01547140256199ec4e829a83e11ea27d059e0ea', class: "pds-tab__content" }, h("slot", { key: '7dce311009731af53a4b6fff4af6e90f91a060a7' })))));
     }
     get el() { return this; }
     static get style() { return pdsTabCss; }

package/components/pds-table-body.js

@@ -9,7 +9,7 @@ const PdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class PdsTableBody exten
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'c01028ed3108a0404ef3da77f1cf7a3b97a40b52', role: "rowgroup" }, h("slot", { key: 'f8491f02e732d28b01bc9cf2436c6edca3cbfc0e' })));
+        return (h(Host, { key: 'ec68d794fd59876a83f40077d29e97af4366f19a', role: "rowgroup" }, h("slot", { key: '9d052cdf3c0ea8afa86a6900d492c9de5c9adaf1' })));
     }
     static get style() { return pdsTableBodyCss; }
 }, [1, "pds-table-body"]);

package/components/pds-table-cell2.js

@@ -43,11 +43,11 @@ const PdsTableCell = /*@__PURE__*/ proxyCustomElement(class PdsTableCell extends
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '4d7c288150875806711b91436c2673fb3cb55ee6', class: this.classNames(), role: "gridcell", style: this.tableRef &&
+        return (h(Host, { key: 'f86b2ae5eaee0f3bcb1cd55951a0e83bce4ccfca', 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: '347d6487bc869bf9903c5e1fb8b05ca29d6e6d50' })));
     }
     get hostElement() { return this; }
     static get style() { return pdsTableCellCss; }

package/components/pds-table-head-cell2.js

@@ -69,11 +69,11 @@ const PdsTableHeadCell = /*@__PURE__*/ proxyCustomElement(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: '9f9138f88914add530416fbf776d5a68685a3fab', 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: '84d3c20fc656b468d6c46cc9f5a8c49071af7d04' }), this.sortable && (h("pds-icon", { key: '4ad357565f9542604c16ade571bc5e55b4fa1077', icon: this.sortingDirection === 'asc' ? upSmall : downSmall }))));
     }
     get hostElement() { return this; }
     static get style() { return pdsTableHeadCellCss; }

package/components/pds-table-head.js

@@ -42,7 +42,7 @@ const PdsTableHead$1 = /*@__PURE__*/ proxyCustomElement(class PdsTableHead exten
         }
     }
     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: 'f74bfa35afc2f26957ffff431c5438fbb159e15b', role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '13bcfb69c1e8ab696ba702d39209944fa97f34ea', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, h("pds-checkbox", { key: '898170f579ad89627621bb693908b1b04ca25f83', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected }))), h("slot", { key: 'd7dc459310c32ee112e05df947b8c9da57180035' })));
     }
     get hostElement() { return this; }
     static get style() { return pdsTableHeadCss; }

package/components/pds-table-row.js

@@ -53,7 +53,7 @@ const PdsTableRow$1 = /*@__PURE__*/ proxyCustomElement(class PdsTableRow extends
         }
     }
     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: 'd3ebaeea3a8007634ea821da5a458189a36837a7', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '62705fadc9cdb18de2eebd4c608c0dffa119cfba', part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '19e01d4eef0657f7e34a5a9061e568a18eb9b7c6', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected }))), h("slot", { key: '59b3c28a61f36f9ea6e891876bf007590a7cce51' })));
     }
     get hostElement() { return this; }
     static get style() { return pdsTableRowCss; }

package/components/pds-table.js

@@ -91,7 +91,7 @@ const PdsTable$1 = /*@__PURE__*/ proxyCustomElement(class PdsTable extends HTMLE
         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: 'b874cdb2b0f0dcc313befdd557d5ce4203a183ac', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("slot", { key: '52bcce99761712662828ba5a708155410de6e15d' })));
     }
     get el() { return this; }
     static get style() { return pdsTableCss; }

package/components/pds-tabpanel.js

@@ -13,7 +13,7 @@ const PdsTabpanel$1 = /*@__PURE__*/ proxyCustomElement(class PdsTabpanel extends
         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: 'fe7548d8da3149d13d23b41d6860beb1f351b3c6', slot: "tabpanels" }, h("div", { key: 'bf50bfc20be721ba467ff22ba24f0410153223f5', 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: '3de1657e963e7e9fca81fac07f78edc064cd86e7' }))));
     }
     get el() { return this; }
     static get style() { return pdsTabpanelCss; }

package/components/pds-tabs.js

@@ -80,7 +80,7 @@ const PdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class PdsTabs extends HTMLEle
         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: '571b33280e4473d1a8bef6e90103c4d42a29ed03', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: 'c50a6cd3b8a06e13ff14626258769b7918f57ed0', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: '1fcbefc41181ce48f2a109ee0703d03f9975784f', name: "tabs" })), h("slot", { key: '9762d5533cbbea5672f2a4235b90b3a766066179', name: "tabpanels" })));
     }
     get el() { return this; }
     static get style() { return pdsTabsCss; }

package/components/pds-text.js

@@ -1,56 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { s as setColor } from './utils.js';
-
-const pdsTextCss = ":host{display:inline}:host([decoration=underline-dotted])>*{-webkit-text-decoration-color:var(--pine-color-grey-600);text-decoration-color:var(--pine-color-grey-600);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-decoration-thickness:12%;text-underline-offset:0.3rem;text-underline-position:under}:host([decoration=strikethrough])>*{text-decoration:line-through}h1{font:var(--pine-typography-heading-1);letter-spacing:var(--pine-letter-spacing-heading-1)}h2{font:var(--pine-typography-heading-2);letter-spacing:var(--pine-letter-spacing-heading-2)}h3{font:var(--pine-typography-heading-3);letter-spacing:var(--pine-letter-spacing-heading-3)}h4{font:var(--pine-typography-heading-4);letter-spacing:var(--pine-letter-spacing-heading-4)}h5{font:var(--pine-typography-heading-5);letter-spacing:var(--pine-letter-spacing-heading-5)}h6{font:var(--pine-typography-heading-6);letter-spacing:var(--pine-letter-spacing-heading-6)}code,em,p,pre,strong{font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing)}code,pre{font-family:monospace;letter-spacing:0;line-height:1}em{font-style:normal}strong{font-weight:bolder}:host([truncate])>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([italic])>*{font-style:italic}.pds-text{color:var(--color, var(--pine-color-text));margin:var(--pine-dimension-none)}.pds-text--size-2xl{font-size:var(--pine-font-size-body-2xl)}.pds-text--size-xl{font-size:var(--pine-font-size-body-xl)}.pds-text--size-lg{font-size:var(--pine-font-size-body-lg)}.pds-text--size-md{font-size:var(--pine-font-size-body-md)}.pds-text--size-sm{font-size:var(--pine-font-size-body-sm)}.pds-text--size-xs{font-size:var(--pine-font-size-body-xs)}.pds-text--size-2xs{font-size:var(--pine-font-size-body-2xs)}.pds-text--size-h1{font-size:var(--pine-font-size-heading-1)}.pds-text--size-h2{font-size:var(--pine-font-size-heading-2)}.pds-text--size-h3{font-size:var(--pine-font-size-heading-3)}.pds-text--size-h4{font-size:var(--pine-font-size-heading-4)}.pds-text--size-h5{font-size:var(--pine-font-size-heading-5)}.pds-text--size-h6{font-size:var(--pine-font-size-heading-6)}.pds-text--weight-extra-light{font-weight:var(--pine-font-weight-extra-light)}.pds-text--weight-light{font-weight:var(--pine-font-weight-light)}.pds-text--weight-regular{font-weight:var(--pine-font-weight-regular)}.pds-text--weight-medium{font-weight:var(--pine-font-weight-medium)}.pds-text--weight-semibold{font-weight:var(--pine-font-weight-semi-bold)}.pds-text--weight-bold{font-weight:var(--pine-font-weight-bold)}.pds-text--gutter-2xl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}.pds-text--gutter-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-text--gutter-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-text--gutter-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-text--gutter-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-text--gutter-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-text--gutter-2xs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-text--align-start{text-align:start}.pds-text--align-center{text-align:center}.pds-text--align-end{text-align:end}.pds-text--align-justify{text-align:justify}";
-
-const PdsText$1 = /*@__PURE__*/ proxyCustomElement(class PdsText extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * Determines what semantic text tag to render.
-         */
-        this.tag = "p";
-    }
-    render() {
-        const Tag = this.tag;
-        const typeClasses = `
-      pds-text
-      ${this.align !== undefined && this.align.trim() !== '' ? `pds-text--align-${this.align}` : ''}
-      ${this.gutter !== undefined && this.gutter.trim() !== '' ? `pds-text--gutter-${this.gutter}` : ''}
-      ${this.size !== undefined && this.size.trim() !== '' ? `pds-text--size-${this.size}` : ''}
-      ${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' })));
-    }
-    get el() { return this; }
-    static get style() { return pdsTextCss; }
-}, [1, "pds-text", {
-        "align": [1],
-        "color": [1],
-        "decoration": [1],
-        "gutter": [1],
-        "italic": [4],
-        "size": [1],
-        "weight": [1],
-        "tag": [1],
-        "truncate": [4]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-text":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsText$1);
-            }
-            break;
-    } });
-}
+import { P as PdsText$1, d as defineCustomElement$1 } from './pds-text2.js';
 
 const PdsText = PdsText$1;
 const defineCustomElement = defineCustomElement$1;

package/components/pds-text.js.map

@@ -1 +1 @@
-{"file":"pds-text.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,m+GAAm+G;;MCQz+GA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;AALpB,IAAA,WAAA,GAAA;;;;AAsEE;;AAEG;AACK,QAAA,IAAG,CAAA,GAAA,GAWF,GAAG;AAyBb;IAlBC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG;AAEpB,QAAA,MAAM,WAAW,GAAG;;QAEhB,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,gBAAA,EAAmB,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,EAAE;QAC3F,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,iBAAA,EAAoB,IAAI,CAAC,MAAM,CAAE,CAAA,GAAG,EAAE;QAC/F,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,eAAA,EAAkB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,EAAE;QACvF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,iBAAA,EAAoB,IAAI,CAAC,MAAM,CAAE,CAAA,GAAG,EAAE;QAC/F,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,qBAAA,EAAwB,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,EAAE;KAClH;AAED,QAAA,QACE,CAAC,CAAA,GAAG,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,WAAW,EAAA,EAChE,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsText","__stencil_proxyCustomElement"],"sources":["src/components/pds-text/pds-text.scss?tag=pds-text&encapsulation=shadow","src/components/pds-text/pds-text.tsx"],"sourcesContent":[":host {\n  display: inline;\n}\n\n:host([decoration=\"underline-dotted\"]) > * {\n  text-decoration-color: var(--pine-color-grey-600);\n  text-decoration-line: underline;\n  text-decoration-style: dotted;\n  text-decoration-thickness: 12%;\n  text-underline-offset: 0.3rem;\n  text-underline-position: under;\n}\n\n:host([decoration=\"strikethrough\"])>* {\n  text-decoration: line-through;\n}\n\n/* stylelint-disable */\nh1 {\n  font: var(--pine-typography-heading-1);\n  letter-spacing: var(--pine-letter-spacing-heading-1);\n}\n\nh2 {\n  font: var(--pine-typography-heading-2);\n  letter-spacing: var(--pine-letter-spacing-heading-2);\n}\n\nh3 {\n  font: var(--pine-typography-heading-3);\n  letter-spacing: var(--pine-letter-spacing-heading-3);\n}\n\nh4 {\n  font: var(--pine-typography-heading-4);\n  letter-spacing: var(--pine-letter-spacing-heading-4);\n}\n\nh5 {\n  font: var(--pine-typography-heading-5);\n  letter-spacing: var(--pine-letter-spacing-heading-5);\n}\n\nh6 {\n  font: var(--pine-typography-heading-6);\n  letter-spacing: var(--pine-letter-spacing-heading-6);\n}\n\ncode, em, p, pre, strong {\n  font: var(--pine-typography-body);\n  letter-spacing: var(--pine-letter-spacing);\n}\n/* stylelint-enable */\n\ncode, pre {\n  font-family: monospace;\n  letter-spacing: 0;\n  line-height: 1;\n}\n\nem {\n  font-style: normal;\n}\n\nstrong {\n  font-weight: bolder;\n}\n\n:host([truncate]) > * {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host([italic]) > * {\n  font-style: italic;\n}\n\n// Colors/Variants/Sentiment\n\n// Variable is set in TSX\n// If color prop value isn't valid, will default to body text color\n.pds-text {\n  color: var(--color, var(--pine-color-text));\n  margin: var(--pine-dimension-none);\n}\n\n// Font Sizes\n$type-sizes: (\n  2xl: var(--pine-font-size-body-2xl),\n  xl: var(--pine-font-size-body-xl),\n  lg: var(--pine-font-size-body-lg),\n  md: var(--pine-font-size-body-md),\n  sm: var(--pine-font-size-body-sm),\n  xs: var(--pine-font-size-body-xs),\n  2xs: var(--pine-font-size-body-2xs),\n  h1: var(--pine-font-size-heading-1),\n  h2: var(--pine-font-size-heading-2),\n  h3: var(--pine-font-size-heading-3),\n  h4: var(--pine-font-size-heading-4),\n  h5: var(--pine-font-size-heading-5),\n  h6: var(--pine-font-size-heading-6),\n);\n\n@mixin generate-type-sizes($type-sizes) {\n  @each $key, $value in $type-sizes {\n    .pds-text--size-#{$key} {\n      font-size: $value;\n    }\n  }\n}\n\n@include generate-type-sizes($type-sizes);\n\n// Font Weights\n$type-weights: (\n  extra-light: var(--pine-font-weight-extra-light),\n  light: var(--pine-font-weight-light),\n  regular: var(--pine-font-weight-regular),\n  medium: var(--pine-font-weight-medium),\n  semibold: var(--pine-font-weight-semi-bold),\n  bold: var(--pine-font-weight-bold),\n);\n\n@mixin generate-type-weights($type-weights) {\n  @each $key, $value in $type-weights {\n    .pds-text--weight-#{$key} {\n      font-weight: $value;\n    }\n  }\n}\n\n@include generate-type-weights($type-weights);\n\n// Gutter Sizes\n$type-gutters: (\n  2xl: var(--pine-dimension-2xl),\n  xl: var(--pine-dimension-xl),\n  lg: var(--pine-dimension-lg),\n  md: var(--pine-dimension-md),\n  sm: var(--pine-dimension-sm),\n  xs: var(--pine-dimension-xs),\n  2xs: var(--pine-dimension-2xs),\n);\n\n@mixin generate-type-gutters($type-gutters) {\n  @each $key, $value in $type-gutters {\n    .pds-text--gutter-#{$key} {\n      margin-block-end: $value;\n    }\n  }\n}\n\n@include generate-type-gutters($type-gutters);\n\n// Text Alignment\n$type-alignments: (\n  start: start,\n  center: center,\n  end: end,\n  justify: justify,\n);\n\n@mixin generate-type-alignments($type-alignments) {\n  @each $key, $value in $type-alignments {\n    .pds-text--align-#{$key} {\n      text-align: $value;\n    }\n  }\n}\n\n@include generate-type-alignments($type-alignments);\n","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","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/pds-text2.js

@@ -0,0 +1,58 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { s as setColor } from './utils.js';
+
+const pdsTextCss = ":host{display:inline}:host([decoration=underline-dotted])>*{-webkit-text-decoration-color:var(--pine-color-grey-600);text-decoration-color:var(--pine-color-grey-600);-webkit-text-decoration-line:underline;text-decoration-line:underline;-webkit-text-decoration-style:dotted;text-decoration-style:dotted;text-decoration-thickness:12%;text-underline-offset:0.3rem;text-underline-position:under}:host([decoration=strikethrough])>*{text-decoration:line-through}h1{font:var(--pine-typography-heading-1);letter-spacing:var(--pine-letter-spacing-heading-1)}h2{font:var(--pine-typography-heading-2);letter-spacing:var(--pine-letter-spacing-heading-2)}h3{font:var(--pine-typography-heading-3);letter-spacing:var(--pine-letter-spacing-heading-3)}h4{font:var(--pine-typography-heading-4);letter-spacing:var(--pine-letter-spacing-heading-4)}h5{font:var(--pine-typography-heading-5);letter-spacing:var(--pine-letter-spacing-heading-5)}h6{font:var(--pine-typography-heading-6);letter-spacing:var(--pine-letter-spacing-heading-6)}code,em,p,pre,strong{font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing)}code,pre{font-family:monospace;letter-spacing:0;line-height:1}em{font-style:normal}strong{font-weight:bolder}:host([truncate])>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([italic])>*{font-style:italic}.pds-text{color:var(--color, var(--pine-color-text));margin:var(--pine-dimension-none)}.pds-text--size-2xl{font-size:var(--pine-font-size-body-2xl)}.pds-text--size-xl{font-size:var(--pine-font-size-body-xl)}.pds-text--size-lg{font-size:var(--pine-font-size-body-lg)}.pds-text--size-md{font-size:var(--pine-font-size-body-md)}.pds-text--size-sm{font-size:var(--pine-font-size-body-sm)}.pds-text--size-xs{font-size:var(--pine-font-size-body-xs)}.pds-text--size-2xs{font-size:var(--pine-font-size-body-2xs)}.pds-text--size-h1{font-size:var(--pine-font-size-heading-1)}.pds-text--size-h2{font-size:var(--pine-font-size-heading-2)}.pds-text--size-h3{font-size:var(--pine-font-size-heading-3)}.pds-text--size-h4{font-size:var(--pine-font-size-heading-4)}.pds-text--size-h5{font-size:var(--pine-font-size-heading-5)}.pds-text--size-h6{font-size:var(--pine-font-size-heading-6)}.pds-text--weight-extra-light{font-weight:var(--pine-font-weight-extra-light)}.pds-text--weight-light{font-weight:var(--pine-font-weight-light)}.pds-text--weight-regular{font-weight:var(--pine-font-weight-regular)}.pds-text--weight-medium{font-weight:var(--pine-font-weight-medium)}.pds-text--weight-semibold{font-weight:var(--pine-font-weight-semi-bold)}.pds-text--weight-bold{font-weight:var(--pine-font-weight-bold)}.pds-text--gutter-2xl{-webkit-margin-after:var(--pine-dimension-2xl);margin-block-end:var(--pine-dimension-2xl)}.pds-text--gutter-xl{-webkit-margin-after:var(--pine-dimension-xl);margin-block-end:var(--pine-dimension-xl)}.pds-text--gutter-lg{-webkit-margin-after:var(--pine-dimension-lg);margin-block-end:var(--pine-dimension-lg)}.pds-text--gutter-md{-webkit-margin-after:var(--pine-dimension-md);margin-block-end:var(--pine-dimension-md)}.pds-text--gutter-sm{-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-text--gutter-xs{-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-text--gutter-2xs{-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-text--align-start{text-align:start}.pds-text--align-center{text-align:center}.pds-text--align-end{text-align:end}.pds-text--align-justify{text-align:justify}";
+
+const PdsText = /*@__PURE__*/ proxyCustomElement(class PdsText extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Determines what semantic text tag to render.
+         */
+        this.tag = "p";
+    }
+    render() {
+        const Tag = this.tag;
+        const typeClasses = `
+      pds-text
+      ${this.align !== undefined && this.align.trim() !== '' ? `pds-text--align-${this.align}` : ''}
+      ${this.gutter !== undefined && this.gutter.trim() !== '' ? `pds-text--gutter-${this.gutter}` : ''}
+      ${this.size !== undefined && this.size.trim() !== '' ? `pds-text--size-${this.size}` : ''}
+      ${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: 'dbb51692cc782fcef771390934ca6efc7a2728b9', style: this.color && setColor(this.color), class: typeClasses }, h("slot", { key: '9e7351a9de468132a213f3e26c20c8ca894881a8' })));
+    }
+    get el() { return this; }
+    static get style() { return pdsTextCss; }
+}, [1, "pds-text", {
+        "align": [1],
+        "color": [1],
+        "decoration": [1],
+        "gutter": [1],
+        "italic": [4],
+        "size": [1],
+        "weight": [1],
+        "tag": [1],
+        "truncate": [516]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pds-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pds-text":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PdsText);
+            }
+            break;
+    } });
+}
+
+export { PdsText as P, defineCustomElement as d };
+//# sourceMappingURL=pds-text2.js.map
+
+//# sourceMappingURL=pds-text2.js.map

package/components/pds-text2.js.map

@@ -0,0 +1 @@
+{"file":"pds-text2.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,m+GAAm+G;;MCQz+G,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;AALpB,IAAA,WAAA,GAAA;;;;AAsEE;;AAEG;AACK,QAAA,IAAG,CAAA,GAAA,GAWF,GAAG;AAyBb;IAlBC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG;AAEpB,QAAA,MAAM,WAAW,GAAG;;QAEhB,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,gBAAA,EAAmB,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,EAAE;QAC3F,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,iBAAA,EAAoB,IAAI,CAAC,MAAM,CAAE,CAAA,GAAG,EAAE;QAC/F,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,eAAA,EAAkB,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,EAAE;QACvF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,iBAAA,EAAoB,IAAI,CAAC,MAAM,CAAE,CAAA,GAAG,EAAE;QAC/F,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAA,qBAAA,EAAwB,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG,EAAE;KAClH;AAED,QAAA,QACE,CAAC,CAAA,GAAG,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,WAAW,EAAA,EAChE,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/pds-text/pds-text.scss?tag=pds-text&encapsulation=shadow","src/components/pds-text/pds-text.tsx"],"sourcesContent":[":host {\n  display: inline;\n}\n\n:host([decoration=\"underline-dotted\"]) > * {\n  text-decoration-color: var(--pine-color-grey-600);\n  text-decoration-line: underline;\n  text-decoration-style: dotted;\n  text-decoration-thickness: 12%;\n  text-underline-offset: 0.3rem;\n  text-underline-position: under;\n}\n\n:host([decoration=\"strikethrough\"])>* {\n  text-decoration: line-through;\n}\n\n/* stylelint-disable */\nh1 {\n  font: var(--pine-typography-heading-1);\n  letter-spacing: var(--pine-letter-spacing-heading-1);\n}\n\nh2 {\n  font: var(--pine-typography-heading-2);\n  letter-spacing: var(--pine-letter-spacing-heading-2);\n}\n\nh3 {\n  font: var(--pine-typography-heading-3);\n  letter-spacing: var(--pine-letter-spacing-heading-3);\n}\n\nh4 {\n  font: var(--pine-typography-heading-4);\n  letter-spacing: var(--pine-letter-spacing-heading-4);\n}\n\nh5 {\n  font: var(--pine-typography-heading-5);\n  letter-spacing: var(--pine-letter-spacing-heading-5);\n}\n\nh6 {\n  font: var(--pine-typography-heading-6);\n  letter-spacing: var(--pine-letter-spacing-heading-6);\n}\n\ncode, em, p, pre, strong {\n  font: var(--pine-typography-body);\n  letter-spacing: var(--pine-letter-spacing);\n}\n/* stylelint-enable */\n\ncode, pre {\n  font-family: monospace;\n  letter-spacing: 0;\n  line-height: 1;\n}\n\nem {\n  font-style: normal;\n}\n\nstrong {\n  font-weight: bolder;\n}\n\n:host([truncate]) > * {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host([italic]) > * {\n  font-style: italic;\n}\n\n// Colors/Variants/Sentiment\n\n// Variable is set in TSX\n// If color prop value isn't valid, will default to body text color\n.pds-text {\n  color: var(--color, var(--pine-color-text));\n  margin: var(--pine-dimension-none);\n}\n\n// Font Sizes\n$type-sizes: (\n  2xl: var(--pine-font-size-body-2xl),\n  xl: var(--pine-font-size-body-xl),\n  lg: var(--pine-font-size-body-lg),\n  md: var(--pine-font-size-body-md),\n  sm: var(--pine-font-size-body-sm),\n  xs: var(--pine-font-size-body-xs),\n  2xs: var(--pine-font-size-body-2xs),\n  h1: var(--pine-font-size-heading-1),\n  h2: var(--pine-font-size-heading-2),\n  h3: var(--pine-font-size-heading-3),\n  h4: var(--pine-font-size-heading-4),\n  h5: var(--pine-font-size-heading-5),\n  h6: var(--pine-font-size-heading-6),\n);\n\n@mixin generate-type-sizes($type-sizes) {\n  @each $key, $value in $type-sizes {\n    .pds-text--size-#{$key} {\n      font-size: $value;\n    }\n  }\n}\n\n@include generate-type-sizes($type-sizes);\n\n// Font Weights\n$type-weights: (\n  extra-light: var(--pine-font-weight-extra-light),\n  light: var(--pine-font-weight-light),\n  regular: var(--pine-font-weight-regular),\n  medium: var(--pine-font-weight-medium),\n  semibold: var(--pine-font-weight-semi-bold),\n  bold: var(--pine-font-weight-bold),\n);\n\n@mixin generate-type-weights($type-weights) {\n  @each $key, $value in $type-weights {\n    .pds-text--weight-#{$key} {\n      font-weight: $value;\n    }\n  }\n}\n\n@include generate-type-weights($type-weights);\n\n// Gutter Sizes\n$type-gutters: (\n  2xl: var(--pine-dimension-2xl),\n  xl: var(--pine-dimension-xl),\n  lg: var(--pine-dimension-lg),\n  md: var(--pine-dimension-md),\n  sm: var(--pine-dimension-sm),\n  xs: var(--pine-dimension-xs),\n  2xs: var(--pine-dimension-2xs),\n);\n\n@mixin generate-type-gutters($type-gutters) {\n  @each $key, $value in $type-gutters {\n    .pds-text--gutter-#{$key} {\n      margin-block-end: $value;\n    }\n  }\n}\n\n@include generate-type-gutters($type-gutters);\n\n// Text Alignment\n$type-alignments: (\n  start: start,\n  center: center,\n  end: end,\n  justify: justify,\n);\n\n@mixin generate-type-alignments($type-alignments) {\n  @each $key, $value in $type-alignments {\n    .pds-text--align-#{$key} {\n      text-align: $value;\n    }\n  }\n}\n\n@include generate-type-alignments($type-alignments);\n","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"],"version":3}

package/components/pds-textarea.js

@@ -136,10 +136,10 @@ const PdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class PdsTextarea extends
     }
     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: 'a7db5e94c424af94616faae520aa8f39ee23cedd', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: '26c4a0b5e464e648f627c6de6d948a159e1b4603', class: "pds-textarea" }, this.label &&
+            h("label", { key: 'b32a15274079ba8fdb4d911dfc4915da9437a57a', htmlFor: this.componentId }, this.label), h("textarea", Object.assign({ key: '6348ed57813a044849a8de53a172f9f724d7b00e', 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: '0f9a7606295b5d020e4762f2dc66bc920a60f8da', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: 'badc7d45069955709993c594ed9792c7cdc8727b', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '460955036713315d8dd7b125a50b09d0cb1a282d', icon: danger, size: "small" }), this.errorMessage))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/pds-toast.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface PdsToast extends Components.PdsToast, HTMLElement {}
+export const PdsToast: {
+    prototype: PdsToast;
+    new (): PdsToast;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;