@pine-ds/core 4.0.0-mercury.0 → 4.1.0

package/dist/esm/pds-input.entry.js

@@ -1,41 +1,313 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-2a33b470.js';
-import { P as PdsLabel, a as assignDescription, m as messageId } from './pds-label-31a5848b.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CTLu1TM4.js';
+import { i as isSpecTest, a as assignDescription, m as messageId } from './form-BuRbS7Hp.js';
+import { i as inheritAriaAttributes } from './attributes-C0M1gTKv.js';
+import { d as debounceEvent } from './utils-tJa4KYNO.js';
+import { b as danger } from './index-Bu9gFIxM.js';
 
-const pdsInputCss = ":host{--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--box-shadow-focus-error:0 0 0 2px var(--pine-color-red-200);--color-text-default:var(--pine-color-charcoal-500);--color-background-disabled:var(--pine-color-grey-100);--color-border-default:var(--pine-color-grey-400);--color-border-error:var(--pine-color-red-300);--color-border-hover:var(--pine-color-grey-500);--color-disabled-text:var(--pine-color-grey-500);--color-placeholder-text:var(--pine-color-charcoal-200);--font-size-helper-message:var(--pine-font-size-100);--font-size-input-field:var(--pine-font-size-100);--font-size-label:var(--pine-font-size-100);--font-weight-helper-message:var(--pine-font-weight-normal);--font-weight-input-field:var(--pine-font-weight-normal);--font-weight-label:var(--pine-font-weight-medium);--line-height-label:var(--pine-line-height-150);--line-height-helper-message:var(--pine-line-height-125);--line-height-input-field:var(--pine-line-height-150);--spacing-field-padding-block:var(--pine-spacing-100);--spacing-input-field-padding-inline:var(--pine-spacing-200);--spacing-label-margin-block-end:var(--pine-spacing-100);--spacing-margin-top-helper-message:var(--pine-spacing-100);display:inline}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:var(--line-height-label);-webkit-margin-after:var(--spacing-label-margin-block-end);margin-block-end:var(--spacing-label-margin-block-end)}input{border:1px solid var(--color-border-default);border-radius:10px;font-size:var(--font-size-input-field);font-weight:var(--font-weight-input-field);line-height:var(--line-height-input-field);padding:var(--spacing-field-padding-block) var(--spacing-input-field-padding-inline);}input:disabled{background-color:var(--color-background-disabled);color:var(--color-disabled-text);cursor:not-allowed}input:hover{border-color:var(--color-border-hover)}input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}input::-webkit-input-placeholder{color:var(--color-placeholder-text)}input::-moz-placeholder{color:var(--color-placeholder-text)}input::-moz-placeholder{color:var(--color-placeholder-text)}input:-ms-input-placeholder{color:var(--color-placeholder-text)}input:has(~.pds-input__error-message){border-color:var(--color-border-error)}input:has(~.pds-input__error-message):focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error);outline:none}.pds-input__error-message,.pds-input__helper-message{font-size:var(--font-size-helper-message);font-weight:var(--font-weight-helper-message);line-height:var(--line-height-helper-message);-webkit-margin-after:0;margin-block-end:0;-webkit-margin-before:var(--spacing-margin-top-helper-message);margin-block-start:var(--spacing-margin-top-helper-message)}.pds-input__error-message{color:var(--color-error)}";
-const PdsInputStyle0 = pdsInputCss;
+const pdsInputTokensCss = () => `:host{--pine-input-color-background-danger:var(--pine-color-red-050)}`;
+
+const labelCss = () => `:host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
+
+const pdsInputCss = () => `:host{--pds-input-background:var(--pine-color-background-container);--pds-input-border-color:var(--pine-color-border);--pds-input-border-color-hover:var(--pine-color-border-hover);--pds-input-border-color-disabled:var(--pine-color-border-disabled);--pds-input-border-radius:var(--pine-dimension-125);--pds-input-border-width:var(--pine-border-width-thin);--pds-input-padding-x:var(--pine-dimension-150);--pds-input-padding-y:calc(var(--pine-dimension-xs) - var(--pine-border-width));--pds-input-font:var(--pine-typography-body);--pds-input-text-color:var(--pine-color-text-strong);--pds-input-placeholder-color:var(--pine-color-text-placeholder);--pds-input-icon-color:var(--pine-color-text-secondary);--pds-input-disabled-background:var(--pine-color-background-container-disabled);--pds-input-disabled-text-color:var(--pine-color-text-disabled);--pds-input-error-color:var(--pine-color-text-message-danger);--pds-input-error-background:var(--pine-input-color-background-danger);--pds-input-error-border:var(--pine-color-border-danger);--pds-input-error-border-hover:var(--pine-color-border-danger-hover);--pds-input-addon-background:var(--pine-color-background-subtle);--pds-input-addon-color:var(--pine-color-text-secondary);--pds-input-field-min-height:var(--pine-dimension-450);--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger);display:inline}:host pds-select::part(select){background-color:var(--pds-input-error-background);border-color:var(--pds-input-error-border)}:host::part(prefix),:host::part(suffix){-ms-flex-align:center;align-items:center;color:var(--pine-color-text-label-readonly);display:-ms-flexbox;display:flex;height:100%;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);white-space:nowrap;z-index:calc(var(--pine-z-index-raised) - 1)}:host::part(prefix){border-end-start-radius:var(--pds-input-border-radius);-webkit-border-end:var(--pine-border-width-none);border-inline-end:var(--pine-border-width-none);border-start-start-radius:var(--pds-input-border-radius);inset-inline-start:var(--pds-input-padding-x)}:host::part(suffix){border-end-end-radius:var(--pds-input-border-radius);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);border-start-end-radius:var(--pds-input-border-radius);inset-inline-end:var(--pds-input-padding-x)}:host::part(prepend),:host::part(append){-ms-flex-align:center;align-items:center;background-color:var(--pds-input-addon-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color);color:var(--pds-input-addon-color);display:-ms-flexbox;display:flex;overflow:visible}:host::part(prepend){border-end-start-radius:var(--pds-input-border-radius);-webkit-border-end:var(--pine-border-width-none);border-inline-end:var(--pine-border-width-none);border-start-start-radius:var(--pds-input-border-radius)}:host::part(append){border-end-end-radius:var(--pds-input-border-radius);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);border-start-end-radius:var(--pds-input-border-radius)}:host([has-prepend]) ::slotted(pds-button[slot=prepend]){--pds-button-background:var(--pds-input-addon-background);--pds-button-border:var(--pine-border-width-none);--pds-button-border-radius:var(--pine-dimension-none);--pds-button-border-radius-end-end:var(--pine-dimension-none);--pds-button-border-radius-start-end:var(--pine-dimension-none);--pds-button-border-radius-start-start:var(--pds-input-border-radius);--pds-button-border-radius-end-start:var(--pds-input-border-radius);--pds-button-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));--pds-button-box-shadow-focus:0 0 0 3px var(--pine-color-focus-ring);--pds-button-outline-focus:none}:host([has-append]) ::slotted(pds-button[slot=append]){--pds-button-background:var(--pds-input-addon-background);--pds-button-border:var(--pine-border-width-none);--pds-button-border-radius:var(--pine-dimension-none);--pds-button-border-radius-end-start:var(--pine-dimension-none);--pds-button-border-radius-start-start:var(--pine-dimension-none);--pds-button-border-radius-start-end:var(--pds-input-border-radius);--pds-button-border-radius-end-end:var(--pds-input-border-radius);--pds-button-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));--pds-button-box-shadow-focus:0 0 0 3px var(--pine-color-focus-ring);--pds-button-outline-focus:none}:host([has-prepend]) ::slotted(pds-select[slot=prepend]){--pds-select-background:var(--pds-input-addon-background);--pds-select-border:var(--pine-border-width-none);--pds-select-border-radius-end-end:var(--pine-dimension-none);--pds-select-border-radius-end-start:var(--pds-input-border-radius);--pds-select-border-radius-start-end:var(--pine-dimension-none);--pds-select-border-radius-start-start:var(--pds-input-border-radius);--pds-select-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)))}:host([has-append]) ::slotted(pds-select[slot=append]){--pds-select-background:var(--pds-input-addon-background);--pds-select-border:var(--pine-border-width-none);--pds-select-border-radius-end-end:var(--pds-input-border-radius);--pds-select-border-radius-end-start:var(--pine-dimension-none);--pds-select-border-radius-start-end:var(--pds-input-border-radius);--pds-select-border-radius-start-start:var(--pine-dimension-none);--pds-select-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)))}:host([aria-readonly=true]) input{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}:host([aria-disabled=true])::part(prepend),:host([aria-disabled=true])::part(append){background-color:var(--pds-input-disabled-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color-disabled)}:host([full-width=true]){width:100%}:host([invalid=true])::part(prepend),:host([invalid=true])::part(append){background-color:var(--pds-input-error-background);border:var(--pds-input-border-width) solid var(--pds-input-error-border)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true])){--pds-input-background:var(--pine-color-accent-disabled);--pds-input-border-color:var(--pine-color-accent);--pds-input-border-color-hover:var(--pine-color-accent-hover);--pds-input-text-color:var(--pine-color-text-accent)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true]))::part(prefix),:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true]))::part(suffix){color:var(--pine-color-text-accent)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true])) .pds-input__field:focus-visible{outline-color:var(--pine-color-focus-ring)}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-input__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-input__label{color:var(--pine-color-text-strong);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-input__label-wrapper .pds-input__label{-webkit-margin-after:0;margin-block-end:0}.pds-input__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-input__field-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-input__field-wrapper.has-prefix .pds-input__field{-webkit-padding-start:calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em));padding-inline-start:calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em))}.pds-input__field-wrapper.has-suffix .pds-input__field{-webkit-padding-end:calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em));padding-inline-end:calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em))}.pds-input__field-wrapper.has-prepend .pds-input__field{border-end-start-radius:var(--pine-dimension-none);border-start-start-radius:var(--pine-dimension-none)}.pds-input__field-wrapper.has-append .pds-input__field{border-end-end-radius:var(--pine-dimension-none);border-start-end-radius:var(--pine-dimension-none)}.pds-input__field{background:var(--pds-input-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color);border-radius:var(--pds-input-border-radius);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pds-input-text-color);-ms-flex:1;flex:1;font:var(--pds-input-font);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-input-field-min-height);min-width:var(--pine-dimension-none);padding:var(--pds-input-padding-y) var(--pds-input-padding-x);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-input__field:hover:not(:disabled){border-color:var(--pds-input-border-color-hover)}.pds-input__field:disabled{background:var(--pds-input-disabled-background);border-color:var(--pine-color-border-disabled);color:var(--pds-input-disabled-text-color);cursor:not-allowed}.pds-input__field:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.has-error .pds-input__field:hover:not(:disabled){border-color:var(--pds-input-error-border-hover)}:host-context([data-theme=dark]) .has-error .pds-input__field:hover:not(:disabled){border-color:var(--pine-color-red-950)}.pds-input__field:focus-visible:not(.has-error){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width);position:relative;z-index:1}:host([has-prepend]) .pds-input__field:focus-visible:not(.has-error),:host([has-append]) .pds-input__field:focus-visible:not(.has-error),:host([has-prefix]) .pds-input__field:focus-visible:not(.has-error),:host([has-suffix]) .pds-input__field:focus-visible:not(.has-error){outline-offset:var(--pine-dimension-none)}.pds-input__field::-webkit-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::-moz-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field:-ms-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::-ms-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field:-moz-placeholder-shown{text-overflow:ellipsis}.pds-input__field:-ms-input-placeholder{text-overflow:ellipsis}.pds-input__field:placeholder-shown{text-overflow:ellipsis}.has-error .pds-input__field{background-color:var(--pds-input-error-background);border-color:var(--pds-input-error-border)}:host-context([data-theme=dark]) .has-error .pds-input__field{background-color:var(--pine-color-red-950)}.has-error .pds-input__field:focus-visible{outline-color:var(--pine-color-focus-ring-danger);position:relative;z-index:1}.pds-input__error-message,.pds-input__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:var(--pine-dimension-none);margin-block-end:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-input__error-message{color:var(--pds-input-error-color);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-input__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-input__field::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;background-color:var(--pds-input-placeholder-color);cursor:pointer;height:var(--pine-dimension-sm);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");-webkit-mask-size:contain;mask-size:contain;width:var(--pine-dimension-sm)}`;
 
 const PdsInput = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.pdsInput = createEvent(this, "pdsInput", 7);
+        this.pdsBlur = createEvent(this, "pdsBlur");
+        this.pdsChange = createEvent(this, "pdsChange");
+        this.pdsFocus = createEvent(this, "pdsFocus");
+        this.pdsInput = createEvent(this, "pdsInput");
+        this.pdsKeyDown = createEvent(this, "pdsKeyDown");
+        this.inheritedAttributes = {};
+        this.isComposing = false;
+        this.hasLoaded = false;
+        /**
+         * If true, the input has prefix content (non-focusable)
+         */
+        this.hasPrefix = false;
+        /**
+         * If true, the input has suffix content (non-focusable)
+         */
+        this.hasSuffix = false;
+        /**
+         * If true, the input has prepend content (focusable)
+         */
+        this.hasPrepend = false;
+        /**
+         * If true, the input has append content (focusable)
+         */
+        this.hasAppend = false;
+        /**
+         * If true, the input has action content in the label area
+         */
+        this.hasAction = false;
+        /**
+         * Determines the type of control that will be displayed
+         * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`
+         * @defaultValue "text"
+         */
+        this.type = 'text';
+        /**
+         * The value of the input.
+         */
+        this.value = '';
+        /**
+         * Determines if the input has focus.
+         */
+        this.hasFocus = false;
         this.onInputEvent = (ev) => {
             const input = ev.target;
             if (input) {
                 this.value = input.value || '';
             }
-            this.pdsInput.emit(ev);
-        };
-        this.componentId = undefined;
-        this.disabled = undefined;
-        this.errorMessage = undefined;
-        this.helperMessage = undefined;
-        this.invalid = undefined;
-        this.label = undefined;
-        this.name = undefined;
-        this.placeholder = undefined;
-        this.readonly = undefined;
-        this.required = undefined;
-        this.type = 'text';
-        this.value = undefined;
+            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.onKeyDownEvent = (ev) => {
+            this.pdsKeyDown.emit(ev);
+        };
+    }
+    /**
+     * 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();
+        }
+    }
+    observeAddonResize() {
+        var _a;
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        // Disconnect existing observer before creating a new one
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateAddonWidths();
+        });
+        if (this.prefixEl) {
+            this.resizeObserver.observe(this.prefixEl);
+        }
+        if (this.suffixEl) {
+            this.resizeObserver.observe(this.suffixEl);
+        }
+    }
+    updateAddonWidths() {
+        requestAnimationFrame(() => {
+            if (this.prefixEl) {
+                const prefixWidth = this.prefixEl.offsetWidth;
+                this.el.style.setProperty('--prefix-width', `${prefixWidth}px`);
+            }
+            if (this.suffixEl) {
+                const suffixWidth = this.suffixEl.offsetWidth;
+                this.el.style.setProperty('--suffix-width', `${suffixWidth}px`);
+            }
+        });
+    }
+    renderPrefix() {
+        const hasPrefix = this.el.querySelector('[slot="prefix"]') !== null;
+        if (hasPrefix) {
+            return (h("div", { class: "pds-input__prefix", part: "prefix", ref: (el) => this.prefixEl = el }, h("slot", { name: "prefix", onSlotchange: () => this.updateAddonWidths() })));
+        }
+        return null;
+    }
+    renderSuffix() {
+        const hasSuffix = this.el.querySelector('[slot="suffix"]') !== null;
+        if (hasSuffix) {
+            return (h("div", { class: "pds-input__suffix", part: "suffix", ref: (el) => this.suffixEl = el }, h("slot", { name: "suffix", onSlotchange: () => this.updateAddonWidths() })));
+        }
+        return null;
+    }
+    renderPrepend() {
+        const hasPrepend = this.el.querySelector('[slot="prepend"]') !== null;
+        if (hasPrepend) {
+            return (h("div", { class: "pds-input__prepend", part: "prepend" }, h("slot", { name: "prepend" })));
+        }
+        return null;
+    }
+    renderAppend() {
+        const hasAppend = this.el.querySelector('[slot="append"]') !== null;
+        if (hasAppend) {
+            return (h("div", { class: "pds-input__append", part: "append" }, h("slot", { name: "append" })));
+        }
+        return null;
+    }
+    renderAction() {
+        const hasAction = this.el.querySelector('[slot="action"]') !== null;
+        if (hasAction) {
+            return (h("div", { class: "pds-input__action", part: "action" }, h("slot", { name: "action" })));
+        }
+        return null;
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+        this.hasPrefix = this.el.querySelector('[slot="prefix"]') !== null;
+        this.hasSuffix = this.el.querySelector('[slot="suffix"]') !== null;
+        this.hasPrepend = this.el.querySelector('[slot="prepend"]') !== null;
+        this.hasAppend = this.el.querySelector('[slot="append"]') !== null;
+        this.hasAction = this.el.querySelector('[slot="action"]') !== null;
+        // Store the original pdsInput event emitter
+        this.originalPdsInput = this.pdsInput;
+    }
+    connectedCallback() {
+        // Initialize ElementInternals for form association (only once per element instance)
+        if (this.el.attachInternals && !this.internals) {
+            this.internals = this.el.attachInternals();
+        }
+        // Re-establish ResizeObserver after DOM reconnection
+        // Only run if component has already loaded (refs are available)
+        if (this.hasLoaded && !this.resizeObserver) {
+            this.updateAddonWidths();
+            this.observeAddonResize();
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
+    }
+    componentDidLoad() {
+        this.hasLoaded = true;
+        this.debounceChanged();
+        this.updateAddonWidths();
+        this.observeAddonResize();
+        // Set initial form value
+        this.updateFormValue();
+    }
+    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;
+        }
+        // Update form value when value changes
+        this.updateFormValue();
+    }
+    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 });
+    }
+    /**
+     * Updates the form value using ElementInternals API
+     */
+    updateFormValue() {
+        if (isSpecTest())
+            return;
+        if (this.internals && this.internals.setFormValue) {
+            const value = this.getValue();
+            this.internals.setFormValue(value || null);
+            // Set validity based on native input validation
+            if (this.nativeInput && this.internals && this.internals.setValidity) {
+                this.internals.setValidity(this.nativeInput.validity, this.nativeInput.validationMessage, this.nativeInput);
+            }
+        }
+    }
+    /**
+     * Form Associated Custom Elements API: Called when the form is reset
+     */
+    formResetCallback() {
+        this.value = '';
+        this.updateFormValue();
+    }
+    /**
+     * Form Associated Custom Elements API: Called when the form is disabled
+     */
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    /**
+     * Form Associated Custom Elements API: Called to restore form state
+     */
+    formStateRestoreCallback(state) {
+        if (typeof state === 'string') {
+            this.value = state;
+        }
+        else if (state instanceof FormData && this.name) {
+            // Extract value from FormData using the input's name
+            const value = state.get(this.name);
+            if (typeof value === 'string') {
+                this.value = value;
+            }
+        }
     }
     render() {
-        return (h(Host, { key: 'd11ef85231a61d59752e289cb0832eb971115a84', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '722e05d546051d094ee4d870eaaefea24d241032', class: "pds-input" }, h(PdsLabel, { key: 'a7ff96341748d12c1b9d56dfeb2fc5a9f1cfc2b7', htmlFor: this.componentId, text: this.label }), h("input", { key: '89d5b9cfa436ca98c58da38455c6e08abce6937c', class: "pds-input__field", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, 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: '4fe86e4f98f16c25009b9011cf02e7a71c9050ef', class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("p", { key: '50c1d4b6603868f5494c599298b23814df26782b', class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage))));
+        const { componentId, disabled, errorMessage, helperMessage, invalid = false, label, } = this;
+        const value = this.getValue();
+        const inputWrapperClasses = {
+            'pds-input__field-wrapper': true,
+            'has-focus': this.hasFocus,
+            'has-error': invalid || !!errorMessage,
+            'is-disabled': disabled,
+            'has-prefix': this.hasPrefix,
+            'has-suffix': this.hasSuffix,
+            'has-prepend': this.hasPrepend,
+            'has-append': this.hasAppend,
+        };
+        return (h(Host, { key: '8f15b61e4a6336246aefca1112c280265996630a', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, h("div", { key: '9e45a632a63b813f2f097ef903db9e97f6b88b16', class: "pds-input" }, label && (h("div", { key: 'e9e3710cfa43372a71bbf2440110cd43336c16e3', class: {
+                'pds-input__label-wrapper': true,
+                'visually-hidden': this.hideLabel,
+            } }, h("label", { key: '0717152167b9f8776e23bb95d0b3ebdc58a27e8e', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: 'cf350936ac9981da1773c7320d5092da2d8aa5c6' }, label, this.required && h("span", { key: '115e170ee93a5bc2c4c396aaf235fd0e6ae09a13', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: '00839202f48a22c6a6f00fa706eee81314dc1c04', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: 'cb2234ebf58e2148ea6b4b711ff09338722d4457', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (h("p", { key: 'e322e25b5d6d8fe9c7292087127d7d44c0a27046', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'e3a982cf8312fa2a16360a4667fa5286ce304e68', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: 'ffa236865ab93013f54ea0bf2f993a3c3631e919', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
     }
+    static get formAssociated() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "debounce": [{
+                "debounceChanged": 0
+            }],
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
 };
-PdsInput.style = PdsInputStyle0;
+PdsInput.style = pdsInputTokensCss() + (labelCss() + pdsInputCss());
 
 export { PdsInput as pds_input };
-
-//# sourceMappingURL=pds-input.entry.js.map

package/dist/esm/pds-link.entry.js

@@ -1,17 +1,35 @@
-import { r as registerInstance, h } from './index-2a33b470.js';
-import { l as launch } from './index-a1e2f9af.js';
+import { r as registerInstance, h } from './index-CTLu1TM4.js';
+import { s as setColor } from './utils-tJa4KYNO.js';
+import { l as launch } from './index-Bu9gFIxM.js';
 
-const pdsLinkCss = ":host{--border-outline:4px solid var(--pine-color-blue-200);--border-radius:var(--pine-border-radius-075);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-blue-200);--color-text-default:var(--pine-color-charcoal-400);--font-size:var(--pine-font-size-100);--font-size-sm:var(--pine-font-size-087);--font-size-xs:var(--pine-font-size-075);--font-weight:var(--pine-font-weight-medium);--spacing-inline-start-margin:var(--pine-spacing-050);--sizing-svg-lg:15px;--sizing-svg-md:13px;--sizing-svg-sm:11px;display:inline}:host pds-icon{-webkit-margin-start:var(--spacing-inline-start-margin);margin-inline-start:var(--spacing-inline-start-margin)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color-text);display:-ms-inline-flexbox;display:inline-flex;font-weight:inherit}.pds-link:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-link--sm{font-size:var(--font-size-xs)}.pds-link--sm pds-icon{height:var(--sizing-svg-sm);width:var(--sizing-svg-sm)}.pds-link--md{font-size:var(--font-size-sm)}.pds-link--md pds-icon{height:var(--sizing-svg-md);width:var(--sizing-svg-md)}.pds-link--lg{font-size:var(--font-size)}.pds-link--lg pds-icon{height:var(--sizing-svg-lg);width:var(--sizing-svg-lg)}.pds-link--plain{font-weight:var(--font-weight);text-decoration:none}.pds-link--plain:hover{text-decoration:underline}.pds-link--default{text-decoration:underline}.pds-link--default:hover{text-decoration:none}";
-const PdsLinkStyle0 = pdsLinkCss;
+const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color, var(--pds-context-link-color, var(--pine-color-text)));display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick);position:relative}.pds-link:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:none}:host([color=secondary]) .pds-link{color:var(--pine-color-text-primary)}:host([color=secondary]) .pds-link:hover{color:var(--pine-color-text-inverse-secondary)}:host([color=accent]) .pds-link{color:var(--pine-color-accent)}:host([color=accent]) .pds-link:hover{color:var(--pine-color-accent-hover)}:host([color=danger]) .pds-link{color:var(--pine-color-danger)}:host([color=danger]) .pds-link:hover{color:var(--pine-color-danger-hover)}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:underline}:host([active]) .pds-link{color:var(--pds-context-link-color, var(--pine-color-text-strong));text-decoration:underline}:host([active]) .pds-link:hover{color:var(--pds-context-link-color-hover, var(--pine-color-text-strong));text-decoration:underline}`;
 
 const PdsLink = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.componentId = undefined;
+        /**
+         * Marks the link as the current/active navigation item — for tab strips and
+         * nav rails built from links. Applies the active treatment (persistent
+         * underline + strong text) and sets `aria-current="page"`.
+         * @defaultValue false
+         */
+        this.active = false;
+        /**
+         * Determines whether the link should open in a new tab.
+         * @defaultValue false
+         * @deprecated Consider using the `target` prop for more control. This prop will be maintained for backward compatibility.
+         */
         this.external = false;
+        /**
+         * Sets the link variant styles.
+         * @defaultValue inline
+         */
         this.variant = 'inline';
+        /**
+         * The font size of the link's text.
+         * @defaultValue lg
+         */
         this.fontSize = 'lg';
-        this.href = undefined;
     }
     classNames() {
         const classNames = ['pds-link'];
@@ -23,13 +41,25 @@ const PdsLink = class {
         }
         return classNames.join(' ');
     }
+    setLinkStyles() {
+        if (!this.color)
+            return;
+        const linkColors = {
+            secondary: 'var(--pine-color-text-primary)',
+            accent: 'var(--pine-color-accent)',
+            danger: 'var(--pine-color-danger)',
+        };
+        const linkStyles = setColor(this.color, linkColors);
+        return linkStyles;
+    }
     render() {
-        return (h("a", { key: 'de51c27a4c7e3ab6f105f40b683f7c8d1561049c', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: '3c4fbcff6544a604d81dd4388a504a902d6ee130' }, this.href), this.external &&
-            h("pds-icon", { key: 'fd1acc513efd16134c062ad3845d44be20a911cf', icon: launch, size: this.fontSize })));
+        const targetValue = this.target || (this.external ? '_blank' : undefined);
+        const showExternalIcon = this.external;
+        const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
+        return (h("a", { key: '532bc4afd39f637b021556875a1744dd85d4a227', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, h("slot", { key: '854b411525e89363fbc13fb3119c4f04e611d0a0' }, this.href), showExternalIcon &&
+            h("pds-icon", { key: 'c670f8c1f46bd55b6ebd735a98c0dbff8eb24076', icon: launch, size: this.fontSize })));
     }
 };
-PdsLink.style = PdsLinkStyle0;
+PdsLink.style = pdsLinkCss();
 
 export { PdsLink as pds_link };
-
-//# sourceMappingURL=pds-link.entry.js.map

package/dist/esm/pds-loader.entry.js

@@ -1,12 +1,27 @@
-import { r as registerInstance, h, H as Host } from './index-2a33b470.js';
+import { r as registerInstance, h, H as Host } from './index-CTLu1TM4.js';
 
-const pdsLoaderCss = ":host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-spacing-100)}:host(.pds-loader--hidden),.pds-loader--hidden{border-width:0;clip:rect(0, 0, 0, 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-loader--spinner svg{--color-background-spinner:var(--pine-color-blue-300);--number-spinner-timing:2s;--number-spinner-path-timing:1.5s;-webkit-animation:rotate var(--number-spinner-timing) linear infinite;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{stroke-width:8px}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.pds-loader--typing{--border-radius-typing:var(--pine-border-radius-200);--border-radius-typing-dot:var(--pine-border-radius-round);--box-shadow-typing:var(--pine-box-shadow-sm);--color-background-typing-default:var(--pine-color-grey-200);--color-background-typing-dot-default:var(--pine-color-grey-500);--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);-ms-flex-align:center;align-items:center;background-color:var(--color-background-typing-default);border-radius:var(--border-radius-typing);-webkit-box-shadow:var(--box-shadow-typing);box-shadow:var(--box-shadow-typing);display:-ms-inline-flexbox;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);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);opacity:var(--opacity-typing-dot-default)}.pds-loader--typing span:nth-of-type(1){-webkit-animation:var(--number-typing-timing) typing infinite 0.3333s;animation:var(--number-typing-timing) typing infinite 0.3333s}.pds-loader--typing span:nth-of-type(2){-webkit-animation:var(--number-typing-timing) typing infinite 0.6666s;animation:var(--number-typing-timing) typing infinite 0.6666s}.pds-loader--typing span:nth-of-type(3){-webkit-animation:var(--number-typing-timing) typing infinite 0.9999s;animation:var(--number-typing-timing) typing infinite 0.9999s}@-webkit-keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.2);transform:scale(1.2)}}@keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.2);transform:scale(1.2)}}.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);font:var(--typography-label-default)}";
-const PdsLoaderStyle0 = pdsLoaderCss;
+const pdsLoaderCss = () => `:host{--loader-color:var(--pine-color-primary);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-xs)}:host(.pds-loader--hidden),.pds-loader--hidden{border-width:0;clip:rect(0, 0, 0, 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-loader--spinner svg{--number-spinner-timing:2s;--number-spinner-path-timing:1.5s;-webkit-animation:rotate var(--number-spinner-timing) linear infinite;animation:rotate var(--number-spinner-timing) linear infinite;color:var(--loader-color)}.pds-loader__spinner-path{stroke-width:8px}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.pds-loader--typing{--number-typing-timing:1s;--opacity-typing-dot-default:0.4;--opacity-typing-dot-active:1;-ms-flex-align:center;align-items:center;background-color:var(--pine-color-background-muted);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);display:-ms-inline-flexbox;display:inline-flex;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(--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){-webkit-animation:var(--number-typing-timing) typing infinite 0.3333s;animation:var(--number-typing-timing) typing infinite 0.3333s}.pds-loader--typing span:nth-of-type(2){-webkit-animation:var(--number-typing-timing) typing infinite 0.6666s;animation:var(--number-typing-timing) typing infinite 0.6666s}.pds-loader--typing span:nth-of-type(3){-webkit-animation:var(--number-typing-timing) typing infinite 0.9999s;animation:var(--number-typing-timing) typing infinite 0.9999s}@-webkit-keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.25);transform:scale(1.25)}}@keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.25);transform:scale(1.25)}}.pds-loader__label{--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)}`;
 
 const PdsLoader = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.style = () => {
+        /**
+         * If false, the loader will be hidden.
+         */
+        this.isLoading = true;
+        /**
+         * Determines whether the loader should display a label.
+         */
+        this.showLabel = false;
+        /**
+         * Sets the size of the spinner loader. Value can be preset or custom.
+         */
+        this.size = 'md';
+        /**
+         * Determines the type of loader.
+         */
+        this.variant = 'spinner';
+        this.getSvgStyle = () => {
             if (this.size !== undefined) {
                 return {
                     height: this.loaderSize(),
@@ -14,10 +29,6 @@ const PdsLoader = class {
                 };
             }
         };
-        this.isLoading = true;
-        this.showLabel = false;
-        this.size = 'md';
-        this.variant = 'spinner';
     }
     loaderSize() {
         const sizes = {
@@ -35,11 +46,9 @@ const PdsLoader = class {
         }
     }
     render() {
-        return (h(Host, { key: '325b4512d1455cb90d4897e91453c4ec2370ddcb', 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: 'eed858cd8518769874e7ca6d5265f3e1e77164f3', class: "pds-loader--spinner" }, h("svg", { key: 'fc821517a5923628ef96c8e37b9987c0ba3b987b', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: 'f477b8f7be973a6a5b068b6758d6f549404e64c4' }, h("linearGradient", { key: '4979634cfecdca7ef5818f23577b401aa8991389', id: "spinner-secondHalf" }, h("stop", { key: 'ae4667b10205baa8dec8b7affd34d78273ad9667', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '3d66bc5180831487e9e2591cc2b436f9b8cc855e', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '1c99e9057a86d4b850348543826fb6da163f4eb9', id: "spinner-firstHalf" }, h("stop", { key: '271c14abb61bb9bc01ac72f43d1cc8580b89b6c0', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '4b8de0ac98a1b44ec3bbba4aa0002957e44c976c', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'b12aaf6168c8428999d020b46c99faf918c45f07', class: "pds-loader__spinner-path" }, h("path", { key: '4443446af5cf8c73d3352fa90d580e914c469028', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'ca4edec218d03a74d12ce43a86ef55fbedaea39f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: 'af6ed9732a9fdd2047f100d2465b27782d2a0b02', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '96aa15066aa426d53481bddd5b665181d9bcd0bd', class: "pds-loader--typing" }, h("span", { key: 'a0bb9722a2dbaf843afc9a50a1f42c46758d1b5e' }), h("span", { key: '0efc9cf2f132f358f58561ccbc7027c57f252df2' }), h("span", { key: 'b8b73b864c7dfefe26ac3aa33099d2f2f3737614' }))), h("div", { key: '3c921244741289e7b67228caedf6e5e13fac1d63', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '423a30358e6f662a0b80cef445c4a20db3dd36f9', name: "label" }, "Loading..."))));
+        return (h(Host, { key: '288e980a91a4a05984ec7d16c198cff227a2e676', 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: 'dc8643b932182b540ce93dd87dad10f07174d59f', class: "pds-loader--spinner" }, h("svg", { key: '2cec5ddfdf9772c0d20ce11a6bf070d0bc06a53b', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: 'f2554f75fe1bd3e0e3afc1947220d3c004184e84' }, h("linearGradient", { key: 'edef079f8b959604ec9f911739a78801c5f285c0', id: "spinner-secondHalf" }, h("stop", { key: '337a53ea77d19e9dfd3a5d43f01f6886c71f190b', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: 'ca2e6363e2feece31ba1a4b2de0d3ec66c4c45f9', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '5458cf7f8e9e35e23dfc5aa4e5f7ef5c7b9d142d', id: "spinner-firstHalf" }, h("stop", { key: '7cbb4bc34f8792e648c8bf1bfe6db8e319bf68cf', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'febbf165e3da7d328dfa35cf5930a8069fea604e', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'a2becedb247748508013f80c9dbd6eccc6818e6f', class: "pds-loader__spinner-path" }, h("path", { key: '2df230f57210ee7c10ff22d99d3fd8a1dd17b217', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'b85ae9aebe39f99d1d06a3e03e8ef7027fa8a866', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '9f0508fdf50f6274e2b0656565585198f6105b68', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '0520d0113a7b4498692e523c273616d67b90f042', class: "pds-loader--typing" }, h("span", { key: 'a1083f20b9cd04d1ba685aafd736fcd154dc597f' }), h("span", { key: '9eab7a6bfcca61861cbdd01953b2aa0762770b80' }), h("span", { key: 'd4599150cd603fcfe6b2f50044a0ed867fad6070' }))), h("div", { key: 'b37bc877a5fd6cd7249b10bca48ac50eb31f4f40', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '689ca4190506689ca6c92b61ada5c96a2a1427ab', name: "label" }, "Loading..."))));
     }
 };
-PdsLoader.style = PdsLoaderStyle0;
+PdsLoader.style = pdsLoaderCss();
 
 export { PdsLoader as pds_loader };
-
-//# sourceMappingURL=pds-loader.entry.js.map