tyrell-components 1.0.0-TC44 → 1.0.0-TC46

package/lib/base/ty-component.d.ts

@@ -40,13 +40,7 @@ export declare abstract class TyComponent<T = any> extends HTMLElement {
      * Sync property value to HTML attribute
      */
     private _syncPropertyToAttribute;
-    /**
-     * Convert camelCase to kebab-case
-     */
     private _toKebabCase;
-    /**
-     * Convert kebab-case to camelCase
-     */
     private _toCamelCase;
     /**
      * Attribute changed callback - unified for all components
@@ -126,6 +120,18 @@ export declare abstract class TyComponent<T = any> extends HTMLElement {
      * the role element as aria-label, giving it an accessible name.
      */
     protected applyLabelName(roleEl: HTMLElement): void;
+    private _handlingActivationClick;
+    /**
+     * Guard for click-driven toggle handlers (checkbox/switch) on components
+     * whose whole host is the click target AND that expect a wrapping
+     * <label> to delegate to them. Some browsers still forward a label's own
+     * synthetic click to the associated control even when the original click
+     * already targeted that control directly, firing 'click' twice for one
+     * user gesture. Both arrive synchronously in the same task, so a flag
+     * cleared on the next microtask catches only the spurious duplicate —
+     * two genuinely separate clicks are always in different tasks.
+     */
+    protected isDuplicateActivationClick(): boolean;
     /**
      * Form reset callback - called when form.reset() is invoked
      * Resets component to its default value
@@ -137,4 +143,3 @@ export declare abstract class TyComponent<T = any> extends HTMLElement {
      */
     protected onFormReset(): void;
 }
-//# sourceMappingURL=ty-component.d.ts.map

package/lib/base/ty-component.js

@@ -1,44 +1,21 @@
-/**
- * TyComponent - Base class for all Ty web components
- *
- * Provides unified property/attribute lifecycle management:
- * - Single code path for all property updates
- * - Declarative property configuration
- * - Predictable rendering behavior
- * - Form association support
- * - Property change events via 'prop:change' (separate from user 'change' events)
- */
 import { PropertyManager } from '../utils/property-manager.js';
-/**
- * Base class for all Ty components with unified property lifecycle
- */
 export class TyComponent extends HTMLElement {
     constructor() {
         super();
-        // Track if component is connected
         this._connected = false;
-        // Track if initial render happened
         this._rendered = false;
-        // Initialize property manager
+        this._handlingActivationClick = false;
         const ctor = this.constructor;
         this.props = new PropertyManager(ctor.properties);
-        // Form association
         this._internals = this.attachInternals();
-        // Setup shadow DOM (subclasses can override by checking if shadowRoot exists)
         if (!this.shadowRoot) {
             this.attachShadow({ mode: 'open' });
         }
     }
-    /**
-     * Define which attributes to observe
-     * Auto-generated from property configuration
-     * Returns kebab-case attribute names (e.g., 'minHeight' -> 'min-height')
-     */
     static get observedAttributes() {
         const attrs = [];
         for (const [name, config] of Object.entries(this.properties)) {
             attrs.push(name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase());
-            // Include alias names so attributeChangedCallback fires for them
             if (config.aliases) {
                 for (const alias of Object.keys(config.aliases)) {
                     attrs.push(alias);
@@ -47,37 +24,22 @@ export class TyComponent extends HTMLElement {
         }
         return attrs;
     }
-    /**
-     * Unified property setter
-     * Use this in your property setters instead of direct field assignment
-     */
     setProperty(name, value) {
         const change = this.props.updateProperty(name, value, 'property');
         if (change) {
-            // Sync to attribute (kebab-case)
             this._syncPropertyToAttribute(change);
-            // Handle the change through unified lifecycle
             this._handlePropertyChanges([change]);
         }
     }
-    /**
-     * Unified property getter
-     * Use this in your property getters
-     */
     getProperty(name) {
         return this.props.get(name);
     }
-    /**
-     * Sync property value to HTML attribute
-     */
     _syncPropertyToAttribute(change) {
         const { name, newValue } = change;
         const config = this.props.getConfig(name);
         if (!config)
             return;
-        // Convert to kebab-case for attribute
         const attrName = this._toKebabCase(name);
-        // Handle different types
         if (config.type === 'boolean') {
             if (newValue) {
                 this.setAttribute(attrName, '');
@@ -96,29 +58,17 @@ export class TyComponent extends HTMLElement {
             this.setAttribute(attrName, String(newValue));
         }
     }
-    /**
-     * Convert camelCase to kebab-case
-     */
     _toKebabCase(str) {
         return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
     }
-    /**
-     * Convert kebab-case to camelCase
-     */
     _toCamelCase(str) {
         return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
     }
-    /**
-     * Attribute changed callback - unified for all components
-     */
     attributeChangedCallback(name, oldValue, newValue) {
         if (oldValue === newValue)
             return;
-        // Check if this is an alias (e.g., not-clearable)
         let change = this.props.handleAlias(name, newValue);
         if (!change) {
-            // Properties may be registered with kebab-case (e.g., 'display-month')
-            // or camelCase. Try the attribute name as-is first, then camelCase.
             const camelName = this._toCamelCase(name);
             const propName = this.props.hasConfig(name) ? name : camelName;
             change = this.props.updateProperty(propName, newValue, 'attribute');
@@ -127,41 +77,26 @@ export class TyComponent extends HTMLElement {
             this._handlePropertyChanges([change]);
         }
     }
-    /**
-     * Connected callback - handle pre-set properties
-     */
     connectedCallback() {
         this._connected = true;
-        // Capture pre-set properties (React/Vue/Reagent pattern)
         const preSetProps = this._capturePreSetProperties();
-        // Batch process all pre-set properties
         if (preSetProps.length > 0) {
             this._handlePropertyChanges(preSetProps);
         }
-        // Initialize component (subclass hook)
         this.onConnect();
-        // Initial render
         if (!this._rendered) {
             this.render();
             this._rendered = true;
         }
     }
-    /**
-     * Disconnected callback
-     */
     disconnectedCallback() {
         this._connected = false;
         this.onDisconnect();
     }
-    /**
-     * Capture properties that were set before connectedCallback
-     * (React, Vue, Reagent set properties before element is connected)
-     */
     _capturePreSetProperties() {
         const changes = [];
         const ctor = this.constructor;
         for (const propName of Object.keys(ctor.properties)) {
-            // Check if property was set on the element before connection
             const descriptor = Object.getOwnPropertyDescriptor(this, propName);
             if (descriptor && descriptor.value !== undefined) {
                 const change = this.props.updateProperty(propName, descriptor.value, 'property');
@@ -172,38 +107,20 @@ export class TyComponent extends HTMLElement {
         }
         return changes;
     }
-    /**
-     * THE CORE LIFECYCLE METHOD
-     * All property changes flow through here
-     *
-     * Lifecycle order:
-     * 1. Update internal state (onPropertiesChanged hook)
-     * 2. Sync form value (if formValue property changed)
-     * 3. Render (if visual property changed)
-     * 4. Emit events (if emitChange property changed)
-     */
     _handlePropertyChanges(changes) {
         if (changes.length === 0)
             return;
-        // 1. Update internal state (subclass-specific)
         this.onPropertiesChanged(changes);
-        // 2. Sync form value if needed
         const formValueChanged = changes.some(c => this.props.isFormValue(c.name));
         if (formValueChanged) {
             this.updateFormValue();
         }
-        // 3. Render only if visual properties changed AND component is connected
         const visualChanged = changes.some(c => this.props.isVisual(c.name));
         if (visualChanged && this._connected) {
             this.render();
         }
-        // 4. Emit change events if configured
         this._emitChangeEvents(changes);
     }
-    /**
-     * Emit property change events for properties that require it
-     * Uses 'prop:change' event to avoid conflicts with user interaction 'change' events
-     */
     _emitChangeEvents(changes) {
         for (const change of changes) {
             if (this.props.shouldEmitChange(change.name)) {
@@ -219,68 +136,28 @@ export class TyComponent extends HTMLElement {
             }
         }
     }
-    /**
-     * Update form value via ElementInternals
-     * Subclasses can override to customize form value
-     */
     updateFormValue() {
         const formValue = this.getFormValue();
         this._internals.setFormValue(formValue);
     }
-    /**
-     * Get the form value for this component
-     * Default: return 'value' property
-     * Override for custom behavior
-     */
     getFormValue() {
         return this.props.get('value') ?? null;
     }
-    /**
-     * Hook: Called when properties change
-     * Subclasses can override to update internal state
-     *
-     * This is called BEFORE rendering, so you can update
-     * internal state here and it will be reflected in the render
-     */
     onPropertiesChanged(changes) {
-        // Default: no-op
-        // Subclasses can override to update _state, _config, etc.
     }
-    /**
-     * Hook: Called when component is connected
-     * Use this instead of overriding connectedCallback
-     */
     onConnect() {
-        // Default: no-op
     }
-    /**
-     * Hook: Called when component is disconnected
-     * Use this for cleanup instead of overriding disconnectedCallback
-     */
     onDisconnect() {
-        // Default: no-op
     }
-    /**
-     * Get the form element this component is associated with
-     */
     get form() {
         return this._internals.form;
     }
-    /**
-     * a11y helper for components whose ARIA role lives on an inner shadow element
-     * (checkbox/switch/radio). A wrapping <label> names the form-associated HOST,
-     * not the inner role element — so mirror the host's associated label text onto
-     * the role element as aria-label, giving it an accessible name.
-     */
     applyLabelName(roleEl) {
         let text = Array.from(this._internals.labels ?? [])
             .map((l) => l.textContent?.trim())
             .filter(Boolean)
             .join(' ');
         if (!text) {
-            // Non-form-associated controls (e.g. ty-radio) aren't labelable, so the
-            // wrapping <label> never appears in internals.labels — read it directly,
-            // stripping this element's own subtree from the text.
             const lbl = this.closest('label');
             if (lbl) {
                 const clone = lbl.cloneNode(true);
@@ -293,32 +170,24 @@ export class TyComponent extends HTMLElement {
         else
             roleEl.removeAttribute('aria-label');
     }
-    /**
-     * Form reset callback - called when form.reset() is invoked
-     * Resets component to its default value
-     */
+    isDuplicateActivationClick() {
+        if (this._handlingActivationClick)
+            return true;
+        this._handlingActivationClick = true;
+        queueMicrotask(() => { this._handlingActivationClick = false; });
+        return false;
+    }
     formResetCallback() {
-        // Get the default value from property configuration
         const ctor = this.constructor;
         const valueConfig = ctor.properties['value'];
         if (valueConfig) {
             const defaultValue = valueConfig.default ?? '';
-            // Reset the value property through setProperty to trigger lifecycle
             this.setProperty('value', defaultValue);
         }
-        // Call subclass hook for custom reset behavior
         this.onFormReset();
     }
-    /**
-     * Hook: Called when form is reset
-     * Subclasses can override to perform additional reset actions
-     */
     onFormReset() {
-        // Default: no-op
-        // Subclasses can override to reset additional state
     }
 }
 TyComponent.formAssociated = true;
-// Subclasses must define their property configuration
 TyComponent.properties = {};
-//# sourceMappingURL=ty-component.js.map

package/lib/components/button.d.ts

@@ -1,12 +1,6 @@
 /**
- * TyButton Web Component
- *
- * Three appearance variants × six flavors × three tones (+/base/-).
- *   appearance="solid"     saturated brand fill (default)
- *   appearance="outlined"  transparent bg, text === border
- *   appearance="ghost"     text only, hover bg
- *
- * Append `+` or `-` to a flavor for stronger/softer tone (e.g. "primary+").
+ * TyButton Web Component — three appearances (solid/outlined/ghost) × six
+ * flavors × three tones. Append `+`/`-` to a flavor for stronger/softer tone.
  */
 import type { Flavor, Size, TyButtonElement } from "../types/common.js";
 import { TyComponent } from "../base/ty-component.js";
@@ -27,13 +21,6 @@ interface ButtonState {
 }
 /**
  * Ty Button Component
- *
- * @example
- * ```html
- * <ty-button flavor="primary">Default solid</ty-button>
- * <ty-button appearance="outlined" flavor="danger">Outlined</ty-button>
- * <ty-button appearance="ghost" flavor="success+">Ghost stronger</ty-button>
- * ```
  */
 export declare class TyButton extends TyComponent<ButtonState> implements TyButtonElement {
     static formAssociated: boolean;
@@ -147,4 +134,3 @@ export declare class TyButton extends TyComponent<ButtonState> implements TyButt
     protected render(): void;
 }
 export {};
-//# sourceMappingURL=button.d.ts.map

package/lib/components/button.js

@@ -1,33 +1,12 @@
-/**
- * TyButton Web Component
- *
- * Three appearance variants × six flavors × three tones (+/base/-).
- *   appearance="solid"     saturated brand fill (default)
- *   appearance="outlined"  transparent bg, text === border
- *   appearance="ghost"     text only, hover bg
- *
- * Append `+` or `-` to a flavor for stronger/softer tone (e.g. "primary+").
- */
 import { TyComponent } from "../base/ty-component.js";
 import { ensureStyles, buildClassList } from "../utils/styles.js";
 import { buttonStyles, buttonCustomFlavorCss } from "../styles/button.js";
 import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
 import { getLoaderSvg } from "../utils/loader-registry.js";
-/**
- * Ty Button Component
- *
- * @example
- * ```html
- * <ty-button flavor="primary">Default solid</ty-button>
- * <ty-button appearance="outlined" flavor="danger">Outlined</ty-button>
- * <ty-button appearance="ghost" flavor="success+">Ghost stronger</ty-button>
- * ```
- */
 export class TyButton extends TyComponent {
     constructor() {
         super();
         this._structureInitialized = false;
-        // Adopted sheet with generated rules for a custom (non-built-in) flavor
         this._customFlavorSheet = null;
         ensureStyles(this.shadowRoot, { css: buttonStyles, id: "ty-button" });
     }
@@ -40,19 +19,10 @@ export class TyButton extends TyComponent {
             this._syncCustomFlavor();
         }
     }
-    /**
-     * Custom flavors: adopt generated per-flavor rules pointed at the user's
-     * design tokens (--ty-solid-X / --ty-color-X / --ty-bg-X), falling back to
-     * neutral for any token the user didn't define. Tone (+/-) is handled by
-     * the tone-plus/tone-minus classes, so only the base flavor matters here.
-     */
     _syncCustomFlavor() {
         const { base } = this.parseFlavor();
         this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, base, () => buttonCustomFlavorCss(base));
     }
-    // ============================================================================
-    // PROPERTY ACCESSORS
-    // ============================================================================
     get flavor() {
         return this.getProperty("flavor");
     }
@@ -125,10 +95,6 @@ export class TyButton extends TyComponent {
     set value(value) {
         this.setProperty("value", value);
     }
-    // ============================================================================
-    // INTERNAL
-    // ============================================================================
-    /** Parse the optional `+`/`-` shade suffix from a flavor string. */
     parseFlavor() {
         const f = this.flavor || "";
         if (f.length > 1 && f.endsWith("+"))
@@ -200,7 +166,6 @@ export class TyButton extends TyComponent {
         button.classList.toggle("loading", isLoading);
         if (isLoading) {
             button.setAttribute("aria-busy", "true");
-            // Pull the latest registered loader SVG so registry changes take effect
             const loader = button.querySelector(".loader-icon");
             if (loader)
                 loader.innerHTML = getLoaderSvg();
@@ -304,4 +269,3 @@ TyButton.properties = {
 if (!customElements.get("ty-button")) {
     customElements.define("ty-button", TyButton);
 }
-//# sourceMappingURL=button.js.map

package/lib/components/calendar-month.d.ts

@@ -1,39 +1,6 @@
 /**
- * TyCalendarMonth Web Component
- * PORTED FROM: cljs/ty/components/calendar_month.cljs
- *
- * A stateless, property-driven calendar month renderer with customizable
- * day content and styling.
- *
- * Features:
- * - 42-day grid (6 weeks × 7 days) with Monday-first ordering
- * - Localized weekday headers
- * - Custom day content rendering via dayContentFn
- * - Custom day classes via dayClassesFn
- * - Custom CSS injection via customCSS
- * - Responsive width system (width, minWidth, maxWidth)
- * - Rich day-click events with full context
- *
- * @example
- * ```html
- * <!-- Basic usage -->
- * <ty-calendar-month
- *   display-year="2025"
- *   display-month="10"
- *   locale="en-US">
- * </ty-calendar-month>
- *
- * <!-- With custom rendering -->
- * <ty-calendar-month id="custom"></ty-calendar-month>
- * <script type="module">
- *   const cal = document.getElementById('custom');
- *   cal.dayContentFn = (ctx) => {
- *     const el = document.createElement('div');
- *     el.textContent = ctx.dayInMonth;
- *     return el;
- *   };
- * </script>
- * ```
+ * TyCalendarMonth Web Component — a stateless, property-driven calendar month
+ * renderer (42-day grid, Monday-first) with customizable day content/styling.
  */
 import { type DayContext } from '../utils/calendar-utils.js';
 /**
@@ -124,22 +91,13 @@ export declare class TyCalendarMonth extends HTMLElement {
      * Apply width-related properties as CSS custom properties
      */
     private applyWidthProperties;
-    /**
-     * Apply custom CSS to shadow root
-     */
     private applyCustomCSS;
     /**
      * Force re-render of the calendar month
      * Useful when external data changes (e.g., async event loading)
      */
     refresh(): void;
-    /**
-     * Dispatch day-click custom event with day context
-     */
     private dispatchDayClick;
-    /**
-     * Render a single day cell
-     */
     /**
      * WAI-ARIA grid pattern: gridcell + roving tabindex (exactly one cell in
      * the whole grid is tabindex="0" at a time — the rest are -1, so Tab
@@ -147,9 +105,5 @@ export declare class TyCalendarMonth extends HTMLElement {
      * Disabled days are excluded from the roving set entirely.
      */
     private renderDayCell;
-    /**
-     * Main render function - property-based approach
-     */
     private render;
 }
-//# sourceMappingURL=calendar-month.d.ts.map