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

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

@@ -1,37 +1,173 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-D9iJuJCP.js');
+var form = require('./form-MhwfKTuo.js');
+var utils = require('./utils-BhRmyxT8.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
+var index$1 = require('./index-BDnbr0DK.js');
+var i18nFormat = require('./i18n-format-BD0PmYzT.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
-const index = require('./index-46fb0736.js');
-const pdsLabel = require('./pds-label-7aabdc4e.js');
+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 pdsTextareaCss = ":host{--border-interactive-default:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--box-shadow-focus:0 0 0 2px var(--color-focus-visible-outline);--box-shadow-focus-error:0 0 0 2px var(--color-focus-visible-outline-error);--color:var(--pine-color-charcoal-400);--color-background:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-200);--color-border-default:var(--pine-color-grey-400);--color-border-error:var(--pine-color-red-300);--color-border-focus-visible:var(--pine-color-grey-300);--color-border-hover:var(--pine-color-grey-500);--color-disabled-default:var(--pine-color-charcoal-200);--color-error-default:var(--pine-color-red-300);--color-focus-visible-outline:var(--pine-color-blue-200);--color-focus-visible-outline-error:var(--pine-color-red-200);--color-placeholder-default:var(--pine-color-charcoal-200);--font-size-field:var(--pine-font-size-100);--font-size-helper-message:var(--pine-font-size-075);--font-size-label:var(--pine-font-size-100);--font-weight-field:var(--pine-font-weight-normal);--font-weight-helper-message:var(--pine-font-weight-normal);--font-weight-label:var(--pine-font-weight-medium);--line-height-field:var(--pine-line-height-150);--line-height-helper-message:var(--pine-line-height-125);--line-height-label:var(--pine-line-height-150);--spacing-margin-block-end-label:var(--pine-spacing-100);--spacing-margin-block-start-helper-message:var(--pine-spacing-100);--spacing-padding-block-field:var(--pine-spacing-100);--spacing-padding-inline-field:var(--pine-spacing-200);display:inline}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}label{display:block;font-size:var(--font-size-label);font-weight:var(--font-weight-label);line-height:var(--line-height-label);-webkit-margin-after:var(--spacing-margin-block-end-label);margin-block-end:var(--spacing-margin-block-end-label)}.pds-textarea__field{background-color:var(--color-background);border:var(--pine-border-interactive-default);border-radius:var(--pine-border-radius-md);font-family:inherit;font-size:var(--font-size-field);font-weight:var(--font-weight-field);line-height:var(--line-height-field);padding:var(--spacing-padding-block-field) var(--spacing-padding-inline-field)}.pds-textarea__field:hover:not(:disabled,.is-invalid){border-color:var(--color-border-hover)}.pds-textarea__field:disabled{background-color:var(--color-background-disabled);color:var(--color-disabled-default);cursor:not-allowed}.pds-textarea__field:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-textarea__field::-webkit-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-moz-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field:-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::-ms-input-placeholder{color:var(--color-placeholder-default)}.pds-textarea__field::placeholder{color:var(--color-placeholder-default)}.pds-textarea__field.is-invalid{border-color:var(--color-border-error)}.pds-textarea__field.is-invalid:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}.pds-textarea__error-message,.pds-textarea__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-before:var(--spacing-margin-block-start-helper-message);margin-block-start:var(--spacing-margin-block-start-helper-message)}.pds-textarea__error-message{color:var(--color-error-default)}";
-const PdsTextareaStyle0 = pdsTextareaCss;
+const pdsInputTokensCss = () => `:host{--pine-input-color-background-danger:var(--pine-color-red-050)}`;
+
+const pdsTextareaCss = () => `:host{display:inline-block;width:100%}:host([aria-readonly=true]) textarea{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([aria-readonly=true])) .pds-textarea__field:not(.is-invalid){background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-accent);color:var(--pine-color-text-accent)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([aria-readonly=true])) .pds-textarea__field:not(.is-invalid):hover{border-color:var(--pine-color-accent-hover)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([aria-readonly=true])) .pds-textarea__field:not(.is-invalid):focus-visible{outline-color:var(--pine-color-focus-ring)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([aria-readonly=true])) .pds-textarea__field:not(.is-invalid)~.pds-textarea__character-counter{background:color-mix(in srgb, var(--pine-color-accent-disabled) 80%, transparent);color:var(--pine-color-text-accent)}.pds-textarea{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-textarea__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.pds-textarea__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)}label{display:block;-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs)}.pds-textarea__label-wrapper label{-webkit-margin-after:0;margin-block-end:0}.pds-textarea__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-textarea__error-message{color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-textarea__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-textarea__field-wrapper{display:inline-block;position:relative;width:100%}.pds-textarea__field{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:calc(var(--pine-dimension-xl) * 2);min-width:calc(var(--pine-dimension-xl) * 2);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);resize:both;width:100%}:host([max-length]) .pds-textarea__field{padding-bottom:calc(var(--pine-dimension-xs) + var(--pine-dimension-md))}.pds-textarea__field:hover:not(:disabled,.is-invalid){border:var(--pine-border-hover)}.pds-textarea__field:disabled{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-textarea__field:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-textarea__field::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field::placeholder{color:var(--pine-color-text-placeholder)}.pds-textarea__field.is-invalid{background-color:var(--pine-input-color-background-danger);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-textarea__field.is-invalid{background-color:var(--pine-color-red-950)}.pds-textarea__field.is-invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-textarea__character-counter{background:color-mix(in srgb, var(--pine-color-background-container) 80%, transparent);border-radius:calc(var(--pine-dimension-2xs) * 0.5);color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);padding:calc(var(--pine-dimension-2xs) * 0.5) var(--pine-dimension-2xs);pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;z-index:var(--pine-z-index)}:host([aria-disabled=true]) .pds-textarea__character-counter{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-disabled)}:host([aria-readonly=true]) .pds-textarea__character-counter{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}.pds-textarea__field.is-invalid~.pds-textarea__character-counter{background-color:var(--pine-input-color-background-danger)}:host-context([data-theme=dark]) .pds-textarea__field.is-invalid~.pds-textarea__character-counter{background-color:var(--pine-color-red-950)}.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}`;
 
 const PdsTextarea = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.pdsTextareaChange = index.createEvent(this, "pdsTextareaChange", 7);
-        this.onTextareaChange = (ev) => {
-            const textarea = ev.target;
-            pdsLabel.isRequired(textarea, this);
-            if (textarea) {
-                this.value = textarea.innerHTML;
-            }
-            this.pdsTextareaChange.emit({ value: this.value, event: ev });
-        };
-        this.componentId = undefined;
+        this.pdsBlur = index.createEvent(this, "pdsBlur");
+        this.pdsFocus = index.createEvent(this, "pdsFocus");
+        this.pdsInput = index.createEvent(this, "pdsInput");
+        this.pdsTextareaChange = index.createEvent(this, "pdsTextareaChange");
+        this.pdsKeyDown = index.createEvent(this, "pdsKeyDown");
+        this.inheritedAttributes = {};
+        this._type = 'textarea';
+        /**
+         * Determines whether or not the textarea is disabled.
+         * @defaultValue false
+         */
         this.disabled = false;
-        this.errorMessage = undefined;
-        this.helperMessage = undefined;
-        this.invalid = false;
-        this.label = undefined;
+        /**
+         * Determines whether or not the textarea is invalid. When `required` is set, the textarea sets it
+         * itself each time `pdsTextareaChange` fires, replacing a value you set.
+         * @defaultValue false
+         */
+        this.invalid = false; // eslint-disable-line @stencil-community/strict-mutable
+        /**
+         * Specifies the name. Submitted with the form name/value pair.
+         */
         this.name = this.componentId;
-        this.placeholder = undefined;
+        /**
+         * Determines whether or not the textarea is readonly.
+         * @defaultValue false
+         */
         this.readonly = false;
+        /**
+         * Determines whether or not the textarea is required.
+         * @defaultValue false
+         */
         this.required = false;
-        this.rows = undefined;
-        this.value = undefined;
+        /**
+         * The value of the textarea.
+         */
+        this.value = '';
+        this.hasFocus = false;
+        /**
+         * If true, the textarea has action content in the label area
+         */
+        this.hasAction = false;
+        /**
+         * Template for the character-counter's accessible label. Pass a translated
+         * string to localize it; `{current}` and `{max}` are interpolated.
+         * @defaultValue '{current} of {max} characters'
+         */
+        this.characterCountLabel = '{current} of {max} characters';
+        this.onBlur = (ev) => {
+            this.hasFocus = false;
+            if (this.focusedValue !== this.value) {
+                this.emitValueChange(ev);
+            }
+            this.pdsBlur.emit(ev);
+        };
+        this.onFocus = (ev) => {
+            this.hasFocus = true;
+            this.focusedValue = this.value;
+            this.pdsFocus.emit(ev);
+        };
+        this.onInput = (ev) => {
+            const input = ev.target;
+            if (input) {
+                // Handle maxLength validation
+                if (this.maxLength && input.value.length > this.maxLength) {
+                    // Prevent input beyond maxLength
+                    input.value = input.value.substring(0, this.maxLength);
+                }
+                this.value = input.value || '';
+            }
+            this.emitInputChange(ev);
+            // Update counter position when content changes
+            if (this.maxLength && typeof ResizeObserver !== 'undefined') {
+                // Use requestAnimationFrame to ensure DOM is updated
+                requestAnimationFrame(() => {
+                    this.updateCharacterCounterPosition();
+                });
+            }
+        };
+        this.onTextareaChange = (ev) => {
+            this.emitValueChange(ev);
+        };
+        this.onKeyDown = (ev) => {
+            this.pdsKeyDown.emit(ev);
+        };
+    }
+    /**
+     * Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global
+     * `textarea.focus()`.
+     */
+    async setFocus() {
+        if (this.nativeTextarea) {
+            this.nativeTextarea.focus();
+        }
+    }
+    debounceChanged() {
+        const { pdsInput, debounce, originalPdsInput } = this;
+        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);
+    }
+    /**
+     * Update the native input element when the value changes
+     */
+    valueChanged() {
+        const nativeTextarea = this.nativeTextarea;
+        const value = this.getValue();
+        if (nativeTextarea && nativeTextarea.value !== value) {
+            nativeTextarea.value = value;
+        }
+        // Update form value for Form Associated Custom Elements API
+        this.updateFormValue();
+        // Update character counter position in case content changes affect sizing
+        if (this.maxLength && typeof ResizeObserver !== 'undefined') {
+            this.updateCharacterCounterPosition();
+        }
+    }
+    maxLengthChanged() {
+        // Setup or teardown ResizeObserver based on maxLength
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.maxLength && this.nativeTextarea) {
+            this.setupResizeObserver();
+        }
+        // Update ElementInternals validity when maxLength changes
+        if (!form.isSpecTest() && this.internals && this.internals.setValidity && this.nativeTextarea) {
+            const isTooLong = this.nativeTextarea.value.length > (this.maxLength || 0);
+            this.internals.setValidity({ tooLong: isTooLong }, isTooLong ? 'Value exceeds maxLength' : '', this.nativeTextarea);
+        }
+    }
+    /**
+     * Emits an `pdsInput` event.
+     */
+    emitInputChange(event) {
+        const { value } = this;
+        this.pdsInput.emit({ value, event });
+    }
+    /**
+     * Emits an `pdsTextareaChange` event.
+     */
+    emitValueChange(event) {
+        const textarea = event.target;
+        form.isRequired(textarea, this);
+        const { value } = textarea;
+        // Checks for both null and undefined values
+        const newValue = value == null ? value : value.toString();
+        this.focusedValue = newValue;
+        this.pdsTextareaChange.emit({ value: newValue, event });
+    }
+    getValue() {
+        return this.value || '';
     }
     textareaClassNames() {
         const classNames = ['pds-textarea__field'];
@@ -40,16 +176,169 @@ const PdsTextarea = class {
         }
         return classNames.join('  ');
     }
+    connectedCallback() {
+        var _a;
+        // Keep the raw emitter before the first wrap, so clearing debounce can restore it.
+        (_a = this.originalPdsInput) !== null && _a !== void 0 ? _a : (this.originalPdsInput = this.pdsInput);
+        this.debounceChanged();
+        // Initialize ElementInternals for form association (only once per element instance)
+        if (this.el.attachInternals && !this.internals) {
+            this.internals = this.el.attachInternals();
+        }
+    }
+    disconnectedCallback() {
+        utils.cancelDebouncedEvent(this.pdsInput);
+        // Clean up ResizeObserver
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign(Object.assign({}, attributes.inheritAriaAttributes(this.el)), attributes.inheritAttributes(this.el));
+        this.hasAction = this.el.querySelector('[slot="action"]') !== null;
+    }
+    componentDidLoad() {
+        // Set initial form value
+        this.updateFormValue();
+        // Setup ResizeObserver for character counter positioning
+        this.setupResizeObserver();
+        // Expose type property on the element instance to match native form element behavior
+        form.exposeTypeProperty(this.el, () => this._type);
+    }
+    /**
+     * Sets up ResizeObserver to track textarea resize for character counter positioning
+     */
+    setupResizeObserver() {
+        if (!this.maxLength || !this.nativeTextarea)
+            return;
+        // ResizeObserver may not be available in test environments
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                // Use requestAnimationFrame to ensure DOM updates are complete
+                requestAnimationFrame(() => {
+                    this.updateCharacterCounterPosition();
+                });
+            });
+            this.resizeObserver.observe(this.nativeTextarea);
+            // Initial positioning with a small delay to ensure counter is rendered
+            requestAnimationFrame(() => {
+                this.updateCharacterCounterPosition();
+            });
+        }
+    }
+    /**
+     * Updates character counter position to stay within textarea boundaries during resize
+     */
+    updateCharacterCounterPosition() {
+        if (!this.characterCounter || !this.nativeTextarea)
+            return;
+        // Skip positioning in test environments where ResizeObserver isn't available
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        // Ensure the character counter has been rendered and has dimensions
+        if (this.characterCounter.offsetWidth === 0 || this.characterCounter.offsetHeight === 0) {
+            // Counter not ready or component hidden - return and let resize/input observers handle positioning later
+            return;
+        }
+        // Position based on textarea's actual dimensions (which change during manual resize)
+        const textareaWidth = this.nativeTextarea.offsetWidth;
+        const textareaHeight = this.nativeTextarea.offsetHeight;
+        const counterWidth = this.characterCounter.offsetWidth;
+        const counterHeight = this.characterCounter.offsetHeight;
+        // Calculate position within textarea boundaries with padding from edges
+        const rightPosition = textareaWidth - counterWidth - 8;
+        const bottomPosition = textareaHeight - counterHeight - 8;
+        // Ensure counter stays within textarea boundaries even when resized very small
+        const finalLeft = Math.max(8, Math.min(rightPosition, textareaWidth - counterWidth - 8));
+        const finalTop = Math.max(8, Math.min(bottomPosition, textareaHeight - counterHeight - 8));
+        // Apply absolute positioning within the field wrapper
+        this.characterCounter.style.position = 'absolute';
+        this.characterCounter.style.left = `${finalLeft}px`;
+        this.characterCounter.style.top = `${finalTop}px`;
+        this.characterCounter.style.right = 'auto';
+        this.characterCounter.style.bottom = 'auto';
+    }
+    /**
+     * Renders the character counter when maxLength is set
+     */
+    renderCharacterCounter() {
+        if (!this.maxLength) {
+            return null;
+        }
+        const currentLength = this.getValue().length;
+        return (index.h("div", { class: "pds-textarea__character-counter", ref: (el) => this.characterCounter = el, role: "status", "aria-live": "polite", "aria-label": i18nFormat.formatMessage(this.characterCountLabel, { current: currentLength, max: this.maxLength }) }, currentLength, " / ", this.maxLength));
+    }
+    renderAction() {
+        const hasAction = this.el.querySelector('[slot="action"]') !== null;
+        if (hasAction) {
+            return (index.h("div", { class: "pds-textarea__action", part: "action" }, index.h("slot", { name: "action" })));
+        }
+        return null;
+    }
+    /**
+     * 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 textarea validation
+            if (this.nativeTextarea && this.internals && this.internals.setValidity) {
+                this.internals.setValidity(this.nativeTextarea.validity, this.nativeTextarea.validationMessage, this.nativeTextarea);
+            }
+        }
+    }
+    /**
+     * 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 textarea's name
+            const value = state.get(this.name);
+            if (typeof value === 'string') {
+                this.value = value;
+            }
+        }
+    }
     render() {
-        return (index.h(index.Host, { key: 'f58ccd5b20fc30c6e6153e04e98b27fe265040af', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: '480b51012d0f7a05d83fb8cb359d2bc3a4e82189', class: "pds-textarea" }, this.label &&
-            index.h(pdsLabel.PdsLabel, { key: '0b34ee6ee8eec6891c00596f840d028ab6ac36bb', htmlFor: this.componentId, text: this.label }), index.h("textarea", { key: '6f066ce38aaec3257bddd69715118aa5740723c1', "aria-describedby": pdsLabel.assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onChange: this.onTextareaChange }, this.value), this.helperMessage &&
-            index.h("p", { key: '91c66558978cdbb3191c0af31c34c2647749c01a', class: "pds-textarea__helper-message", id: pdsLabel.messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            index.h("p", { key: 'da8320d10ace733c7181ab3c6827da99d94d7ebd', "aria-live": "assertive", class: "pds-textarea__error-message", id: pdsLabel.messageId(this.componentId, 'error') }, this.errorMessage))));
+        const value = this.getValue();
+        return (index.h(index.Host, { key: '96f8863a39579b421057fa9b2857753785d4c585', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, index.h("div", { key: '89ae283a1674af03795c0443ee7fea2bac658c9e', class: "pds-textarea" }, this.label &&
+            index.h("div", { key: '7da482f50cfbf7361c457d79e9185bdf204d728d', class: "pds-textarea__label-wrapper" }, index.h("label", { key: '3c1a24beae7a190e11a686c4f15dbc175221db0b', htmlFor: this.componentId }, index.h("span", { key: '7d2f5618fe0893bca5926237adfc610adfaf7cc7', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), index.h("div", { key: '371d16fe7e0446658316d4f2047776ef4429346c', class: "pds-textarea__field-wrapper" }, index.h("textarea", Object.assign({ key: '6e433b544a20b82d16ce8522196c41ca8b22411f', ref: (el) => this.nativeTextarea = el, "aria-describedby": form.assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
+            index.h("p", { key: '7b7117493340f25be2c4d18b48e00add775155d3', class: "pds-textarea__helper-message", id: form.messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            index.h("p", { key: '79a604af17aa9a6735d44aa52a858881e053de43', "aria-live": "assertive", class: "pds-textarea__error-message", id: form.messageId(this.componentId, 'error') }, index.h("pds-icon", { key: '765e5df4a34b583183f1ceeb92fb596067d4a212', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage))));
     }
+    static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "debounce": [{
+                "debounceChanged": 0
+            }],
+        "value": [{
+                "valueChanged": 0
+            }],
+        "maxLength": [{
+                "maxLengthChanged": 0
+            }]
+    }; }
 };
-PdsTextarea.style = PdsTextareaStyle0;
+PdsTextarea.style = labelCss() + (pdsInputTokensCss() + pdsTextareaCss());
 
 exports.pds_textarea = PdsTextarea;
-
-//# sourceMappingURL=pds-textarea.cjs.entry.js.map

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

@@ -0,0 +1,156 @@
+'use strict';
+
+var index = require('./index-D9iJuJCP.js');
+require('./keep-hydrated-AKoh0DG4.js');
+
+const pdsToastCss = () => `:host{--animation-duration:var(--pine-motion-duration-slow);--animation-timing:var(--pine-motion-easing-in-out);--padding-inline:var(--pine-dimension-md);--padding-inline-desktop:var(--pine-dimension-2xl);--sizing-height-default:68px;--sizing-min-width:calc(var(--sizing-total-width) - (var(--padding-inline) * 2));--sizing-min-width-desktop:calc(var(--sizing-total-width) - (var(--padding-inline-desktop) * 2));--sizing-total-width:350px;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;font:var(--pine-typography-body-medium)}.pds-toast{-ms-flex-align:center;align-items:center;-webkit-animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);background-color:var(--pine-color-primary);border-radius:var(--pine-dimension-xs);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-primary);display:-ms-flexbox;display:flex;height:var(--sizing-height-default);-ms-flex-pack:start;justify-content:flex-start;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);max-width:calc(90vw + var(--padding-inline) * 2);min-width:calc(var(--sizing-min-width) + var(--padding-inline) * 2);padding:0 var(--padding-inline);position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (max-width: 767px){.pds-toast{height:36px;max-width:100vw;min-width:auto;padding-inline:var(--pine-dimension-2xs)}}.pds-toast--danger{background-color:var(--pine-color-danger)}.pds-toast--loading .pds-toast__loader{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);position:relative}.pds-toast--loading .pds-toast__loader-spinner{-webkit-animation:pds-toast-rotate 2s linear infinite;animation:pds-toast-rotate 2s linear infinite;height:20px;width:20px}.pds-toast--loading .pds-toast__loader-path{-webkit-animation:pds-toast-dash 1.5s ease-in-out infinite;animation:pds-toast-dash 1.5s ease-in-out infinite;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}.pds-toast__icon{color:var(--pine-color-text-primary);display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-toast__message{font:var(--pine-typography-body-sm-medium);-webkit-margin-end:auto;margin-inline-end:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-toast__message ::slotted(a){color:var(--pine-color-text-primary);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs);opacity:0.7;text-decoration:underline}.pds-toast__message ::slotted(a):hover,.pds-toast__message ::slotted(a):focus-visible{opacity:1}.pds-toast__message ::slotted(a):focus-visible{outline:2px solid var(--pine-color-text-primary);outline-offset:2px}.pds-toast__button{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);color:inherit;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);opacity:0.7;padding:0;white-space:nowrap}.pds-toast__button:hover,.pds-toast__button:focus{opacity:1}.pds-toast__button:focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-dimension-2xs)}@-webkit-keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}:host([hidden]) .pds-toast,.pds-toast--animating-out{-webkit-animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;pointer-events:none;}.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}`;
+
+/** Fallback when computed `--animation-duration` is unavailable (matches `--pine-motion-duration-slow`). */
+const TOAST_DISMISS_ANIMATION_MS = 300;
+const PdsToast = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pdsToastDismissed = index.createEvent(this, "pdsToastDismissed");
+        /**
+         * Whether the toast can be dismissed manually via the close button.
+         * Note: This only controls manual dismissal. Auto-dismissal via duration still applies.
+         * @default true
+         */
+        this.dismissible = true;
+        /**
+         * The duration in milliseconds to show the toast before auto-dismissing.
+         * Set to 0 to disable auto-dismiss.
+         * @default 4500
+         */
+        this.duration = 4500;
+        /**
+         * The type of toast to display.
+         * - default: Grey background (default)
+         * - danger: Red background
+         * - loading: With spinner animation
+         * @default 'default'
+         */
+        this.type = 'default';
+        /**
+         * Accessible label for the dismiss button. Pass a translated string to
+         * localize it; defaults to English.
+         * @defaultValue 'Dismiss message'
+         */
+        this.dismissLabel = 'Dismiss message';
+        /**
+         * Whether the toast is currently visible.
+         */
+        this.isVisible = true;
+        /**
+         * Whether the toast is animating out.
+         */
+        this.isAnimatingOut = false;
+    }
+    componentDidLoad() {
+        if (this.duration > 0) {
+            this.startDismissTimer();
+        }
+    }
+    disconnectedCallback() {
+        this.cleanup();
+    }
+    handleDurationChange(newDuration) {
+        if (this.dismissTimer) {
+            window.clearTimeout(this.dismissTimer);
+            this.dismissTimer = undefined;
+        }
+        if (newDuration > 0) {
+            this.startDismissTimer();
+        }
+    }
+    /**
+     * Dismisses the toast, as the dismiss button and `duration` do: plays the exit animation and emits `pdsToastDismissed`, and the toast
+     * gets `hidden` on the next render, after the event. Works even when `dismissible` is `false`. The toast stays in the DOM.
+     */
+    async dismiss() {
+        // Start the animation out
+        this.isAnimatingOut = true;
+        await this.waitForDismissAnimation();
+        this.isVisible = false;
+        this.cleanup();
+        this.pdsToastDismissed.emit({ componentId: this.componentId });
+    }
+    // Private methods
+    waitForDismissAnimation() {
+        const durationMs = this.getDismissAnimationDurationMs();
+        if (durationMs <= 0) {
+            return Promise.resolve();
+        }
+        return new Promise((resolve) => window.setTimeout(resolve, durationMs));
+    }
+    getDismissAnimationDurationMs() {
+        if (typeof window === 'undefined') {
+            return TOAST_DISMISS_ANIMATION_MS;
+        }
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            return 0;
+        }
+        const fromCss = this.parseCssDurationToMs(getComputedStyle(this.el).getPropertyValue('--animation-duration').trim());
+        return fromCss !== null && fromCss !== void 0 ? fromCss : TOAST_DISMISS_ANIMATION_MS;
+    }
+    parseCssDurationToMs(value) {
+        if (!value) {
+            return undefined;
+        }
+        if (value === '0' || value === '0ms' || value === '0s') {
+            return 0;
+        }
+        if (value.endsWith('ms')) {
+            const ms = Number.parseFloat(value);
+            return Number.isFinite(ms) ? ms : undefined;
+        }
+        if (value.endsWith('s')) {
+            const seconds = Number.parseFloat(value);
+            return Number.isFinite(seconds) ? seconds * 1000 : undefined;
+        }
+        return undefined;
+    }
+    cleanup() {
+        if (this.dismissTimer) {
+            window.clearTimeout(this.dismissTimer);
+            this.dismissTimer = undefined;
+        }
+    }
+    startDismissTimer() {
+        this.dismissTimer = window.setTimeout(() => {
+            this.dismiss();
+        }, this.duration);
+    }
+    renderIcon() {
+        // Loading type takes priority
+        if (this.type === 'loading') {
+            return (index.h("div", { class: "pds-toast__loader" }, index.h("svg", { class: "pds-toast__loader-spinner", viewBox: "25 25 50 50", "aria-hidden": "true" }, index.h("circle", { class: "pds-toast__loader-path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" }))));
+        }
+        // Decorative: inside role="alert" an icon name would be read out with the
+        // message. Severity is announced as text instead (see severityLabel).
+        return this.icon && index.h("pds-icon", { name: this.icon, class: "pds-toast__icon", "aria-hidden": "true" });
+    }
+    severityText() {
+        var _a;
+        return (_a = this.severityLabel) !== null && _a !== void 0 ? _a : (this.type === 'danger' ? 'Error' : undefined);
+    }
+    render() {
+        const severity = this.severityText();
+        return (index.h(index.Host, { key: '89a7a4a9105730769c83cbb39af3cec31d1a39da', hidden: !this.isVisible }, index.h("div", { key: '6543b52aea9ba5e956f894148e965619c8836432', class: {
+                'pds-toast': true,
+                [`pds-toast--${this.type}`]: this.type !== 'default',
+                'pds-toast--animating-out': this.isAnimatingOut
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), severity && index.h("span", { key: 'c2ec7185878dd0d00f0cf12c29080b716997f2c2', class: "visually-hidden" }, severity), index.h("span", { key: '0274afc2c23f43d7cd50a42fc999d82f91ad026d', class: "pds-toast__message" }, index.h("slot", { key: 'daba1b8fb461ffeb9c662d6c30f5cc93ca7c08f9' })), this.dismissible && (index.h("button", { key: '56cd7eb04c759acdaa850d230a5204eb2cae87f0', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
+                this.dismiss();
+            }, "aria-label": this.dismissLabel }, index.h("pds-icon", { key: '95b08c3cbe0fb015515884484cf5ea28f7f0025c', name: "remove", "aria-hidden": "true" }))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "duration": [{
+                "handleDurationChange": 0
+            }]
+    }; }
+};
+PdsToast.style = pdsToastCss();
+
+exports.pds_toast = PdsToast;