tyrell-components 1.0.0-TC54 → 1.0.0-TC56

package/lib/components/select.js

@@ -20,10 +20,10 @@ elementIds.set(element, id);
 return id;
 }
 import { REQUIRED_ICON_SVG } from "../utils/icons.js";
+const SEARCH_AUTO_THRESHOLD = 7;
 const CHEVRON_DOWN_SVG = `<svg viewBox="0 0 20 20" fill="currentColor">
 <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
 </svg>`;
-const SEARCH_AUTO_THRESHOLD = 7;
 function slugify(text) {
 return text
 .trim()
@@ -55,11 +55,12 @@ this._clearable = true;
 this._externalSearch = false;
 this._allowCreate = false;
 this._createTransform = "none";
-this._searchable = "auto";
+this._notSearchable = false;
 this._loading = false;
 this._scrollLockId = null;
 this._size = DEFAULT_SIZE;
 this._availableLabel = "Available";
+this._selectedLabel = "Selected";
 this._noOptionsMessage = "No options available";
 this._state = {
 open: false,
@@ -177,16 +178,16 @@ 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;
 case "externalSearch":
 this._externalSearch = newValue;
 break;
-case "searchable":
-this._searchable = newValue;
+case "notSearchable":
+this._notSearchable = newValue;
 if (this.isConnected && this.shadowRoot)
 this.updateSearchVisibility();
 break;
@@ -207,6 +208,9 @@ break;
 case "available-label":
 this._availableLabel = newValue || "Available";
 break;
+case "selected-label":
+this._selectedLabel = newValue || "Selected";
+break;
 case "no-options-message":
 this._noOptionsMessage = newValue || "No options available";
 break;
@@ -698,6 +702,8 @@ e.stopPropagation();
 e.preventDefault();
 }
 handleSearchInput(e) {
+if (this._state.mode === "mobile")
+this.expandMobileSection("available");
 const target = e.target;
 const query = target.value;
 this._state.search = query;
@@ -730,7 +736,12 @@ switch (e.key) {
 case "Escape":
 e.preventDefault();
 e.stopPropagation();
+if (this._state.mode === "mobile") {
+this.closeMobileModal();
+}
+else {
 this.closeDropdown();
+}
 break;
 case "Enter":
 e.preventDefault();
@@ -746,43 +757,33 @@ break;
 case "ArrowUp":
 e.preventDefault();
 e.stopPropagation();
-let newIndexUp;
-if (tagsCount === 0) {
-newIndexUp = -1;
-}
-else if (currentHighlightedIndex === -1) {
-newIndexUp = tagsCount - 1;
-}
-else if (currentHighlightedIndex === 0) {
-newIndexUp = tagsCount - 1;
-}
-else {
-newIndexUp = currentHighlightedIndex - 1;
-}
+const newIndexUp = this.nextEnabledTagIndex(filteredTags, currentHighlightedIndex, -1);
 this._state.highlightedIndex = newIndexUp;
 this.highlightTag(filteredTags, newIndexUp);
 break;
 case "ArrowDown":
 e.preventDefault();
 e.stopPropagation();
-let newIndexDown;
-if (tagsCount === 0) {
-newIndexDown = -1;
-}
-else if (currentHighlightedIndex === -1) {
-newIndexDown = 0;
-}
-else if (currentHighlightedIndex === tagsCount - 1) {
-newIndexDown = 0;
-}
-else {
-newIndexDown = currentHighlightedIndex + 1;
-}
+const newIndexDown = this.nextEnabledTagIndex(filteredTags, currentHighlightedIndex, 1);
 this._state.highlightedIndex = newIndexDown;
 this.highlightTag(filteredTags, newIndexDown);
 break;
 }
 }
+nextEnabledTagIndex(tags, fromIndex, direction) {
+const count = tags.length;
+if (count === 0)
+return -1;
+let index = fromIndex === -1
+? (direction === 1 ? 0 : count - 1)
+: (fromIndex + direction + count) % count;
+for (let i = 0; i < count; i++) {
+if (!tags[index].element.hasAttribute("disabled"))
+return index;
+index = (index + direction + count) % count;
+}
+return -1;
+}
 filterTags(tags, query) {
 if (!query || query.trim() === "") {
 return tags;
@@ -880,19 +881,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() {
@@ -1098,12 +1138,21 @@ ${CHEVRON_DOWN_SVG}
 <!-- HEADER (matches dropdown.ts) -->
 ${searchHeaderHtml}
 <!-- BODY: options list with toggleable selected state -->
-<div class="mobile-body">
+<div class="mobile-body" data-expanded="available">
+<!-- SELECTED STRIP (pinned above the list, collapses when empty) -->
+<div class="mobile-selected-section" data-empty="true">
+<button class="section-header" type="button" data-section="selected" aria-expanded="false">
+<span class="section-title">${this._selectedLabel} <span class="section-count">(0)</span></span>
+${CHEVRON_DOWN_SVG}
+</button>
+<div class="section-content mobile-selected-chips"></div>
+</div>
 <!-- AVAILABLE LIST (always visible, takes remaining space) -->
 <div class="mobile-available-section" data-empty="false">
-<div class="section-header">
-<span class="section-title">${this._availableLabel}</span>
-</div>
+<button class="section-header" type="button" data-section="available" aria-expanded="true">
+<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"' : ""}>
 <slot id="options-slot"></slot>
 <div class="empty-state">${this._noOptionsMessage}</div>
@@ -1126,6 +1175,10 @@ this.setupMobileEventListeners();
 this.updateSelectionDisplay();
 }
 setupMobileEventListeners() {
+if (!this._keyboardHandler) {
+this._keyboardHandler = this.handleKeyboard.bind(this);
+document.addEventListener("keydown", this._keyboardHandler);
+}
 const shadow = this.shadowRoot;
 const stub = shadow.querySelector(".select-stub");
 const optionsSlot = shadow.querySelector("#options-slot");
@@ -1145,6 +1198,9 @@ optionsSlot.addEventListener("click", (e) => this.handleMobileTagClick(e));
 if (searchInput) {
 searchInput.addEventListener("input", (e) => this.handleSearchInput(e));
 }
+shadow.querySelectorAll(".mobile-body .section-header").forEach((header) => {
+header.addEventListener("click", () => this.expandMobileSection(header.dataset.section === "selected" ? "selected" : "available"));
+});
 if (closeButton) {
 closeButton.addEventListener("click", () => this.closeMobileModal());
 }
@@ -1183,24 +1239,74 @@ updateMobileSelectedState() {
 if (this._state.mode !== "mobile")
 return;
 const shadow = this.shadowRoot;
+this.renderMobileSelectedChips();
 const availableSection = shadow.querySelector(".mobile-available-section");
 if (availableSection) {
-const visibleAvailable = this.getTagElements().filter((tag) => !tag.hasAttribute("hidden")).length;
+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;
+const body = shadow?.querySelector(".mobile-body");
+if (!body)
+return;
+if (section === "selected" && this._state.selectedValues.length === 0)
+return;
+body.dataset.expanded = section;
+shadow.querySelectorAll(".mobile-body .section-header").forEach((header) => {
+const owns = header.dataset.section === section;
+header.setAttribute("aria-expanded", String(owns));
+});
+}
+renderMobileSelectedChips() {
+const shadow = this.shadowRoot;
+const section = shadow.querySelector(".mobile-selected-section");
+const host = shadow.querySelector(".mobile-selected-chips");
+if (!section || !host)
+return;
+const selected = this._state.selectedValues;
+section.setAttribute("data-empty", String(selected.length === 0));
+this.setMobileSectionTitle(section, this._selectedLabel, selected.length);
+if (selected.length === 0)
+this.expandMobileSection("available");
+const labelFor = (value) => {
+const option = this.getTagElements().find((tag) => this.getTagData(tag).value === value);
+return option ? this.getTagData(option).text : value;
+};
+host.textContent = "";
+for (const value of selected) {
+const chip = document.createElement("button");
+chip.type = "button";
+chip.className = "mobile-selected-chip";
+chip.dataset.value = value;
+chip.setAttribute("aria-label", `Remove ${labelFor(value)}`);
+chip.innerHTML = `<span class="chip-label"></span>${CLEAR_ICON_SVG}`;
+chip.querySelector(".chip-label").textContent = labelFor(value);
+chip.addEventListener("click", (e) => {
+e.preventDefault();
+e.stopPropagation();
+this.deselectValue(value);
+});
+host.appendChild(chip);
+}
 }
 shouldShowSearch() {
 if (this._externalSearch)
 return true;
 if (this._allowCreate)
 return true;
-if (this._searchable === "always")
-return true;
-if (this._searchable === "never")
+if (this._notSearchable)
 return false;
 return this.getTagElements().length > SEARCH_AUTO_THRESHOLD;
 }
@@ -1359,11 +1465,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");
@@ -1371,11 +1477,11 @@ return this.getProperty("required");
 set required(value) {
 this.setProperty("required", value);
 }
-get searchable() {
-return this.getProperty("searchable");
+get notSearchable() {
+return this.getProperty("notSearchable");
 }
-set searchable(value) {
-this.setProperty("searchable", value);
+set notSearchable(value) {
+this.setProperty("notSearchable", value);
 }
 get externalSearch() {
 return this.getProperty("externalSearch");
@@ -1474,11 +1580,10 @@ type: "boolean",
 visual: true,
 default: false,
 },
-clearable: {
+noClear: {
 type: "boolean",
 visual: true,
-default: true,
-aliases: { "not-clearable": false },
+default: false,
 },
 externalSearch: {
 type: "boolean",
@@ -1499,17 +1604,10 @@ default: "none",
 aliases: { "create-transform": true },
 coerce: (v) => (v === "slug" ? "slug" : "none"),
 },
-searchable: {
-type: "string",
+notSearchable: {
+type: "boolean",
 visual: true,
-default: "auto",
-coerce: (v) => {
-if (v === true || v === "" || v === "true")
-return "always";
-if (v === false || v === "false")
-return "never";
-return "auto";
-},
+default: false,
 },
 align: {
 type: "string",
@@ -1552,6 +1650,11 @@ type: "string",
 visual: true,
 default: "Available",
 },
+"selected-label": {
+type: "string",
+visual: true,
+default: "Selected",
+},
 "no-options-message": {
 type: "string",
 visual: true,

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.js

@@ -148,14 +148,14 @@ this.updateValidity();
 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"}