tyrell-components 1.0.0-RC13 → 1.0.0-RC14

package/lib/components/tag.d.ts

@@ -1,14 +1,9 @@
 /**
- * TyTag Web Component
- * PORTED FROM: clj/ty/components/tag.cljs
- * Tag component with slots and semantic flavors
+ * TyTag Web Component — tag/chip with slots and semantic flavors.
  */
 import type { Flavor, Size, TyTagElement } from "../types/common.js";
 import { TyComponent } from "../base/ty-component.js";
 import type { PropertyChange } from "../utils/property-manager.js";
-/**
- * Component internal state (for typing TyComponent)
- */
 interface TagState {
     flavor: Flavor;
     size: Size;
@@ -82,11 +77,7 @@ export declare class TyTag extends TyComponent<TagState> implements TyTagElement
     private _cleanup;
     private _customFlavorSheet;
     constructor();
-    /**
-     * Called when component connects to DOM
-     * TyComponent already handled pre-connection property capture
-     * TyComponent will call render() automatically after this hook
-     */
+    /** TyComponent calls render() automatically after this hook. */
     protected onConnect(): void;
     /**
      * Custom (non-built-in) flavors: generate the same --tag-* wiring the
@@ -95,41 +86,17 @@ export declare class TyTag extends TyComponent<TagState> implements TyTagElement
      * for why this is an adopted sheet and how page-level overrides survive.
      */
     private _syncCustomFlavor;
-    /**
-     * Called when component disconnects from DOM
-     */
     protected onDisconnect(): void;
     /**
      * Handle property changes - called BEFORE render
      */
     protected onPropertiesChanged(changes: PropertyChange[]): void;
-    /**
-     * Handle tag click events
-     */
     private handleClick;
-    /**
-     * Handle tag dismiss events
-     */
     private handleDismiss;
-    /**
-     * Handle keyboard interactions
-     */
     private handleKeydown;
-    /**
-     * Dispatch custom tag events
-     */
     private dispatchTagEvent;
-    /**
-     * Clean up existing event listeners
-     */
     private cleanupEventListeners;
-    /**
-     * Setup event listeners for tag interactions
-     */
     private setupEventListeners;
-    /**
-     * Render the tag component
-     */
     protected render(): void;
     get flavor(): Flavor;
     set flavor(value: Flavor);
@@ -149,4 +116,3 @@ export declare class TyTag extends TyComponent<TagState> implements TyTagElement
     set disabled(value: boolean);
 }
 export {};
-//# sourceMappingURL=tag.d.ts.map

package/lib/components/tag.js

@@ -1,41 +1,12 @@
-/**
- * TyTag Web Component
- * PORTED FROM: clj/ty/components/tag.cljs
- * Tag component with slots and semantic flavors
- */
 import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
 import { TyComponent } from "../base/ty-component.js";
 import { ensureStyles } from "../utils/styles.js";
 import { tagStyles } from "../styles/tag.js";
-/**
- * Ty Tag Component
- *
- * @example
- * ```html
- * <ty-tag flavor="primary">Primary Tag</ty-tag>
- * <ty-tag flavor="success" dismissible>Success Tag</ty-tag>
- * <ty-tag flavor="danger" clickable>Clickable Tag</ty-tag>
- * <ty-tag value="tag-1" selected>Selected Tag</ty-tag>
- * ```
- */
 export class TyTag extends TyComponent {
     constructor() {
-        super(); // TyComponent handles attachInternals() and attachShadow()
-        // ============================================================================
-        // INTERNAL STATE
-        // ============================================================================
-        // Event listener cleanup function
+        super();
         this._cleanup = null;
-        // Adopted sheet holding generated rules for a custom (non-built-in) flavor.
-        // Must be an adopted sheet, not a <style> element — render() replaces
-        // shadowRoot.innerHTML, which would destroy an injected element.
         this._customFlavorSheet = null;
-        // ============================================================================
-        // EVENT HANDLERS (arrow functions for stable references)
-        // ============================================================================
-        /**
-         * Handle tag click events
-         */
         this.handleClick = (event) => {
             if (this.clickable && !this.disabled) {
                 event.preventDefault();
@@ -44,9 +15,6 @@ export class TyTag extends TyComponent {
                 this.dispatchTagEvent("pointerdown", { target: this });
             }
         };
-        /**
-         * Handle tag dismiss events
-         */
         this.handleDismiss = (event) => {
             if (this.dismissible && !this.disabled) {
                 event.preventDefault();
@@ -54,26 +22,21 @@ export class TyTag extends TyComponent {
                 this.dispatchTagEvent("dismiss", { target: this });
             }
         };
-        /**
-         * Handle keyboard interactions
-         */
         this.handleKeydown = (event) => {
             const keyboardEvent = event;
             if (this.disabled)
                 return;
             const keyCode = keyboardEvent.keyCode;
             switch (keyCode) {
-                // ENTER or SPACE - trigger click if clickable
-                case 13: // Enter
-                case 32: // Space
+                case 13:
+                case 32:
                     if (this.clickable) {
                         keyboardEvent.preventDefault();
                         this.dispatchTagEvent("click", { target: this });
                     }
                     break;
-                // DELETE or BACKSPACE - trigger dismiss if dismissible
-                case 8: // Backspace
-                case 46: // Delete
+                case 8:
+                case 46:
                     if (this.dismissible) {
                         keyboardEvent.preventDefault();
                         this.dispatchTagEvent("dismiss", { target: this });
@@ -81,32 +44,14 @@ export class TyTag extends TyComponent {
                     break;
             }
         };
-        // Apply styles to shadow root
         ensureStyles(this.shadowRoot, { css: tagStyles, id: "ty-tag" });
     }
-    // observedAttributes auto-generated by TyComponent from properties config
-    // ============================================================================
-    // TYCOMPONENT LIFECYCLE HOOKS
-    // ============================================================================
-    /**
-     * Called when component connects to DOM
-     * TyComponent already handled pre-connection property capture
-     * TyComponent will call render() automatically after this hook
-     */
     onConnect() {
         this._syncCustomFlavor();
-        // Setup event listeners after initial render happens
-        // Use queueMicrotask to ensure render() has been called by TyComponent
         queueMicrotask(() => {
             this.setupEventListeners();
         });
     }
-    /**
-     * Custom (non-built-in) flavors: generate the same --tag-* wiring the
-     * built-in flavors get, pointed at the user's design tokens
-     * (--ty-bg-X / --ty-color-X / --ty-border-X). See utils/flavor-sheet.ts
-     * for why this is an adopted sheet and how page-level overrides survive.
-     */
     _syncCustomFlavor() {
         this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ flavor, base, shade }) => {
             const bg = shade === "+" ? `--ty-bg-${base}-bold`
@@ -127,26 +72,14 @@ export class TyTag extends TyComponent {
 }`;
         });
     }
-    /**
-     * Called when component disconnects from DOM
-     */
     onDisconnect() {
         this.cleanupEventListeners();
     }
-    /**
-     * Handle property changes - called BEFORE render
-     */
     onPropertiesChanged(changes) {
         if (changes.some((c) => c.name === "flavor")) {
             this._syncCustomFlavor();
         }
     }
-    // ============================================================================
-    // EVENT HELPERS
-    // ============================================================================
-    /**
-     * Dispatch custom tag events
-     */
     dispatchTagEvent(eventType, detail) {
         this.dispatchEvent(new CustomEvent(eventType, {
             detail,
@@ -155,34 +88,24 @@ export class TyTag extends TyComponent {
             cancelable: true,
         }));
     }
-    /**
-     * Clean up existing event listeners
-     */
     cleanupEventListeners() {
         if (this._cleanup) {
             this._cleanup();
             this._cleanup = null;
         }
     }
-    /**
-     * Setup event listeners for tag interactions
-     */
     setupEventListeners() {
-        // Clean up any existing listeners first
         this.cleanupEventListeners();
         const shadow = this.shadowRoot;
         const container = shadow.querySelector(".tag-container");
         const dismissBtn = shadow.querySelector(".tag-dismiss");
         if (!container)
             return;
-        // Click handler for main tag
         container.addEventListener("click", this.handleClick);
         container.addEventListener("keydown", this.handleKeydown);
-        // Dismiss button handler
         if (dismissBtn) {
             dismissBtn.addEventListener("click", this.handleDismiss);
         }
-        // Store cleanup function
         this._cleanup = () => {
             container.removeEventListener("click", this.handleClick);
             container.removeEventListener("keydown", this.handleKeydown);
@@ -191,19 +114,11 @@ export class TyTag extends TyComponent {
             }
         };
     }
-    // ============================================================================
-    // RENDER
-    // ============================================================================
-    /**
-     * Render the tag component
-     */
     render() {
         const shadow = this.shadowRoot;
-        // Build the tag container
         const tabindex = this.clickable ? ' tabindex="0"' : "";
         const ariaDisabled = this.disabled ? ' aria-disabled="true"' : "";
         const dataValue = this.value ? ` data-value="${this.value}"` : "";
-        // Build dismiss button SVG
         const dismissButton = this.dismissible
             ? `
       <button class="tag-dismiss" type="button" aria-label="Remove tag">
@@ -227,14 +142,10 @@ export class TyTag extends TyComponent {
         </div>
       </div>
     `;
-        // Re-setup event listeners after innerHTML replace (destroys old elements)
         if (this._connected) {
             this.setupEventListeners();
         }
     }
-    // ============================================================================
-    // PROPERTY ACCESSORS - Simple wrappers (no logic!)
-    // ============================================================================
     get flavor() {
         return this.getProperty("flavor");
     }
@@ -285,20 +196,11 @@ export class TyTag extends TyComponent {
     }
 }
 TyTag.formAssociated = true;
-// ============================================================================
-// PROPERTY CONFIGURATION - Declarative property lifecycle
-// ============================================================================
 TyTag.properties = {
     flavor: {
         type: "string",
         visual: true,
         default: "neutral",
-        // Built-in: primary | success | danger | warning | neutral.
-        // Append `+` for stronger or `-` for softer shade (e.g. "primary+",
-        // "danger-"). Any other string is a custom flavor: if you define the
-        // design tokens (--ty-bg-X, --ty-color-X, --ty-border-X) it just works
-        // (see _syncCustomFlavor), and ty-tag[flavor="X"] { --tag-bg: ...; }
-        // rules in the page still override.
     },
     size: {
         type: "string",
@@ -345,8 +247,6 @@ TyTag.properties = {
         default: false,
     },
 };
-// Register the custom element
 if (!customElements.get("ty-tag")) {
     customElements.define("ty-tag", TyTag);
 }
-//# sourceMappingURL=tag.js.map

package/lib/components/textarea.d.ts

@@ -1,48 +1,13 @@
 /**
- * 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>
- * ```
+ * ty-textarea — form-associated textarea that auto-resizes to its content,
+ * within optional min-height/max-height constraints.
  *
  * @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 type { PropertyChange } from '../utils/property-manager.js';
-/**
- * Component internal state (for typing TyComponent)
- * Actual state stored as private fields
- */
+/** For typing TyComponent only — actual state lives in private fields. */
 interface TextareaState {
     value: string;
     isFocused: boolean;
@@ -145,23 +110,10 @@ export declare class TyTextarea extends TyComponent<TextareaState> implements Ty
     private _scrollbar;
     private _isFocused;
     constructor();
-    /**
-     * Called when component connects to DOM
-     * TyComponent already handled pre-connection property capture
-     */
     protected onConnect(): void;
-    /**
-     * Called when component disconnects from DOM
-     */
     protected onDisconnect(): void;
-    /**
-     * Handle property changes - called BEFORE render
-     * This replaces the old attributeChangedCallback logic
-     */
+    /** Called BEFORE render. Visual property changes re-render automatically. */
     protected onPropertiesChanged(changes: PropertyChange[]): void;
-    /**
-     * Override form value to return current value
-     */
     protected getFormValue(): FormDataEntryValue | null;
     get value(): string;
     set value(v: string);
@@ -189,51 +141,20 @@ export declare class TyTextarea extends TyComponent<TextareaState> implements Ty
     set minHeight(v: string);
     get maxHeight(): string;
     set maxHeight(v: string);
-    /**
-     * Extract font-related CSS properties from element
-     */
     private getFontStyle;
-    /**
-     * Extract spacing-related CSS properties from element
-     */
     private getSpacingStyle;
-    /**
-     * Setup the hidden dummy element for height measurement
-     */
+    /** Hidden dummy element used to measure the content height. */
     private setupDummyElement;
-    /**
-     * Resize textarea based on dummy element content with min/max height constraints
-     */
+    /** Resize the textarea to the dummy's measured height, within min/max. */
     private resizeTextarea;
     private _setupScrollbar;
     private _destroyScrollbar;
-    /**
-     * Emit custom input and change events
-     */
     private emitValueEvents;
-    /**
-     * Handle textarea input event
-     */
     private handleInputEvent;
-    /**
-     * Handle textarea focus event
-     */
     private handleFocusEvent;
-    /**
-     * Handle textarea blur event
-     */
     private handleBlurEvent;
-    /**
-     * Build class list for textarea element
-     */
     private buildClassList;
-    /**
-     * Apply min/max height constraints to textarea element
-     */
     private applyHeightConstraints;
-    /**
-     * Setup event listeners for textarea
-     */
     private setupTextareaEvents;
     protected render(): void;
     /** required + empty => valueMissing; otherwise valid. Disabled fields are
@@ -241,4 +162,3 @@ export declare class TyTextarea extends TyComponent<TextareaState> implements Ty
     private updateValidity;
 }
 export {};
-//# sourceMappingURL=textarea.d.ts.map