tyrell-components 1.0.0-RC13 → 1.0.0-RC14

package/lib/components/textarea.js

@@ -1,118 +1,41 @@
-/**
- * ty-textarea - Enhanced textarea component with auto-resize functionality
- *
- * Features:
- * - Auto-resize based on content
- * - Form-associated custom element
- * - Min/max height constraints
- * - Size variants (xs, sm, md, lg, xl)
- * - Validation states (error, required)
- * - Manual resize control options
- * - Accessibility support
- *
- * @example
- * ```html
- * <!-- Basic usage -->
- * <ty-textarea label="Description" placeholder="Enter details..."></ty-textarea>
- *
- * <!-- With validation -->
- * <ty-textarea
- *   label="Bio"
- *   required
- *   error="Bio is required"
- *   size="lg">
- * </ty-textarea>
- *
- * <!-- With height constraints -->
- * <ty-textarea
- *   min-height="100px"
- *   max-height="300px"
- *   placeholder="Auto-resizing textarea">
- * </ty-textarea>
- *
- * <!-- Manual resize control -->
- * <ty-textarea resize="vertical"></ty-textarea>
- * ```
- *
- * @fires {CustomEvent<{value: string, originalEvent: Event}>} input - Emitted on input
- * @fires {CustomEvent<{value: string, originalEvent: Event}>} change - Emitted on change
- */
 import { TyComponent } from '../base/ty-component.js';
 import { ensureStyles } from '../utils/styles.js';
 import { textareaStyles } from '../styles/textarea.js';
 import { CustomScrollbar, isCustomScrollbarEnabled } from '../utils/custom-scrollbar.js';
 import { customScrollbarStyles } from '../styles/custom-scrollbar.js';
-/**
- * Required icon SVG (matches input.ts)
- */
 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(); // TyComponent handles attachInternals() and attachShadow()
-        // ============================================================================
-        // INTERNAL STATE - Not managed by PropertyManager
-        // NOTE: _internals provided by TyComponent base class
-        // ============================================================================
-        // DOM element references
+        super();
         this._textareaEl = null;
         this._dummyEl = null;
         this._scrollbar = null;
-        // Focus state
         this._isFocused = false;
-        /**
-         * Handle textarea input event
-         */
         this.handleInputEvent = (e) => {
             const target = e.target;
             const newValue = target.value;
-            // Update value via property (triggers proper lifecycle)
             this.value = newValue;
-            // Trigger resize after state update
             if (this._textareaEl && this._dummyEl) {
                 this.resizeTextarea(this._textareaEl, this._dummyEl);
             }
-            // Emit custom events
             this.emitValueEvents(e);
         };
-        /**
-         * Handle textarea focus event
-         */
         this.handleFocusEvent = () => {
             this._isFocused = true;
         };
-        /**
-         * Handle textarea blur event
-         */
         this.handleBlurEvent = () => {
             this._isFocused = false;
         };
-        // Apply styles to shadow root
         const shadow = this.shadowRoot;
         ensureStyles(shadow, { css: textareaStyles, id: 'ty-textarea' });
-        // Add custom scrollbar styles
         if (isCustomScrollbarEnabled()) {
             ensureStyles(shadow, { css: customScrollbarStyles, id: 'ty-custom-scrollbar' });
         }
     }
-    // observedAttributes auto-generated by TyComponent from properties config
-    // ============================================================================
-    // TYCOMPONENT LIFECYCLE HOOKS
-    // ============================================================================
-    /**
-     * Called when component connects to DOM
-     * TyComponent already handled pre-connection property capture
-     */
     onConnect() {
-        // No special initialization needed - TyComponent handles everything
-        // Just render the component
     }
-    /**
-     * Called when component disconnects from DOM
-     */
     onDisconnect() {
-        // Cleanup scrollbar
         this._destroyScrollbar();
-        // Cleanup event listeners if needed
         if (this._textareaEl) {
             const newTextarea = this._textareaEl.cloneNode(true);
             this._textareaEl.parentNode?.replaceChild(newTextarea, this._textareaEl);
@@ -120,23 +43,11 @@ export class TyTextarea extends TyComponent {
         }
         this._dummyEl = null;
     }
-    /**
-     * Handle property changes - called BEFORE render
-     * This replaces the old attributeChangedCallback logic
-     */
     onPropertiesChanged(changes) {
-        // No special handling needed for textarea
-        // All property changes will trigger render() automatically if marked as visual
     }
-    /**
-     * Override form value to return current value
-     */
     getFormValue() {
         return this.getProperty('value') || null;
     }
-    // ============================================================================
-    // PROPERTY ACCESSORS - Simplified with TyComponent
-    // ============================================================================
     get value() { return this.getProperty('value'); }
     set value(v) { this.setProperty('value', v); }
     get name() { return this.getProperty('name'); }
@@ -171,10 +82,6 @@ export class TyTextarea extends TyComponent {
     set minHeight(v) { this.setProperty('minHeight', v); }
     get maxHeight() { return this.getProperty('maxHeight'); }
     set maxHeight(v) { this.setProperty('maxHeight', v); }
-    // ===== HELPER METHODS =====
-    /**
-     * Extract font-related CSS properties from element
-     */
     getFontStyle(el) {
         const computedStyle = window.getComputedStyle(el);
         return {
@@ -186,9 +93,6 @@ export class TyTextarea extends TyComponent {
             fontStyle: computedStyle.fontStyle
         };
     }
-    /**
-     * Extract spacing-related CSS properties from element
-     */
     getSpacingStyle(el) {
         const computedStyle = window.getComputedStyle(el);
         return {
@@ -201,23 +105,16 @@ export class TyTextarea extends TyComponent {
             borderWidth: computedStyle.borderWidth
         };
     }
-    /**
-     * Setup the hidden dummy element for height measurement
-     */
     setupDummyElement(textareaEl) {
         const root = this.shadowRoot;
         const existingDummy = root.querySelector('.textarea-dummy');
-        // Remove existing dummy if present
         if (existingDummy) {
             existingDummy.remove();
         }
-        // Create new dummy element
         const dummyEl = document.createElement('pre');
         const fontStyle = this.getFontStyle(textareaEl);
         const spacingStyle = this.getSpacingStyle(textareaEl);
-        // Set dummy element class
         dummyEl.className = 'textarea-dummy';
-        // Apply styles to match textarea
         const style = dummyEl.style;
         style.position = 'absolute';
         style.top = '0';
@@ -228,24 +125,18 @@ export class TyTextarea extends TyComponent {
         style.boxSizing = 'border-box';
         style.overflow = 'hidden';
         style.pointerEvents = 'none';
-        // Apply font styles
         Object.entries(fontStyle).forEach(([prop, value]) => {
             ;
             style[prop] = value;
         });
-        // Apply spacing styles
         Object.entries(spacingStyle).forEach(([prop, value]) => {
             ;
             style[prop] = value;
         });
-        // Append to shadow root
         root.appendChild(dummyEl);
         this._dummyEl = dummyEl;
         return dummyEl;
     }
-    /**
-     * Resize textarea based on dummy element content with min/max height constraints
-     */
     resizeTextarea(textareaEl, dummyEl) {
         if (!textareaEl || !dummyEl)
             return;
@@ -253,25 +144,18 @@ export class TyTextarea extends TyComponent {
         const placeholder = this.placeholder;
         const content = (value === '' && placeholder) ? placeholder : value + ' ';
         const currentHeight = textareaEl.clientHeight;
-        // Set dummy content
         dummyEl.textContent = content;
-        // Set dummy width to match textarea
         dummyEl.style.width = `${textareaEl.clientWidth}px`;
-        // Get measured height
         const measuredHeight = dummyEl.scrollHeight;
-        // Parse min/max heights
         const minHeight = this.minHeight ? parseInt(this.minHeight.replace('px', ''), 10) : null;
         const maxHeight = this.maxHeight ? parseInt(this.maxHeight.replace('px', ''), 10) : null;
-        // Apply constraints
         let constrainedHeight = measuredHeight;
         if (minHeight !== null)
             constrainedHeight = Math.max(constrainedHeight, minHeight);
         if (maxHeight !== null)
             constrainedHeight = Math.min(constrainedHeight, maxHeight);
-        // Only update if height changed significantly (avoid micro-adjustments)
         if (Math.abs(constrainedHeight - currentHeight) > 2) {
             textareaEl.style.height = `${constrainedHeight}px`;
-            // Set overflow based on whether we hit max-height
             const needsScroll = maxHeight !== null && measuredHeight >= maxHeight;
             if (needsScroll) {
                 textareaEl.style.overflowY = 'auto';
@@ -282,22 +166,17 @@ export class TyTextarea extends TyComponent {
                 this._destroyScrollbar();
             }
         }
-        // Keep scrollbar thumb in sync after resize
         this._scrollbar?.update();
     }
-    // ============ Custom Scrollbar ============
     _setupScrollbar(textareaEl) {
         if (this._scrollbar || !isCustomScrollbarEnabled())
             return;
-        // Hide native scrollbar (Firefox + Chrome/Safari via data attribute)
         textareaEl.style.scrollbarWidth = 'none';
         this.setAttribute('data-custom-scroll', '');
         this._scrollbar = new CustomScrollbar(textareaEl, {
             vertical: true,
             horizontal: false
         });
-        // Append track to the scroll region (position: relative) so it tracks the
-        // textarea edges and never overlaps the header/footer.
         const scroll = this.shadowRoot.querySelector('.textarea-scroll');
         if (scroll && this._scrollbar.trackY) {
             scroll.appendChild(this._scrollbar.trackY);
@@ -309,21 +188,15 @@ export class TyTextarea extends TyComponent {
         this._scrollbar.trackY?.remove();
         this._scrollbar.destroy();
         this._scrollbar = null;
-        // Restore native scrollbar
         this.removeAttribute('data-custom-scroll');
         if (this._textareaEl) {
             this._textareaEl.style.scrollbarWidth = '';
         }
     }
-    /**
-     * Emit custom input and change events
-     */
     emitValueEvents(originalEvent) {
         const value = this.value;
-        // Update form internals
         this._internals.setFormValue(value || '');
         this.updateValidity();
-        // Emit custom events
         const data = {
             bubbles: true,
             composed: true,
@@ -332,15 +205,11 @@ export class TyTextarea extends TyComponent {
                 originalEvent
             }
         };
-        // Use setTimeout to ensure these fire after standard events
         setTimeout(() => {
             this.dispatchEvent(new CustomEvent('input', data));
             this.dispatchEvent(new CustomEvent('change', data));
         }, 0);
     }
-    /**
-     * Build class list for textarea element
-     */
     buildClassList() {
         const classes = [this.size];
         if (this.disabled)
@@ -356,9 +225,6 @@ export class TyTextarea extends TyComponent {
             classes.push(customClass);
         return classes.join(' ');
     }
-    /**
-     * Apply min/max height constraints to textarea element
-     */
     applyHeightConstraints(textareaEl) {
         if (this.minHeight) {
             textareaEl.style.minHeight = this.minHeight;
@@ -367,16 +233,12 @@ export class TyTextarea extends TyComponent {
             textareaEl.style.maxHeight = this.maxHeight;
         }
     }
-    /**
-     * Setup event listeners for textarea
-     */
     setupTextareaEvents(textareaEl) {
         textareaEl.addEventListener('input', this.handleInputEvent);
         textareaEl.addEventListener('change', this.handleInputEvent);
         textareaEl.addEventListener('focus', this.handleFocusEvent);
         textareaEl.addEventListener('blur', this.handleBlurEvent);
     }
-    // ===== RENDER =====
     render() {
         const root = this.shadowRoot;
         const existingContainer = root.querySelector('.textarea-container');
@@ -384,8 +246,6 @@ export class TyTextarea extends TyComponent {
         const existingTextarea = root.querySelector('textarea');
         const existingError = root.querySelector('.error-message');
         if (existingContainer && existingTextarea) {
-            // Update existing elements
-            // Update label
             if (this.label) {
                 if (existingLabel) {
                     existingLabel.innerHTML = this.label +
@@ -396,32 +256,26 @@ export class TyTextarea extends TyComponent {
             else if (existingLabel) {
                 existingLabel.style.display = 'none';
             }
-            // Update textarea
             existingTextarea.value = this.value || '';
             existingTextarea.placeholder = this.placeholder || '';
             existingTextarea.disabled = this.disabled;
             existingTextarea.required = this.required;
             existingTextarea.className = this.buildClassList();
-            // a11y: shadow <label> isn't linked to the control; name it directly.
             if (this.label)
                 existingTextarea.setAttribute('aria-label', this.label);
             else
                 existingTextarea.removeAttribute('aria-label');
-            // Set name for form association
             if (this.name) {
                 existingTextarea.setAttribute('name', this.name);
             }
             else {
                 existingTextarea.removeAttribute('name');
             }
-            // Set rows/cols
             if (this.rows)
                 existingTextarea.setAttribute('rows', this.rows);
             if (this.cols)
                 existingTextarea.setAttribute('cols', this.cols);
-            // Apply height constraints
             this.applyHeightConstraints(existingTextarea);
-            // Update error message
             if (this.error) {
                 if (!existingError) {
                     const errorEl = document.createElement('div');
@@ -435,13 +289,11 @@ export class TyTextarea extends TyComponent {
             else if (existingError) {
                 existingError.remove();
             }
-            // Setup dummy element and trigger resize
             const dummyEl = this.setupDummyElement(existingTextarea);
             setTimeout(() => this.resizeTextarea(existingTextarea, dummyEl), 0);
             this._textareaEl = existingTextarea;
         }
         else {
-            // Create new structure
             const container = document.createElement('div');
             container.className = 'textarea-container';
             const labelEl = document.createElement('label');
@@ -461,21 +313,15 @@ export class TyTextarea extends TyComponent {
             textareaEl.required = this.required;
             textareaEl.className = this.buildClassList();
             if (this.label)
-                textareaEl.setAttribute('aria-label', this.label); // a11y: name the control
-            // Set name for form association
+                textareaEl.setAttribute('aria-label', this.label);
             if (this.name) {
                 textareaEl.setAttribute('name', this.name);
             }
-            // Set default or specified rows/cols
             textareaEl.setAttribute('rows', this.rows || '3');
             if (this.cols)
                 textareaEl.setAttribute('cols', this.cols);
-            // Apply height constraints
             this.applyHeightConstraints(textareaEl);
-            // Setup event listeners
             this.setupTextareaEvents(textareaEl);
-            // Build composer structure:
-            //   .textarea-wrapper (border) > [.textarea-header > slot] · .textarea-scroll(textarea) · [.textarea-footer > slot]
             const wrapperEl = document.createElement('div');
             wrapperEl.className = 'textarea-wrapper';
             const headerEl = document.createElement('div');
@@ -483,8 +329,6 @@ export class TyTextarea extends TyComponent {
             const headerSlot = document.createElement('slot');
             headerSlot.setAttribute('name', 'header');
             headerEl.appendChild(headerSlot);
-            // Scroll region wraps only the textarea so the custom scrollbar can't
-            // overlap header/footer.
             const scrollEl = document.createElement('div');
             scrollEl.className = 'textarea-scroll';
             scrollEl.appendChild(textareaEl);
@@ -496,8 +340,6 @@ export class TyTextarea extends TyComponent {
             wrapperEl.appendChild(headerEl);
             wrapperEl.appendChild(scrollEl);
             wrapperEl.appendChild(footerEl);
-            // Collapse empty slots (no padding/divider) by toggling .has-content.
-            // slotchange fires on initial assignment too.
             const syncSlot = (slot, region) => {
                 const update = () => region.classList.toggle('has-content', slot.assignedNodes({ flatten: true }).length > 0);
                 slot.addEventListener('slotchange', update);
@@ -507,7 +349,6 @@ export class TyTextarea extends TyComponent {
             syncSlot(footerSlot, footerEl);
             container.appendChild(labelEl);
             container.appendChild(wrapperEl);
-            // Add error message if present
             if (this.error) {
                 const errorEl = document.createElement('div');
                 errorEl.className = 'error-message';
@@ -515,17 +356,12 @@ export class TyTextarea extends TyComponent {
                 container.appendChild(errorEl);
             }
             root.appendChild(container);
-            // Setup dummy element and trigger initial resize
             const dummyEl = this.setupDummyElement(textareaEl);
             setTimeout(() => this.resizeTextarea(textareaEl, dummyEl), 0);
             this._textareaEl = textareaEl;
         }
-        // Reflect constraint validation to the owning <form>. Without this `required`
-        // is cosmetic — the inner shadow <textarea> can't block the outer form.
         this.updateValidity();
     }
-    /** required + empty => valueMissing; otherwise valid. Disabled fields are
-     *  barred from constraint validation. */
     updateValidity() {
         const ta = this.shadowRoot?.querySelector('textarea');
         if (this.disabled) {
@@ -542,11 +378,7 @@ export class TyTextarea extends TyComponent {
     }
 }
 TyTextarea.formAssociated = true;
-// ============================================================================
-// PROPERTY CONFIGURATION - Declarative property lifecycle
-// ============================================================================
 TyTextarea.properties = {
-    // Core properties
     value: {
         type: 'string',
         visual: true,
@@ -596,7 +428,6 @@ TyTextarea.properties = {
             return v;
         }
     },
-    // Layout properties
     rows: {
         type: 'string',
         visual: true,
@@ -633,8 +464,6 @@ TyTextarea.properties = {
         default: ''
     }
 };
-// Register the component
 if (!customElements.get('ty-textarea')) {
     customElements.define('ty-textarea', TyTextarea);
 }
-//# sourceMappingURL=textarea.js.map

package/lib/components/tooltip.d.ts

@@ -1,13 +1,7 @@
 /**
- * Tooltip Component
- *
- * Shows helpful content on hover/focus with smart positioning.
- * Follows the same shadow DOM pattern as other components.
- *
- * @example
- * <ty-tooltip placement="top" flavor="primary" delay="600">
- *   Helpful tooltip text
- * </ty-tooltip>
+ * Tooltip Component — shows content on hover/focus with smart positioning.
+ * The anchor is the tooltip's PARENT element; the popover itself lives in
+ * document.body (top layer), not in this element's shadow root.
  */
 import { type Placement } from '../utils/positioning.js';
 import type { Flavor } from '../types/common.js';
@@ -32,11 +26,9 @@ export interface TooltipAttributes {
 export declare class TyTooltip extends HTMLElement {
     /** Internal open state */
     _open: boolean;
-    /** Observed attributes */
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
 }
-//# sourceMappingURL=tooltip.d.ts.map