@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/cjs/pds-image.cjs.entry.js

@@ -1,32 +1,174 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-D9iJuJCP.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
-const index = require('./index-46fb0736.js');
-
-const pdsImageCss = ":host{--dimension-aspect-ratio:auto;display:inline-block}img{aspect-ratio:var(--dimension-aspect-ratio);height:auto;width:100%}";
-const PdsImageStyle0 = pdsImageCss;
+const pdsImageCss = () => `:host{--dimension-aspect-ratio:auto;--dimension-object-fit:cover;display:inline-block}img{aspect-ratio:var(--dimension-aspect-ratio);display:block;height:auto;max-width:100%;-o-object-fit:var(--dimension-object-fit);object-fit:var(--dimension-object-fit)}:host(.pds-image--has-ratio){display:block}:host(.pds-image--has-ratio) img{width:100%}`;
 
 const PdsImage = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.pdsImageLoad = index.createEvent(this, "pdsImageLoad");
+        this.pdsImageError = index.createEvent(this, "pdsImageError");
+        /**
+         * The image's alt text. Defaults to an empty string, which marks the image
+         * as decorative and hides it from screen readers, so set it on any image
+         * that carries information.
+         * @defaultValue ''
+         */
         this.alt = '';
-        this.componentId = undefined;
-        this.height = undefined;
+        /**
+         * Determines how the image fills the shape set by `ratio`.
+         * Has no effect if `ratio` is not set.
+         * @defaultValue cover
+         */
+        this.fit = 'cover';
+        /**
+         * Indicates how the browser should load the image.
+         * @defaultValue eager
+         */
         this.loading = 'eager';
-        this.sizes = undefined;
-        this.src = undefined;
-        this.srcset = undefined;
-        this.width = undefined;
+        /**
+         * The source and event last emitted. A cached image can report `complete` on first
+         * render and still fire its own `load` event afterwards, so this keeps one source
+         * from emitting twice. A `load` still replaces an `error` for the same source, in
+         * case `decode()` misjudged an image that did load.
+         */
+        this.settled = null;
+        this.emitLoad = () => {
+            var _a;
+            if (!this.hasSource())
+                return;
+            const { currentSrc, naturalHeight, naturalWidth } = this.imageEl;
+            if (!this.showsCurrentSource())
+                return;
+            if (((_a = this.settled) === null || _a === void 0 ? void 0 : _a.src) === currentSrc && this.settled.type === 'load')
+                return;
+            this.settled = { src: currentSrc, type: 'load' };
+            this.pdsImageLoad.emit({ currentSrc, naturalHeight, naturalWidth });
+        };
+        this.emitError = () => {
+            var _a;
+            if (!this.hasSource())
+                return;
+            const { currentSrc } = this.imageEl;
+            if (!this.showsCurrentSource())
+                return;
+            if (((_a = this.settled) === null || _a === void 0 ? void 0 : _a.src) === currentSrc)
+                return;
+            this.settled = { src: currentSrc, type: 'error' };
+            this.pdsImageError.emit({ currentSrc });
+        };
+    }
+    handleSourceChange() {
+        this.settled = null;
+    }
+    componentDidLoad() {
+        const img = this.imageEl;
+        // With no `src` or `srcset` there is nothing to load and no event to emit. An empty
+        // `src` still counts: the browser treats it as a failed load.
+        if (!(img === null || img === void 0 ? void 0 : img.complete) || !this.hasSource())
+            return;
+        if (img.naturalWidth > 0) {
+            this.emitLoad();
+            return;
+        }
+        // `complete` with no intrinsic width is either a broken image or an SVG with no
+        // intrinsic size, and only decoding tells them apart. Without `decode()`, leave it
+        // to the native events.
+        if (typeof img.decode !== 'function')
+            return;
+        const src = img.currentSrc;
+        img.decode().then(() => img.currentSrc === src && this.emitLoad(), () => img.currentSrc === src && this.emitError());
+    }
+    // With no `src` or `srcset` attribute at all there is nothing to load and no event to
+    // emit. Clearing `src` can leave a brief window where Stencil has removed the attribute
+    // but a native `error` for the old, momentarily-empty `src` is still in flight (Firefox,
+    // Safari) — this check, read live at emit time, is what catches that window.
+    hasSource() {
+        const img = this.imageEl;
+        return img.hasAttribute('src') || img.hasAttribute('srcset');
+    }
+    /**
+     * The resolved absolute URL `src` would become once applied, or `undefined` for no
+     * `src`. Resolving it (rather than comparing raw attribute text) matches `img.src`
+     * even when Stencil skipped writing the attribute because the resolved value already
+     * equaled it, such as a `src` change from a relative to an equivalent absolute URL.
+     */
+    resolvedSrc() {
+        if (this.src == null)
+            return undefined;
+        try {
+            return new URL(this.src, document.baseURI).href;
+        }
+        catch (_a) {
+            return this.src;
+        }
+    }
+    /**
+     * Whether the inner image is showing the current `src` and `srcset`. Right after
+     * either changes, and before the next render applies it, an event can still arrive
+     * for the old source, and it shouldn't be emitted for the new one.
+     */
+    showsCurrentSource() {
+        var _a, _b;
+        const img = this.imageEl;
+        if (((_a = img.getAttribute('srcset')) !== null && _a !== void 0 ? _a : undefined) !== ((_b = this.srcset) !== null && _b !== void 0 ? _b : undefined))
+            return false;
+        const expectedSrc = this.resolvedSrc();
+        const srcMatches = expectedSrc === undefined ? !img.hasAttribute('src') : img.src === expectedSrc;
+        if (!srcMatches)
+            return false;
+        // Without `srcset`, a `load`/`error` for the right `src` should already be reflected in
+        // `currentSrc`. If it isn't yet, a stale native event from the previous source is still in
+        // flight — such as a cached image's `load` arriving just after a same-tick re-render
+        // already applied the new `src`. Skipped for an empty `src`: an empty attribute resolves
+        // `img.src` to the document's own URL, which `currentSrc` never settles to. `currentSrc` is
+        // already an absolute URL in a real browser, so resolving it here is a no-op there; it only
+        // matters in test environments whose mocked `currentSrc` isn't resolved the way `img.src` is.
+        if (!this.srcset && this.src) {
+            try {
+                return new URL(img.currentSrc, document.baseURI).href === img.src;
+            }
+            catch (_c) {
+                return img.currentSrc === img.src;
+            }
+        }
+        return true;
+    }
+    imageRatio() {
+        var _a;
+        const ratios = {
+            square: '1 / 1',
+            landscape: '4 / 3',
+            wide: '16 / 9',
+            portrait: '3 / 4',
+            tall: '9 / 16',
+        };
+        return (_a = ratios[this.ratio]) !== null && _a !== void 0 ? _a : this.ratio;
     }
     render() {
-        return (index.h(index.Host, { key: '8d97b63e1c5b0eb72117d6378a0b6d869c0dbdea', class: {
+        // `!= null`, not `!== undefined`: removing the attribute sets the prop to `null`, not `undefined`.
+        const hasRatio = this.ratio != null && this.ratio !== '';
+        // `fit` only means something once a ratio gives the image a shape to
+        // overflow, so neither is applied until `ratio` is set.
+        const ratioStyle = hasRatio
+            ? { aspectRatio: this.imageRatio(), objectFit: this.fit }
+            : undefined;
+        return (index.h(index.Host, { key: 'f01ae0cef8a08b686a62affe14e58661115f1e2e', class: {
                 'pds-image': true,
-            }, id: this.componentId }, index.h("img", { key: '3cc2d1c185244c8e8de2f7258b85194b37a4ff38', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+                'pds-image--has-ratio': hasRatio,
+            } }, index.h("img", { key: '3e609d3b73154ea5c83ae2df58352b0021075373', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, style: ratioStyle, width: this.width, onLoad: this.emitLoad, onError: this.emitError, ref: (el) => (this.imageEl = el) })));
     }
+    static get watchers() { return {
+        "src": [{
+                "handleSourceChange": 0
+            }],
+        "srcset": [{
+                "handleSourceChange": 0
+            }]
+    }; }
 };
-PdsImage.style = PdsImageStyle0;
+PdsImage.style = pdsImageCss();
 
 exports.pds_image = PdsImage;
-
-//# sourceMappingURL=pds-image.cjs.entry.js.map

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

@@ -1,45 +1,319 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-D9iJuJCP.js');
+var form = require('./form-MhwfKTuo.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
+var utils = require('./utils-BhRmyxT8.js');
+var index$1 = require('./index-BDnbr0DK.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
-const index = require('./index-46fb0736.js');
-const pdsLabel = require('./pds-label-7aabdc4e.js');
+const pdsInputTokensCss = () => `:host{--pine-input-color-background-danger:var(--pine-color-red-050)}`;
 
-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 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) {
         index.registerInstance(this, hostRef);
-        this.pdsInput = index.createEvent(this, "pdsInput", 7);
+        this.pdsBlur = index.createEvent(this, "pdsBlur");
+        this.pdsChange = index.createEvent(this, "pdsChange");
+        this.pdsFocus = index.createEvent(this, "pdsFocus");
+        this.pdsInput = index.createEvent(this, "pdsInput");
+        this.pdsKeyDown = index.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'`, `'search'`, `'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 (index.h("div", { class: "pds-input__prefix", part: "prefix", ref: (el) => this.prefixEl = el }, index.h("slot", { name: "prefix", onSlotchange: () => this.updateAddonWidths() })));
+        }
+        return null;
+    }
+    renderSuffix() {
+        const hasSuffix = this.el.querySelector('[slot="suffix"]') !== null;
+        if (hasSuffix) {
+            return (index.h("div", { class: "pds-input__suffix", part: "suffix", ref: (el) => this.suffixEl = el }, index.h("slot", { name: "suffix", onSlotchange: () => this.updateAddonWidths() })));
+        }
+        return null;
+    }
+    renderPrepend() {
+        const hasPrepend = this.el.querySelector('[slot="prepend"]') !== null;
+        if (hasPrepend) {
+            return (index.h("div", { class: "pds-input__prepend", part: "prepend" }, index.h("slot", { name: "prepend" })));
+        }
+        return null;
+    }
+    renderAppend() {
+        const hasAppend = this.el.querySelector('[slot="append"]') !== null;
+        if (hasAppend) {
+            return (index.h("div", { class: "pds-input__append", part: "append" }, index.h("slot", { name: "append" })));
+        }
+        return null;
+    }
+    renderAction() {
+        const hasAction = this.el.querySelector('[slot="action"]') !== null;
+        if (hasAction) {
+            return (index.h("div", { class: "pds-input__action", part: "action" }, index.h("slot", { name: "action" })));
+        }
+        return null;
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, attributes.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;
+        utils.cancelDebouncedEvent(this.pdsInput);
+        (_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 : utils.debounceEvent(pdsInput, debounce);
+        // After the swap, so an emit made while flushing goes to the new emitter, not the old one.
+        utils.flushDebouncedEvent(pdsInput);
+    }
+    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 (form.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 (index.h(index.Host, { key: 'd11ef85231a61d59752e289cb0832eb971115a84', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: '722e05d546051d094ee4d870eaaefea24d241032', class: "pds-input" }, index.h(pdsLabel.PdsLabel, { key: 'a7ff96341748d12c1b9d56dfeb2fc5a9f1cfc2b7', htmlFor: this.componentId, text: this.label }), index.h("input", { key: '89d5b9cfa436ca98c58da38455c6e08abce6937c', class: "pds-input__field", "aria-describedby": pdsLabel.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 &&
-            index.h("p", { key: '4fe86e4f98f16c25009b9011cf02e7a71c9050ef', class: "pds-input__helper-message", id: pdsLabel.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            index.h("p", { key: '50c1d4b6603868f5494c599298b23814df26782b', class: "pds-input__error-message", id: pdsLabel.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 (index.h(index.Host, { key: '12dd9f60e5b7401fdad3d81aacf174d1465dfdd6', "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 }, index.h("div", { key: '5c8c1488cd9041333cf22e5ef36c367d8bddcc21', class: "pds-input" }, label && (index.h("div", { key: '2fd1d0a71714e11ff7675f3ab376c859b717122e', class: {
+                'pds-input__label-wrapper': true,
+                'visually-hidden': this.hideLabel,
+            } }, index.h("label", { key: '82623092a61b5158daa39937a8c8e01081cb6fa3', htmlFor: componentId, class: "pds-input__label" }, index.h("span", { key: '10a973c6191458f1133c34ccfdfd5342d330829d' }, label, this.required && index.h("span", { key: '413deb83a0c8b7f0ab0e5648a7bde19166477a1c', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), index.h("div", { key: 'c90ff99e08ab480453015fa293d38077204ea07c', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), index.h("input", Object.assign({ key: 'd558ffc9369bd19c454f88c48acde45a4a992122', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": form.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 && (index.h("p", { key: '747fd78b735924efb0a0e074ef20eac011c8887b', class: "pds-input__helper-message", id: form.messageId(componentId, 'helper') }, helperMessage)), errorMessage && (index.h("p", { key: '1a1ce87923e24bd70fc85f410c1eb3e69f16171f', class: "pds-input__error-message", id: form.messageId(componentId, 'error') }, index.h("pds-icon", { key: 'be6bb7c6e24b379afd7cd6977b5555f680b41f6b', "aria-hidden": "true", icon: index$1.danger, size: "small" }), errorMessage)))));
     }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "debounce": [{
+                "debounceChanged": 0
+            }],
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
 };
-PdsInput.style = PdsInputStyle0;
+PdsInput.style = pdsInputTokensCss() + (labelCss() + pdsInputCss());
 
 exports.pds_input = PdsInput;
-
-//# sourceMappingURL=pds-input.cjs.entry.js.map