tyrell-components 1.0.0-TC56 → 1.0.0-TC58

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

@@ -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;
@@ -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/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/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;
 }

package/lib/styles/textarea.d.ts

@@ -2,4 +2,4 @@
  * Styles for ty-textarea component
  * Enhanced textarea with auto-resize functionality
  */
-export declare const textareaStyles = "\n\n:host {\n  --ty-field-height: var(--ty-size-sm, 2rem);\n  --ty-field-pad-x: 10px;\n  --ty-field-font: var(--ty-font-sm);\n  --ty-field-leading: 20px;\n  --ty-field-tracking: var(--ty-tracking-sm);\n  --ty-field-label-font: var(--ty-font-xs);\n  --ty-field-label-leading: var(--ty-leading-xs);\n  --ty-field-label-gap: 5px;\n  /* Text that sits OUTSIDE the field box (label, error message) has to line up\n     with the value INSIDE it. The value is inset by the wrapper's 1px border\n     plus --ty-field-pad-x; outside text only ever cleared the padding, so it\n     started exactly 1px to the left of the value it labelled \u2014 at every rung,\n     on every field. Resolved per rung: the calc reads whichever --ty-field-pad-x\n     is winning on the host. */\n  --ty-field-outer-pad-x: calc(var(--ty-field-pad-x) + 1px);\n  --ty-field-control: 24px;\n  --ty-field-icon: 16px;\n}\n\n:host([size=\"xs\"]) {\n  --ty-field-height: var(--ty-size-xs, 1.75rem);\n  --ty-field-pad-x: 8px;\n  --ty-field-font: var(--ty-font-xs);\n  --ty-field-leading: 16px;\n  --ty-field-tracking: var(--ty-tracking-xs);\n  --ty-field-label-font: var(--ty-font-xs);\n  --ty-field-label-leading: var(--ty-leading-xs);\n  --ty-field-label-gap: 4px;\n  --ty-field-control: 20px;\n  --ty-field-icon: 14px;\n}\n\n:host([size=\"md\"]) {\n  --ty-field-height: var(--ty-size-md, 2.25rem);\n  --ty-field-pad-x: 12px;\n  --ty-field-font: var(--ty-font-sm);\n  --ty-field-leading: 20px;\n  --ty-field-tracking: var(--ty-tracking-sm);\n  --ty-field-label-font: var(--ty-font-sm);\n  --ty-field-label-leading: var(--ty-leading-sm);\n  --ty-field-label-gap: 6px;\n  --ty-field-control: 28px;\n  --ty-field-icon: 18px;\n}\n\n:host([size=\"lg\"]) {\n  --ty-field-height: var(--ty-size-lg, 2.5rem);\n  --ty-field-pad-x: 14px;\n  --ty-field-font: var(--ty-font-base);\n  --ty-field-leading: 24px;\n  --ty-field-tracking: var(--ty-tracking-base);\n  --ty-field-label-font: var(--ty-font-sm);\n  --ty-field-label-leading: var(--ty-leading-sm);\n  --ty-field-label-gap: 6px;\n  --ty-field-control: 32px;\n  --ty-field-icon: 20px;\n}\n\n:host([size=\"xl\"]) {\n  --ty-field-height: var(--ty-size-xl, 2.75rem);\n  --ty-field-pad-x: 16px;\n  --ty-field-font: var(--ty-font-lg);\n  --ty-field-leading: 28px;\n  --ty-field-tracking: var(--ty-tracking-base);\n  --ty-field-label-font: var(--ty-font-base);\n  --ty-field-label-leading: var(--ty-leading-base);\n  --ty-field-label-gap: 8px;\n  --ty-field-control: 36px;\n  --ty-field-icon: 22px;\n}\n\n/* Narrow viewports drop the two biggest rungs one step \u2014 same ladder, no\n   component-specific overrides.\n\n   A stepped-down rung must carry the WHOLE rung: --ty-field-control is the\n   in-field button box (ty-copy's copy button, the date-picker's icon), and it\n   sets the wrapper's content height. Leave it at the original rung and the\n   field ends up taller than --ty-field-height \u2014 the ladder silently breaks on\n   exactly one component. */\n@media (max-width: 640px) {\n  :host([size=\"lg\"]) {\n    --ty-field-height: var(--ty-size-md, 2.25rem);\n    --ty-field-pad-x: 12px;\n    --ty-field-font: var(--ty-font-sm);\n    --ty-field-leading: 20px;\n    --ty-field-control: 28px;\n    --ty-field-icon: 18px;\n  }\n\n  :host([size=\"xl\"]) {\n    --ty-field-height: var(--ty-size-lg, 2.5rem);\n    --ty-field-pad-x: 14px;\n    --ty-field-font: var(--ty-font-base);\n    --ty-field-leading: 24px;\n    --ty-field-control: 32px;\n    --ty-field-icon: 20px;\n  }\n}\n\n@media (max-width: 480px) {\n  :host([size=\"xl\"]) {\n    --ty-field-height: var(--ty-size-md, 2.25rem);\n    --ty-field-pad-x: 12px;\n    --ty-field-font: var(--ty-font-sm);\n    --ty-field-leading: 20px;\n    --ty-field-control: 28px;\n    --ty-field-icon: 18px;\n  }\n}\n\n:host {\n  display: block;\n  font-family: inherit;\n  width: 100%;\n}\n\n.textarea-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n  /* For absolute positioned dummy element */\n}\n\n/* Bordered container \u2014 owns the border + active state (composer layout):\n   header (top slot) \u00B7 textarea (borderless) \u00B7 footer (bottom slot). */\n.textarea-wrapper {\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-base);\n  background: var(--input-bg, var(--ty-input-bg));\n  transition: var(--ty-local-transition, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out);\n}\n\n/* Active ring tied to the TEXTAREA specifically (not :focus-within) so tabbing\n   to a footer button doesn't make the whole field look focused. */\n.textarea-wrapper:has(textarea:focus) {\n  border-color: var(--input-border-focus, var(--ty-input-border-focus));\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* Error + disabled reflected from the inner textarea (both in shadow DOM, so\n   :has is reliable here \u2014 unlike slotted content). */\n.textarea-wrapper:has(textarea.error) {\n  border-color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-soft);\n}\n.textarea-wrapper:has(textarea.error):has(textarea:focus) {\n  border-color: var(--ty-color-danger-bold);\n}\n.textarea-wrapper:has(textarea:disabled) {\n  opacity: 0.5;\n  background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n}\n\n/* Scroll region wraps just the textarea so the custom scrollbar never overlaps\n   the header/footer. */\n.textarea-scroll {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n}\n\n/* Custom scrollbar track positioned to the scroll region (textarea edges) */\n.textarea-scroll .ty-scrollbar-track-y {\n  top: 2px;\n  right: 2px;\n  bottom: 2px;\n  border-radius: 0 4px 4px 0;\n}\n\n/* Header / footer slot regions \u2014 zero footprint until they have content\n   (the component toggles .has-content via slotchange). footer defaults to\n   space-between so \"tools \u2026 submit\" works; a single wide button fills it. */\n.textarea-header,\n.textarea-footer {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.textarea-footer { justify-content: space-between; }\n.textarea-header.has-content {\n  padding: 6px 10px;\n  border-bottom: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));\n}\n.textarea-footer.has-content {\n  padding: 6px 10px;\n  border-top: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));\n}\n\n.ty-field-label {\n  font-size: var(--ty-field-label-font);\n  line-height: var(--ty-field-label-leading);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: var(--ty-field-label-gap);\n  padding-left: var(--ty-field-outer-pad-x);\n}\n\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--ty-color-danger);\n  width: 12px;\n  height: 12px;\n  vertical-align: middle;\n}\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: var(--ty-field-outer-pad-x);\n}\n\n/* Error state is reflected on .textarea-wrapper (see above). */\n\ntextarea {\n  font-family: inherit;\n  /* Borderless \u2014 the .textarea-wrapper owns the border/background now. */\n  box-sizing: border-box;\n  width: 100%;\n  flex: 1 1 auto;\n  border: none;\n  background: transparent;\n  color: var(--input-color, var(--ty-input-color));\n  font-family: inherit;\n  /* Linear-paired typography */\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-normal);\n  outline: none;\n\n  min-height: 80px;\n  padding: 12px 12px;\n\n  overflow: hidden;\n  /* Hide scrollbars since we're auto-resizing */\n  resize: none;\n\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n\n/* Hide native scrollbar for webkit when custom scrollbar is active\n   (scrollbar-width: none handles Firefox; this handles Chrome/Safari) */\n:host([data-custom-scroll]) textarea::-webkit-scrollbar {\n  display: none;\n}\n\n/* Disabled \u2014 visual state lives on the wrapper; just the cursor/text here. */\ntextarea:disabled {\n  cursor: not-allowed;\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\ntextarea::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: 400;\n}\n\ntextarea.resize-both {\n  resize: both;\n}\n\ntextarea.resize-horizontal {\n  resize: horizontal;\n}\n\ntextarea.resize-vertical {\n  resize: vertical;\n}\n\ntextarea.resize-none {\n  resize: none;\n}\n\n/* Auto-resize mode (default) disables manual resize */\ntextarea:not(.resize-both):not(.resize-horizontal):not(.resize-vertical) {\n  resize: none;\n}\n\n.textarea-dummy {\n  /* Hidden element that measures text height */\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  visibility: hidden !important;\n  white-space: pre-wrap !important;\n  word-break: break-word !important;\n  box-sizing: border-box !important;\n  overflow: hidden !important;\n  pointer-events: none !important;\n  z-index: -1 !important;\n\n  word-wrap: break-word !important;\n  overflow-wrap: break-word !important;\n}\n\ntextarea.xs {\n  min-height: 64px;\n  padding: 8px var(--ty-field-pad-x);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n}\n\ntextarea.sm {\n  min-height: 72px;\n  padding: 10px var(--ty-field-pad-x);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\ntextarea.md {\n  min-height: 80px;\n  padding: 12px var(--ty-field-pad-x);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\ntextarea.lg {\n  min-height: 96px;\n  padding: 14px var(--ty-field-pad-x);\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n}\n\ntextarea.xl {\n  min-height: 112px;\n  padding: 16px var(--ty-field-pad-x);\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n}\n\ntextarea:focus-visible {\n  outline: none;\n  /* We use box-shadow instead */\n}\n\n@media (prefers-contrast: high) {\n  textarea {\n    border-width: 2px;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  textarea {\n    transition: none;\n  }\n\n  .textarea-dummy {\n    transition: none;\n  }\n}\n\n@container (max-width: 480px) {\n  textarea.lg {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px var(--ty-field-pad-x);\n    min-height: 80px;\n  }\n\n  textarea.xl {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n    padding: 14px var(--ty-field-pad-x);\n    min-height: 96px;\n  }\n}\n\n@container (max-width: 320px) {\n  textarea.xl {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px var(--ty-field-pad-x);\n    min-height: 80px;\n  }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n  textarea.lg {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px var(--ty-field-pad-x);\n    min-height: 80px;\n  }\n\n  textarea.xl {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n    padding: 14px var(--ty-field-pad-x);\n    min-height: 96px;\n  }\n}\n\n@media (max-width: 480px) {\n  textarea.xl {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px var(--ty-field-pad-x);\n    min-height: 80px;\n  }\n}\n\ntextarea {\n  transition: var(--ty-local-transition,\n    border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out,\n    background-color 0.15s ease-in-out,\n    height 0.1s ease-out);\n}\n\n/* Disable height transition on focus to avoid jarring effect */\ntextarea:focus {\n  transition: var(--ty-local-transition,\n    border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out,\n    background-color 0.15s ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  textarea {\n    transition: none;\n  }\n}\n";
+export declare const textareaStyles = "\n\n:host {\n  --ty-field-height: var(--ty-size-sm, 2rem);\n  --ty-field-pad-x: 10px;\n  --ty-field-font: var(--ty-font-sm);\n  --ty-field-leading: 20px;\n  --ty-field-tracking: var(--ty-tracking-sm);\n  --ty-field-label-font: var(--ty-font-xs);\n  --ty-field-label-leading: var(--ty-leading-xs);\n  --ty-field-label-gap: 5px;\n  /* Text that sits OUTSIDE the field box (label, error message) has to line up\n     with the value INSIDE it. The value is inset by the wrapper's 1px border\n     plus --ty-field-pad-x; outside text only ever cleared the padding, so it\n     started exactly 1px to the left of the value it labelled \u2014 at every rung,\n     on every field. Resolved per rung: the calc reads whichever --ty-field-pad-x\n     is winning on the host. */\n  --ty-field-outer-pad-x: calc(var(--ty-field-pad-x) + 1px);\n  --ty-field-control: 24px;\n  --ty-field-icon: 16px;\n}\n\n:host([size=\"xs\"]) {\n  --ty-field-height: var(--ty-size-xs, 1.75rem);\n  --ty-field-pad-x: 8px;\n  --ty-field-font: var(--ty-font-xs);\n  --ty-field-leading: 16px;\n  --ty-field-tracking: var(--ty-tracking-xs);\n  --ty-field-label-font: var(--ty-font-xs);\n  --ty-field-label-leading: var(--ty-leading-xs);\n  --ty-field-label-gap: 4px;\n  --ty-field-control: 20px;\n  --ty-field-icon: 14px;\n}\n\n:host([size=\"md\"]) {\n  --ty-field-height: var(--ty-size-md, 2.25rem);\n  --ty-field-pad-x: 12px;\n  --ty-field-font: var(--ty-font-sm);\n  --ty-field-leading: 20px;\n  --ty-field-tracking: var(--ty-tracking-sm);\n  --ty-field-label-font: var(--ty-font-sm);\n  --ty-field-label-leading: var(--ty-leading-sm);\n  --ty-field-label-gap: 6px;\n  --ty-field-control: 28px;\n  --ty-field-icon: 18px;\n}\n\n:host([size=\"lg\"]) {\n  --ty-field-height: var(--ty-size-lg, 2.5rem);\n  --ty-field-pad-x: 14px;\n  --ty-field-font: var(--ty-font-base);\n  --ty-field-leading: 24px;\n  --ty-field-tracking: var(--ty-tracking-base);\n  --ty-field-label-font: var(--ty-font-sm);\n  --ty-field-label-leading: var(--ty-leading-sm);\n  --ty-field-label-gap: 6px;\n  --ty-field-control: 32px;\n  --ty-field-icon: 20px;\n}\n\n:host([size=\"xl\"]) {\n  --ty-field-height: var(--ty-size-xl, 2.75rem);\n  --ty-field-pad-x: 16px;\n  --ty-field-font: var(--ty-font-lg);\n  --ty-field-leading: 28px;\n  --ty-field-tracking: var(--ty-tracking-base);\n  --ty-field-label-font: var(--ty-font-base);\n  --ty-field-label-leading: var(--ty-leading-base);\n  --ty-field-label-gap: 8px;\n  --ty-field-control: 36px;\n  --ty-field-icon: 22px;\n}\n\n/* Narrow viewports drop the two biggest rungs one step \u2014 same ladder, no\n   component-specific overrides.\n\n   A stepped-down rung must carry the WHOLE rung: --ty-field-control is the\n   in-field button box (ty-copy's copy button, the date-picker's icon), and it\n   sets the wrapper's content height. Leave it at the original rung and the\n   field ends up taller than --ty-field-height \u2014 the ladder silently breaks on\n   exactly one component. */\n@media (max-width: 640px) {\n  :host([size=\"lg\"]) {\n    --ty-field-height: var(--ty-size-md, 2.25rem);\n    --ty-field-pad-x: 12px;\n    --ty-field-font: var(--ty-font-sm);\n    --ty-field-leading: 20px;\n    --ty-field-control: 28px;\n    --ty-field-icon: 18px;\n  }\n\n  :host([size=\"xl\"]) {\n    --ty-field-height: var(--ty-size-lg, 2.5rem);\n    --ty-field-pad-x: 14px;\n    --ty-field-font: var(--ty-font-base);\n    --ty-field-leading: 24px;\n    --ty-field-control: 32px;\n    --ty-field-icon: 20px;\n  }\n}\n\n@media (max-width: 480px) {\n  :host([size=\"xl\"]) {\n    --ty-field-height: var(--ty-size-md, 2.25rem);\n    --ty-field-pad-x: 12px;\n    --ty-field-font: var(--ty-font-sm);\n    --ty-field-leading: 20px;\n    --ty-field-control: 28px;\n    --ty-field-icon: 18px;\n  }\n}\n\n:host {\n  display: block;\n  font-family: inherit;\n  width: 100%;\n}\n\n.textarea-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n  /* For absolute positioned dummy element */\n}\n\n/* Bordered container \u2014 owns the border + active state (composer layout):\n   header (top slot) \u00B7 textarea (borderless) \u00B7 footer (bottom slot). */\n.textarea-wrapper {\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-base);\n  background: var(--input-bg, var(--ty-input-bg));\n  transition: var(--ty-local-transition, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out);\n}\n\n/* Active ring tied to the TEXTAREA specifically (not :focus-within) so tabbing\n   to a footer button doesn't make the whole field look focused. */\n.textarea-wrapper:has(textarea:focus) {\n  border-color: var(--input-border-focus, var(--ty-input-border-focus));\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* Error + disabled reflected from the inner textarea (both in shadow DOM, so\n   :has is reliable here \u2014 unlike slotted content). */\n.textarea-wrapper:has(textarea.error) {\n  border-color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-soft);\n}\n.textarea-wrapper:has(textarea.error):has(textarea:focus) {\n  border-color: var(--ty-color-danger-bold);\n}\n.textarea-wrapper:has(textarea:disabled) {\n  opacity: 0.5;\n  background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n}\n\n/* Scroll region wraps just the textarea so the custom scrollbar never overlaps\n   the header/footer. */\n.textarea-scroll {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n}\n\n/* Custom scrollbar track positioned to the scroll region (textarea edges) */\n.textarea-scroll .ty-scrollbar-track-y {\n  top: 2px;\n  right: 2px;\n  bottom: 2px;\n  border-radius: 0 4px 4px 0;\n}\n\n/* Header / footer slot regions \u2014 zero footprint until they have content\n   (the component toggles .has-content via slotchange). footer defaults to\n   space-between so \"tools \u2026 submit\" works; a single wide button fills it. */\n.textarea-header,\n.textarea-footer {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.textarea-footer { justify-content: space-between; }\n.textarea-header.has-content {\n  padding: 6px 10px;\n  border-bottom: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));\n}\n.textarea-footer.has-content {\n  padding: 6px 10px;\n  border-top: 1px solid var(--ty-textarea-divider, var(--input-border, var(--ty-input-border)));\n}\n\n.ty-field-label {\n  font-size: var(--ty-field-label-font);\n  line-height: var(--ty-field-label-leading);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: var(--ty-field-label-gap);\n  padding-left: var(--ty-field-outer-pad-x);\n  display: flex;\n  align-items: center;\n}\n\n/* Required marker \u2014 same as ty-input's (styles/input.ts). */\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--ty-color-danger);\n  width: 12px;\n  height: 12px;\n  margin-left: 4px;\n  vertical-align: middle;\n}\n\n.required-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: var(--ty-field-outer-pad-x);\n}\n\n/* Error state is reflected on .textarea-wrapper (see above). */\n\ntextarea {\n  font-family: inherit;\n  /* Borderless \u2014 the .textarea-wrapper owns the border/background now. */\n  box-sizing: border-box;\n  width: 100%;\n  flex: 1 1 auto;\n  border: none;\n  background: transparent;\n  color: var(--input-color, var(--ty-input-color));\n  font-family: inherit;\n  /* Linear-paired typography */\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-normal);\n  outline: none;\n\n  min-height: 80px;\n  padding: 12px 12px;\n\n  overflow: hidden;\n  /* Hide scrollbars since we're auto-resizing */\n  resize: none;\n\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n\n/* Hide native scrollbar for webkit when custom scrollbar is active\n   (scrollbar-width: none handles Firefox; this handles Chrome/Safari) */\n:host([data-custom-scroll]) textarea::-webkit-scrollbar {\n  display: none;\n}\n\n/* Disabled \u2014 visual state lives on the wrapper; just the cursor/text here. */\ntextarea:disabled {\n  cursor: not-allowed;\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\ntextarea::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: 400;\n}\n\ntextarea.resize-both {\n  resize: both;\n}\n\ntextarea.resize-horizontal {\n  resize: horizontal;\n}\n\ntextarea.resize-vertical {\n  resize: vertical;\n}\n\ntextarea.resize-none {\n  resize: none;\n}\n\n/* Auto-resize mode (default) disables manual resize */\ntextarea:not(.resize-both):not(.resize-horizontal):not(.resize-vertical) {\n  resize: none;\n}\n\n.textarea-dummy {\n  /* Hidden element that measures text height */\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  visibility: hidden !important;\n  white-space: pre-wrap !important;\n  word-break: break-word !important;\n  box-sizing: border-box !important;\n  overflow: hidden !important;\n  pointer-events: none !important;\n  z-index: -1 !important;\n\n  word-wrap: break-word !important;\n  overflow-wrap: break-word !important;\n}\n\ntextarea.xs {\n  min-height: 64px;\n  padding: 8px var(--ty-field-pad-x);\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n}\n\ntextarea.sm {\n  min-height: 72px;\n  padding: 10px var(--ty-field-pad-x);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\ntextarea.md {\n  min-height: 80px;\n  padding: 12px var(--ty-field-pad-x);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\ntextarea.lg {\n  min-height: 96px;\n  padding: 14px var(--ty-field-pad-x);\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n}\n\ntextarea.xl {\n  min-height: 112px;\n  padding: 16px var(--ty-field-pad-x);\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n}\n\ntextarea:focus-visible {\n  outline: none;\n  /* We use box-shadow instead */\n}\n\n@media (prefers-contrast: high) {\n  textarea {\n    border-width: 2px;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  textarea {\n    transition: none;\n  }\n\n  .textarea-dummy {\n    transition: none;\n  }\n}\n\n@container (max-width: 480px) {\n  textarea.lg {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px var(--ty-field-pad-x);\n    min-height: 80px;\n  }\n\n  textarea.xl {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n    padding: 14px var(--ty-field-pad-x);\n    min-height: 96px;\n  }\n}\n\n@container (max-width: 320px) {\n  textarea.xl {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px var(--ty-field-pad-x);\n    min-height: 80px;\n  }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n  textarea.lg {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px var(--ty-field-pad-x);\n    min-height: 80px;\n  }\n\n  textarea.xl {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n    padding: 14px var(--ty-field-pad-x);\n    min-height: 96px;\n  }\n}\n\n@media (max-width: 480px) {\n  textarea.xl {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px var(--ty-field-pad-x);\n    min-height: 80px;\n  }\n}\n\ntextarea {\n  transition: var(--ty-local-transition,\n    border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out,\n    background-color 0.15s ease-in-out,\n    height 0.1s ease-out);\n}\n\n/* Disable height transition on focus to avoid jarring effect */\ntextarea:focus {\n  transition: var(--ty-local-transition,\n    border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out,\n    background-color 0.15s ease-in-out);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  textarea {\n    transition: none;\n  }\n}\n";

package/lib/styles/textarea.js

@@ -75,6 +75,8 @@ font-weight: var(--ty-font-medium);
 color: var(--ty-label-color);
 margin-bottom: var(--ty-field-label-gap);
 padding-left: var(--ty-field-outer-pad-x);
+display: flex;
+align-items: center;
 }
 .required-icon {
 display: inline-flex;
@@ -82,8 +84,13 @@ align-items: center;
 color: var(--ty-color-danger);
 width: 12px;
 height: 12px;
+margin-left: 4px;
 vertical-align: middle;
 }
+.required-icon svg {
+width: 100%;
+height: 100%;
+}
 .error-message {
 font-size: var(--ty-font-xs);
 line-height: var(--ty-leading-xs);

package/lib/utils/error-flavor.d.ts

@@ -0,0 +1,8 @@
+/**
+ * `error` shows a neutral ty-input, ty-select or ty-date-picker as danger by
+ * writing flavor="danger". The flavor attribute it replaced ('' for none) waits
+ * in this attribute until the error clears and it goes back. On the element,
+ * not in a field: a copy of it (cloneNode, innerHTML, a page snapshot) carries
+ * that danger as a plain attribute and must still tell it from the author's.
+ */
+export declare const ERROR_FLAVOR = "data-error-flavor";

package/lib/utils/error-flavor.js

@@ -0,0 +1 @@
+export const ERROR_FLAVOR = 'data-error-flavor';

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/upgrade-properties.d.ts

@@ -0,0 +1,21 @@
+/**
+ * For a component whose attributeChangedCallback assigns through its own
+ * accessors: call it in the constructor. While an element upgrades, the
+ * attribute callbacks run before connectedCallback and would overwrite the
+ * early values (an own property takes the assignment); taken off here, they
+ * reach the setters in upgradeProperties() instead, after the attributes.
+ */
+export declare function liftProperties(el: HTMLElement): void;
+/**
+ * Properties set before the element upgraded (a framework rendering it
+ * before its definition loaded, a lazily defined element) are own data
+ * properties that shadow the class accessors, so later assignments would
+ * never reach a setter. Standard "upgrade property" pattern: read the own
+ * value, delete it, assign it again through the accessor. Covers every
+ * settable accessor on the prototype chain (value, checked, open, error,
+ * minLength, …). TyComponent does this itself; a component extending
+ * HTMLElement directly calls it at the start of connectedCallback.
+ * A value its setter rejects is reported, not thrown: connectedCallback
+ * goes on, as it would for an attribute with a bad value.
+ */
+export declare function upgradeProperties(el: HTMLElement): void;

package/lib/utils/upgrade-properties.js

@@ -0,0 +1,47 @@
+const accessorCache = new WeakMap();
+function settableAccessors(ctor) {
+let names = accessorCache.get(ctor);
+if (!names) {
+const set = new Set();
+for (let proto = ctor.prototype; proto && proto !== HTMLElement.prototype; proto = Object.getPrototypeOf(proto)) {
+for (const [name, d] of Object.entries(Object.getOwnPropertyDescriptors(proto))) {
+if (d.set)
+set.add(name);
+}
+}
+names = [...set];
+accessorCache.set(ctor, names);
+}
+return names;
+}
+const lifted = new WeakMap();
+function takeOwn(el) {
+const taken = [];
+for (const name of settableAccessors(el.constructor)) {
+if (!Object.prototype.hasOwnProperty.call(el, name))
+continue;
+taken.push([name, el[name]]);
+delete el[name];
+}
+return taken;
+}
+export function liftProperties(el) {
+const taken = takeOwn(el);
+if (taken.length)
+lifted.set(el, taken);
+}
+export function upgradeProperties(el) {
+const early = [...(lifted.get(el) ?? []), ...takeOwn(el)];
+lifted.delete(el);
+for (const [name, value] of early) {
+if (value === undefined)
+continue;
+try {
+;
+el[name] = value;
+}
+catch (e) {
+reportError(e);
+}
+}
+}

package/lib/utils/validity.d.ts

@@ -9,18 +9,88 @@
  * 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')`. A submit (a submitter click, Enter in a
+ * single-line field, form.requestSubmit()) and form.reportValidity() also
+ * move focus to the first failing field — the first in form order, like a
+ * native form, also when a later field shows a bubble. checkValidity() never
+ * does. An `error` the author set is never overwritten or removed;
+ * form.reset() clears every message the controller wrote.
  */
 export declare class ValidityController {
     private host;
     private internals;
     private own;
     private custom;
-    /** `error` was written by reportValidity(), so it's ours to clear. */
-    private errorFromReport;
+    /** The message this controller last wrote into `error`. */
+    private written;
     constructor(host: HTMLElement, internals: ElementInternals);
+    /**
+     * Show the current message, if any, in the error display (on blur after an
+     * edit). During a pointer interaction it waits until after the click.
+     */
+    reveal(): void;
+    /**
+     * `error` still holds what this controller wrote (a reportValidity(), a
+     * submit, a blur reveal), so it's ours to update and clear. Once the author
+     * sets their own message, it's theirs.
+     */
+    private get errorFromReport();
+    private writeError;
+    /** Into `error`, unless the author's own message is there. */
+    private showError;
+    /**
+     * form.reset(): drop the message this controller showed and any blur
+     * reveal still waiting, so the field looks untouched again. An `error` the
+     * author set stays.
+     */
+    reset(): void;
     /** The component's own validity (replaces the previous one). */
     set(flags: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;
     setCustom(message: string): void;
     report(): boolean;
     private sync;
 }
+type ProbeTag = 'input' | 'textarea' | 'select';
+/**
+ * The browser's own (localized) message for a rule: a detached native control
+ * gets the same attributes and value and reports what it would say. `true`
+ * sets a boolean attribute; '', false and null leave the attribute off. One
+ * probe per tag, never in the document, stripped of every attribute before
+ * each use. Works for required and min/max; length rules only report after a
+ * user edit, so a probe can't word them (see lengthValidity()).
+ */
+export declare function nativeMessage(tag: ProbeTag, attrs: Record<string, string | boolean | null | undefined>, value?: string): string;
+/**
+ * nativeMessage() plus the probe's own flags, for rules whose attribute the
+ * browser parses (min/max: ' 5 ' or '0x10' is no rule at all), so the flag
+ * and its message can't disagree. Read `validity` right away: the probe is
+ * reused by the next call.
+ */
+export declare function nativeValidity(tag: ProbeTag, attrs: Record<string, string | boolean | null | undefined>, value?: string): {
+    validity: ValidityState;
+    message: string;
+};
+/** Non-negative integer limit from an attribute string, or null when unset/invalid. */
+export declare function toLimit(v: unknown): number | null;
+/**
+ * minlength / maxlength for a text field (ty-input, ty-textarea): the failing
+ * flags with their messages. `control` is the inner native control carrying
+ * `minlength`; it only flags (and words, localized) a value the user typed,
+ * so its message is used then. Otherwise Ty's wording, and the author's
+ * too-short / too-long message always wins. Placeholders: {minlength}
+ * {maxlength} {length}.
+ */
+export declare function lengthValidity(value: string, rules: {
+    minlength: unknown;
+    maxlength: unknown;
+    tooShortMessage: string;
+    tooLongMessage: string;
+}, control?: HTMLInputElement | HTMLTextAreaElement | null): {
+    tooShort?: string;
+    tooLong?: string;
+};
+export {};