tyrell-components 1.0.0-RC13 → 1.0.0-RC14

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

@@ -1,50 +1,8 @@
 /**
- * TySelectedOptions Web Component
- *
- * Out-of-band chip display for a picker (ty-select).
- * 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.
- *
- * If the picker also emits `open`/`close` (ty-select does), the chips hide
- * for the duration — the picker's own popup is independently sized/
- * positioned and can otherwise visually collide with this row.
- *
- * Also registered as `ty-selected-tags` — the original tag name, kept
- * working indefinitely for backward compatibility. `ty-selected-options` is
- * the name going forward: it names the element by what it's driven by
- * (a picker's selected `ty-option`s), not by the chip primitive it happens
- * to render with.
- *
- * @example
- * ```html
- * <ty-select id="robots">
- *   <ty-option value="bobo" flavor="primary">Bobo Robot</ty-option>
- * </ty-select>
- * <ty-selected-options for="robots"></ty-selected-options>
- * ```
- *
- * 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-options 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-options>
- * ```
+ * 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 TySelectedOptions extends HTMLElement {
     static get observedAttributes(): string[];
@@ -90,4 +48,3 @@ export declare class TySelectedOptions 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,56 +1,6 @@
-/**
- * TySelectedOptions Web Component
- *
- * Out-of-band chip display for a picker (ty-select).
- * 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.
- *
- * If the picker also emits `open`/`close` (ty-select does), the chips hide
- * for the duration — the picker's own popup is independently sized/
- * positioned and can otherwise visually collide with this row.
- *
- * Also registered as `ty-selected-tags` — the original tag name, kept
- * working indefinitely for backward compatibility. `ty-selected-options` is
- * the name going forward: it names the element by what it's driven by
- * (a picker's selected `ty-option`s), not by the chip primitive it happens
- * to render with.
- *
- * @example
- * ```html
- * <ty-select id="robots">
- *   <ty-option value="bobo" flavor="primary">Bobo Robot</ty-option>
- * </ty-select>
- * <ty-selected-options for="robots"></ty-selected-options>
- * ```
- *
- * 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-options 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-options>
- * ```
- */
-/** 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);
 }
@@ -62,12 +12,6 @@ export class TySelectedOptions extends HTMLElement {
         this._childObserver = null;
         this._pickerObserver = null;
         this._lastTemplate = null;
-        // While the linked picker's own popup is open, its independently-sized,
-        // independently-positioned dropdown can visually collide with this chip
-        // row (it's a separate element, placed wherever the consumer wants it —
-        // there's no layout relationship to enforce). Hiding the chips for the
-        // duration sidesteps that instead of trying to out-z-index or reflow
-        // around an overlay whose size/position we don't control.
         this._restoreDisplay = 'contents';
         this._onPickerOpen = () => {
             this._restoreDisplay = this.style.display || 'contents';
@@ -81,15 +25,10 @@ export class TySelectedOptions extends HTMLElement {
         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) {
@@ -109,7 +48,6 @@ export class TySelectedOptions 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
@@ -126,9 +64,6 @@ export class TySelectedOptions extends HTMLElement {
         this._picker?.addEventListener('change', this._onChange);
         this._picker?.addEventListener('open', this._onPickerOpen);
         this._picker?.addEventListener('close', this._onPickerClose);
-        // 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.
         if (this._picker) {
             this._pickerObserver = new MutationObserver(() => this.renderChips());
             this._pickerObserver.observe(this._picker, {
@@ -146,25 +81,18 @@ export class TySelectedOptions extends HTMLElement {
         this._pickerObserver?.disconnect();
         this._pickerObserver = null;
         this._picker = null;
-        // Don't leave chips hidden if the picker is swapped/removed mid-open.
         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') ?? '',
         };
@@ -176,24 +104,13 @@ export class TySelectedOptions 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);
@@ -210,8 +127,6 @@ export class TySelectedOptions 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);
                     }
@@ -221,7 +136,6 @@ export class TySelectedOptions 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();
@@ -230,7 +144,6 @@ export class TySelectedOptions extends HTMLElement {
         }
         return clone;
     }
-    /** Default chip when no template is provided. */
     defaultChip(value) {
         const ctx = this.context(value);
         const tag = document.createElement('ty-tag');
@@ -250,7 +163,6 @@ export class TySelectedOptions 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()) {
@@ -258,17 +170,14 @@ export class TySelectedOptions 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();
         }
@@ -277,10 +186,7 @@ export class TySelectedOptions extends HTMLElement {
 if (!customElements.get('ty-selected-options')) {
     customElements.define('ty-selected-options', TySelectedOptions);
 }
-// Original tag name — kept working indefinitely. A constructor can only
-// register once, hence the subclass (see ty-modal/ty-dialog for precedent).
 if (!customElements.get('ty-selected-tags')) {
     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";
@@ -111,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,20 +1,3 @@
-/**
- * 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 { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
@@ -32,8 +15,6 @@ 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();
     }
@@ -45,7 +26,6 @@ export class TySwitch extends TyComponent {
             this._syncCustomFlavor();
         }
     }
-    /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
     _syncCustomFlavor() {
         this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => switchCustomFlavorCss(base));
     }
@@ -63,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(() => {
@@ -88,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;
@@ -127,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);
@@ -162,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) {
@@ -184,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"); }
@@ -243,9 +213,6 @@ TySwitch.properties = {
             return v;
         },
     },
-    // Any string is accepted: built-ins get static CSS, other identifiers
-    // become custom flavors (see _syncCustomFlavor), garbage degrades to
-    // the default look.
     flavor: {
         type: "string",
         visual: true,
@@ -255,4 +222,3 @@ TySwitch.properties = {
 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