tyrell-components 1.0.0-TC58 → 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";
@@ -169,6 +170,11 @@ export declare class TyRadioGroup extends TyComponent<RadioGroupState> implement
         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

@@ -134,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: {
@@ -237,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) {
@@ -271,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;
 }
@@ -290,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/select.d.ts

@@ -196,18 +196,12 @@ export declare class TySelect extends TyComponent<SelectState> {
     private _selectedClone;
     private _customFlavorSheet;
     private _ariaTrigger;
+    private _ariaObserver;
     constructor();
     /** TyComponent handles property capture automatically. */
     protected onConnect(): void;
     /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
     private _syncCustomFlavor;
-    /**
-     * `error` turns a neutral select danger, like ty-input; clearing it puts
-     * back exactly the flavor attribute the author had, or none, kept meanwhile
-     * in ERROR_FLAVOR. Runs once connected: while the element upgrades, `error`
-     * may come before the `flavor` written next to it.
-     */
-    private syncErrorFlavor;
     protected onDisconnect(): void;
     /** Handle state synchronization BEFORE render. */
     protected onPropertiesChanged(changes: PropertyChange[]): void;
@@ -220,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. */
@@ -252,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
@@ -350,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;
@@ -378,6 +388,15 @@ 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
@@ -511,7 +530,6 @@ export declare class TySelect extends TyComponent<SelectState> {
     set placement(value: Placement | "");
     get flavor(): Flavor;
     set flavor(value: Flavor);
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     get form(): HTMLFormElement | null;
 }
 export {};

package/lib/components/select.js

@@ -1,7 +1,6 @@
 import { DEFAULT_SIZE } from "../types/common.js";
 import { ensureStyles } from "../utils/styles.js";
 import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
-import { ERROR_FLAVOR } from "../utils/error-flavor.js";
 import { selectBaseStyles, selectCustomFlavorCss } from "../styles/select-base.js";
 import { selectStyles } from "../styles/select.js";
 import { getLoaderSvg } from "../utils/loader-registry.js";
@@ -84,6 +83,7 @@ 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" });
@@ -112,7 +112,6 @@ this.updateMobileSelectedState();
 this._childObserver.observe(this, { childList: true });
 this.ensureOptionRoles();
 this._syncCustomFlavor();
-this.syncErrorFlavor();
 if (!this._keyboardHandler) {
 this._keyboardHandler = this.handleKeyboard.bind(this);
 document.addEventListener("keydown", this._keyboardHandler, true);
@@ -121,27 +120,6 @@ document.addEventListener("keydown", this._keyboardHandler, true);
 _syncCustomFlavor() {
 this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.getProperty("flavor"), ({ base }) => selectCustomFlavorCss(base));
 }
-syncErrorFlavor() {
-if (!this._connected)
-return;
-const flavor = this.getProperty("flavor");
-const replaced = this.getAttribute(ERROR_FLAVOR);
-if (this.getProperty("error")) {
-if (replaced === null && flavor === "neutral") {
-this.setAttribute(ERROR_FLAVOR, this.getAttribute("flavor") ?? "");
-this.setProperty("flavor", "danger");
-}
-}
-else if (replaced !== null) {
-this.removeAttribute(ERROR_FLAVOR);
-if (flavor !== "danger")
-return;
-if (!replaced)
-this.removeAttribute("flavor");
-else
-this.setProperty("flavor", replaced);
-}
-}
 onDisconnect() {
 if (this._state.open) {
 if (this._state.mode === "mobile")
@@ -186,15 +164,8 @@ case "name":
 this._name = newValue || "";
 break;
 case "flavor":
-if (newValue !== "danger") {
-this.removeAttribute(ERROR_FLAVOR);
-this.syncErrorFlavor();
-}
 this._syncCustomFlavor();
 break;
-case "error":
-this.syncErrorFlavor();
-break;
 case "multiple":
 this._multiple = newValue;
 if (!newValue && this._state.selectedValues.length > 1) {
@@ -301,10 +272,15 @@ 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);
 }
@@ -348,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") ||
@@ -514,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();
@@ -567,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);
 }
@@ -589,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();
@@ -629,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();
 }
@@ -749,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);
@@ -770,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;
@@ -838,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;
 }
@@ -854,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) {
@@ -1002,6 +978,13 @@ 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;
@@ -1010,13 +993,20 @@ 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;
-shadow
-.querySelectorAll(".dropdown-search-input, .mobile-search-input")
-.forEach((input) => (input.disabled = this._disabled));
+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) {
@@ -1349,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);
 }
@@ -1494,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);
@@ -1631,14 +1623,8 @@ get flavor() {
 return this.getProperty("flavor");
 }
 set flavor(value) {
-this.removeAttribute(ERROR_FLAVOR);
 this.setProperty("flavor", value);
 }
-attributeChangedCallback(name, oldValue, newValue) {
-if (name === "flavor" && newValue === "danger" && oldValue === newValue)
-this.removeAttribute(ERROR_FLAVOR);
-super.attributeChangedCallback(name, oldValue, newValue);
-}
 get form() {
 return this._internals.form;
 }

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,6 +80,8 @@ 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;

package/lib/components/switch.js

@@ -19,6 +19,9 @@ ensureStyles(shadow, { css: switchStyles, id: "ty-switch" });
 onConnect() {
 this.setupEventListeners();
 this._syncCustomFlavor();
+const el = this.shadowRoot.querySelector(".switch-container");
+if (el && this.shadowRoot.activeElement !== el)
+el.classList.remove("focused");
 }
 onDisconnect() {
 this.removeEventListeners();
@@ -45,8 +48,7 @@ return classes.join(" ");
 handleSwitchClick(e) {
 if (this.disabled)
 return;
-if (this.isDuplicateActivationClick())
-return;
+this.showFocusRing(e instanceof KeyboardEvent);
 const newValue = !this.checked;
 this.checked = newValue;
 setTimeout(() => {
@@ -60,6 +62,9 @@ this.dispatchEvent(new CustomEvent("input", { detail: eventDetail, bubbles: true
 this.dispatchEvent(new CustomEvent("change", { detail: eventDetail, bubbles: true, composed: true }));
 }, 0);
 }
+showFocusRing(on) {
+this.shadowRoot?.querySelector(".switch-container")?.classList.toggle("focused", on);
+}
 handleSwitchKeydown(e) {
 if (this.disabled)
 return;
@@ -107,7 +112,7 @@ if (!el)
 return;
 this._clickHandler = (e) => this.handleSwitchClick(e);
 this._keydownHandler = (e) => this.handleSwitchKeydown(e);
-this._focusHandler = () => el.classList.add("focused");
+this._focusHandler = () => el.classList.toggle("focused", el.matches(":focus-visible"));
 this._blurHandler = () => el.classList.remove("focused");
 this.addEventListener("click", this._clickHandler);
 el.addEventListener("keydown", this._keydownHandler);
@@ -122,7 +127,8 @@ const classes = this.buildClassList();
 if (!switchEl) {
 switchEl = document.createElement("div");
 switchEl.className = "switch-container " + classes;
-switchEl.tabIndex = this.disabled ? -1 : 0;
+if (!this.disabled)
+switchEl.tabIndex = 0;
 switchEl.setAttribute("role", "switch");
 switchEl.setAttribute("aria-checked", this.checked ? "true" : "false");
 switchEl.setAttribute("aria-disabled", this.disabled ? "true" : "false");
@@ -136,8 +142,13 @@ switchEl.appendChild(track);
 shadow.appendChild(switchEl);
 }
 else {
+const focused = switchEl.classList.contains("focused") && shadow.activeElement === switchEl;
 switchEl.className = "switch-container " + classes;
-switchEl.tabIndex = this.disabled ? -1 : 0;
+switchEl.classList.toggle("focused", focused && !this.disabled);
+if (this.disabled)
+switchEl.removeAttribute("tabindex");
+else
+switchEl.tabIndex = 0;
 switchEl.setAttribute("aria-checked", this.checked ? "true" : "false");
 switchEl.setAttribute("aria-disabled", this.disabled ? "true" : "false");
 switchEl.setAttribute("aria-required", this.required ? "true" : "false");
@@ -183,6 +194,8 @@ set flavor(value) { this.setProperty("flavor", value); }
 get form() { return this._internals.form; }
 }
 TySwitch.formAssociated = true;
+TySwitch.delegatesFocus = true;
+TySwitch.labelClicks = true;
 TySwitch.properties = {
 checked: {
 type: "boolean",

package/lib/components/tabs.js

@@ -251,7 +251,7 @@ marker.style.top = `${position.top}px`;
 marker.style.width = `${position.width}px`;
 marker.style.height = `${position.height}px`;
 if (snap) {
-marker.offsetWidth;
+marker.getBoundingClientRect();
 marker.style.transition = '';
 }
 }

package/lib/components/textarea.d.ts

@@ -191,6 +191,7 @@ export declare class TyTextarea extends TyComponent<TextareaState> implements Ty
     private buildClassList;
     private applyHeightConstraints;
     private setupTextareaEvents;
+    private removeTextareaEvents;
     protected render(): void;
     /**
      * minlength goes on the inner <textarea> for the browser's own too-short

package/lib/components/textarea.js

@@ -15,6 +15,8 @@ this._scrollbar = null;
 this._isFocused = false;
 this.handleInputEvent = (e) => {
 this._userEdited = true;
+e.stopPropagation();
+e.stopImmediatePropagation();
 const target = e.target;
 const newValue = target.value;
 this.value = newValue;
@@ -46,20 +48,22 @@ ensureStyles(shadow, { css: customScrollbarStyles, id: 'ty-custom-scrollbar' });
 }
 }
 onConnect() {
+this.updateFormValue();
+if (this._rendered) {
+this.render();
+if (this._textareaEl)
+this.setupTextareaEvents(this._textareaEl);
+}
 }
 onDisconnect() {
 this._destroyScrollbar();
-if (this._textareaEl) {
-const newTextarea = this._textareaEl.cloneNode(true);
-this._textareaEl.parentNode?.replaceChild(newTextarea, this._textareaEl);
-this._textareaEl = null;
-}
-this._dummyEl = null;
+if (this._textareaEl)
+this.removeTextareaEvents(this._textareaEl);
 }
 onPropertiesChanged(changes) {
 }
 getFormValue() {
-return this.getProperty('value') || null;
+return this.getProperty('value') || '';
 }
 get value() { return this.getProperty('value'); }
 set value(v) { this.setProperty('value', v); }
@@ -190,6 +194,10 @@ textareaEl.style.overflowY = 'hidden';
 this._destroyScrollbar();
 }
 }
+else if (maxHeight !== null && measuredHeight >= maxHeight && !this._scrollbar) {
+textareaEl.style.overflowY = 'auto';
+this._setupScrollbar(textareaEl);
+}
 this._scrollbar?.update();
 }
 _setupScrollbar(textareaEl) {
@@ -226,7 +234,7 @@ value: this.value,
 originalEvent
 }
 };
-setTimeout(() => this.dispatchEvent(new CustomEvent(type, data)), 0);
+this.dispatchEvent(new CustomEvent(type, data));
 }
 buildClassList() {
 const classes = [this.size];
@@ -256,6 +264,11 @@ textareaEl.addEventListener('input', this.handleInputEvent);
 textareaEl.addEventListener('focus', this.handleFocusEvent);
 textareaEl.addEventListener('blur', this.handleBlurEvent);
 }
+removeTextareaEvents(textareaEl) {
+textareaEl.removeEventListener('input', this.handleInputEvent);
+textareaEl.removeEventListener('focus', this.handleFocusEvent);
+textareaEl.removeEventListener('blur', this.handleBlurEvent);
+}
 render() {
 const root = this.shadowRoot;
 const existingContainer = root.querySelector('.textarea-container');

package/lib/index.d.ts

@@ -75,6 +75,7 @@ declare global {
         tyResizeObserver: {
             getSize: (id: string) => ResizeSize | undefined;
             onResize: (id: string, callback: ResizeCallback) => () => void;
+            getAllSizes: () => Record<string, ResizeSize>;
             sizes: Record<string, ResizeSize>;
         };
         tyLoader: {

package/lib/index.js

@@ -54,6 +54,7 @@ clearCache: () => clearIcons()
 window.tyResizeObserver = {
 getSize: (id) => getResizeSize(id),
 onResize: (id, callback) => subscribeResize(id, callback),
+getAllSizes: () => getAllSizes(),
 get sizes() { return getAllSizes(); }
 };
 }

package/lib/styles/button.js

@@ -85,6 +85,7 @@ aspect-ratio: 1;
 :host([wide]) {
 display: grid;
 flex-grow: 1;
+max-height: var(--_rung);
 grid-template-rows: minmax(var(--_rung), max-content);
 }
 :host([wide]) button {

package/lib/styles/calendar-month.js

@@ -124,7 +124,7 @@ color: var(--ty-calendar-weekend-color, var(--ty-calendar-day-color, var(--ty-te
 color: var(--ty-calendar-other-month-color, color-mix(in oklab, var(--ty-text-faint) 65%, transparent));
 }
 .calendar-day-cell.other-month:hover {
-color: var(--ty-calendar-day-hover-color, var(--ty-text-soft, var(--ty-text-)));
+color: var(--ty-calendar-day-hover-color, var(--ty-text-soft));
 background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));
 }
 .calendar-day-cell.disabled {

package/lib/styles/calendar.js

@@ -10,6 +10,9 @@ box-sizing: border-box;
 font-family: inherit;
 align-items: center;
 }
+.calendar-container:focus {
+outline: none;
+}
 @media (max-width: 320px) {
 .calendar-container {
 gap: 0.375rem;