tyrell-components 1.0.0-RC14 → 1.0.0-RC15

package/lib/components/textarea.js

@@ -1,3 +1,4 @@
+import { DEFAULT_SIZE } from '../types/common.js';
 import { TyComponent } from '../base/ty-component.js';
 import { ensureStyles } from '../utils/styles.js';
 import { textareaStyles } from '../styles/textarea.js';
@@ -5,465 +6,465 @@ import { CustomScrollbar, isCustomScrollbarEnabled } from '../utils/custom-scrol
 import { customScrollbarStyles } from '../styles/custom-scrollbar.js';
 const REQUIRED_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`;
 export class TyTextarea extends TyComponent {
-    constructor() {
-        super();
-        this._textareaEl = null;
-        this._dummyEl = null;
-        this._scrollbar = null;
-        this._isFocused = false;
-        this.handleInputEvent = (e) => {
-            const target = e.target;
-            const newValue = target.value;
-            this.value = newValue;
-            if (this._textareaEl && this._dummyEl) {
-                this.resizeTextarea(this._textareaEl, this._dummyEl);
-            }
-            this.emitValueEvents(e);
-        };
-        this.handleFocusEvent = () => {
-            this._isFocused = true;
-        };
-        this.handleBlurEvent = () => {
-            this._isFocused = false;
-        };
-        const shadow = this.shadowRoot;
-        ensureStyles(shadow, { css: textareaStyles, id: 'ty-textarea' });
-        if (isCustomScrollbarEnabled()) {
-            ensureStyles(shadow, { css: customScrollbarStyles, id: 'ty-custom-scrollbar' });
-        }
-    }
-    onConnect() {
-    }
-    onDisconnect() {
-        this._destroyScrollbar();
-        if (this._textareaEl) {
-            const newTextarea = this._textareaEl.cloneNode(true);
-            this._textareaEl.parentNode?.replaceChild(newTextarea, this._textareaEl);
-            this._textareaEl = null;
-        }
-        this._dummyEl = null;
-    }
-    onPropertiesChanged(changes) {
-    }
-    getFormValue() {
-        return this.getProperty('value') || null;
-    }
-    get value() { return this.getProperty('value'); }
-    set value(v) { this.setProperty('value', v); }
-    get name() { return this.getProperty('name'); }
-    set name(v) { this.setProperty('name', v); }
-    get placeholder() { return this.getProperty('placeholder'); }
-    set placeholder(v) { this.setProperty('placeholder', v); }
-    get label() { return this.getProperty('label'); }
-    set label(v) { this.setProperty('label', v); }
-    get disabled() { return this.getProperty('disabled'); }
-    set disabled(v) { this.setProperty('disabled', v); }
-    get required() { return this.getProperty('required'); }
-    set required(v) { this.setProperty('required', v); }
-    get error() { return this.getProperty('error'); }
-    set error(v) { this.setProperty('error', v); }
-    get size() {
-        return this.getProperty('size');
-    }
-    set size(v) {
-        this.setProperty('size', v);
-    }
-    get rows() { return this.getProperty('rows'); }
-    set rows(v) { this.setProperty('rows', v); }
-    get cols() { return this.getProperty('cols'); }
-    set cols(v) { this.setProperty('cols', v); }
-    get resize() {
-        return this.getProperty('resize');
-    }
-    set resize(v) {
-        this.setProperty('resize', v);
-    }
-    get minHeight() { return this.getProperty('minHeight'); }
-    set minHeight(v) { this.setProperty('minHeight', v); }
-    get maxHeight() { return this.getProperty('maxHeight'); }
-    set maxHeight(v) { this.setProperty('maxHeight', v); }
-    getFontStyle(el) {
-        const computedStyle = window.getComputedStyle(el);
-        return {
-            fontFamily: computedStyle.fontFamily,
-            fontSize: computedStyle.fontSize,
-            fontWeight: computedStyle.fontWeight,
-            lineHeight: computedStyle.lineHeight,
-            letterSpacing: computedStyle.letterSpacing,
-            fontStyle: computedStyle.fontStyle
-        };
-    }
-    getSpacingStyle(el) {
-        const computedStyle = window.getComputedStyle(el);
-        return {
-            padding: computedStyle.padding,
-            paddingTop: computedStyle.paddingTop,
-            paddingRight: computedStyle.paddingRight,
-            paddingBottom: computedStyle.paddingBottom,
-            paddingLeft: computedStyle.paddingLeft,
-            margin: computedStyle.margin,
-            borderWidth: computedStyle.borderWidth
-        };
-    }
-    setupDummyElement(textareaEl) {
-        const root = this.shadowRoot;
-        const existingDummy = root.querySelector('.textarea-dummy');
-        if (existingDummy) {
-            existingDummy.remove();
-        }
-        const dummyEl = document.createElement('pre');
-        const fontStyle = this.getFontStyle(textareaEl);
-        const spacingStyle = this.getSpacingStyle(textareaEl);
-        dummyEl.className = 'textarea-dummy';
-        const style = dummyEl.style;
-        style.position = 'absolute';
-        style.top = '0';
-        style.left = '0';
-        style.visibility = 'hidden';
-        style.whiteSpace = 'pre-wrap';
-        style.wordBreak = 'break-word';
-        style.boxSizing = 'border-box';
-        style.overflow = 'hidden';
-        style.pointerEvents = 'none';
-        Object.entries(fontStyle).forEach(([prop, value]) => {
-            ;
-            style[prop] = value;
-        });
-        Object.entries(spacingStyle).forEach(([prop, value]) => {
-            ;
-            style[prop] = value;
-        });
-        root.appendChild(dummyEl);
-        this._dummyEl = dummyEl;
-        return dummyEl;
-    }
-    resizeTextarea(textareaEl, dummyEl) {
-        if (!textareaEl || !dummyEl)
-            return;
-        const value = this.value;
-        const placeholder = this.placeholder;
-        const content = (value === '' && placeholder) ? placeholder : value + ' ';
-        const currentHeight = textareaEl.clientHeight;
-        dummyEl.textContent = content;
-        dummyEl.style.width = `${textareaEl.clientWidth}px`;
-        const measuredHeight = dummyEl.scrollHeight;
-        const minHeight = this.minHeight ? parseInt(this.minHeight.replace('px', ''), 10) : null;
-        const maxHeight = this.maxHeight ? parseInt(this.maxHeight.replace('px', ''), 10) : null;
-        let constrainedHeight = measuredHeight;
-        if (minHeight !== null)
-            constrainedHeight = Math.max(constrainedHeight, minHeight);
-        if (maxHeight !== null)
-            constrainedHeight = Math.min(constrainedHeight, maxHeight);
-        if (Math.abs(constrainedHeight - currentHeight) > 2) {
-            textareaEl.style.height = `${constrainedHeight}px`;
-            const needsScroll = maxHeight !== null && measuredHeight >= maxHeight;
-            if (needsScroll) {
-                textareaEl.style.overflowY = 'auto';
-                this._setupScrollbar(textareaEl);
-            }
-            else {
-                textareaEl.style.overflowY = 'hidden';
-                this._destroyScrollbar();
-            }
-        }
-        this._scrollbar?.update();
-    }
-    _setupScrollbar(textareaEl) {
-        if (this._scrollbar || !isCustomScrollbarEnabled())
-            return;
-        textareaEl.style.scrollbarWidth = 'none';
-        this.setAttribute('data-custom-scroll', '');
-        this._scrollbar = new CustomScrollbar(textareaEl, {
-            vertical: true,
-            horizontal: false
-        });
-        const scroll = this.shadowRoot.querySelector('.textarea-scroll');
-        if (scroll && this._scrollbar.trackY) {
-            scroll.appendChild(this._scrollbar.trackY);
-        }
-    }
-    _destroyScrollbar() {
-        if (!this._scrollbar)
-            return;
-        this._scrollbar.trackY?.remove();
-        this._scrollbar.destroy();
-        this._scrollbar = null;
-        this.removeAttribute('data-custom-scroll');
-        if (this._textareaEl) {
-            this._textareaEl.style.scrollbarWidth = '';
-        }
-    }
-    emitValueEvents(originalEvent) {
-        const value = this.value;
-        this._internals.setFormValue(value || '');
-        this.updateValidity();
-        const data = {
-            bubbles: true,
-            composed: true,
-            detail: {
-                value,
-                originalEvent
-            }
-        };
-        setTimeout(() => {
-            this.dispatchEvent(new CustomEvent('input', data));
-            this.dispatchEvent(new CustomEvent('change', data));
-        }, 0);
-    }
-    buildClassList() {
-        const classes = [this.size];
-        if (this.disabled)
-            classes.push('disabled');
-        if (this.required)
-            classes.push('required');
-        if (this.error)
-            classes.push('error');
-        if (this.resize !== 'none')
-            classes.push(`resize-${this.resize}`);
-        const customClass = this.getAttribute('class');
-        if (customClass)
-            classes.push(customClass);
-        return classes.join(' ');
-    }
-    applyHeightConstraints(textareaEl) {
-        if (this.minHeight) {
-            textareaEl.style.minHeight = this.minHeight;
-        }
-        if (this.maxHeight) {
-            textareaEl.style.maxHeight = this.maxHeight;
-        }
-    }
-    setupTextareaEvents(textareaEl) {
-        textareaEl.addEventListener('input', this.handleInputEvent);
-        textareaEl.addEventListener('change', this.handleInputEvent);
-        textareaEl.addEventListener('focus', this.handleFocusEvent);
-        textareaEl.addEventListener('blur', this.handleBlurEvent);
-    }
-    render() {
-        const root = this.shadowRoot;
-        const existingContainer = root.querySelector('.textarea-container');
-        const existingLabel = root.querySelector('label');
-        const existingTextarea = root.querySelector('textarea');
-        const existingError = root.querySelector('.error-message');
-        if (existingContainer && existingTextarea) {
-            if (this.label) {
-                if (existingLabel) {
-                    existingLabel.innerHTML = this.label +
-                        (this.required ? ` <span class="required-icon">${REQUIRED_ICON}</span>` : '');
-                    existingLabel.style.display = 'block';
-                }
-            }
-            else if (existingLabel) {
-                existingLabel.style.display = 'none';
-            }
-            existingTextarea.value = this.value || '';
-            existingTextarea.placeholder = this.placeholder || '';
-            existingTextarea.disabled = this.disabled;
-            existingTextarea.required = this.required;
-            existingTextarea.className = this.buildClassList();
-            if (this.label)
-                existingTextarea.setAttribute('aria-label', this.label);
-            else
-                existingTextarea.removeAttribute('aria-label');
-            if (this.name) {
-                existingTextarea.setAttribute('name', this.name);
-            }
-            else {
-                existingTextarea.removeAttribute('name');
-            }
-            if (this.rows)
-                existingTextarea.setAttribute('rows', this.rows);
-            if (this.cols)
-                existingTextarea.setAttribute('cols', this.cols);
-            this.applyHeightConstraints(existingTextarea);
-            if (this.error) {
-                if (!existingError) {
-                    const errorEl = document.createElement('div');
-                    errorEl.className = 'error-message';
-                    existingContainer.appendChild(errorEl);
-                }
-                const errorEl = root.querySelector('.error-message');
-                if (errorEl)
-                    errorEl.textContent = this.error;
-            }
-            else if (existingError) {
-                existingError.remove();
-            }
-            const dummyEl = this.setupDummyElement(existingTextarea);
-            setTimeout(() => this.resizeTextarea(existingTextarea, dummyEl), 0);
-            this._textareaEl = existingTextarea;
-        }
-        else {
-            const container = document.createElement('div');
-            container.className = 'textarea-container';
-            const labelEl = document.createElement('label');
-            labelEl.className = 'ty-field-label';
-            if (this.label) {
-                labelEl.innerHTML = this.label +
-                    (this.required ? ` <span class="required-icon">${REQUIRED_ICON}</span>` : '');
-                labelEl.style.display = 'block';
-            }
-            else {
-                labelEl.style.display = 'none';
-            }
-            const textareaEl = document.createElement('textarea');
-            textareaEl.value = this.value || '';
-            textareaEl.placeholder = this.placeholder || '';
-            textareaEl.disabled = this.disabled;
-            textareaEl.required = this.required;
-            textareaEl.className = this.buildClassList();
-            if (this.label)
-                textareaEl.setAttribute('aria-label', this.label);
-            if (this.name) {
-                textareaEl.setAttribute('name', this.name);
-            }
-            textareaEl.setAttribute('rows', this.rows || '3');
-            if (this.cols)
-                textareaEl.setAttribute('cols', this.cols);
-            this.applyHeightConstraints(textareaEl);
-            this.setupTextareaEvents(textareaEl);
-            const wrapperEl = document.createElement('div');
-            wrapperEl.className = 'textarea-wrapper';
-            const headerEl = document.createElement('div');
-            headerEl.className = 'textarea-header';
-            const headerSlot = document.createElement('slot');
-            headerSlot.setAttribute('name', 'header');
-            headerEl.appendChild(headerSlot);
-            const scrollEl = document.createElement('div');
-            scrollEl.className = 'textarea-scroll';
-            scrollEl.appendChild(textareaEl);
-            const footerEl = document.createElement('div');
-            footerEl.className = 'textarea-footer';
-            const footerSlot = document.createElement('slot');
-            footerSlot.setAttribute('name', 'footer');
-            footerEl.appendChild(footerSlot);
-            wrapperEl.appendChild(headerEl);
-            wrapperEl.appendChild(scrollEl);
-            wrapperEl.appendChild(footerEl);
-            const syncSlot = (slot, region) => {
-                const update = () => region.classList.toggle('has-content', slot.assignedNodes({ flatten: true }).length > 0);
-                slot.addEventListener('slotchange', update);
-                update();
-            };
-            syncSlot(headerSlot, headerEl);
-            syncSlot(footerSlot, footerEl);
-            container.appendChild(labelEl);
-            container.appendChild(wrapperEl);
-            if (this.error) {
-                const errorEl = document.createElement('div');
-                errorEl.className = 'error-message';
-                errorEl.textContent = this.error;
-                container.appendChild(errorEl);
-            }
-            root.appendChild(container);
-            const dummyEl = this.setupDummyElement(textareaEl);
-            setTimeout(() => this.resizeTextarea(textareaEl, dummyEl), 0);
-            this._textareaEl = textareaEl;
-        }
-        this.updateValidity();
-    }
-    updateValidity() {
-        const ta = this.shadowRoot?.querySelector('textarea');
-        if (this.disabled) {
-            this._internals.setValidity({});
-            return;
-        }
-        const current = ta ? ta.value : String(this.value ?? '');
-        if (this.required && current.trim() === '') {
-            this._internals.setValidity({ valueMissing: true }, 'Please fill out this field', ta ?? undefined);
-        }
-        else {
-            this._internals.setValidity({});
-        }
-    }
+constructor() {
+super();
+this._textareaEl = null;
+this._dummyEl = null;
+this._scrollbar = null;
+this._isFocused = false;
+this.handleInputEvent = (e) => {
+const target = e.target;
+const newValue = target.value;
+this.value = newValue;
+if (this._textareaEl && this._dummyEl) {
+this.resizeTextarea(this._textareaEl, this._dummyEl);
+}
+this.emitValueEvents(e);
+};
+this.handleFocusEvent = () => {
+this._isFocused = true;
+};
+this.handleBlurEvent = () => {
+this._isFocused = false;
+};
+const shadow = this.shadowRoot;
+ensureStyles(shadow, { css: textareaStyles, id: 'ty-textarea' });
+if (isCustomScrollbarEnabled()) {
+ensureStyles(shadow, { css: customScrollbarStyles, id: 'ty-custom-scrollbar' });
+}
+}
+onConnect() {
+}
+onDisconnect() {
+this._destroyScrollbar();
+if (this._textareaEl) {
+const newTextarea = this._textareaEl.cloneNode(true);
+this._textareaEl.parentNode?.replaceChild(newTextarea, this._textareaEl);
+this._textareaEl = null;
+}
+this._dummyEl = null;
+}
+onPropertiesChanged(changes) {
+}
+getFormValue() {
+return this.getProperty('value') || null;
+}
+get value() { return this.getProperty('value'); }
+set value(v) { this.setProperty('value', v); }
+get name() { return this.getProperty('name'); }
+set name(v) { this.setProperty('name', v); }
+get placeholder() { return this.getProperty('placeholder'); }
+set placeholder(v) { this.setProperty('placeholder', v); }
+get label() { return this.getProperty('label'); }
+set label(v) { this.setProperty('label', v); }
+get disabled() { return this.getProperty('disabled'); }
+set disabled(v) { this.setProperty('disabled', v); }
+get required() { return this.getProperty('required'); }
+set required(v) { this.setProperty('required', v); }
+get error() { return this.getProperty('error'); }
+set error(v) { this.setProperty('error', v); }
+get size() {
+return this.getProperty('size');
+}
+set size(v) {
+this.setProperty('size', v);
+}
+get rows() { return this.getProperty('rows'); }
+set rows(v) { this.setProperty('rows', v); }
+get cols() { return this.getProperty('cols'); }
+set cols(v) { this.setProperty('cols', v); }
+get resize() {
+return this.getProperty('resize');
+}
+set resize(v) {
+this.setProperty('resize', v);
+}
+get minHeight() { return this.getProperty('minHeight'); }
+set minHeight(v) { this.setProperty('minHeight', v); }
+get maxHeight() { return this.getProperty('maxHeight'); }
+set maxHeight(v) { this.setProperty('maxHeight', v); }
+getFontStyle(el) {
+const computedStyle = window.getComputedStyle(el);
+return {
+fontFamily: computedStyle.fontFamily,
+fontSize: computedStyle.fontSize,
+fontWeight: computedStyle.fontWeight,
+lineHeight: computedStyle.lineHeight,
+letterSpacing: computedStyle.letterSpacing,
+fontStyle: computedStyle.fontStyle
+};
+}
+getSpacingStyle(el) {
+const computedStyle = window.getComputedStyle(el);
+return {
+padding: computedStyle.padding,
+paddingTop: computedStyle.paddingTop,
+paddingRight: computedStyle.paddingRight,
+paddingBottom: computedStyle.paddingBottom,
+paddingLeft: computedStyle.paddingLeft,
+margin: computedStyle.margin,
+borderWidth: computedStyle.borderWidth
+};
+}
+setupDummyElement(textareaEl) {
+const root = this.shadowRoot;
+const existingDummy = root.querySelector('.textarea-dummy');
+if (existingDummy) {
+existingDummy.remove();
+}
+const dummyEl = document.createElement('pre');
+const fontStyle = this.getFontStyle(textareaEl);
+const spacingStyle = this.getSpacingStyle(textareaEl);
+dummyEl.className = 'textarea-dummy';
+const style = dummyEl.style;
+style.position = 'absolute';
+style.top = '0';
+style.left = '0';
+style.visibility = 'hidden';
+style.whiteSpace = 'pre-wrap';
+style.wordBreak = 'break-word';
+style.boxSizing = 'border-box';
+style.overflow = 'hidden';
+style.pointerEvents = 'none';
+Object.entries(fontStyle).forEach(([prop, value]) => {
+;
+style[prop] = value;
+});
+Object.entries(spacingStyle).forEach(([prop, value]) => {
+;
+style[prop] = value;
+});
+root.appendChild(dummyEl);
+this._dummyEl = dummyEl;
+return dummyEl;
+}
+resizeTextarea(textareaEl, dummyEl) {
+if (!textareaEl || !dummyEl)
+return;
+const value = this.value;
+const placeholder = this.placeholder;
+const content = (value === '' && placeholder) ? placeholder : value + ' ';
+const currentHeight = textareaEl.clientHeight;
+dummyEl.textContent = content;
+dummyEl.style.width = `${textareaEl.clientWidth}px`;
+const measuredHeight = dummyEl.scrollHeight;
+const minHeight = this.minHeight ? parseInt(this.minHeight.replace('px', ''), 10) : null;
+const maxHeight = this.maxHeight ? parseInt(this.maxHeight.replace('px', ''), 10) : null;
+let constrainedHeight = measuredHeight;
+if (minHeight !== null)
+constrainedHeight = Math.max(constrainedHeight, minHeight);
+if (maxHeight !== null)
+constrainedHeight = Math.min(constrainedHeight, maxHeight);
+if (Math.abs(constrainedHeight - currentHeight) > 2) {
+textareaEl.style.height = `${constrainedHeight}px`;
+const needsScroll = maxHeight !== null && measuredHeight >= maxHeight;
+if (needsScroll) {
+textareaEl.style.overflowY = 'auto';
+this._setupScrollbar(textareaEl);
+}
+else {
+textareaEl.style.overflowY = 'hidden';
+this._destroyScrollbar();
+}
+}
+this._scrollbar?.update();
+}
+_setupScrollbar(textareaEl) {
+if (this._scrollbar || !isCustomScrollbarEnabled())
+return;
+textareaEl.style.scrollbarWidth = 'none';
+this.setAttribute('data-custom-scroll', '');
+this._scrollbar = new CustomScrollbar(textareaEl, {
+vertical: true,
+horizontal: false
+});
+const scroll = this.shadowRoot.querySelector('.textarea-scroll');
+if (scroll && this._scrollbar.trackY) {
+scroll.appendChild(this._scrollbar.trackY);
+}
+}
+_destroyScrollbar() {
+if (!this._scrollbar)
+return;
+this._scrollbar.trackY?.remove();
+this._scrollbar.destroy();
+this._scrollbar = null;
+this.removeAttribute('data-custom-scroll');
+if (this._textareaEl) {
+this._textareaEl.style.scrollbarWidth = '';
+}
+}
+emitValueEvents(originalEvent) {
+const value = this.value;
+this._internals.setFormValue(value || '');
+this.updateValidity();
+const data = {
+bubbles: true,
+composed: true,
+detail: {
+value,
+originalEvent
+}
+};
+setTimeout(() => {
+this.dispatchEvent(new CustomEvent('input', data));
+this.dispatchEvent(new CustomEvent('change', data));
+}, 0);
+}
+buildClassList() {
+const classes = [this.size];
+if (this.disabled)
+classes.push('disabled');
+if (this.required)
+classes.push('required');
+if (this.error)
+classes.push('error');
+if (this.resize !== 'none')
+classes.push(`resize-${this.resize}`);
+const customClass = this.getAttribute('class');
+if (customClass)
+classes.push(customClass);
+return classes.join(' ');
+}
+applyHeightConstraints(textareaEl) {
+if (this.minHeight) {
+textareaEl.style.minHeight = this.minHeight;
+}
+if (this.maxHeight) {
+textareaEl.style.maxHeight = this.maxHeight;
+}
+}
+setupTextareaEvents(textareaEl) {
+textareaEl.addEventListener('input', this.handleInputEvent);
+textareaEl.addEventListener('change', this.handleInputEvent);
+textareaEl.addEventListener('focus', this.handleFocusEvent);
+textareaEl.addEventListener('blur', this.handleBlurEvent);
+}
+render() {
+const root = this.shadowRoot;
+const existingContainer = root.querySelector('.textarea-container');
+const existingLabel = root.querySelector('label');
+const existingTextarea = root.querySelector('textarea');
+const existingError = root.querySelector('.error-message');
+if (existingContainer && existingTextarea) {
+if (this.label) {
+if (existingLabel) {
+existingLabel.innerHTML = this.label +
+(this.required ? ` <span class="required-icon">${REQUIRED_ICON}</span>` : '');
+existingLabel.style.display = 'block';
+}
+}
+else if (existingLabel) {
+existingLabel.style.display = 'none';
+}
+existingTextarea.value = this.value || '';
+existingTextarea.placeholder = this.placeholder || '';
+existingTextarea.disabled = this.disabled;
+existingTextarea.required = this.required;
+existingTextarea.className = this.buildClassList();
+if (this.label)
+existingTextarea.setAttribute('aria-label', this.label);
+else
+existingTextarea.removeAttribute('aria-label');
+if (this.name) {
+existingTextarea.setAttribute('name', this.name);
+}
+else {
+existingTextarea.removeAttribute('name');
+}
+if (this.rows)
+existingTextarea.setAttribute('rows', this.rows);
+if (this.cols)
+existingTextarea.setAttribute('cols', this.cols);
+this.applyHeightConstraints(existingTextarea);
+if (this.error) {
+if (!existingError) {
+const errorEl = document.createElement('div');
+errorEl.className = 'error-message';
+existingContainer.appendChild(errorEl);
+}
+const errorEl = root.querySelector('.error-message');
+if (errorEl)
+errorEl.textContent = this.error;
+}
+else if (existingError) {
+existingError.remove();
+}
+const dummyEl = this.setupDummyElement(existingTextarea);
+setTimeout(() => this.resizeTextarea(existingTextarea, dummyEl), 0);
+this._textareaEl = existingTextarea;
+}
+else {
+const container = document.createElement('div');
+container.className = 'textarea-container';
+const labelEl = document.createElement('label');
+labelEl.className = 'ty-field-label';
+if (this.label) {
+labelEl.innerHTML = this.label +
+(this.required ? ` <span class="required-icon">${REQUIRED_ICON}</span>` : '');
+labelEl.style.display = 'block';
+}
+else {
+labelEl.style.display = 'none';
+}
+const textareaEl = document.createElement('textarea');
+textareaEl.value = this.value || '';
+textareaEl.placeholder = this.placeholder || '';
+textareaEl.disabled = this.disabled;
+textareaEl.required = this.required;
+textareaEl.className = this.buildClassList();
+if (this.label)
+textareaEl.setAttribute('aria-label', this.label);
+if (this.name) {
+textareaEl.setAttribute('name', this.name);
+}
+textareaEl.setAttribute('rows', this.rows || '3');
+if (this.cols)
+textareaEl.setAttribute('cols', this.cols);
+this.applyHeightConstraints(textareaEl);
+this.setupTextareaEvents(textareaEl);
+const wrapperEl = document.createElement('div');
+wrapperEl.className = 'textarea-wrapper';
+const headerEl = document.createElement('div');
+headerEl.className = 'textarea-header';
+const headerSlot = document.createElement('slot');
+headerSlot.setAttribute('name', 'header');
+headerEl.appendChild(headerSlot);
+const scrollEl = document.createElement('div');
+scrollEl.className = 'textarea-scroll';
+scrollEl.appendChild(textareaEl);
+const footerEl = document.createElement('div');
+footerEl.className = 'textarea-footer';
+const footerSlot = document.createElement('slot');
+footerSlot.setAttribute('name', 'footer');
+footerEl.appendChild(footerSlot);
+wrapperEl.appendChild(headerEl);
+wrapperEl.appendChild(scrollEl);
+wrapperEl.appendChild(footerEl);
+const syncSlot = (slot, region) => {
+const update = () => region.classList.toggle('has-content', slot.assignedNodes({ flatten: true }).length > 0);
+slot.addEventListener('slotchange', update);
+update();
+};
+syncSlot(headerSlot, headerEl);
+syncSlot(footerSlot, footerEl);
+container.appendChild(labelEl);
+container.appendChild(wrapperEl);
+if (this.error) {
+const errorEl = document.createElement('div');
+errorEl.className = 'error-message';
+errorEl.textContent = this.error;
+container.appendChild(errorEl);
+}
+root.appendChild(container);
+const dummyEl = this.setupDummyElement(textareaEl);
+setTimeout(() => this.resizeTextarea(textareaEl, dummyEl), 0);
+this._textareaEl = textareaEl;
+}
+this.updateValidity();
+}
+updateValidity() {
+const ta = this.shadowRoot?.querySelector('textarea');
+if (this.disabled) {
+this._internals.setValidity({});
+return;
+}
+const current = ta ? ta.value : String(this.value ?? '');
+if (this.required && current.trim() === '') {
+this._internals.setValidity({ valueMissing: true }, 'Please fill out this field', ta ?? undefined);
+}
+else {
+this._internals.setValidity({});
+}
+}
 }
 TyTextarea.formAssociated = true;
 TyTextarea.properties = {
-    value: {
-        type: 'string',
-        visual: true,
-        formValue: true,
-        emitChange: true,
-        default: ''
-    },
-    name: {
-        type: 'string',
-        default: ''
-    },
-    placeholder: {
-        type: 'string',
-        visual: true,
-        default: ''
-    },
-    label: {
-        type: 'string',
-        visual: true,
-        default: ''
-    },
-    disabled: {
-        type: 'boolean',
-        visual: true,
-        default: false
-    },
-    required: {
-        type: 'boolean',
-        visual: true,
-        default: false
-    },
-    error: {
-        type: 'string',
-        visual: true,
-        default: ''
-    },
-    size: {
-        type: 'string',
-        visual: true,
-        default: 'md',
-        validate: (v) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v),
-        coerce: (v) => {
-            if (!['xs', 'sm', 'md', 'lg', 'xl'].includes(v)) {
-                console.warn(`[ty-textarea] Invalid size '${v}'. Using 'md'.`);
-                return 'md';
-            }
-            return v;
-        }
-    },
-    rows: {
-        type: 'string',
-        visual: true,
-        default: '3',
-        coerce: (v) => String(v)
-    },
-    cols: {
-        type: 'string',
-        visual: true,
-        default: '',
-        coerce: (v) => v ? String(v) : ''
-    },
-    resize: {
-        type: 'string',
-        visual: true,
-        default: 'none',
-        validate: (v) => ['none', 'both', 'horizontal', 'vertical'].includes(v),
-        coerce: (v) => {
-            if (!['none', 'both', 'horizontal', 'vertical'].includes(v)) {
-                console.warn(`[ty-textarea] Invalid resize '${v}'. Using 'none'.`);
-                return 'none';
-            }
-            return v;
-        }
-    },
-    minHeight: {
-        type: 'string',
-        visual: true,
-        default: ''
-    },
-    maxHeight: {
-        type: 'string',
-        visual: true,
-        default: ''
-    }
+value: {
+type: 'string',
+visual: true,
+formValue: true,
+emitChange: true,
+default: ''
+},
+name: {
+type: 'string',
+default: ''
+},
+placeholder: {
+type: 'string',
+visual: true,
+default: ''
+},
+label: {
+type: 'string',
+visual: true,
+default: ''
+},
+disabled: {
+type: 'boolean',
+visual: true,
+default: false
+},
+required: {
+type: 'boolean',
+visual: true,
+default: false
+},
+error: {
+type: 'string',
+visual: true,
+default: ''
+},
+size: {
+type: 'string',
+visual: true,
+default: DEFAULT_SIZE,
+validate: (v) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v),
+coerce: (v) => {
+if (!['xs', 'sm', 'md', 'lg', 'xl'].includes(v)) {
+console.warn(`[ty-textarea] Invalid size '${v}'. Using '${DEFAULT_SIZE}'.`);
+return DEFAULT_SIZE;
+}
+return v;
+}
+},
+rows: {
+type: 'string',
+visual: true,
+default: '3',
+coerce: (v) => String(v)
+},
+cols: {
+type: 'string',
+visual: true,
+default: '',
+coerce: (v) => v ? String(v) : ''
+},
+resize: {
+type: 'string',
+visual: true,
+default: 'none',
+validate: (v) => ['none', 'both', 'horizontal', 'vertical'].includes(v),
+coerce: (v) => {
+if (!['none', 'both', 'horizontal', 'vertical'].includes(v)) {
+console.warn(`[ty-textarea] Invalid resize '${v}'. Using 'none'.`);
+return 'none';
+}
+return v;
+}
+},
+minHeight: {
+type: 'string',
+visual: true,
+default: ''
+},
+maxHeight: {
+type: 'string',
+visual: true,
+default: ''
+}
 };
 if (!customElements.get('ty-textarea')) {
-    customElements.define('ty-textarea', TyTextarea);
+customElements.define('ty-textarea', TyTextarea);
 }