@pine-ds/core 2.14.0 → 2.15.0

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

@@ -1,18 +1,47 @@
 import { h, Host } from "@stencil/core";
 import { assignDescription, messageId } from "../../utils/form";
-import { PdsLabel } from "../_internal/pds-label/pds-label";
 import { danger } from "@pine-ds/icons/icons";
+import { debounceEvent } from "../../utils/utils";
+import { inheritAriaAttributes } from "../../utils/attributes";
 export class PdsInput {
     constructor() {
+        this.inheritedAttributes = {};
+        this.isComposing = false;
         this.onInputEvent = (ev) => {
             const input = ev.target;
             if (input) {
                 this.value = input.value || '';
             }
-            this.pdsInput.emit(ev);
+            this.emitInputChange(ev);
+        };
+        this.onChangeEvent = (ev) => {
+            this.emitValueChange(ev);
+        };
+        this.onBlurEvent = (ev) => {
+            this.hasFocus = false;
+            if (this.focusedValue !== this.value) {
+                /**
+                 * Emits the `pdsChange` event when the input value
+                 * is different than the value when the input was focused.
+                 */
+                this.emitValueChange(ev);
+            }
+            this.pdsBlur.emit(ev);
+        };
+        this.onFocusEvent = (ev) => {
+            this.hasFocus = true;
+            this.focusedValue = this.value;
+            this.pdsFocus.emit(ev);
+        };
+        this.onCompositionStart = () => {
+            this.isComposing = true;
+        };
+        this.onCompositionEnd = () => {
+            this.isComposing = false;
         };
         this.autocomplete = undefined;
         this.componentId = undefined;
+        this.debounce = undefined;
         this.disabled = undefined;
         this.errorMessage = undefined;
         this.helperMessage = undefined;
@@ -23,23 +52,76 @@ export class PdsInput {
         this.readonly = undefined;
         this.required = undefined;
         this.type = 'text';
-        this.value = undefined;
+        this.value = '';
+        this.hasFocus = false;
+    }
+    /**
+     * Sets focus on the native `input` in the `pds-input`. Use this method instead of the global
+     * `input.focus()`.
+     */
+    async setFocus() {
+        if (this.nativeInput) {
+            this.nativeInput.focus();
+        }
+    }
+    debounceChanged() {
+        const { pdsInput, debounce, originalPdsInput } = this;
+        /**
+         * If debounce is undefined, we have to manually revert the pdsInput emitter in case
+         * debounce used to be set to a number. Otherwise, the event would stay debounced.
+         */
+        this.pdsInput = debounce === undefined ? originalPdsInput !== null && originalPdsInput !== void 0 ? originalPdsInput : pdsInput : debounceEvent(pdsInput, debounce);
+    }
+    valueChanged() {
+        const nativeInput = this.nativeInput;
+        const value = this.getValue();
+        if (nativeInput && nativeInput.value !== value && !this.isComposing) {
+            nativeInput.value = value;
+        }
+    }
+    getValue() {
+        return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
+    }
+    /**
+     * Emits a pdsChange event
+     */
+    emitValueChange(event) {
+        const { value } = this;
+        const newValue = value == null ? value : value.toString();
+        this.focusedValue = newValue;
+        this.pdsChange.emit({ value: newValue, event });
+    }
+    /**
+     *
+     * Emits a `pdsInput` event
+     */
+    emitInputChange(event) {
+        const { value } = this;
+        // Checks for both null and undefined values
+        const newValue = value == null ? value : value.toString();
+        this.pdsInput.emit({ value: newValue, event });
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+    }
+    componentDidLoad() {
+        this.debounceChanged();
     }
     render() {
-        return (h(Host, { key: '2894ea5f48af1818f28ce05c63ec28ee6dff2f5d', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '92ce53c22ca6eed66e33c1c50c8d0ff0a3b68b4c', class: "pds-input" }, h(PdsLabel, { key: '71be1b6dbaee982e199e482f1edc21b34621e1a3', htmlFor: this.componentId, text: this.label }), h("input", { key: '4ff1e2d8b3f5156a4f7ace72b168ec1f03959463', class: "pds-input__field", "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 }), this.helperMessage &&
-            h("p", { key: 'b0b144c49182e233f59d442384a1904b7a8307cd', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("p", { key: 'f66cc5c3b0463a4f7f62c54626692fa11f221568', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'efaccf89df9ca61b12f48c25c57bc02074d405e8', icon: danger, size: "small" }), this.errorMessage))));
+        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))));
     }
     static get is() { return "pds-input"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../global/styles/base.scss", "pds-input.scss"]
+            "$": ["pds-input.tokens.scss", "../../global/styles/utils/label.scss", "pds-input.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../global/styles/base.css", "pds-input.css"]
+            "$": ["pds-input.tokens.css", "../../global/styles/utils/label.css", "pds-input.css"]
         };
     }
     static get properties() {
@@ -78,6 +160,23 @@ export class PdsInput {
                 "attribute": "component-id",
                 "reflect": false
             },
+            "debounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the number of milliseconds to wait before updating the value."
+                },
+                "attribute": "debounce",
+                "reflect": false
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -253,11 +352,11 @@ export class PdsInput {
                 "defaultValue": "'text'"
             },
             "value": {
-                "type": "string",
+                "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | number | null",
+                    "resolved": "number | string",
                     "references": {}
                 },
                 "required": false,
@@ -267,12 +366,79 @@ export class PdsInput {
                     "text": "The value of the input."
                 },
                 "attribute": "value",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }
+    static get states() {
+        return {
+            "hasFocus": {}
+        };
+    }
     static get events() {
         return [{
+                "method": "pdsBlur",
+                "name": "pdsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input loses focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsChange",
+                "name": "pdsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\nEmitted when the value has changed.\n\nThis event will not emit when programmatically setting the `value` property."
+                },
+                "complexType": {
+                    "original": "InputChangeEventDetail",
+                    "resolved": "InputChangeEventDetail",
+                    "references": {
+                        "InputChangeEventDetail": {
+                            "location": "import",
+                            "path": "./input-interface",
+                            "id": "src/components/pds-input/input-interface.ts::InputChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsFocus",
+                "name": "pdsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input has focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
                 "method": "pdsInput",
                 "name": "pdsInput",
                 "bubbles": true,
@@ -283,16 +449,48 @@ export class PdsInput {
                     "text": "Emitted when a keyboard input occurs."
                 },
                 "complexType": {
-                    "original": "InputEvent",
-                    "resolved": "InputEvent",
+                    "original": "InputInputEventDetail",
+                    "resolved": "InputInputEventDetail",
                     "references": {
-                        "InputEvent": {
-                            "location": "global",
-                            "id": "global::InputEvent"
+                        "InputInputEventDetail": {
+                            "location": "import",
+                            "path": "./input-interface",
+                            "id": "src/components/pds-input/input-interface.ts::InputInputEventDetail"
                         }
                     }
                 }
             }];
     }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the native `input` in the `pds-input`. Use this method instead of the global\n`input.focus()`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "debounce",
+                "methodName": "debounceChanged"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
 }
 //# sourceMappingURL=pds-input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pds-input.js","sourceRoot":"","sources":["../../../src/components/pds-input/pds-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAO9C,MAAM,OAAO,QAAQ;;QA0EX,iBAAY,GAAG,CAAC,EAAS,EAAE,EAAE;YACnC,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;YACnD,IAAI,KAAK,EAAE,CAAC;gBACV,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;YACjC,CAAC;YACD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAgB,CAAC,CAAC;QACvC,CAAC,CAAC;;;;;;;;;;;;oBAlBa,MAAM;;;IAoBrB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,sEACY,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;YAE5C,4DAAK,KAAK,EAAC,WAAW;gBACpB,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI;gBACzD,8DAAO,KAAK,EAAC,kBAAkB,sBACX,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,YAAY,GAC1B;gBACD,IAAI,CAAC,aAAa;oBACjB,0DACE,KAAK,EAAC,2BAA2B,EACjC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACjB;gBAEL,IAAI,CAAC,YAAY;oBAChB,0DACE,KAAK,EAAC,0BAA0B,EAChC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW;wBAErB,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,GAAG;wBACtC,IAAI,CAAC,YAAY,CAChB,CAEF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-input',\n  styleUrls: ['../../global/styles/base.scss', 'pds-input.scss'],\n  shadow: true,\n})\nexport class PdsInput {\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Determines whether or not the input field is disabled.\n   */\n  @Prop() disabled?: boolean;\n\n  /**\n   * Specifies the error message and provides an error-themed treatment to the field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the input field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Determines whether or not the input field is invalid or throws an error.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the input label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies a short hint that describes the expected value of the input field.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Determines whether or not the input field is readonly.\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Determines whether or not the input field is required.\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * Determines the type of control that will be displayed\n   `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`\n   * @defaultValue \"text\"\n   */\n  @Prop() type = 'text';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({mutable: true}) value?: string;\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsInput: EventEmitter<InputEvent>;\n\n  private onInputEvent = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.pdsInput.emit(ev as InputEvent);\n  };\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <div class=\"pds-input\">\n          <PdsLabel htmlFor={this.componentId} text={this.label} />\n          <input class=\"pds-input__field\"\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            autocomplete={this.autocomplete}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            type={this.type}\n            value={this.value}\n            onInput={this.onInputEvent}\n          />\n          {this.helperMessage &&\n            <p\n              class=\"pds-input__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.errorMessage &&\n            <p\n              class=\"pds-input__error-message\"\n              id={messageId(this.componentId, 'error')}\n              aria-live=\"assertive\"\n            >\n              <pds-icon icon={danger} size=\"small\" />\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-input.js","sourceRoot":"","sources":["../../../src/components/pds-input/pds-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { debounceEvent } from '@utils/utils';\nimport { inheritAriaAttributes } from '@utils/attributes';\n\nimport type { Attributes } from '@utils/attributes';\nimport type { InputChangeEventDetail, InputInputEventDetail } from './input-interface';\n\n@Component({\n  tag: 'pds-input',\n  styleUrls: ['pds-input.tokens.scss', '../../global/styles/utils/label.scss', 'pds-input.scss'],\n  shadow: true,\n})\nexport class PdsInput {\n  private nativeInput?: HTMLInputElement;\n  private inheritedAttributes: Attributes = {};\n  private isComposing = false;\n  /**\n   * The value of the input when the input is focused.\n   */\n  private focusedValue?: string | number | null;\n\n  private originalPdsInput?: EventEmitter<InputInputEventDetail>;\n\n  @Element() el!: HTMLPdsInputElement;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   *\n   * Emitted when the value has changed.\n   *\n   * This event will not emit when programmatically setting the `value` property.\n   */\n  @Event() pdsChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsInput: EventEmitter<InputInputEventDetail>;\n\n  /**\n   * Sets focus on the native `input` in the `pds-input`. Use this method instead of the global\n   * `input.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if ( this.nativeInput ) {\n      this.nativeInput.focus();\n    }\n  }\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets the number of milliseconds to wait before updating the value.\n   */\n  @Prop() debounce?: number;\n\n  /**\n   * Determines whether or not the input field is disabled.\n   */\n  @Prop() disabled?: boolean;\n\n  /**\n   * Specifies the error message and provides an error-themed treatment to the field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the input field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Determines whether or not the input field is invalid or throws an error.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the input label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies a short hint that describes the expected value of the input field.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Determines whether or not the input field is readonly.\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Determines whether or not the input field is required.\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * Determines the type of control that will be displayed\n   * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`\n   * @defaultValue \"text\"\n   */\n  @Prop() type = 'text';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({mutable: true}) value?: string | number | null = '';\n\n  /**\n   * Determines if the input has focus.\n   */\n  @State() hasFocus = false;\n\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    const { pdsInput, debounce, originalPdsInput } = this;\n\n    /**\n     * If debounce is undefined, we have to manually revert the pdsInput emitter in case\n     * debounce used to be set to a number. Otherwise, the event would stay debounced.\n     */\n    this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n  }\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeInput;\n    const value = this.getValue();\n\n    if (nativeInput && nativeInput.value !== value && !this.isComposing) {\n      nativeInput.value = value;\n    }\n  }\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  private onInputEvent = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.emitInputChange(ev);\n  };\n\n  private onChangeEvent = (ev: Event) => {\n    this.emitValueChange(ev);\n  };\n\n  private onBlurEvent = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    if (this.focusedValue !== this.value) {\n      /**\n       * Emits the `pdsChange` event when the input value\n       * is different than the value when the input was focused.\n       */\n      this.emitValueChange(ev);\n    }\n\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocusEvent = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.focusedValue = this.value;\n\n    this.pdsFocus.emit(ev);\n  };\n\n  private onCompositionStart = () => {\n    this.isComposing = true;\n  }\n\n  private onCompositionEnd = () => {\n    this.isComposing = false;\n  }\n\n  /**\n   * Emits a pdsChange event\n   */\n  private emitValueChange(event?: Event) {\n    const { value } = this;\n    const newValue = value == null ? value : value.toString();\n\n    this.focusedValue = newValue;\n    this.pdsChange.emit({ value: newValue, event });\n  }\n\n  /**\n   *\n   * Emits a `pdsInput` event\n   */\n  private emitInputChange(event?: Event) {\n    const { value } = this;\n\n    // Checks for both null and undefined values\n    const newValue = value == null ? value : value.toString();\n\n    this.pdsInput.emit({ value: newValue, event });\n  }\n\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el)\n    }\n  }\n\n  componentDidLoad() {\n    this.debounceChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        aria-readonly={this.readonly ? 'true' : null}\n      >\n        <div class=\"pds-input\">\n          <label htmlFor={this.componentId}>{this.label}</label>\n          <input class=\"pds-input__field\"\n            ref={(input) => this.nativeInput = input}\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            autocomplete={this.autocomplete}\n            disabled={this.disabled}\n            id={this.componentId}\n            name={this.name}\n            placeholder={this.placeholder}\n            readOnly={this.readonly}\n            required={this.required}\n            type={this.type}\n            value={this.value}\n            onInput={this.onInputEvent}\n            onChange={this.onChangeEvent}\n            onBlur={this.onBlurEvent}\n            onFocus={this.onFocusEvent}\n            onCompositionstart={this.onCompositionStart}\n            onCompositionend={this.onCompositionEnd}\n            {...this.inheritedAttributes}\n          />\n          {this.helperMessage &&\n            <p\n              class=\"pds-input__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.errorMessage &&\n            <p\n              class=\"pds-input__error-message\"\n              id={messageId(this.componentId, 'error')}\n              aria-live=\"assertive\"\n            >\n              <pds-icon icon={danger} size=\"small\" />\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,6 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:host {
+  --pine-input-color-background-danger: var(--pine-color-red-050);
+}

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

@@ -6,6 +6,7 @@ export default {
   argTypes: extractArgTypes('pds-input'),
   args: {
     autocomplete: null,
+    debounce: null,
     disabled: false,
     errorMessage: null,
     helperMessage: null,
@@ -19,7 +20,11 @@ export default {
   component: 'pds-input',
   parameters: {
     actions: {
-      handles: ['oninput', 'pdsInput'],
+      handles: [
+        'oninput', 'pdsInput',
+        'onchange', 'pdsChange',
+        'onblur', 'pdsBlur',
+        'onFocus', 'pdsFocus'],
     },
   },
   title: 'components/Input',
@@ -28,11 +33,12 @@ export default {
 
 const BaseTemplate = (args) => html`<pds-input
   autocomplete="${args.autocomplete}"
+  component-id="${args.componentId}"
+  debounce="${args.debounce}"
   disabled="${args.disabled}"
   error-message="${args.errorMessage}"
   helper-message="${args.helperMessage}"
   invalid="${args.invalid}"
-  component-id="${args.componentId}"
   label="${args.label}"
   name="${args.name}"
   placeholder="${args.placeholder}"

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

@@ -1,28 +1,16 @@
 :host {
-  --border-outline: 4px solid var(--pine-color-blue-200);
-  --border-radius: var(--pine-border-radius-075);
-  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);
-  --color-text-default: var(--pine-color-text-default);
-  --color-text-hover: var(--pine-color-grey-900);
-  --font-size-default: var(--pine-font-size-body-md);
-  --font-size-sm: var(--pine-font-size-body-sm);
-  --font-size-xs: var(--pine-font-size-body-xs);
-  --font-weight: var(--pine-font-weight-body-medium);
-  --spacing-inline-start-margin: var(--pine-spacing-050);
-  --sizing-svg-lg: var(--font-size-default);
-  --sizing-svg-md: var(--font-size-sm);
-  --sizing-svg-sm: var(--font-size-xs);
+  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);
   display: inline;
 }
 :host pds-icon {
-  margin-inline-start: var(--spacing-inline-start-margin);
+  margin-inline-start: var(--pine-dimension-2xs);
 }
 
 .pds-link {
   align-items: center;
-  color: var(--color-text);
+  color: var(--pine-color-text);
   display: inline-flex;
-  font-weight: var(--font-weight);
+  font-weight: var(--pine-font-weight-medium);
 }
 .pds-link:focus-visible {
   box-shadow: var(--box-shadow-focus);
@@ -31,34 +19,34 @@
 }
 
 .pds-link--sm {
-  font-size: var(--font-size-xs);
+  font-size: var(--pine-font-size-body-xs);
 }
 .pds-link--sm pds-icon {
-  height: var(--sizing-svg-sm);
-  width: var(--sizing-svg-sm);
+  height: var(--pine-dimension-xs);
+  width: var(--pine-dimension-xs);
 }
 
 .pds-link--md {
-  font-size: var(--font-size-sm);
+  font-size: var(--pine-font-size-body-sm);
 }
 .pds-link--md pds-icon {
-  height: var(--sizing-svg-md);
-  width: var(--sizing-svg-md);
+  height: var(--pine-dimension-xs);
+  width: var(--pine-dimension-xs);
 }
 
 .pds-link--lg {
-  font-size: var(--font-size-default);
+  font-size: var(--pine-font-size-body-md);
 }
 .pds-link--lg pds-icon {
-  height: var(--sizing-svg-lg);
-  width: var(--sizing-svg-lg);
+  height: var(--pine-dimension-sm);
+  width: var(--pine-dimension-sm);
 }
 
 .pds-link--plain {
   text-decoration: none;
 }
 .pds-link--plain:hover {
-  color: var(--color-text-hover);
+  color: var(--pine-color-text-hover);
   text-decoration: underline;
 }
 
@@ -66,6 +54,6 @@
   text-decoration: underline;
 }
 .pds-link--default:hover {
-  color: var(--color-text-hover);
+  color: var(--pine-color-text-hover);
   text-decoration: none;
 }

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

@@ -23,19 +23,19 @@ export class PdsLink {
         return classNames.join(' ');
     }
     render() {
-        return (h("a", { key: '0301c40c5571d5713ff50262c9cd288b476bfb02', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: 'dae97a17d38c0308d74f75b859d704d0d28d789d' }, this.href), this.external &&
-            h("pds-icon", { key: '5c242186e0080db10ede73c232fd83643b54df03', icon: launch, size: this.fontSize })));
+        return (h("a", { key: 'd21ad4828be4f730d996dfa814ea8f8863053a51', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: '7e2dd2c8f33a12ba99a7b0c6f80e263c4fc7d695' }, this.href), this.external &&
+            h("pds-icon", { key: '8e1597318fb76223ae25232b9f1a814781f25409', icon: launch, size: this.fontSize })));
     }
     static get is() { return "pds-link"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../global/styles/base.scss", "pds-link.scss"]
+            "$": ["pds-link.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../global/styles/base.css", "pds-link.css"]
+            "$": ["pds-link.css"]
         };
     }
     static get properties() {

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

@@ -1 +1 @@
-{"version":3,"file":"pds-link.js","sourceRoot":"","sources":["../../../src/components/pds-link/pds-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C;;;GAGG;AAMH,MAAM,OAAO,OAAO;;;wBAUC,KAAK;uBAMc,QAAQ;wBAMP,IAAI;;;IAOnC,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/C,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QAEJ,OAAO,CACL,0DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC5C,IAAI,EAAC,MAAM;YAEX,+DAAO,IAAI,CAAC,IAAI,CAAQ;YACvB,IAAI,CAAC,QAAQ;gBACZ,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAa,CAExD,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/**\n * @part link - Link element styles.\n * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.\n */\n@Component({\n  tag: 'pds-link',\n  styleUrls: ['../../global/styles/base.scss', 'pds-link.scss'],\n  shadow: true,\n})\nexport class PdsLink {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the link should open in a new tab.\n   * @defaultValue false\n   */\n  @Prop() external = false;\n\n  /**\n   * Sets the link variant styles.\n   * @defaultValue inline\n   */\n  @Prop() variant: 'inline' | 'plain' = 'inline';\n\n  /**\n   * The font size of the link's text.\n   * @defaultValue lg\n   */\n  @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n  /**\n   * The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.\n   */\n  @Prop() href!: string;\n\n  private classNames() {\n    const classNames = ['pds-link'];\n\n    if (this.fontSize) {\n      classNames.push('pds-link--' + this.fontSize);\n    }\n\n    if (this.variant) {\n      classNames.push('pds-link--' + this.variant);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n\n    return (\n      <a\n        class={this.classNames()}\n        href={this.href}\n        id={this.componentId}\n        target={this.external ? '_blank' : undefined}\n        part=\"link\"\n      >\n        <slot>{this.href}</slot>\n        {this.external &&\n          <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n        }\n      </a>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-link.js","sourceRoot":"","sources":["../../../src/components/pds-link/pds-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C;;;GAGG;AAMH,MAAM,OAAO,OAAO;;;wBAUC,KAAK;uBAMc,QAAQ;wBAMP,IAAI;;;IAOnC,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/C,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QAEJ,OAAO,CACL,0DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC5C,IAAI,EAAC,MAAM;YAEX,+DAAO,IAAI,CAAC,IAAI,CAAQ;YACvB,IAAI,CAAC,QAAQ;gBACZ,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAa,CAExD,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/**\n * @part link - Link element styles.\n * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.\n */\n@Component({\n  tag: 'pds-link',\n  styleUrls: ['pds-link.scss'],\n  shadow: true,\n})\nexport class PdsLink {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the link should open in a new tab.\n   * @defaultValue false\n   */\n  @Prop() external = false;\n\n  /**\n   * Sets the link variant styles.\n   * @defaultValue inline\n   */\n  @Prop() variant: 'inline' | 'plain' = 'inline';\n\n  /**\n   * The font size of the link's text.\n   * @defaultValue lg\n   */\n  @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n  /**\n   * The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.\n   */\n  @Prop() href!: string;\n\n  private classNames() {\n    const classNames = ['pds-link'];\n\n    if (this.fontSize) {\n      classNames.push('pds-link--' + this.fontSize);\n    }\n\n    if (this.variant) {\n      classNames.push('pds-link--' + this.variant);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n\n    return (\n      <a\n        class={this.classNames()}\n        href={this.href}\n        id={this.componentId}\n        target={this.external ? '_blank' : undefined}\n        part=\"link\"\n      >\n        <slot>{this.href}</slot>\n        {this.external &&\n          <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n        }\n      </a>\n    );\n  }\n}\n"]}

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

@@ -2,7 +2,7 @@
   align-items: center;
   display: flex;
   flex-direction: column;
-  gap: var(--pine-spacing-100);
+  gap: var(--pine-dimension-xs);
 }
 
 :host(.pds-loader--hidden),
@@ -19,13 +19,11 @@
 }
 
 .pds-loader--spinner svg {
-  --color-background-spinner: var(--pine-color-mercury-400);
+  --color-background-spinner: var(--pine-color-brand);
   --number-spinner-timing: 2s;
   --number-spinner-path-timing: 1.5s;
   animation: rotate var(--number-spinner-timing) linear infinite;
-  block-size: var(--sizing-spinner);
   color: var(--color-background-spinner);
-  inline-size: var(--sizing-spinner);
 }
 
 .pds-loader__spinner-path {
@@ -38,37 +36,26 @@
   }
 }
 .pds-loader--typing {
-  --border-radius-typing: var(--pine-border-radius-200);
-  --border-radius-typing-dot: var(--pine-border-radius-circle);
-  --box-shadow-typing: var(--pine-box-shadow-100);
-  --color-background-typing-default: var(--pine-color-grey-100);
-  --color-background-typing-dot-default: var(--pine-color-grey-400);
   --number-typing-timing: 1s;
   --opacity-typing-dot-default: 0.4;
   --opacity-typing-dot-active: 1;
-  --sizing-typing-dot: calc(var(--pine-spacing-150) / 2);
-  --spacing-typing-gap: var(--pine-spacing-050);
-  --spacing-typing-margin-block: var(--pine-spacing-0);
-  --spacing-typing-margin-inline: auto;
-  --spacing-typing-padding-block: 15px;
-  --spacing-typing-padding-inline: var(--pine-spacing-250);
   align-items: center;
-  background-color: var(--color-background-typing-default);
-  border-radius: var(--border-radius-typing);
-  box-shadow: var(--box-shadow-typing);
+  background-color: var(--pine-color-background-container-disabled);
+  border-radius: var(--pine-dimension-sm);
+  box-shadow: var(--pine-box-shadow);
   display: inline-flex;
-  gap: var(--spacing-typing-gap);
-  margin-block: var(--spacing-typing-margin-block);
-  margin-inline: var(--spacing-typing-margin-inline);
-  padding-block: var(--spacing-typing-padding-block);
-  padding-inline: var(--spacing-typing-padding-inline);
+  gap: var(--pine-dimension-2xs);
+  margin-block: var(--pine-dimension-none);
+  margin-inline: auto;
+  padding-block: 15px;
+  padding-inline: 20px;
   position: relative;
 }
 .pds-loader--typing span {
-  background-color: var(--color-background-typing-dot-default);
-  block-size: var(--sizing-typing-dot);
-  border-radius: var(--border-radius-typing-dot);
-  inline-size: var(--sizing-typing-dot);
+  background-color: var(--pine-color-border-hover);
+  block-size: 6px;
+  border-radius: var(--pine-border-radius-full);
+  inline-size: 6px;
   opacity: var(--opacity-typing-dot-default);
 }
 .pds-loader--typing span:nth-of-type(1) {
@@ -84,10 +71,10 @@
 @keyframes typing {
   50% {
     opacity: var(--opacity-typing-dot-active);
-    transform: scale(1.2);
+    transform: scale(1.25);
   }
 }
 .pds-loader__label {
-  --typography-label-default: var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);
+  --typography-label-default: var(--pine-font-weight-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-body);
   font: var(--typography-label-default);
 }

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

@@ -33,18 +33,18 @@ export class PdsLoader {
         }
     }
     render() {
-        return (h(Host, { key: 'e69acbb3ba84e723ce654fb8288c54d6c878a515', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: 'dd121b0adc8825e8b8e5aa6c4c2756d2bbc8aec3', class: "pds-loader--spinner" }, h("svg", { key: '91474584a672fc78a0e1d169eaff53fbbce1b658', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: '38fe6181c360cce4c31402ac7408b3120dbf4419' }, h("linearGradient", { key: '29cf900bc3ab8c6b5cb7da36f96207b4e234179a', id: "spinner-secondHalf" }, h("stop", { key: 'aaa993d38e5cc792417160d8febde05e94a55503', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '3df5fe92f07c054016840413979e6f4bbc967af1', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '853f7b5ae56dab5688c1bbf2e24fd3f38f13997f', id: "spinner-firstHalf" }, h("stop", { key: '54282ea20ec47332c65559f70ca4dd1429c2fe44', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '471bc0aaa05940103ca1aa50b9772e514a19f912', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'de35b85d92de0e958a0ec6753fa2362d2884c99f', class: "pds-loader__spinner-path" }, h("path", { key: '2238b370478f385ad6201b4aeadc9aedc7702ac7', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: '3a6434262838be8654212f30f40af5bb50c5b679', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '687280eed667bfa794c4ea380274867614b66ff6', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: 'a38bb46b431c96efa00d234ec6ce6b3ff2adb0e5', class: "pds-loader--typing" }, h("span", { key: 'bdd865189cf2fe87181b13fbdb01fcc7086c9f2c' }), h("span", { key: '79be0a18686ac726b3b012cb1b796a1265c45ddb' }), h("span", { key: '351a6709d5b50c27b82d9dfba1d01cd058e8c10f' }))), h("div", { key: '81602e65ce055f10b39a70d5f29ffb62471bcb25', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '1ce406972db7f6ef5cc7d558301facb5e455956b', name: "label" }, "Loading..."))));
+        return (h(Host, { key: '0caf3182214726aca594996b43765c540a2bea76', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: 'bf62aea965efcfa2d5331ac9f69fdd60836ec498', class: "pds-loader--spinner" }, h("svg", { key: 'f4a2ca5e27c3c04f70029415996c79d54e3db148', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: 'dba4da5d4c65b1322c079b1ef3608044f8a0c12d' }, h("linearGradient", { key: 'da837ec20645bb254a1bf86796306e07744adbdd', id: "spinner-secondHalf" }, h("stop", { key: '922e70ae537fa4541afb13d167ca7578759462fd', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '861e6a6540827f500872f11527301ef563b9d3cd', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: 'b8675daa4f37de927e8d3742385e2058a0b33f36', id: "spinner-firstHalf" }, h("stop", { key: '754e35be6b1268864743c42adc41ef682dab1307', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '9db1dee07342751a07a6039326bb2fada0ba22d7', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'aee0ed505c0512e831724ca54cb287bde5ab2470', class: "pds-loader__spinner-path" }, h("path", { key: '93096ef22bd2fdbaa819b926b4ec8fabce2050c7', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: '648bde48070689c3b22bc40f1ad17de694d146f7', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '9a78cd8d70dbeed9cf04deef9ee766c31464b0e6', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '6b5a395b4a7fef244d941d5276ca4348ed2e79de', class: "pds-loader--typing" }, h("span", { key: '7c1e5a5b2441e0c649a1faab10a758290487c492' }), h("span", { key: '39db51a0391c2447ab4ba5a75e8d544c2167e41b' }), h("span", { key: '5315bfc12f3b269ff14ac4abe39c4bd50be4a648' }))), h("div", { key: 'c53aa88ef1f3bbabd67f332529016adbfcd4e82e', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '3d6dbd3a72223fc49e1ce1f0578296b18c7175ae', name: "label" }, "Loading..."))));
     }
     static get is() { return "pds-loader"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["../../global/styles/base.scss", "pds-loader.scss"]
+            "$": ["pds-loader.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["../../global/styles/base.css", "pds-loader.css"]
+            "$": ["pds-loader.css"]
         };
     }
     static get properties() {