tyrell-components 1.0.0-RC13 → 1.0.0-RC15

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[];
@@ -53,7 +11,7 @@ export declare class TySelectedOptions extends HTMLElement {
     private _childObserver;
     private _pickerObserver;
     private _lastTemplate;
-    private _restoreDisplay;
+    private _pickerOpen;
     private _onPickerOpen;
     private _onPickerClose;
     connectedCallback(): void;
@@ -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,286 +1,198 @@
-/**
- * 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);
+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);
+return text.replace(/\{([\w-]+)\}/g, (match, key) => ctx[key] ?? match);
 }
 export class TySelectedOptions extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this._picker = null;
-        this._onChange = () => this.renderChips();
-        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';
-            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) {
-                this.renderChips();
-            }
-        });
-        this._childObserver.observe(this, { childList: true });
-    }
-    disconnectedCallback() {
-        this.unbind();
-        this._childObserver?.disconnect();
-        this._childObserver = null;
-    }
-    attributeChangedCallback() {
-        if (!this.isConnected)
-            return;
-        this.bind();
-        this.renderChips();
-    }
-    /** Resolve the picker: `for` id, else the previous element sibling. */
-    resolvePicker() {
-        const id = this.getAttribute('for');
-        const el = id
-            ? document.getElementById(id)
-            : this.previousElementSibling;
-        return el ?? null;
-    }
-    bind() {
-        const next = this.resolvePicker();
-        if (next === this._picker)
-            return;
-        this.unbind();
-        this._picker = next;
-        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, {
-                childList: true,
-                subtree: true,
-                attributes: true,
-                attributeFilter: ['selected'],
-            });
-        }
-    }
-    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;
-        // 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') ?? '',
-        };
-        if (opt) {
-            for (const attr of Array.from(opt.attributes)) {
-                if (attr.name.startsWith('data-'))
-                    ctx[attr.name] = attr.value;
-            }
-        }
-        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)
-            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);
-        const walker = document.createTreeWalker(clone, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
-        for (let node = walker.nextNode(); node; node = walker.nextNode()) {
-            if (node.nodeType === Node.TEXT_NODE) {
-                if (node.textContent?.includes('{')) {
-                    node.textContent = interpolate(node.textContent, ctx);
-                }
-            }
-            else {
-                const el = node;
-                for (const attr of Array.from(el.attributes)) {
-                    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);
-                    }
-                    else {
-                        el.setAttribute(attr.name, resolved);
-                    }
-                }
-            }
-        }
-        // Dismiss anywhere inside the stamped chip deselects this value
-        for (const el of Array.from(clone.children)) {
-            el.addEventListener('dismiss', (e) => {
-                e.stopPropagation();
-                this.deselect(value);
-            });
-        }
-        return clone;
-    }
-    /** Default chip when no template is provided. */
-    defaultChip(value) {
-        const ctx = this.context(value);
-        const tag = document.createElement('ty-tag');
-        tag.setAttribute('value', value);
-        tag.setAttribute('dismissible', 'true');
-        if (ctx.flavor)
-            tag.setAttribute('flavor', ctx.flavor);
-        tag.textContent = ctx.label;
-        tag.addEventListener('dismiss', () => this.deselect(value));
-        return tag;
-    }
-    renderChips() {
-        const template = this.template();
-        this._lastTemplate = template;
-        if (!this._picker) {
-            this.replaceChildren(...(template ? [template] : []));
-            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()) {
-            frag.appendChild(template ? this.stampTemplate(template, value) : this.defaultChip(value));
-        }
-        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();
-        }
-    }
+constructor() {
+super(...arguments);
+this._picker = null;
+this._onChange = () => this.renderChips();
+this._childObserver = null;
+this._pickerObserver = null;
+this._lastTemplate = null;
+this._pickerOpen = false;
+this._onPickerOpen = () => {
+this._pickerOpen = true;
+};
+this._onPickerClose = () => {
+this._pickerOpen = false;
+this.renderChips();
+};
+}
+static get observedAttributes() {
+return ['for'];
+}
+connectedCallback() {
+if (!this.style.display)
+this.style.display = 'contents';
+this.bind();
+this.renderChips();
+if (document.readyState === 'loading') {
+document.addEventListener('DOMContentLoaded', () => { if (this.isConnected)
+this.renderChips(); }, { once: true });
+}
+this._childObserver = new MutationObserver(() => {
+const template = this.template();
+if (template !== this._lastTemplate) {
+this.renderChips();
+}
+});
+this._childObserver.observe(this, { childList: true });
+}
+disconnectedCallback() {
+this.unbind();
+this._childObserver?.disconnect();
+this._childObserver = null;
+}
+attributeChangedCallback() {
+if (!this.isConnected)
+return;
+this.bind();
+this.renderChips();
+}
+resolvePicker() {
+const id = this.getAttribute('for');
+const el = id
+? document.getElementById(id)
+: this.previousElementSibling;
+return el ?? null;
+}
+bind() {
+const next = this.resolvePicker();
+if (next === this._picker)
+return;
+this.unbind();
+this._picker = next;
+this._picker?.addEventListener('change', this._onChange);
+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, {
+childList: true,
+subtree: true,
+attributes: true,
+attributeFilter: ['selected'],
+});
+}
+}
+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._pickerOpen = false;
+}
+values() {
+return parseValues(this._picker?.value ?? '');
+}
+template() {
+return this.querySelector(':scope > template');
+}
+context(value) {
+const opt = this._picker?.querySelector(`[value="${CSS.escape(value)}"]`);
+const ctx = {
+value,
+label: opt?.getAttribute('label') || opt?.textContent?.trim() || value,
+flavor: opt?.getAttribute('flavor') ?? '',
+};
+if (opt) {
+for (const attr of Array.from(opt.attributes)) {
+if (attr.name.startsWith('data-'))
+ctx[attr.name] = attr.value;
+}
+}
+return ctx;
+}
+templateSource(template) {
+if (template.content.hasChildNodes())
+return template.content;
+const frag = document.createDocumentFragment();
+template.childNodes.forEach(n => frag.appendChild(n.cloneNode(true)));
+return frag;
+}
+stampTemplate(template, value) {
+const ctx = this.context(value);
+const clone = this.templateSource(template).cloneNode(true);
+const walker = document.createTreeWalker(clone, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
+for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+if (node.nodeType === Node.TEXT_NODE) {
+if (node.textContent?.includes('{')) {
+node.textContent = interpolate(node.textContent, ctx);
+}
+}
+else {
+const el = node;
+for (const attr of Array.from(el.attributes)) {
+if (!attr.value.includes('{'))
+continue;
+const resolved = interpolate(attr.value, ctx);
+if (/^\{[\w-]+\}$/.test(attr.value) && (resolved === '' || resolved === attr.value)) {
+el.removeAttribute(attr.name);
+}
+else {
+el.setAttribute(attr.name, resolved);
+}
+}
+}
+}
+for (const el of Array.from(clone.children)) {
+el.addEventListener('dismiss', (e) => {
+e.stopPropagation();
+this.deselect(value);
+});
+}
+return clone;
+}
+defaultChip(value) {
+const ctx = this.context(value);
+const tag = document.createElement('ty-tag');
+tag.setAttribute('value', value);
+tag.setAttribute('dismissible', 'true');
+if (ctx.flavor)
+tag.setAttribute('flavor', ctx.flavor);
+tag.textContent = ctx.label;
+tag.addEventListener('dismiss', () => this.deselect(value));
+return tag;
+}
+renderChips() {
+if (this._pickerOpen)
+return;
+const template = this.template();
+this._lastTemplate = template;
+if (!this._picker) {
+this.replaceChildren(...(template ? [template] : []));
+return;
+}
+const frag = document.createDocumentFragment();
+if (template)
+frag.appendChild(template);
+for (const value of this.values()) {
+frag.appendChild(template ? this.stampTemplate(template, value) : this.defaultChip(value));
+}
+this.replaceChildren(frag);
+}
+deselect(value) {
+if (!this._picker)
+return;
+const picker = this._picker;
+if (typeof picker.deselectValue === 'function') {
+picker.deselectValue(value);
+}
+else {
+picker.value = this.values().filter(v => v !== value).join(',');
+this.renderChips();
+}
+}
 }
 if (!customElements.get('ty-selected-options')) {
-    customElements.define('ty-selected-options', TySelectedOptions);
+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 {
-    });
+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