tyrell-components 1.0.0-RC12 → 1.0.0-RC14

package/lib/components/selected-tags.d.ts

@@ -1,48 +1,19 @@
 /**
- * TySelectedTags Web Component
- *
- * Out-of-band chip display for a picker (ty-select / ty-multiselect / ty-dropdown).
- * The picker owns the value + form submission; this element just renders the
- * selected values as dismissible <ty-tag> chips, anywhere in the layout.
- *
- * Pairs with any element that exposes a comma-joined `value` string and emits a
- * bubbling `change` event. Labels/flavors are read from the picker's matching
- * option (`[value="..."]`), so chips stay rich without duplicating data.
- *
- * @example
- * ```html
- * <ty-select id="robots">
- *   <ty-option value="bobo" flavor="primary">Bobo Robot</ty-option>
- * </ty-select>
- * <ty-selected-tags for="robots"></ty-selected-tags>
- * ```
- *
- * Custom chips via a <template> child. Placeholders {value}, {label}, {flavor}
- * and any {data-*} attribute of the matching option are interpolated into
- * attributes and text — on cloned DOM nodes, never via innerHTML (no injection).
- *
- * @example
- * ```html
- * <ty-select id="team">
- *   <ty-option value="ivan" data-avatar="/avatars/ivan.png">Ivan</ty-option>
- * </ty-select>
- * <ty-selected-tags for="team">
- *   <template>
- *     <ty-tag flavor="{flavor}" dismissible>
- *       <img slot="start" src="{data-avatar}" class="w-4 h-4 rounded-full">
- *       {label}
- *     </ty-tag>
- *   </template>
- * </ty-selected-tags>
- * ```
+ * TySelectedOptions - out-of-band dismissible <ty-tag> chips for a picker's selection.
+ * Pairs with any element exposing a comma-joined `value` + bubbling `change`; labels
+ * and flavors are read from the picker's matching option (`[value="..."]`). Custom chips
+ * come from an optional <template> child, stamped onto cloned nodes (never innerHTML).
  */
-export declare class TySelectedTags extends HTMLElement {
+export declare class TySelectedOptions extends HTMLElement {
     static get observedAttributes(): string[];
     private _picker;
     private _onChange;
     private _childObserver;
     private _pickerObserver;
     private _lastTemplate;
+    private _restoreDisplay;
+    private _onPickerOpen;
+    private _onPickerClose;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
@@ -77,4 +48,3 @@ export declare class TySelectedTags extends HTMLElement {
     /** Remove a value from the picker; picker re-emits change → chips re-render. */
     private deselect;
 }
-//# sourceMappingURL=selected-tags.d.ts.map

package/lib/components/selected-tags.js

@@ -1,50 +1,10 @@
-/**
- * TySelectedTags Web Component
- *
- * Out-of-band chip display for a picker (ty-select / ty-multiselect / ty-dropdown).
- * The picker owns the value + form submission; this element just renders the
- * selected values as dismissible <ty-tag> chips, anywhere in the layout.
- *
- * Pairs with any element that exposes a comma-joined `value` string and emits a
- * bubbling `change` event. Labels/flavors are read from the picker's matching
- * option (`[value="..."]`), so chips stay rich without duplicating data.
- *
- * @example
- * ```html
- * <ty-select id="robots">
- *   <ty-option value="bobo" flavor="primary">Bobo Robot</ty-option>
- * </ty-select>
- * <ty-selected-tags for="robots"></ty-selected-tags>
- * ```
- *
- * Custom chips via a <template> child. Placeholders {value}, {label}, {flavor}
- * and any {data-*} attribute of the matching option are interpolated into
- * attributes and text — on cloned DOM nodes, never via innerHTML (no injection).
- *
- * @example
- * ```html
- * <ty-select id="team">
- *   <ty-option value="ivan" data-avatar="/avatars/ivan.png">Ivan</ty-option>
- * </ty-select>
- * <ty-selected-tags for="team">
- *   <template>
- *     <ty-tag flavor="{flavor}" dismissible>
- *       <img slot="start" src="{data-avatar}" class="w-4 h-4 rounded-full">
- *       {label}
- *     </ty-tag>
- *   </template>
- * </ty-selected-tags>
- * ```
- */
-/** Split a comma-joined picker value into clean values. */
 function parseValues(raw) {
     return raw.split(',').map(s => s.trim()).filter(Boolean);
 }
-/** Replace {key} placeholders from ctx; unknown keys are left as-is. */
 function interpolate(text, ctx) {
     return text.replace(/\{([\w-]+)\}/g, (match, key) => ctx[key] ?? match);
 }
-export class TySelectedTags extends HTMLElement {
+export class TySelectedOptions extends HTMLElement {
     constructor() {
         super(...arguments);
         this._picker = null;
@@ -52,20 +12,23 @@ export class TySelectedTags extends HTMLElement {
         this._childObserver = null;
         this._pickerObserver = null;
         this._lastTemplate = null;
+        this._restoreDisplay = 'contents';
+        this._onPickerOpen = () => {
+            this._restoreDisplay = this.style.display || 'contents';
+            this.style.display = 'none';
+        };
+        this._onPickerClose = () => {
+            this.style.display = this._restoreDisplay;
+        };
     }
     static get observedAttributes() {
         return ['for'];
     }
     connectedCallback() {
-        // Chips participate directly in the parent layout (flex gap, wrap, etc.)
         if (!this.style.display)
             this.style.display = 'contents';
         this.bind();
         this.renderChips();
-        // During HTML parsing we connect BEFORE our <template> child is parsed —
-        // re-render when it arrives so server-rendered pages get templated chips.
-        // renderChips re-appends the SAME template node, so its own mutations
-        // don't change template() identity → no re-render loop.
         this._childObserver = new MutationObserver(() => {
             const template = this.template();
             if (template !== this._lastTemplate) {
@@ -85,7 +48,6 @@ export class TySelectedTags extends HTMLElement {
         this.bind();
         this.renderChips();
     }
-    /** Resolve the picker: `for` id, else the previous element sibling. */
     resolvePicker() {
         const id = this.getAttribute('for');
         const el = id
@@ -100,9 +62,8 @@ export class TySelectedTags extends HTMLElement {
         this.unbind();
         this._picker = next;
         this._picker?.addEventListener('change', this._onChange);
-        // The picker stamps `selected` onto its options ASYNC after connect
-        // (rAF init) and on external option swaps — neither fires `change`.
-        // Watch the picker's subtree so initial values render as chips too.
+        this._picker?.addEventListener('open', this._onPickerOpen);
+        this._picker?.addEventListener('close', this._onPickerClose);
         if (this._picker) {
             this._pickerObserver = new MutationObserver(() => this.renderChips());
             this._pickerObserver.observe(this._picker, {
@@ -115,26 +76,23 @@ export class TySelectedTags extends HTMLElement {
     }
     unbind() {
         this._picker?.removeEventListener('change', this._onChange);
+        this._picker?.removeEventListener('open', this._onPickerOpen);
+        this._picker?.removeEventListener('close', this._onPickerClose);
         this._pickerObserver?.disconnect();
         this._pickerObserver = null;
         this._picker = null;
+        this.style.display = this._restoreDisplay;
     }
     values() {
         return parseValues(this._picker?.value ?? '');
     }
-    /** The optional chip template (direct child only). */
     template() {
         return this.querySelector(':scope > template');
     }
-    /**
-     * Interpolation context for a value: value, label, flavor plus every
-     * data-* attribute of the picker's matching option.
-     */
     context(value) {
         const opt = this._picker?.querySelector(`[value="${CSS.escape(value)}"]`);
         const ctx = {
             value,
-            // label attribute wins (native <option label> semantics)
             label: opt?.getAttribute('label') || opt?.textContent?.trim() || value,
             flavor: opt?.getAttribute('flavor') ?? '',
         };
@@ -146,24 +104,13 @@ export class TySelectedTags extends HTMLElement {
         }
         return ctx;
     }
-    /**
-     * The template's blueprint fragment. HTML-parsed templates carry children in
-     * .content; framework-rendered ones (DOM-created by React/Replicant/etc.)
-     * carry them as regular childNodes — support both.
-     */
     templateSource(template) {
-        if (template.content.firstElementChild)
+        if (template.content.hasChildNodes())
             return template.content;
         const frag = document.createDocumentFragment();
         template.childNodes.forEach(n => frag.appendChild(n.cloneNode(true)));
         return frag;
     }
-    /**
-     * Stamp the template for one value: clone, interpolate placeholders in
-     * attributes and text nodes, wire dismiss. Attribute values that were a
-     * single unresolved placeholder are removed (e.g. flavor="{flavor}" with
-     * no flavor on the option).
-     */
     stampTemplate(template, value) {
         const ctx = this.context(value);
         const clone = this.templateSource(template).cloneNode(true);
@@ -180,8 +127,6 @@ export class TySelectedTags extends HTMLElement {
                     if (!attr.value.includes('{'))
                         continue;
                     const resolved = interpolate(attr.value, ctx);
-                    // Single-placeholder attribute that is empty OR unresolved → drop it
-                    // (e.g. flavor="{flavor}" with no flavor, name="{data-icon}" with no data-icon)
                     if (/^\{[\w-]+\}$/.test(attr.value) && (resolved === '' || resolved === attr.value)) {
                         el.removeAttribute(attr.name);
                     }
@@ -191,7 +136,6 @@ export class TySelectedTags extends HTMLElement {
                 }
             }
         }
-        // Dismiss anywhere inside the stamped chip deselects this value
         for (const el of Array.from(clone.children)) {
             el.addEventListener('dismiss', (e) => {
                 e.stopPropagation();
@@ -200,7 +144,6 @@ export class TySelectedTags extends HTMLElement {
         }
         return clone;
     }
-    /** Default chip when no template is provided. */
     defaultChip(value) {
         const ctx = this.context(value);
         const tag = document.createElement('ty-tag');
@@ -220,7 +163,6 @@ export class TySelectedTags extends HTMLElement {
             return;
         }
         const frag = document.createDocumentFragment();
-        // Template survives re-renders - it is part of our light DOM
         if (template)
             frag.appendChild(template);
         for (const value of this.values()) {
@@ -228,23 +170,23 @@ export class TySelectedTags extends HTMLElement {
         }
         this.replaceChildren(frag);
     }
-    /** Remove a value from the picker; picker re-emits change → chips re-render. */
     deselect(value) {
         if (!this._picker)
             return;
         const picker = this._picker;
         if (typeof picker.deselectValue === 'function') {
-            // ty-select path — fires a proper change event (chips re-render via listener)
             picker.deselectValue(value);
         }
         else {
-            // Generic picker fallback — value setters usually don't emit change
             picker.value = this.values().filter(v => v !== value).join(',');
             this.renderChips();
         }
     }
 }
+if (!customElements.get('ty-selected-options')) {
+    customElements.define('ty-selected-options', TySelectedOptions);
+}
 if (!customElements.get('ty-selected-tags')) {
-    customElements.define('ty-selected-tags', TySelectedTags);
+    customElements.define('ty-selected-tags', class TySelectedTags extends TySelectedOptions {
+    });
 }
-//# sourceMappingURL=selected-tags.js.map

package/lib/components/step.d.ts

@@ -1,8 +1,4 @@
-/**
- * Step Component
- *
- * Individual wizard step panel with custom scrollbar via CustomScrollbar utility.
- */
+/** Individual wizard step panel with custom scrollbar via CustomScrollbar utility. */
 export type StepStatus = 'completed' | 'active' | 'pending' | 'error';
 export interface StepAttributes {
     id: string | null;
@@ -23,4 +19,3 @@ export declare class TyStep extends HTMLElement {
     private _destroyScrollbar;
     resetScroll(): void;
 }
-//# sourceMappingURL=step.d.ts.map

package/lib/components/step.js

@@ -1,8 +1,3 @@
-/**
- * Step Component
- *
- * Individual wizard step panel with custom scrollbar via CustomScrollbar utility.
- */
 import { ensureStyles } from '../utils/styles.js';
 import { stepStyles } from '../styles/step.js';
 import { CustomScrollbar, isCustomScrollbarEnabled } from '../utils/custom-scrollbar.js';
@@ -72,4 +67,3 @@ export class TyStep extends HTMLElement {
 if (!customElements.get('ty-step')) {
     customElements.define('ty-step', TyStep);
 }
-//# sourceMappingURL=step.js.map

package/lib/components/switch.d.ts

@@ -4,16 +4,6 @@
  * "Just the toggle" primitive — renders only the track + thumb visual.
  * Label, required asterisk, and error display are the consumer's
  * responsibility — wrap in a `<label>` for click delegation.
- *
- * - Boolean checked state, role="switch" ARIA
- * - Form-associated, keyboard accessibility
- * - Sizes (xs, sm, md, lg, xl) and semantic flavors
- *
- * @example
- * <label>
- *   <ty-switch name="notifications" checked></ty-switch>
- *   Email notifications
- * </label>
  */
 import type { Flavor, Size } from "../types/common.js";
 import { TyComponent } from "../base/ty-component.js";
@@ -71,10 +61,9 @@ export declare class TySwitch extends TyComponent<SwitchState> implements TySwit
             type: "string";
             visual: boolean;
             default: string;
-            validate: (v: any) => boolean;
-            coerce: (v: any) => any;
         };
     };
+    private _customFlavorSheet;
     private _listenersSetup;
     private _clickHandler;
     private _keydownHandler;
@@ -83,7 +72,9 @@ export declare class TySwitch extends TyComponent<SwitchState> implements TySwit
     constructor();
     protected onConnect(): void;
     protected onDisconnect(): void;
-    protected onPropertiesChanged(_changes: PropertyChange[]): void;
+    protected onPropertiesChanged(changes: PropertyChange[]): void;
+    /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
+    private _syncCustomFlavor;
     protected getFormValue(): FormDataEntryValue | null;
     private buildClassList;
     private handleSwitchClick;
@@ -110,4 +101,3 @@ export declare class TySwitch extends TyComponent<SwitchState> implements TySwit
     get form(): HTMLFormElement | null;
 }
 export {};
-//# sourceMappingURL=switch.d.ts.map

package/lib/components/switch.js

@@ -1,26 +1,11 @@
-/**
- * TySwitch Web Component
- *
- * "Just the toggle" primitive — renders only the track + thumb visual.
- * Label, required asterisk, and error display are the consumer's
- * responsibility — wrap in a `<label>` for click delegation.
- *
- * - Boolean checked state, role="switch" ARIA
- * - Form-associated, keyboard accessibility
- * - Sizes (xs, sm, md, lg, xl) and semantic flavors
- *
- * @example
- * <label>
- *   <ty-switch name="notifications" checked></ty-switch>
- *   Email notifications
- * </label>
- */
 import { TyComponent } from "../base/ty-component.js";
 import { ensureStyles } from "../utils/styles.js";
-import { switchStyles } from "../styles/switch.js";
+import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
+import { switchStyles, switchCustomFlavorCss } from "../styles/switch.js";
 export class TySwitch extends TyComponent {
     constructor() {
         super();
+        this._customFlavorSheet = null;
         this._listenersSetup = false;
         this._clickHandler = null;
         this._keydownHandler = null;
@@ -30,19 +15,25 @@ export class TySwitch extends TyComponent {
         ensureStyles(shadow, { css: switchStyles, id: "ty-switch" });
     }
     onConnect() {
-        // Re-arm listeners on RE-connect (base skips render() when already
-        // rendered; onDisconnect removed them). No-op on first connect.
         this.setupEventListeners();
+        this._syncCustomFlavor();
     }
     onDisconnect() {
         this.removeEventListeners();
     }
-    onPropertiesChanged(_changes) { }
+    onPropertiesChanged(changes) {
+        if (changes.some((c) => c.name === "flavor")) {
+            this._syncCustomFlavor();
+        }
+    }
+    _syncCustomFlavor() {
+        this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => switchCustomFlavorCss(base));
+    }
     getFormValue() {
         return this.checked ? this.value : null;
     }
     buildClassList() {
-        const classes = [this.size, this.flavor];
+        const classes = [this.size];
         if (this.disabled)
             classes.push("disabled");
         if (this.required)
@@ -52,6 +43,8 @@ export class TySwitch extends TyComponent {
     handleSwitchClick(e) {
         if (this.disabled)
             return;
+        if (this.isDuplicateActivationClick())
+            return;
         const newValue = !this.checked;
         this.checked = newValue;
         setTimeout(() => {
@@ -77,8 +70,6 @@ export class TySwitch extends TyComponent {
     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;
@@ -116,8 +107,6 @@ export class TySwitch extends TyComponent {
         this._keydownHandler = (e) => this.handleSwitchKeydown(e);
         this._focusHandler = () => el.classList.add("focused");
         this._blurHandler = () => el.classList.remove("focused");
-        // Click on the HOST: whole element is a trigger and a wrapping <label>
-        // delegates (the synthetic click lands on the host, not the shadow).
         this.addEventListener("click", this._clickHandler);
         el.addEventListener("keydown", this._keydownHandler);
         el.addEventListener("focus", this._focusHandler);
@@ -151,15 +140,10 @@ export class TySwitch extends TyComponent {
             switchEl.setAttribute("aria-disabled", this.disabled ? "true" : "false");
             switchEl.setAttribute("aria-required", this.required ? "true" : "false");
         }
-        // (Re)attach listeners — onDisconnect removes them, so a reconnected
-        // element needs them again even though the container already exists.
         this.setupEventListeners();
-        // a11y: mirror the wrapping <label> name onto the role="switch" element.
         this.applyLabelName(switchEl);
-        // Reflect constraint validation to the owning <form> (required was cosmetic).
         this.updateValidity();
     }
-    /** required + unchecked => valueMissing; otherwise valid. */
     updateValidity() {
         const anchor = this.shadowRoot?.querySelector(".switch-container");
         if (this.disabled) {
@@ -173,9 +157,6 @@ export class TySwitch extends TyComponent {
             this._internals.setValidity({});
         }
     }
-    // ============================================================================
-    // PROPERTY ACCESSORS
-    // ============================================================================
     get checked() { return this.getProperty("checked"); }
     set checked(value) { this.setProperty("checked", value); }
     get value() { return this.getProperty("value"); }
@@ -236,35 +217,8 @@ TySwitch.properties = {
         type: "string",
         visual: true,
         default: "primary",
-        validate: (v) => {
-            const valid = [
-                "primary",
-                "secondary",
-                "success",
-                "danger",
-                "warning",
-                "neutral",
-            ];
-            return valid.includes(v);
-        },
-        coerce: (v) => {
-            const valid = [
-                "primary",
-                "secondary",
-                "success",
-                "danger",
-                "warning",
-                "neutral",
-            ];
-            if (!valid.includes(v)) {
-                console.warn(`[ty-switch] Invalid flavor '${v}'. Using 'primary'.`);
-                return "primary";
-            }
-            return v;
-        },
     },
 };
 if (!customElements.get("ty-switch")) {
     customElements.define("ty-switch", TySwitch);
 }
-//# sourceMappingURL=switch.js.map

package/lib/components/tab.d.ts

@@ -1,8 +1,4 @@
-/**
- * Tab Component
- *
- * Individual tab panel with custom scrollbar via CustomScrollbar utility.
- */
+/** Individual tab panel with custom scrollbar via CustomScrollbar utility. */
 export interface TabAttributes {
     id: string | null;
     label: string | null;
@@ -20,4 +16,3 @@ export declare class TyTab extends HTMLElement {
     private _destroyScrollbar;
     resetScroll(): void;
 }
-//# sourceMappingURL=tab.d.ts.map

package/lib/components/tab.js

@@ -1,8 +1,3 @@
-/**
- * Tab Component
- *
- * Individual tab panel with custom scrollbar via CustomScrollbar utility.
- */
 import { ensureStyles } from '../utils/styles.js';
 import { tabStyles } from '../styles/tab.js';
 import { CustomScrollbar, isCustomScrollbarEnabled } from '../utils/custom-scrollbar.js';
@@ -54,7 +49,6 @@ export class TyTab extends HTMLElement {
             return;
         panel.classList.add('ty-custom-scroll');
         this._scrollbar = new CustomScrollbar(panel, { vertical: true });
-        // Append track to wrapper (outside the scroll area, so it stays fixed)
         if (this._scrollbar.trackY) {
             wrapper.appendChild(this._scrollbar.trackY);
         }
@@ -73,4 +67,3 @@ export class TyTab extends HTMLElement {
 if (!customElements.get('ty-tab')) {
     customElements.define('ty-tab', TyTab);
 }
-//# sourceMappingURL=tab.js.map

package/lib/components/tabs.d.ts

@@ -1,65 +1,7 @@
 /**
- * Tabs Component
- *
- * A carousel-based tabs component with smooth animations and fixed container dimensions.
- * Features horizontal sliding transitions, smart positioning marker, and independent panel scrolling.
- *
- * Features:
- * - Carousel animation with smooth sliding transitions
- * - Fixed dimensions prevent layout shift between tabs
- * - Animated marker that follows active tab button
- * - Rich label support via slots (icons, badges, custom content)
- * - Custom marker slot for complete active tab styling control
- * - Independent panel scrolling with scroll position reset
- * - ResizeObserver for responsive percentage widths
- * - Smart rendering - only updates DOM when necessary
- * - Accessibility with ARIA roles and attributes
- * - Top/bottom placement for tab buttons
- *
- * @example
- * <!-- Basic tabs with text labels -->
- * <ty-tabs width="800px" height="600px" active="general">
- *   <ty-tab id="general" label="General Settings">
- *     <div class="p-6">General content...</div>
- *   </ty-tab>
- *   <ty-tab id="advanced" label="Advanced Settings">
- *     <div class="p-6">Advanced content...</div>
- *   </ty-tab>
- * </ty-tabs>
- *
- * @example
- * <!-- Rich labels with icons and badges -->
- * <ty-tabs width="800px" height="600px">
- *   <!-- Rich label as direct child -->
- *   <span slot="label-profile" class="flex items-center gap-2">
- *     <ty-icon name="user" size="sm"></ty-icon>
- *     Profile
- *   </span>
- *
- *   <span slot="label-notifications" class="flex items-center gap-2">
- *     <ty-icon name="bell" size="sm"></ty-icon>
- *     Notifications
- *     <span class="ty-bg-danger ty-text-danger++ px-2 py-0.5 rounded-full text-xs">5</span>
- *   </span>
- *
- *   <!-- Tab panels -->
- *   <ty-tab id="profile">...</ty-tab>
- *   <ty-tab id="notifications">...</ty-tab>
- * </ty-tabs>
- *
- * @example
- * <!-- Custom marker styling -->
- * <ty-tabs width="100%" height="400px">
- *   <!-- Gradient marker slot -->
- *   <div slot="marker" style="
- *     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- *     border-radius: 0.5rem;
- *     box-shadow: 0 2px 8px rgba(0,0,0,0.15);
- *   "></div>
- *
- *   <ty-tab id="tab1" label="Dashboard">...</ty-tab>
- *   <ty-tab id="tab2" label="Analytics">...</ty-tab>
- * </ty-tabs>
+ * Tabs Component — carousel-based tabs with sliding transitions, an animated
+ * active marker, and fixed container dimensions. Expects `ty-tab` children;
+ * rich labels come from `slot="label-{tab-id}"` children of `ty-tabs` itself.
  */
 /**
  * Tabs container attributes configuration
@@ -83,11 +25,11 @@ export interface TabChangeDetail {
  * TyTabs Web Component
  */
 export declare class TyTabs extends HTMLElement {
-    /** Observed attributes */
     static get observedAttributes(): string[];
     constructor();
+    private _childObserver;
+    private _childRenderQueued;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }
-//# sourceMappingURL=tabs.d.ts.map