tyrell-components 1.0.0-TC57 → 1.0.0-TC59

package/lib/styles/popup.d.ts

@@ -4,4 +4,4 @@
  * Popup component with dropdown-like behavior and tooltip positioning.
  * Uses dialog element for top layer rendering like dropdown and date-picker.
  */
-export declare const popupStyles = "\n.popup-dialog {\n  position: fixed;\n  top: 0;\n  left: 0;\n\n  /* Reset dialog defaults */\n  margin: 0;\n  border: none;\n  background: transparent;\n  max-width: none;\n  max-height: none;\n\n  /* Shadow infrastructure - provide space for user shadows */\n  padding: var(--popup-padding, 16px);\n\n  /* Hidden by default - even when [open] (for positioning phase) */\n  visibility: hidden;\n  opacity: 0;\n  /* NO TRANSFORM here - apply only when animating to avoid measurement errors! */\n\n  transition:\n    opacity var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),\n    visibility var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),\n    transform var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1));\n\n  /* Prevent interactions when hidden */\n  pointer-events: none;\n}\n\n/* Apply position variables only when position is calculated (like dropdown) */\n.popup-dialog.position-calculated {\n  top: var(--popup-y, 0px);\n  left: var(--popup-x, 0px);\n}\n\n/* Entrance prep (right before .open): scale + a short slide from the anchor\n   side. data-side is the RESOLVED side (post-flip), set by updatePosition. */\n.popup-dialog.preparing-animation {\n  transform: scale(var(--ty-popup-scale, 0.96));\n}\n\n/* The prep pose must land instantly. Transitioned, it had barely left\n   scale(1) when .open arrived a frame later, so the entrance (and any\n   springy --ty-popup-ease) ran over almost no distance. */\n.popup-dialog.preparing-animation:not(.open) {\n  transition: none;\n}\n\n.popup-dialog[data-side=\"bottom\"].preparing-animation:not(.open) {\n  transform: translateY(-6px) scale(var(--ty-popup-scale, 0.96));\n}\n\n.popup-dialog[data-side=\"top\"].preparing-animation:not(.open) {\n  transform: translateY(6px) scale(var(--ty-popup-scale, 0.96));\n}\n\n.popup-dialog[data-side=\"left\"].preparing-animation:not(.open) {\n  transform: translateX(6px) scale(var(--ty-popup-scale, 0.96));\n}\n\n.popup-dialog[data-side=\"right\"].preparing-animation:not(.open) {\n  transform: translateX(-6px) scale(var(--ty-popup-scale, 0.96));\n}\n\n.popup-dialog.open {\n  visibility: visible;\n  opacity: 1;\n  transform: scale(1);\n  pointer-events: auto;\n}\n\n/* Make dialog backdrop transparent like dropdown/date-picker */\n.popup-dialog::backdrop {\n  background: transparent;\n}\n\n/* Neutral structural container \u2014 users control all visuals via slotted content */\n.popup-container {\n  display: contents;\n}\n\n/* Slotted content defines its own styling */\n#popup-content {\n  display: contents;\n}\n\n/* Users have complete control over the popup's appearance; only essential\n   positioning is imposed here. */\n#popup-content ::slotted(*) {\n  position: relative;\n\n  /* Prevent content from being too wide - still helpful */\n  max-width: min(400px, 90vw);\n  max-height: min(500px, 80vh);\n  overflow: auto;\n}\n";
+export declare const popupStyles = "\n.popup-dialog {\n  position: fixed;\n  top: 0;\n  left: 0;\n\n  /* Reset dialog defaults */\n  margin: 0;\n  border: none;\n  background: transparent;\n  max-width: none;\n  max-height: none;\n\n  /* Shadow infrastructure - provide space for user shadows */\n  padding: var(--popup-padding, 16px);\n\n  /* Hidden by default - even when [open] (for positioning phase) */\n  visibility: hidden;\n  opacity: 0;\n  /* NO TRANSFORM here - apply only when animating to avoid measurement errors! */\n\n  transition:\n    opacity var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),\n    visibility var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),\n    transform var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1));\n\n  /* Prevent interactions when hidden */\n  pointer-events: none;\n\n  /* Focused on open when the content has nothing to focus: not a control */\n  outline: none;\n}\n\n/* Apply position variables only when position is calculated (like dropdown) */\n.popup-dialog.position-calculated {\n  top: var(--popup-y, 0px);\n  left: var(--popup-x, 0px);\n}\n\n/* Entrance prep (right before .open): scale + a short slide from the anchor\n   side. data-side is the RESOLVED side (post-flip), set by updatePosition. */\n.popup-dialog.preparing-animation {\n  transform: scale(var(--ty-popup-scale, 0.96));\n}\n\n/* The prep pose must land instantly. Transitioned, it had barely left\n   scale(1) when .open arrived a frame later, so the entrance (and any\n   springy --ty-popup-ease) ran over almost no distance. */\n.popup-dialog.preparing-animation:not(.open) {\n  transition: none;\n}\n\n.popup-dialog[data-side=\"bottom\"].preparing-animation:not(.open) {\n  transform: translateY(-6px) scale(var(--ty-popup-scale, 0.96));\n}\n\n.popup-dialog[data-side=\"top\"].preparing-animation:not(.open) {\n  transform: translateY(6px) scale(var(--ty-popup-scale, 0.96));\n}\n\n.popup-dialog[data-side=\"left\"].preparing-animation:not(.open) {\n  transform: translateX(6px) scale(var(--ty-popup-scale, 0.96));\n}\n\n.popup-dialog[data-side=\"right\"].preparing-animation:not(.open) {\n  transform: translateX(-6px) scale(var(--ty-popup-scale, 0.96));\n}\n\n.popup-dialog.open {\n  visibility: visible;\n  opacity: 1;\n  transform: scale(1);\n  pointer-events: auto;\n  /* Visible at once, the opacity fades it in: focusable as soon as openPopup\n     moves focus in. Closing still keeps it visible through the fade-out. */\n  transition-duration: var(--ty-popup-duration, 180ms), 0s, var(--ty-popup-duration, 180ms);\n}\n\n/* Make dialog backdrop transparent like dropdown/date-picker */\n.popup-dialog::backdrop {\n  background: transparent;\n}\n\n/* Neutral structural container \u2014 users control all visuals via slotted content */\n.popup-container {\n  display: contents;\n}\n\n/* Slotted content defines its own styling */\n#popup-content {\n  display: contents;\n}\n\n/* Users have complete control over the popup's appearance; only essential\n   positioning is imposed here. */\n#popup-content ::slotted(*) {\n  position: relative;\n\n  /* Prevent content from being too wide - still helpful */\n  max-width: min(400px, 90vw);\n  max-height: min(500px, 80vh);\n  overflow: auto;\n}\n";

package/lib/styles/popup.js

@@ -16,6 +16,7 @@ opacity var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34,
 visibility var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
 transform var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
 pointer-events: none;
+outline: none;
 }
 .popup-dialog.position-calculated {
 top: var(--popup-y, 0px);
@@ -44,6 +45,7 @@ visibility: visible;
 opacity: 1;
 transform: scale(1);
 pointer-events: auto;
+transition-duration: var(--ty-popup-duration, 180ms), 0s, var(--ty-popup-duration, 180ms);
 }
 .popup-dialog::backdrop {
 background: transparent;

package/lib/styles/radio.js

@@ -16,7 +16,15 @@ ${inputStyles}
 :host(ty-radio) {
 display: inline-flex;
 width: auto;
-vertical-align: middle;
+height: 1.25em;
+height: 1lh;
+align-items: center;
+vertical-align: baseline;
+overflow: visible;
+}
+:host(ty-radio)::before {
+content: "\\200b";
+width: 0;
 }
 :host(ty-radio-group) {
 display: block;
@@ -68,13 +76,11 @@ height: 100%;
 }
 .radio-container {
 display: inline-flex;
+flex-shrink: 0;
 align-items: center;
-min-height: 1.25em;
-min-height: 1lh;
 cursor: pointer;
 user-select: none;
 outline: none;
-vertical-align: middle;
 }
 .radio-container:not(.disabled):not([aria-checked="true"]):hover .radio-circle {
 border-color: var(--radio-ring-off-hover, color-mix(in oklab, var(--ty-text) 80%, transparent));

package/lib/styles/select-base.js

@@ -1,7 +1,7 @@
 import { FLAVORS } from "../types/common.js";
 import { fieldSizeVars } from "./field-size.js";
 import { customScrollbarStyles } from "./custom-scrollbar.js";
-const selectFlavor = (f, fb) => {
+const selectFlavor = (f, fb, also = "") => {
 const c = (s) => fb
 ? s
 ? `var(--ty-color-${f}${s}, var(--ty-color-${f}, var(--ty-color-${fb}${s})))`
@@ -10,7 +10,7 @@ const c = (s) => fb
 ? `var(--ty-color-${f}${s}, var(--ty-color-${f}))`
 : `var(--ty-color-${f})`;
 return `
-:host([flavor="${f}"]) {
+:host([flavor="${f}"])${also} {
 --select-accent: var(--ty-input-${f}-border, ${c("-soft")});
 --select-accent-bold: ${c("")};
 --select-ring: color-mix(in oklab, ${c("")} 15%, transparent);
@@ -27,6 +27,7 @@ return `
 }
 `;
 };
+const errorLook = `,\n:host([error]:not([error=""]))`;
 export const selectCustomFlavorCss = (base) => selectFlavor(base, "neutral");
 export const selectBaseStyles = `
 ${fieldSizeVars}
@@ -239,6 +240,26 @@ 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):not([disabled]) {
+background: var(--ty-bg-danger-soft);
+}
 .dropdown-mode-mobile .dropdown-wrapper:has(.mobile-dialog[open]) .select-chips {
 display: none;
 }
@@ -781,5 +802,5 @@ animation-duration: 1.6s;
 }
 }
 ${customScrollbarStyles}
-${FLAVORS.filter((f) => f !== "neutral").map((f) => selectFlavor(f)).join("")}
+${FLAVORS.filter((f) => f !== "neutral").map((f) => selectFlavor(f, undefined, f === "danger" ? errorLook : "")).join("")}
 `;

package/lib/styles/select.d.ts

@@ -8,4 +8,4 @@
  * - .compact: content-hugging trigger for toolbars, count badge
  * - .custom-trigger (slot="trigger"): all chrome stripped
  */
-export declare const selectStyles = "\n/* Compact skin hugs its content (field skin = base styles) */\n.select-stub.compact {\n  display: inline-flex;\n  flex-wrap: nowrap;\n  width: auto;\n  gap: 0.5rem;\n  /* extra right padding = room for the absolutely-positioned chevron */\n  padding: 0.5rem 2.25rem 0.5rem 0.875rem;\n}\n\n/* Consumer-provided trigger (slot=\"trigger\"): no chrome at all */\n.select-stub.custom-trigger {\n  display: inline-block;\n  width: auto;\n  border: none;\n  background: none;\n  padding: 0;\n  min-height: 0;\n  border-radius: 0;\n}\n.select-stub.custom-trigger:hover {\n  border: none;\n}\n\n.select-count {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1.25rem;\n  height: 1.25rem;\n  padding: 0 0.375rem;\n  border-radius: 9999px;\n  /* --ty-text-primary never existed as a token \u2014 this silently fell back\n     to inherited/unset color. Now follows the select's own flavor. */\n  background: color-mix(in oklab, var(--select-accent, var(--ty-color-primary)) 15%, transparent);\n  color: var(--select-accent-bold, var(--ty-color-primary-strong));\n  font-size: var(--ty-font-xs);\n  font-weight: var(--ty-font-semibold);\n  font-style: normal;\n}\n.select-count[hidden] {\n  display: none;\n}\n\n/* Clear (x) button \u2014 normal flex child of .select-stub, not absolutely\n   positioned like .dropdown-chevron: it just takes its own space in the\n   row, no padding-right gutter math needed. Lives in the trigger slot's\n   fallback content, so it's automatically absent under slot=\"trigger\". */\n.select-clear {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  padding: 0;\n  border: none;\n  background: none;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  cursor: pointer;\n  border-radius: var(--ty-radius-sm);\n  transition: var(--ty-local-transition, all 0.15s ease);\n}\n/* Pull toward the chevron: the stub's right padding (chevron room) left 12px\n   between them on the field skin, 8px on compact. Both land at 6px. */\n.select-stub .select-clear {\n  margin-right: -0.375rem;\n}\n.select-stub.compact .select-clear {\n  margin-right: -0.125rem;\n}\n.select-clear[hidden] {\n  display: none;\n}\n.select-clear:hover {\n  /* Destructive utility action \u2014 neutral at rest, warns danger-red on\n     hover regardless of the field's own flavor. */\n  color: var(--ty-color-danger);\n  background-color: var(--ty-bg-danger-soft);\n}\n.select-clear svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Selection text (field skin): single line, ellipsis, input colors.\n   flex-basis 0, not auto \u2014 .select-stub is flex-wrap:wrap, and auto's\n   hypothetical size is the FULL untruncated text width (wrap-line\n   assignment happens before shrinking), which pushed fixed-size siblings\n   (.select-clear) onto a second line even though the text visibly had\n   room after truncating. 0 makes this item contribute ~nothing to the\n   line-fit check up front; grow/shrink + overflow:hidden still truncate\n   it identically. */\n.select-stub .dropdown-placeholder {\n  font-style: normal;\n  flex: 1 1 0%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--input-color, var(--ty-input-color));\n}\n\n.select-stub .dropdown-placeholder.placeholder-shown {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n}\n.select-stub .dropdown-placeholder[hidden] {\n  display: none;\n}\n\n/* Single-select display clone (slot=\"selected\"): the selected ty-option\n   projected into the stub \u2014 its own :host([cloned]) styling strips the\n   list-row chrome; here it just takes the text's flex slot. */\n.select-stub slot[name=\"selected\"] {\n  display: none;\n}\n.select-stub.has-clone slot[name=\"selected\"] {\n  display: block;\n  /* flex-basis 0, not auto \u2014 same reasoning as .dropdown-placeholder above:\n     .select-stub is flex-wrap:wrap, and auto's hypothetical size is the\n     clone's full untruncated text width, which pushes .select-clear onto\n     a second line. */\n  flex: 1 1 0%;\n  min-width: 0;\n  overflow: hidden;\n}\n.select-stub.compact.has-clone slot[name=\"selected\"] {\n  flex: 0 1 auto;\n}\n\n/* start/end slot content (icons etc.) \u2014 spacing comes from the stub's flex\n   gap; muted like ty-input adornments. end sits before the chevron. */\n.select-stub ::slotted([slot=\"start\"]),\n.select-stub ::slotted([slot=\"end\"]) {\n  flex-shrink: 0;\n  color: var(--ty-text-soft);\n}\n\n/* Compact skin: the text IS the trigger label \u2014 no grow, regular text color.\n   flex-basis: auto (not the field skin's 0%) \u2014 content-hugging needs its\n   natural content width as the starting point; 0% would collapse it since\n   grow is also 0 here (nothing left to expand it back out). */\n.select-stub.compact .dropdown-placeholder {\n  flex: 0 1 auto;\n  color: var(--ty-text);\n}\n\n/* Trigger stays visible while the popup is open (the popup hides it) */\n.dropdown-wrapper:has(.dropdown-chevron.open) .select-stub {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* One-panel popup: search header fused with the options list */\n\n/* Single unified shadow around the whole panel (header + list as one silhouette) */\n.dropdown-dialog.open {\n  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.14)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));\n}\n\n/* Card-style header: the search input keeps its own bordered-field look\n   (base styles) and sits inset in the panel, TagPicker-style \u2014 no divider,\n   whitespace separates it from the list. The header's OWN surface/border is\n   part of the floating panel's chrome, not a form field \u2014 --ty-surface-\n   floating/--ty-floating-border, matching .dropdown-options below it (same\n   reasoning as the base-panel fix: --ty-input-* is deliberately faint for\n   resting form fields and read as a missing/mismatched edge here). */\n.dropdown-header {\n  background: var(--ty-surface-floating);\n  border: 1px solid var(--ty-floating-border);\n  border-bottom: none;\n  border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n  padding: var(--ty-spacing-2) var(--ty-spacing-2) var(--ty-spacing-1);\n}\n.dropdown-dialog.position-below .dropdown-header {\n  margin-bottom: 0;\n}\n.dropdown-dialog.position-above .dropdown-header {\n  margin-top: 0;\n  border-top: none;\n  border-bottom: 1px solid var(--ty-floating-border);\n  border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2) var(--ty-spacing-2);\n}\n\n/* Magnifier adornment inside the search field (header padding + field inset) */\n.dropdown-search-icon {\n  position: absolute;\n  top: 50%;\n  left: calc(var(--ty-spacing-2) + var(--ty-spacing-3));\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  pointer-events: none;\n}\n.dropdown-search-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Mobile header: flex row, icon flows inline before the input. Same 32x32\n   footprint as .mobile-close-button (18px glyph centered in the box, not a\n   bare 18px glyph flush at the edge) so the row has two matching bookends \u2014\n   a bare icon on one side and a 32px circle on the other read as lopsided\n   even with equal flex gap on both sides. Matching them also centers the\n   search input's flex:1 fill symmetrically between the two. Fixed white +\n   18px glyph, same reasoning as .mobile-header-label \u2014 this sits on the\n   dark ::backdrop blur in both themes, not a theme surface. */\n.dropdown-mode-mobile .mobile-header-content .dropdown-search-icon {\n  position: static;\n  transform: none;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  color: #ffffff;\n}\n.dropdown-mode-mobile .mobile-header-content .dropdown-search-icon svg {\n  width: 18px;\n  height: 18px;\n}\n\n/* Search input: bordered field from base styles; just size + icon room */\n.dropdown-search-input {\n  min-height: 2.25rem;\n  padding-right: var(--ty-spacing-2);\n  /* room for the magnifier adornment */\n  padding-left: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n/* Trigger already has a chevron - no second one inside the search row */\n.dropdown-search-chevron {\n  display: none;\n}\n\n/* With the search row hidden nothing inside is focusable, so the <dialog>\n   itself receives focus on open \u2014 suppress its UA focus ring */\n.dropdown-dialog:focus,\n.dropdown-dialog:focus-visible {\n  outline: none;\n}\n\n/* Search row hidden ('auto' below threshold / searchable=\"false\"):\n   the options panel owns the whole silhouette */\n.dropdown-header[hidden] {\n  display: none;\n}\n.dropdown-header[hidden] ~ .dropdown-options-wrapper .dropdown-options {\n  border-top: 1px solid var(--ty-floating-border);\n  border-radius: var(--ty-radius-lg);\n}\n.mobile-search-input[hidden],\n.mobile-header-content .dropdown-search-icon[hidden] {\n  display: none;\n}\n\n/* Options: vertical list rows fused under the search header.\n   No own shadow/animation - the panel appears as one via dialog opacity. */\n.dropdown-options {\n  flex-direction: column;\n  flex-wrap: nowrap;\n  align-items: stretch;\n  gap: 0;\n  /* Card-style list: rounded rows sit inset from the panel edges */\n  padding: var(--ty-spacing-1);\n  border-top: none;\n  border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n  box-shadow: none;\n  transform: none;\n  transition: none;\n  /* ~9-10 visible rows before scrolling (custom scrollbar, native hidden) */\n  max-height: 24rem;\n}\n.dropdown-dialog.position-below .dropdown-options {\n  box-shadow: none;\n}\n.dropdown-dialog.position-above .dropdown-options {\n  border-top: 1px solid var(--ty-floating-border);\n  border-bottom: none;\n  border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n}\n\n/* Loading panel continues the fused silhouette exactly like .dropdown-options \u2014\n   the base layer styles it as a floating card (radius + shadow), which left a\n   see-through gap under the search header while loading. */\n.dropdown-loading {\n  border-top: none;\n  border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n  box-shadow: none;\n}\n.dropdown-dialog.position-above .dropdown-loading {\n  border-top: 1px solid var(--ty-floating-border);\n  border-bottom: none;\n  border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n}\n\n/* Selection tick lives inside ty-option (lucide check on [selected]) */\n\n/* Mobile modal: same vertical list */\n.dropdown-mode-mobile .section-content ::slotted(ty-option) {\n  display: block;\n  width: 100%;\n}\n";
+export declare const selectStyles = "\n/* Compact skin hugs its content (field skin = base styles) */\n.select-stub.compact {\n  display: inline-flex;\n  flex-wrap: nowrap;\n  width: auto;\n  gap: 0.5rem;\n  /* extra right padding = room for the absolutely-positioned chevron */\n  padding: 0.5rem 2.25rem 0.5rem 0.875rem;\n}\n\n/* Consumer-provided trigger (slot=\"trigger\"): no chrome at all */\n.select-stub.custom-trigger {\n  display: inline-block;\n  width: auto;\n  border: none;\n  background: none;\n  padding: 0;\n  min-height: 0;\n  border-radius: 0;\n}\n.select-stub.custom-trigger:hover {\n  border: none;\n}\n\n.select-count {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1.25rem;\n  height: 1.25rem;\n  padding: 0 0.375rem;\n  border-radius: 9999px;\n  /* --ty-text-primary never existed as a token \u2014 this silently fell back\n     to inherited/unset color. Now follows the select's own flavor. */\n  background: color-mix(in oklab, var(--select-accent, var(--ty-color-primary)) 15%, transparent);\n  color: var(--select-accent-bold, var(--ty-color-primary-strong));\n  font-size: var(--ty-font-xs);\n  font-weight: var(--ty-font-semibold);\n  font-style: normal;\n}\n.select-count[hidden] {\n  display: none;\n}\n\n/* Clear (x) button \u2014 normal flex child of .select-stub, not absolutely\n   positioned like .dropdown-chevron: it just takes its own space in the\n   row, no padding-right gutter math needed. Lives in the trigger slot's\n   fallback content, so it's automatically absent under slot=\"trigger\". */\n.select-clear {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  padding: 0;\n  border: none;\n  background: none;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  cursor: pointer;\n  border-radius: var(--ty-radius-sm);\n  transition: var(--ty-local-transition, all 0.15s ease);\n}\n/* Pull toward the chevron: the stub's right padding (chevron room) left 12px\n   between them on the field skin, 8px on compact. Both land at 6px. */\n.select-stub .select-clear {\n  margin-right: -0.375rem;\n}\n.select-stub.compact .select-clear {\n  margin-right: -0.125rem;\n}\n.select-clear[hidden] {\n  display: none;\n}\n.select-clear:hover {\n  /* Destructive utility action \u2014 neutral at rest, warns danger-red on\n     hover regardless of the field's own flavor. */\n  color: var(--ty-color-danger);\n  background-color: var(--ty-bg-danger-soft);\n}\n.select-clear svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Selection text (field skin): single line, ellipsis, input colors.\n   flex-basis 0, not auto \u2014 .select-stub is flex-wrap:wrap, and auto's\n   hypothetical size is the FULL untruncated text width (wrap-line\n   assignment happens before shrinking), which pushed fixed-size siblings\n   (.select-clear) onto a second line even though the text visibly had\n   room after truncating. 0 makes this item contribute ~nothing to the\n   line-fit check up front; grow/shrink + overflow:hidden still truncate\n   it identically. */\n.select-stub .dropdown-placeholder {\n  font-style: normal;\n  flex: 1 1 0%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--input-color, var(--ty-input-color));\n}\n\n.select-stub .dropdown-placeholder.placeholder-shown {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n}\n.select-stub .dropdown-placeholder[hidden] {\n  display: none;\n}\n\n/* Single-select display clone (slot=\"selected\"): the selected ty-option\n   projected into the stub \u2014 its own :host([cloned]) styling strips the\n   list-row chrome; here it just takes the text's flex slot. */\n.select-stub slot[name=\"selected\"] {\n  display: none;\n}\n.select-stub.has-clone slot[name=\"selected\"] {\n  display: block;\n  /* flex-basis 0, not auto \u2014 same reasoning as .dropdown-placeholder above:\n     .select-stub is flex-wrap:wrap, and auto's hypothetical size is the\n     clone's full untruncated text width, which pushes .select-clear onto\n     a second line. */\n  flex: 1 1 0%;\n  min-width: 0;\n  overflow: hidden;\n}\n.select-stub.compact.has-clone slot[name=\"selected\"] {\n  flex: 0 1 auto;\n}\n\n/* start/end slot content (icons etc.) \u2014 spacing comes from the stub's flex\n   gap; muted like ty-input adornments. end sits before the chevron. */\n.select-stub ::slotted([slot=\"start\"]),\n.select-stub ::slotted([slot=\"end\"]) {\n  flex-shrink: 0;\n  color: var(--ty-text-soft);\n}\n\n/* Compact skin: the text IS the trigger label \u2014 no grow, regular text color.\n   flex-basis: auto (not the field skin's 0%) \u2014 content-hugging needs its\n   natural content width as the starting point; 0% would collapse it since\n   grow is also 0 here (nothing left to expand it back out). */\n.select-stub.compact .dropdown-placeholder {\n  flex: 0 1 auto;\n  color: var(--ty-text);\n}\n\n/* Trigger stays visible while the popup is open (the popup hides it) */\n.dropdown-wrapper:has(.dropdown-chevron.open) .select-stub {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* One-panel popup: search header fused with the options list */\n\n/* Single unified shadow around the whole panel (header + list as one silhouette) */\n.dropdown-dialog.open {\n  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.14)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));\n}\n\n/* Card-style header: the search input keeps its own bordered-field look\n   (base styles) and sits inset in the panel, TagPicker-style \u2014 no divider,\n   whitespace separates it from the list. The header's OWN surface/border is\n   part of the floating panel's chrome, not a form field \u2014 --ty-surface-\n   floating/--ty-floating-border, matching .dropdown-options below it (same\n   reasoning as the base-panel fix: --ty-input-* is deliberately faint for\n   resting form fields and read as a missing/mismatched edge here). */\n.dropdown-header {\n  background: var(--ty-surface-floating);\n  border: 1px solid var(--ty-floating-border);\n  border-bottom: none;\n  border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n  padding: var(--ty-spacing-2) var(--ty-spacing-2) var(--ty-spacing-1);\n}\n.dropdown-dialog.position-below .dropdown-header {\n  margin-bottom: 0;\n}\n.dropdown-dialog.position-above .dropdown-header {\n  margin-top: 0;\n  border-top: none;\n  border-bottom: 1px solid var(--ty-floating-border);\n  border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2) var(--ty-spacing-2);\n}\n\n/* Magnifier adornment inside the search field (header padding + field inset) */\n.dropdown-search-icon {\n  position: absolute;\n  top: 50%;\n  left: calc(var(--ty-spacing-2) + var(--ty-spacing-3));\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  pointer-events: none;\n}\n.dropdown-search-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Mobile header: flex row, icon flows inline before the input. Same 32x32\n   footprint as .mobile-close-button (18px glyph centered in the box, not a\n   bare 18px glyph flush at the edge) so the row has two matching bookends \u2014\n   a bare icon on one side and a 32px circle on the other read as lopsided\n   even with equal flex gap on both sides. Matching them also centers the\n   search input's flex:1 fill symmetrically between the two. Fixed white +\n   18px glyph, same reasoning as .mobile-header-label \u2014 this sits on the\n   dark ::backdrop blur in both themes, not a theme surface. */\n.dropdown-mode-mobile .mobile-header-content .dropdown-search-icon {\n  position: static;\n  transform: none;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  color: #ffffff;\n}\n.dropdown-mode-mobile .mobile-header-content .dropdown-search-icon svg {\n  width: 18px;\n  height: 18px;\n}\n\n/* Search input: bordered field from base styles; just size + icon room */\n.dropdown-search-input {\n  min-height: 2.25rem;\n  padding-right: var(--ty-spacing-2);\n  /* room for the magnifier adornment */\n  padding-left: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n}\n/* Trigger already has a chevron - no second one inside the search row */\n.dropdown-search-chevron {\n  display: none;\n}\n\n/* With the search row hidden nothing inside is focusable, so the <dialog>\n   itself receives focus on open \u2014 suppress its UA focus ring */\n.dropdown-dialog:focus,\n.dropdown-dialog:focus-visible {\n  outline: none;\n}\n\n/* Search row hidden ('auto' below threshold / searchable=\"false\"):\n   the options panel owns the whole silhouette */\n.dropdown-header[hidden] {\n  display: none;\n}\n.dropdown-header[hidden] ~ .dropdown-options-wrapper .dropdown-options {\n  border-top: 1px solid var(--ty-floating-border);\n  border-radius: var(--ty-radius-lg);\n}\n.mobile-search-input[hidden],\n.mobile-header-content .dropdown-search-icon[hidden] {\n  display: none;\n}\n\n/* Options: vertical list rows fused under the search header.\n   No own shadow/animation - the panel appears as one via dialog opacity. */\n.dropdown-options {\n  flex-direction: column;\n  flex-wrap: nowrap;\n  align-items: stretch;\n  gap: 0;\n  /* Card-style list: rounded rows sit inset from the panel edges */\n  padding: var(--ty-spacing-1);\n  border-top: none;\n  border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n  box-shadow: none;\n  transform: none;\n  transition: none;\n  /* ~9-10 visible rows before scrolling (custom scrollbar, native hidden) */\n  max-height: 24rem;\n}\n.dropdown-dialog.position-below .dropdown-options {\n  box-shadow: none;\n}\n.dropdown-dialog.position-above .dropdown-options {\n  border-top: 1px solid var(--ty-floating-border);\n  border-bottom: none;\n  border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n}\n\n/* Loading panel continues the fused silhouette exactly like .dropdown-options \u2014\n   the base layer styles it as a floating card (radius + shadow), which left a\n   see-through gap under the search header while loading. */\n.dropdown-loading {\n  border-top: none;\n  border-radius: 0 0 var(--ty-radius-lg) var(--ty-radius-lg);\n  box-shadow: none;\n}\n.dropdown-dialog.position-above .dropdown-loading {\n  border-top: 1px solid var(--ty-floating-border);\n  border-bottom: none;\n  border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;\n}\n\n/* Selection tick lives inside ty-option (lucide check on [selected]) */\n\n/* Mobile modal: same vertical list */\n.dropdown-mode-mobile .section-content ::slotted(ty-option) {\n  display: block;\n  width: 100%;\n}\n\n/* Options the author hid and options the search left out. Beats the display\n   rule above, which beats the browser's own [hidden] { display: none }. */\n#options-slot::slotted([hidden]),\n#options-slot::slotted([filtered-out]) {\n  display: none !important;\n}\n";

package/lib/styles/select.js

@@ -215,4 +215,8 @@ border-radius: var(--ty-radius-lg) var(--ty-radius-lg) 0 0;
 display: block;
 width: 100%;
 }
+#options-slot::slotted([hidden]),
+#options-slot::slotted([filtered-out]) {
+display: none !important;
+}
 `;

package/lib/styles/switch.js

@@ -16,23 +16,28 @@ ${inputStyles}
 :host {
 display: inline-flex;
 width: auto;
-vertical-align: middle;
+height: 1.25em;
+height: 1lh;
+align-items: center;
+vertical-align: baseline;
+overflow: visible;
+}
+:host::before {
+content: "\\200b";
+width: 0;
 }
 .switch-container {
 display: inline-flex;
+flex-shrink: 0;
 align-items: center;
-min-height: 1.25em;
-min-height: 1lh;
 cursor: pointer;
 user-select: none;
 outline: none;
-vertical-align: middle;
 }
 .switch-container.disabled {
 cursor: not-allowed;
 opacity: 0.55;
 }
-.switch-container:focus-visible .switch-track,
 .switch-container.focused .switch-track {
 box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);
 }

package/lib/styles/tag.js

@@ -28,7 +28,8 @@ box-shadow: 0 0 0 3px var(--ty-color-${f}-faint);
 }
 `;
 export const tagStyles = `
-:host([hidden]) {
+:host([hidden]),
+:host([filtered-out]) {
 display: none !important;
 }
 .tag-container {

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/calendar-utils.d.ts

@@ -41,6 +41,14 @@ export interface DayContext {
     /** Calendar's selected day (if any) */
     selectedDay?: number;
 }
+/**
+ * Local midnight of a calendar day. Not the Date constructor: it reads years
+ * 0-99 as 1900-1999. Noon is never skipped by a clock change, so the day
+ * can't shift before setHours.
+ */
+export declare function localMidnight(year: number, month: number, day: number): Date;
+/** UTC midnight of a calendar day, as a timestamp. Not Date.UTC(): it reads years 0-99 as 1900-1999. */
+export declare function utcMidnight(year: number, month: number, day: number): number;
 /**
  * Generate a 42-day calendar grid for a given month
  *
@@ -109,3 +117,44 @@ export declare function parseISODate(isoString: string): {
     month: number;
     day: number;
 } | null;
+/**
+ * Date/time components in local time, as ty-date-picker holds them.
+ */
+export interface DateTimeParts {
+    year?: number;
+    month?: number;
+    day?: number;
+    hour?: number;
+    minute?: number;
+    second?: number;
+    epoch?: number;
+}
+/** A Date whose UTC fields are these components: formats a wall-clock as written (timeZone 'UTC'). */
+export declare function wallClockDate(c: DateTimeParts): Date;
+/**
+ * Parse any date value ty-date-picker reads into local components:
+ * - Date only: '2024-09-21' (that calendar day)
+ * - Datetime-local: '2024-09-21T10:30[:45]' (local wall-clock)
+ * - UTC strings: '2024-09-21T08:30:00Z' or '2024-09-21T08:30:00.000Z'
+ * - With timezone: '2024-09-21T10:30:00+02:00'
+ * - Timestamps: milliseconds since epoch (a number, not a digit string)
+ *
+ * A zone-less value is taken as written, even a time the clocks skip when
+ * summer time starts (like <input type=datetime-local>); 2024-02-30 or 24:00
+ * is no value. An instant reads as its LOCAL day and time, and keeps its
+ * epoch.
+ */
+export declare function parseDateTime(value: string | number | null | undefined): DateTimeParts | null;
+/**
+ * The calendar day of any value parseDateTime reads, or a Date: an instant
+ * is its local day. Years outside 1-9999 (no 4-digit YYYY-MM-DD) are no day.
+ */
+export declare function parseDateDay(value: string | number | Date | null | undefined): {
+    year: number;
+    month: number;
+    day: number;
+} | null;
+/** 'YYYY-MM-DD' of a calendar day (years below 1000 padded to 4 digits). */
+export declare function formatISODay(year: number, month: number, day: number): string;
+/** Any value parseDateDay reads as 'YYYY-MM-DD', or null. */
+export declare function toISODay(value: string | number | Date | null | undefined): string | null;

package/lib/utils/calendar-utils.js

@@ -13,8 +13,16 @@ return date1.getFullYear() === date2.getFullYear()
 && date1.getMonth() === date2.getMonth()
 && date1.getDate() === date2.getDate();
 }
-function createMidnightDate(year, month, day) {
-return new Date(year, month - 1, day, 0, 0, 0, 0);
+export function localMidnight(year, month, day) {
+const date = new Date(2000, 0, 1, 12);
+date.setFullYear(year, month - 1, day);
+date.setHours(0, 0, 0, 0);
+return date;
+}
+export function utcMidnight(year, month, day) {
+const date = new Date(0);
+date.setUTCFullYear(year, month - 1, day);
+return date.getTime();
 }
 function getTodayMidnight() {
 const now = new Date();
@@ -41,7 +49,7 @@ const isToday = isSameDay(date, todayMidnight);
 const isSelected = selection?.year === year
 && selection?.month === month
 && selection?.day === dayInMonth;
-const utcValue = Date.UTC(year, month - 1, dayInMonth, 0, 0, 0, 0);
+const utcValue = utcMidnight(year, month, dayInMonth);
 const localValue = date.getTime();
 return {
 value: utcValue,
@@ -69,7 +77,7 @@ monday.setHours(0, 0, 0, 0);
 return monday;
 }
 function getMonthGridStart(year, month) {
-const firstDay = createMidnightDate(year, month, 1);
+const firstDay = localMidnight(year, month, 1);
 return getMondayOfWeek(firstDay);
 }
 function addDays(date, days) {
@@ -120,9 +128,58 @@ if (month < 1 || month > 12)
 return null;
 if (day < 1 || day > 31)
 return null;
-const date = new Date(year, month - 1, day);
-if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+const date = new Date(utcMidnight(year, month, day));
+if (date.getUTCMonth() !== month - 1 || date.getUTCDate() !== day) {
 return null;
 }
 return { year, month, day };
 }
+const LOCAL_VALUE = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.\d+)?)?)?$/;
+export function wallClockDate(c) {
+const date = new Date(0);
+date.setUTCFullYear(c.year, c.month - 1, c.day);
+date.setUTCHours(c.hour || 0, c.minute || 0, c.second || 0);
+return date;
+}
+export function parseDateTime(value) {
+if (value === null || value === undefined || value === '')
+return null;
+if (typeof value === 'string') {
+const local = LOCAL_VALUE.exec(value);
+if (local) {
+const [year, month, day, hour, minute, second] = local.slice(1, 7).map((g) => Number(g ?? 0));
+const components = { year, month, day, hour, minute, second };
+const check = wallClockDate(components);
+const real = check.getUTCMonth() === month - 1 && check.getUTCDate() === day &&
+hour < 24 && minute < 60 && second < 60;
+return real ? components : null;
+}
+}
+const dateObj = typeof value === 'number' || typeof value === 'string' ? new Date(value) : null;
+if (!dateObj || isNaN(dateObj.getTime())) {
+return null;
+}
+return {
+year: dateObj.getFullYear(),
+month: dateObj.getMonth() + 1,
+day: dateObj.getDate(),
+hour: dateObj.getHours(),
+minute: dateObj.getMinutes(),
+second: dateObj.getSeconds(),
+epoch: dateObj.getTime(),
+};
+}
+export function parseDateDay(value) {
+const parts = parseDateTime(value instanceof Date ? value.getTime() : value);
+if (!parts || parts.year < 1 || parts.year > 9999)
+return null;
+return { year: parts.year, month: parts.month, day: parts.day };
+}
+export function formatISODay(year, month, day) {
+const pad = (n, w) => n.toString().padStart(w, '0');
+return `${pad(year, 4)}-${pad(month, 2)}-${pad(day, 2)}`;
+}
+export function toISODay(value) {
+const d = parseDateDay(value);
+return d && formatISODay(d.year, d.month, d.day);
+}

package/lib/utils/scroll-lock.d.ts

@@ -1,9 +1,15 @@
 /**
- * CSS-based scroll prevention.
+ * Page scroll lock, reference-counted so multiple components can lock at once.
  *
- * Prevents page scrolling via CSS rather than event cancellation — no event
- * manipulation, no interference with component keyboard navigation, scroll
- * position preserved. Reference-counted so multiple components can lock at once.
+ * Two parts: overflow: hidden on <html> (the document scroller), and a guard
+ * for apps that scroll their own container (a full-height layout with an
+ * inner overflow: auto div), which <html> overflow doesn't reach. The guard
+ * cancels wheel, touchmove and scroll keys that would scroll anything outside
+ * the open dialog they come from (every lock holder is a top-layer <dialog>):
+ * scrollers inside the dialog keep working until their edge, nothing chains
+ * out of it, and events from the page behind scroll nothing. Keys a control
+ * uses itself (text fields, selects, Space on buttons, arrows in widgets) are
+ * left alone.
  */
 declare global {
     interface Window {

package/lib/utils/scroll-lock.js

@@ -3,6 +3,7 @@ locked: false,
 scrollY: 0,
 activeLocks: new Set(),
 };
+let savedStyle = { overflow: '', paddingRight: '' };
 function getBodyEl() {
 return document.body;
 }
@@ -15,6 +16,102 @@ return window.scrollY || getDocEl().scrollTop || 0;
 function getScrollbarWidth() {
 return window.innerWidth - getDocEl().clientWidth;
 }
+const KEY_SCROLL = {
+ArrowDown: ['y', 1], ArrowUp: ['y', -1], PageDown: ['y', 1], PageUp: ['y', -1],
+End: ['y', 1], Home: ['y', -1], ' ': ['y', 1], ArrowRight: ['x', 1], ArrowLeft: ['x', -1],
+};
+const TEXT_INPUT = /^(?:text|search|email|url|tel|password|number|date|datetime-local|month|week|time|range|color)$/;
+function keyBelongsTo(el, key) {
+if (el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement)
+return true;
+if (el instanceof HTMLElement && el.isContentEditable)
+return true;
+if (el instanceof HTMLInputElement) {
+if (TEXT_INPUT.test(el.type))
+return true;
+if (el.type === 'radio' && key.startsWith('Arrow'))
+return true;
+}
+if (key === ' ' && el.matches('button, input, summary, a[href], [role]'))
+return true;
+if (key !== ' ' && el.matches('[role]:not([role=dialog]):not([role=document]):not([role=presentation]):not([role=none])'))
+return true;
+return false;
+}
+function canScroll(el, axis, dir) {
+const style = getComputedStyle(el);
+const overflow = axis === 'y' ? style.overflowY : style.overflowX;
+if (!/^(?:auto|scroll|overlay)$/.test(overflow) && !(el instanceof HTMLTextAreaElement))
+return false;
+const pos = axis === 'y' ? el.scrollTop : Math.abs(el.scrollLeft);
+const max = axis === 'y' ? el.scrollHeight - el.clientHeight : el.scrollWidth - el.clientWidth;
+if (max < 1)
+return false;
+return dir > 0 ? pos < max - 1 : pos > 0;
+}
+const HAS_POPOVER = typeof HTMLElement !== 'undefined' && 'popover' in HTMLElement.prototype;
+function isOpenPopover(el) {
+return HAS_POPOVER && el.hasAttribute('popover') && el.matches(':popover-open');
+}
+function scrollsInside(event, axis, dir) {
+if (!dir)
+return true;
+const path = event.composedPath().filter((n) => n instanceof Element);
+const root = path.findIndex((n) => (n instanceof HTMLDialogElement && n.open) || isOpenPopover(n));
+return root >= 0 && path.slice(0, root + 1).some((n) => canScroll(n, axis, dir));
+}
+function guardWheel(e) {
+if (e.ctrlKey)
+return;
+const axis = Math.abs(e.deltaX) > Math.abs(e.deltaY) || e.shiftKey ? 'x' : 'y';
+const delta = axis === 'y' && !e.shiftKey ? e.deltaY : e.deltaX || e.deltaY;
+if (e.cancelable && !scrollsInside(e, axis, Math.sign(delta)))
+e.preventDefault();
+}
+let touchX = 0;
+let touchY = 0;
+function guardTouchStart(e) {
+if (e.touches.length !== 1)
+return;
+touchX = e.touches[0].clientX;
+touchY = e.touches[0].clientY;
+}
+function guardTouchMove(e) {
+if (e.touches.length !== 1 || !e.cancelable)
+return;
+const { clientX, clientY } = e.touches[0];
+const dx = touchX - clientX;
+const dy = touchY - clientY;
+touchX = clientX;
+touchY = clientY;
+const axis = Math.abs(dx) > Math.abs(dy) ? 'x' : 'y';
+if (!scrollsInside(e, axis, Math.sign(axis === 'y' ? dy : dx)))
+e.preventDefault();
+}
+function guardKey(e) {
+const scroll = KEY_SCROLL[e.key];
+if (!scroll || e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey)
+return;
+const target = e.composedPath()[0];
+if (target instanceof Element && keyBelongsTo(target, e.key))
+return;
+const [axis, dir] = scroll;
+if (!scrollsInside(e, axis, e.key === ' ' && e.shiftKey ? -dir : dir))
+e.preventDefault();
+}
+const WHEEL_OPTS = { capture: true, passive: false };
+function addGuard() {
+window.addEventListener('wheel', guardWheel, WHEEL_OPTS);
+window.addEventListener('touchstart', guardTouchStart, { capture: true, passive: true });
+window.addEventListener('touchmove', guardTouchMove, WHEEL_OPTS);
+window.addEventListener('keydown', guardKey, true);
+}
+function removeGuard() {
+window.removeEventListener('wheel', guardWheel, WHEEL_OPTS);
+window.removeEventListener('touchstart', guardTouchStart, { capture: true });
+window.removeEventListener('touchmove', guardTouchMove, WHEEL_OPTS);
+window.removeEventListener('keydown', guardKey, true);
+}
 function lockBodyFixed() {
 if (lockState.locked)
 return;
@@ -25,11 +122,13 @@ console.log('🔒 Locking body scroll:', { scrollbarWidth });
 }
 lockState.scrollY = getScrollY();
 lockState.locked = true;
+savedStyle = { overflow: docEl.style.overflow, paddingRight: docEl.style.paddingRight };
 docEl.style.overflow = 'hidden';
 if (scrollbarWidth > 0) {
 docEl.style.paddingRight = `${scrollbarWidth}px`;
 }
 docEl.classList.add('ty-scroll-locked');
+addGuard();
 }
 function unlockBodyFixed() {
 if (!lockState.locked)
@@ -38,9 +137,10 @@ const docEl = getDocEl();
 if (window.tyScrollDebug) {
 console.log('🔓 Unlocking body scroll');
 }
+removeGuard();
 docEl.classList.remove('ty-scroll-locked');
-docEl.style.overflow = '';
-docEl.style.paddingRight = '';
+docEl.style.overflow = savedStyle.overflow;
+docEl.style.paddingRight = savedStyle.paddingRight;
 lockState.locked = false;
 }
 export function lockScroll(componentId) {