tyrell-components 1.0.0-RC14 → 1.0.0-RC15

package/lib/components/button.js

@@ -1,271 +1,273 @@
+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";
 export class TyButton extends TyComponent {
-    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;
-        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);
-        }
-    }
+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);
 }

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

@@ -47,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();