@pine-ds/core 3.26.4 → 3.27.0

package/components/pds-input.js

@@ -1,372 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { i as isSpecTest, a as assignDescription, m as messageId } from './form.js';
-import { i as inheritAriaAttributes } from './attributes.js';
-import { d as debounceEvent } from './utils.js';
-import { h as danger } from './index2.js';
-import { d as defineCustomElement$2 } from './pds-icon2.js';
-
-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:var(--pine-z-index-raised)}: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$1 = /*@__PURE__*/ proxyCustomElement(class PdsInput extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.pdsBlur = createEvent(this, "pdsBlur", 7);
-        this.pdsChange = createEvent(this, "pdsChange", 7);
-        this.pdsFocus = createEvent(this, "pdsFocus", 7);
-        this.pdsInput = createEvent(this, "pdsInput", 7);
-        this.pdsKeyDown = createEvent(this, "pdsKeyDown", 7);
-        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.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() {
-        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: 'ecf4cc212e5c3ebc18082b790803e6b2ccb8ca77', "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: 'acdf92a30068fc04a17816ec6d85295b47e512ee', class: "pds-input" }, label && (h("div", { key: '4569f0b3761db89e85a090eff6af1c47cb562115', class: {
-                'pds-input__label-wrapper': true,
-                'visually-hidden': this.hideLabel,
-            } }, h("label", { key: '90b0a863d78115fa158429db11548fc2a9ee5ae6', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: '3d440aaafc4daeffe45152cd23d27472d7ebf85a' }, label, this.required && h("span", { key: 'c7bf6ef6191e961a106b8885cab604aa89730eba', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: '81f0b8a347bc9a06c753b9f31f5e30ac78e45adb', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: '3785b396bf9174766973e8b19028e4dcecde19d9', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage), "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: 'e9e4aa936346811e0a5ca0fa5107f548b52fcc99', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'ef3694246fa3d8f818da438e7ec4411dd56b084c', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: '0e52079db701ca720cfa4d474107e55c85df5052', icon: danger, size: "small" }), errorMessage)))));
-    }
-    static get formAssociated() { return true; }
-    get el() { return this; }
-    static get watchers() { return {
-        "debounce": ["debounceChanged"],
-        "value": ["valueChanged"]
-    }; }
-    static get style() { return pdsInputTokensCss + (labelCss + pdsInputCss); }
-}, [321, "pds-input", {
-        "autocomplete": [1],
-        "componentId": [1, "component-id"],
-        "debounce": [2],
-        "disabled": [4],
-        "errorMessage": [1, "error-message"],
-        "helperMessage": [1, "helper-message"],
-        "invalid": [4],
-        "label": [1],
-        "hideLabel": [4, "hide-label"],
-        "max": [1],
-        "maxlength": [1],
-        "min": [1],
-        "minlength": [1],
-        "name": [1],
-        "pattern": [1],
-        "placeholder": [1],
-        "readonly": [4],
-        "required": [4],
-        "step": [1],
-        "type": [1],
-        "value": [1032],
-        "fullWidth": [4, "full-width"],
-        "highlight": [516],
-        "hasPrefix": [32],
-        "hasSuffix": [32],
-        "hasPrepend": [32],
-        "hasAppend": [32],
-        "hasAction": [32],
-        "hasFocus": [32],
-        "setFocus": [64]
-    }, undefined, {
-        "debounce": ["debounceChanged"],
-        "value": ["valueChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-input", "pds-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-input":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsInput$1);
-            }
-            break;
-        case "pds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PdsInput = PdsInput$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsInput, defineCustomElement };
-//# sourceMappingURL=pds-input.js.map
-
-//# sourceMappingURL=pds-input.js.map
+import{proxyCustomElement as e,HTMLElement as r,createEvent as i,h as t,Host as n,transformTag as s}from"@stencil/core/internal/client";import{i as d,a as o,m as a}from"./form.js";import{i as p}from"./attributes.js";import{d as l}from"./utils.js";import{h as u}from"./index2.js";import{d as c}from"./pds-icon2.js";const h=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.pdsBlur=i(this,"pdsBlur",7),this.pdsChange=i(this,"pdsChange",7),this.pdsFocus=i(this,"pdsFocus",7),this.pdsInput=i(this,"pdsInput",7),this.pdsKeyDown=i(this,"pdsKeyDown",7),this.inheritedAttributes={},this.isComposing=!1,this.hasLoaded=!1,this.hasPrefix=!1,this.hasSuffix=!1,this.hasPrepend=!1,this.hasAppend=!1,this.hasAction=!1,this.type="text",this.value="",this.hasFocus=!1,this.onInputEvent=e=>{const r=e.target;r&&(this.value=r.value||""),this.emitInputChange(e)},this.onChangeEvent=e=>{this.emitValueChange(e)},this.onBlurEvent=e=>{this.hasFocus=!1,this.focusedValue!==this.value&&this.emitValueChange(e),this.pdsBlur.emit(e)},this.onFocusEvent=e=>{this.hasFocus=!0,this.focusedValue=this.value,this.pdsFocus.emit(e)},this.onCompositionStart=()=>{this.isComposing=!0},this.onCompositionEnd=()=>{this.isComposing=!1},this.onKeyDownEvent=e=>{this.pdsKeyDown.emit(e)}}async setFocus(){this.nativeInput&&this.nativeInput.focus()}observeAddonResize(){var e;"undefined"!=typeof ResizeObserver&&(null===(e=this.resizeObserver)||void 0===e||e.disconnect(),this.resizeObserver=new ResizeObserver((()=>{this.updateAddonWidths()})),this.prefixEl&&this.resizeObserver.observe(this.prefixEl),this.suffixEl&&this.resizeObserver.observe(this.suffixEl))}updateAddonWidths(){requestAnimationFrame((()=>{this.prefixEl&&this.el.style.setProperty("--prefix-width",this.prefixEl.offsetWidth+"px"),this.suffixEl&&this.el.style.setProperty("--suffix-width",this.suffixEl.offsetWidth+"px")}))}renderPrefix(){return null!==this.el.querySelector('[slot="prefix"]')?t("div",{class:"pds-input__prefix",part:"prefix",ref:e=>this.prefixEl=e},t("slot",{name:"prefix",onSlotchange:()=>this.updateAddonWidths()})):null}renderSuffix(){return null!==this.el.querySelector('[slot="suffix"]')?t("div",{class:"pds-input__suffix",part:"suffix",ref:e=>this.suffixEl=e},t("slot",{name:"suffix",onSlotchange:()=>this.updateAddonWidths()})):null}renderPrepend(){return null!==this.el.querySelector('[slot="prepend"]')?t("div",{class:"pds-input__prepend",part:"prepend"},t("slot",{name:"prepend"})):null}renderAppend(){return null!==this.el.querySelector('[slot="append"]')?t("div",{class:"pds-input__append",part:"append"},t("slot",{name:"append"})):null}renderAction(){return null!==this.el.querySelector('[slot="action"]')?t("div",{class:"pds-input__action",part:"action"},t("slot",{name:"action"})):null}componentWillLoad(){this.inheritedAttributes=Object.assign({},p(this.el)),this.hasPrefix=null!==this.el.querySelector('[slot="prefix"]'),this.hasSuffix=null!==this.el.querySelector('[slot="suffix"]'),this.hasPrepend=null!==this.el.querySelector('[slot="prepend"]'),this.hasAppend=null!==this.el.querySelector('[slot="append"]'),this.hasAction=null!==this.el.querySelector('[slot="action"]'),this.originalPdsInput=this.pdsInput}connectedCallback(){this.el.attachInternals&&!this.internals&&(this.internals=this.el.attachInternals()),this.hasLoaded&&!this.resizeObserver&&(this.updateAddonWidths(),this.observeAddonResize())}disconnectedCallback(){var e;null===(e=this.resizeObserver)||void 0===e||e.disconnect(),this.resizeObserver=void 0}componentDidLoad(){this.hasLoaded=!0,this.debounceChanged(),this.updateAddonWidths(),this.observeAddonResize(),this.updateFormValue()}debounceChanged(){const{pdsInput:e,debounce:r,originalPdsInput:i}=this;this.pdsInput=void 0===r?null!=i?i:e:l(e,r)}valueChanged(){const e=this.nativeInput,r=this.getValue();e&&e.value!==r&&!this.isComposing&&(e.value=r),this.updateFormValue()}getValue(){return"number"==typeof this.value?""+this.value:""+(this.value||"")}emitValueChange(e){const{value:r}=this,i=null==r?r:""+r;this.focusedValue=i,this.pdsChange.emit({value:i,event:e})}emitInputChange(e){const{value:r}=this;this.pdsInput.emit({value:null==r?r:""+r,event:e})}updateFormValue(){if(!d()&&this.internals&&this.internals.setFormValue){const e=this.getValue();this.internals.setFormValue(e||null),this.nativeInput&&this.internals&&this.internals.setValidity&&this.internals.setValidity(this.nativeInput.validity,this.nativeInput.validationMessage,this.nativeInput)}}formResetCallback(){this.value="",this.updateFormValue()}formDisabledCallback(e){this.disabled=e}formStateRestoreCallback(e){if("string"==typeof e)this.value=e;else if(e instanceof FormData&&this.name){const r=e.get(this.name);"string"==typeof r&&(this.value=r)}}render(){const{componentId:e,disabled:r,errorMessage:i,helperMessage:s,invalid:d=!1,label:p}=this,l=this.getValue(),c={"pds-input__field-wrapper":!0,"has-focus":this.hasFocus,"has-error":d||!!i,"is-disabled":r,"has-prefix":this.hasPrefix,"has-suffix":this.hasSuffix,"has-prepend":this.hasPrepend,"has-append":this.hasAppend};return t(n,{key:"ecf4cc212e5c3ebc18082b790803e6b2ccb8ca77","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},t("div",{key:"acdf92a30068fc04a17816ec6d85295b47e512ee",class:"pds-input"},p&&t("div",{key:"4569f0b3761db89e85a090eff6af1c47cb562115",class:{"pds-input__label-wrapper":!0,"visually-hidden":this.hideLabel}},t("label",{key:"90b0a863d78115fa158429db11548fc2a9ee5ae6",htmlFor:e,class:"pds-input__label"},t("span",{key:"3d440aaafc4daeffe45152cd23d27472d7ebf85a"},p,this.required&&t("span",{key:"c7bf6ef6191e961a106b8885cab604aa89730eba",class:"pds-input__required-indicator"}," *"))),!this.hideLabel&&this.renderAction()),t("div",{key:"81f0b8a347bc9a06c753b9f31f5e30ac78e45adb",class:c},this.renderPrepend(),this.renderPrefix(),t("input",Object.assign({key:"3785b396bf9174766973e8b19028e4dcecde19d9",ref:e=>this.nativeInput=e,class:"pds-input__field","aria-describedby":o(e,d,s),"aria-invalid":d?"true":void 0,autocomplete:this.autocomplete,disabled:r,id:e,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:l,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()),s&&t("p",{key:"e9e4aa936346811e0a5ca0fa5107f548b52fcc99",class:"pds-input__helper-message",id:a(e,"helper")},s),i&&t("p",{key:"ef3694246fa3d8f818da438e7ec4411dd56b084c",class:"pds-input__error-message",id:a(e,"error")},t("pds-icon",{key:"f1e488b33c8338f54cd83a59e219311a844e3c97","aria-hidden":"true",icon:u,size:"small"}),i)))}static get formAssociated(){return!0}get el(){return this}static get watchers(){return{debounce:[{debounceChanged:0}],value:[{valueChanged:0}]}}static get style(){return":host{--pine-input-color-background-danger:var(--pine-color-red-050)}: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)}: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:var(--pine-z-index-raised)}: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)}"}},[321,"pds-input",{autocomplete:[1],componentId:[1,"component-id"],debounce:[2],disabled:[4],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],label:[1],hideLabel:[4,"hide-label"],max:[1],maxlength:[1],min:[1],minlength:[1],name:[1],pattern:[1],placeholder:[1],readonly:[4],required:[4],step:[1],type:[1],value:[1032],fullWidth:[4,"full-width"],highlight:[516],hasPrefix:[32],hasSuffix:[32],hasPrepend:[32],hasAppend:[32],hasAction:[32],hasFocus:[32],setFocus:[64]},void 0,{debounce:[{debounceChanged:0}],value:[{valueChanged:0}]}]),b=h,v=function(){"undefined"!=typeof customElements&&["pds-input","pds-icon"].forEach((e=>{switch(e){case"pds-input":customElements.get(s(e))||customElements.define(s(e),h);break;case"pds-icon":customElements.get(s(e))||c()}}))};export{b as PdsInput,v as defineCustomElement}

package/components/pds-link.js

@@ -1,9 +1 @@
-import { P as PdsLink$1, d as defineCustomElement$1 } from './pds-link2.js';
-
-const PdsLink = PdsLink$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsLink, defineCustomElement };
-//# sourceMappingURL=pds-link.js.map
-
-//# sourceMappingURL=pds-link.js.map
+import{P as s,d as o}from"./pds-link2.js";const p=s,r=o;export{p as PdsLink,r as defineCustomElement}

package/components/pds-link2.js

@@ -1,93 +1 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { s as setColor } from './utils.js';
-import { l as launch } from './index2.js';
-import { d as defineCustomElement$1 } from './pds-icon2.js';
-
-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}";
-
-const PdsLink = /*@__PURE__*/ proxyCustomElement(class PdsLink extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * 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';
-    }
-    classNames() {
-        const classNames = ['pds-link'];
-        if (this.fontSize) {
-            classNames.push('pds-link--' + this.fontSize);
-        }
-        if (this.variant) {
-            classNames.push('pds-link--' + this.variant);
-        }
-        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() {
-        const targetValue = this.target || (this.external ? '_blank' : undefined);
-        const showExternalIcon = this.external;
-        const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
-        return (h("a", { key: '8ab68ceb91a4c7b155a4ae54d2cb421af4d0eec1', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", target: targetValue, rel: relValue, style: this.setLinkStyles() }, h("slot", { key: 'b90dc967867a3b765d632c16458236e6e4ccf97e' }, this.href), showExternalIcon &&
-            h("pds-icon", { key: 'ebffdba1a21f7b0f5730608ec5eb88519ee79d1b', icon: launch, size: this.fontSize })));
-    }
-    static get style() { return pdsLinkCss; }
-}, [257, "pds-link", {
-        "color": [1],
-        "download": [1],
-        "componentId": [1, "component-id"],
-        "external": [4],
-        "target": [1],
-        "variant": [1],
-        "fontSize": [1, "font-size"],
-        "href": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-link", "pds-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-link":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsLink);
-            }
-            break;
-        case "pds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { PdsLink as P, defineCustomElement as d };
-//# sourceMappingURL=pds-link2.js.map
-
-//# sourceMappingURL=pds-link2.js.map
+import{proxyCustomElement as o,HTMLElement as e,h as i,transformTag as t}from"@stencil/core/internal/client";import{s as n}from"./utils.js";import{l as r}from"./index2.js";import{d as s}from"./pds-icon2.js";const a=o(class extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.external=!1,this.variant="inline",this.fontSize="lg"}classNames(){const o=["pds-link"];return this.fontSize&&o.push("pds-link--"+this.fontSize),this.variant&&o.push("pds-link--"+this.variant),o.join(" ")}setLinkStyles(){if(this.color)return n(this.color,{secondary:"var(--pine-color-text-primary)",accent:"var(--pine-color-accent)",danger:"var(--pine-color-danger)"})}render(){const o=this.target||(this.external?"_blank":void 0),e=this.external,t="_blank"===o?"noopener noreferrer":void 0;return i("a",{key:"314a6249f39716ab2e632c2cb4c588ce2c74a77b",class:this.classNames(),download:this.download,href:this.href,id:this.componentId,part:"link",target:o,rel:t,style:this.setLinkStyles(),"data-turbo":this.turbo||void 0,"data-turbo-frame":this.turboFrame||void 0,"data-turbo-action":this.turboAction||void 0,"data-turbo-method":this.turboMethod||void 0,"data-turbo-confirm":this.turboConfirm||void 0,"data-turbo-stream":this.turboStream||void 0,"data-turbo-prefetch":this.turboPrefetch||void 0,"data-turbo-preload":this.turboPreload||void 0},i("slot",{key:"ceab5601c349ece4b142f16f682d5a2d2d0ba59a"},this.href),e&&i("pds-icon",{key:"cba3137af21eb374c8318e43e279e77fefdc1b5c",icon:r,size:this.fontSize}))}static get style(){return":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}"}},[257,"pds-link",{color:[1],download:[1],componentId:[1,"component-id"],external:[4],target:[1],variant:[1],fontSize:[1,"font-size"],href:[1],turbo:[1],turboFrame:[1,"turbo-frame"],turboAction:[1,"turbo-action"],turboMethod:[1,"turbo-method"],turboConfirm:[1,"turbo-confirm"],turboStream:[1,"turbo-stream"],turboPrefetch:[1,"turbo-prefetch"],turboPreload:[1,"turbo-preload"]}]);function d(){"undefined"!=typeof customElements&&["pds-link","pds-icon"].forEach((o=>{switch(o){case"pds-link":customElements.get(t(o))||customElements.define(t(o),a);break;case"pds-icon":customElements.get(t(o))||s()}}))}export{a as P,d}

package/components/pds-loader.js

@@ -1,9 +1 @@
-import { P as PdsLoader$1, d as defineCustomElement$1 } from './pds-loader2.js';
-
-const PdsLoader = PdsLoader$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PdsLoader, defineCustomElement };
-//# sourceMappingURL=pds-loader.js.map
-
-//# sourceMappingURL=pds-loader.js.map
+import{P as o,d as s}from"./pds-loader2.js";const r=o,a=s;export{r as PdsLoader,a as defineCustomElement}