@pine-ds/core 2.14.0 → 2.15.0

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

@@ -2,15 +2,6 @@ pds-box {
   --border-width-default: var(--pine-border-width-thin);
   --color-background-box: inherit;
   --color-border-box: inherit;
-  --sizing-min-height-box: none;
-  --sizing-min-width-box: none;
-  --spacing-gap-xxs: var(--pine-spacing-050);
-  --spacing-gap-xs: var(--pine-spacing-100);
-  --spacing-gap-sm: var(--pine-spacing-200);
-  --spacing-gap-md: var(--pine-spacing-300);
-  --spacing-gap-lg: var(--pine-spacing-450);
-  --spacing-gap-xl: var(--pine-spacing-600);
-  --spacing-gap-xxl: var(--pine-spacing-800);
   display: block;
 }
 
@@ -18,8 +9,8 @@ pds-box {
   background-color: var(--color-background-box);
   box-sizing: border-box;
   display: inline-flex;
-  min-height: var(--sizing-min-height-box);
-  min-width: var(--sizing-min-width-box);
+  min-height: var(--pine-dimension-none);
+  min-width: var(--pine-dimension-none);
 }
 .pds-row > [class*=pds-box] {
   position: relative;
@@ -1024,7 +1015,7 @@ pds-box {
 }
 
 .pds-box--auto {
-  flex: 0 0 var(--sizing-min-width-box, fit-content);
+  flex: 0 0 var(--pine-dimension-none, fit-content);
   min-width: auto;
   width: auto;
 }
@@ -1074,19 +1065,19 @@ pds-box {
 }
 
 .pds-border-radius-xs {
-  border-radius: var(--pine-border-radius-050);
+  border-radius: var(--pine-dimension-050);
 }
 
 .pds-border-radius-sm {
-  border-radius: var(--pine-border-radius-075);
+  border-radius: var(--pine-dimension-075);
 }
 
 .pds-border-radius-md {
-  border-radius: var(--pine-border-radius-100);
+  border-radius: var(--pine-dimension-100);
 }
 
 .pds-border-radius-lg {
-  border-radius: var(--pine-border-radius-200);
+  border-radius: var(--pine-dimension-200);
 }
 
 .pds-border-radius-circle {
@@ -1142,31 +1133,31 @@ pds-box {
 }
 
 .pds-box-gap-xxs {
-  gap: var(--spacing-gap-xxs);
+  gap: var(--pine-dimension-2xs);
 }
 
 .pds-box-gap-xs {
-  gap: var(--spacing-gap-xs);
+  gap: var(--pine-dimension-xs);
 }
 
 .pds-box-gap-sm {
-  gap: var(--spacing-gap-sm);
+  gap: var(--pine-dimension-sm);
 }
 
 .pds-box-gap-md {
-  gap: var(--spacing-gap-md);
+  gap: var(--pine-dimension-md);
 }
 
 .pds-box-gap-lg {
-  gap: var(--spacing-gap-lg);
+  gap: var(--pine-dimension-lg);
 }
 
 .pds-box-gap-xl {
-  gap: var(--spacing-gap-xl);
+  gap: var(--pine-dimension-xl);
 }
 
 .pds-box-gap-xxl {
-  gap: var(--spacing-gap-xxl);
+  gap: var(--pine-dimension-xxl);
 }
 
 .pds-padding-none {
@@ -1174,31 +1165,31 @@ pds-box {
 }
 
 .pds-padding-xxs {
-  padding: var(--spacing-gap-xxs);
+  padding: var(--pine-dimension-2xs);
 }
 
 .pds-padding-xs {
-  padding: var(--spacing-gap-xxs);
+  padding: var(--pine-dimension-2xs);
 }
 
 .pds-padding-sm {
-  padding: var(--spacing-gap-sm);
+  padding: var(--pine-dimension-sm);
 }
 
 .pds-padding-md {
-  padding: var(--spacing-gap-md);
+  padding: var(--pine-dimension-md);
 }
 
 .pds-padding-lg {
-  padding: var(--spacing-gap-lg);
+  padding: var(--pine-dimension-lg);
 }
 
 .pds-padding-xl {
-  padding: var(--spacing-gap-xl);
+  padding: var(--pine-dimension-xl);
 }
 
 .pds-padding-xxl {
-  padding: var(--spacing-gap-xxl);
+  padding: var(--pine-dimension-xxl);
 }
 
 .pds-box-display-flex {

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

@@ -1,44 +1,8 @@
 :host {
-  --border-radius-default: var(--pine-border-radius-round);
-  --border-width-default: var(--pine-border-width-thin);
-  --border-width-unstyled: var(--pine-border-radius-0);
   --color-border-default: transparent;
   --color-border-disabled: transparent;
   --color-border-focus: transparent;
   --color-border-hover: transparent;
-  --color-background-primary-default: var(--pine-color-grey-900);
-  --color-background-primary-disabled: var(--pine-color-grey-100);
-  --color-background-primary-hover: var(--pine-color-grey-950);
-  --color-text-primary-default: var(--pine-color-white);
-  --color-text-primary-disabled: var(--pine-color-grey-400);
-  --color-outline-primary: var(--pine-color-purple-300);
-  --color-background-secondary-hover: var(--pine-color-grey-050);
-  --color-border-secondary-default: var(--pine-color-grey-400);
-  --color-border-secondary-disabled: var(--pine-color-grey-300);
-  --color-border-secondary-focus: var(--pine-color-grey-300);
-  --color-border-secondary-hover: var(--pine-color-grey-500);
-  --color-text-secondary-default: var(--pine-color-grey-800);
-  --color-text-secondary-disabled: var(--pine-color-grey-400);
-  --color-outline-secondary: var(--pine-color-purple-300);
-  --color-background-accent-default: var(--pine-color-purple-500);
-  --color-background-accent-disabled: var(--pine-color-purple-100);
-  --color-background-accent-hover: var(--pine-color-purple-600);
-  --color-text-accent-default: var(--pine-color-white);
-  --color-text-accent-disabled: var(--pine-color-purple-300);
-  --color-outline-accent: var(--pine-color-purple-300);
-  --color-background-destructive-default: var(--pine-color-red-500);
-  --color-background-destructive-disabled: var(--pine-color-red-100);
-  --color-background-destructive-hover: var(--pine-color-red-600);
-  --color-text-destructive-default: var(--pine-color-white);
-  --color-text-destructive-disabled: var(--pine-color-red-300);
-  --color-outline-destructive: var(--pine-color-red-300);
-  --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0);
-  --spacing-disclosure-margin-inline-start: var(--pine-spacing-100);
-  --spacing-icon-margin-inline-end: var(--pine-spacing-100);
-  --spacing-padding-block: var(--pine-spacing-100);
-  --spacing-padding-inline: var(--pine-spacing-200);
-  --spacing-unstyled: var(--pine-spacing-0);
-  --typography-default: var(--pine-font-weight-body-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-greet);
   display: inline-flex;
   vertical-align: middle;
 }
@@ -46,25 +10,29 @@
 .pds-button {
   align-items: center;
   background-color: var(--color-background-default);
-  border: var(--border-width-default) solid var(--color-border-default);
-  border-radius: var(--pine-border-radius-circle);
+  border: var(--pine-border);
+  border-color: var(--color-border-default);
+  border-radius: var(--pine-border-radius-full);
   color: var(--color-text-default);
   display: flex;
-  font: var(--typography-default);
+  font-family: var(--pine-font-family-greet);
+  font-size: var(--pine-font-size-body-md);
+  font-weight: var(--pine-font-weight-medium);
+  line-height: var(--pine-line-height-body);
   min-height: 40px;
-  padding: var(--spacing-padding-block) var(--spacing-padding-inline);
+  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
 }
 .pds-button pds-icon {
   color: currentColor;
   fill: currentColor;
-  margin-inline-end: var(--spacing-icon-margin-inline-end);
+  margin-inline-end: var(--pine-dimension-xs);
 }
 .pds-button:hover {
   background-color: var(--color-background-hover);
   border-color: var(--color-border-hover);
 }
 .pds-button:focus-visible {
-  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
+  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);
   border-color: var(--color-border-focus);
   box-shadow: var(--box-shadow-focus);
   outline: none;
@@ -76,33 +44,39 @@
 }
 
 .pds-button--primary {
-  --color-background-default: var(--color-background-primary-default);
-  --color-background-hover: var(--color-background-primary-hover);
-  --color-background-disabled: var(--color-background-primary-disabled);
-  --color-text-default: var(--color-text-primary-default);
-  --color-text-disabled: var(--color-text-primary-disabled);
-  --color-outline: var(--color-outline-primary);
+  --color-background-default: var(--pine-color-primary);
+  --color-background-hover: var(--pine-color-primary-hover);
+  --color-background-disabled: var(--pine-color-primary-disabled);
+  --color-border-default: var(--pine-color-primary);
+  --color-border-hover: var(--pine-color-primary-hover);
+  --color-text-default: var(--pine-color-text-primary);
+  --color-text-disabled: var(--pine-color-text-primary-disabled);
+  --color-outline: var(--pine-color-focus-ring);
 }
 
 .pds-button--accent {
-  --color-background-default: var(--color-background-accent-default);
-  --color-background-hover: var(--color-background-accent-hover);
-  --color-background-disabled: var(--color-background-accent-disabled);
-  --color-text-default: var(--color-text-accent-default);
-  --color-text-disabled: var(--color-text-accent-disabled);
-  --color-outline: var(--color-outline-accent);
+  --color-background-default: var(--pine-color-accent);
+  --color-background-hover: var(--pine-color-accent-hover);
+  --color-background-disabled: var(--pine-color-accent-disabled);
+  --color-border-default: var(--pine-color-accent);
+  --color-border-hover: var(--pine-color-accent-hover);
+  --color-text-default: var(--pine-color-text-primary);
+  --color-text-disabled: var(--pine-color-text-accent-disabled);
+  --color-outline: var(--pine-color-focus-ring);
 }
 
 .pds-button--destructive {
-  --color-background-default: var(--color-background-destructive-default);
-  --color-background-hover: var(--color-background-destructive-hover);
-  --color-background-disabled: var(--color-background-destructive-disabled);
-  --color-text-default: var(--color-text-destructive-default);
-  --color-text-disabled: var(--color-text-destructive-disabled);
-  --color-outline: var(--color-outline-destructive);
+  --color-background-default: var(--pine-color-danger);
+  --color-background-hover: var(--pine-color-danger-hover);
+  --color-background-disabled: var(--pine-color-danger-disabled);
+  --color-border-default: var(--pine-color-danger);
+  --color-border-hover: var(--pine-color-danger-hover);
+  --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);
 }
 .pds-button--destructive:focus-visible {
-  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-background-destructive-default);
+  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-danger);
   box-shadow: var(--box-shadow-focus);
   outline: none;
 }
@@ -112,22 +86,22 @@
   --color-background-default: transparent;
   --color-background-hover: transparent;
   --color-background-disabled: transparent;
-  --color-border-disabled: var(--color-border-secondary-disabled);
-  --color-border-focus: var(--color-border-secondary-focus);
-  --color-border-hover: var(--color-border-secondary-hover);
-  --color-border-default: var(--color-border-secondary-default);
-  --color-text-default: var(--color-text-secondary-default);
-  --color-text-disabled: var(--color-text-secondary-disabled);
-  --color-outline: var(--color-outline-secondary);
+  --color-border-disabled: var(--pine-color-border-disabled);
+  --color-border-focus: var(--pine-color-border);
+  --color-border-hover: var(--pine-color-border-hover);
+  --color-border-default: var(--pine-color-border);
+  --color-text-default: var(--pine-color-text-secondary);
+  --color-text-disabled: var(--pine-color-text-secondary-disabled);
+  --color-outline: var(--pine-color-focus-ring);
 }
 .pds-button--secondary:hover,
 .pds-button--disclosure:hover {
-  background-color: var(--color-background-secondary-hover);
+  background-color: var(--pine-color-secondary-hover);
 }
 
 .pds-button--disclosure pds-icon {
-  margin-inline-end: var(--spacing-disclosure-icon-margin-inline-end);
-  margin-inline-start: var(--spacing-disclosure-margin-inline-start);
+  margin-inline-end: var(--pine-dimension-none);
+  margin-inline-start: var(--pine-dimension-xs);
 }
 
 .pds-button--unstyled {
@@ -135,9 +109,9 @@
   --color-background-hover: transparent;
   --color-background-disabled: transparent;
   --color-text-default: inherit;
-  border: var(--border-width-unstyled);
-  margin: var(--spacing-unstyled);
+  border-width: var(--pine-dimension-none);
+  margin: var(--pine-dimension-none);
   min-height: auto;
-  padding: var(--spacing-unstyled);
+  padding: var(--pine-dimension-none);
   width: inherit;
 }

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

@@ -42,18 +42,18 @@ export class PdsButton {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: 'b559cbbe7cfe3a77b792e3d020fc615123bb3218', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { key: '69b52d61eaabc72e24a9aaf72f7130eb4e7a7197', 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: '4a94a45a0d44f0f54607c09b93672a597d876897', name: this.icon, part: "icon" }), h("slot", { key: '457c672d7662394a8debee6c372e3747d4de383d' }), this.variant === 'disclosure' && h("pds-icon", { key: 'b0247fa8aea5b62158bf60f3f707af110a68d562', icon: caretDown, part: "caret" }))));
+        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" }))));
     }
     static get is() { return "pds-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../global/styles/base.scss", "pds-button.scss"]
+            "$": ["pds-button.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../global/styles/base.css", "pds-button.css"]
+            "$": ["pds-button.css"]
         };
     }
     static get properties() {

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: ['../../global/styles/base.scss', '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":"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"]}

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

@@ -1,36 +1,20 @@
 :host {
-  --border-default: var(--pine-border-interactive-default);
-  --border-hover: var(--pine-border-interactive-hover);
-  --border-radius: var(--pine-border-radius-050);
-  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
-  --box-shadow-focus-invalid: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-200);
-  --color-background: var(--pine-color-white);
-  --color-background-disabled: var(--pine-color-grey-100);
-  --color-background-hover: var(--pine-color-grey-100);
-  --color-background-checked: var(--pine-color-purple-500);
-  --color-background-checked-hover: var(--pine-color-purple-600);
-  --color-border-disabled: var(--pine-color-grey-300);
-  --color-border-icon: var(--pine-color-white);
-  --color-disabled: var(--pine-color-grey-300);
-  --color-invalid: var(--pine-color-red-500);
-  --color-invalid-hover: var(--pine-color-red-600);
-  --color-text-disabled: var(--pine-color-grey-500);
-  --color-text-message: var(--pine-color-grey-700);
-  --sizing-input: var(--pine-font-size-116);
+  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);
+  --box-shadow-focus-invalid: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);
   align-items: center;
   display: flex;
   flex-flow: row wrap;
 }
 
 :host(.is-invalid) input {
-  border-color: var(--color-invalid);
+  border-color: var(--pine-color-border-danger);
 }
 :host(.is-invalid) input:checked {
-  background: var(--color-invalid);
+  background: var(--pine-color-danger);
 }
 :host(.is-invalid) input:checked:hover {
-  background: var(--color-invalid-hover);
-  border-color: var(--color-invalid-hover);
+  background: var(--pine-color-danger-hover);
+  border-color: var(--pine-color-border-danger-hover);
 }
 :host(.is-invalid) input:focus-visible {
   box-shadow: var(--box-shadow-focus-invalid);
@@ -38,19 +22,19 @@
 }
 :host(.is-invalid) label,
 :host(.is-invalid) .pds-checkbox__message--error {
-  color: var(--color-invalid);
+  color: var(--pine-color-text-message-danger);
 }
 
 :host(.is-indeterminate) input {
-  background: var(--color-background-checked);
-  border-color: var(--color-background-checked);
+  background: var(--pine-color-accent);
+  border-color: var(--pine-color-accent);
 }
 :host(.is-indeterminate) input:hover {
-  background: var(--color-background-checked-hover);
-  border-color: var(--color-background-checked-hover);
+  background: var(--pine-color-accent);
+  border-color: var(--pine-color-accent-hover);
 }
 :host(.is-indeterminate) input::after {
-  border: 1px solid var(--color-border-icon);
+  border: 1px solid var(--pine-color-secondary);
   border-bottom: 0;
   border-left: 0;
   border-top: 0;
@@ -66,28 +50,28 @@
 
 input {
   appearance: none;
-  background-color: var(--color-background);
-  border: var(--border-default);
-  border-radius: var(--border-radius);
-  height: var(--sizing-input);
+  background-color: var(--pine-color-secondary);
+  border: var(--pine-border);
+  border-radius: var(--pine-dimension-2xs);
+  height: var(--pine-dimension-sm);
   margin: 0;
   position: relative;
-  width: var(--sizing-input);
+  width: var(--pine-dimension-sm);
 }
 input:hover {
-  background: var(--color-background-hover);
-  border: var(--border-hover);
+  background: var(--pine-color-secondary-hover);
+  border: var(--pine-border-hover);
 }
 input:checked {
-  background: var(--color-background-checked);
-  border-color: var(--color-background-checked);
+  background: var(--pine-color-accent);
+  border-color: var(--pine-color-accent);
 }
 input:checked:hover {
-  background: var(--color-background-checked-hover);
-  border-color: var(--color-background-checked-hover);
+  background: var(--pine-color-accent-hover);
+  border-color: var(--pine-color-accent-hover);
 }
 input:checked::after {
-  border: 1px solid var(--color-border-icon);
+  border: 1px solid var(--pine-color-secondary);
   border-left: 0;
   border-top: 0;
   content: "";
@@ -100,23 +84,23 @@ input:checked::after {
   width: 4px;
 }
 input:disabled {
-  background: var(--color-background-disabled);
-  border-color: var(--color-disabled);
+  background: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
   cursor: not-allowed;
 }
 input:disabled:checked {
-  background: var(--color-disabled);
-  border-color: var(--color-disabled);
+  background: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
 }
 input:disabled:checked::after {
-  border-color: var(--color-border-disabled);
+  border-color: var(--pine-color-grey-300);
 }
 input:disabled + label {
-  color: var(--color-text-disabled);
+  color: var(--pine-color-text-disabled);
   cursor: not-allowed;
 }
 input:disabled ~ .pds-checkbox__message {
-  color: var(--color-text-disabled);
+  color: var(--pine-color-text-disabled);
 }
 input:focus-visible {
   box-shadow: var(--box-shadow-focus);
@@ -142,7 +126,7 @@ label {
 }
 
 .pds-checkbox__message {
-  color: var(--color-text-message);
+  color: var(--pine-color-text-message);
   margin-block-start: 6px;
   margin-inline-start: 26px;
   width: 100%;

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

@@ -51,20 +51,20 @@ export class PdsCheckbox {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '20ec5fff75ed7c8e1fa203377da84533a24b359f', class: this.classNames() }, h("input", { key: '640f30df7addcfb3ec9fc850a32283b5d7e9d096', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }), h(PdsLabel, { key: '8aa6d71f86bba517fd5b697b7a4c91a2002f29ba', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
-            h("div", { key: '3b683e51e76c802e77022e6544b05305e8fbaa2f', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '8da70a6935cf8c419d2f1ffa36ae21a843823b11', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '9fa9b8662cce3319ccff5bc8bce90b364f310d7b', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'a9a36f6b064c3ff184de99514e9dea1f4e59b44d', class: this.classNames() }, h("input", { key: 'ed7adf4890dd6b7f03659eee3586eeab609af114', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }), h(PdsLabel, { key: 'a68de459c7a6aef1cfa507808b996ca6b594c165', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
+            h("div", { key: '34e4b9bc0c8f8e48a5b74e4c2dd695983d640d12', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '8ca0733a88369da4248cb2c98e25d9f7d01d7672', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'f5a97b3612cb3990770367faaeafbbd1d46e48ee', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-checkbox"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../global/styles/base.scss", "pds-checkbox.scss"]
+            "$": ["pds-checkbox.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../global/styles/base.css", "pds-checkbox.css"]
+            "$": ["pds-checkbox.css"]
         };
     }
     static get properties() {

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

@@ -1 +1 @@
-{"version":3,"file":"pds-checkbox.js","sourceRoot":"","sources":["../../../src/components/pds-checkbox/pds-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrls: ['../../global/styles/base.scss', 'pds-checkbox.scss'],\n  shadow: true,\n})\nexport class PdsCheckbox {\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * It determines whether or not the checkbox is disabled.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * String used for helper message below checkbox.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n   */\n  @Prop({ mutable: true }) indeterminate: boolean;\n\n  /**\n   * It determines whether or not the checkbox is invalid.\n   */\n  @Prop() invalid: boolean;\n\n  /**\n   * String used for label text next to checkbox.\n   */\n  @Prop() label: string;\n\n    /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n    @Prop() labelHidden: boolean;\n\n  /**\n   * String used for checkbox `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * It determines whether or not the checkbox is required.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * The value of the checkbox that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Event emitted that contains the `value` and `checked`.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Watch('checked')\n  updateIndeterminate() {\n    this.indeterminate = undefined\n  }\n\n  private handleCheckboxChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.pdsCheckboxChange.emit({\n      checked: target.checked,\n      value: this.value\n    });\n  }\n\n  private handleInput = () => {\n    this.pdsCheckboxInput.emit({\n      checked: this.checked,\n      value: this.value\n    });\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.indeterminate) { classNames.push('is-indeterminate'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <input\n          type=\"checkbox\"\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          id={this.componentId}\n          indeterminate={this.indeterminate}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={this.handleCheckboxChange}\n          onInput={this.handleInput}\n        />\n        <PdsLabel htmlFor={this.componentId} text={this.label} classNames={this.labelHidden ? 'visually-hidden' : ''} />\n        {this.helperMessage &&\n          <div\n            class={'pds-checkbox__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-checkbox__message pds-checkbox__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-checkbox.js","sourceRoot":"","sources":["../../../src/components/pds-checkbox/pds-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrls: ['pds-checkbox.scss'],\n  shadow: true,\n})\nexport class PdsCheckbox {\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * It determines whether or not the checkbox is disabled.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * String used for helper message below checkbox.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n   */\n  @Prop({ mutable: true }) indeterminate: boolean;\n\n  /**\n   * It determines whether or not the checkbox is invalid.\n   */\n  @Prop() invalid: boolean;\n\n  /**\n   * String used for label text next to checkbox.\n   */\n  @Prop() label: string;\n\n    /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n    @Prop() labelHidden: boolean;\n\n  /**\n   * String used for checkbox `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * It determines whether or not the checkbox is required.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * The value of the checkbox that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Event emitted that contains the `value` and `checked`.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Watch('checked')\n  updateIndeterminate() {\n    this.indeterminate = undefined\n  }\n\n  private handleCheckboxChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.pdsCheckboxChange.emit({\n      checked: target.checked,\n      value: this.value\n    });\n  }\n\n  private handleInput = () => {\n    this.pdsCheckboxInput.emit({\n      checked: this.checked,\n      value: this.value\n    });\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.indeterminate) { classNames.push('is-indeterminate'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <input\n          type=\"checkbox\"\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          id={this.componentId}\n          indeterminate={this.indeterminate}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={this.handleCheckboxChange}\n          onInput={this.handleInput}\n        />\n        <PdsLabel htmlFor={this.componentId} text={this.label} classNames={this.labelHidden ? 'visually-hidden' : ''} />\n        {this.helperMessage &&\n          <div\n            class={'pds-checkbox__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-checkbox__message pds-checkbox__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}