tyrell-components 1.0.0-TC57 → 1.0.0-TC58

package/lib/components/select.js

@@ -1,6 +1,7 @@
 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";
@@ -20,6 +21,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 +83,7 @@ this._optionsScrollbar = null;
 this._childObserver = null;
 this._selectedClone = null;
 this._customFlavorSheet = null;
+this._ariaTrigger = null;
 const shadow = this.shadowRoot;
 ensureStyles(shadow, { css: selectBaseStyles, id: "ty-select-base" });
 ensureStyles(shadow, { css: selectStyles, id: "ty-select" });
@@ -109,11 +112,43 @@ 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);
+}
 }
 _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")
+this.closeMobileModal();
+else
+this.closeDropdown();
+}
 const shadow = this.shadowRoot;
 const dialogs = shadow.querySelectorAll("dialog");
 dialogs.forEach((dialog) => {
@@ -122,7 +157,7 @@ dialog.close();
 }
 });
 if (this._keyboardHandler) {
-document.removeEventListener("keydown", this._keyboardHandler);
+document.removeEventListener("keydown", this._keyboardHandler, true);
 this._keyboardHandler = null;
 }
 if (this._searchDebounceTimer !== null) {
@@ -151,8 +186,15 @@ 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) {
@@ -256,6 +298,8 @@ return "";
 return null;
 }
 focus(options) {
+if (this._disabled)
+return;
 const trigger = this.querySelector(':scope > [slot="trigger"]');
 const stub = this.shadowRoot?.querySelector(".select-stub");
 const target = trigger ?? stub;
@@ -345,7 +389,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 +403,8 @@ items: this.getSelectedItems(newValues),
 action,
 item,
 });
+if (reveal)
+this.revealValidity();
 }
 }
 }
@@ -602,6 +648,7 @@ if (this._disabled || this._readonly) {
 return;
 }
 this.clear();
+this.revealValidity();
 }
 handleStubKeydown(e) {
 if (this._disabled || this._readonly || this._state.open)
@@ -754,6 +801,7 @@ this.closeMobileModal();
 else {
 this.closeDropdown();
 }
+this.focus();
 break;
 case "Enter":
 e.preventDefault();
@@ -915,10 +963,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,7 +993,27 @@ 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");
+}
+}
+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) {
+trigger.setAttribute("aria-invalid", "true");
+trigger.setAttribute("aria-description", error);
+}
+this._ariaTrigger = trigger;
 shadow
 .querySelectorAll(".dropdown-search-input, .mobile-search-input")
 .forEach((input) => (input.disabled = this._disabled));
@@ -941,7 +1025,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 +1042,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 +1078,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 +1278,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,9 +1312,17 @@ 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();
 e.stopPropagation();
@@ -1421,7 +1516,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 +1584,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");
 }
@@ -1530,8 +1631,14 @@ 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;
 }
@@ -1592,6 +1699,11 @@ type: "boolean",
 visual: true,
 default: false,
 },
+error: {
+type: "string",
+visual: true,
+default: "",
+},
 noClear: {
 type: "boolean",
 visual: true,

package/lib/components/switch.d.ts

@@ -84,7 +84,9 @@ export declare class TySwitch extends TyComponent<SwitchState> implements TySwit
     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);

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();
@@ -159,7 +160,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({});

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,8 +185,6 @@ 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;
@@ -162,8 +192,18 @@ export declare class TyTextarea extends TyComponent<TextareaState> implements Ty
     private applyHeightConstraints;
     private setupTextareaEvents;
     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();
@@ -24,7 +25,6 @@ this._internals.setFormValue(this.value || '');
 this.updateValidity();
 this.emitValueEvent('input', e);
 };
-this._userEdited = false;
 this._valueAtFocus = null;
 this.handleFocusEvent = () => {
 this._isFocused = true;
@@ -76,6 +76,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() {
@@ -257,18 +265,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 +317,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 +328,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 +380,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 +392,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 +443,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/styles/button.js

@@ -69,11 +69,25 @@ 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;
+grid-template-rows: minmax(var(--_rung), max-content);
+}
+:host([wide]) button {
 flex-grow: 1;
 }
 :host {
@@ -140,6 +154,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 +229,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 +285,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/date-picker.js

@@ -134,6 +134,23 @@ 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("")}
+.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 {
+border-color: var(--ty-color-danger);
+background: var(--ty-bg-danger-soft);
+}
+.date-picker-stub.error:focus,
+.date-picker-stub.error.open {
+border-color: var(--ty-color-danger-bold);
+box-shadow: 0 0 0 3px var(--ty-date-picker-shadow-focus);
+}
 .stub-text {
 flex: 1;
 white-space: nowrap;

package/lib/styles/select-base.js

@@ -239,6 +239,32 @@ background: transparent;
 border-color: transparent;
 box-shadow: none;
 }
+.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);
+contain: inline-size;
+}
+:host([compact]) .error-message,
+:host([has-trigger]) .error-message {
+box-sizing: border-box;
+width: max(100%, 20em);
+}
+:host([has-trigger]) .error-message {
+padding-left: 0;
+}
+.select-stub.error:not(.custom-trigger) {
+border-color: var(--ty-color-danger);
+background: var(--ty-bg-danger-soft);
+}
+.select-stub.error:not(.custom-trigger):focus,
+.select-stub.error:not(.custom-trigger):focus-visible {
+border-color: var(--ty-color-danger-bold);
+box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));
+}
 .dropdown-mode-mobile .dropdown-wrapper:has(.mobile-dialog[open]) .select-chips {
 display: none;
 }