@pine-ds/core 2.16.1 → 2.16.3

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);
@@ -16,10 +32,8 @@
   color: var(--color-text-default);
   cursor: pointer;
   display: flex;
-  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);
+  font: var(--pine-typography-body-brand-label);
+  letter-spacing: var(--pine-letter-spacing);
   min-height: 40px;
   padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
 }
@@ -54,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 {
@@ -65,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 {
@@ -76,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);
@@ -85,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);
@@ -95,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 {
@@ -111,9 +129,38 @@
   --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--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

@@ -96,7 +96,6 @@ input:disabled:checked::after {
   border-color: var(--pine-color-grey-300);
 }
 input:disabled + label {
-  color: var(--pine-color-text-disabled);
   cursor: not-allowed;
 }
 input:disabled ~ .pds-checkbox__message {
@@ -108,7 +107,6 @@ input:focus-visible {
 }
 
 label {
-  font-weight: var(--pine-font-weight-body-medium);
   margin-inline-start: 10px;
 }
 

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

@@ -51,20 +51,20 @@ export class PdsCheckbox {
         return classNames.join('  ');
     }
     render() {
-        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)));
+        return (h(Host, { key: '153bd77abfb36756b96e0a4fe9f992615e742987', class: this.classNames() }, h("input", { key: '089cddd89bc9244a5b17776d444c9e8183fb20fc', 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: '427fd2e9b065146eb1f8707da9bc21baddd9fe7e', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
+            h("div", { key: '7f6fa0aa9fc730c58da1f686f94c6b2536bd1d80', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'e117555fd3b179f04ff969e2c04280e58adb228f', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '442d8e53735ce15564c14a77eaf52939aa0ad895', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-checkbox"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pds-checkbox.scss"]
+            "$": ["../../global/styles/utils/label.scss", "pds-checkbox.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["pds-checkbox.css"]
+            "$": ["../../global/styles/utils/label.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: ['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: ['../../global/styles/utils/label.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"]}

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

@@ -31,7 +31,7 @@ export class PdsChip {
         return chipContent;
     }
     render() {
-        return (h(Host, { key: '256ee05959d6561b0a2f208bad11ccc6b3b7b8ef', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { key: 'eb0593d00e34e0530af49bef45b211658c3d1842', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: 'ace8b0a28a1b2f731051fb645cb99f7f468ce9b8', icon: remove, size: "12px" })))));
+        return (h(Host, { key: '91f7d9a87538c4b30b16462061a61fb92812732f', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { key: 'bee8696d3644f33d8630a4ab93ff83c8b1d7ee78', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: '5a375bf7507f7ac674a6f3c27048e2c218064bb4', icon: remove, size: "12px" })))));
     }
     static get is() { return "pds-chip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,7 +36,7 @@ export class PdsCopytext {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '5efcd7642021a5049762c865be34bc1b649a40f9', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '27b193cc3d52a599d33cba7b6cdb5b4c9d9fb234', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '0dbefb874870ebe4f9b2d261855d5f60fd155df8' }, this.value), h("pds-icon", { key: 'f5ad27e0bc677ba2a7f62c971ee9402bb268b3f4', icon: copyIcon, size: "16px" }))));
+        return (h(Host, { key: '46c38faeba9b70d2e510a4b6af08866577936478', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '6e28c11a9a7a57f4c256b0283b64ec655a897f65', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '6818451171f85fd6ad63f07c69871082d3fcba4e' }, this.value), h("pds-icon", { key: '05e683d7b28575d924d6af482e6ce4c3cfee3f05', icon: copyIcon, size: "16px" }))));
     }
     static get is() { return "pds-copytext"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class PdsDivider {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '655b579ae9137c8a6c663bc57928a0825d054d2d', id: this.componentId }, h("hr", { key: 'dcbc46f0b0bfa8553b577684775ab631022f73a0', class: this.classNames() })));
+        return (h(Host, { key: 'ee48ee45e0463abbd3cb7aa686f8d86928830ccb', id: this.componentId }, h("hr", { key: '4af739f85e502a7d9bff1b3581c283cb6ee53a0e', class: this.classNames() })));
     }
     static get is() { return "pds-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,9 +11,9 @@ export class PdsImage {
         this.width = undefined;
     }
     render() {
-        return (h(Host, { key: '784f2478acc28f043613c4c8fa67b5bef85820b1', class: {
+        return (h(Host, { key: '2b5893c36517ee6e30c12a141f19b3f13845db97', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: '766a8230a6ea0ae45746fae832206785f963d215', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+            }, id: this.componentId }, h("img", { key: '965043cab5ea5c62c52951ec90018bced5bb46e8', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
     }
     static get is() { return "pds-image"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,23 +14,20 @@
   flex-direction: column;
 }
 
-label {
-  color: var(--pine-color-text-label);
-  font-weight: var(--pine-font-weight-medium);
-}
-
-input {
+.pds-input__field {
   border: 1px solid var(--pine-color-border);
   border-radius: 10px;
   color: var(--pine-color-text-active);
-  font-size: var(--pine-font-size);
-  font-weight: var(--pine-font-weight-regular);
-  line-height: var(--pine-line-height-body);
+  font: var(--pine-typography-body);
+  letter-spacing: var(--pine-letter-spacing);
   padding: var(--pine-dimension-xs) var(--pine-dimension-sm);
   /* stylelint-disable */
   /* stylelint-enable */
 }
-input:disabled {
+.pds-input__field:hover:not(:disabled, .is-invalid) {
+  border: var(--pine-border-hover);
+}
+.pds-input__field:disabled {
   background-color: var(--pine-color-background-container-disabled);
   border-color: var(--pine-color-border-disabled);
   color: var(--pine-color-text-disabled);
@@ -38,45 +35,44 @@ input:disabled {
   /* stylelint-disable */
   /* stylelint-enable */
 }
-input:disabled::-webkit-input-placeholder {
+.pds-input__field:disabled::-webkit-input-placeholder {
   color: var(--pine-color-text-placeholder-disabled);
 }
-input:disabled::-moz-placeholder {
+.pds-input__field:disabled::-moz-placeholder {
   color: var(--pine-color-text-placeholder-disabled);
 }
-input:disabled::-moz-placeholder {
+.pds-input__field:disabled::-moz-placeholder {
   color: var(--pine-color-text-placeholder-disabled);
 }
-input:disabled:-ms-input-placeholder {
+.pds-input__field:disabled:-ms-input-placeholder {
   color: var(--pine-color-text-placeholder-disabled);
 }
-input:hover {
+.pds-input__field:hover {
   border-color: var(--pine-color-border-hover);
 }
-input:focus-visible {
+.pds-input__field:focus-visible {
   border-color: var(--pine-color-border-active);
   box-shadow: var(--box-shadow-focus);
   outline: none;
 }
-input::-webkit-input-placeholder {
+.pds-input__field::-webkit-input-placeholder {
   color: var(--pine-color-text-placeholder);
 }
-input::-moz-placeholder {
+.pds-input__field::-moz-placeholder {
   color: var(--pine-color-text-placeholder);
 }
-input::-moz-placeholder {
+.pds-input__field::-moz-placeholder {
   color: var(--pine-color-text-placeholder);
 }
-input:-ms-input-placeholder {
+.pds-input__field:-ms-input-placeholder {
   color: var(--pine-color-text-placeholder);
 }
-input:has(~ .pds-input__error-message) {
+.pds-input__field.is-invalid {
   background-color: var(--pine-input-color-background-danger);
   border-color: var(--pine-color-border-danger);
 }
-input:has(~ .pds-input__error-message):focus-visible {
+.pds-input__field.is-invalid:focus-visible {
   box-shadow: var(--box-shadow-focus-error);
-  outline: none;
 }
 
 .pds-input__error-message,

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

@@ -107,10 +107,17 @@ export class PdsInput {
     componentDidLoad() {
         this.debounceChanged();
     }
+    inputClassNames() {
+        const classNames = ['pds-input__field'];
+        if (this.invalid && this.invalid === true) {
+            classNames.push('is-invalid');
+        }
+        return classNames.join('  ');
+    }
     render() {
-        return (h(Host, { key: '4247c9ed871a2f5e39fea4c222367341eda18e32', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: 'b49fb30682b34b2c20ed6b0959d66e18050088d0', class: "pds-input" }, h("label", { key: 'ac028db52deca16edd0663ccccdc01d3651a299a', htmlFor: this.componentId }, this.label), h("input", Object.assign({ key: 'cf478f28743397013c0964aa3f6232de2a319f7a', class: "pds-input__field", ref: (input) => this.nativeInput = input, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.helperMessage &&
-            h("p", { key: '78180c0527fc6ef81d9e915898333a9e09e892e4', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("p", { key: '9512deaecd57644da843557cd07ac8880cde424f', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '38c36403181b41c06f16e737f088e58199f07618', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: 'a823b0086b4c4accc0788813a41b19f8b6ff32e1', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null }, h("div", { key: 'e9b04aaa8e50c987e6010017fbb82bc7b6774d34', class: "pds-input" }, h("label", { key: 'c53aca73ab264954cd91e206a35c699833d0bb9b', htmlFor: this.componentId }, this.label), h("input", Object.assign({ key: 'ca86d6e35e71d9758bef9ddb277581ac5e337099', class: this.inputClassNames(), ref: (input) => this.nativeInput = input, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.helperMessage &&
+            h("p", { key: 'c7a845d961d149cba34661b487435bcc7a2d3b4f', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("p", { key: '0cb7785fd26b2573e04fdede1e84c4daac9c9052', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'd8636ef0e49f4a32ab9ad91d5e51d4a1ca3fe4de', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-input"; }
     static get encapsulation() { return "shadow"; }
@@ -345,7 +352,7 @@ export class PdsInput {
                             "name": "defaultValue",
                             "text": "\"text\""
                         }],
-                    "text": "Determines the type of control that will be displayed\n`'email'`, `'number'`, `'password'`, `'tel'`, `'text'`"
+                    "text": "Determines the type of control that will be displayed\n`'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`"
                 },
                 "attribute": "type",
                 "reflect": false,