tyrell-components 1.0.0-TC56 → 1.0.0-TC57

package/lib/components/popup.js

@@ -5,6 +5,7 @@ import { popupStyles } from '../styles/popup.js';
 const anchorClickHandlers = new WeakMap();
 const anchorKeyClickHandlers = new WeakMap();
 const outsideClickHandlers = new WeakMap();
+const closeTimers = new WeakMap();
 const escapeHandlers = new WeakMap();
 const closeRequestHandlers = new WeakMap();
 const popupIds = new WeakMap();
@@ -76,18 +77,29 @@ if (anchor?.hasAttribute('aria-haspopup'))
 anchor.setAttribute('aria-expanded', 'false');
 const exitMs = Math.max(0, ...getComputedStyle(dialog).transitionDuration
 .split(',').map((d) => parseFloat(d) * (d.trim().endsWith('ms') ? 1 : 1000)));
-setTimeout(() => {
+clearTimeout(closeTimers.get(el));
+closeTimers.set(el, setTimeout(() => {
+closeTimers.delete(el);
 dialog.classList.remove('position-calculated');
 dialog.close();
-}, exitMs + 20);
+}, exitMs + 20));
 }
 function openPopup(el) {
-const popupId = getPopupId(el);
-lockScroll(popupId);
 const shadowRoot = el.shadowRoot;
 const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
 if (!dialog)
 return;
+if (dialog.open) {
+const pending = closeTimers.get(el);
+if (pending !== undefined) {
+clearTimeout(pending);
+closeTimers.delete(el);
+dialog.classList.add('open');
+}
+return;
+}
+const popupId = getPopupId(el);
+lockScroll(popupId);
 dialog.showModal();
 const anchor = getAnchorElement(el);
 if (anchor?.hasAttribute('aria-haspopup'))

package/lib/components/radio.d.ts

@@ -160,6 +160,8 @@ export declare class TyRadioGroup extends TyComponent<RadioGroupState> implement
      * the accessors after upgrade. Each radio fires ty-radio-connected once
      * upgraded, which re-syncs the group.
      */
+    /** Focus the group's tab stop: the checked radio, else the first enabled one. */
+    focus(options?: FocusOptions): void;
     private getRadios;
     private syncChildren;
     /** Report `required` to the owning form — without this the asterisk

package/lib/components/radio.js

@@ -184,6 +184,14 @@ this.syncChildren();
 getFormValue() {
 return this.value || null;
 }
+focus(options) {
+const enabled = this.getRadios().filter((r) => !r.disabled);
+const stop = enabled.find((r) => r.checked) ?? enabled[0];
+if (stop)
+stop.focus(options);
+else
+super.focus(options);
+}
 getRadios() {
 return Array.from(this.querySelectorAll("ty-radio"))
 .filter((r) => typeof r.setTabStop === "function");

package/lib/components/select.d.ts

@@ -207,6 +207,8 @@ 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(options?: FocusOptions): void;
     private parseValue;
     /** Initialize component state from the value property / pre-selected children. */
     private initializeState;

package/lib/components/select.js

@@ -96,6 +96,7 @@ dialog.close();
 });
 this.render();
 this.initializeState();
+this.updateFormValue();
 this._childObserver = new MutationObserver(() => {
 this.ensureOptionRoles();
 if (this._state.selectedValues.length > 0) {
@@ -250,8 +251,19 @@ formData.append(this._name, value);
 });
 return formData;
 }
+if (this._name && !this._multiple)
+return "";
 return null;
 }
+focus(options) {
+const trigger = this.querySelector(':scope > [slot="trigger"]');
+const stub = this.shadowRoot?.querySelector(".select-stub");
+const target = trigger ?? stub;
+if (target)
+target.focus(options);
+else
+super.focus(options);
+}
 parseValue(value) {
 if (!value || typeof value !== "string" || value.trim() === "")
 return [];

package/lib/components/selected-tags.d.ts

@@ -28,6 +28,8 @@ export declare class TySelectedOptions extends HTMLElement {
      * Interpolation context for a value: value, label, flavor plus every
      * data-* attribute of the picker's matching option.
      */
+    /** The picker's option for a value (never its display clone). */
+    private option;
     private context;
     /**
      * The template's blueprint fragment. HTML-parsed templates carry children in
@@ -42,7 +44,11 @@ export declare class TySelectedOptions extends HTMLElement {
      * no flavor on the option).
      */
     private stampTemplate;
-    /** Default chip when no template is provided. */
+    /**
+     * Default chip when no template is provided: the option's own content,
+     * cloned, so a rich option makes a rich chip. An explicit `label` on the
+     * option replaces it with that text; a <template> child replaces it entirely.
+     */
     private defaultChip;
     private renderChips;
     /** Remove a value from the picker; picker re-emits change → chips re-render. */

package/lib/components/selected-tags.js

@@ -93,8 +93,11 @@ return parseValues(this._picker?.value ?? '');
 template() {
 return this.querySelector(':scope > template');
 }
+option(value) {
+return this._picker?.querySelector(`[value="${CSS.escape(value)}"]:not([cloned])`);
+}
 context(value) {
-const opt = this._picker?.querySelector(`[value="${CSS.escape(value)}"]`);
+const opt = this.option(value);
 const ctx = {
 value,
 label: opt?.getAttribute('label') || opt?.textContent?.trim() || value,
@@ -150,12 +153,18 @@ return clone;
 }
 defaultChip(value) {
 const ctx = this.context(value);
+const opt = this.option(value);
 const tag = document.createElement('ty-tag');
 tag.setAttribute('value', value);
 tag.setAttribute('dismissible', 'true');
 if (ctx.flavor)
 tag.setAttribute('flavor', ctx.flavor);
+if (opt && !opt.hasAttribute('label') && opt.hasChildNodes()) {
+opt.childNodes.forEach(n => tag.appendChild(n.cloneNode(true)));
+}
+else {
 tag.textContent = ctx.label;
+}
 tag.addEventListener('dismiss', () => this.deselect(value));
 return tag;
 }

package/lib/components/switch.d.ts

@@ -82,6 +82,8 @@ export declare class TySwitch extends TyComponent<SwitchState> implements TySwit
     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. */
     private updateValidity;
     get checked(): boolean;

package/lib/components/switch.js

@@ -145,6 +145,13 @@ this.setupEventListeners();
 this.applyLabelName(switchEl);
 this.updateValidity();
 }
+focus(options) {
+const el = this.shadowRoot?.querySelector(".switch-container");
+if (el)
+el.focus(options);
+else
+super.focus(options);
+}
 updateValidity() {
 const anchor = this.shadowRoot?.querySelector(".switch-container");
 if (this.disabled) {

package/lib/components/textarea.d.ts

@@ -125,6 +125,8 @@ export declare class TyTextarea extends TyComponent<TextareaState> implements Ty
     set label(v: string);
     get disabled(): boolean;
     set disabled(v: boolean);
+    /** Focus the inner <textarea>: the host itself isn't focusable. */
+    focus(options?: FocusOptions): void;
     get required(): boolean;
     set required(v: boolean);
     get error(): string;
@@ -151,6 +153,8 @@ 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;

package/lib/components/textarea.js

@@ -13,6 +13,7 @@ this._dummyEl = null;
 this._scrollbar = null;
 this._isFocused = false;
 this.handleInputEvent = (e) => {
+this._userEdited = true;
 const target = e.target;
 const newValue = target.value;
 this.value = newValue;
@@ -23,6 +24,7 @@ this._internals.setFormValue(this.value || '');
 this.updateValidity();
 this.emitValueEvent('input', e);
 };
+this._userEdited = false;
 this._valueAtFocus = null;
 this.handleFocusEvent = () => {
 this._isFocused = true;
@@ -30,6 +32,8 @@ this._valueAtFocus = this.value;
 };
 this.handleBlurEvent = (e) => {
 this._isFocused = false;
+if (this._userEdited)
+this.revealValidity();
 if (this._valueAtFocus !== null && this.value !== this._valueAtFocus) {
 this.emitValueEvent('change', e);
 }
@@ -67,6 +71,9 @@ get label() { return this.getProperty('label'); }
 set label(v) { this.setProperty('label', v); }
 get disabled() { return this.getProperty('disabled'); }
 set disabled(v) { this.setProperty('disabled', v); }
+focus(options) {
+this.shadowRoot?.querySelector('textarea')?.focus(options);
+}
 get required() { return this.getProperty('required'); }
 set required(v) { this.setProperty('required', v); }
 get error() { return this.getProperty('error'); }

package/lib/styles/date-picker.js

@@ -92,7 +92,7 @@ align-items: center;
 justify-content: center;
 flex-shrink: 0;
 margin-right: 0.5rem;
-color: var(--ty-color-text-soft);
+color: var(--ty-text-soft);
 }
 .date-picker-stub ::slotted(ty-icon[slot="start"]) {
 width: 1em;

package/lib/styles/file-upload.d.ts

@@ -1 +1 @@
-export declare const fileUploadStyles = "\n:host {\n  display: block;\n  font-family: inherit;\n  width: 100%;\n}\n\n.file-upload-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.upload-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 4px;\n  display: flex;\n  align-items: center;\n}\n\n.required-icon {\n  color: var(--ty-color-danger);\n  margin-left: 4px;\n  font-size: 0.75rem;\n  line-height: 1;\n}\n\n.drop-zone {\n  border: 2px dashed var(--ty-border);\n  border-radius: var(--ty-radius-base);\n  padding: 2rem 1.5rem;\n  text-align: center;\n  cursor: pointer;\n  transition: var(--ty-local-transition, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease);\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  min-height: 140px;\n  user-select: none;\n}\n\n.drop-zone:hover:not(.disabled) {\n  border-color: var(--ty-input-border-hover);\n  background: var(--ty-surface-content);\n}\n\n.drop-zone.focused {\n  border-color: var(--ty-input-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.drop-zone.drag-active {\n  border-color: var(--ty-color-primary);\n  border-style: solid;\n  background: var(--ty-bg-primary-);\n}\n\n.drop-zone.drag-active .upload-icon {\n  color: var(--ty-color-primary);\n  transform: translateY(-2px);\n}\n\n.drop-zone.has-files {\n  min-height: 80px;\n  padding: 1.25rem 1.5rem;\n}\n\n.drop-zone.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.drop-zone.error {\n  border-color: var(--ty-color-danger);\n}\n\n.drop-zone.error:not(.disabled) {\n  background: var(--ty-bg-danger-);\n}\n\n.upload-icon {\n  color: var(--ty-text-faint);\n  width: 2.5rem;\n  height: 2.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: var(--ty-local-transition, color 0.15s ease, transform 0.15s ease);\n  pointer-events: none;\n}\n\n.upload-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.upload-hint {\n  color: var(--ty-text-soft);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  pointer-events: none;\n}\n\n.browse-link {\n  color: var(--ty-color-primary);\n  font-weight: var(--ty-font-medium);\n}\n\n.upload-sub-hint {\n  color: var(--ty-text-faint);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  pointer-events: none;\n}\n\n.file-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  margin-top: 0.5rem;\n}\n\n.file-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  border-radius: var(--ty-radius-base);\n  background: var(--ty-surface-content);\n  border: 1px solid var(--ty-border-soft);\n}\n\n.file-icon {\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n}\n\n.file-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.file-name {\n  flex: 1;\n  font-size: var(--ty-font-sm);\n  color: var(--ty-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.file-size {\n  font-size: var(--ty-font-xs);\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n.file-remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  color: var(--ty-text-faint);\n  width: 1.25rem;\n  height: 1.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  transition: var(--ty-local-transition, color 0.15s ease, background-color 0.15s ease);\n  border: none;\n  background: none;\n  padding: 0;\n  outline: none;\n}\n\n.file-remove:hover {\n  color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-);\n}\n\n.file-remove:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-color-danger);\n}\n\n.file-remove svg {\n  width: 12px;\n  height: 12px;\n}\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .drop-zone,\n  .upload-icon,\n  .file-remove {\n    transition: none;\n  }\n}\n\n@media (prefers-contrast: high) {\n  .drop-zone {\n    border-width: 3px;\n  }\n}\n";
+export declare const fileUploadStyles = "\n:host {\n  display: block;\n  font-family: inherit;\n  width: 100%;\n}\n\n.file-upload-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.upload-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 4px;\n  display: flex;\n  align-items: center;\n}\n\n.required-icon {\n  color: var(--ty-color-danger);\n  margin-left: 4px;\n  font-size: 0.75rem;\n  line-height: 1;\n}\n\n.drop-zone {\n  border: 2px dashed var(--ty-border);\n  border-radius: var(--ty-radius-base);\n  padding: 2rem 1.5rem;\n  text-align: center;\n  cursor: pointer;\n  transition: var(--ty-local-transition, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease);\n  outline: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  min-height: 140px;\n  user-select: none;\n}\n\n.drop-zone:hover:not(.disabled) {\n  border-color: var(--ty-input-border-hover);\n  background: var(--ty-surface-content);\n}\n\n.drop-zone.focused {\n  border-color: var(--ty-input-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.drop-zone.drag-active {\n  border-color: var(--ty-color-primary);\n  border-style: solid;\n  background: var(--ty-bg-primary-soft);\n}\n\n.drop-zone.drag-active .upload-icon {\n  color: var(--ty-color-primary);\n  transform: translateY(-2px);\n}\n\n.drop-zone.has-files {\n  min-height: 80px;\n  padding: 1.25rem 1.5rem;\n}\n\n.drop-zone.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.drop-zone.error {\n  border-color: var(--ty-color-danger);\n}\n\n.drop-zone.error:not(.disabled) {\n  background: var(--ty-bg-danger-soft);\n}\n\n.upload-icon {\n  color: var(--ty-text-faint);\n  width: 2.5rem;\n  height: 2.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: var(--ty-local-transition, color 0.15s ease, transform 0.15s ease);\n  pointer-events: none;\n}\n\n.upload-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.upload-hint {\n  color: var(--ty-text-soft);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  pointer-events: none;\n}\n\n.browse-link {\n  color: var(--ty-color-primary);\n  font-weight: var(--ty-font-medium);\n}\n\n.upload-sub-hint {\n  color: var(--ty-text-faint);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  pointer-events: none;\n}\n\n.file-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n  margin-top: 0.5rem;\n}\n\n.file-item {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  border-radius: var(--ty-radius-base);\n  background: var(--ty-surface-content);\n  border: 1px solid var(--ty-border-soft);\n}\n\n.file-icon {\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n}\n\n.file-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.file-name {\n  flex: 1;\n  font-size: var(--ty-font-sm);\n  color: var(--ty-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.file-size {\n  font-size: var(--ty-font-xs);\n  color: var(--ty-text-faint);\n  flex-shrink: 0;\n  font-variant-numeric: tabular-nums;\n}\n\n.file-remove {\n  flex-shrink: 0;\n  cursor: pointer;\n  color: var(--ty-text-faint);\n  width: 1.25rem;\n  height: 1.25rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  transition: var(--ty-local-transition, color 0.15s ease, background-color 0.15s ease);\n  border: none;\n  background: none;\n  padding: 0;\n  outline: none;\n}\n\n.file-remove:hover {\n  color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-soft);\n}\n\n.file-remove:focus-visible {\n  box-shadow: 0 0 0 2px var(--ty-color-danger);\n}\n\n.file-remove svg {\n  width: 12px;\n  height: 12px;\n}\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 4px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .drop-zone,\n  .upload-icon,\n  .file-remove {\n    transition: none;\n  }\n}\n\n@media (prefers-contrast: high) {\n  .drop-zone {\n    border-width: 3px;\n  }\n}\n";

package/lib/styles/file-upload.js

@@ -54,7 +54,7 @@ box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);
 .drop-zone.drag-active {
 border-color: var(--ty-color-primary);
 border-style: solid;
-background: var(--ty-bg-primary-);
+background: var(--ty-bg-primary-soft);
 }
 .drop-zone.drag-active .upload-icon {
 color: var(--ty-color-primary);
@@ -73,7 +73,7 @@ pointer-events: none;
 border-color: var(--ty-color-danger);
 }
 .drop-zone.error:not(.disabled) {
-background: var(--ty-bg-danger-);
+background: var(--ty-bg-danger-soft);
 }
 .upload-icon {
 color: var(--ty-text-faint);
@@ -165,7 +165,7 @@ outline: none;
 }
 .file-remove:hover {
 color: var(--ty-color-danger);
-background: var(--ty-bg-danger-);
+background: var(--ty-bg-danger-soft);
 }
 .file-remove:focus-visible {
 box-shadow: 0 0 0 2px var(--ty-color-danger);

package/lib/styles/icon.d.ts

@@ -1,2 +1,2 @@
 /** Icon Component Styles */
-export declare const iconStyles = "\n:host {\n  /* Display & Layout - CRITICAL: No containment to prevent paint deferral */\n  /* Block-level flex, NOT inline-flex: as an inline box the icon generates a\n     line box in its parent, so a shrink-wrapping wrapper (badge, .rounded-full\n     chip) inherits the parent's line-height strut and renders taller than wide\n     \u2014 a 12px icon in a 24px-line-height badge becomes a 22x34 oval. To place an\n     icon inline with text, make the *text wrapper* inline-flex instead. */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 0;\n  \n  width: var(--ty-icon-size, 1em);\n  height: var(--ty-icon-size, 1em);\n  \n  aspect-ratio: 1 / 1;\n  \n  \n  color: inherit;\n  transition: color var(--ty-transition-fast);\n  \n  flex-shrink: 0;\n  \n  /* Visibility - Force immediate rendering */\n  visibility: visible !important;\n  opacity: 1;\n  \n  /* ANTI-FLICKER: Force browser to paint immediately */\n  will-change: contents;\n  \n  /* Prevent any sub-pixel rendering issues */\n  transform: translateZ(0);\n  -webkit-font-smoothing: antialiased;\n}\n\n/* The SVG element inside shadow DOM (registry / fallback path) */\n:host svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n\n  /* Force immediate SVG rendering */\n  will-change: auto;\n  transform: translateZ(0);\n}\n\n/* Slotted SVG (server-side path: <ty-icon><svg>...</svg></ty-icon>).\n   ::slotted() targets light-DOM children so they fill the host the same way\n   shadow-DOM SVG does. Color is inherited from :host via currentColor. */\n::slotted(svg),\n::slotted(img) {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n/* In a named slot the icon sits alongside text (button start/end), so inline\n   layout is what the host expects there. */\n:host([slot]) {\n  display: inline-flex;\n}\n\n:host(.icon-xs) {\n  width: 0.75em;\n  height: 0.75em;\n}\n\n:host(.icon-sm) {\n  width: 0.875em;\n  height: 0.875em;\n}\n\n:host(.icon-md) {\n  width: 1em;\n  height: 1em;\n}\n\n:host(.icon-lg) {\n  width: 1.25em;\n  height: 1.25em;\n}\n\n:host(.icon-xl) {\n  width: 1.5em;\n  height: 1.5em;\n}\n\n:host(.icon-2xl) {\n  width: 2em;\n  height: 2em;\n}\n\n/* Fixed pixel sizes */\n:host(.icon-12) {\n  width: 12px;\n  height: 12px;\n}\n\n:host(.icon-14) {\n  width: 14px;\n  height: 14px;\n}\n\n:host(.icon-16) {\n  width: 16px;\n  height: 16px;\n}\n\n:host(.icon-18) {\n  width: 18px;\n  height: 18px;\n}\n\n:host(.icon-20) {\n  width: 20px;\n  height: 20px;\n}\n\n:host(.icon-24) {\n  width: 24px;\n  height: 24px;\n}\n\n:host(.icon-32) {\n  width: 32px;\n  height: 32px;\n}\n\n:host(.icon-48) {\n  width: 48px;\n  height: 48px;\n}\n\n:host(.icon-64) {\n  width: 64px;\n  height: 64px;\n}\n\n:host(.icon-80) {\n  width: 80px;\n  height: 80px;\n}\n\n:host(.icon-96) {\n  width: 96px;\n  height: 96px;\n}\n\n:host(.icon-spin) {\n  animation: icon-spin 1s linear infinite;\n}\n\n:host(.icon-spin.icon-tempo-slow) {\n  animation: icon-spin 2s linear infinite;\n}\n\n:host(.icon-spin.icon-tempo-fast) {\n  animation: icon-spin 0.5s linear infinite;\n}\n\n@keyframes icon-spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n:host(.icon-pulse) {\n  animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host(.icon-pulse.icon-tempo-slow) {\n  animation: icon-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host(.icon-pulse.icon-tempo-fast) {\n  animation: icon-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes icon-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Accessibility: ensure icons are not announced by screen readers by default */\n:host {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(:not(.icon-clickable)) {\n  pointer-events: none;\n}\n\n:host(.icon-clickable) {\n  cursor: pointer;\n  pointer-events: auto;\n  transition: color var(--ty-transition-fast), transform var(--ty-transition-fast);\n}\n\n:host(.icon-clickable:hover) {\n  transform: scale(1.1);\n}\n\n:host(.icon-clickable:active) {\n  transform: scale(0.95);\n}\n\n:host(.icon-disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:host(.icon-block) {\n  display: block;\n}\n";
+export declare const iconStyles = "\n:host {\n  /* Display & Layout - CRITICAL: No containment to prevent paint deferral */\n  /* Block-level flex, NOT inline-flex: as an inline box the icon generates a\n     line box in its parent, so a shrink-wrapping wrapper (badge, .rounded-full\n     chip) inherits the parent's line-height strut and renders taller than wide\n     \u2014 a 12px icon in a 24px-line-height badge becomes a 22x34 oval. To place an\n     icon inline with text, make the *text wrapper* inline-flex instead. */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 0;\n  \n  width: var(--ty-icon-size, 1em);\n  height: var(--ty-icon-size, 1em);\n  \n  aspect-ratio: 1 / 1;\n  \n  \n  color: inherit;\n  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  \n  flex-shrink: 0;\n  \n  /* Visibility - Force immediate rendering */\n  visibility: visible !important;\n  opacity: 1;\n  \n  /* ANTI-FLICKER: Force browser to paint immediately */\n  will-change: contents;\n  \n  /* Prevent any sub-pixel rendering issues */\n  transform: translateZ(0);\n  -webkit-font-smoothing: antialiased;\n}\n\n/* The SVG element inside shadow DOM (registry / fallback path) */\n:host svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n\n  /* Force immediate SVG rendering */\n  will-change: auto;\n  transform: translateZ(0);\n}\n\n/* Slotted SVG (server-side path: <ty-icon><svg>...</svg></ty-icon>).\n   ::slotted() targets light-DOM children so they fill the host the same way\n   shadow-DOM SVG does. Color is inherited from :host via currentColor. */\n::slotted(svg),\n::slotted(img) {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n/* In a named slot the icon sits alongside text (button start/end), so inline\n   layout is what the host expects there. */\n:host([slot]) {\n  display: inline-flex;\n}\n\n:host(.icon-xs) {\n  width: 0.75em;\n  height: 0.75em;\n}\n\n:host(.icon-sm) {\n  width: 0.875em;\n  height: 0.875em;\n}\n\n:host(.icon-md) {\n  width: 1em;\n  height: 1em;\n}\n\n:host(.icon-lg) {\n  width: 1.25em;\n  height: 1.25em;\n}\n\n:host(.icon-xl) {\n  width: 1.5em;\n  height: 1.5em;\n}\n\n:host(.icon-2xl) {\n  width: 2em;\n  height: 2em;\n}\n\n/* Fixed pixel sizes */\n:host(.icon-12) {\n  width: 12px;\n  height: 12px;\n}\n\n:host(.icon-14) {\n  width: 14px;\n  height: 14px;\n}\n\n:host(.icon-16) {\n  width: 16px;\n  height: 16px;\n}\n\n:host(.icon-18) {\n  width: 18px;\n  height: 18px;\n}\n\n:host(.icon-20) {\n  width: 20px;\n  height: 20px;\n}\n\n:host(.icon-24) {\n  width: 24px;\n  height: 24px;\n}\n\n:host(.icon-32) {\n  width: 32px;\n  height: 32px;\n}\n\n:host(.icon-48) {\n  width: 48px;\n  height: 48px;\n}\n\n:host(.icon-64) {\n  width: 64px;\n  height: 64px;\n}\n\n:host(.icon-80) {\n  width: 80px;\n  height: 80px;\n}\n\n:host(.icon-96) {\n  width: 96px;\n  height: 96px;\n}\n\n:host(.icon-spin) {\n  animation: icon-spin 1s linear infinite;\n}\n\n:host(.icon-spin.icon-tempo-slow) {\n  animation: icon-spin 2s linear infinite;\n}\n\n:host(.icon-spin.icon-tempo-fast) {\n  animation: icon-spin 0.5s linear infinite;\n}\n\n@keyframes icon-spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n:host(.icon-pulse) {\n  animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host(.icon-pulse.icon-tempo-slow) {\n  animation: icon-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n:host(.icon-pulse.icon-tempo-fast) {\n  animation: icon-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes icon-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Accessibility: ensure icons are not announced by screen readers by default */\n:host {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(:not(.icon-clickable)) {\n  pointer-events: none;\n}\n\n:host(.icon-clickable) {\n  cursor: pointer;\n  pointer-events: auto;\n  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n:host(.icon-clickable:hover) {\n  transform: scale(1.1);\n}\n\n:host(.icon-clickable:active) {\n  transform: scale(0.95);\n}\n\n:host(.icon-disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:host(.icon-block) {\n  display: block;\n}\n";

package/lib/styles/icon.js

@@ -8,7 +8,7 @@ width: var(--ty-icon-size, 1em);
 height: var(--ty-icon-size, 1em);
 aspect-ratio: 1 / 1;
 color: inherit;
-transition: color var(--ty-transition-fast);
+transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
 flex-shrink: 0;
 visibility: visible !important;
 opacity: 1;
@@ -145,7 +145,7 @@ pointer-events: none;
 :host(.icon-clickable) {
 cursor: pointer;
 pointer-events: auto;
-transition: color var(--ty-transition-fast), transform var(--ty-transition-fast);
+transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 :host(.icon-clickable:hover) {
 transform: scale(1.1);

package/lib/styles/input.js

@@ -96,7 +96,7 @@ display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
-color: var(--ty-color-text-soft);
+color: var(--ty-text-soft);
 }
 .password-toggle {
 display: flex;

package/lib/styles/radio.js

@@ -27,13 +27,13 @@ display: flex;
 flex-direction: column;
 gap: 0.4rem;
 font-family: inherit;
-color: var(--ty-color-text);
+color: var(--ty-text);
 }
 .radio-group-label {
 font-size: var(--ty-font-sm);
 line-height: var(--ty-leading-sm);
 font-weight: var(--ty-font-medium);
-color: var(--ty-color-text);
+color: var(--ty-text);
 display: flex;
 align-items: center;
 gap: 0.25rem;

package/lib/utils/property-manager.d.ts

@@ -29,6 +29,12 @@ export interface PropertyChange {
 /**
  * Manages component properties with unified lifecycle
  */
+/**
+ * Boolean coercion for a property set from JS, HTML-style: '' (what React 19
+ * and Vue hand a property for a bare attribute) is true; false, null,
+ * undefined, 0, 'false' and '0' are false.
+ */
+export declare function coerceBoolean(value: unknown): boolean;
 export declare class PropertyManager<T = any> {
     private _props;
     private _config;

package/lib/utils/property-manager.js

@@ -1,3 +1,13 @@
+export function coerceBoolean(value) {
+if (typeof value === 'string') {
+const normalized = value.toLowerCase().trim();
+return normalized !== 'false' && normalized !== '0';
+}
+return Boolean(value);
+}
+function defaultOf(config) {
+return typeof config.default === 'function' ? config.default() : config.default;
+}
 export class PropertyManager {
 constructor(config) {
 this._props = new Map();
@@ -7,7 +17,7 @@ this._initializeDefaults();
 _initializeDefaults() {
 for (const [name, config] of Object.entries(this._config)) {
 if (config.default !== undefined) {
-this._props.set(name, config.default);
+this._props.set(name, defaultOf(config));
 }
 }
 }
@@ -43,7 +53,7 @@ if (config.coerce) {
 return config.coerce(value);
 }
 if (value === null || value === undefined) {
-return config.default ?? null;
+return defaultOf(config) ?? null;
 }
 switch (config.type) {
 case 'boolean':
@@ -58,7 +68,7 @@ return true;
 return Boolean(value);
 case 'number':
 const num = Number(value);
-return isNaN(num) ? (config.default ?? 0) : num;
+return isNaN(num) ? (defaultOf(config) ?? 0) : num;
 case 'string':
 return String(value);
 case 'object':
@@ -69,7 +79,7 @@ return JSON.parse(value);
 }
 catch {
 console.warn(`[PropertyManager] Failed to parse ${name}:`, value);
-return config.default ?? (config.type === 'array' ? [] : {});
+return defaultOf(config) ?? (config.type === 'array' ? [] : {});
 }
 }
 return value;
@@ -119,7 +129,7 @@ handleAlias(aliasName, value) {
 for (const [propName, config] of Object.entries(this._config)) {
 if (config.aliases && aliasName in config.aliases) {
 if (value === null)
-return this.updateProperty(propName, config.default, 'attribute');
+return this.updateProperty(propName, defaultOf(config), 'attribute');
 const aliasedValue = config.aliases[aliasName];
 return this.updateProperty(propName, aliasedValue, 'attribute');
 }

package/lib/utils/validity.d.ts

@@ -9,6 +9,12 @@
  * reportValidity() uses the component's own `error` display when it has one
  * (ty-input, ty-textarea, ty-radio-group, ty-file-upload) instead of the
  * browser's bubble, and clears that message again once the field is valid.
+ * Whenever the browser fires `invalid` on such a field — a submit attempt,
+ * form.reportValidity(), or checkValidity() on the field or its form — the
+ * message goes into that error line (no bubble), so a plain <form> needs no
+ * JS. For a check that shows nothing, read `field.validity.valid` or
+ * `form.matches(':invalid')`. Only a real submit (a submitter click, or
+ * Enter) also moves focus to the first failing field.
  */
 export declare class ValidityController {
     private host;
@@ -18,6 +24,12 @@ export declare class ValidityController {
     /** `error` was written by reportValidity(), so it's ours to clear. */
     private errorFromReport;
     constructor(host: HTMLElement, internals: ElementInternals);
+    /**
+     * Show the current message, if any, in the error display (on blur after an
+     * edit). While a pointer is pressed it waits until after pointerup.
+     */
+    reveal(): void;
+    private showError;
     /** The component's own validity (replaces the previous one). */
     set(flags: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;
     setCustom(message: string): void;

package/lib/utils/validity.js

@@ -1,3 +1,43 @@
+let submitAttempt = false;
+let pointerPressed = false;
+const pendingReveals = new Set();
+let documentWatched = false;
+function watchDocument() {
+if (documentWatched)
+return;
+documentWatched = true;
+const mark = () => {
+submitAttempt = true;
+setTimeout(() => { submitAttempt = false; });
+};
+document.addEventListener('click', (e) => {
+const submitter = e.target?.closest?.('button:not([type=button]):not([type=reset]), input[type=submit], input[type=image], ' +
+'ty-button:not([type=button]):not([type=reset])');
+if (submitter)
+mark();
+}, true);
+document.addEventListener('keydown', (e) => {
+if (e.key === 'Enter')
+mark();
+}, true);
+document.addEventListener('pointerdown', () => { pointerPressed = true; }, true);
+const release = () => {
+pointerPressed = false;
+if (pendingReveals.size === 0)
+return;
+const waiting = [...pendingReveals];
+pendingReveals.clear();
+setTimeout(() => waiting.forEach((c) => c.reveal()));
+};
+document.addEventListener('pointerup', release, true);
+document.addEventListener('pointercancel', release, true);
+}
+function firstInvalid(form) {
+return Array.from(form.elements).find((el) => {
+const v = el.validity;
+return v && !v.valid && !el.disabled;
+});
+}
 export class ValidityController {
 constructor(host, internals) {
 this.host = host;
@@ -5,6 +45,30 @@ this.internals = internals;
 this.own = { flags: {} };
 this.custom = '';
 this.errorFromReport = false;
+watchDocument();
+host.addEventListener('invalid', (e) => {
+if (!('error' in host))
+return;
+e.preventDefault();
+this.showError();
+if (!submitAttempt)
+return;
+const form = this.internals.form;
+if (!form || firstInvalid(form) === host)
+host.focus();
+});
+}
+reveal() {
+if (pointerPressed) {
+pendingReveals.add(this);
+return;
+}
+if ('error' in this.host && !this.internals.validity.valid)
+this.showError();
+}
+showError() {
+this.host.setAttribute('error', this.internals.validationMessage);
+this.errorFromReport = true;
 }
 set(flags, message, anchor) {
 this.own = { flags, message, anchor };
@@ -19,8 +83,7 @@ const valid = this.internals.checkValidity();
 if (valid)
 return true;
 if ('error' in this.host) {
-this.host.setAttribute('error', this.internals.validationMessage);
-this.errorFromReport = true;
+this.showError();
 this.host.focus();
 }
 else {

package/lib/version.d.ts

@@ -4,4 +4,4 @@
  * This is automatically synced with package.json during build.
  * Use `npm version` to bump versions.
  */
-export declare const VERSION = "1.0.0-TC56";
+export declare const VERSION = "1.0.0-TC57";

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '1.0.0-TC56';
+export const VERSION = '1.0.0-TC57';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tyrell-components",
-  "version": "1.0.0-TC56",
+  "version": "1.0.0-TC57",
   "description": "Tyrell Components - Framework-agnostic web components with semantic design system",
   "type": "module",
   "sideEffects": [
@@ -183,7 +183,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/gersak/tyrell.git",
+    "url": "git+https://github.com/gersak/tyrell.git",
     "directory": "packages/core"
   },
   "homepage": "https://gersak.github.io/tyrell/",