tyrell-components 1.0.0-TC57 → 1.0.0-TC59

package/lib/components/radio.d.ts

@@ -17,6 +17,7 @@ export interface TyRadioElement extends HTMLElement {
     flavor: Flavor;
 }
 export declare class TyRadio extends TyComponent<RadioState> implements TyRadioElement {
+    protected static labelClicks: boolean;
     protected static properties: {
         value: {
             type: "string";
@@ -165,9 +166,15 @@ export declare class TyRadioGroup extends TyComponent<RadioGroupState> implement
     private getRadios;
     private syncChildren;
     /** Report `required` to the owning form — without this the asterisk
-        showed but an empty group submitted anyway. */
+        showed but an empty group submitted anyway. The message is a native
+        radio's; it needs a name, a nameless radio never reports valueMissing. */
     private updateValidity;
     private handleRadioSelect;
+    /**
+     * Select a value as the user did: input + change, like a native radio,
+     * whether by click, arrow keys or Space. Nothing fires when it is already selected.
+     */
+    private select;
     /**
      * Arrow-key navigation within group (W3C radio practice: arrow keys move
      * focus and selection together).

package/lib/components/radio.js

@@ -4,6 +4,7 @@ import { ensureStyles } from "../utils/styles.js";
 import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
 import { radioStyles, radioCustomFlavorCss } from "../styles/radio.js";
 import { REQUIRED_ICON_SVG } from "../utils/icons.js";
+import { nativeMessage } from "../utils/validity.js";
 export class TyRadio extends TyComponent {
 constructor() {
 super();
@@ -133,6 +134,7 @@ set size(v) { this.setProperty("size", v); }
 get flavor() { return this.getProperty("flavor"); }
 set flavor(v) { this.setProperty("flavor", v); }
 }
+TyRadio.labelClicks = true;
 TyRadio.properties = {
 value: { type: "string", default: "" },
 checked: {
@@ -223,7 +225,7 @@ updateValidity() {
 if (this.required && !this.disabled && !this.value) {
 const anchor = this.getRadios().find((r) => !r.disabled);
 const target = anchor?.shadowRoot?.querySelector(".radio-container");
-this.applyValidity({ valueMissing: true }, "Please select an option", target ?? undefined);
+this.applyValidity({ valueMissing: true }, nativeMessage("input", { type: "radio", name: "ty", required: true }), target ?? undefined);
 }
 else {
 this.applyValidity({});
@@ -236,16 +238,17 @@ const detail = e.detail;
 const newValue = detail?.value;
 if (typeof newValue !== "string" || newValue === this.value)
 return;
-this.value = newValue;
+this.select(newValue, e);
+}
+select(value, originalEvent) {
+if (value === this.value)
+return;
+this.value = value;
 this.syncChildren();
+const detail = { value, formValue: value, originalEvent };
 setTimeout(() => {
-const eventDetail = {
-value: newValue,
-formValue: newValue,
-originalEvent: e,
-};
-this.dispatchEvent(new CustomEvent("input", { detail: eventDetail, bubbles: true, composed: true }));
-this.dispatchEvent(new CustomEvent("change", { detail: eventDetail, bubbles: true, composed: true }));
+this.dispatchEvent(new CustomEvent("input", { detail, bubbles: true, composed: true }));
+this.dispatchEvent(new CustomEvent("change", { detail, bubbles: true, composed: true }));
 }, 0);
 }
 handleKeydown(e) {
@@ -270,16 +273,7 @@ nextIndex = current
 else if (["Space", " ", "Enter"].includes(e.key)) {
 if (current) {
 e.preventDefault();
-this.value = current.value;
-this.syncChildren();
-const eventDetail = {
-value: current.value,
-formValue: current.value,
-originalEvent: e,
-};
-setTimeout(() => {
-this.dispatchEvent(new CustomEvent("change", { detail: eventDetail, bubbles: true, composed: true }));
-}, 0);
+this.select(current.value, e);
 }
 return;
 }
@@ -289,16 +283,7 @@ return;
 const next = radios[nextIndex];
 if (next) {
 next.focus();
-this.value = next.value;
-this.syncChildren();
-const eventDetail = {
-value: next.value,
-formValue: next.value,
-originalEvent: e,
-};
-setTimeout(() => {
-this.dispatchEvent(new CustomEvent("change", { detail: eventDetail, bubbles: true, composed: true }));
-}, 0);
+this.select(next.value, e);
 }
 }
 removeEventListeners() {

package/lib/components/resize-observer.js

@@ -1,6 +1,7 @@
 import { ensureStyles } from '../utils/styles.js';
 import { resizeObserverStyles } from '../styles/resize-observer.js';
 import { updateSize, removeSize } from '../utils/resize-observer.js';
+import { upgradeProperties } from '../utils/upgrade-properties.js';
 export class TyResizeObserver extends HTMLElement {
 static get observedAttributes() {
 return ['id', 'debounce'];
@@ -20,6 +21,7 @@ ensureStyles(shadow, { css: resizeObserverStyles, id: 'ty-resize-observer' });
 shadow.innerHTML = '<slot></slot>';
 }
 connectedCallback() {
+upgradeProperties(this);
 this.setupObserver();
 }
 attributeChangedCallback(name, oldValue, newValue) {

package/lib/components/scroll-container.js

@@ -1,6 +1,7 @@
 import { ensureStyles } from '../utils/styles.js';
 import { scrollContainerStyles } from '../styles/scroll-container.js';
 import { CustomScrollbar } from '../utils/custom-scrollbar.js';
+import { upgradeProperties } from '../utils/upgrade-properties.js';
 export class TyScrollContainer extends HTMLElement {
 static get observedAttributes() {
 return ['no-shadow', 'max-height', 'hide-scrollbar', 'custom-scrollbar', 'overflow-x', 'scroll-anchoring'];
@@ -112,6 +113,7 @@ this._shadowLeft = shadow.querySelector('.shadow-left');
 this._shadowRight = shadow.querySelector('.shadow-right');
 }
 connectedCallback() {
+upgradeProperties(this);
 this._scrollWrapper?.addEventListener('scroll', this._onScroll, { passive: true });
 this._resizeObserver = new ResizeObserver(() => {
 this._scrollbar?.update();

package/lib/components/select.d.ts

@@ -73,6 +73,11 @@ export declare class TySelect extends TyComponent<SelectState> {
             visual: boolean;
             default: boolean;
         };
+        error: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
         noClear: {
             type: "boolean";
             visual: boolean;
@@ -190,6 +195,8 @@ export declare class TySelect extends TyComponent<SelectState> {
     private _childObserver;
     private _selectedClone;
     private _customFlavorSheet;
+    private _ariaTrigger;
+    private _ariaObserver;
     constructor();
     /** TyComponent handles property capture automatically. */
     protected onConnect(): void;
@@ -207,7 +214,11 @@ export declare class TySelect extends TyComponent<SelectState> {
     private applyLoadingState;
     /** Form value: a plain entry for single, FormData with repeated entries for multiple (HTMX standard). */
     protected getFormValue(): FormDataEntryValue | FormData | null;
-    /** Focus the trigger: a slotted one, else the field. The host itself isn't focusable. */
+    /**
+     * Focus the trigger: a slotted one, else the field. The host itself isn't
+     * focusable. A slotted trigger that can't take focus (a <span>, a disabled
+     * button) leaves it to the field.
+     */
     focus(options?: FocusOptions): void;
     private parseValue;
     /** Initialize component state from the value property / pre-selected children. */
@@ -239,6 +250,12 @@ export declare class TySelect extends TyComponent<SelectState> {
      * Get all option elements from the component (ty-option preferred, ty-tag accepted)
      */
     private getTagElements;
+    /**
+     * The options on offer: all but the ones the author hid (`hidden`, like a
+     * native <option hidden>). The search filters these and the keyboard walks
+     * them; a hidden option can still be the value.
+     */
+    private getOfferedTags;
     private getTagData;
     /**
      * Select an option - attribute only. The option stays in the list with
@@ -337,11 +354,17 @@ export declare class TySelect extends TyComponent<SelectState> {
     /**
      * Next tag index in `direction` (-1/1) that isn't disabled, wrapping
      * around — mirrors handleTagClick's disabled check so keyboard nav can
-     * never land on/select what a click already refuses to. Returns -1 if
-     * every tag is disabled (or there are none).
+     * never land on/select what a click already refuses to. Nor on one out of
+     * sight: `tags` is the list as it was offered, and an option can get
+     * `hidden` while it's open (a server patch). Returns -1 if every tag is
+     * skipped (or there are none).
      */
     private nextEnabledTagIndex;
     private filterTags;
+    /**
+     * Search filtering marks the options it leaves out `filtered-out`, never
+     * `hidden`: that one is the author's (see getOfferedTags).
+     */
     private updateTagVisibility;
     private updateOptionsVisibility;
     private clearHighlights;
@@ -365,12 +388,22 @@ export declare class TySelect extends TyComponent<SelectState> {
      * `compact` after connect never showed up.
      */
     private syncFieldChrome;
+    /**
+     * A slotted trigger is what takes focus (focus()), so it carries the error
+     * state too. aria-describedby can't reach into our shadow root from the
+     * light DOM: the message goes in aria-description instead. The trigger is
+     * the author's markup, so a morph can strip these while the error stays:
+     * a watch on them puts them back. Writes only on a real change, or the
+     * watch would feed itself.
+     */
+    private syncTriggerAria;
     /**
      * Reflect constraint validation to the owning <form> via ElementInternals.
      * Without this `required` is only cosmetic — form.checkValidity() (and a
      * real submit) never actually blocks on an empty required select. Mirrors
-     * ty-input's updateValidity(): empty + required => valueMissing; disabled
-     * fields are barred from constraint validation.
+     * ty-input's updateValidity(): empty + required => valueMissing, with a
+     * native <select>'s message; disabled fields are barred from constraint
+     * validation.
      */
     private updateValidity;
     /**
@@ -383,6 +416,16 @@ export declare class TySelect extends TyComponent<SelectState> {
     private renderDesktop;
     private renderMobile;
     private setupMobileEventListeners;
+    /**
+     * The dialog was closed by someone else — a ty-modal around this select
+     * closes the dialogs still open inside it. Run our own close too, so the
+     * open state, aria-expanded and the scroll lock follow. Watches the `open`
+     * attribute rather than the `close` event: that one comes a task later,
+     * so right after modal.hide() the stub would still say expanded. Our own
+     * close() calls land here with the state already closed, and a dialog
+     * reopened since then is open again: both are no-ops.
+     */
+    private syncOnOutsideClose;
     private handleMobileStubClick;
     /** Keyboard-open the (closed) mobile stub — see handleStubKeydown for why this is needed. */
     private handleMobileStubKeydown;
@@ -444,7 +487,9 @@ export declare class TySelect extends TyComponent<SelectState> {
      * Clear the entire selection programmatically WITH a change event
      * (action: 'clear'). No-op if nothing is selected. Exists so slot="trigger"
      * consumers (custom chrome, built-in clear UI hidden by design) can wire
-     * their own clear icon's click handler to it.
+     * their own clear icon's click handler to it. Shows no validation
+     * message (a code reset after a save shouldn't flag the field); the
+     * built-in × does.
      */
     clear(): void;
     get value(): string;
@@ -469,6 +514,8 @@ export declare class TySelect extends TyComponent<SelectState> {
     set noClear(value: boolean);
     get required(): boolean;
     set required(value: boolean);
+    get error(): string;
+    set error(value: string);
     get notSearchable(): boolean;
     set notSearchable(value: boolean);
     get externalSearch(): boolean;

package/lib/components/select.js

@@ -20,6 +20,7 @@ elementIds.set(element, id);
 return id;
 }
 import { REQUIRED_ICON_SVG } from "../utils/icons.js";
+import { nativeMessage } from "../utils/validity.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" />
@@ -81,6 +82,8 @@ this._optionsScrollbar = null;
 this._childObserver = null;
 this._selectedClone = null;
 this._customFlavorSheet = null;
+this._ariaTrigger = null;
+this._ariaObserver = null;
 const shadow = this.shadowRoot;
 ensureStyles(shadow, { css: selectBaseStyles, id: "ty-select-base" });
 ensureStyles(shadow, { css: selectStyles, id: "ty-select" });
@@ -109,11 +112,21 @@ this.updateMobileSelectedState();
 this._childObserver.observe(this, { childList: true });
 this.ensureOptionRoles();
 this._syncCustomFlavor();
+if (!this._keyboardHandler) {
+this._keyboardHandler = this.handleKeyboard.bind(this);
+document.addEventListener("keydown", this._keyboardHandler, true);
+}
 }
 _syncCustomFlavor() {
 this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.getProperty("flavor"), ({ base }) => selectCustomFlavorCss(base));
 }
 onDisconnect() {
+if (this._state.open) {
+if (this._state.mode === "mobile")
+this.closeMobileModal();
+else
+this.closeDropdown();
+}
 const shadow = this.shadowRoot;
 const dialogs = shadow.querySelectorAll("dialog");
 dialogs.forEach((dialog) => {
@@ -122,7 +135,7 @@ dialog.close();
 }
 });
 if (this._keyboardHandler) {
-document.removeEventListener("keydown", this._keyboardHandler);
+document.removeEventListener("keydown", this._keyboardHandler, true);
 this._keyboardHandler = null;
 }
 if (this._searchDebounceTimer !== null) {
@@ -256,11 +269,18 @@ return "";
 return null;
 }
 focus(options) {
+if (this._disabled)
+return;
 const trigger = this.querySelector(':scope > [slot="trigger"]');
+if (trigger) {
+trigger.focus(options);
+const active = trigger.getRootNode().activeElement;
+if (active && trigger.contains(active))
+return;
+}
 const stub = this.shadowRoot?.querySelector(".select-stub");
-const target = trigger ?? stub;
-if (target)
-target.focus(options);
+if (stub)
+stub.focus(options);
 else
 super.focus(options);
 }
@@ -304,6 +324,11 @@ this.resolveDeclarativeSelection(); }, { once: true });
 getTagElements() {
 return Array.from(this.querySelectorAll("ty-option:not([cloned]), ty-tag:not([cloned])"));
 }
+getOfferedTags() {
+return this.getTagElements()
+.filter((el) => !el.hasAttribute("hidden"))
+.map((el) => this.getTagData(el));
+}
 getTagData(element) {
 const value = element.value ||
 element.getAttribute("value") ||
@@ -345,7 +370,7 @@ if (!tag.hasAttribute("aria-selected"))
 tag.setAttribute("aria-selected", "false");
 });
 }
-updateComponentValue(newValues, dispatchChange = false, action = "set", item = null) {
+updateComponentValue(newValues, dispatchChange = false, action = "set", item = null, reveal = dispatchChange) {
 const oldValues = this.getSelectedValues();
 const valueStr = newValues.join(",");
 if (JSON.stringify(newValues.sort()) !== JSON.stringify(oldValues.sort())) {
@@ -359,6 +384,8 @@ items: this.getSelectedItems(newValues),
 action,
 item,
 });
+if (reveal)
+this.revealValidity();
 }
 }
 }
@@ -468,8 +495,7 @@ chevron.classList.add("open");
 const searchChevron = shadow.querySelector(".dropdown-search-chevron");
 if (searchChevron)
 searchChevron.classList.add("open");
-const tags = this.getTagElements().map((el) => this.getTagData(el));
-this._state.filteredTags = tags;
+this._state.filteredTags = this.getOfferedTags();
 this._state.highlightedIndex = -1;
 this.updateOptionsVisibility(true);
 this._setupOptionsScrollbar();
@@ -521,7 +547,7 @@ this.fireSearchEvent("");
 }
 else {
 const allTags = this.getTagElements().map((el) => this.getTagData(el));
-this._state.filteredTags = allTags;
+this._state.filteredTags = this.getOfferedTags();
 this.updateTagVisibility(allTags, allTags);
 this.clearHighlights(allTags);
 }
@@ -543,7 +569,7 @@ dialog.getBoundingClientRect();
 dialog.classList.add("open");
 this._state.open = true;
 const tags = this.getTagElements().map((el) => this.getTagData(el));
-this._state.filteredTags = tags;
+this._state.filteredTags = this.getOfferedTags();
 this.updateTagVisibility(tags, tags);
 requestAnimationFrame(() => {
 this.updateMobileSelectedState();
@@ -583,7 +609,7 @@ this.fireSearchEvent("");
 }
 else {
 const allTags = this.getTagElements();
-allTags.forEach((el) => el.removeAttribute("hidden"));
+allTags.forEach((el) => el.removeAttribute("filtered-out"));
 }
 this.fireCloseEvent();
 }
@@ -602,6 +628,7 @@ if (this._disabled || this._readonly) {
 return;
 }
 this.clear();
+this.revealValidity();
 }
 handleStubKeydown(e) {
 if (this._disabled || this._readonly || this._state.open)
@@ -702,7 +729,7 @@ desktopInput.value = "";
 if (mobileInput)
 mobileInput.value = "";
 const allTags = this.getTagElements().map((el) => this.getTagData(el));
-this._state.filteredTags = allTags;
+this._state.filteredTags = this.getOfferedTags();
 this.updateTagVisibility(allTags, allTags);
 this.updateOptionsVisibility(true);
 this.clearHighlights(allTags);
@@ -723,7 +750,7 @@ if (this._externalSearch) {
 this.dispatchSearchEvent(query);
 return;
 }
-const allTags = this.getTagElements().map((el) => this.getTagData(el));
+const allTags = this.getOfferedTags();
 const filtered = this.filterTags(allTags, query);
 this._state.filteredTags = filtered;
 this._state.highlightedIndex = -1;
@@ -754,6 +781,7 @@ this.closeMobileModal();
 else {
 this.closeDropdown();
 }
+this.focus();
 break;
 case "Enter":
 e.preventDefault();
@@ -790,7 +818,8 @@ 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"))
+const el = tags[index].element;
+if (!el.hasAttribute("disabled") && !el.hasAttribute("hidden") && !el.hasAttribute("filtered-out"))
 return index;
 index = (index + direction + count) % count;
 }
@@ -806,12 +835,7 @@ return tags.filter(({ text }) => text.toLowerCase().includes(searchLower));
 updateTagVisibility(filteredTags, allTags) {
 const visibleValues = new Set(filteredTags.map((tag) => tag.value));
 allTags.forEach(({ value, element }) => {
-if (visibleValues.has(value)) {
-element.removeAttribute("hidden");
-}
-else {
-element.setAttribute("hidden", "");
-}
+element.toggleAttribute("filtered-out", !visibleValues.has(value));
 });
 }
 updateOptionsVisibility(hasOptions) {
@@ -915,10 +939,26 @@ label.innerHTML = `${this._label}${this._required ? `<span class="required-icon"
 else {
 label?.remove();
 }
+const error = this.getProperty("error") || "";
+const errorId = `select-error-${getElementHash(this)}`;
+let errorLine = container.querySelector(":scope > .error-message");
+if (error) {
+if (!errorLine) {
+errorLine = document.createElement("div");
+errorLine.className = "error-message";
+errorLine.id = errorId;
+container.append(errorLine);
+}
+errorLine.textContent = error;
+}
+else {
+errorLine?.remove();
+}
 const stub = shadow.querySelector(".select-stub");
 if (stub) {
 stub.classList.toggle("disabled", this._disabled);
 stub.classList.toggle("compact", this._compact);
+stub.classList.toggle("error", !!error);
 stub.tabIndex = this._disabled ? -1 : 0;
 stub.toggleAttribute("disabled", this._disabled);
 if (this._disabled)
@@ -929,11 +969,45 @@ if (this._label)
 stub.setAttribute("aria-labelledby", labelId);
 else
 stub.removeAttribute("aria-labelledby");
+if (error) {
+stub.setAttribute("aria-invalid", "true");
+stub.setAttribute("aria-describedby", errorId);
+}
+else {
+stub.removeAttribute("aria-invalid");
+stub.removeAttribute("aria-describedby");
+}
 }
+this.syncTriggerAria();
 shadow
 .querySelectorAll(".dropdown-search-input, .mobile-search-input")
 .forEach((input) => (input.disabled = this._disabled));
 }
+syncTriggerAria() {
+const error = this.getProperty("error") || "";
+const trigger = error
+? this.querySelector(':scope > [slot="trigger"]')
+: null;
+if (this._ariaTrigger && this._ariaTrigger !== trigger) {
+this._ariaTrigger.removeAttribute("aria-invalid");
+this._ariaTrigger.removeAttribute("aria-description");
+}
+if (trigger) {
+if (trigger.getAttribute("aria-invalid") !== "true")
+trigger.setAttribute("aria-invalid", "true");
+if (trigger.getAttribute("aria-description") !== error)
+trigger.setAttribute("aria-description", error);
+}
+this._ariaTrigger = trigger;
+this._ariaObserver ?? (this._ariaObserver = new MutationObserver(() => this.syncTriggerAria()));
+this._ariaObserver.disconnect();
+if (trigger) {
+this._ariaObserver.observe(trigger, {
+attributes: true,
+attributeFilter: ["aria-invalid", "aria-description"],
+});
+}
+}
 updateValidity() {
 if (this.disabled) {
 this.applyValidity({});
@@ -941,7 +1015,7 @@ return;
 }
 if (this.required && this.getSelectedValues().length === 0) {
 const stub = this.shadowRoot?.querySelector(".select-stub");
-this.applyValidity({ valueMissing: true }, "Please select a value", stub ?? undefined);
+this.applyValidity({ valueMissing: true }, nativeMessage("select", { required: true, multiple: this._multiple }), stub ?? undefined);
 }
 else {
 this.applyValidity({});
@@ -958,7 +1032,10 @@ const hasTrigger = slot.assignedElements().length > 0;
 stub.classList.toggle("custom-trigger", hasTrigger);
 this.toggleAttribute("has-trigger", hasTrigger);
 };
-slot.addEventListener("slotchange", sync);
+slot.addEventListener("slotchange", () => {
+sync();
+this.syncFieldChrome();
+});
 sync();
 }
 setupEventListeners() {
@@ -991,9 +1068,13 @@ if (e.target === dialog) {
 this.closeDropdown();
 }
 });
+dialog.addEventListener("cancel", (e) => {
+e.preventDefault();
+this.closeDropdown();
+this.focus();
+});
+this.syncOnOutsideClose(dialog, () => this.closeDropdown());
 }
-this._keyboardHandler = this.handleKeyboard.bind(this);
-document.addEventListener("keydown", this._keyboardHandler);
 }
 buildStubClasses() {
 const classes = [];
@@ -1187,10 +1268,6 @@ 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");
@@ -1225,8 +1302,16 @@ this.closeMobileModal();
 dialog.addEventListener("cancel", (e) => {
 e.preventDefault();
 this.closeMobileModal();
+this.focus();
 });
+this.syncOnOutsideClose(dialog, () => this.closeMobileModal());
+}
 }
+syncOnOutsideClose(dialog, close) {
+new MutationObserver(() => {
+if (this._state.open && !dialog.open)
+close();
+}).observe(dialog, { attributes: true, attributeFilter: ["open"] });
 }
 handleMobileStubClick(e) {
 e.preventDefault();
@@ -1254,7 +1339,7 @@ const shadow = this.shadowRoot;
 this.renderMobileSelectedChips();
 const availableSection = shadow.querySelector(".mobile-available-section");
 if (availableSection) {
-const visibleAvailable = this.getTagElements().filter((tag) => !tag.hasAttribute("hidden") && !tag.hasAttribute("selected")).length;
+const visibleAvailable = this.getOfferedTags().filter(({ element }) => !element.hasAttribute("filtered-out") && !element.hasAttribute("selected")).length;
 availableSection.setAttribute("data-empty", String(visibleAvailable === 0));
 this.setMobileSectionTitle(availableSection, this._availableLabel, visibleAvailable);
 }
@@ -1399,6 +1484,8 @@ const option = this.getTagElements().find((el) => this.getTagData(el).value ===
 if (option) {
 const clone = option.cloneNode(true);
 clone.removeAttribute("selected");
+clone.removeAttribute("hidden");
+clone.removeAttribute("filtered-out");
 clone.setAttribute("slot", "selected");
 clone.setAttribute("cloned", "true");
 this.appendChild(clone);
@@ -1421,7 +1508,7 @@ return;
 this.updateComponentValue(current.filter((v) => v !== value), true, "remove", value);
 }
 clear() {
-this.updateComponentValue([], true, "clear", null);
+this.updateComponentValue([], true, "clear", null, false);
 }
 get value() {
 return this.getSelectedValues().join(",");
@@ -1489,6 +1576,12 @@ return this.getProperty("required");
 set required(value) {
 this.setProperty("required", value);
 }
+get error() {
+return this.getProperty("error");
+}
+set error(value) {
+this.setProperty("error", value);
+}
 get notSearchable() {
 return this.getProperty("notSearchable");
 }
@@ -1592,6 +1685,11 @@ type: "boolean",
 visual: true,
 default: false,
 },
+error: {
+type: "string",
+visual: true,
+default: "",
+},
 noClear: {
 type: "boolean",
 visual: true,

package/lib/components/switch.d.ts

@@ -24,6 +24,8 @@ export interface TySwitchElement extends HTMLElement {
 }
 export declare class TySwitch extends TyComponent<SwitchState> implements TySwitchElement {
     static formAssociated: boolean;
+    protected static delegatesFocus: boolean;
+    protected static labelClicks: boolean;
     protected static properties: {
         checked: {
             type: "boolean";
@@ -78,13 +80,17 @@ export declare class TySwitch extends TyComponent<SwitchState> implements TySwit
     protected getFormValue(): FormDataEntryValue | null;
     private buildClassList;
     private handleSwitchClick;
+    /** Keys show the ring, a click hides it (see checkbox.ts). */
+    private showFocusRing;
     private handleSwitchKeydown;
     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. */
+    /** required + unchecked => valueMissing; otherwise valid. The message is a
+     *  native checkbox's, as a switch where the browser has one (Safari's
+     *  `switch` attribute). */
     private updateValidity;
     get checked(): boolean;
     set checked(value: boolean);