tyrell-components 1.0.0-TC53 → 1.0.0-TC54

package/lib/components/select.d.ts

@@ -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;

package/lib/components/select.js

@@ -94,9 +94,7 @@ dialog.close();
 }
 });
 this.render();
-requestAnimationFrame(() => {
 this.initializeState();
-});
 this._childObserver = new MutationObserver(() => {
 this.ensureOptionRoles();
 if (this._state.selectedValues.length > 0) {
@@ -268,13 +266,23 @@ this.updateSelectionDisplay();
 this.updateMobileSelectedState();
 }
 else {
-const allTags = this.getTagElements();
-const preSelectedTags = allTags
+this.resolveDeclarativeSelection();
+}
+}
+resolveDeclarativeSelection() {
+if (this.getAttribute("value") || this._state.selectedValues.length > 0) {
+return;
+}
+const preSelectedTags = this.getTagElements()
 .filter((tag) => tag.hasAttribute("selected"))
 .map((tag) => this.getTagData(tag).value);
 if (preSelectedTags.length > 0) {
 this.updateComponentValue(preSelectedTags, false);
+return;
 }
+if (document.readyState === "loading") {
+document.addEventListener("DOMContentLoaded", () => { if (this.isConnected)
+this.resolveDeclarativeSelection(); }, { once: true });
 }
 }
 getTagElements() {
@@ -295,10 +303,7 @@ deselectTag(tag) {
 tag.removeAttribute("selected");
 }
 getSelectedValues() {
-return this.getTagElements()
-.filter((tag) => tag.hasAttribute("selected"))
-.map((tag) => this.getTagData(tag).value)
-.filter((value) => value !== "");
+return [...this._state.selectedValues];
 }
 syncSelectedTags(selectedValues) {
 const selectedSet = new Set(selectedValues);
@@ -612,7 +617,7 @@ this.closeDropdown();
 }
 return;
 }
-if (tag.hasAttribute("selected")) {
+if (currentValues.includes(tagValue)) {
 const newValues = currentValues.filter((v) => v !== tagValue);
 this.updateComponentValue(newValues, true, "remove", tagValue);
 }
@@ -1234,10 +1239,11 @@ clearBtn.hidden = !(count > 0 && this._clearable && !this._disabled && !this._re
 }
 const wantClone = !this._multiple && count > 0 ? values[0] : null;
 this.syncSelectedClone(wantClone);
-stub.classList.toggle("has-clone", wantClone !== null);
+const hasClone = this._selectedClone !== null;
+stub.classList.toggle("has-clone", hasClone);
 const textEl = stub.querySelector(".dropdown-placeholder");
 if (textEl) {
-textEl.hidden = wantClone !== null;
+textEl.hidden = hasClone;
 const showLabels = count > 0 && this._multiple && !this._compact;
 if (showLabels) {
 textEl.textContent = this.getSelectedItems(values)
@@ -1245,6 +1251,10 @@ textEl.textContent = this.getSelectedItems(values)
 .join(", ");
 textEl.classList.remove("placeholder-shown");
 }
+else if (wantClone !== null) {
+textEl.textContent = values.join(", ");
+textEl.classList.remove("placeholder-shown");
+}
 else {
 textEl.textContent = this._placeholder;
 textEl.classList.add("placeholder-shown");
@@ -1254,9 +1264,14 @@ textEl.classList.add("placeholder-shown");
 syncSelectedClone(value) {
 const existing = this.querySelector(':scope > [cloned][slot="selected"]');
 if (existing?.getAttribute("value") === value) {
+const stale = value !== null &&
+existing.childNodes.length === 0 &&
+(this.getTagElements().find((el) => this.getTagData(el).value === value)?.childNodes.length ?? 0) > 0;
+if (!stale) {
 this._selectedClone = existing;
 return;
 }
+}
 existing?.remove();
 if (value === null) {
 this._selectedClone = null;
@@ -1270,6 +1285,10 @@ clone.setAttribute("slot", "selected");
 clone.setAttribute("cloned", "true");
 this.appendChild(clone);
 this._selectedClone = clone;
+if (option.childNodes.length === 0 && document.readyState === "loading") {
+document.addEventListener("DOMContentLoaded", () => { if (this.isConnected)
+this.updateSelectionDisplay(); }, { once: true });
+}
 }
 else if (this._selectedClone?.getAttribute("value") === value) {
 const restored = this._selectedClone.cloneNode(true);

package/lib/components/selected-tags.js

@@ -29,6 +29,10 @@ 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) {

package/lib/components/tabs.js

@@ -2,6 +2,7 @@ import { ensureStyles } from '../utils/styles.js';
 import { tabsStyles } from '../styles/tabs.js';
 const eventHandlers = new WeakMap();
 const resizeObservers = new WeakMap();
+const pendingInitialSnap = new WeakSet();
 function getTabsAttributes(el) {
 return {
 width: el.getAttribute('width') || '100%',
@@ -171,17 +172,13 @@ const button = shadowRoot.querySelector(`[data-tab-id='${activeId}']`);
 const buttonsContainer = shadowRoot.querySelector('.tab-buttons');
 if (!button || !buttonsContainer)
 return null;
-const buttonRect = button.getBoundingClientRect();
 const left = button.offsetLeft;
 const top = button.offsetTop;
-return {
-left,
-top,
-width: buttonRect.width,
-height: buttonRect.height,
-};
+const width = button.offsetWidth;
+const height = button.offsetHeight;
+return { left, top, width, height };
 }
-function updateMarker(el, activeId) {
+function updateMarker(el, activeId, forceSnap = false) {
 const shadowRoot = el.shadowRoot;
 if (!shadowRoot)
 return;
@@ -191,7 +188,7 @@ return;
 const position = calculateMarkerPosition(el, shadowRoot, activeId);
 if (!position)
 return;
-const snap = !marker.style.left || marker.offsetWidth === 0;
+const snap = forceSnap || !marker.style.left || marker.offsetWidth === 0;
 if (snap)
 marker.style.transition = 'none';
 marker.style.left = `${position.left}px`;
@@ -216,7 +213,7 @@ el.style.setProperty('--active-index', String(newIndex));
 updateTransform(el, newIndex);
 updateAriaAttributes(el, shadowRoot, tabId);
 updatePanelInteraction(el, tabId);
-updateMarker(el, tabId);
+updateMarker(el, tabId, pendingInitialSnap.delete(el));
 shadowRoot.querySelectorAll('.tab-overflow-item').forEach((item) => {
 item.setAttribute('data-active', String(item.dataset.tabId === tabId));
 });
@@ -482,6 +479,7 @@ updatePanelInteraction(el, activeId);
 }
 }
 else {
+pendingInitialSnap.add(el);
 shadowRoot.innerHTML = `
 <div class="tabs-container" data-placement="${placement}"${fixed ? ' data-fixed' : ''}>
 ${renderTabButtons(el, tabs, activeId)}

package/lib/version.d.ts

@@ -4,4 +4,4 @@
  * This is automatically synced with package.json during build.
  * Use `npm version` to bump versions.
  */
-export declare const VERSION = "1.0.0-TC53";
+export declare const VERSION = "1.0.0-TC54";

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '1.0.0-TC53';
+export const VERSION = '1.0.0-TC54';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tyrell-components",
-  "version": "1.0.0-TC53",
+  "version": "1.0.0-TC54",
   "description": "Tyrell Components - Framework-agnostic web components with semantic design system",
   "type": "module",
   "sideEffects": [