@pine-ds/core 2.16.4 → 2.17.0

package/components/pds-copytext.js.map

@@ -1 +1 @@
-{"file":"pds-copytext.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,6/EAA6/E,CAAC;AACrhF,0BAAe,cAAc;;MCQhBA,aAAW;;;;;;QAkCd,oBAAe,GAAG,OAAO,KAAa;YAC5C,IAAI;gBACF,IAAI,OAAO,SAAS,CAAC,SAAS,KAAK,WAAW,EAAE;oBAC9C,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;oBAC3C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;iBACnD;aACF;YAAC,OAAO,GAAG,EAAE;gBACZ,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,oCAAoC,GAAG,EAAE,CAAC,CAAC;aACvE;SACF,CAAC;QAEM,gBAAW,GAAG;YACpB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAClC,CAAC;sBA1CgC,IAAI;;yBAWlB,KAAK;wBAMN,KAAK;;;IA2BhB,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,cAAc,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,UAAU,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;SAC3C;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,UAAU,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;SAC7C;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;SAC5C;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW,IAClD,mEAAY,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACpE,+DAAO,IAAI,CAAC,KAAK,CAAQ,EACzB,iEAAU,IAAI,EAAEC,IAAQ,EAAE,IAAI,EAAC,MAAM,GAAY,CACtC,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsCopytext","copyIcon"],"sources":["src/components/pds-copytext/pds-copytext.scss?tag=pds-copytext&encapsulation=shadow","src/components/pds-copytext/pds-copytext.tsx"],"sourcesContent":[":host(.pds-copytext) {\n\n\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n\n  // Update custom prop usage in Button before changing\n  --copytext-color-background-hover: var(--pine-color-grey-200);\n\n\n  pds-button {\n    align-items: center;\n    background: var(--pine-color-secondary);\n    border-radius: var(--pine-border-radius-full);\n    border-width: var(--pine-dimension-none);\n    display: inline-flex;\n    font-family: var(--pine-font-family-heading);\n    font-size: var(--pine-font-size-body-md);\n    font-weight: var(--pine-font-weight-body-medium);\n    letter-spacing: var(--pine-letter-spacing);\n    line-height: var(--pine-line-height-body);\n    max-width: 100%;\n    padding: var(--pine-dimension-2xs) var(--pine-dimension-xs);\n\n    &::part(button) {\n      padding-inline-end: calc(var(--pine-dimension-xs) / 2);\n    }\n\n    &::part(button):hover {\n      // Update custom prop usage in Button before changing\n      background-color: var(--copytext-color-background-hover);\n      color: var(--pine-color-text-secondary-hover);\n    }\n\n    span {\n      font-weight: var(--pine-font-weight-medium);\n      margin-inline-end: var(--pine-dimension-xs);\n      white-space: nowrap;\n    }\n\n    :nth-child(2) {\n      flex-shrink: 0;\n    }\n  }\n\n  // bordered\n\n  &:host(.pds-copytext--bordered) {\n    border-width: var(--pine-dimension-none);\n    padding: var(--pine-dimension-none);\n\n    pds-button {\n      padding: var(--pine-dimension-none);\n\n      &:hover {\n        background: none;\n      }\n    }\n\n    span {\n      border: var(--pine-border);\n      border-radius: var(--pine-border-radius-full);\n      margin-inline-end: var(--pine-dimension-sm);\n      padding-block: var(--pine-dimension-xs);\n      padding-inline: var(--pine-dimension-sm);\n    }\n\n    :hover {\n      span {\n        border: var(--pine-border-hover);\n      }\n    }\n  }\n\n  // full width\n\n  &:host(.pds-copytext--full-width) {\n    display: flex;\n    width: 100%;\n\n    pds-button {\n      display: flex;\n      justify-content: space-between;\n      width: 100%;\n\n      span {\n        text-align: left;\n        width: 100%;\n      }\n    }\n  }\n\n  // truncated\n\n  &:host(.pds-copytext--truncated) {\n    pds-button {\n      display: flex;\n      width: 100%;\n\n      span {\n        overflow: hidden;\n        text-align: left;\n        text-overflow: ellipsis;\n        width: 100%;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\nimport { copy as copyIcon } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-copytext',\n  styleUrls: ['pds-copytext.scss'],\n  shadow: true,\n})\nexport class PdsCopytext {\n  /**\n   * Determines whether `copytext` should have a visible border.\n   * @defaultValue true\n   */\n  @Prop({ reflect: true }) border = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `copytext` should expand to the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Determines whether the `value` should truncate and display with an ellipsis.\n   * @defaultValue false\n   */\n  @Prop() truncate = false;\n\n  /**\n   * The string displayed that is also copied to the clipboard upon interaction.\n   */\n  @Prop() value!: string;\n\n  /**\n   * Event fired when copyText button is clicked.\n   */\n  @Event() pdsCopyTextClick: EventEmitter;\n\n  private copyToClipboard = async (value: string) => {\n    try {\n      if (typeof navigator.clipboard !== 'undefined') {\n        await navigator.clipboard.writeText(value);\n        this.pdsCopyTextClick.emit('Copied to clipboard');\n      }\n    } catch (err) {\n      this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n    }\n  };\n\n  private handleClick = () => {\n    this.copyToClipboard(this.value);\n  };\n\n  private classNames() {\n    const classNames = ['pds-copytext'];\n\n    if (this.border) {\n      classNames.push('pds-copytext--bordered');\n    }\n\n    if (this.fullWidth) {\n      classNames.push('pds-copytext--full-width');\n    }\n\n    if (this.truncate) {\n      classNames.push('pds-copytext--truncated');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n          <span>{this.value}</span>\n          <pds-icon icon={copyIcon} size=\"16px\"></pds-icon>\n        </pds-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-copytext.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,m4FAAm4F,CAAC;AAC35F,0BAAe,cAAc;;MCQhBA,aAAW;;;;;;QAkCd,oBAAe,GAAG,OAAO,KAAa;YAC5C,IAAI;gBACF,IAAI,OAAO,SAAS,CAAC,SAAS,KAAK,WAAW,EAAE;oBAC9C,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;oBAC3C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;iBACnD;aACF;YAAC,OAAO,GAAG,EAAE;gBACZ,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,oCAAoC,GAAG,EAAE,CAAC,CAAC;aACvE;SACF,CAAC;QAEM,gBAAW,GAAG;YACpB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAClC,CAAC;sBA1CgC,IAAI;;yBAWlB,KAAK;wBAMN,KAAK;;;IA2BhB,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,cAAc,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,UAAU,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;SAC3C;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,UAAU,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;SAC7C;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;SAC5C;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW,IAClD,mEAAY,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACpE,+DAAO,IAAI,CAAC,KAAK,CAAQ,EACzB,iEAAU,IAAI,EAAEC,IAAQ,EAAE,IAAI,EAAC,MAAM,GAAY,CACtC,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsCopytext","copyIcon"],"sources":["src/components/pds-copytext/pds-copytext.scss?tag=pds-copytext&encapsulation=shadow","src/components/pds-copytext/pds-copytext.tsx"],"sourcesContent":[":host(.pds-copytext) {\n\n\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n\n  // Update custom prop usage in Button before changing\n  --copytext-color-background-hover: var(--pine-color-grey-200);\n\n\n  pds-button {\n    align-items: center;\n    background: var(--pine-color-secondary);\n    border-radius: var(--pine-border-radius-full);\n    border-width: var(--pine-dimension-none);\n    display: inline-flex;\n    font-family: var(--pine-font-family-heading);\n    font-size: var(--pine-font-size-body-md);\n    font-weight: var(--pine-font-weight-body-medium);\n    letter-spacing: var(--pine-letter-spacing);\n    line-height: var(--pine-line-height-body);\n    max-width: 100%;\n    padding: var(--pine-dimension-2xs) var(--pine-dimension-xs);\n\n    &::part(button) {\n      padding-inline-end: calc(var(--pine-dimension-xs) / 2);\n    }\n\n    &::part(button):hover {\n      // Update custom prop usage in Button before changing\n      background-color: var(--copytext-color-background-hover);\n      color: var(--pine-color-text-secondary-hover);\n    }\n\n    span {\n      font-weight: var(--pine-font-weight-medium);\n      margin-inline-end: var(--pine-dimension-xs);\n      white-space: nowrap;\n    }\n\n    :nth-child(2) {\n      flex-shrink: 0;\n    }\n  }\n\n  // bordered\n\n  &:host(.pds-copytext--bordered) {\n    border-width: var(--pine-dimension-none);\n    padding: var(--pine-dimension-none);\n\n    pds-button {\n      padding: var(--pine-dimension-none);\n\n    }\n\n    &::part(button):hover {\n      background-color: transparent;\n    }\n\n    span {\n      border: var(--pine-border);\n      border-radius: var(--pine-border-radius-full);\n      margin-inline-end: var(--pine-dimension-sm);\n      padding-block: var(--pine-dimension-xs);\n      padding-inline: var(--pine-dimension-sm);\n    }\n\n    :hover {\n      span {\n        border: var(--pine-border-hover);\n      }\n    }\n  }\n\n  // full width and truncated\n  &:host(.pds-copytext--full-width),\n  &:host(.pds-copytext--truncated) {\n    pds-button {\n      display: inline-flex;\n      min-width: auto;\n      width: 100%;\n\n      &::part(button-content),\n      &::part(button-text) {\n        flex-shrink: 1;\n        width: 100%;\n      }\n\n      span {\n        text-align: left;\n        width: 100%;\n      }\n    }\n  }\n\n  // full width\n  &:host(.pds-copytext--full-width) {\n    pds-button {\n      justify-content: space-between;\n    }\n  }\n\n  // truncated\n  &:host(.pds-copytext--truncated) {\n    pds-button span {\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\nimport { copy as copyIcon } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-copytext',\n  styleUrls: ['pds-copytext.scss'],\n  shadow: true,\n})\nexport class PdsCopytext {\n  /**\n   * Determines whether `copytext` should have a visible border.\n   * @defaultValue true\n   */\n  @Prop({ reflect: true }) border = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `copytext` should expand to the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Determines whether the `value` should truncate and display with an ellipsis.\n   * @defaultValue false\n   */\n  @Prop() truncate = false;\n\n  /**\n   * The string displayed that is also copied to the clipboard upon interaction.\n   */\n  @Prop() value!: string;\n\n  /**\n   * Event fired when copyText button is clicked.\n   */\n  @Event() pdsCopyTextClick: EventEmitter;\n\n  private copyToClipboard = async (value: string) => {\n    try {\n      if (typeof navigator.clipboard !== 'undefined') {\n        await navigator.clipboard.writeText(value);\n        this.pdsCopyTextClick.emit('Copied to clipboard');\n      }\n    } catch (err) {\n      this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n    }\n  };\n\n  private handleClick = () => {\n    this.copyToClipboard(this.value);\n  };\n\n  private classNames() {\n    const classNames = ['pds-copytext'];\n\n    if (this.border) {\n      classNames.push('pds-copytext--bordered');\n    }\n\n    if (this.fullWidth) {\n      classNames.push('pds-copytext--full-width');\n    }\n\n    if (this.truncate) {\n      classNames.push('pds-copytext--truncated');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n          <span>{this.value}</span>\n          <pds-icon icon={copyIcon} size=\"16px\"></pds-icon>\n        </pds-button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-divider.js

@@ -24,7 +24,7 @@ const PdsDivider$1 = /*@__PURE__*/ proxyCustomElement(class PdsDivider extends H
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'ee48ee45e0463abbd3cb7aa686f8d86928830ccb', id: this.componentId }, h("hr", { key: '4af739f85e502a7d9bff1b3581c283cb6ee53a0e', class: this.classNames() })));
+        return (h(Host, { key: '320aa3a83547a773630fbb1a1d8d9e57d3f54477', id: this.componentId }, h("hr", { key: '1d1b7aaf8c783ecad6a1b5ad91bd258acb21046b', class: this.classNames() })));
     }
     static get style() { return PdsDividerStyle0; }
 }, [1, "pds-divider", {

package/components/pds-image.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const pdsImageCss = ":host{--dimension-aspect-ratio:auto;display:inline-block}img{aspect-ratio:var(--dimension-aspect-ratio)}";
+const pdsImageCss = ":host{--dimension-aspect-ratio:auto;display:inline-block}img{aspect-ratio:var(--dimension-aspect-ratio);display:block;height:auto;max-width:100%}";
 const PdsImageStyle0 = pdsImageCss;
 
 const PdsImage$1 = /*@__PURE__*/ proxyCustomElement(class PdsImage extends HTMLElement {
@@ -18,9 +18,9 @@ const PdsImage$1 = /*@__PURE__*/ proxyCustomElement(class PdsImage extends HTMLE
         this.width = undefined;
     }
     render() {
-        return (h(Host, { key: '2b5893c36517ee6e30c12a141f19b3f13845db97', class: {
+        return (h(Host, { key: '043894e2963cd548dc165c5d877d217ebc28b1a4', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: '965043cab5ea5c62c52951ec90018bced5bb46e8', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+            }, id: this.componentId }, h("img", { key: '1c0c68d060c938922f0df9d398943d033344a592', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
     }
     static get style() { return PdsImageStyle0; }
 }, [1, "pds-image", {

package/components/pds-image.js.map

@@ -1 +1 @@
-{"file":"pds-image.js","mappings":";;AAAA,MAAM,WAAW,GAAG,0GAA0G,CAAC;AAC/H,uBAAe,WAAW;;MCMbA,UAAQ;;;;;mBAOJ,EAAE;;;uBAkBoB,OAAO;;;;;;IA2B5C,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;aAClB,EACD,EAAE,EAAE,IAAI,CAAC,WAAW,IAEpB,4DACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACG,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsImage"],"sources":["src/components/pds-image/pds-image.scss?tag=pds-image&encapsulation=shadow","src/components/pds-image/pds-image.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --dimension-aspect-ratio: The image's aspect ratio.\n  */\n\n  --dimension-aspect-ratio: auto;\n  display: inline-block;\n}\n\nimg {\n  aspect-ratio: var(--dimension-aspect-ratio);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-image',\n  styleUrls: ['pds-image.scss'],\n  shadow: true,\n})\nexport class PdsImage {\n  /**\n   * The image's alt tag. If none is provided,\n   * it will default to an empty string, which is desired for\n   * decorative images.\n   * @defaultValue ''\n   */\n  @Prop() alt? = '';\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * The height of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() height?: number;\n\n  /**\n   * Indicates how the browser should load the image.\n   * @defaultValue eager\n   */\n  @Prop() loading?: 'eager' | 'lazy' = 'eager';\n\n  /**\n   * Determines the intended display size of an image\n   * within certain breakpoints. Has no effect if `srcset`\n   * is not set or value has no width descriptor.\n   */\n  @Prop() sizes?: string;\n\n  /**\n   * The image's source.\n   */\n  @Prop() src: string;\n\n  /**\n   * A set of image sources for the browser to use\n   * for responsiveness.\n   */\n  @Prop() srcset?: string\n\n  /**\n   * The width of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() width?: number;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'pds-image': true,\n        }}\n        id={this.componentId}\n      >\n        <img\n          alt={this.alt}\n          height={this.height}\n          loading={this.loading}\n          sizes={this.sizes}\n          src={this.src}\n          srcset={this.srcset}\n          width={this.width}\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-image.js","mappings":";;AAAA,MAAM,WAAW,GAAG,mJAAmJ,CAAC;AACxK,uBAAe,WAAW;;MCMbA,UAAQ;;;;;mBAOJ,EAAE;;;uBAkBoB,OAAO;;;;;;IA2B5C,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;aAClB,EACD,EAAE,EAAE,IAAI,CAAC,WAAW,IAEpB,4DACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACG,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsImage"],"sources":["src/components/pds-image/pds-image.scss?tag=pds-image&encapsulation=shadow","src/components/pds-image/pds-image.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --dimension-aspect-ratio: The image's aspect ratio.\n  */\n\n  --dimension-aspect-ratio: auto;\n  display: inline-block;\n}\n\nimg {\n  aspect-ratio: var(--dimension-aspect-ratio);\n  display: block;\n  height: auto;\n  max-width: 100%;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-image',\n  styleUrls: ['pds-image.scss'],\n  shadow: true,\n})\nexport class PdsImage {\n  /**\n   * The image's alt tag. If none is provided,\n   * it will default to an empty string, which is desired for\n   * decorative images.\n   * @defaultValue ''\n   */\n  @Prop() alt? = '';\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * The height of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() height?: number;\n\n  /**\n   * Indicates how the browser should load the image.\n   * @defaultValue eager\n   */\n  @Prop() loading?: 'eager' | 'lazy' = 'eager';\n\n  /**\n   * Determines the intended display size of an image\n   * within certain breakpoints. Has no effect if `srcset`\n   * is not set or value has no width descriptor.\n   */\n  @Prop() sizes?: string;\n\n  /**\n   * The image's source.\n   */\n  @Prop() src: string;\n\n  /**\n   * A set of image sources for the browser to use\n   * for responsiveness.\n   */\n  @Prop() srcset?: string\n\n  /**\n   * The width of the image in pixels. Setting this will\n   * devote space in the layout to prevent layout\n   * shifts when the image is loaded.\n   */\n  @Prop() width?: number;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'pds-image': true,\n        }}\n        id={this.componentId}\n      >\n        <img\n          alt={this.alt}\n          height={this.height}\n          loading={this.loading}\n          sizes={this.sizes}\n          src={this.src}\n          srcset={this.srcset}\n          width={this.width}\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-input.js

@@ -133,10 +133,10 @@ const PdsInput$1 = /*@__PURE__*/ proxyCustomElement(class PdsInput extends HTMLE
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: 'a823b0086b4c4accc0788813a41b19f8b6ff32e1', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: 'e9b04aaa8e50c987e6010017fbb82bc7b6774d34', class: "pds-input" }, this.label &&
-            h("label", { key: '5c6ddd8b32997344399915929d1ebd9b53c01ec2', class: "pds-input__label", htmlFor: this.componentId }, this.label), h("input", Object.assign({ key: '4bbc00b3ad007fa357ebddccaed0ee5912c464ea', class: this.inputClassNames(), ref: (input) => this.nativeInput = input, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.helperMessage &&
-            h("p", { key: 'df6340f0d4ac1271e6a304a2accb312b45c87081', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("p", { key: '50ecf4b62a9a7215a9b7043031a82b5f3b4f0291', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '87cfdda13d2756c221e0fc3e448c94fb46bc2eb8', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: '6e4e04c4db43e707c0681e878c1b1f73deee86ae', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: '6610ccb16fb657e6d97aca89b21ff2e2bc0e3fe1', class: "pds-input" }, this.label &&
+            h("label", { key: 'd85cdc84dcd35abcd592e6374e1e3d080f97ab8c', class: "pds-input__label", htmlFor: this.componentId }, this.label), h("input", Object.assign({ key: 'de33a9a5ca6901c9c745fcef9475557cfec1cf91', class: this.inputClassNames(), ref: (input) => this.nativeInput = input, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.helperMessage &&
+            h("p", { key: '0721204043319effd9ce7ee3fd42a81570ffbdcc', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("p", { key: '68e71598657e55cb3ca4ad25a23b673bafe1eefb', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '9d3969d79ecd3ab4bd2a83ff775409b00f8eb3c9', icon: danger, size: "small" }), this.errorMessage))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/pds-link.js

@@ -27,8 +27,8 @@ const PdsLink$1 = /*@__PURE__*/ proxyCustomElement(class PdsLink extends HTMLEle
         return classNames.join(' ');
     }
     render() {
-        return (h("a", { key: 'ee9b0a9897e2a212989d607c85f2050ee992bd32', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: '611a4f9194ce38fd3b79c7e55281a625267846a4' }, this.href), this.external &&
-            h("pds-icon", { key: 'a527d217c8ef1e69a2ca127019fbeb3eb25b3a02', icon: launch, size: this.fontSize })));
+        return (h("a", { key: '7ac75452091305e238c20ef1fc2055fe2f34fb04', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: '8f21b34931f85867b91e7c6c3fcc1952b9c430cd' }, this.href), this.external &&
+            h("pds-icon", { key: '60f1d607df5bf4cac7a9786f1560702719e73ff5', icon: launch, size: this.fontSize })));
     }
     static get style() { return PdsLinkStyle0; }
 }, [1, "pds-link", {

package/components/pds-loader2.js

@@ -37,7 +37,7 @@ const PdsLoader = /*@__PURE__*/ proxyCustomElement(class PdsLoader extends HTMLE
         }
     }
     render() {
-        return (h(Host, { key: '7c8fdc4812310a291f992786f1e7951664afb8b6', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: '411dbd7e815b2160abcbd0049f9e310a9059452c', class: "pds-loader--spinner" }, h("svg", { key: '1d59dc3aea7bb51015680c3657abb964a7b69106', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: '9ed887bf61bda5cda7662952dfc9add1e3e1ca40' }, h("linearGradient", { key: 'af416e97cbfbb1b2cc5c6a06f168165d60f984c8', id: "spinner-secondHalf" }, h("stop", { key: 'dd3d79c1b422dbc29a2f7af106d7e648ea739e09', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '313ef7bbcaecad0f4bf8eb268e05ef3ff48f55be', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: 'b36dde7b2648bb9bef120354f70bab8fbc3879a8', id: "spinner-firstHalf" }, h("stop", { key: '7d38062cf2f39b1be1b29e7799ac68c59744a172', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'bfe1ea074d55af2098eca57459c54cd92a1ecafc', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '0d2ee2c9abe4b90f8c38246c847c43a942316686', class: "pds-loader__spinner-path" }, h("path", { key: '87b0fc01bc7fe59e596013011034e2e1d6eabd38', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: '07b2c9ddd18117d1ef40f3e26f76bafc8c8c5309', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: 'f4a88b3aaefb70c1cb5582f94d507efe88a66fbe', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: 'ab906177f012e882487a447338c1e1155524b8c3', class: "pds-loader--typing" }, h("span", { key: 'b7080dffb6dfb66bd89ca754880e7456b33f9cdb' }), h("span", { key: '0b7d00d9e3fcbaecbade0860a2a50cec6f13b017' }), h("span", { key: '0e8cca8e86dba84a7b22913d5458c0c232661526' }))), h("div", { key: '540aee483c31b199a1c4ec09e6a848661379e593', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: 'f94f166ef6a1ef8a995efc664cd2ddf509ad51d8', name: "label" }, "Loading..."))));
+        return (h(Host, { key: 'c01b34ac171a5581e1456737f17043cf8b47af8e', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: 'ffd9e050fef503f1614c06896b8d888202df8656', class: "pds-loader--spinner" }, h("svg", { key: '056b84ca6f89f6dc93f72d115c9cad3efa9f468d', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: '85bfeab6bc686de25e4156154273067fbcb3ba0b' }, h("linearGradient", { key: 'd32d0c03f7f851cd56365af16298c4da0db74ec8', id: "spinner-secondHalf" }, h("stop", { key: '1113756349854bc4ab581c0ce282dcd54def3891', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '0f649b9e828409cab1b67a26d9a35d35e9fe7b0a', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '4aabb11799007ae40d7e112696809b35b652bb46', id: "spinner-firstHalf" }, h("stop", { key: '9624d9de9eaba0f29264d3b76bc27287bbc1b68b', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '37fd5de86c5db30731b4dc39b1cd2cb6afbe7393', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '06ccf17d191612cd5566714e69299a9e749618da', class: "pds-loader__spinner-path" }, h("path", { key: '9b5556b7c20e3c0f7effaa6d09120baa0b07e614', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'aacb689fcace08aa9bee3c3eb2ee1b571ed1b9ee', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '875a3faf04e718f095d616db6a2cd1c7bcde2f14', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '515a530c8acd7807d45c3f54ff1d264002e3e627', class: "pds-loader--typing" }, h("span", { key: 'bbb55e71064ab200ca388360a8a0986eda5b2008' }), h("span", { key: '77f42ba8124be61565479f21ed9253d928da49b3' }), h("span", { key: 'f8ef81fc9a9bf1a24f0bb3501c49291fe5028c5a' }))), h("div", { key: 'fd73795dfb15359ff655ed6abf4b2e41faa079a7', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: 'cdfb46d54431a84b3ceaaaf94d48f69c42956c8d', name: "label" }, "Loading..."))));
     }
     static get style() { return PdsLoaderStyle0; }
 }, [1, "pds-loader", {

package/components/pds-popover.js

@@ -59,7 +59,7 @@ const PdsPopover$1 = /*@__PURE__*/ proxyCustomElement(class PdsPopover extends H
         popoverEl.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: '83f5e8306d9a8f9e541e638af6fab4e83700c9ce' }, h("button", { key: '11a49c046a9258b64508c3a48dff8b63468358e0', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction, onClick: this.handleClick }, this.text), h("div", { key: 'c4034a97e7d3aa794d4cf20891cb1ccd31895fa9', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, h("slot", { key: '2005210e15c7f73efed54de5980c117f682cc476' }))));
+        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' }))));
     }
     get el() { return this; }
     static get style() { return PdsPopoverStyle0; }

package/components/pds-progress.js

@@ -16,7 +16,7 @@ const PdsProgress$1 = /*@__PURE__*/ proxyCustomElement(class PdsProgress extends
         this.showPercent = false;
     }
     render() {
-        return (h(Host, { key: 'c90714bd802c1ec10cc1d557b21c4761a348c559', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '969f33669523f2c67d30aa94652e3b70373b780a', class: "pds-progress" }, h("label", { key: '206a7c2297361caae1c5ecadacfd11939d8decee', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'e7748d02c4070bb894943fe0795a3c7008a43d62', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '7ec96692f3dc869069071bae747371ea6ef911ec', class: "pds-progress__percentage" }, this.percent, "%")));
+        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, "%")));
     }
     static get style() { return PdsProgressStyle0; }
 }, [1, "pds-progress", {

package/components/pds-radio.js

@@ -44,9 +44,9 @@ const PdsRadio$1 = /*@__PURE__*/ proxyCustomElement(class PdsRadio extends HTMLE
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '1a4f52f466f516a5803b5a539db579890fd5ec97', class: this.classNames() }, h("label", { key: 'fbf2fc5d2be220ad70e314c146f57e25536dbb13', htmlFor: this.componentId }, h("input", { key: '1016b5d553e30af9c2e7199a05cd75b30e725606', "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 }), this.label), this.helperMessage &&
-            h("div", { key: '4ac07622503e267abb9e0a808870e75b49329231', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '808d6e1b93ed05b7875e9a5aeb7907a9c73f2410', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'c7bdadaf26d528c2ebb9e8790c9dd276ddb7d6b3', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'f80c386dbbc3d77efbe0f4e2bcc4c78d72650f83', class: this.classNames() }, h("label", { key: '0cc2ae96ebdd1eb769021a72ae69ddf175e4ffe8', htmlFor: this.componentId }, h("input", { key: '8e643d6235a785dbd214ae191066b1b75a979171', "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 }), this.label), this.helperMessage &&
+            h("div", { key: 'c1a57d76d77eea12aab82fbfd257188f15ff73a9', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '9e09fc73c58ee4c192ba03a9384ab34f9f038ce7', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '80a49ff87ed900703a7f9f8d4127ea6e0ae9ca55', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get style() { return PdsRadioStyle0 + PdsRadioStyle1; }
 }, [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: '1984453536572d4bab9efc4c07e64a4e39d9c80a', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return h(Host, { key: '2c1ace3d1a16e1b437373d6d56c1d259f16c4525', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get style() { return PdsRowStyle0; }
 }, [0, "pds-row", {

package/components/pds-select.js

@@ -124,8 +124,8 @@ const PdsSelect$1 = /*@__PURE__*/ proxyCustomElement(class PdsSelect extends HTM
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: 'e2d3e77b8bf3bf697615ed3a64ea28d57e6e1804', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames() }, h("div", { key: '1d465fa9b7266807bc1504c76cab0492e4785141', class: "pds-select" }, this.label &&
-            h("label", { key: '35d64c31a97e27847c67c6b9c49e7a825da97b5e', htmlFor: this.componentId }, this.label), h("select", { key: '30ec3dfe0fe9ef962392bbc010004613da28b680', 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: '8dd9a3b63fe5f577287db4f445db43701a995472', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '1c202985751ac7ab7b42dd636a8d6c378d1d67b7', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '15731b205d0aad681ca8ca19fc69c1b49e3fc923', class: "pds-select__select-icon", icon: enlarge }))));
+        return (h(Host, { key: 'abb7c4086107f780418188ad2b241c6dd3ef70dc', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames() }, h("div", { key: '97add24f8d8108fe99d517533d8394509e0952bc', class: "pds-select" }, this.label &&
+            h("label", { key: '90d07c6d3e80a8ad87b9b32b0ae3f5b5985492c4', htmlFor: this.componentId }, this.label), h("select", { key: '810bb82b8f3ff0b71470ead548f5427901a41f51', 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: '8bbf5f497f5dc848f054db848e552e351398df9a', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: 'dc17e1784532fb31920cee07b93425963a034db8', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '47d1ddcd8d93b428156ce45c2082810b9561baba', class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get watchers() { return {
         "value": ["valueChanged"]

package/components/pds-sortable-item.js

@@ -22,7 +22,7 @@ const PdsSortableItem$1 = /*@__PURE__*/ proxyCustomElement(class PdsSortableItem
         }
     }
     render() {
-        return (h(Host, { key: 'a1cb930442bdca3f9aedbc256b70d6582068186a', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'ad13a6f870cbae41faf4958979a0cda900e0f2f8', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '1a45cc357b22c6fff2baaeb101544bc872703566', icon: handle }))), h("slot", { key: '2b2f5b99b7e97069555b81e8c4539fa6ca48de41' }), this.enableActions && (h("div", { key: '97c23c665a260a153c7db5cbc9772f616fafb3f7', class: "pds-sortable-item__actions" }, h("slot", { key: 'e4b9b759a16f33919eb774fa021588b55df675dc', name: "sortable-item-actions" })))));
+        return (h(Host, { key: '9531761ffc3c4fa9831ce48c6d1d94d8a241f5d3', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'bf1804ac74e830456c1d1c8a81a6e9794854f43f', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '44b59b0df7fa63875e732a5598e15265b8f7e3e9', icon: handle }))), h("slot", { key: 'd2fbde756dbd392a17cfdc0c1717a8f0ab8d2eb8' }), this.enableActions && (h("div", { key: '035cf65cbb286a21b697831755f08964d933fd56', class: "pds-sortable-item__actions" }, h("slot", { key: '0b14e6adddfb6edabfc92ffe31ee1048be9c8906', name: "sortable-item-actions" })))));
     }
     get el() { return this; }
     static get style() { return PdsSortableItemStyle0; }

package/components/pds-sortable.js

@@ -2691,7 +2691,7 @@ const PdsSortable$1 = /*@__PURE__*/ proxyCustomElement(class PdsSortable extends
         Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (h(Host, { key: 'e87cbd8beffd24f25c549fc405b2db3136174086', class: this.classNames(), id: this.componentId }, h("slot", { key: '6292f89c3f12a440ae1f0f52ad5d1c36000eeb87' })));
+        return (h(Host, { key: '50487903edea53def9caf206c5d23c1fb407d4ba', class: this.classNames(), id: this.componentId }, h("slot", { key: 'b2575710a4b56c7120d9971f42fb285b78187d50' })));
     }
     get el() { return this; }
     static get style() { return PdsSortableStyle0; }

package/components/pds-switch.js

@@ -50,9 +50,9 @@ const PdsSwitch$1 = /*@__PURE__*/ proxyCustomElement(class PdsSwitch extends HTM
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: 'c4d1c78da3de4034094ff3bc1167437e33ebd9fd', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("input", { key: '709b51cfd719b5498395e0921536606124c84626', "aria-describedby": assignDescription(this.componentId, this.invalid, 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 }), h(PdsLabel, { key: 'cf834cf60234a6a041d0fe75632ee13220b25fd3', classNames: "pds-switch__label", htmlFor: this.componentId, text: this.label }), this.helperMessage &&
-            h("div", { key: '93424c713be90c58cbe0330859688f8fee15163c', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: 'a20a1c59aefe4e33fd6f595a80408626c8d2623e', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'c35d6daab76aeec7f64e72a38b1c8fe59ea5d897', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: '8b2cffd17dad8bca0659b1ce6ecc35e4c5a21e69', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("input", { key: 'b89c601aa4048d1cb66f62f04e1144860d281142', "aria-describedby": assignDescription(this.componentId, this.invalid, 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 }), h(PdsLabel, { key: '851668c5fec355088b752a6cccb013de6db9ec52', classNames: "pds-switch__label", htmlFor: this.componentId, text: this.label }), this.helperMessage &&
+            h("div", { key: 'b56d66f02d694bf9b2c3a35606e1fc241630fa74', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'f28e68205f0ade8decd21651002928889e3ada2c', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'd735a2e254b13109ff3d67b00867ea7263994336', icon: danger, size: "small" }), this.errorMessage)));
     }
     get el() { return this; }
     static get style() { return PdsSwitchStyle0 + PdsSwitchStyle1; }

package/components/pds-tab.js

@@ -18,9 +18,9 @@ const PdsTab$1 = /*@__PURE__*/ proxyCustomElement(class PdsTab extends HTMLEleme
         this.pdsTabClick.emit([index, parentComponentId]);
     }
     render() {
-        const availabilityTabEdgeInlineStart = (h("span", { key: '86bc0085668c8abc70d43b3d51ecb0328c74a250', class: "pds-tab-edge", role: "presentation" }));
-        const availabilityTabEdgeInlineEnd = (h("span", { key: '1156c49c0448e6ea11bfe7b292d96c3a396c59e4', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
-        return (h(Host, { key: 'fc6a96add1a97e05ad8d85856ce44a3bc99c7581', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '41b1b8bf4e74974aa1e375a87d69c149a1fb04e6', 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: '81d264e8ac4e9d94e59ea8c377ac7225f48353db', class: "pds-tab__content" }, h("slot", { key: '9549347c6fc773e9f9b234e72f39fa265e77aac2' })))));
+        const availabilityTabEdgeInlineStart = (h("span", { key: '9c80106fd07478065a327f0d511eb295d5662a47', class: "pds-tab-edge", role: "presentation" }));
+        const availabilityTabEdgeInlineEnd = (h("span", { key: 'ca52ce9d3f390b1a41409f3b03f36c900a97e11d', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
+        return (h(Host, { key: '2388c38f23fff5470e40f27beb6d11a09f7f4ba6', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '7f5dabfd55126e61bb77118890c58acf51f3eca1', 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: '86898dd0fc8b6115f182fb366bfd7a2007ddfee8', class: "pds-tab__content" }, h("slot", { key: '0ceba1c43a19ada407c00c484f9f847b4c243920' })))));
     }
     get el() { return this; }
     static get style() { return PdsTabStyle0; }

package/components/pds-table-body.js

@@ -10,7 +10,7 @@ const PdsTableBody$1 = /*@__PURE__*/ proxyCustomElement(class PdsTableBody exten
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '41157c331cf95bb8044016a19244b4773c0a719a', role: "rowgroup" }, h("slot", { key: '366c8c12343cb47ca01c84e20bba94a191b1d3b4' })));
+        return (h(Host, { key: '0f014bb1ed578a810ea0851d6a6ca73e3100ccc0', role: "rowgroup" }, h("slot", { key: '9d1e2b60951bbd7e578b2f73cf2ee0bf77298c90' })));
     }
     static get style() { return PdsTableBodyStyle0; }
 }, [1, "pds-table-body"]);

package/components/pds-table-cell2.js

@@ -41,11 +41,11 @@ const PdsTableCell = /*@__PURE__*/ proxyCustomElement(class PdsTableCell extends
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '1c66a12a003b939e523af9885dd4812bb6d0381e', class: this.classNames(), role: "gridcell", style: this.tableRef &&
+        return (h(Host, { key: '4d3039d5acc7307a2afb6badd36e5bf80cc57a5c', class: this.classNames(), role: "gridcell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: 'e0741820507ca0ac27ef693a0f4e553c1d90ba1e' })));
+                : {} }, h("slot", { key: '0b2043478758425a1484206320f88426f1b8ea33' })));
     }
     get hostElement() { return this; }
     static get style() { return PdsTableCellStyle0; }

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

@@ -60,11 +60,11 @@ const PdsTableHeadCell = /*@__PURE__*/ proxyCustomElement(class PdsTableHeadCell
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: 'cc69c3960907c848101775317b0ff4e700e055e8', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
+        return (h(Host, { key: 'a0af053fbb687e4014d6e0d67e5d3029250c1ff0', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '02d63e30c6e05104b14fba26cf9f95709feb9d6c' }), this.sortable && (h("pds-icon", { key: 'e19c0af58d1ab0a909c72f6ddac89eacb6013a20', icon: this.sortingDirection === 'asc' ? upSmall : downSmall }))));
+                : {} }, h("slot", { key: '39acc3e6e6c03451fcd204d4b9f1958d585f70f3' }), this.sortable && (h("pds-icon", { key: 'f87c445c0a162767537d10524b9665b3288d6e54', icon: this.sortingDirection === 'asc' ? upSmall : downSmall }))));
     }
     get hostElement() { return this; }
     static get style() { return PdsTableHeadCellStyle0; }

package/components/pds-table-head.js

@@ -45,7 +45,7 @@ const PdsTableHead$1 = /*@__PURE__*/ proxyCustomElement(class PdsTableHead exten
         }
     }
     render() {
-        return (h(Host, { key: '400ce9df17b3e7237b06c53e511c06f96e794cc3', role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '177e4324e68c94a3bf4ccf6211a68ea9a16dcd21', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, h("pds-checkbox", { key: '3de990702506daebe0920bc0b41b05a66598e33c', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", labelHidden: true, checked: this.isSelected }))), h("slot", { key: '3f7c275d9ba797413c7c00f10598165b140f9370' })));
+        return (h(Host, { key: 'aa7b043f619fff19d042a99a5daf70f26b5d3e6f', role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: 'b9a55e3b654cbf8094b889bcdd168373720fe66b', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, h("pds-checkbox", { key: 'd290a40d3048d5593ab600068b1d151cff1cdc42', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", labelHidden: true, checked: this.isSelected }))), h("slot", { key: 'e8969109fa3be55e437a33331996399403bef6cc' })));
     }
     get hostElement() { return this; }
     static get style() { return PdsTableHeadStyle0; }

package/components/pds-table-row.js

@@ -56,7 +56,7 @@ const PdsTableRow$1 = /*@__PURE__*/ proxyCustomElement(class PdsTableRow extends
         }
     }
     render() {
-        return (h(Host, { key: '6d45bf5daa277f7be53ddeb0160d6385cf7deaf8', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '41ede9f594d32ddc8c579fd76ab5c1f96ec36f15', part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '112919d44ed2ebf59bc656a08b02c48b703c0487', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", labelHidden: true, checked: this.isSelected }))), h("slot", { key: 'cc280937ec2e77773ac10720e4e9bca9a4610501' })));
+        return (h(Host, { key: 'eac4d142866c009700f8e2ff03566ca412b66579', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: 'aea497fab374fde5c47a679f27c793753ee72368', part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '88a0c5f294f2263aa84c12de7cfbbbb8c930369a', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", labelHidden: true, checked: this.isSelected }))), h("slot", { key: 'c95503c1288835c248df12ad5bae3b2decdf4c25' })));
     }
     get hostElement() { return this; }
     static get style() { return PdsTableRowStyle0; }

package/components/pds-table.js

@@ -89,7 +89,7 @@ const PdsTable$1 = /*@__PURE__*/ proxyCustomElement(class PdsTable extends HTMLE
         headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;
     }
     render() {
-        return (h(Host, { key: '7540429df3f462d59b731a08ff610c9d4c2a4d10', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("slot", { key: '33a267a84e96e7aea042335672dab2a45d46ad15' })));
+        return (h(Host, { key: '685c97f9046f0fc2fe5236271cf3608e5a2a016c', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, h("slot", { key: 'd496a97636d4ddf0524a0d1d42057697a5d73cbf' })));
     }
     get el() { return this; }
     static get style() { return PdsTableStyle0; }

package/components/pds-tabpanel.js

@@ -13,7 +13,7 @@ const PdsTabpanel$1 = /*@__PURE__*/ proxyCustomElement(class PdsTabpanel extends
         this.selected = false;
     }
     render() {
-        return (h(Host, { key: '63913321e3c0005e6a0e924a4de620ab2e46157a', slot: "tabpanels" }, h("div", { key: '6a7a0af19b0b506c927001484a935220e6b8e966', 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: '57dd1e7e66bb23562b527f9218fa350ed3f3c1a7' }))));
+        return (h(Host, { key: 'b3d1639195fd9b621b2fff6a1871bc07e7b0cc2e', slot: "tabpanels" }, h("div", { key: '9d589ffbdb66db7cc02986d0f308aade018b356e', 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: '1d390c36fe8b99503b078c0526943a68d254cda3' }))));
     }
     get el() { return this; }
     static get style() { return PdsTabpanelStyle0; }

package/components/pds-tabs.js

@@ -86,7 +86,7 @@ const PdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class PdsTabs extends HTMLEle
         this.passPropsToChildren();
     }
     render() {
-        return (h(Host, { key: '93431c0270fb4f658262c43ab65fc144c527d7bf', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: 'a9b216ad2a3612b4bc5219b370efa90b9ef89e1c', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: 'a4a9a6cf3a3d43ad6b390a041cc1ef18472325f0', name: "tabs" })), h("slot", { key: '729ae2b2a129760d0d347acaee0118ba667b5292', name: "tabpanels" })));
+        return (h(Host, { key: '044baacdc058f7e1adc0eccad9e290ae6d51f230', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, h("div", { key: 'ae6af35cba5b53873d7e604514658249f21d274e', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, h("slot", { key: '76f86387f239db6900688b733fb3a79d64919290', name: "tabs" })), h("slot", { key: '02e1fa8a8d60e43963b7b1fcd576ea78e6f434ce', name: "tabpanels" })));
     }
     get el() { return this; }
     static get style() { return PdsTabsStyle0; }

package/components/pds-text.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-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:0.26px}h2{font:var(--pine-typography-heading-2);letter-spacing:0.24px}h3{font:var(--pine-typography-heading-3);letter-spacing:0.22px}h4{font:var(--pine-typography-heading-4);letter-spacing:0.2px}h5{font:var(--pine-typography-heading-5);letter-spacing:0.18px}h6{font:var(--pine-typography-heading-6);letter-spacing:0.16px}code,em,p,pre,strong{font:var(--pine-typography-body);letter-spacing:-0.16px}code,pre{font-family:monospace;letter-spacing:0;line-height:1}em{font-style:normal}strong{font-weight:bolder}h1,h2,h3,h4,h5,h6,p,code,pre,em,strong{color:var(--pine-color-text);margin:var(--pine-dimension-none)}:host([truncate])>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([italic])>*{font-style:italic}.pds-text--color-primary{color:var(--pine-color-text-primary)}.pds-text--color-secondary{color:var(--pine-color-text-secondary)}.pds-text--color-neutral{color:var(--pine-color-text-neutral)}.pds-text--color-accent{color:var(--pine-color-text-accent)}.pds-text--color-danger{color:var(--pine-color-text-danger)}.pds-text--color-info{color:var(--pine-color-text-info)}.pds-text--color-success{color:var(--pine-color-text-success)}.pds-text--color-warning{color:var(--pine-color-text-warning)}.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--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 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-body)}code,pre{font-family:monospace;letter-spacing:0;line-height:1}em{font-style:normal}strong{font-weight:bolder}h1,h2,h3,h4,h5,h6,p,code,pre,em,strong{color:var(--pine-color-text);margin:var(--pine-dimension-none)}:host([truncate])>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([italic])>*{font-style:italic}.pds-text--color-primary{color:var(--pine-color-text-primary)}.pds-text--color-secondary{color:var(--pine-color-text-secondary)}.pds-text--color-neutral{color:var(--pine-color-text-neutral)}.pds-text--color-accent{color:var(--pine-color-text-accent)}.pds-text--color-danger{color:var(--pine-color-text-danger)}.pds-text--color-info{color:var(--pine-color-text-info)}.pds-text--color-success{color:var(--pine-color-text-success)}.pds-text--color-warning{color:var(--pine-color-text-warning)}.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 PdsTextStyle0 = pdsTextCss;
 
 const PdsText$1 = /*@__PURE__*/ proxyCustomElement(class PdsText extends HTMLElement {
@@ -12,9 +12,11 @@ const PdsText$1 = /*@__PURE__*/ proxyCustomElement(class PdsText extends HTMLEle
         this.color = undefined;
         this.decoration = undefined;
         this.gutter = undefined;
+        this.italic = undefined;
         this.size = undefined;
         this.weight = undefined;
         this.tag = "p";
+        this.truncate = undefined;
     }
     render() {
         const Tag = this.tag;
@@ -27,7 +29,7 @@ const PdsText$1 = /*@__PURE__*/ proxyCustomElement(class PdsText extends HTMLEle
       ${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: '2484af922fff3a9b3eb4064e1d5bc9d760bba47f', class: typeClasses }, h("slot", { key: '1f7dd37b81a6b0c2c2a7ca55f7616f12f22a67b1' })));
+        return (h(Tag, { key: 'f5e7df223d447587def75f91452c78e87477e879', class: typeClasses }, h("slot", { key: '9341392612d92c734ae274299c94967483fb4744' })));
     }
     static get style() { return PdsTextStyle0; }
 }, [1, "pds-text", {
@@ -35,9 +37,11 @@ const PdsText$1 = /*@__PURE__*/ proxyCustomElement(class PdsText extends HTMLEle
         "color": [1],
         "decoration": [1],
         "gutter": [1],
+        "italic": [4],
         "size": [1],
         "weight": [1],
-        "tag": [1]
+        "tag": [1],
+        "truncate": [4]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/components/pds-text.js.map

@@ -1 +1 @@
-{"file":"pds-text.js","mappings":";;AAAA,MAAM,UAAU,GAAG,s6GAAs6G,CAAC;AAC17G,sBAAe,UAAU;;MCMZA,SAAO;;;;;;;;;;;mBA4ET,GAAG;;IAEZ,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,GAAG,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE;QAC3F,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE;QAC3F,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,oBAAoB,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE;QAC/F,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,kBAAkB,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;QACvF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,oBAAoB,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE;QAC/F,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,wBAAwB,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE;KAClH,CAAC;QAEF,QACE,EAAC,GAAG,qDAAC,KAAK,EAAE,WAAW,IACrB,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsText"],"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// TODO: Update all values to match new semantic tokens, if applicable\n\n/* stylelint-disable */\nh1 {\n  font: var(--pine-typography-heading-1);\n  letter-spacing: 0.26px;\n}\n\nh2 {\n  font: var(--pine-typography-heading-2);\n  letter-spacing: 0.24px;\n}\n\nh3 {\n  font: var(--pine-typography-heading-3);\n  letter-spacing: 0.22px;\n}\n\nh4 {\n  font: var(--pine-typography-heading-4);\n  letter-spacing: 0.20px;\n}\n\nh5 {\n  font: var(--pine-typography-heading-5);\n  letter-spacing: 0.18px;\n}\n\nh6 {\n  font: var(--pine-typography-heading-6);\n  letter-spacing: 0.16px;\n}\n\ncode, em, p, pre, strong {\n  font: var(--pine-typography-body);\n  letter-spacing: -0.16px;\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\nh1, h2, h3, h4, h5, h6, p, code, pre, em, strong {\n  color: var(--pine-color-text);\n  margin: var(--pine-dimension-none);\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\n// Colors/Variants/Sentiment\n$type-colors: (\n  primary: var(--pine-color-text-primary),\n  secondary: var(--pine-color-text-secondary),\n  neutral: var(--pine-color-text-neutral),\n  accent: var(--pine-color-text-accent),\n  danger: var(--pine-color-text-danger),\n  info: var(--pine-color-text-info),\n  success: var(--pine-color-text-success),\n  warning: var(--pine-color-text-warning),\n);\n\n@mixin generate-type-colors($type-colors) {\n  @each $key, $value in $type-colors {\n    .pds-text--color-#{$key} {\n      color: $value;\n    }\n  }\n}\n\n@include generate-type-colors($type-colors);\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);\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 } from '@stencil/core';\n\n@Component({\n  tag: 'pds-text',\n  styleUrl: 'pds-text.scss',\n  shadow: true,\n})\nexport class PdsText {\n\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?:\n  | 'primary'\n  | 'secondary'\n  | 'neutral'\n  | 'accent'\n  | 'danger'\n  | 'info'\n  | 'success'\n  | 'warning';\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   * Sets the font size.\n   */\n  @Prop() size?:\n  | '2xl'\n  | 'xl'\n  | 'lg'\n  | 'md'\n  | 'sm'\n  | 'xs'\n  | '2xs';\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  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.color !== undefined && this.color.trim() !== '' ? `pds-text--color-${this.color}` : ''}\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 class={typeClasses}>\n        <slot />\n      </Tag>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-text.js","mappings":";;AAAA,MAAM,UAAU,GAAG,i+HAAi+H,CAAC;AACr/H,sBAAe,UAAU;;MCMZA,SAAO;;;;;;;;;;;;mBAuFT,GAAG;;;IAOZ,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,GAAG,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE;QAC3F,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE;QAC3F,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,oBAAoB,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE;QAC/F,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,kBAAkB,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;QACvF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,oBAAoB,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE;QAC/F,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,wBAAwB,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE;KAClH,CAAC;QAEF,QACE,EAAC,GAAG,qDAAC,KAAK,EAAE,WAAW,IACrB,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsText"],"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-body);\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\nh1, h2, h3, h4, h5, h6, p, code, pre, em, strong {\n  color: var(--pine-color-text);\n  margin: var(--pine-dimension-none);\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\n// Colors/Variants/Sentiment\n$type-colors: (\n  primary: var(--pine-color-text-primary),\n  secondary: var(--pine-color-text-secondary),\n  neutral: var(--pine-color-text-neutral),\n  accent: var(--pine-color-text-accent),\n  danger: var(--pine-color-text-danger),\n  info: var(--pine-color-text-info),\n  success: var(--pine-color-text-success),\n  warning: var(--pine-color-text-warning),\n);\n\n@mixin generate-type-colors($type-colors) {\n  @each $key, $value in $type-colors {\n    .pds-text--color-#{$key} {\n      color: $value;\n    }\n  }\n}\n\n@include generate-type-colors($type-colors);\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 } from '@stencil/core';\n\n@Component({\n  tag: 'pds-text',\n  styleUrl: 'pds-text.scss',\n  shadow: true,\n})\nexport class PdsText {\n\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?:\n  | 'primary'\n  | 'secondary'\n  | 'neutral'\n  | 'accent'\n  | 'danger'\n  | 'info'\n  | 'success'\n  | 'warning';\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.color !== undefined && this.color.trim() !== '' ? `pds-text--color-${this.color}` : ''}\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 class={typeClasses}>\n        <slot />\n      </Tag>\n    );\n  }\n}\n"],"version":3}

package/components/pds-textarea.js

@@ -125,10 +125,10 @@ const PdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class PdsTextarea extends
     }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: 'ff1ea6dcc0543b1c706f922a8563fa63b4721343', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: '25d4efe232c9d90967a17920fb82f17d075189ae', class: "pds-textarea" }, this.label &&
-            h("label", { key: '764e320927d0eac61ad9c08b00f805b9bae4d525', htmlFor: this.componentId }, this.label), h("textarea", Object.assign({ key: '04f18ad66ebf94e7e52fab68e8e8d997e5d57270', 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: '5c4d5afb3239208a18c47755412ab2a80ed599f8', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: '906bc964bd9ff7bc5399dd693535ceeb80e9fcc6', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '19e00869fca337c8b4473852c8e4c2f57c605a64', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: '0edad7185f1226f00ab2fade7415066f488225cd', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: 'e895609f3cd2f691c29e5d828a0042d4f4fdc997', class: "pds-textarea" }, this.label &&
+            h("label", { key: '8bbc39cc0f21e3c25bebc673e64f320969f474f7', htmlFor: this.componentId }, this.label), h("textarea", Object.assign({ key: '243dc4bbdfe8ec3a72483ab227849b8a3008a57d', 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: 'eaaa7d806616d6478ab1360d4e6d5fd22c1466dc', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: 'af507f96a4504cba39ec63be5e8c3ab5df5a23e0', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'a87ed44788ddca487f53ce68d042f20a5557a10a', icon: danger, size: "small" }), this.errorMessage))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/pds-tooltip.js

@@ -137,13 +137,13 @@ const PdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PdsTooltip extends H
         this.opened = false;
     }
     render() {
-        return (h(Host, { key: '0db068ff80874300eb6945484cbaae6848b049e5', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: 'd3bc1f943ae310e9e520b3ff11f153a3bd2ab995', class: `
+        return (h(Host, { key: '0dcd638dabb211326da1d7783a87258760d8bc31', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: '8636152c6bbb46c1f78470c4b3c2f62ce6d0013a', class: `
             pds-tooltip
             pds-tooltip--${this.placement}
             ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}
             ${this.opened ? 'pds-tooltip--is-open' : ''}
             ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}
-          ` }, h("span", { key: '9e44354763e75d71fc61927720f9e2307a5d65ac', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '67f6124bea83fcdb6d2182f1c97782d8b8538be3' })), h("div", { key: '1a28d38b279c10c1597bd91e5e0188875a9b8552', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip", style: { maxWidth: this.maxWidth } }, h("slot", { key: 'c6f5f7bdb013c93a8139f07b9fcb47d3acb0ab54', name: "content" }), this.content))));
+          ` }, h("span", { key: '106bd78c7aaca118e2784396ce4d9be7d9860b4d', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '298dea2ca502a86193fb28ac530ecb9ce177244d' })), h("div", { key: '75f77fe884ee7204f12b04e30b6d423c93e30be5', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip", style: { maxWidth: this.maxWidth } }, h("slot", { key: 'f7de3fb1d8633491778a1d6bb166f83da10df75e', name: "content" }), this.content))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/cjs/{index-603f98cb.js → index-6a0fbd28.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-/* pds-icons v8.18.0, ES Modules */
+/* pds-icons v8.18.1, ES Modules */
 const caretDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414'/></svg>";
 const checkCircleFilled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1m5.207 8.707a1 1 0 0 0-1.414-1.414L10.5 13.586l-2.293-2.293a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0z'/></svg>";
 const copy = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M11.162 1h7.676c.528 0 .982 0 1.357.03.395.033.789.104 1.167.297a3 3 0 0 1 1.311 1.311c.193.378.264.772.296 1.167.031.375.031.83.031 1.356v7.678c0 .527 0 .981-.03 1.356-.033.395-.104.789-.297 1.167a3 3 0 0 1-1.311 1.311c-.378.193-.772.264-1.167.296-.375.031-.83.031-1.357.031H17v1.838c0 .528 0 .982-.03 1.357-.033.395-.104.789-.297 1.167a3 3 0 0 1-1.311 1.311c-.378.193-.772.264-1.167.296-.375.031-.83.031-1.356.031H5.16c-.527 0-.981 0-1.356-.03-.395-.033-.789-.104-1.167-.297a3 3 0 0 1-1.311-1.311c-.193-.378-.264-.772-.296-1.167C1 19.82 1 19.365 1 18.838v-7.677c0-.527 0-.981.03-1.356.033-.395.104-.789.297-1.167a3 3 0 0 1 1.311-1.311c.378-.193.772-.264 1.167-.296C4.18 7 4.635 7 5.161 7H7V5.161c0-.527 0-.981.03-1.356.033-.395.104-.789.297-1.167a3 3 0 0 1 1.311-1.311c.378-.193.772-.264 1.167-.296C10.18 1 10.635 1 11.162 1M5.2 9c-.577 0-.949 0-1.232.024-.272.022-.373.06-.422.085a1 1 0 0 0-.437.437c-.025.05-.063.15-.085.422C3 10.25 3 10.623 3 11.2v7.6c0 .577 0 .949.024 1.232.022.272.06.373.085.422a1 1 0 0 0 .437.437c.05.025.15.063.422.085C4.25 21 4.623 21 5.2 21h7.6c.577 0 .949 0 1.232-.024.272-.022.373-.06.422-.085a1 1 0 0 0 .437-.437c.025-.05.063-.15.085-.422C15 19.75 15 19.377 15 18.8v-7.6c0-.577 0-.949-.024-1.232-.022-.272-.06-.373-.085-.422a1 1 0 0 0-.437-.437c-.05-.025-.15-.063-.422-.085C13.75 9 13.377 9 12.8 9zM17 15v-3.838c0-.528 0-.982-.03-1.357-.033-.395-.104-.789-.297-1.167a3 3 0 0 0-1.311-1.311c-.378-.193-.772-.264-1.167-.296A18 18 0 0 0 12.838 7H9V5.2c0-.577 0-.949.024-1.232.022-.272.06-.373.085-.422a1 1 0 0 1 .437-.437c.05-.025.15-.063.422-.085C10.25 3 10.623 3 11.2 3h7.6c.577 0 .949 0 1.232.024.272.022.373.06.422.085a1 1 0 0 1 .437.437c.025.05.063.15.085.422C21 4.25 21 4.623 21 5.2v7.6c0 .577 0 .949-.024 1.232-.022.272-.06.373-.085.422a1 1 0 0 1-.437.437c-.05.025-.15.063-.422.085C19.75 15 19.377 15 18.8 15z'/></svg>";
@@ -25,4 +25,4 @@ exports.remove = remove;
 exports.upSmall = upSmall;
 exports.userFilled = userFilled;
 
-//# sourceMappingURL=index-603f98cb.js.map
+//# sourceMappingURL=index-6a0fbd28.js.map