tyrell-components 1.0.0-TC58 → 1.0.0-TC59

package/lib/styles/checkbox.js

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

package/lib/styles/date-picker.js

@@ -1,6 +1,6 @@
 import { FLAVORS } from "../types/common.js";
 import { fieldSizeVars } from "./field-size.js";
-const datePickerFlavor = (f, fb) => {
+const datePickerFlavor = (f, fb, also = "") => {
 const c = (s) => fb
 ? s
 ? `var(--ty-color-${f}${s}, var(--ty-color-${f}, var(--ty-color-${fb}${s})))`
@@ -9,7 +9,7 @@ const c = (s) => fb
 ? `var(--ty-color-${f}${s}, var(--ty-color-${f}))`
 : `var(--ty-color-${f})`;
 return `
-:host([flavor="${f}"]) {
+:host([flavor="${f}"])${also} {
 --date-picker-accent: var(--ty-input-${f}-border, ${c("-soft")});
 --date-picker-accent-bold: ${c("")};
 --date-picker-ring: color-mix(in oklab, ${c("")} 15%, transparent);
@@ -26,6 +26,7 @@ return `
 }
 `;
 };
+const errorLook = `,\n:host([error]:not([error=""]))`;
 export const datePickerCustomFlavorCss = (base) => datePickerFlavor(base, "neutral");
 export const datePickerStyles = `
 ${fieldSizeVars}
@@ -133,7 +134,7 @@ opacity: 0.6;
 border-color: var(--date-picker-accent-bold, var(--ty-date-picker-border-focus));
 box-shadow: 0 0 0 3px var(--date-picker-ring, var(--ty-date-picker-shadow-focus));
 }
-${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f)).join("")}
+${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f, undefined, f === "danger" ? errorLook : "")).join("")}
 .error-message {
 font-size: var(--ty-font-xs);
 line-height: var(--ty-leading-xs);
@@ -142,15 +143,9 @@ 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);
+.date-picker-stub.error:not([disabled]) {
 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/input.js

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

package/lib/styles/option.d.ts

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

package/lib/styles/option.js

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

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}
@@ -256,15 +257,9 @@ width: max(100%, 20em);
 :host([has-trigger]) .error-message {
 padding-left: 0;
 }
-.select-stub.error:not(.custom-trigger) {
-border-color: var(--ty-color-danger);
+.select-stub.error:not(.custom-trigger):not([disabled]) {
 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;
 }
@@ -807,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/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 {