@pine-ds/core 2.16.2 → 2.16.4

package/dist/cjs/pds-tabpanel.cjs.entry.js

@@ -16,7 +16,7 @@ const PdsTabpanel = class {
         this.selected = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'e373f0105e391bcb04888b060f41d96cf374ee2d', slot: "tabpanels" }, index.h("div", { key: '699b02073f6fa1caafc5920b82f776c86c553599', 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" }, index.h("slot", { key: 'df59ed91bf0ca60ccbde92b2f84c7c17659bfdbd' }))));
+        return (index.h(index.Host, { key: '63913321e3c0005e6a0e924a4de620ab2e46157a', slot: "tabpanels" }, index.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" }, index.h("slot", { key: '57dd1e7e66bb23562b527f9218fa350ed3f3c1a7' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/pds-tabs.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b7d9268e.js');
 
-const pdsTabsCss = ":host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;--outline:2px solid var(--pine-color-focus-ring);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-md)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--pine-dimension-xs)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--pine-dimension-sm)}:host(.pds-tabs--pill) .pds-tabs__tablist{background-color:var(--pine-color-grey-100);border:var(--pine-border-width-thin) solid var(--pine-color-grey-200);border-radius:var(--pine-dimension-100);display:-ms-inline-flexbox;display:inline-flex;gap:0;height:var(--pine-dimension-450)}";
+const pdsTabsCss = ":host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;--outline:2px solid var(--pine-color-focus-ring);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-md)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--pine-dimension-xs)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--pine-dimension-sm)}:host(.pds-tabs--pill) .pds-tabs__tablist{background-color:var(--pine-color-grey-100);border:var(--pine-border-width-thin) solid var(--pine-color-grey-200);border-radius:var(--pine-dimension-100);display:-ms-inline-flexbox;display:inline-flex;display:-ms-flexbox;display:flex;gap:0;height:var(--pine-dimension-450)}";
 const PdsTabsStyle0 = pdsTabsCss;
 
 const PdsTabs = class {
@@ -88,7 +88,7 @@ const PdsTabs = class {
         this.passPropsToChildren();
     }
     render() {
-        return (index.h(index.Host, { key: '48a7f7d7124c700612089ba096e932f0e376b418', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, index.h("div", { key: '285092baa2367bd90736a6b893745874b2e96cc4', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, index.h("slot", { key: '451b42c90fcd53ce0d51f550b402533a2fcd24df', name: "tabs" })), index.h("slot", { key: '945fe293061a5fff2e3777e3d454d10f3bc59125', name: "tabpanels" })));
+        return (index.h(index.Host, { key: '93431c0270fb4f658262c43ab65fc144c527d7bf', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, index.h("div", { key: 'a9b216ad2a3612b4bc5219b370efa90b9ef89e1c', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, index.h("slot", { key: 'a4a9a6cf3a3d43ad6b390a041cc1ef18472325f0', name: "tabs" })), index.h("slot", { key: '729ae2b2a129760d0d347acaee0118ba667b5292', name: "tabpanels" })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/pds-tabs.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pds-tabs.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --tabs-dimension-panel-margin-top: Optional margin-top for panels\n   */\n  --tabs-dimension-panel-margin-top: var(--pine-dimension-none);\n  /**\n   * @prop --tabs-dimension-panel-padding: Optional padding for panels\n   */\n  --tabs-dimension-panel-padding: 0;\n\n  --outline: 2px solid var(--pine-color-focus-ring);\n\n  display: block;\n}\n\n.pds-tabs__tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--pine-dimension-md);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n  gap: var(--pine-dimension-xs);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n  gap: var(--pine-dimension-sm);\n}\n\n:host(.pds-tabs--pill) .pds-tabs__tablist {\n  background-color: var(--pine-color-grey-100);\n  border: var(--pine-border-width-thin) solid var(--pine-color-grey-200);\n  border-radius: var(--pine-dimension-100);\n  display: inline-flex;\n  gap: 0;\n  height: var(--pine-dimension-450);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n  /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n */\n@Component({\n  tag: 'pds-tabs',\n  styleUrls: ['pds-tabs.scss'],\n  shadow: true,\n})\nexport class PdsTabs {\n  private tabs;\n  private tabPanels;\n\n  @Element() el: HTMLPdsTabsElement;\n\n  /**\n   * Sets the aria-label attached to the tablist element\n   */\n  @Prop() tablistLabel!: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets tabs variant styles as outlined in Figma documentation\n   */\n  @Prop() variant!: 'primary' | 'availability' | 'filter' | 'pill';\n\n  /**\n   * Sets the starting active tab name and maintains the name as the component re-renders\n   */\n  @Prop({mutable: true}) activeTabName!: string;\n\n  /**\n   * Sets the starting active tab index number and maintains the index number as the component re-renders\n   */\n  /** @internal */\n  @Prop({mutable: true}) activeTabIndex: number;\n\n  @Listen('pdsTabClick', {\n    target: 'body',\n  })\n  tabClickHandler(event: CustomEvent<any>) {\n    if (this.componentId === event.detail[1]) {\n      this.activeTabIndex = event.detail[0];\n      this.activeTabName = this.tabs[this.activeTabIndex].name;\n    }\n  }\n\n  @Listen('keydown', {})\n  handleKeyDown(ev: KeyboardEvent) {\n    const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n    if (keySet.includes(ev.key)) {\n      ev.preventDefault();\n      this.moveActiveTab(ev.key);\n    }\n  }\n\n  private moveActiveTab(key: string) {\n    const firstTabNumber = 0;\n    const lastTabNumber = this.tabs.length - 1;\n\n    let moveFocusTo = null;\n\n    switch (key) {\n      case 'ArrowLeft':\n        moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n        break;\n      case 'ArrowRight':\n        moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n        break;\n      case 'Home':\n        moveFocusTo = firstTabNumber;\n        break;\n      case 'End':\n        moveFocusTo = lastTabNumber;\n        break;\n    }\n\n    // Move focus to the button element within `pds-tab`\n    this.tabs[moveFocusTo].children[0].focus();\n    this.activeTabName = this.tabs[moveFocusTo].name;\n    this.activeTabIndex = moveFocusTo;\n  }\n\n  private findAllChildren() {\n    this.tabs = this.el.querySelectorAll('pds-tab');\n    this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n  }\n\n  private propGeneration(child, index = 0) {\n    child.parentComponentId = this.componentId.toString();\n    child.variant = this.variant.toString();\n    child.selected = (this.activeTabName === child.name) ? true : false;\n    child['index'] = index;\n  }\n\n  private passPropsToChildren() {\n    this.tabs.forEach((child, index) => {\n      if (this.activeTabName === child.name) this.activeTabIndex = index;\n      this.propGeneration(child, index);\n    });\n\n    this.tabPanels.forEach((child) => {\n      this.propGeneration(child);\n    });\n  }\n\n  private classNames() {\n    let className = `pds-tabs`;\n    if (this.variant && this.variant != 'primary') {\n      const variantClassName = `pds-tabs--${this.variant}`;\n      className += ' ' + variantClassName;\n    }\n\n    return className;\n  };\n\n  componentWillLoad() {\n    this.findAllChildren();\n  }\n\n  componentWillRender() {\n    this.passPropsToChildren();\n  }\n\n  render() {\n    return (\n      <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n        <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-tabs.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,2uBAA2uB,CAAC;AAC/vB,sBAAe,UAAU;;MCUZ,OAAO;;;;;;;;;IAmClB,eAAe,CAAC,KAAuB;QACrC,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;YACxC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YACtC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC;SAC1D;KACF;IAGD,aAAa,CAAC,EAAiB;QAC7B,MAAM,MAAM,GAAG,CAAC,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QAE1D,IAAI,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE;YAC3B,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;SAC5B;KACF;IAEO,aAAa,CAAC,GAAW;QAC/B,MAAM,cAAc,GAAG,CAAC,CAAC;QACzB,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAE3C,IAAI,WAAW,GAAG,IAAI,CAAC;QAEvB,QAAQ,GAAG;YACT,KAAK,WAAW;gBACd,WAAW,GAAG,CAAC,IAAI,CAAC,cAAc,KAAK,cAAc,IAAI,aAAa,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;gBACtG,MAAM;YACR,KAAK,YAAY;gBACf,WAAW,GAAG,CAAC,IAAI,CAAC,cAAc,KAAK,aAAa,IAAI,cAAc,IAAI,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC;gBACnG,MAAM;YACR,KAAK,MAAM;gBACT,WAAW,GAAG,cAAc,CAAC;gBAC7B,MAAM;YACR,KAAK,KAAK;gBACR,WAAW,GAAG,aAAa,CAAC;gBAC5B,MAAM;SACT;;QAGD,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAC3C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC;QACjD,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;KACnC;IAEO,eAAe;QACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAChD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;KAC3D;IAEO,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC;QACrC,KAAK,CAAC,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;QACtD,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;QACxC,KAAK,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,CAAC;QACpE,KAAK,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC;KACxB;IAEO,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK;YAC7B,IAAI,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,IAAI;gBAAE,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YACnE,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;SACnC,CAAC,CAAC;QAEH,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,KAAK;YAC3B,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;SAC5B,CAAC,CAAC;KACJ;IAEO,UAAU;QAChB,IAAI,SAAS,GAAG,UAAU,CAAC;QAC3B,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE;YAC7C,MAAM,gBAAgB,GAAG,aAAa,IAAI,CAAC,OAAO,EAAE,CAAC;YACrD,SAAS,IAAI,GAAG,GAAG,gBAAgB,CAAC;SACrC;QAED,OAAO,SAAS,CAAC;KAClB;;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,mBAAmB;QACjB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,wEAAkB,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW,IACvFD,kEAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,SAAS,gBAAa,IAAI,CAAC,YAAY,IACzEA,mEAAM,IAAI,EAAC,MAAM,GAAG,CAChB,EACNA,mEAAM,IAAI,EAAC,WAAW,GAAG,CACpB,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --tabs-dimension-panel-margin-top: Optional margin-top for panels\n   */\n  --tabs-dimension-panel-margin-top: var(--pine-dimension-none);\n  /**\n   * @prop --tabs-dimension-panel-padding: Optional padding for panels\n   */\n  --tabs-dimension-panel-padding: 0;\n\n  --outline: 2px solid var(--pine-color-focus-ring);\n\n  display: block;\n}\n\n.pds-tabs__tablist {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--pine-dimension-md);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n  gap: var(--pine-dimension-xs);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n  gap: var(--pine-dimension-sm);\n}\n\n:host(.pds-tabs--pill) .pds-tabs__tablist {\n  background-color: var(--pine-color-grey-100);\n  border: var(--pine-border-width-thin) solid var(--pine-color-grey-200);\n  border-radius: var(--pine-dimension-100);\n  display: inline-flex;\n  display: flex;\n  gap: 0;\n  height: var(--pine-dimension-450);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n  /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n */\n@Component({\n  tag: 'pds-tabs',\n  styleUrls: ['pds-tabs.scss'],\n  shadow: true,\n})\nexport class PdsTabs {\n  private tabs;\n  private tabPanels;\n\n  @Element() el: HTMLPdsTabsElement;\n\n  /**\n   * Sets the aria-label attached to the tablist element\n   */\n  @Prop() tablistLabel!: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets tabs variant styles as outlined in Figma documentation\n   */\n  @Prop() variant!: 'primary' | 'availability' | 'filter' | 'pill';\n\n  /**\n   * Sets the starting active tab name and maintains the name as the component re-renders\n   */\n  @Prop({mutable: true}) activeTabName!: string;\n\n  /**\n   * Sets the starting active tab index number and maintains the index number as the component re-renders\n   */\n  /** @internal */\n  @Prop({mutable: true}) activeTabIndex: number;\n\n  @Listen('pdsTabClick', {\n    target: 'body',\n  })\n  tabClickHandler(event: CustomEvent<any>) {\n    if (this.componentId === event.detail[1]) {\n      this.activeTabIndex = event.detail[0];\n      this.activeTabName = this.tabs[this.activeTabIndex].name;\n    }\n  }\n\n  @Listen('keydown', {})\n  handleKeyDown(ev: KeyboardEvent) {\n    const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n    if (keySet.includes(ev.key)) {\n      ev.preventDefault();\n      this.moveActiveTab(ev.key);\n    }\n  }\n\n  private moveActiveTab(key: string) {\n    const firstTabNumber = 0;\n    const lastTabNumber = this.tabs.length - 1;\n\n    let moveFocusTo = null;\n\n    switch (key) {\n      case 'ArrowLeft':\n        moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n        break;\n      case 'ArrowRight':\n        moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n        break;\n      case 'Home':\n        moveFocusTo = firstTabNumber;\n        break;\n      case 'End':\n        moveFocusTo = lastTabNumber;\n        break;\n    }\n\n    // Move focus to the button element within `pds-tab`\n    this.tabs[moveFocusTo].children[0].focus();\n    this.activeTabName = this.tabs[moveFocusTo].name;\n    this.activeTabIndex = moveFocusTo;\n  }\n\n  private findAllChildren() {\n    this.tabs = this.el.querySelectorAll('pds-tab');\n    this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n  }\n\n  private propGeneration(child, index = 0) {\n    child.parentComponentId = this.componentId.toString();\n    child.variant = this.variant.toString();\n    child.selected = (this.activeTabName === child.name) ? true : false;\n    child['index'] = index;\n  }\n\n  private passPropsToChildren() {\n    this.tabs.forEach((child, index) => {\n      if (this.activeTabName === child.name) this.activeTabIndex = index;\n      this.propGeneration(child, index);\n    });\n\n    this.tabPanels.forEach((child) => {\n      this.propGeneration(child);\n    });\n  }\n\n  private classNames() {\n    let className = `pds-tabs`;\n    if (this.variant && this.variant != 'primary') {\n      const variantClassName = `pds-tabs--${this.variant}`;\n      className += ' ' + variantClassName;\n    }\n\n    return className;\n  };\n\n  componentWillLoad() {\n    this.findAllChildren();\n  }\n\n  componentWillRender() {\n    this.passPropsToChildren();\n  }\n\n  render() {\n    return (\n      <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n        <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n          <slot name=\"tabs\" />\n        </div>\n        <slot name=\"tabpanels\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pds-text.cjs.entry.js

@@ -29,7 +29,7 @@ const PdsText = class {
       ${this.weight !== undefined && this.weight.trim() !== '' ? `pds-text--weight-${this.weight}` : ''}
       ${this.decoration !== undefined && this.decoration.trim() !== '' ? `pds-text--decoration-${this.decoration}` : ''}
     `;
-        return (index.h(Tag, { key: '1f4e66d525057dea787cafa3e553572333dc1f1d', class: typeClasses }, index.h("slot", { key: '035a577c6c1b67b200362c0bf6431714ac8c52ba' })));
+        return (index.h(Tag, { key: '2484af922fff3a9b3eb4064e1d5bc9d760bba47f', class: typeClasses }, index.h("slot", { key: '1f7dd37b81a6b0c2c2a7ca55f7616f12f22a67b1' })));
     }
 };
 PdsText.style = PdsTextStyle0;

package/dist/cjs/pds-textarea.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-b7d9268e.js');
 const form = require('./form-4f00637c.js');
 const utils = require('./utils-39c972f8.js');
 const attributes = require('./attributes-73ee8de7.js');
-const index$1 = require('./index-034a8bb0.js');
+const index$1 = require('./index-603f98cb.js');
 
 const labelCss = ":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";
 const PdsTextareaStyle0 = labelCss;
@@ -126,10 +126,10 @@ const PdsTextarea = class {
     }
     render() {
         const value = this.getValue();
-        return (index.h(index.Host, { key: 'aa960b2a67c927c296040e835fadcd8f8bcbbc18', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, index.h("div", { key: 'b95804e8ddbd92f4d7177c90d342d0ff2022ad44', class: "pds-textarea" }, this.label &&
-            index.h("label", { key: 'ef508b6af03cf871b419b2dd4d79ded182b59da5', htmlFor: this.componentId }, this.label), index.h("textarea", Object.assign({ key: '2d2f195e8a715332eab0bba4f869db67b0f249c9', ref: (el) => this.nativeTextarea = el, "aria-describedby": form.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 &&
-            index.h("p", { key: '84ad453017c378553eeda5198267564661b9bc8f', class: "pds-textarea__helper-message", id: form.messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            index.h("p", { key: 'd1fbcbe5af314a25bdec647d560f9e964a9c8b90', "aria-live": "assertive", class: "pds-textarea__error-message", id: form.messageId(this.componentId, 'error') }, index.h("pds-icon", { key: '525edfdafeabd31a41e62c0c0e454752123c7c8a', icon: index$1.danger, size: "small" }), this.errorMessage))));
+        return (index.h(index.Host, { key: 'ff1ea6dcc0543b1c706f922a8563fa63b4721343', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, index.h("div", { key: '25d4efe232c9d90967a17920fb82f17d075189ae', class: "pds-textarea" }, this.label &&
+            index.h("label", { key: '764e320927d0eac61ad9c08b00f805b9bae4d525', htmlFor: this.componentId }, this.label), index.h("textarea", Object.assign({ key: '04f18ad66ebf94e7e52fab68e8e8d997e5d57270', ref: (el) => this.nativeTextarea = el, "aria-describedby": form.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 &&
+            index.h("p", { key: '5c4d5afb3239208a18c47755412ab2a80ed599f8', class: "pds-textarea__helper-message", id: form.messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            index.h("p", { key: '906bc964bd9ff7bc5399dd693535ceeb80e9fcc6', "aria-live": "assertive", class: "pds-textarea__error-message", id: form.messageId(this.componentId, 'error') }, index.h("pds-icon", { key: '19e00869fca337c8b4473852c8e4c2f57c605a64', icon: index$1.danger, size: "small" }), this.errorMessage))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/pds-tooltip.cjs.entry.js

@@ -139,13 +139,13 @@ const PdsTooltip = class {
         this.opened = false;
     }
     render() {
-        return (index.h(index.Host, { key: '33df155f78b81a7c933e89bb115247c49732fa3c', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, index.h("div", { key: '42acdb06c67d77e05a2079423731b2587c04193b', class: `
+        return (index.h(index.Host, { key: '0db068ff80874300eb6945484cbaae6848b049e5', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, index.h("div", { key: 'd3bc1f943ae310e9e520b3ff11f153a3bd2ab995', 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'}
-          ` }, index.h("span", { key: '3086830ad1713041b1750868f1455ac5c246af20', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, index.h("slot", { key: '0fcff3e24fcfac192581cf51ec0c7b22f2d338ec' })), index.h("div", { key: 'e8c73dc4872b2356dd6bcd278f181816d9237997', 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 } }, index.h("slot", { key: '031946f960e6250fe7af1535648317ef5a9521f9', name: "content" }), this.content))));
+          ` }, index.h("span", { key: '9e44354763e75d71fc61927720f9e2307a5d65ac', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, index.h("slot", { key: '67f6124bea83fcdb6d2182f1c97782d8b8538be3' })), index.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 } }, index.h("slot", { key: 'c6f5f7bdb013c93a8139f07b9fcb47d3acb0ab54', name: "content" }), this.content))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/pine-core.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["pds-table-head.cjs",[[1,"pds-table-head",{"indeterminate":[1028],"isSelected":[1028,"is-selected"]}]]],["pds-table-row.cjs",[[1,"pds-table-row",{"indeterminate":[1028],"isSelected":[1028,"is-selected"]}]]],["pds-copytext.cjs",[[1,"pds-copytext",{"border":[516],"componentId":[1,"component-id"],"fullWidth":[4,"full-width"],"truncate":[4],"value":[1]}]]],["pds-accordion.cjs",[[1,"pds-accordion",{"componentId":[1,"component-id"],"isOpen":[1540,"open"]},null,{"isOpen":["handleOpenState"]}]]],["pds-avatar.cjs",[[1,"pds-avatar",{"alt":[1],"badge":[4],"componentId":[1,"component-id"],"dropdown":[4],"image":[1],"size":[513],"variant":[513]}]]],["pds-chip.cjs",[[1,"pds-chip",{"componentId":[1,"component-id"],"dot":[4],"label":[1],"large":[4],"sentiment":[1],"variant":[1]}]]],["pds-input.cjs",[[1,"pds-input",{"autocomplete":[1],"componentId":[1,"component-id"],"debounce":[2],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"type":[1],"value":[1032],"hasFocus":[32],"setFocus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}]]],["pds-link.cjs",[[1,"pds-link",{"componentId":[1,"component-id"],"external":[4],"variant":[1],"fontSize":[1,"font-size"],"href":[1]}]]],["pds-radio.cjs",[[2,"pds-radio",{"checked":[4],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"required":[4],"value":[1]}]]],["pds-select.cjs",[[1,"pds-select",{"autocomplete":[1],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"multiple":[4],"name":[1],"required":[4],"value":[1025]},null,{"value":["valueChanged"]}]]],["pds-sortable-item.cjs",[[6,"pds-sortable-item",{"enableActions":[4,"enable-actions"],"componentId":[1,"component-id"],"showHandle":[1028,"show-handle"]}]]],["pds-switch.cjs",[[1,"pds-switch",{"componentId":[1,"component-id"],"checked":[1028],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"required":[4],"value":[1]}]]],["pds-textarea.cjs",[[1,"pds-textarea",{"autocomplete":[1],"componentId":[1,"component-id"],"disabled":[4],"debounce":[2],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[1028],"label":[1],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1025],"hasFocus":[32],"setFocus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}]]],["pds-box.cjs",[[0,"pds-box",{"alignItems":[1,"align-items"],"auto":[4],"backgroundColor":[1,"background-color"],"border":[4],"borderColor":[1,"border-color"],"borderRadius":[1,"border-radius"],"direction":[1],"display":[1],"fit":[4],"gap":[1],"flex":[1],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"minWidth":[1,"min-width"],"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"padding":[1],"shadow":[1],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]}]]],["pds-divider.cjs",[[1,"pds-divider",{"componentId":[1,"component-id"],"offset":[1],"vertical":[4]}]]],["pds-image.cjs",[[1,"pds-image",{"alt":[1],"componentId":[1,"component-id"],"height":[2],"loading":[1],"sizes":[1],"src":[1],"srcset":[1],"width":[2]}]]],["pds-loader.cjs",[[1,"pds-loader",{"isLoading":[4,"is-loading"],"showLabel":[4,"show-label"],"size":[513],"variant":[1]}]]],["pds-popover.cjs",[[1,"pds-popover",{"popoverTargetAction":[1,"popover-target-action"],"popoverType":[1,"popover-type"],"componentId":[1,"component-id"],"text":[1],"maxWidth":[2,"max-width"],"placement":[513],"active":[32]},[[2,"click","handleClick"],[11,"scroll","handleScroll"]]]]],["pds-progress.cjs",[[1,"pds-progress",{"animated":[4],"componentId":[1,"component-id"],"fillColor":[1,"fill-color"],"label":[1],"percent":[2],"showPercent":[4,"show-percent"]}]]],["pds-row.cjs",[[0,"pds-row",{"alignItems":[1,"align-items"],"border":[4],"colGap":[1,"col-gap"],"componentId":[1,"component-id"],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"noWrap":[4,"no-wrap"]}]]],["pds-sortable.cjs",[[6,"pds-sortable",{"border":[516],"componentId":[1,"component-id"],"dividers":[516],"handleType":[1,"handle-type"]}]]],["pds-tab.cjs",[[4,"pds-tab",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"index":[2],"selected":[4]}]]],["pds-table.cjs",[[1,"pds-table",{"compact":[4],"componentId":[1,"component-id"],"responsive":[4],"fixedColumn":[4,"fixed-column"],"selectable":[4],"sortingColumn":[32],"sortingDirection":[32]},[[0,"pdsTableSort","handleTableSort"],[0,"pdsTableSelectAll","handleTableSelectAll"],[0,"pdsTableRowSelected","handleTableSelect"]]]]],["pds-table-body.cjs",[[1,"pds-table-body"]]],["pds-tabpanel.cjs",[[4,"pds-tabpanel",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"selected":[1028]}]]],["pds-tabs.cjs",[[1,"pds-tabs",{"tablistLabel":[1,"tablist-label"],"componentId":[1,"component-id"],"variant":[1],"activeTabName":[1025,"active-tab-name"],"activeTabIndex":[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["pds-text.cjs",[[1,"pds-text",{"align":[1],"color":[1],"decoration":[1],"gutter":[1],"size":[1],"weight":[1],"tag":[1]}]]],["pds-tooltip.cjs",[[1,"pds-tooltip",{"content":[1],"componentId":[1,"component-id"],"hasArrow":[4,"has-arrow"],"htmlContent":[4,"html-content"],"placement":[513],"maxWidth":[1,"max-width"],"opened":[1540],"isOpen":[32],"showTooltip":[64],"hideTooltip":[64]},null,{"opened":["handleOpenToggle"]}]]],["pds-icon.cjs",[[1,"pds-icon",{"color":[1],"icon":[8],"name":[513],"size":[513],"src":[1],"ariaLabel":[32],"isVisible":[32],"svgContent":[32]},null,{"size":["updateStyles"],"color":["updateStyles"],"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["pds-button.cjs",[[1,"pds-button",{"componentId":[1,"component-id"],"disabled":[4],"icon":[1],"name":[1],"value":[1],"type":[1],"variant":[1]}]]],["pds-table-head-cell.cjs",[[1,"pds-table-head-cell",{"sortable":[4],"sortingDirection":[32],"tableScrolling":[32],"isSelected":[32]}]]],["pds-table-cell.cjs",[[1,"pds-table-cell",{"truncate":[4],"tableScrolling":[32]}]]],["pds-checkbox.cjs",[[1,"pds-checkbox",{"checked":[1028],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"indeterminate":[1028],"invalid":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1]},null,{"checked":["updateIndeterminate"]}]]]], options);
+  return index.bootstrapLazy([["pds-copytext.cjs",[[1,"pds-copytext",{"border":[516],"componentId":[1,"component-id"],"fullWidth":[4,"full-width"],"truncate":[4],"value":[1]}]]],["pds-table-head.cjs",[[1,"pds-table-head",{"indeterminate":[1028],"isSelected":[1028,"is-selected"]}]]],["pds-table-row.cjs",[[1,"pds-table-row",{"indeterminate":[1028],"isSelected":[1028,"is-selected"]}]]],["pds-accordion.cjs",[[1,"pds-accordion",{"componentId":[1,"component-id"],"isOpen":[1540,"open"]},null,{"isOpen":["handleOpenState"]}]]],["pds-avatar.cjs",[[1,"pds-avatar",{"alt":[1],"badge":[4],"componentId":[1,"component-id"],"dropdown":[4],"image":[1],"size":[513],"variant":[513]}]]],["pds-chip.cjs",[[1,"pds-chip",{"componentId":[1,"component-id"],"dot":[4],"label":[1],"large":[4],"sentiment":[1],"variant":[1]}]]],["pds-input.cjs",[[1,"pds-input",{"autocomplete":[1],"componentId":[1,"component-id"],"debounce":[2],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"type":[1],"value":[1032],"hasFocus":[32],"setFocus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}]]],["pds-link.cjs",[[1,"pds-link",{"componentId":[1,"component-id"],"external":[4],"variant":[1],"fontSize":[1,"font-size"],"href":[1]}]]],["pds-radio.cjs",[[2,"pds-radio",{"checked":[4],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"required":[4],"value":[1]}]]],["pds-select.cjs",[[1,"pds-select",{"autocomplete":[1],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"multiple":[4],"name":[1],"required":[4],"value":[1025]},null,{"value":["valueChanged"]}]]],["pds-sortable-item.cjs",[[6,"pds-sortable-item",{"enableActions":[4,"enable-actions"],"componentId":[1,"component-id"],"showHandle":[1028,"show-handle"]}]]],["pds-switch.cjs",[[1,"pds-switch",{"componentId":[1,"component-id"],"checked":[1028],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"required":[4],"value":[1]}]]],["pds-textarea.cjs",[[1,"pds-textarea",{"autocomplete":[1],"componentId":[1,"component-id"],"disabled":[4],"debounce":[2],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[1028],"label":[1],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1025],"hasFocus":[32],"setFocus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}]]],["pds-box.cjs",[[0,"pds-box",{"alignItems":[1,"align-items"],"auto":[4],"backgroundColor":[1,"background-color"],"border":[4],"borderColor":[1,"border-color"],"borderRadius":[1,"border-radius"],"direction":[1],"display":[1],"fit":[4],"gap":[1],"flex":[1],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"minWidth":[1,"min-width"],"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"padding":[1],"shadow":[1],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]}]]],["pds-divider.cjs",[[1,"pds-divider",{"componentId":[1,"component-id"],"offset":[1],"vertical":[4]}]]],["pds-image.cjs",[[1,"pds-image",{"alt":[1],"componentId":[1,"component-id"],"height":[2],"loading":[1],"sizes":[1],"src":[1],"srcset":[1],"width":[2]}]]],["pds-popover.cjs",[[1,"pds-popover",{"popoverTargetAction":[1,"popover-target-action"],"popoverType":[1,"popover-type"],"componentId":[1,"component-id"],"text":[1],"maxWidth":[2,"max-width"],"placement":[513],"active":[32]},[[2,"click","handleClick"],[11,"scroll","handleScroll"]]]]],["pds-progress.cjs",[[1,"pds-progress",{"animated":[4],"componentId":[1,"component-id"],"fillColor":[1,"fill-color"],"label":[1],"percent":[2],"showPercent":[4,"show-percent"]}]]],["pds-row.cjs",[[0,"pds-row",{"alignItems":[1,"align-items"],"border":[4],"colGap":[1,"col-gap"],"componentId":[1,"component-id"],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"noWrap":[4,"no-wrap"]}]]],["pds-sortable.cjs",[[6,"pds-sortable",{"border":[516],"componentId":[1,"component-id"],"dividers":[516],"handleType":[1,"handle-type"]}]]],["pds-tab.cjs",[[4,"pds-tab",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"index":[2],"selected":[4]}]]],["pds-table.cjs",[[1,"pds-table",{"compact":[4],"componentId":[1,"component-id"],"responsive":[4],"fixedColumn":[4,"fixed-column"],"selectable":[4],"sortingColumn":[32],"sortingDirection":[32]},[[0,"pdsTableSort","handleTableSort"],[0,"pdsTableSelectAll","handleTableSelectAll"],[0,"pdsTableRowSelected","handleTableSelect"]]]]],["pds-table-body.cjs",[[1,"pds-table-body"]]],["pds-tabpanel.cjs",[[4,"pds-tabpanel",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"selected":[1028]}]]],["pds-tabs.cjs",[[1,"pds-tabs",{"tablistLabel":[1,"tablist-label"],"componentId":[1,"component-id"],"variant":[1],"activeTabName":[1025,"active-tab-name"],"activeTabIndex":[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["pds-text.cjs",[[1,"pds-text",{"align":[1],"color":[1],"decoration":[1],"gutter":[1],"size":[1],"weight":[1],"tag":[1]}]]],["pds-tooltip.cjs",[[1,"pds-tooltip",{"content":[1],"componentId":[1,"component-id"],"hasArrow":[4,"has-arrow"],"htmlContent":[4,"html-content"],"placement":[513],"maxWidth":[1,"max-width"],"opened":[1540],"isOpen":[32],"showTooltip":[64],"hideTooltip":[64]},null,{"opened":["handleOpenToggle"]}]]],["pds-loader.cjs",[[1,"pds-loader",{"isLoading":[4,"is-loading"],"showLabel":[4,"show-label"],"size":[513],"variant":[1]}]]],["pds-icon.cjs",[[1,"pds-icon",{"color":[1],"icon":[8],"name":[513],"size":[513],"src":[1],"ariaLabel":[32],"isVisible":[32],"svgContent":[32]},null,{"size":["updateStyles"],"color":["updateStyles"],"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["pds-button.cjs",[[1,"pds-button",{"componentId":[1,"component-id"],"disabled":[4],"fullWidth":[4,"full-width"],"icon":[1],"loading":[4],"name":[1],"value":[1],"type":[1],"variant":[1]}]]],["pds-table-head-cell.cjs",[[1,"pds-table-head-cell",{"sortable":[4],"sortingDirection":[32],"tableScrolling":[32],"isSelected":[32]}]]],["pds-table-cell.cjs",[[1,"pds-table-cell",{"truncate":[4],"tableScrolling":[32]}]]],["pds-checkbox.cjs",[[1,"pds-checkbox",{"checked":[1028],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"indeterminate":[1028],"invalid":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1]},null,{"checked":["updateIndeterminate"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -9,7 +9,8 @@ pds-box {
   background-color: var(--color-background-box);
   box-sizing: border-box;
   display: inline-flex;
-  min-width: var(--pine-dimension-none);
+  min-height: var(--sizing-min-height-box);
+  min-width: var(--sizing-min-width-box);
 }
 .pds-row > [class*=pds-box] {
   position: relative;
@@ -1014,7 +1015,7 @@ pds-box {
 }
 
 .pds-box--auto {
-  flex: 0 0 var(--pine-dimension-none, fit-content);
+  flex: 0 0 var(--sizing-min-width-box, fit-content);
   min-width: auto;
   width: auto;
 }
@@ -1064,11 +1065,11 @@ pds-box {
 }
 
 .pds-border-radius-xs {
-  border-radius: var(--pine-dimension-050);
+  border-radius: var(--pine-dimension-2xs);
 }
 
 .pds-border-radius-sm {
-  border-radius: var(--pine-dimension-075);
+  border-radius: var(--pine-dimension-xs);
 }
 
 .pds-border-radius-md {
@@ -1076,11 +1077,11 @@ pds-box {
 }
 
 .pds-border-radius-lg {
-  border-radius: var(--pine-dimension-200);
+  border-radius: var(--pine-dimension-sm);
 }
 
 .pds-border-radius-circle {
-  border-radius: 50%;
+  border-radius: var(--pine-border-radius-full);
 }
 
 .pds-shadow-050 {
@@ -1156,7 +1157,7 @@ pds-box {
 }
 
 .pds-box-gap-xxl {
-  gap: var(--pine-dimension-xxl);
+  gap: var(--pine-dimension-2xl);
 }
 
 .pds-padding-none {
@@ -1168,7 +1169,7 @@ pds-box {
 }
 
 .pds-padding-xs {
-  padding: var(--pine-dimension-2xs);
+  padding: var(--pine-dimension-xs);
 }
 
 .pds-padding-sm {
@@ -1188,7 +1189,7 @@ pds-box {
 }
 
 .pds-padding-xxl {
-  padding: var(--pine-dimension-xxl);
+  padding: var(--pine-dimension-2xl);
 }
 
 .pds-box-display-flex {

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

@@ -3,11 +3,27 @@
   --color-border-disabled: transparent;
   --color-border-focus: transparent;
   --color-border-hover: transparent;
+  --button-loader-color: var(--color-text-default);
   display: inline-flex;
   vertical-align: middle;
 }
 
+:host([full-width=true]) {
+  display: flex;
+  width: 100%;
+}
+:host([full-width=true]) button {
+  justify-content: center;
+  width: 100%;
+}
+
+:host([loading=true]) {
+  cursor: wait;
+  pointer-events: none;
+}
+
 .pds-button {
+  --pds-loader-color: var(--color-text-default);
   align-items: center;
   background-color: var(--color-background-default);
   border: var(--pine-border);
@@ -52,6 +68,7 @@
   --color-text-default: var(--pine-color-text-primary);
   --color-text-disabled: var(--pine-color-text-primary-disabled);
   --color-outline: var(--pine-color-focus-ring);
+  --button-loader-color: var(--pine-color-text-primary);
 }
 
 .pds-button--accent {
@@ -63,6 +80,7 @@
   --color-text-default: var(--pine-color-text-primary);
   --color-text-disabled: var(--pine-color-text-accent-disabled);
   --color-outline: var(--pine-color-focus-ring);
+  --button-loader-color: var(--pine-color-text-primary);
 }
 
 .pds-button--destructive {
@@ -74,6 +92,7 @@
   --color-text-default: var(--pine-color-text-primary);
   --color-text-disabled: var(--pine-color-text-danger-disabled);
   --color-outline: var(--pine-color-focus-ring-danger);
+  --button-loader-color: var(--pine-color-text-primary);
 }
 .pds-button--destructive:focus-visible {
   --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-danger);
@@ -83,9 +102,9 @@
 
 .pds-button--secondary,
 .pds-button--disclosure {
-  --color-background-default: transparent;
-  --color-background-hover: transparent;
-  --color-background-disabled: transparent;
+  --color-background-default: var(--pine-color-secondary);
+  --color-background-hover: var(--pine-color-secondary-hover);
+  --color-background-disabled: var(--pine-color-secondary-disabled);
   --color-border-disabled: var(--pine-color-border-disabled);
   --color-border-focus: var(--pine-color-border);
   --color-border-hover: var(--pine-color-border-hover);
@@ -93,6 +112,7 @@
   --color-text-default: var(--pine-color-text-secondary);
   --color-text-disabled: var(--pine-color-text-secondary-disabled);
   --color-outline: var(--pine-color-focus-ring);
+  --button-loader-color: var(--pine-color-text-secondary);
 }
 .pds-button--secondary:hover,
 .pds-button--disclosure:hover {
@@ -109,9 +129,42 @@
   --color-background-hover: transparent;
   --color-background-disabled: transparent;
   --color-text-default: inherit;
+  --button-loader-color: inherit;
   border-width: var(--pine-dimension-none);
   margin: var(--pine-dimension-none);
   min-height: auto;
   padding: var(--pine-dimension-none);
   width: inherit;
+}
+
+.pds-button__content {
+  align-items: center;
+  display: inline-flex;
+  position: relative;
+}
+
+.pds-button__text {
+  display: inline-flex;
+}
+
+.pds-button__text--hidden,
+.pds-button__icon--hidden {
+  opacity: 0;
+}
+
+.pds-button__loader {
+  height: var(--pine-dimension-250);
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--pine-dimension-250);
+}
+
+.pds-button--loading {
+  cursor: wait;
+  pointer-events: none;
+}
+.pds-button--loading .pds-button__loader pds-loader {
+  --loader-color: var(--button-loader-color);
 }

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

@@ -9,6 +9,10 @@ import { caretDown } from "@pine-ds/icons/icons";
 export class PdsButton {
     constructor() {
         this.handleClick = (ev) => {
+            if (this.loading) {
+                ev.preventDefault();
+                return;
+            }
             if (this.type != 'button') {
                 // If button clicked IS NOT associated with a form
                 if (hasShadowDom(this.el)) {
@@ -28,7 +32,9 @@ export class PdsButton {
         };
         this.componentId = undefined;
         this.disabled = false;
+        this.fullWidth = false;
         this.icon = null;
+        this.loading = false;
         this.name = undefined;
         this.value = undefined;
         this.type = 'button';
@@ -39,10 +45,16 @@ export class PdsButton {
         if (this.variant) {
             classNames.push('pds-button--' + this.variant);
         }
-        return classNames.join('  ');
+        if (this.loading) {
+            classNames.push('pds-button--loading');
+        }
+        return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '09f73346a0de854613bb43e81a9099c2e3783ec0', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { key: 'e02d07f103692dfdf0f40c4ef0659674d92b701a', class: this.classNames(), disabled: this.disabled, name: this.name, part: "button", type: this.type, value: this.value }, this.icon && this.variant !== 'disclosure' && h("pds-icon", { key: '642e6890c4d6cdbbe129af1ef3532fcd5c4a7925', name: this.icon, part: "icon" }), h("slot", { key: '58e95d868055a2723657a757a3c49cbb7989d912' }), this.variant === 'disclosure' && h("pds-icon", { key: '81d4456cb62d77056f93e60091215347ac743134', icon: caretDown, part: "caret" }))));
+        return (h(Host, { key: '6b9f3c286fe8e74703d482df6ae49e770a26d3f4', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { key: 'ba8f5ce2e101875de773d4967dc7e4e61e0d6e1b', "aria-busy": this.loading ? 'true' : null, "aria-live": this.loading ? 'polite' : null, class: this.classNames(), disabled: this.disabled, name: this.name, part: "button", type: this.type, value: this.value }, h("div", { key: 'fdb0c43a4688a271ac5f4c261c12891a1b798e78', class: "pds-button__content" }, this.icon && this.variant !== 'disclosure' &&
+            h("pds-icon", { key: '37e212a7f08f0734cc53644fd776667c70aa7fc5', class: this.loading ? 'pds-button__icon--hidden' : '', name: this.icon, part: "icon" }), h("span", { key: 'a7969b2c2cd18ab615d5070428050d513bb659b8', class: `pds-button__text ${this.loading ? 'pds-button__text--hidden' : ''}` }, h("slot", { key: 'a0d2a610c2b4dfc2d5fdf1acb715b002a1927aa6' })), this.loading &&
+            h("span", { key: 'f889c60c94baf9c8c73b31de76482e09515c2cf0', class: "pds-button__loader" }, h("pds-loader", { key: '372ff4bc2f3dd3a75015d341f41689b07bd237e0', "is-loading": true, size: "var(--pine-font-size-body-2xl)", variant: "spinner" }, "Loading...")), this.variant === 'disclosure' &&
+            h("pds-icon", { key: 'd0e0f35a0b44f69138bf9a78989cf1a5bbdec135', class: this.loading ? 'pds-button__icon--hidden' : '', icon: caretDown, part: "caret" })))));
     }
     static get is() { return "pds-button"; }
     static get encapsulation() { return "shadow"; }
@@ -96,6 +108,27 @@ export class PdsButton {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines if the button should take up the full width of its container."
+                },
+                "attribute": "full-width",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "icon": {
                 "type": "string",
                 "mutable": false,
@@ -117,6 +150,27 @@ export class PdsButton {
                 "reflect": false,
                 "defaultValue": "null"
             },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines if the button is in a loading state.\nWhen true, displays a loader and hides the button text."
+                },
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "name": {
                 "type": "string",
                 "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"pds-button.js","sourceRoot":"","sources":["../../../src/components/pds-button/pds-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD;;;;EAIE;AAOF,MAAM,OAAO,SAAS;;QA6CZ,gBAAW,GAAG,CAAC,EAAS,EAAE,EAAE;YAClC,IAAI,IAAI,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC;gBAC1B,kDAAkD;gBAClD,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;oBAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;oBACpC,IAAI,IAAI,EAAE,CAAC;wBACT,EAAE,CAAC,cAAc,EAAE,CAAA;wBAEnB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;wBACnD,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;wBAC3B,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;wBACjC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAA;wBAC5B,UAAU,CAAC,KAAK,EAAE,CAAA;wBAClB,UAAU,CAAC,MAAM,EAAE,CAAA;oBACrB,CAAC;gBACH,CAAC;YACH,CAAC;YACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACzB,CAAC,CAAA;;wBAnDmB,KAAK;oBAOD,IAAI;;;oBAgBmB,QAAQ;uBAM2C,SAAS;;IAwBnG,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,YAAY,CAAC,CAAC;QAElC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QACjD,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,sEACY,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAC5C,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YAErB,+DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK;gBAEhB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,MAAM,GAAY;gBACjG,8DAAQ;gBACP,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,iEAAU,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,GAAY,CAC9E,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - Exposes the button element for styling.\n * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.\n * @part icon - Exposes the icon component for styling.\n*/\n\n@Component({\n  tag: 'pds-button',\n  styleUrls: ['pds-button.scss'],\n  shadow: true,\n})\nexport class PdsButton {\n  @Element() el: HTMLPdsButtonElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines the button's disabled state.\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays an icon before the text when\n   * the icon string matches an icon name.\n   * @defaultValue null\n   */\n  @Prop() icon?: string = null;\n\n  /**\n   * Provides the button with a submittable name.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Provides button with a submittable value\n   */\n  @Prop() value?: string;\n\n  /**\n   * Provides button with a type.\n   * @defaultValue button\n   */\n  @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Sets the style variant of the button.\n   * @defaultValue primary\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n  @Event() pdsClick: EventEmitter;\n\n  private handleClick = (ev: Event) => {\n    if (this.type != 'button') {\n      // If button clicked IS NOT associated with a form\n      if (hasShadowDom(this.el)) {\n        const form = this.el.closest('form')\n        if (form) {\n          ev.preventDefault()\n\n          const fakeButton = document.createElement('button')\n          fakeButton.type = this.type\n          fakeButton.style.display = 'none'\n          form.appendChild(fakeButton)\n          fakeButton.click()\n          fakeButton.remove()\n        }\n      }\n    }\n    this.pdsClick.emit(ev);\n  }\n\n  private classNames() {\n    const classNames = ['pds-button'];\n\n    if (this.variant) {\n      classNames.push('pds-button--' + this.variant);\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        id={this.componentId}\n        onClick={this.handleClick}\n        variant={this.variant}\n      >\n        <button\n          class={this.classNames()}\n          disabled={this.disabled}\n          name={this.name}\n          part=\"button\"\n          type={this.type}\n          value={this.value}\n        >\n          {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n          <slot />\n          {this.variant === 'disclosure' && <pds-icon icon={caretDown} part=\"caret\"></pds-icon>}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-button.js","sourceRoot":"","sources":["../../../src/components/pds-button/pds-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - Exposes the button element for styling.\n * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.\n * @part icon - Exposes the icon component for styling.\n*/\n\n@Component({\n  tag: 'pds-button',\n  styleUrls: ['pds-button.scss'],\n  shadow: true,\n})\nexport class PdsButton {\n  @Element() el: HTMLPdsButtonElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines the button's disabled state.\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Determines if the button should take up the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth? = false;\n\n  /**\n   * Displays an icon before the text when\n   * the icon string matches an icon name.\n   * @defaultValue null\n   */\n  @Prop() icon?: string = null;\n\n  /**\n   * Determines if the button is in a loading state.\n   * When true, displays a loader and hides the button text.\n   * @defaultValue false\n   */\n  @Prop() loading? = false;\n\n  /**\n   * Provides the button with a submittable name.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Provides button with a submittable value\n   */\n  @Prop() value?: string;\n\n  /**\n   * Provides button with a type.\n   * @defaultValue button\n   */\n  @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Sets the style variant of the button.\n   * @defaultValue primary\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n  @Event() pdsClick: EventEmitter;\n\n  private handleClick = (ev: Event) => {\n    if (this.loading) {\n      ev.preventDefault();\n      return;\n    }\n\n    if (this.type != 'button') {\n      // If button clicked IS NOT associated with a form\n      if (hasShadowDom(this.el)) {\n        const form = this.el.closest('form')\n        if (form) {\n          ev.preventDefault()\n\n          const fakeButton = document.createElement('button')\n          fakeButton.type = this.type\n          fakeButton.style.display = 'none'\n          form.appendChild(fakeButton)\n          fakeButton.click()\n          fakeButton.remove()\n        }\n      }\n    }\n    this.pdsClick.emit(ev);\n  }\n\n  private classNames() {\n    const classNames = ['pds-button'];\n\n    if (this.variant) {\n      classNames.push('pds-button--' + this.variant);\n    }\n\n    if (this.loading) {\n      classNames.push('pds-button--loading');\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        id={this.componentId}\n        onClick={this.handleClick}\n        variant={this.variant}\n      >\n        <button\n          aria-busy={this.loading ? 'true' : null}\n          aria-live={this.loading ? 'polite' : null}\n          class={this.classNames()}\n          disabled={this.disabled}\n          name={this.name}\n          part=\"button\"\n          type={this.type}\n          value={this.value}\n        >\n          <div class=\"pds-button__content\">\n            {this.icon && this.variant !== 'disclosure' &&\n              <pds-icon\n                class={this.loading ? 'pds-button__icon--hidden' : ''}\n                name={this.icon}\n                part=\"icon\"\n              ></pds-icon>\n            }\n\n            <span class={`pds-button__text ${this.loading ? 'pds-button__text--hidden' : ''}`}>\n              <slot />\n            </span>\n\n            {this.loading &&\n              <span class=\"pds-button__loader\">\n                <pds-loader\n                  is-loading={true}\n                  size=\"var(--pine-font-size-body-2xl)\"\n                  variant=\"spinner\"\n                >\n                  Loading...\n                </pds-loader>\n              </span>\n            }\n\n            {this.variant === 'disclosure' &&\n              <pds-icon\n                class={this.loading ? 'pds-button__icon--hidden' : ''}\n                icon={caretDown}\n                part=\"caret\"\n              ></pds-icon>\n            }\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -19,7 +19,9 @@ const BaseTemplate = (args) => html`
   <pds-button
     component-id=${args.componentId}
     disabled=${args.disabled}
+    full-width=${args.fullWidth}
     icon=${args.icon}
+    loading=${args.loading}
     name=${args.name}
     type=${args.type}
     value=${args.value}
@@ -30,6 +32,8 @@ const BaseTemplate = (args) => html`
 export const Accent = BaseTemplate.bind();
 Accent.args = {
   disabled: false,
+  fullWidth: false,
+  loading: false,
   slot: 'Accent',
   type: 'button',
   variant: 'accent',
@@ -38,6 +42,8 @@ Accent.args = {
 export const Destructive = BaseTemplate.bind({});
 Destructive.args = {
   disabled: false,
+  fullWidth: false,
+  loading: false,
   slot: 'Destructive',
   type: 'button',
   variant: 'destructive',
@@ -46,6 +52,8 @@ Destructive.args = {
 export const Disclosure = BaseTemplate.bind({});
 Disclosure.args = {
   disabled: false,
+  fullWidth: false,
+  loading: false,
   slot: 'Disclosure',
   type: 'button',
   variant: 'disclosure'
@@ -56,9 +64,21 @@ Disclosure.parameters = {
   controls: { exclude: 'icon' }
 }
 
+export const FullWidth = BaseTemplate.bind({});
+FullWidth.args = {
+  disabled: false,
+  fullWidth: true,
+  loading: false,
+  slot: 'Full Width',
+  type: 'button',
+  variant: 'primary'
+}
+
 export const Primary = BaseTemplate.bind({});
 Primary.args = {
   disabled: false,
+  fullWidth: false,
+  loading: false,
   slot: 'Primary',
   type: 'button',
   variant: 'primary'
@@ -67,7 +87,19 @@ Primary.args = {
 export const Secondary = BaseTemplate.bind({});
 Secondary.args = {
   disabled: false,
+  fullWidth: false,
+  loading: false,
   slot: 'Secondary',
+  type: 'button',
   variant: 'secondary',
+}
+
+export const Loading = BaseTemplate.bind({});
+Loading.args = {
+  disabled: false,
+  fullWidth: false,
+  loading: true,
+  slot: 'Loading',
   type: 'button',
+  variant: 'primary',
 }

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

@@ -50,16 +50,18 @@
 
 input {
   appearance: none;
-  background-color: var(--pine-color-secondary);
+  background: var(--pine-color-background-container);
   border: var(--pine-border);
   border-radius: var(--pine-dimension-2xs);
+  flex: none;
   height: var(--pine-dimension-sm);
   margin: 0;
+  margin-block-start: var(--pine-dimension-025);
   position: relative;
   width: var(--pine-dimension-sm);
 }
 input:hover {
-  background: var(--pine-color-secondary-hover);
+  background: var(--pine-color-background-container-hover);
   border: var(--pine-border-hover);
 }
 input:checked {
@@ -107,7 +109,8 @@ input:focus-visible {
 }
 
 label {
-  margin-inline-start: 10px;
+  display: flex;
+  gap: var(--pine-dimension-xs);
 }
 
 .visually-hidden {
@@ -126,7 +129,7 @@ label {
 .pds-checkbox__message {
   color: var(--pine-color-text-message);
   margin-block-start: 6px;
-  margin-inline-start: 26px;
+  margin-inline-start: var(--pine-dimension-md);
   width: 100%;
 }