tyrell-components 1.0.0-TC52 → 1.0.0-TC54

package/lib/components/scroll-container.js

@@ -2,299 +2,299 @@ import { ensureStyles } from '../utils/styles.js';
 import { scrollContainerStyles } from '../styles/scroll-container.js';
 import { CustomScrollbar } from '../utils/custom-scrollbar.js';
 export class TyScrollContainer extends HTMLElement {
-    static get observedAttributes() {
-        return ['shadow', 'max-height', 'hide-scrollbar', 'custom-scrollbar', 'overflow-x', 'scroll-anchoring'];
-    }
-    get shadow() {
-        return this.getAttribute('shadow') !== 'false';
-    }
-    set shadow(value) {
-        if (value)
-            this.removeAttribute('shadow');
-        else
-            this.setAttribute('shadow', 'false');
-    }
-    get maxHeight() {
-        return this.getAttribute('max-height');
-    }
-    set maxHeight(value) {
-        if (value)
-            this.setAttribute('max-height', value);
-        else
-            this.removeAttribute('max-height');
-        this._updateMaxHeight();
-    }
-    get hideScrollbar() {
-        return this.hasAttribute('hide-scrollbar');
-    }
-    set hideScrollbar(value) {
-        if (value)
-            this.setAttribute('hide-scrollbar', '');
-        else
-            this.removeAttribute('hide-scrollbar');
-    }
-    get customScrollbar() {
-        return this.hasAttribute('custom-scrollbar');
-    }
-    set customScrollbar(value) {
-        if (value)
-            this.setAttribute('custom-scrollbar', '');
-        else
-            this.removeAttribute('custom-scrollbar');
-    }
-    get overflowX() {
-        return this.hasAttribute('overflow-x');
-    }
-    set overflowX(value) {
-        if (value)
-            this.setAttribute('overflow-x', '');
-        else
-            this.removeAttribute('overflow-x');
-    }
-    get nearEdgeThreshold() {
-        const v = parseInt(this.getAttribute('near-edge-threshold') || '', 10);
-        return Number.isFinite(v) ? v : 100;
-    }
-    set nearEdgeThreshold(value) {
-        if (value == null)
-            this.removeAttribute('near-edge-threshold');
-        else
-            this.setAttribute('near-edge-threshold', String(value));
-    }
-    get scrollAnchoring() {
-        return this.hasAttribute('scroll-anchoring');
-    }
-    set scrollAnchoring(value) {
-        if (value)
-            this.setAttribute('scroll-anchoring', '');
-        else
-            this.removeAttribute('scroll-anchoring');
-    }
-    constructor() {
-        super();
-        this._scrollWrapper = null;
-        this._shadowTop = null;
-        this._shadowBottom = null;
-        this._shadowLeft = null;
-        this._shadowRight = null;
-        this._scrollbar = null;
-        this._resizeObserver = null;
-        this._contentObserver = null;
-        this._rafId = null;
-        this._nearStartFired = false;
-        this._nearEndFired = false;
-        this._onScroll = () => {
-            if (this._rafId !== null)
-                return;
-            this._rafId = requestAnimationFrame(() => {
-                this._rafId = null;
-                this._updateShadowState();
-            });
-        };
-        this._onSlotChange = () => {
-            this._scrollbar?.update();
-            this._updateShadowState();
-        };
-        const shadow = this.attachShadow({ mode: 'open' });
-        ensureStyles(shadow, { css: scrollContainerStyles, id: 'ty-scroll-container' });
-        shadow.innerHTML = `
-      <div class="scroll-wrapper">
-        <slot></slot>
-      </div>
-      <div class="shadow-overlay">
-        <div class="shadow-top"></div>
-        <div class="shadow-bottom"></div>
-        <div class="shadow-left"></div>
-        <div class="shadow-right"></div>
-      </div>
-    `;
-        this._scrollWrapper = shadow.querySelector('.scroll-wrapper');
-        this._shadowTop = shadow.querySelector('.shadow-top');
-        this._shadowBottom = shadow.querySelector('.shadow-bottom');
-        this._shadowLeft = shadow.querySelector('.shadow-left');
-        this._shadowRight = shadow.querySelector('.shadow-right');
-    }
-    connectedCallback() {
-        this._scrollWrapper?.addEventListener('scroll', this._onScroll, { passive: true });
-        this._resizeObserver = new ResizeObserver(() => {
-            this._scrollbar?.update();
-            this._updateShadowState();
-        });
-        if (this._scrollWrapper) {
-            this._resizeObserver.observe(this._scrollWrapper);
-            const slot = this._scrollWrapper.querySelector('slot');
-            if (slot) {
-                slot.addEventListener('slotchange', this._onSlotChange);
-            }
-        }
-        this._updateMaxHeight();
-        this._updateShadowState();
-        this._setupScrollbar();
-        this._setupAnchoring();
-    }
-    disconnectedCallback() {
-        this._scrollWrapper?.removeEventListener('scroll', this._onScroll);
-        this._destroyScrollbar();
-        this._teardownAnchoring();
-        if (this._resizeObserver) {
-            this._resizeObserver.disconnect();
-            this._resizeObserver = null;
-        }
-        if (this._rafId !== null) {
-            cancelAnimationFrame(this._rafId);
-            this._rafId = null;
-        }
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue === newValue)
-            return;
-        if (name === 'max-height') {
-            this._updateMaxHeight();
-            this._updateShadowState();
-            this._scrollbar?.update();
-        }
-        if (name === 'custom-scrollbar' || name === 'overflow-x') {
-            this._destroyScrollbar();
-            this._setupScrollbar();
-            this._updateShadowState();
-        }
-        if (name === 'scroll-anchoring') {
-            this._teardownAnchoring();
-            this._setupAnchoring();
-        }
-    }
-    _setupAnchoring() {
-        if (this._contentObserver || !this.scrollAnchoring)
-            return;
-        this._contentObserver = new MutationObserver((records) => {
-            const wrap = this._scrollWrapper;
-            if (!wrap)
-                return;
-            const wrapTop = wrap.getBoundingClientRect().top;
-            let addedAbove = 0;
-            for (const r of records) {
-                r.addedNodes.forEach((n) => {
-                    if (n.nodeType !== Node.ELEMENT_NODE)
-                        return;
-                    const rect = n.getBoundingClientRect();
-                    if (rect.bottom <= wrapTop)
-                        addedAbove += rect.height;
-                    else if (rect.top < wrapTop)
-                        addedAbove += wrapTop - rect.top;
-                });
-            }
-            if (addedAbove > 0) {
-                wrap.scrollTop += addedAbove;
-                this._scrollbar?.update();
-            }
-        });
-        this._contentObserver.observe(this, { childList: true });
-    }
-    _teardownAnchoring() {
-        this._contentObserver?.disconnect();
-        this._contentObserver = null;
-    }
-    _setupScrollbar() {
-        if (this._scrollbar)
-            return;
-        if (!this._scrollWrapper || !this.customScrollbar)
-            return;
-        this._scrollbar = new CustomScrollbar(this._scrollWrapper, {
-            vertical: true,
-            horizontal: this.overflowX
-        });
-        const shadowRoot = this.shadowRoot;
-        if (this._scrollbar.trackY)
-            shadowRoot.appendChild(this._scrollbar.trackY);
-        if (this._scrollbar.trackX)
-            shadowRoot.appendChild(this._scrollbar.trackX);
-    }
-    _destroyScrollbar() {
-        if (this._scrollbar) {
-            this._scrollbar.trackY?.remove();
-            this._scrollbar.trackX?.remove();
-            this._scrollbar.destroy();
-            this._scrollbar = null;
-        }
-    }
-    _updateMaxHeight() {
-        if (this._scrollWrapper) {
-            const maxHeight = this.maxHeight;
-            if (maxHeight) {
-                this._scrollWrapper.style.setProperty('--scroll-max-height', maxHeight);
-                this._scrollWrapper.style.maxHeight = maxHeight;
-            }
-            else {
-                this._scrollWrapper.style.removeProperty('--scroll-max-height');
-                this._scrollWrapper.style.maxHeight = '';
-            }
-        }
-    }
-    _updateShadowState() {
-        if (!this._scrollWrapper)
-            return;
-        const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = this._scrollWrapper;
-        const threshold = 2;
-        if (this._shadowTop) {
-            this._shadowTop.classList.toggle('visible', scrollTop > threshold);
-        }
-        if (this._shadowBottom) {
-            this._shadowBottom.classList.toggle('visible', scrollTop + clientHeight < scrollHeight - threshold);
-        }
-        if (this.overflowX) {
-            if (this._shadowLeft) {
-                this._shadowLeft.classList.toggle('visible', scrollLeft > threshold);
-            }
-            if (this._shadowRight) {
-                this._shadowRight.classList.toggle('visible', scrollLeft + clientWidth < scrollWidth - threshold);
-            }
-        }
-        const scrollable = scrollHeight - clientHeight;
-        if (scrollable > 0) {
-            const t = this.nearEdgeThreshold;
-            const distEnd = scrollable - scrollTop;
-            this._nearEndFired = this._maybeEmitEdge('nearend', distEnd, t, this._nearEndFired, { distance: distEnd, scrollTop, scrollHeight, clientHeight });
-            this._nearStartFired = this._maybeEmitEdge('nearstart', scrollTop, t, this._nearStartFired, { distance: scrollTop, scrollTop, scrollHeight, clientHeight });
-        }
-        else {
-            this._nearStartFired = false;
-            this._nearEndFired = false;
-        }
-    }
-    _maybeEmitEdge(name, distance, threshold, fired, detail) {
-        if (distance > threshold)
-            return false;
-        if (!fired) {
-            this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
-        }
-        return true;
-    }
-    updateShadows() {
-        this._updateShadowState();
-        this._scrollbar?.update();
-    }
-    scrollToTop(smooth = true) {
-        this._scrollWrapper?.scrollTo({ top: 0, behavior: smooth ? 'smooth' : 'auto' });
-    }
-    scrollToBottom(smooth = true) {
-        if (this._scrollWrapper) {
-            this._scrollWrapper.scrollTo({ top: this._scrollWrapper.scrollHeight, behavior: smooth ? 'smooth' : 'auto' });
-        }
-    }
-    scrollToLeft(smooth = true) {
-        this._scrollWrapper?.scrollTo({ left: 0, behavior: smooth ? 'smooth' : 'auto' });
-    }
-    scrollToRight(smooth = true) {
-        if (this._scrollWrapper) {
-            this._scrollWrapper.scrollTo({ left: this._scrollWrapper.scrollWidth, behavior: smooth ? 'smooth' : 'auto' });
-        }
-    }
-    scrollToElement(target, smooth = true) {
-        const el = typeof target === 'string' ? this.querySelector(target) : target;
-        el?.scrollIntoView({ behavior: smooth ? 'smooth' : 'auto', block: 'nearest' });
-    }
-    get scrollElement() {
-        return this._scrollWrapper;
-    }
+static get observedAttributes() {
+return ['shadow', 'max-height', 'hide-scrollbar', 'custom-scrollbar', 'overflow-x', 'scroll-anchoring'];
+}
+get shadow() {
+return this.getAttribute('shadow') !== 'false';
+}
+set shadow(value) {
+if (value)
+this.removeAttribute('shadow');
+else
+this.setAttribute('shadow', 'false');
+}
+get maxHeight() {
+return this.getAttribute('max-height');
+}
+set maxHeight(value) {
+if (value)
+this.setAttribute('max-height', value);
+else
+this.removeAttribute('max-height');
+this._updateMaxHeight();
+}
+get hideScrollbar() {
+return this.hasAttribute('hide-scrollbar');
+}
+set hideScrollbar(value) {
+if (value)
+this.setAttribute('hide-scrollbar', '');
+else
+this.removeAttribute('hide-scrollbar');
+}
+get customScrollbar() {
+return this.hasAttribute('custom-scrollbar');
+}
+set customScrollbar(value) {
+if (value)
+this.setAttribute('custom-scrollbar', '');
+else
+this.removeAttribute('custom-scrollbar');
+}
+get overflowX() {
+return this.hasAttribute('overflow-x');
+}
+set overflowX(value) {
+if (value)
+this.setAttribute('overflow-x', '');
+else
+this.removeAttribute('overflow-x');
+}
+get nearEdgeThreshold() {
+const v = parseInt(this.getAttribute('near-edge-threshold') || '', 10);
+return Number.isFinite(v) ? v : 100;
+}
+set nearEdgeThreshold(value) {
+if (value == null)
+this.removeAttribute('near-edge-threshold');
+else
+this.setAttribute('near-edge-threshold', String(value));
+}
+get scrollAnchoring() {
+return this.hasAttribute('scroll-anchoring');
+}
+set scrollAnchoring(value) {
+if (value)
+this.setAttribute('scroll-anchoring', '');
+else
+this.removeAttribute('scroll-anchoring');
+}
+constructor() {
+super();
+this._scrollWrapper = null;
+this._shadowTop = null;
+this._shadowBottom = null;
+this._shadowLeft = null;
+this._shadowRight = null;
+this._scrollbar = null;
+this._resizeObserver = null;
+this._contentObserver = null;
+this._rafId = null;
+this._nearStartFired = false;
+this._nearEndFired = false;
+this._onScroll = () => {
+if (this._rafId !== null)
+return;
+this._rafId = requestAnimationFrame(() => {
+this._rafId = null;
+this._updateShadowState();
+});
+};
+this._onSlotChange = () => {
+this._scrollbar?.update();
+this._updateShadowState();
+};
+const shadow = this.attachShadow({ mode: 'open' });
+ensureStyles(shadow, { css: scrollContainerStyles, id: 'ty-scroll-container' });
+shadow.innerHTML = `
+<div class="scroll-wrapper">
+<slot></slot>
+</div>
+<div class="shadow-overlay">
+<div class="shadow-top"></div>
+<div class="shadow-bottom"></div>
+<div class="shadow-left"></div>
+<div class="shadow-right"></div>
+</div>
+`;
+this._scrollWrapper = shadow.querySelector('.scroll-wrapper');
+this._shadowTop = shadow.querySelector('.shadow-top');
+this._shadowBottom = shadow.querySelector('.shadow-bottom');
+this._shadowLeft = shadow.querySelector('.shadow-left');
+this._shadowRight = shadow.querySelector('.shadow-right');
+}
+connectedCallback() {
+this._scrollWrapper?.addEventListener('scroll', this._onScroll, { passive: true });
+this._resizeObserver = new ResizeObserver(() => {
+this._scrollbar?.update();
+this._updateShadowState();
+});
+if (this._scrollWrapper) {
+this._resizeObserver.observe(this._scrollWrapper);
+const slot = this._scrollWrapper.querySelector('slot');
+if (slot) {
+slot.addEventListener('slotchange', this._onSlotChange);
+}
+}
+this._updateMaxHeight();
+this._updateShadowState();
+this._setupScrollbar();
+this._setupAnchoring();
+}
+disconnectedCallback() {
+this._scrollWrapper?.removeEventListener('scroll', this._onScroll);
+this._destroyScrollbar();
+this._teardownAnchoring();
+if (this._resizeObserver) {
+this._resizeObserver.disconnect();
+this._resizeObserver = null;
+}
+if (this._rafId !== null) {
+cancelAnimationFrame(this._rafId);
+this._rafId = null;
+}
+}
+attributeChangedCallback(name, oldValue, newValue) {
+if (oldValue === newValue)
+return;
+if (name === 'max-height') {
+this._updateMaxHeight();
+this._updateShadowState();
+this._scrollbar?.update();
+}
+if (name === 'custom-scrollbar' || name === 'overflow-x') {
+this._destroyScrollbar();
+this._setupScrollbar();
+this._updateShadowState();
+}
+if (name === 'scroll-anchoring') {
+this._teardownAnchoring();
+this._setupAnchoring();
+}
+}
+_setupAnchoring() {
+if (this._contentObserver || !this.scrollAnchoring)
+return;
+this._contentObserver = new MutationObserver((records) => {
+const wrap = this._scrollWrapper;
+if (!wrap)
+return;
+const wrapTop = wrap.getBoundingClientRect().top;
+let addedAbove = 0;
+for (const r of records) {
+r.addedNodes.forEach((n) => {
+if (n.nodeType !== Node.ELEMENT_NODE)
+return;
+const rect = n.getBoundingClientRect();
+if (rect.bottom <= wrapTop)
+addedAbove += rect.height;
+else if (rect.top < wrapTop)
+addedAbove += wrapTop - rect.top;
+});
+}
+if (addedAbove > 0) {
+wrap.scrollTop += addedAbove;
+this._scrollbar?.update();
+}
+});
+this._contentObserver.observe(this, { childList: true });
+}
+_teardownAnchoring() {
+this._contentObserver?.disconnect();
+this._contentObserver = null;
+}
+_setupScrollbar() {
+if (this._scrollbar)
+return;
+if (!this._scrollWrapper || !this.customScrollbar)
+return;
+this._scrollbar = new CustomScrollbar(this._scrollWrapper, {
+vertical: true,
+horizontal: this.overflowX
+});
+const shadowRoot = this.shadowRoot;
+if (this._scrollbar.trackY)
+shadowRoot.appendChild(this._scrollbar.trackY);
+if (this._scrollbar.trackX)
+shadowRoot.appendChild(this._scrollbar.trackX);
+}
+_destroyScrollbar() {
+if (this._scrollbar) {
+this._scrollbar.trackY?.remove();
+this._scrollbar.trackX?.remove();
+this._scrollbar.destroy();
+this._scrollbar = null;
+}
+}
+_updateMaxHeight() {
+if (this._scrollWrapper) {
+const maxHeight = this.maxHeight;
+if (maxHeight) {
+this._scrollWrapper.style.setProperty('--scroll-max-height', maxHeight);
+this._scrollWrapper.style.maxHeight = maxHeight;
+}
+else {
+this._scrollWrapper.style.removeProperty('--scroll-max-height');
+this._scrollWrapper.style.maxHeight = '';
+}
+}
+}
+_updateShadowState() {
+if (!this._scrollWrapper)
+return;
+const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = this._scrollWrapper;
+const threshold = 2;
+if (this._shadowTop) {
+this._shadowTop.classList.toggle('visible', scrollTop > threshold);
+}
+if (this._shadowBottom) {
+this._shadowBottom.classList.toggle('visible', scrollTop + clientHeight < scrollHeight - threshold);
+}
+if (this.overflowX) {
+if (this._shadowLeft) {
+this._shadowLeft.classList.toggle('visible', scrollLeft > threshold);
+}
+if (this._shadowRight) {
+this._shadowRight.classList.toggle('visible', scrollLeft + clientWidth < scrollWidth - threshold);
+}
+}
+const scrollable = scrollHeight - clientHeight;
+if (scrollable > 0) {
+const t = this.nearEdgeThreshold;
+const distEnd = scrollable - scrollTop;
+this._nearEndFired = this._maybeEmitEdge('nearend', distEnd, t, this._nearEndFired, { distance: distEnd, scrollTop, scrollHeight, clientHeight });
+this._nearStartFired = this._maybeEmitEdge('nearstart', scrollTop, t, this._nearStartFired, { distance: scrollTop, scrollTop, scrollHeight, clientHeight });
+}
+else {
+this._nearStartFired = false;
+this._nearEndFired = false;
+}
+}
+_maybeEmitEdge(name, distance, threshold, fired, detail) {
+if (distance > threshold)
+return false;
+if (!fired) {
+this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+}
+return true;
+}
+updateShadows() {
+this._updateShadowState();
+this._scrollbar?.update();
+}
+scrollToTop(smooth = true) {
+this._scrollWrapper?.scrollTo({ top: 0, behavior: smooth ? 'smooth' : 'auto' });
+}
+scrollToBottom(smooth = true) {
+if (this._scrollWrapper) {
+this._scrollWrapper.scrollTo({ top: this._scrollWrapper.scrollHeight, behavior: smooth ? 'smooth' : 'auto' });
+}
+}
+scrollToLeft(smooth = true) {
+this._scrollWrapper?.scrollTo({ left: 0, behavior: smooth ? 'smooth' : 'auto' });
+}
+scrollToRight(smooth = true) {
+if (this._scrollWrapper) {
+this._scrollWrapper.scrollTo({ left: this._scrollWrapper.scrollWidth, behavior: smooth ? 'smooth' : 'auto' });
+}
+}
+scrollToElement(target, smooth = true) {
+const el = typeof target === 'string' ? this.querySelector(target) : target;
+el?.scrollIntoView({ behavior: smooth ? 'smooth' : 'auto', block: 'nearest' });
+}
+get scrollElement() {
+return this._scrollWrapper;
+}
 }
 customElements.define('ty-scroll-container', TyScrollContainer);

package/lib/components/select.d.ts

@@ -127,7 +127,7 @@ export declare class TySelect extends TyComponent<SelectState> {
         size: {
             type: "string";
             visual: boolean;
-            default: string;
+            default: Size;
             validate: (v: any) => boolean;
             coerce: (v: any) => any;
         };
@@ -208,6 +208,29 @@ export declare class TySelect extends TyComponent<SelectState> {
     private parseValue;
     /** Initialize component state from the value property / pre-selected children. */
     private initializeState;
+    /**
+     * Declarative init: no `value` attribute, but markup pre-marked one or more
+     * options `selected` — native <select> semantics. This is the ONE place
+     * selection is read FROM the DOM rather than treated as a rendering of
+     * state (see getSelectedValues()): it seeds initial state, once. After
+     * this, `value` rules — flipping an option's `selected` property later
+     * does nothing, same as native.
+     *
+     * Called from initializeState() at connect AND from the child observer:
+     * a real HTML parser upgrades a custom element the moment its start tag is
+     * seen, BEFORE its children exist — `<ty-select>` connects with zero
+     * `<ty-option>` children when it's part of the page's own markup (as
+     * opposed to an already-built fragment attached via innerHTML/appendChild,
+     * where children exist at connect). Calling this only at connect would
+     * silently miss every option parsed after that instant, which is the
+     * common case for markup that is literally in the page's initial HTML.
+     *
+     * Safe to call repeatedly: no-ops once `value` has ever been explicitly
+     * set (attribute or property) or state is already non-empty — including
+     * after a real `.clear()`, which removes `selected` from every option via
+     * syncSelectedTags, so there is nothing left here to (re-)seed from.
+     */
+    private resolveDeclarativeSelection;
     /**
      * Get all option elements from the component (ty-option preferred, ty-tag accepted)
      */
@@ -223,7 +246,15 @@ export declare class TySelect extends TyComponent<SelectState> {
      */
     private deselectTag;
     /**
-     * Get array of currently selected values from tags (ALWAYS reads from DOM)
+     * Get the array of currently selected values.
+     *
+     * Reads STATE (`_state.selectedValues`), not the DOM: `value` is the
+     * selection, and an option's `selected` attribute is a rendering of it
+     * (written by syncSelectedTags below), never the other way round. This
+     * matters whenever options don't fully reflect the selection — external
+     * search legitimately has a selected value with no matching option
+     * present; a DOM scan would report empty and desync .value, `required`
+     * validation and the click-toggle logic from what's actually selected.
      */
     private getSelectedValues;
     private syncSelectedTags;