tyrell-components 1.0.0-RC13 → 1.0.0-RC14

package/lib/components/checkbox.d.ts

@@ -1,19 +1,7 @@
 /**
- * TyCheckbox Web Component
- *
- * "Just the box" primitive — renders only the checkbox visual + state.
- * Label, required asterisk, and error display are the consumer's
- * responsibility — wrap in a `<label>` for click delegation.
- *
- * - Boolean checked state, form-associated
- * - Keyboard accessibility (Space/Enter)
- * - Sizes (xs, sm, md, lg, xl) and semantic flavors
- *
- * @example
- * <label>
- *   <ty-checkbox name="terms" required></ty-checkbox>
- *   I agree to the <a href="/terms">terms</a>
- * </label>
+ * TyCheckbox Web Component — "just the box" primitive: renders only the
+ * checkbox visual + state. Label, required asterisk and error display are the
+ * consumer's responsibility — wrap in a `<label>` for click delegation.
  */
 import type { Flavor, Size } from "../types/common.js";
 import { TyComponent } from "../base/ty-component.js";
@@ -41,42 +29,6 @@ export interface TyCheckboxElement extends HTMLElement {
 }
 /**
  * Ty Checkbox Component
- *
- * @example
- * ```html
- * <!-- Basic checkbox -->
- * <ty-checkbox>Subscribe to newsletter</ty-checkbox>
- *
- * <!-- Pre-checked with custom value -->
- * <ty-checkbox
- *   checked
- *   value="accepted"
- *   required>
- *   Accept terms
- * </ty-checkbox>
- *
- * <!-- With error state -->
- * <ty-checkbox
- *   required
- *   error="You must agree to continue"
- *   flavor="danger">
- *   Agree to terms
- * </ty-checkbox>
- *
- * <!-- Different sizes -->
- * <ty-checkbox size="sm">Small</ty-checkbox>
- * <ty-checkbox size="lg">Large</ty-checkbox>
- *
- * <!-- Semantic flavors -->
- * <ty-checkbox flavor="primary" checked>Primary</ty-checkbox>
- * <ty-checkbox flavor="success" checked>Success</ty-checkbox>
- *
- * <!-- Rich content (with icon) -->
- * <ty-checkbox checked>
- *   <ty-icon name="star"></ty-icon>
- *   Premium feature
- * </ty-checkbox>
- * ```
  */
 export declare class TyCheckbox extends TyComponent<CheckboxState> implements TyCheckboxElement {
     static formAssociated: boolean;
@@ -131,16 +83,10 @@ export declare class TyCheckbox extends TyComponent<CheckboxState> implements Ty
     private _focusHandler;
     private _blurHandler;
     constructor();
-    /**
-     * Called when component connects to DOM
-     * TyComponent already handled pre-connection property capture
-     */
+    /** TyComponent already handled pre-connection property capture. */
     protected onConnect(): void;
     /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
     private _syncCustomFlavor;
-    /**
-     * Called when component disconnects from DOM
-     */
     protected onDisconnect(): void;
     /**
      * Handle property changes - called BEFORE render
@@ -150,21 +96,9 @@ export declare class TyCheckbox extends TyComponent<CheckboxState> implements Ty
      * Override form value to return value when checked, null when unchecked
      */
     protected getFormValue(): FormDataEntryValue | null;
-    /**
-     * Build CSS class list for checkbox container
-     */
     private buildClassList;
-    /**
-     * Handle checkbox click event - standards compliant approach
-     */
     private handleCheckboxClick;
-    /**
-     * Handle checkbox keyboard events - space/enter to toggle
-     */
     private handleCheckboxKeydown;
-    /**
-     * Remove event listeners for cleanup
-     */
     private removeEventListeners;
     /**
      * Setup event listeners for checkbox functionality
@@ -197,4 +131,3 @@ export declare class TyCheckbox extends TyComponent<CheckboxState> implements Ty
     get form(): HTMLFormElement | null;
 }
 export {};
-//# sourceMappingURL=checkbox.d.ts.map

package/lib/components/checkbox.js

@@ -1,136 +1,39 @@
-/**
- * TyCheckbox Web Component
- *
- * "Just the box" primitive — renders only the checkbox visual + state.
- * Label, required asterisk, and error display are the consumer's
- * responsibility — wrap in a `<label>` for click delegation.
- *
- * - Boolean checked state, form-associated
- * - Keyboard accessibility (Space/Enter)
- * - Sizes (xs, sm, md, lg, xl) and semantic flavors
- *
- * @example
- * <label>
- *   <ty-checkbox name="terms" required></ty-checkbox>
- *   I agree to the <a href="/terms">terms</a>
- * </label>
- */
 import { TyComponent } from "../base/ty-component.js";
 import { ensureStyles } from "../utils/styles.js";
 import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
 import { checkboxStyles, checkboxCustomFlavorCss } from "../styles/checkbox.js";
-/**
- * Checkmark icon (Lucide `check`, same glyph as ty-option's selected check;
- * stroke-width 3 for presence at 16px — it replaces a heavy fill glyph).
- * Same glyph for checked and unchecked — checked shows it at full color,
- * unchecked at faint color (see styles).
- */
 const CHECK_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`;
-/**
- * Dash icon (Lucide `minus`) — shown while indeterminate.
- */
 const DASH_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>`;
-/**
- * Ty Checkbox Component
- *
- * @example
- * ```html
- * <!-- Basic checkbox -->
- * <ty-checkbox>Subscribe to newsletter</ty-checkbox>
- *
- * <!-- Pre-checked with custom value -->
- * <ty-checkbox
- *   checked
- *   value="accepted"
- *   required>
- *   Accept terms
- * </ty-checkbox>
- *
- * <!-- With error state -->
- * <ty-checkbox
- *   required
- *   error="You must agree to continue"
- *   flavor="danger">
- *   Agree to terms
- * </ty-checkbox>
- *
- * <!-- Different sizes -->
- * <ty-checkbox size="sm">Small</ty-checkbox>
- * <ty-checkbox size="lg">Large</ty-checkbox>
- *
- * <!-- Semantic flavors -->
- * <ty-checkbox flavor="primary" checked>Primary</ty-checkbox>
- * <ty-checkbox flavor="success" checked>Success</ty-checkbox>
- *
- * <!-- Rich content (with icon) -->
- * <ty-checkbox checked>
- *   <ty-icon name="star"></ty-icon>
- *   Premium feature
- * </ty-checkbox>
- * ```
- */
 export class TyCheckbox extends TyComponent {
     constructor() {
-        super(); // TyComponent handles attachInternals() and attachShadow()
-        // ============================================================================
-        // INTERNAL STATE - Not managed by PropertyManager
-        // NOTE: _internals provided by TyComponent base class
-        // ============================================================================
+        super();
         this._customFlavorSheet = null;
         this._listenersSetup = false;
-        // Store references to handlers for cleanup
         this._clickHandler = null;
         this._keydownHandler = null;
         this._focusHandler = null;
         this._blurHandler = null;
-        // Apply styles to shadow root
         const shadow = this.shadowRoot;
         ensureStyles(shadow, { css: checkboxStyles, id: "ty-checkbox" });
     }
-    // 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() {
-        // Re-arm listeners on RE-connect: the base class skips render() when
-        // already rendered, and onDisconnect removed the listeners. No-ops on
-        // first connect (no container yet — render() attaches them).
         this.setupEventListeners();
         this._syncCustomFlavor();
     }
-    /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
     _syncCustomFlavor() {
         this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => checkboxCustomFlavorCss(base));
     }
-    /**
-     * Called when component disconnects from DOM
-     */
     onDisconnect() {
-        // Clean up event listeners when component is removed from DOM
         this.removeEventListeners();
     }
-    /**
-     * Handle property changes - called BEFORE render
-     */
     onPropertiesChanged(changes) {
         if (changes.some((c) => c.name === "flavor")) {
             this._syncCustomFlavor();
         }
     }
-    /**
-     * Override form value to return value when checked, null when unchecked
-     */
     getFormValue() {
         return this.checked ? this.value : null;
     }
-    // Removed old attributeChangedCallback, initializeCheckboxState, validateFlavor - handled by TyComponent
-    /**
-     * Build CSS class list for checkbox container
-     */
     buildClassList() {
         const classes = [this.size];
         if (this.disabled)
@@ -139,18 +42,15 @@ export class TyCheckbox extends TyComponent {
             classes.push("required");
         return classes.join(" ");
     }
-    /**
-     * Handle checkbox click event - standards compliant approach
-     */
     handleCheckboxClick(e) {
         if (this.disabled)
             return;
-        // Native semantics: clicking an indeterminate checkbox resolves to checked
+        if (this.isDuplicateActivationClick())
+            return;
         const newValue = this.indeterminate ? true : !this.checked;
         if (this.indeterminate)
             this.indeterminate = false;
-        this.checked = newValue; // Uses setProperty which handles everything
-        // Emit custom events after property update
+        this.checked = newValue;
         setTimeout(() => {
             const eventDetail = {
                 value: newValue,
@@ -170,26 +70,18 @@ export class TyCheckbox extends TyComponent {
             }));
         }, 0);
     }
-    /**
-     * Handle checkbox keyboard events - space/enter to toggle
-     */
     handleCheckboxKeydown(e) {
         if (this.disabled)
             return;
         if (["Space", " ", "Enter"].includes(e.key)) {
-            e.preventDefault(); // Prevent default for keyboard to avoid page scroll
+            e.preventDefault();
             e.stopPropagation();
             this.handleCheckboxClick(e);
         }
     }
-    /**
-     * Remove event listeners for cleanup
-     */
     removeEventListeners() {
         if (!this._listenersSetup)
             return;
-        // Click lives on the HOST (label delegation + full-element trigger) —
-        // remove it before the shadow-container guard below.
         if (this._clickHandler) {
             this.removeEventListener("click", this._clickHandler);
             this._clickHandler = null;
@@ -216,10 +108,6 @@ export class TyCheckbox extends TyComponent {
         }
         this._listenersSetup = false;
     }
-    /**
-     * Setup event listeners for checkbox functionality
-     * IMPORTANT: Only called ONCE, not on every render
-     */
     setupEventListeners() {
         if (this._listenersSetup)
             return;
@@ -227,7 +115,6 @@ export class TyCheckbox extends TyComponent {
         const checkboxEl = shadow.querySelector(".checkbox-container");
         if (!checkboxEl)
             return;
-        // Create and store handler references for cleanup
         this._clickHandler = (e) => {
             this.handleCheckboxClick(e);
         };
@@ -240,19 +127,12 @@ export class TyCheckbox extends TyComponent {
         this._blurHandler = () => {
             checkboxEl.classList.remove("focused");
         };
-        // Click on the HOST: makes the whole element a trigger and lets a wrapping
-        // <label> delegate (the synthetic click lands on the host, not the shadow).
-        // Keyboard/focus stay on the focusable container.
         this.addEventListener("click", this._clickHandler);
         checkboxEl.addEventListener("keydown", this._keydownHandler);
         checkboxEl.addEventListener("focus", this._focusHandler);
         checkboxEl.addEventListener("blur", this._blurHandler);
         this._listenersSetup = true;
     }
-    /**
-     * Render the checkbox — just the box visual.
-     * Label, required asterisk, and error UI are the consumer's responsibility.
-     */
     render() {
         const shadow = this.shadowRoot;
         let checkboxEl = shadow.querySelector(".checkbox-container");
@@ -278,21 +158,12 @@ export class TyCheckbox extends TyComponent {
             checkboxEl.setAttribute("aria-disabled", String(this.disabled));
             checkboxEl.setAttribute("aria-required", String(this.required));
         }
-        // Dash while indeterminate, tick otherwise (tick's color/opacity carries
-        // the checked/unchecked distinction via CSS).
         const icon = checkboxEl.querySelector(".checkbox-icon");
         icon.innerHTML = this.indeterminate ? DASH_ICON : CHECK_ICON;
-        // (Re)attach listeners — onDisconnect removes them, so a reconnected
-        // element needs them again even though the container already exists.
         this.setupEventListeners();
-        // a11y: role="checkbox" lives on this inner element, but the associated
-        // <label> names the (form-associated) host. Mirror that name onto the role
-        // element so it has an accessible name.
         this.applyLabelName(checkboxEl);
-        // Reflect constraint validation to the owning <form> (required was cosmetic).
         this.updateValidity();
     }
-    /** required + unchecked => valueMissing; otherwise valid. */
     updateValidity() {
         const anchor = this.shadowRoot?.querySelector(".checkbox-container");
         if (this.disabled) {
@@ -306,9 +177,6 @@ export class TyCheckbox extends TyComponent {
             this._internals.setValidity({});
         }
     }
-    // ============================================================================
-    // PROPERTY ACCESSORS - Simple wrappers (no logic!)
-    // ============================================================================
     get checked() {
         return this.getProperty("checked");
     }
@@ -362,26 +230,19 @@ export class TyCheckbox extends TyComponent {
     }
 }
 TyCheckbox.formAssociated = true;
-// ============================================================================
-// PROPERTY CONFIGURATION - Declarative property lifecycle
-// ============================================================================
 TyCheckbox.properties = {
-    // Core boolean state
     checked: {
         type: "boolean",
         visual: true,
-        formValue: true, // Triggers form value update
-        emitChange: true, // Emits 'prop:change' event
+        formValue: true,
+        emitChange: true,
         default: false,
     },
-    // Visual/ARIA "mixed" state (native semantics: no form-value effect,
-    // clicking resolves to checked)
     indeterminate: {
         type: "boolean",
         visual: true,
         default: false,
     },
-    // Form submission value (when checked)
     value: {
         type: "string",
         default: "on",
@@ -413,17 +274,12 @@ TyCheckbox.properties = {
             return v;
         },
     },
-    // Any string is accepted: built-ins get static CSS, other identifiers
-    // become custom flavors (see _syncCustomFlavor), garbage degrades to
-    // the default look.
     flavor: {
         type: "string",
         visual: true,
         default: "neutral",
     },
 };
-// Register the custom element
 if (!customElements.get("ty-checkbox")) {
     customElements.define("ty-checkbox", TyCheckbox);
 }
-//# sourceMappingURL=checkbox.js.map

package/lib/components/copy.d.ts

@@ -1,16 +1,6 @@
 /**
- * TyCopy Web Component
- *
- * Read-only field with copy-to-clipboard functionality
- * Perfect for API keys, tokens, URLs, code snippets, etc.
- *
- * Features:
- * - Read-only display (not an input)
- * - Copy icon on the right
- * - Icon animation on copy (copy → check → copy)
- * - Same styling as ty-input for consistency
- * - Label support
- * - Size and flavor variants
+ * TyCopy Web Component — read-only field with copy-to-clipboard, styled like
+ * ty-input. For API keys, tokens, URLs, code snippets, etc.
  */
 import type { Flavor, Size } from '../types/common.js';
 import { TyComponent } from '../base/ty-component.js';
@@ -45,30 +35,6 @@ export interface TyCopyElement extends HTMLElement {
 }
 /**
  * Ty Copy Field Component
- *
- * @example
- * ```html
- * <!-- Basic copy field -->
- * <ty-copy
- *   label="API Key"
- *   value="sk_live_1234567890abcdef">
- * </ty-copy>
- *
- * <!-- Code format -->
- * <ty-copy
- *   label="Install Command"
- *   value="npm install tyrell-components"
- *   format="code">
- * </ty-copy>
- *
- * <!-- Different sizes -->
- * <ty-copy size="sm" value="Small field"></ty-copy>
- * <ty-copy size="lg" value="Large field"></ty-copy>
- *
- * <!-- Semantic flavors -->
- * <ty-copy flavor="primary" value="Primary"></ty-copy>
- * <ty-copy flavor="success" value="Success"></ty-copy>
- * ```
  */
 export declare class TyCopy extends TyComponent<CopyState> implements TyCopyElement {
     static formAssociated: boolean;
@@ -127,28 +93,16 @@ export declare class TyCopy extends TyComponent<CopyState> implements TyCopyElem
     private _showingSuccess;
     private _customFlavorSheet;
     constructor();
-    /**
-     * Called when component connects to DOM
-     * TyComponent already handled pre-connection property capture
-     */
+    /** TyComponent already handled pre-connection property capture. */
     protected onConnect(): void;
     /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
     private _syncCustomFlavor;
-    /**
-     * Called when component disconnects from DOM
-     */
     protected onDisconnect(): void;
     /**
      * Handle property changes - called BEFORE render
      */
     protected onPropertiesChanged(changes: PropertyChange[]): void;
-    /**
-     * Build CSS class list
-     */
     private buildClassList;
-    /**
-     * Copy value to clipboard
-     */
     private copyToClipboard;
     /**
      * Show copy success animation
@@ -160,13 +114,7 @@ export declare class TyCopy extends TyComponent<CopyState> implements TyCopyElem
      * Swaps copy icon → red X icon → copy icon
      */
     private showCopyError;
-    /**
-     * Setup event listeners
-     */
     private setupEventListeners;
-    /**
-     * Render the component
-     */
     protected render(): void;
     get value(): string;
     set value(val: string);
@@ -188,4 +136,3 @@ export declare class TyCopy extends TyComponent<CopyState> implements TyCopyElem
     set required(value: boolean);
 }
 export {};
-//# sourceMappingURL=copy.d.ts.map