tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/components/button.js

@@ -1,307 +1,273 @@
-/**
- * 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 { DEFAULT_SIZE } from "../types/common.js";
 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" });
-    }
-    onConnect() {
-        this._syncCustomFlavor();
-    }
-    onDisconnect() { }
-    onPropertiesChanged(changes) {
-        if (changes.some((c) => c.name === "flavor")) {
-            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");
-    }
-    set flavor(value) {
-        this.setProperty("flavor", value);
-    }
-    get size() {
-        return this.getProperty("size");
-    }
-    set size(value) {
-        this.setProperty("size", value);
-    }
-    get appearance() {
-        return this.getProperty("appearance");
-    }
-    set appearance(value) {
-        this.setProperty("appearance", value);
-    }
-    get disabled() {
-        return this.getProperty("disabled");
-    }
-    set disabled(value) {
-        this.setProperty("disabled", value);
-    }
-    get loading() {
-        return this.getProperty("loading");
-    }
-    set loading(value) {
-        this.setProperty("loading", value);
-    }
-    get type() {
-        return this.getProperty("type");
-    }
-    set type(value) {
-        this.setProperty("type", value);
-    }
-    get pill() {
-        return this.getProperty("pill");
-    }
-    set pill(value) {
-        this.setProperty("pill", value);
-    }
-    get action() {
-        return this.getProperty("action");
-    }
-    set action(value) {
-        this.setProperty("action", value);
-    }
-    get muted() {
-        return this.getProperty("muted");
-    }
-    set muted(value) {
-        this.setProperty("muted", value);
-    }
-    get wide() {
-        return this.getProperty("wide");
-    }
-    set wide(value) {
-        this.setProperty("wide", value);
-    }
-    get name() {
-        return this.getProperty("name");
-    }
-    set name(value) {
-        this.setProperty("name", value);
-    }
-    get value() {
-        return this.getProperty("value");
-    }
-    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("+"))
-            return { base: f.slice(0, -1), tone: "+" };
-        if (f.length > 1 && f.endsWith("-"))
-            return { base: f.slice(0, -1), tone: "-" };
-        return { base: f, tone: "" };
-    }
-    buildClasses() {
-        const { base, tone } = this.parseFlavor();
-        return buildClassList(base, this.size, this.appearance, this.pill && "pill", this.action && "action", this.muted && "muted", tone === "+" && "tone-plus", tone === "-" && "tone-minus");
-    }
-    handleFormAction() {
-        const form = this._internals.form;
-        if (!form)
-            return;
-        switch (this.type) {
-            case "submit":
-                if (this.name && this.value) {
-                    this._internals.setFormValue(this.value);
-                }
-                form.requestSubmit();
-                break;
-            case "reset":
-                form.reset();
-                break;
-            case "button":
-                break;
-        }
-    }
-    initializeButtonStructure() {
-        const shadow = this.shadowRoot;
-        const classes = this.buildClasses();
-        const button = document.createElement("button");
-        button.disabled = this.disabled;
-        button.className = classes;
-        const loader = document.createElement("span");
-        loader.className = "loader-icon";
-        loader.setAttribute("aria-hidden", "true");
-        loader.innerHTML = getLoaderSvg();
-        const startSlot = document.createElement("slot");
-        startSlot.name = "start";
-        startSlot.className = "start";
-        const defaultSlot = document.createElement("slot");
-        const endSlot = document.createElement("slot");
-        endSlot.name = "end";
-        endSlot.className = "end";
-        button.appendChild(loader);
-        button.appendChild(startSlot);
-        button.appendChild(defaultSlot);
-        button.appendChild(endSlot);
-        button.addEventListener("click", (e) => {
-            if (this.disabled || this.loading)
-                return;
-            e.stopPropagation();
-            this.handleFormAction();
-            this.dispatchEvent(new CustomEvent("click", {
-                bubbles: true,
-                composed: true,
-                detail: { originalEvent: e },
-            }));
-        });
-        this.applyLoadingState(button);
-        shadow.appendChild(button);
-        this._structureInitialized = true;
-    }
-    applyLoadingState(button) {
-        const isLoading = this.loading;
-        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();
-        }
-        else {
-            button.removeAttribute("aria-busy");
-        }
-    }
-    render() {
-        const shadow = this.shadowRoot;
-        if (!this._structureInitialized) {
-            this.initializeButtonStructure();
-            return;
-        }
-        const classes = this.buildClasses();
-        const button = shadow.querySelector("button");
-        if (button) {
-            button.disabled = this.disabled;
-            button.className = classes;
-            this.applyLoadingState(button);
-        }
-    }
+constructor() {
+super();
+this._structureInitialized = false;
+this._customFlavorSheet = null;
+ensureStyles(this.shadowRoot, { css: buttonStyles, id: "ty-button" });
+}
+onConnect() {
+this._syncCustomFlavor();
+}
+onDisconnect() { }
+onPropertiesChanged(changes) {
+if (changes.some((c) => c.name === "flavor")) {
+this._syncCustomFlavor();
+}
+}
+_syncCustomFlavor() {
+const { base } = this.parseFlavor();
+this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, base, () => buttonCustomFlavorCss(base));
+}
+get flavor() {
+return this.getProperty("flavor");
+}
+set flavor(value) {
+this.setProperty("flavor", value);
+}
+get size() {
+return this.getProperty("size");
+}
+set size(value) {
+this.setProperty("size", value);
+}
+get appearance() {
+return this.getProperty("appearance");
+}
+set appearance(value) {
+this.setProperty("appearance", value);
+}
+get disabled() {
+return this.getProperty("disabled");
+}
+set disabled(value) {
+this.setProperty("disabled", value);
+}
+get loading() {
+return this.getProperty("loading");
+}
+set loading(value) {
+this.setProperty("loading", value);
+}
+get type() {
+return this.getProperty("type");
+}
+set type(value) {
+this.setProperty("type", value);
+}
+get pill() {
+return this.getProperty("pill");
+}
+set pill(value) {
+this.setProperty("pill", value);
+}
+get action() {
+return this.getProperty("action");
+}
+set action(value) {
+this.setProperty("action", value);
+}
+get muted() {
+return this.getProperty("muted");
+}
+set muted(value) {
+this.setProperty("muted", value);
+}
+get wide() {
+return this.getProperty("wide");
+}
+set wide(value) {
+this.setProperty("wide", value);
+}
+get name() {
+return this.getProperty("name");
+}
+set name(value) {
+this.setProperty("name", value);
+}
+get value() {
+return this.getProperty("value");
+}
+set value(value) {
+this.setProperty("value", value);
+}
+parseFlavor() {
+const f = this.flavor || "";
+if (f.length > 1 && f.endsWith("+"))
+return { base: f.slice(0, -1), tone: "+" };
+if (f.length > 1 && f.endsWith("-"))
+return { base: f.slice(0, -1), tone: "-" };
+return { base: f, tone: "" };
+}
+buildClasses() {
+const { base, tone } = this.parseFlavor();
+return buildClassList(base, this.size, this.appearance, this.pill && "pill", this.action && "action", this.muted && "muted", tone === "+" && "tone-plus", tone === "-" && "tone-minus");
+}
+handleFormAction() {
+const form = this._internals.form;
+if (!form)
+return;
+switch (this.type) {
+case "submit":
+if (this.name && this.value) {
+this._internals.setFormValue(this.value);
+}
+form.requestSubmit();
+break;
+case "reset":
+form.reset();
+break;
+case "button":
+break;
+}
+}
+initializeButtonStructure() {
+const shadow = this.shadowRoot;
+const classes = this.buildClasses();
+const button = document.createElement("button");
+button.disabled = this.disabled;
+button.className = classes;
+button.setAttribute("part", "button");
+const loader = document.createElement("span");
+loader.className = "loader-icon";
+loader.setAttribute("aria-hidden", "true");
+loader.innerHTML = getLoaderSvg();
+const startSlot = document.createElement("slot");
+startSlot.name = "start";
+startSlot.className = "start";
+const defaultSlot = document.createElement("slot");
+const endSlot = document.createElement("slot");
+endSlot.name = "end";
+endSlot.className = "end";
+button.appendChild(loader);
+button.appendChild(startSlot);
+button.appendChild(defaultSlot);
+button.appendChild(endSlot);
+button.addEventListener("click", (e) => {
+if (this.disabled || this.loading)
+return;
+e.stopPropagation();
+this.handleFormAction();
+this.dispatchEvent(new CustomEvent("click", {
+bubbles: true,
+composed: true,
+detail: { originalEvent: e },
+}));
+});
+this.applyLoadingState(button);
+shadow.appendChild(button);
+this._structureInitialized = true;
+}
+applyLoadingState(button) {
+const isLoading = this.loading;
+button.classList.toggle("loading", isLoading);
+if (isLoading) {
+button.setAttribute("aria-busy", "true");
+const loader = button.querySelector(".loader-icon");
+if (loader)
+loader.innerHTML = getLoaderSvg();
+}
+else {
+button.removeAttribute("aria-busy");
+}
+}
+render() {
+const shadow = this.shadowRoot;
+if (!this._structureInitialized) {
+this.initializeButtonStructure();
+return;
+}
+const classes = this.buildClasses();
+const button = shadow.querySelector("button");
+if (button) {
+button.disabled = this.disabled;
+button.className = classes;
+this.applyLoadingState(button);
+}
+}
 }
 TyButton.formAssociated = true;
 TyButton.properties = {
-    flavor: {
-        type: "string",
-        visual: true,
-        default: "neutral",
-    },
-    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-button] Invalid size '${v}'. Using 'md'.`);
-                return "md";
-            }
-            return v;
-        },
-    },
-    appearance: {
-        type: "string",
-        visual: true,
-        default: "solid",
-        validate: (v) => ["solid", "outlined", "ghost"].includes(v),
-        coerce: (v) => {
-            if (!["solid", "outlined", "ghost"].includes(v)) {
-                console.warn(`[ty-button] Invalid appearance '${v}'. Using 'solid'.`);
-                return "solid";
-            }
-            return v;
-        },
-    },
-    disabled: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    loading: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    type: {
-        type: "string",
-        visual: false,
-        default: "submit",
-    },
-    pill: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    action: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    muted: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    wide: {
-        type: "boolean",
-        visual: false,
-        default: false,
-    },
-    name: {
-        type: "string",
-        default: "",
-    },
-    value: {
-        type: "string",
-        default: "",
-    },
+flavor: {
+type: "string",
+visual: true,
+default: "neutral",
+},
+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-button] Invalid size '${v}'. Using '${DEFAULT_SIZE}'.`);
+return DEFAULT_SIZE;
+}
+return v;
+},
+},
+appearance: {
+type: "string",
+visual: true,
+default: "solid",
+validate: (v) => ["solid", "outlined", "ghost"].includes(v),
+coerce: (v) => {
+if (!["solid", "outlined", "ghost"].includes(v)) {
+console.warn(`[ty-button] Invalid appearance '${v}'. Using 'solid'.`);
+return "solid";
+}
+return v;
+},
+},
+disabled: {
+type: "boolean",
+visual: true,
+default: false,
+},
+loading: {
+type: "boolean",
+visual: true,
+default: false,
+},
+type: {
+type: "string",
+visual: false,
+default: "submit",
+},
+pill: {
+type: "boolean",
+visual: true,
+default: false,
+},
+action: {
+type: "boolean",
+visual: true,
+default: false,
+},
+muted: {
+type: "boolean",
+visual: true,
+default: false,
+},
+wide: {
+type: "boolean",
+visual: false,
+default: false,
+},
+name: {
+type: "string",
+default: "",
+},
+value: {
+type: "string",
+default: "",
+},
 };
 if (!customElements.get("ty-button")) {
-    customElements.define("ty-button", TyButton);
+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';
 /**
@@ -80,8 +47,8 @@ export declare class TyCalendarMonth extends HTMLElement {
     private _focusedIndex;
     private _cellElements;
     /**
-     * Observed attributes (minimal - mainly for debugging)
-     * Properties are the primary API
+     * Observed attributes. `display-year`/`display-month` mirror the
+     * displayYear/displayMonth properties (which are what ty-calendar drives).
      */
     static get observedAttributes(): string[];
     constructor();
@@ -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