tyrell-components 1.0.0-TC57 → 1.0.0-TC59

package/lib/components/switch.js

@@ -3,6 +3,7 @@ import { TyComponent } from "../base/ty-component.js";
 import { ensureStyles } from "../utils/styles.js";
 import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
 import { switchStyles, switchCustomFlavorCss } from "../styles/switch.js";
+import { nativeMessage } from "../utils/validity.js";
 export class TySwitch extends TyComponent {
 constructor() {
 super();
@@ -18,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();
@@ -44,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(() => {
@@ -59,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;
@@ -106,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);
@@ -121,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");
@@ -135,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");
@@ -159,7 +171,7 @@ this.applyValidity({});
 return;
 }
 if (this.required && !this.checked) {
-this.applyValidity({ valueMissing: true }, "Please turn this on", anchor ?? undefined);
+this.applyValidity({ valueMissing: true }, nativeMessage("input", { type: "checkbox", switch: true, required: true }), anchor ?? undefined);
 }
 else {
 this.applyValidity({});
@@ -182,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

@@ -21,6 +21,10 @@ export interface TyTextareaElement extends HTMLElement {
     label?: string;
     disabled?: boolean;
     required?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    tooShortMessage?: string;
+    tooLongMessage?: string;
     error?: string;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     rows?: string | number;
@@ -63,6 +67,26 @@ export declare class TyTextarea extends TyComponent<TextareaState> implements Ty
             visual: boolean;
             default: boolean;
         };
+        minlength: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        maxlength: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        tooShortMessage: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        tooLongMessage: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
         error: {
             type: "string";
             visual: boolean;
@@ -129,6 +153,14 @@ export declare class TyTextarea extends TyComponent<TextareaState> implements Ty
     focus(options?: FocusOptions): void;
     get required(): boolean;
     set required(v: boolean);
+    get minLength(): number;
+    set minLength(v: number);
+    get maxLength(): number;
+    set maxLength(v: number);
+    get tooShortMessage(): string;
+    set tooShortMessage(v: string);
+    get tooLongMessage(): string;
+    set tooLongMessage(v: string);
     get error(): string;
     set error(v: string);
     get size(): 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -153,17 +185,26 @@ export declare class TyTextarea extends TyComponent<TextareaState> implements Ty
     private _destroyScrollbar;
     private emitValueEvent;
     private handleInputEvent;
-    /** The user typed since the field was created: blur then shows its validation message. */
-    private _userEdited;
     private _valueAtFocus;
     private handleFocusEvent;
     private handleBlurEvent;
     private buildClassList;
     private applyHeightConstraints;
     private setupTextareaEvents;
+    private removeTextareaEvents;
     protected render(): void;
-    /** required + empty => valueMissing; otherwise valid. Disabled fields are
-     *  barred from constraint validation. */
+    /**
+     * minlength goes on the inner <textarea> for the browser's own too-short
+     * message after the user types, maxlength so typing stops at the limit
+     * (like ty-input).
+     */
+    private syncConstraintAttributes;
+    /**
+     * required + empty => valueMissing (the browser's own message); otherwise
+     * minlength / maxlength, worded like ty-input's (lengthValidity). Empty
+     * values only fail `required`, like native. Disabled fields are barred
+     * from constraint validation.
+     */
     private updateValidity;
 }
 export {};

package/lib/components/textarea.js

@@ -4,7 +4,8 @@ import { ensureStyles } from '../utils/styles.js';
 import { textareaStyles } from '../styles/textarea.js';
 import { CustomScrollbar, isCustomScrollbarEnabled } from '../utils/custom-scrollbar.js';
 import { customScrollbarStyles } from '../styles/custom-scrollbar.js';
-const REQUIRED_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`;
+import { nativeMessage, lengthValidity, toLimit } from '../utils/validity.js';
+import { REQUIRED_ICON_SVG } from '../utils/icons.js';
 export class TyTextarea extends TyComponent {
 constructor() {
 super();
@@ -14,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;
@@ -24,7 +27,6 @@ this._internals.setFormValue(this.value || '');
 this.updateValidity();
 this.emitValueEvent('input', e);
 };
-this._userEdited = false;
 this._valueAtFocus = null;
 this.handleFocusEvent = () => {
 this._isFocused = true;
@@ -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); }
@@ -76,6 +80,14 @@ this.shadowRoot?.querySelector('textarea')?.focus(options);
 }
 get required() { return this.getProperty('required'); }
 set required(v) { this.setProperty('required', v); }
+get minLength() { return toLimit(this.getProperty('minlength')) ?? -1; }
+set minLength(v) { this.setProperty('minlength', v == null || v < 0 ? '' : String(v)); }
+get maxLength() { return toLimit(this.getProperty('maxlength')) ?? -1; }
+set maxLength(v) { this.setProperty('maxlength', v == null || v < 0 ? '' : String(v)); }
+get tooShortMessage() { return this.getProperty('tooShortMessage'); }
+set tooShortMessage(v) { this.setProperty('tooShortMessage', v ?? ''); }
+get tooLongMessage() { return this.getProperty('tooLongMessage'); }
+set tooLongMessage(v) { this.setProperty('tooLongMessage', v ?? ''); }
 get error() { return this.getProperty('error'); }
 set error(v) { this.setProperty('error', v); }
 get size() {
@@ -182,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) {
@@ -218,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];
@@ -248,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');
@@ -257,18 +278,19 @@ const existingError = root.querySelector('.error-message');
 if (existingContainer && existingTextarea) {
 if (this.label) {
 if (existingLabel) {
-existingLabel.innerHTML = this.label +
-(this.required ? ` <span class="required-icon">${REQUIRED_ICON}</span>` : '');
-existingLabel.style.display = 'block';
+existingLabel.innerHTML = `${this.label}${this.required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}`;
+existingLabel.style.display = 'flex';
 }
 }
 else if (existingLabel) {
 existingLabel.style.display = 'none';
 }
+if (existingTextarea.value !== (this.value || ''))
 existingTextarea.value = this.value || '';
 existingTextarea.placeholder = this.placeholder || '';
 existingTextarea.disabled = this.disabled;
 existingTextarea.required = this.required;
+this.syncConstraintAttributes(existingTextarea);
 existingTextarea.className = this.buildClassList();
 if (this.label)
 existingTextarea.setAttribute('aria-label', this.label);
@@ -308,9 +330,8 @@ container.className = 'textarea-container';
 const labelEl = document.createElement('label');
 labelEl.className = 'ty-field-label';
 if (this.label) {
-labelEl.innerHTML = this.label +
-(this.required ? ` <span class="required-icon">${REQUIRED_ICON}</span>` : '');
-labelEl.style.display = 'block';
+labelEl.innerHTML = `${this.label}${this.required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}`;
+labelEl.style.display = 'flex';
 }
 else {
 labelEl.style.display = 'none';
@@ -320,6 +341,7 @@ textareaEl.value = this.value || '';
 textareaEl.placeholder = this.placeholder || '';
 textareaEl.disabled = this.disabled;
 textareaEl.required = this.required;
+this.syncConstraintAttributes(textareaEl);
 textareaEl.className = this.buildClassList();
 if (this.label)
 textareaEl.setAttribute('aria-label', this.label);
@@ -371,6 +393,11 @@ this._textareaEl = textareaEl;
 }
 this.updateValidity();
 }
+syncConstraintAttributes(ta) {
+const set = (name, limit) => limit !== null ? ta.setAttribute(name, String(limit)) : ta.removeAttribute(name);
+set('minlength', toLimit(this.getProperty('minlength')));
+set('maxlength', toLimit(this.getProperty('maxlength')));
+}
 updateValidity() {
 const ta = this.shadowRoot?.querySelector('textarea');
 if (this.disabled) {
@@ -378,12 +405,22 @@ this.applyValidity({});
 return;
 }
 const current = ta ? ta.value : String(this.value ?? '');
-if (this.required && current.trim() === '') {
-this.applyValidity({ valueMissing: true }, 'Please fill out this field', ta ?? undefined);
+if (current.trim() === '') {
+if (this.required) {
+this.applyValidity({ valueMissing: true }, nativeMessage('textarea', { required: true }), ta ?? undefined);
 }
 else {
 this.applyValidity({});
 }
+return;
+}
+const { tooShort, tooLong } = lengthValidity(current, {
+minlength: this.getProperty('minlength'),
+maxlength: this.getProperty('maxlength'),
+tooShortMessage: this.tooShortMessage,
+tooLongMessage: this.tooLongMessage,
+}, ta);
+this.applyValidity({ tooShort: !!tooShort, tooLong: !!tooLong }, tooShort ?? tooLong, ta ?? undefined);
 }
 }
 TyTextarea.formAssociated = true;
@@ -419,6 +456,26 @@ type: 'boolean',
 visual: true,
 default: false
 },
+minlength: {
+type: 'string',
+visual: true,
+default: ''
+},
+maxlength: {
+type: 'string',
+visual: true,
+default: ''
+},
+tooShortMessage: {
+type: 'string',
+visual: true,
+default: ''
+},
+tooLongMessage: {
+type: 'string',
+visual: true,
+default: ''
+},
 error: {
 type: 'string',
 visual: true,

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

@@ -69,11 +69,26 @@ color: var(--ty-button-color, ${ink('-strong')});
 export const buttonCustomFlavorCss = (base) => solidFlavor(base, 'neutral') + outlinedFlavor(base, 'neutral') + ghostFlavor(base, 'neutral');
 export const buttonStyles = `
 :host {
-display: inline-block;
+--_rung: var(--ty-button-height);
+display: inline-grid;
+grid-template: minmax(var(--_rung), 1fr) / minmax(min-content, 1fr);
+height: fit-content;
 font-family: inherit;
 }
+:host([action]) {
+--_rung: var(--ty-button-action-size);
+}
+:host([action]:not([wide])) {
+width: fit-content;
+aspect-ratio: 1;
+}
 :host([wide]) {
-display: flex;
+display: grid;
+flex-grow: 1;
+max-height: var(--_rung);
+grid-template-rows: minmax(var(--_rung), max-content);
+}
+:host([wide]) button {
 flex-grow: 1;
 }
 :host {
@@ -140,6 +155,7 @@ align-items: center;
 justify-content: center;
 gap: var(--ty-button-gap);
 height: var(--ty-button-height);
+min-height: 100%;
 padding: var(--ty-button-pad-y) var(--ty-button-pad-x);
 font-size: var(--ty-button-font);
 line-height: var(--ty-button-leading);
@@ -214,13 +230,11 @@ justify-content: center;
 ::slotted(ty-icon) {
 flex-shrink: 0;
 }
-:host([wide]) button {
-flex-grow: 1;
-}
 button.action {
 gap: 0px !important;
-height: var(--ty-button-action-size);
-width: var(--ty-button-action-size);
+height: auto;
+min-width: var(--ty-button-action-size);
+min-height: var(--ty-button-action-size);
 padding: 0px !important;
 }
 button.action ::slotted(ty-icon) {
@@ -272,18 +286,6 @@ button.pill.xs { padding-left: 1em; padding-right: 1em; }
 button.pill.sm { padding-left: 1.125em; padding-right: 1.125em; }
 button.pill.lg { padding-left: 1.5em; padding-right: 1.5em; }
 button.pill.xl { padding-left: 1.75em; padding-right: 1.75em; }
-button.pill:has(ty-icon:only-child),
-button.pill:has(slot[name="start"]:only-child),
-button.pill:has(slot[name="end"]:only-child) {
-padding: 0;
-aspect-ratio: 1;
-min-width: var(--ty-size-md);
-}
-button.pill.xs:has(ty-icon:only-child) { min-width: 1.375rem; min-height: 1.375rem; }
-button.pill.sm:has(ty-icon:only-child) { min-width: 1.5rem; min-height: 1.5rem; }
-button.pill.md:has(ty-icon:only-child) { min-width: 2rem; min-height: 2rem; }
-button.pill.lg:has(ty-icon:only-child) { min-width: 2.25rem; min-height: 2.25rem; }
-button.pill.xl:has(ty-icon:only-child) { min-width: 2.5rem; min-height: 2.5rem; }
 button.solid {
 --_ring: var(--ty-color-neutral);
 --_solid-bg: var(--ty-button-bg, var(--ty-solid-neutral));

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;

package/lib/styles/checkbox.js

@@ -14,14 +14,21 @@ export const checkboxStyles = `
 :host {
 display: inline-flex;
 width: auto;
-vertical-align: middle;
+height: 1.25em;
+height: 1lh;
+align-items: center;
+vertical-align: baseline;
+overflow: visible;
+}
+:host::before {
+content: "\\200b";
+width: 0;
 }
 .checkbox-container {
 display: inline-flex;
+flex-shrink: 0;
 align-items: center;
 justify-content: center;
-min-height: 1.25em;
-min-height: 1lh;
 outline: none;
 transition: var(--ty-local-transition, all 0.15s ease-in-out);
 user-select: none;
@@ -42,8 +49,7 @@ color: var(--checkbox-color-off-hover, color-mix(in oklab, var(--ty-text) 50%, t
 .checkbox-container[aria-checked="true"] {
 color: var(--checkbox-color, var(--ty-text));
 }
-.checkbox-container.focused,
-.checkbox-container:focus-visible {
+.checkbox-container.focused {
 box-shadow: 0 0 0 3px var(--checkbox-ring, color-mix(in oklab, var(--ty-color-primary) 25%, transparent));
 }
 .checkbox-icon {

package/lib/styles/date-picker.js

@@ -1,6 +1,6 @@
 import { FLAVORS } from "../types/common.js";
 import { fieldSizeVars } from "./field-size.js";
-const datePickerFlavor = (f, fb) => {
+const datePickerFlavor = (f, fb, also = "") => {
 const c = (s) => fb
 ? s
 ? `var(--ty-color-${f}${s}, var(--ty-color-${f}, var(--ty-color-${fb}${s})))`
@@ -9,7 +9,7 @@ const c = (s) => fb
 ? `var(--ty-color-${f}${s}, var(--ty-color-${f}))`
 : `var(--ty-color-${f})`;
 return `
-:host([flavor="${f}"]) {
+:host([flavor="${f}"])${also} {
 --date-picker-accent: var(--ty-input-${f}-border, ${c("-soft")});
 --date-picker-accent-bold: ${c("")};
 --date-picker-ring: color-mix(in oklab, ${c("")} 15%, transparent);
@@ -26,6 +26,7 @@ return `
 }
 `;
 };
+const errorLook = `,\n:host([error]:not([error=""]))`;
 export const datePickerCustomFlavorCss = (base) => datePickerFlavor(base, "neutral");
 export const datePickerStyles = `
 ${fieldSizeVars}
@@ -133,7 +134,18 @@ opacity: 0.6;
 border-color: var(--date-picker-accent-bold, var(--ty-date-picker-border-focus));
 box-shadow: 0 0 0 3px var(--date-picker-ring, var(--ty-date-picker-shadow-focus));
 }
-${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f)).join("")}
+${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f, undefined, f === "danger" ? errorLook : "")).join("")}
+.error-message {
+font-size: var(--ty-font-xs);
+line-height: var(--ty-leading-xs);
+letter-spacing: var(--ty-tracking-xs);
+color: var(--ty-color-danger);
+margin-top: 4px;
+padding-left: var(--ty-field-outer-pad-x);
+}
+.date-picker-stub.error:not([disabled]) {
+background: var(--ty-bg-danger-soft);
+}
 .stub-text {
 flex: 1;
 white-space: nowrap;

package/lib/styles/input.js

@@ -1,6 +1,6 @@
 import { FLAVORS } from "../types/common.js";
 import { fieldSizeVars } from "./field-size.js";
-const inputFlavor = (f, fb) => {
+const inputFlavor = (f, fb, also = "") => {
 const c = (s) => fb
 ? s
 ? `var(--ty-color-${f}${s}, var(--ty-color-${f}, var(--ty-color-${fb}${s})))`
@@ -9,7 +9,7 @@ const c = (s) => fb
 ? `var(--ty-color-${f}${s}, var(--ty-color-${f}))`
 : `var(--ty-color-${f})`;
 return `
-:host([flavor="${f}"]) {
+:host([flavor="${f}"])${also} {
 --input-accent: var(--ty-input-${f}-border, ${c("-soft")});
 --input-accent-bold: ${c("")};
 --input-ring: color-mix(in oklab, ${c("")} 15%, transparent);
@@ -26,6 +26,7 @@ return `
 }
 `;
 };
+const errorLook = `,\n:host([error]:not([error=""]))`;
 export const inputCustomFlavorCss = (base) => inputFlavor(base, "neutral");
 export const inputStyles = `
 ${fieldSizeVars}
@@ -137,14 +138,9 @@ color: var(--ty-color-danger);
 margin-top: 4px;
 padding-left: var(--ty-field-outer-pad-x);
 }
-.input-wrapper.error {
-border-color: var(--ty-color-danger);
+.input-wrapper.error:not(.disabled) {
 background: var(--ty-bg-danger-soft);
 }
-.input-wrapper.error.focused {
-border-color: var(--ty-color-danger-bold);
-box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));
-}
 input {
 flex: 1;
 min-width: 0;
@@ -177,7 +173,7 @@ input::placeholder {
 color: var(--input-placeholder, var(--ty-input-placeholder));
 font-weight: 400;
 }
-${FLAVORS.filter((f) => f !== "neutral").map((f) => inputFlavor(f)).join("")}
+${FLAVORS.filter((f) => f !== "neutral").map((f) => inputFlavor(f, undefined, f === "danger" ? errorLook : "")).join("")}
 input:focus-visible {
 outline: none;
 }

package/lib/styles/option.d.ts

@@ -1,2 +1,2 @@
 /** Option Component Styles */
-export declare const optionStyles = "\n.option-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ty-spacing-2);\n  box-sizing: border-box;\n  width: 100%;\n\n  cursor: pointer;\n  user-select: none;\n\n  transition: var(--ty-transition-all);\n\n  /* Linear-paired typography */\n  color: var(--ty-text);\n  font-family: inherit;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  border-radius: var(--ty-radius-md);\n}\n\n/* Cloned copy (projected into the select's trigger field): host defaults to\n   inline like any unstyled custom element, which ignores width/overflow \u2014\n   force a block box so the parent's flex-basis:0 truncation (select.ts\n   .select-stub.has-clone slot[name=\"selected\"]) actually clips it, and\n   collapse the content to a single ellipsized line instead of wrapping. */\n:host([cloned]) {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n}\n\n/* The clone sits in the select's TRIGGER, so its type follows the field size\n   ladder (styles/field-size.ts) rather than the dropdown list's own scale \u2014\n   the --ty-field-* vars inherit from ty-select through the light DOM. The\n   fallbacks cover a ty-option rendered outside a select. */\n:host([cloned]) .option-content {\n  display: block;\n  padding: 0px;\n  background: transparent;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-size: var(--ty-field-font, var(--ty-font-sm));\n  line-height: var(--ty-field-leading, var(--ty-leading-sm));\n  letter-spacing: var(--ty-field-tracking, var(--ty-tracking-sm));\n}\n\n.option-content:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[highlighted] {\n  background: var(--ty-bg-neutral-soft);\n  color: var(--ty-text-strong);\n}\n\n/* Selected: quiet \u2014 bolder text color only, no background slab, no weight change */\n.option-content[selected] {\n  background: transparent;\n  color: var(--ty-text-bold);\n}\n\n/* Lucide check \u2014 right-aligned. Its box is always reserved so selecting\n   (or highlighting) never changes the row's width and rewraps the text. */\n.option-check {\n  display: block;\n  visibility: hidden;\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  margin-left: auto;\n  color: var(--ty-color-primary);\n}\n\n.option-content[selected] .option-check {\n  visibility: visible;\n}\n\n/* Never show the check on the copy cloned into the select's trigger field */\n:host([cloned]) .option-check {\n  display: none;\n}\n\n.option-content[selected]:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.option-content[hidden] {}\n\n.option-content * {\n  pointer-events: none;\n}\n";
+export declare const optionStyles = "\n/* Options the author hid and options a ty-select search left out, at any\n   depth in the select (a framework component's element around each option\n   too). !important beats the select's mobile list display:block. */\n:host([hidden]),\n:host([filtered-out]) {\n  display: none !important;\n}\n\n.option-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ty-spacing-2);\n  box-sizing: border-box;\n  width: 100%;\n\n  cursor: pointer;\n  user-select: none;\n\n  transition: var(--ty-transition-all);\n\n  /* Linear-paired typography */\n  color: var(--ty-text);\n  font-family: inherit;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  border-radius: var(--ty-radius-md);\n}\n\n/* Cloned copy (projected into the select's trigger field): host defaults to\n   inline like any unstyled custom element, which ignores width/overflow \u2014\n   force a block box so the parent's flex-basis:0 truncation (select.ts\n   .select-stub.has-clone slot[name=\"selected\"]) actually clips it, and\n   collapse the content to a single ellipsized line instead of wrapping. */\n:host([cloned]) {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n}\n\n/* The clone sits in the select's TRIGGER, so its type follows the field size\n   ladder (styles/field-size.ts) rather than the dropdown list's own scale \u2014\n   the --ty-field-* vars inherit from ty-select through the light DOM. The\n   fallbacks cover a ty-option rendered outside a select. */\n:host([cloned]) .option-content {\n  display: block;\n  padding: 0px;\n  background: transparent;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-size: var(--ty-field-font, var(--ty-font-sm));\n  line-height: var(--ty-field-leading, var(--ty-leading-sm));\n  letter-spacing: var(--ty-field-tracking, var(--ty-tracking-sm));\n}\n\n.option-content:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[highlighted] {\n  background: var(--ty-bg-neutral-soft);\n  color: var(--ty-text-strong);\n}\n\n/* Selected: quiet \u2014 bolder text color only, no background slab, no weight change */\n.option-content[selected] {\n  background: transparent;\n  color: var(--ty-text-bold);\n}\n\n/* Lucide check \u2014 right-aligned. Its box is always reserved so selecting\n   (or highlighting) never changes the row's width and rewraps the text. */\n.option-check {\n  display: block;\n  visibility: hidden;\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  margin-left: auto;\n  color: var(--ty-color-primary);\n}\n\n.option-content[selected] .option-check {\n  visibility: visible;\n}\n\n/* Never show the check on the copy cloned into the select's trigger field */\n:host([cloned]) .option-check {\n  display: none;\n}\n\n.option-content[selected]:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.option-content[hidden] {}\n\n.option-content * {\n  pointer-events: none;\n}\n";

package/lib/styles/option.js

@@ -1,4 +1,8 @@
 export const optionStyles = `
+:host([hidden]),
+:host([filtered-out]) {
+display: none !important;
+}
 .option-content {
 display: flex;
 align-items: center;