tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/components/tag.js

@@ -1,352 +1,253 @@
-/**
- * TyTag Web Component
- * PORTED FROM: clj/ty/components/tag.cljs
- * Tag component with slots and semantic flavors
- */
+import { DEFAULT_SIZE } from "../types/common.js";
 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
-        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();
-                event.stopPropagation();
-                this.dispatchTagEvent("click", { target: this });
-                this.dispatchTagEvent("pointerdown", { target: this });
-            }
-        };
-        /**
-         * Handle tag dismiss events
-         */
-        this.handleDismiss = (event) => {
-            if (this.dismissible && !this.disabled) {
-                event.preventDefault();
-                event.stopPropagation();
-                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
-                    if (this.clickable) {
-                        keyboardEvent.preventDefault();
-                        this.dispatchTagEvent("click", { target: this });
-                    }
-                    break;
-                // DELETE or BACKSPACE - trigger dismiss if dismissible
-                case 8: // Backspace
-                case 46: // Delete
-                    if (this.dismissible) {
-                        keyboardEvent.preventDefault();
-                        this.dispatchTagEvent("dismiss", { target: this });
-                    }
-                    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`
-                : shade === "-" ? `--ty-bg-${base}-soft`
-                    : `--ty-bg-${base}`;
-            const color = shade === "+" ? `--ty-color-${base}-strong` : `--ty-color-${base}`;
-            return `
+constructor() {
+super();
+this._cleanup = null;
+this._customFlavorSheet = null;
+this.handleClick = (event) => {
+if (this.clickable && !this.disabled) {
+event.preventDefault();
+event.stopPropagation();
+this.dispatchTagEvent("click", { target: this });
+this.dispatchTagEvent("pointerdown", { target: this });
+}
+};
+this.handleDismiss = (event) => {
+if (this.dismissible && !this.disabled) {
+event.preventDefault();
+event.stopPropagation();
+this.dispatchTagEvent("dismiss", { target: this });
+}
+};
+this.handleKeydown = (event) => {
+const keyboardEvent = event;
+if (this.disabled)
+return;
+const keyCode = keyboardEvent.keyCode;
+switch (keyCode) {
+case 13:
+case 32:
+if (this.clickable) {
+keyboardEvent.preventDefault();
+this.dispatchTagEvent("click", { target: this });
+}
+break;
+case 8:
+case 46:
+if (this.dismissible) {
+keyboardEvent.preventDefault();
+this.dispatchTagEvent("dismiss", { target: this });
+}
+break;
+}
+};
+ensureStyles(this.shadowRoot, { css: tagStyles, id: "ty-tag" });
+}
+onConnect() {
+this._syncCustomFlavor();
+queueMicrotask(() => {
+this.setupEventListeners();
+});
+}
+_syncCustomFlavor() {
+this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ flavor, base, shade }) => {
+const bg = shade === "+" ? `--ty-bg-${base}-bold`
+: shade === "-" ? `--ty-bg-${base}-soft`
+: `--ty-bg-${base}`;
+const color = shade === "+" ? `--ty-color-${base}-strong` : `--ty-color-${base}`;
+return `
 :host([flavor="${flavor}"]) {
-  --tag-bg: var(${bg});
-  --tag-color: var(${color});
-  --tag-border-color: var(--ty-border-${base}, var(--ty-color-${base}));
+--tag-bg: var(${bg});
+--tag-color: var(${color});
+--tag-border-color: var(--ty-border-${base}, var(--ty-color-${base}));
 }
 :host([flavor="${flavor}"]) .tag-container[tabindex]:hover {
-  background: var(--ty-bg-${base}-bold, var(--tag-bg));
+background: var(--ty-bg-${base}-bold, var(--tag-bg));
 }
 :host([flavor="${flavor}"]) .tag-container[tabindex]:focus {
-  box-shadow: 0 0 0 3px var(--ty-color-${base}-faint, var(--tag-color));
+box-shadow: 0 0 0 3px var(--ty-color-${base}-faint, var(--tag-color));
 }`;
-        });
-    }
-    /**
-     * 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,
-            bubbles: true,
-            composed: true,
-            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);
-            if (dismissBtn) {
-                dismissBtn.removeEventListener("click", this.handleDismiss);
-            }
-        };
-    }
-    // ============================================================================
-    // 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">
-        <svg viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
-        </svg>
-      </button>
-    `
-            : "";
-        shadow.innerHTML = `
-      <div class="tag-container" part="container"${tabindex}${ariaDisabled}${dataValue}>
-        <div class="tag-start">
-          <slot name="start" class="tag-start"></slot>
-        </div>
-        <div class="tag-content">
-          <slot></slot>
-        </div>
-        <div class="tag-end">
-          <slot name="end"></slot>
-          ${dismissButton}
-        </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");
-    }
-    set flavor(value) {
-        this.setProperty("flavor", value);
-    }
-    get size() {
-        return this.getProperty("size");
-    }
-    set size(value) {
-        this.setProperty("size", value);
-    }
-    get value() {
-        return this.getProperty("value");
-    }
-    set value(val) {
-        this.setProperty("value", val);
-    }
-    get selected() {
-        return this.getProperty("selected");
-    }
-    set selected(value) {
-        this.setProperty("selected", value);
-    }
-    get pill() {
-        return this.getProperty("pill");
-    }
-    set pill(value) {
-        this.setProperty("pill", value);
-    }
-    get clickable() {
-        return this.getProperty("clickable");
-    }
-    set clickable(value) {
-        this.setProperty("clickable", value);
-    }
-    get dismissible() {
-        return this.getProperty("dismissible");
-    }
-    set dismissible(value) {
-        this.setProperty("dismissible", value);
-    }
-    get disabled() {
-        return this.getProperty("disabled");
-    }
-    set disabled(value) {
-        this.setProperty("disabled", value);
-    }
+});
+}
+onDisconnect() {
+this.cleanupEventListeners();
+}
+onPropertiesChanged(changes) {
+if (changes.some((c) => c.name === "flavor")) {
+this._syncCustomFlavor();
+}
+}
+dispatchTagEvent(eventType, detail) {
+this.dispatchEvent(new CustomEvent(eventType, {
+detail,
+bubbles: true,
+composed: true,
+cancelable: true,
+}));
+}
+cleanupEventListeners() {
+if (this._cleanup) {
+this._cleanup();
+this._cleanup = null;
+}
+}
+setupEventListeners() {
+this.cleanupEventListeners();
+const shadow = this.shadowRoot;
+const container = shadow.querySelector(".tag-container");
+const dismissBtn = shadow.querySelector(".tag-dismiss");
+if (!container)
+return;
+container.addEventListener("click", this.handleClick);
+container.addEventListener("keydown", this.handleKeydown);
+if (dismissBtn) {
+dismissBtn.addEventListener("click", this.handleDismiss);
+}
+this._cleanup = () => {
+container.removeEventListener("click", this.handleClick);
+container.removeEventListener("keydown", this.handleKeydown);
+if (dismissBtn) {
+dismissBtn.removeEventListener("click", this.handleDismiss);
+}
+};
+}
+render() {
+const shadow = this.shadowRoot;
+const tabindex = this.clickable ? ' tabindex="0"' : "";
+const ariaDisabled = this.disabled ? ' aria-disabled="true"' : "";
+const dataValue = this.value ? ` data-value="${this.value}"` : "";
+const dismissButton = this.dismissible
+? `
+<button class="tag-dismiss" type="button" aria-label="Remove tag">
+<svg viewBox="0 0 20 20" fill="currentColor">
+<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+</svg>
+</button>
+`
+: "";
+shadow.innerHTML = `
+<div class="tag-container" part="container"${tabindex}${ariaDisabled}${dataValue}>
+<div class="tag-start">
+<slot name="start" class="tag-start"></slot>
+</div>
+<div class="tag-content">
+<slot></slot>
+</div>
+<div class="tag-end">
+<slot name="end"></slot>
+${dismissButton}
+</div>
+</div>
+`;
+if (this._connected) {
+this.setupEventListeners();
+}
+}
+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 value() {
+return this.getProperty("value");
+}
+set value(val) {
+this.setProperty("value", val);
+}
+get selected() {
+return this.getProperty("selected");
+}
+set selected(value) {
+this.setProperty("selected", value);
+}
+get pill() {
+return this.getProperty("pill");
+}
+set pill(value) {
+this.setProperty("pill", value);
+}
+get clickable() {
+return this.getProperty("clickable");
+}
+set clickable(value) {
+this.setProperty("clickable", value);
+}
+get dismissible() {
+return this.getProperty("dismissible");
+}
+set dismissible(value) {
+this.setProperty("dismissible", value);
+}
+get disabled() {
+return this.getProperty("disabled");
+}
+set disabled(value) {
+this.setProperty("disabled", value);
+}
 }
 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",
-        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-tag] Invalid size '${v}'. Using 'md'.`);
-                return "md";
-            }
-            return v;
-        },
-    },
-    value: {
-        type: "string",
-        visual: true,
-        default: "",
-    },
-    selected: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    pill: {
-        type: "boolean",
-        visual: true,
-        default: true,
-        aliases: { "not-pill": false },
-    },
-    clickable: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    dismissible: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
-    disabled: {
-        type: "boolean",
-        visual: true,
-        default: false,
-    },
+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-tag] Invalid size '${v}'. Using '${DEFAULT_SIZE}'.`);
+return DEFAULT_SIZE;
+}
+return v;
+},
+},
+value: {
+type: "string",
+visual: true,
+default: "",
+},
+selected: {
+type: "boolean",
+visual: true,
+default: false,
+},
+pill: {
+type: "boolean",
+visual: true,
+default: true,
+aliases: { "not-pill": false },
+},
+clickable: {
+type: "boolean",
+visual: true,
+default: false,
+},
+dismissible: {
+type: "boolean",
+visual: true,
+default: false,
+},
+disabled: {
+type: "boolean",
+visual: true,
+default: false,
+},
 };
-// Register the custom element
 if (!customElements.get("ty-tag")) {
-    customElements.define("ty-tag", TyTag);
+customElements.define("ty-tag", TyTag);
 }
-//# sourceMappingURL=tag.js.map