tyrell-components 1.0.0-TC55 → 1.0.0-TC57

package/lib/components/select.js

@@ -96,6 +96,7 @@ dialog.close();
 });
 this.render();
 this.initializeState();
+this.updateFormValue();
 this._childObserver = new MutationObserver(() => {
 this.ensureOptionRoles();
 if (this._state.selectedValues.length > 0) {
@@ -178,8 +179,8 @@ break;
 case "required":
 this._required = newValue;
 break;
-case "clearable":
-this._clearable = newValue;
+case "noClear":
+this._clearable = !newValue;
 if (this.isConnected && this.shadowRoot)
 this.updateSelectionDisplay();
 break;
@@ -250,8 +251,19 @@ formData.append(this._name, value);
 });
 return formData;
 }
+if (this._name && !this._multiple)
+return "";
 return null;
 }
+focus(options) {
+const trigger = this.querySelector(':scope > [slot="trigger"]');
+const stub = this.shadowRoot?.querySelector(".select-stub");
+const target = trigger ?? stub;
+if (target)
+target.focus(options);
+else
+super.focus(options);
+}
 parseValue(value) {
 if (!value || typeof value !== "string" || value.trim() === "")
 return [];
@@ -881,19 +893,58 @@ this.renderDesktop();
 }
 this.updateSearchVisibility();
 this.applyLoadingState();
+this.syncFieldChrome();
 this.updateValidity();
 }
+syncFieldChrome() {
+const shadow = this.shadowRoot;
+const container = shadow?.querySelector(".select-container");
+if (!shadow || !container)
+return;
+const labelId = `select-label-${getElementHash(this)}`;
+let label = container.querySelector(":scope > .ty-field-label");
+if (this._label) {
+if (!label) {
+label = document.createElement("label");
+label.className = "ty-field-label";
+label.id = labelId;
+container.prepend(label);
+}
+label.innerHTML = `${this._label}${this._required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ""}`;
+}
+else {
+label?.remove();
+}
+const stub = shadow.querySelector(".select-stub");
+if (stub) {
+stub.classList.toggle("disabled", this._disabled);
+stub.classList.toggle("compact", this._compact);
+stub.tabIndex = this._disabled ? -1 : 0;
+stub.toggleAttribute("disabled", this._disabled);
+if (this._disabled)
+stub.setAttribute("aria-disabled", "true");
+else
+stub.removeAttribute("aria-disabled");
+if (this._label)
+stub.setAttribute("aria-labelledby", labelId);
+else
+stub.removeAttribute("aria-labelledby");
+}
+shadow
+.querySelectorAll(".dropdown-search-input, .mobile-search-input")
+.forEach((input) => (input.disabled = this._disabled));
+}
 updateValidity() {
 if (this.disabled) {
-this._internals.setValidity({});
+this.applyValidity({});
 return;
 }
 if (this.required && this.getSelectedValues().length === 0) {
 const stub = this.shadowRoot?.querySelector(".select-stub");
-this._internals.setValidity({ valueMissing: true }, "Please select a value", stub ?? undefined);
+this.applyValidity({ valueMissing: true }, "Please select a value", stub ?? undefined);
 }
 else {
-this._internals.setValidity({});
+this.applyValidity({});
 }
 }
 setupTriggerSlot() {
@@ -1111,7 +1162,7 @@ ${CHEVRON_DOWN_SVG}
 <!-- AVAILABLE LIST (always visible, takes remaining space) -->
 <div class="mobile-available-section" data-empty="false">
 <button class="section-header" type="button" data-section="available" aria-expanded="true">
-<span class="section-title">${this._availableLabel}</span>
+<span class="section-title">${this._availableLabel} <span class="section-count"></span></span>
 ${CHEVRON_DOWN_SVG}
 </button>
 <div class="section-content dropdown-options-wrapper" id="${listboxId}" role="listbox" ${this._multiple ? 'aria-multiselectable="true"' : ""}>
@@ -1205,11 +1256,17 @@ const availableSection = shadow.querySelector(".mobile-available-section");
 if (availableSection) {
 const visibleAvailable = this.getTagElements().filter((tag) => !tag.hasAttribute("hidden") && !tag.hasAttribute("selected")).length;
 availableSection.setAttribute("data-empty", String(visibleAvailable === 0));
-const availableTitleSpan = shadow.querySelector(".mobile-available-section .section-title");
-if (availableTitleSpan) {
-availableTitleSpan.textContent = `${this._availableLabel} (${visibleAvailable})`;
+this.setMobileSectionTitle(availableSection, this._availableLabel, visibleAvailable);
 }
 }
+setMobileSectionTitle(section, label, n) {
+const title = section.querySelector(".section-title");
+if (!title)
+return;
+const count = document.createElement("span");
+count.className = "section-count";
+count.textContent = `(${n})`;
+title.replaceChildren(`${label} `, count);
 }
 expandMobileSection(section) {
 const shadow = this.shadowRoot;
@@ -1232,9 +1289,7 @@ if (!section || !host)
 return;
 const selected = this._state.selectedValues;
 section.setAttribute("data-empty", String(selected.length === 0));
-const count = section.querySelector(".section-count");
-if (count)
-count.textContent = `(${selected.length})`;
+this.setMobileSectionTitle(section, this._selectedLabel, selected.length);
 if (selected.length === 0)
 this.expandMobileSection("available");
 const labelFor = (value) => {
@@ -1422,11 +1477,11 @@ return this.getProperty("readonly");
 set readonly(value) {
 this.setProperty("readonly", value);
 }
-get clearable() {
-return this.getProperty("clearable");
+get noClear() {
+return this.getProperty("noClear");
 }
-set clearable(value) {
-this.setProperty("clearable", value);
+set noClear(value) {
+this.setProperty("noClear", value);
 }
 get required() {
 return this.getProperty("required");
@@ -1537,11 +1592,10 @@ type: "boolean",
 visual: true,
 default: false,
 },
-clearable: {
+noClear: {
 type: "boolean",
 visual: true,
-default: true,
-aliases: { "not-clearable": false },
+default: false,
 },
 externalSearch: {
 type: "boolean",

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

@@ -28,6 +28,8 @@ export declare class TySelectedOptions extends HTMLElement {
      * Interpolation context for a value: value, label, flavor plus every
      * data-* attribute of the picker's matching option.
      */
+    /** The picker's option for a value (never its display clone). */
+    private option;
     private context;
     /**
      * The template's blueprint fragment. HTML-parsed templates carry children in
@@ -42,7 +44,11 @@ export declare class TySelectedOptions extends HTMLElement {
      * no flavor on the option).
      */
     private stampTemplate;
-    /** Default chip when no template is provided. */
+    /**
+     * Default chip when no template is provided: the option's own content,
+     * cloned, so a rich option makes a rich chip. An explicit `label` on the
+     * option replaces it with that text; a <template> child replaces it entirely.
+     */
     private defaultChip;
     private renderChips;
     /** Remove a value from the picker; picker re-emits change → chips re-render. */

package/lib/components/selected-tags.js

@@ -93,8 +93,11 @@ return parseValues(this._picker?.value ?? '');
 template() {
 return this.querySelector(':scope > template');
 }
+option(value) {
+return this._picker?.querySelector(`[value="${CSS.escape(value)}"]:not([cloned])`);
+}
 context(value) {
-const opt = this._picker?.querySelector(`[value="${CSS.escape(value)}"]`);
+const opt = this.option(value);
 const ctx = {
 value,
 label: opt?.getAttribute('label') || opt?.textContent?.trim() || value,
@@ -150,12 +153,18 @@ return clone;
 }
 defaultChip(value) {
 const ctx = this.context(value);
+const opt = this.option(value);
 const tag = document.createElement('ty-tag');
 tag.setAttribute('value', value);
 tag.setAttribute('dismissible', 'true');
 if (ctx.flavor)
 tag.setAttribute('flavor', ctx.flavor);
+if (opt && !opt.hasAttribute('label') && opt.hasChildNodes()) {
+opt.childNodes.forEach(n => tag.appendChild(n.cloneNode(true)));
+}
+else {
 tag.textContent = ctx.label;
+}
 tag.addEventListener('dismiss', () => this.deselect(value));
 return tag;
 }

package/lib/components/step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../src/components/step.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AASH;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtE;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;CAC3B;AAiED;;GAEG;AACH,qBAAa,MAAO,SAAQ,WAAW;IACrC,0BAA0B;IAC1B,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IAIjB,oBAAoB;IAIpB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI;CAG3F"}

package/lib/components/step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.js","sourceRoot":"","sources":["../../src/components/step.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAsB/C,+EAA+E;AAC/E,mBAAmB;AACnB,+EAA+E;AAE/E;;GAEG;AACH,SAAS,iBAAiB,CAAC,EAAU;IACnC,MAAM,UAAU,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAiB,CAAC,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;IAEhF,OAAO;QACL,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC;QACzB,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC;QAC/B,WAAW,EAAE,EAAE,CAAC,YAAY,CAAC,aAAa,CAAC;QAC3C,QAAQ,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;QACrC,MAAM,EAAE,UAAU,IAAI,aAAa,CAAC,QAAQ,CAAC,UAAwB,CAAC;YACpE,CAAC,CAAE,UAAyB;YAC5B,CAAC,CAAC,IAAI;KACT,CAAC;AACJ,CAAC;AAED,+EAA+E;AAC/E,YAAY;AACZ,+EAA+E;AAE/E;;;GAGG;AACH,SAAS,MAAM,CAAC,EAAU;IACxB,MAAM,UAAU,GAAG,EAAE,CAAC,UAAU,CAAC;IACjC,IAAI,CAAC,UAAU;QAAE,OAAO;IAExB,MAAM,EAAE,EAAE,EAAE,GAAG,iBAAiB,CAAC,EAAE,CAAC,CAAC;IAErC,2BAA2B;IAC3B,YAAY,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC;IAE7D,mEAAmE;IACnE,4EAA4E;IAC5E,UAAU,CAAC,SAAS,GAAG;;;WAGd,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;WAC5B,EAAE,CAAC,CAAC,CAAC,yBAAyB,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;;;;GAIhD,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,SAAS,OAAO,CAAC,GAAW;IAC1B,6BAA6B;AAC/B,CAAC;AAED,+EAA+E;AAC/E,uBAAuB;AACvB,+EAA+E;AAE/E;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,WAAW;IACrC,0BAA0B;IAC1B,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC9D,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IACtC,CAAC;IAED,iBAAiB;QACf,MAAM,CAAC,IAAI,CAAC,CAAC;IACf,CAAC;IAED,oBAAoB;QAClB,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC;IAED,wBAAwB,CAAC,KAAa,EAAE,SAAwB,EAAE,SAAwB;QACxF,MAAM,CAAC,IAAI,CAAC,CAAC;IACf,CAAC;CACF;AAED,8BAA8B;AAC9B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;IACnC,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAC3C,CAAC"}

package/lib/components/switch.d.ts

@@ -82,6 +82,8 @@ export declare class TySwitch extends TyComponent<SwitchState> implements TySwit
     private removeEventListeners;
     private setupEventListeners;
     protected render(): void;
+    /** Focus the switch itself (the host is not focusable; its role element is). */
+    focus(options?: FocusOptions): void;
     /** required + unchecked => valueMissing; otherwise valid. */
     private updateValidity;
     get checked(): boolean;

package/lib/components/switch.js

@@ -145,17 +145,24 @@ this.setupEventListeners();
 this.applyLabelName(switchEl);
 this.updateValidity();
 }
+focus(options) {
+const el = this.shadowRoot?.querySelector(".switch-container");
+if (el)
+el.focus(options);
+else
+super.focus(options);
+}
 updateValidity() {
 const anchor = this.shadowRoot?.querySelector(".switch-container");
 if (this.disabled) {
-this._internals.setValidity({});
+this.applyValidity({});
 return;
 }
 if (this.required && !this.checked) {
-this._internals.setValidity({ valueMissing: true }, "Please turn this on", anchor ?? undefined);
+this.applyValidity({ valueMissing: true }, "Please turn this on", anchor ?? undefined);
 }
 else {
-this._internals.setValidity({});
+this.applyValidity({});
 }
 }
 get checked() { return this.getProperty("checked"); }

package/lib/components/tab.d.ts

@@ -3,15 +3,63 @@ export interface TabAttributes {
     id: string | null;
     label: string | null;
     disabled: boolean;
+    lazy: boolean;
+}
+/**
+ * `ty-tab-load`: a lazy tab with no content was shown. Fired on the ty-tab
+ * and doesn't bubble, so a lazy tab nested in another doesn't trigger the
+ * outer one's listener. Listen on the tab, or on ty-tabs with capture.
+ */
+export interface TabLoadDetail {
+    id: string;
+    index: number;
 }
 export declare class TyTab extends HTMLElement {
     private _scrollbar;
+    private _panelLabel;
+    private _shown;
+    private _load;
+    private _contentObserver;
+    private _contentChanged;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
+    /** Accessible name. Set by ty-tabs, which also knows rich `label-{id}` slots. */
+    setPanelLabel(label: string): void;
+    /** Set by ty-tabs: a panel that isn't shown is inert. */
+    setShown(shown: boolean): void;
     disconnectedCallback(): void;
-    attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null): void;
+    /**
+     * Called by ty-tabs when this tab becomes the shown one — never for the
+     * tab shown first, whose content the page is expected to carry. A lazy
+     * tab with no content (or whose load failed) asks for it.
+     */
+    _requestLoad(index: number): void;
+    /**
+     * Report that loading this tab's content failed: shows `slot="error"`
+     * (default "Couldn't load.") with a Retry button. Retry, or showing the
+     * tab again, fires `ty-tab-load` once more. Content arriving clears it.
+     */
+    loadFailed(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private _render;
+    /** Lazy tabs track whether they have content; others don't watch. */
+    private _watchContent;
+    private _hasContent;
+    /**
+     * `mutated`: content changed under a connected tab. Content that goes away
+     * (a morph with the server's empty markup) loads again — right away when
+     * this tab is the one shown, otherwise the next time it's shown.
+     */
+    private _checkContent;
+    private _fireLoad;
+    /**
+     * Placeholder and error, built the first time a tab loads: tabs that never
+     * do carry no hidden "Couldn't load / Retry" text.
+     */
+    private _ensureStatus;
+    private _setLoad;
+    private _syncPanel;
     private _setupScrollbar;
     private _destroyScrollbar;
     resetScroll(): void;

package/lib/components/tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/components/tab.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AASH;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AA0DD;;GAEG;AACH,qBAAa,KAAM,SAAQ,WAAW;IACpC,0BAA0B;IAC1B,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IAIjB,oBAAoB;IAIpB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI;CAG3F"}

package/lib/components/tab.js

@@ -1,44 +1,185 @@
 import { ensureStyles } from '../utils/styles.js';
 import { tabStyles } from '../styles/tab.js';
 import { CustomScrollbar, isCustomScrollbarEnabled } from '../utils/custom-scrollbar.js';
+import { getLoaderSvg } from '../utils/loader-registry.js';
+const STATUS_SLOTS = new Set(['loading', 'error']);
+const INERT_ELEMENTS = new Set(['template', 'script', 'style']);
 export class TyTab extends HTMLElement {
 static get observedAttributes() {
-return ['id', 'label', 'disabled'];
+return ['id', 'label', 'disabled', 'lazy'];
 }
 constructor() {
 super();
 this._scrollbar = null;
+this._panelLabel = null;
+this._shown = true;
+this._load = 'idle';
+this._contentObserver = null;
+this._contentChanged = false;
 this.attachShadow({ mode: 'open' });
 }
 connectedCallback() {
 this._render();
+if (!this._scrollbar)
+this._setupScrollbar();
+this._watchContent();
+}
+setPanelLabel(label) {
+this._panelLabel = label;
+this._syncPanel();
+}
+setShown(shown) {
+this._shown = shown;
+this._syncPanel();
 }
 disconnectedCallback() {
 this._destroyScrollbar();
+this._contentChanged = !!this._contentObserver?.takeRecords().length;
+this._contentObserver?.disconnect();
+this._contentObserver = null;
+}
+_requestLoad(index) {
+if (this._contentObserver?.takeRecords().length)
+this._checkContent(false);
+if (this._load === 'empty' || this._load === 'failed')
+this._fireLoad(index);
+}
+loadFailed() {
+if (this._load === 'loading' || this._load === 'empty')
+this._setLoad('failed');
 }
-attributeChangedCallback(_name, _oldValue, _newValue) {
+attributeChangedCallback(name, oldValue, newValue) {
 this._render();
+if (name === 'lazy') {
+if (this.isConnected)
+this._watchContent();
+return;
+}
+const tabs = this.parentElement;
+if (oldValue !== newValue && this.isConnected && tabs?.localName === 'ty-tabs') {
+tabs._queueUpdate?.(true);
+}
 }
 _render() {
 const shadowRoot = this.shadowRoot;
 if (!shadowRoot)
 return;
-const id = this.getAttribute('id');
 if (!shadowRoot.querySelector('.tab-wrapper')) {
 ensureStyles(shadowRoot, { css: tabStyles, id: 'ty-tab' });
 shadowRoot.innerHTML = `
-<div class="tab-wrapper"
-role="tabpanel"
-${id ? `id="panel-${id}"` : ''}
-${id ? `aria-labelledby="tab-${id}"` : ''}
->
-<div class="tab-panel">
+<div class="tab-wrapper">
+<div class="tab-panel" role="tabpanel" tabindex="0">
 <slot></slot>
 </div>
 </div>
 `;
-this._setupScrollbar();
 }
+this._syncPanel();
+}
+_watchContent() {
+const lazy = this.hasAttribute('lazy');
+if (lazy && !this._contentObserver) {
+this._contentObserver = new MutationObserver(() => this._checkContent(true));
+this._contentObserver.observe(this, { childList: true, characterData: true, subtree: true });
+}
+else if (!lazy && this._contentObserver) {
+this._contentObserver.disconnect();
+this._contentObserver = null;
+}
+const changed = this._contentChanged;
+this._contentChanged = false;
+this._checkContent(changed);
+}
+_hasContent() {
+for (const node of Array.from(this.childNodes)) {
+if (node.nodeType === Node.TEXT_NODE && node.textContent.trim())
+return true;
+if (node.nodeType !== Node.ELEMENT_NODE)
+continue;
+const el = node;
+if (!STATUS_SLOTS.has(el.getAttribute('slot') ?? '') && !INERT_ELEMENTS.has(el.localName))
+return true;
+}
+return false;
+}
+_checkContent(mutated) {
+if (!this.hasAttribute('lazy') || this._hasContent()) {
+this._setLoad('idle');
+return;
+}
+if (this._load !== 'idle')
+return;
+this._setLoad('empty');
+if (!mutated)
+return;
+queueMicrotask(() => {
+if (this._load === 'empty' && this._shown && this.parentElement?.localName === 'ty-tabs')
+this._fireLoad();
+});
+}
+_fireLoad(index) {
+const tabs = this.parentElement;
+if (index === undefined) {
+index = tabs?.localName === 'ty-tabs'
+? Array.from(tabs.querySelectorAll(':scope > ty-tab')).indexOf(this)
+: 0;
+}
+this._setLoad('loading');
+this.dispatchEvent(new CustomEvent('ty-tab-load', { detail: { id: this.id, index } }));
+}
+_ensureStatus(panel) {
+if (panel.querySelector('.tab-loading'))
+return;
+panel.insertAdjacentHTML('beforeend', `
+<div class="tab-loading" part="loading">
+<slot name="loading"><span class="tab-spinner" part="spinner" aria-hidden="true"></span></slot>
+</div>
+<div class="tab-error" part="error" role="alert">
+<slot name="error">Couldn't load.</slot>
+<button type="button" class="tab-retry" part="retry">Retry</button>
+</div>
+`);
+panel.querySelector('.tab-retry').addEventListener('click', () => {
+panel.focus({ preventScroll: true });
+this._fireLoad();
+});
+}
+_setLoad(state) {
+if (state === this._load)
+return;
+this._load = state;
+const panel = this.shadowRoot?.querySelector('.tab-panel');
+if (!panel)
+return;
+if (state === 'loading' || state === 'failed') {
+this._ensureStatus(panel);
+panel.dataset.load = state;
+}
+else {
+delete panel.dataset.load;
+}
+if (state === 'loading') {
+panel.setAttribute('aria-busy', 'true');
+panel.querySelector('.tab-spinner').innerHTML = getLoaderSvg();
+}
+else {
+panel.removeAttribute('aria-busy');
+}
+}
+_syncPanel() {
+const panel = this.shadowRoot?.querySelector('.tab-panel');
+if (!panel)
+return;
+const tabs = this.parentElement;
+const rich = !this._panelLabel && this.id && tabs?.localName === 'ty-tabs'
+? tabs.querySelector(`:scope > [slot="label-${CSS.escape(this.id)}"]`)
+: null;
+const label = this._panelLabel || rich?.textContent?.trim() || this.getAttribute('label');
+if (label)
+panel.setAttribute('aria-label', label);
+else
+panel.removeAttribute('aria-label');
+panel.parentElement.inert = !this._shown;
 }
 _setupScrollbar() {
 const panel = this.shadowRoot?.querySelector('.tab-panel');

package/lib/components/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../src/components/tab.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAe7C,+EAA+E;AAC/E,mBAAmB;AACnB,+EAA+E;AAE/E;;GAEG;AACH,SAAS,gBAAgB,CAAC,EAAS;IACjC,OAAO;QACL,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC;QACzB,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC;QAC/B,QAAQ,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;KACtC,CAAC;AACJ,CAAC;AAED,+EAA+E;AAC/E,YAAY;AACZ,+EAA+E;AAE/E;;;GAGG;AACH,SAAS,MAAM,CAAC,EAAS;IACvB,MAAM,UAAU,GAAG,EAAE,CAAC,UAAU,CAAC;IACjC,IAAI,CAAC,UAAU;QAAE,OAAO;IAExB,MAAM,EAAE,EAAE,EAAE,GAAG,gBAAgB,CAAC,EAAE,CAAC,CAAC;IAEpC,2BAA2B;IAC3B,YAAY,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;IAE3D,mEAAmE;IACnE,0EAA0E;IAC1E,UAAU,CAAC,SAAS,GAAG;;;WAGd,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;WAC5B,EAAE,CAAC,CAAC,CAAC,wBAAwB,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE;;;;GAI/C,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,SAAS,OAAO,CAAC,GAAU;IACzB,6BAA6B;AAC/B,CAAC;AAED,+EAA+E;AAC/E,uBAAuB;AACvB,+EAA+E;AAE/E;;GAEG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;IACpC,0BAA0B;IAC1B,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;IACrC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IACtC,CAAC;IAED,iBAAiB;QACf,MAAM,CAAC,IAAI,CAAC,CAAC;IACf,CAAC;IAED,oBAAoB;QAClB,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC;IAED,wBAAwB,CAAC,KAAa,EAAE,SAAwB,EAAE,SAAwB;QACxF,MAAM,CAAC,IAAI,CAAC,CAAC;IACf,CAAC;CACF;AAED,8BAA8B;AAC9B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;IAClC,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;AACzC,CAAC"}

package/lib/components/tabs.d.ts

@@ -14,7 +14,8 @@ export interface TabsAttributes {
     fixed: boolean;
 }
 /**
- * Tab change event detail
+ * Tab change event detail. Fired whenever the shown tab changes after the
+ * first one is shown — never for the initial tab.
  */
 export interface TabChangeDetail {
     activeId: string;
@@ -29,8 +30,19 @@ export declare class TyTabs extends HTMLElement {
     static get observedAttributes(): string[];
     constructor();
     private _childObserver;
-    private _childRenderQueued;
+    private _updateQueued;
+    private _structureDirty;
+    /** ID of the tab currently shown (`active` may be stale or missing after a morph). */
+    get activeTab(): string | null;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * External changes (`active` set by app or server, children added or
+     * removed, a ty-tab's id/label/disabled changed — ty-tab reports those)
+     * settle in one microtask: a morph sets attributes and swaps children in
+     * one go, and the shown tab must be decided once the whole batch has
+     * landed — `active` may name a tab that is appended after it.
+     */
+    _queueUpdate(structure: boolean): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
 }

package/lib/components/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AASH;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AA8pBD;;GAEG;AACH,qBAAa,MAAO,SAAQ,WAAW;IACrC,0BAA0B;IAC1B,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IAIjB,oBAAoB;IAIpB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;CAcxF"}