tyrell-components 1.0.0-RC12 → 1.0.0-RC13

package/lib/styles/input.js

@@ -3,6 +3,50 @@
  * PORTED FROM: clj/ty/components/input.css
  * Phase A: Regular input styles only (no checkbox, no numeric formatting)
  */
+import { FLAVORS } from "../types/common.js";
+/* Flavor rules only set --input-accent (border), --input-accent-bold
+   (hover/focus border), and --input-ring (focus shadow); the wrapper base
+   rules consume them. They double as the per-instance override API:
+   `ty-input { --input-accent: … }`. Neutral is skipped — it IS the default
+   chrome (--ty-input-* tokens), and input's auto-danger-on-error logic
+   relies on neutral being the unstyled state.
+
+   Fallback flavor `fb` is used for custom flavors: suffixed tokens fall
+   back to the custom base color first (a flavor defining only
+   --ty-color-X still gets sensible hover/focus), then to neutral.
+
+   Emphasis ladder mirrors the neutral chrome (faint rest → soft hover →
+   focus + ring): a flavored field rests on its -soft shade and only
+   escalates to the full color on hover/focus — a resting field shouldn't
+   shout its full-saturation border (tones shift the whole ladder). */
+const inputFlavor = (f, fb) => {
+    const c = (s) => fb
+        ? s
+            ? `var(--ty-color-${f}${s}, var(--ty-color-${f}, var(--ty-color-${fb}${s})))`
+            : `var(--ty-color-${f}, var(--ty-color-${fb}))`
+        : s
+            ? `var(--ty-color-${f}${s}, var(--ty-color-${f}))`
+            : `var(--ty-color-${f})`;
+    return `
+:host([flavor="${f}"]) {
+  --input-accent: var(--ty-input-${f}-border, ${c("-soft")});
+  --input-accent-bold: ${c("")};
+  --input-ring: color-mix(in oklab, ${c("")} 15%, transparent);
+}
+:host([flavor="${f}+"]) {
+  --input-accent: ${c("")};
+  --input-accent-bold: ${c("-strong")};
+  --input-ring: color-mix(in oklab, ${c("-strong")} 15%, transparent);
+}
+:host([flavor="${f}-"]) {
+  --input-accent: ${c("-faint")};
+  --input-accent-bold: ${c("-soft")};
+  --input-ring: color-mix(in oklab, ${c("-soft")} 15%, transparent);
+}
+`;
+};
+/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
+export const inputCustomFlavorCss = (base) => inputFlavor(base, "neutral");
 export const inputStyles = `
 :host {
   display: block;
@@ -10,16 +54,6 @@ export const inputStyles = `
   width: 100%;
 }
 
-:host([size="xl"]) {
-  font-size: 20px;
-}
-
-
-:host([size="xs"]) {
-  font-size: 12px;
-}
-
-
 :host([size="sm"]) {
   font-size: 14px;
 }
@@ -73,24 +107,31 @@ export const inputStyles = `
   gap: 0.5rem; /* No gap by default */
   width: 100%;
   box-sizing: border-box;
-  border: 1px solid var(--input-border, var(--ty-input-border));
+  border: 1px solid var(--input-accent, var(--input-border, var(--ty-input-border)));
   border-radius: var(--ty-radius-base);
   background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));
-  transition: all 0.15s ease-in-out;
-  
+  transition: var(--ty-local-transition, all 0.15s ease-in-out);
+
   /* Default size (md) */
-  min-height: 40px;
+  min-height: var(--ty-size-md);
   padding: 0 12px;
 }
 
-/* Wrapper states */
-.input-wrapper:hover:not(.disabled) {
-  border-color: var(--input-border-hover, var(--ty-input-border-hover));
+/* Wrapper states — --input-accent* are set by the flavor rules below;
+   without a flavor attribute they're unset and the default chrome chain
+   (per-instance --input-* var, then --ty-input-* token) applies. */
+/* :not(.focused) — hover must never override focus. Without the guard this
+   rule out-ranks .focused by specificity, so hovering a FOCUSED unflavored
+   input swapped its primary focus border for the dimmer neutral hover
+   border (focus ring stayed, border dimmed — read as a glitch). Same
+   pattern as date-picker's :hover:not(.open). */
+.input-wrapper:hover:not(.disabled):not(.focused) {
+  border-color: var(--input-accent-bold, var(--input-border-hover, var(--ty-input-border-hover)));
 }
 
 .input-wrapper.focused {
-  border-color: var(--input-border-focus, var(--ty-input-border-focus));
-  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));
+  border-color: var(--input-accent-bold, var(--input-border-focus, var(--ty-input-border-focus)));
+  box-shadow: 0 0 0 3px var(--input-ring, var(--input-shadow-focus, var(--ty-input-shadow-focus)));
 }
 
 .input-wrapper.disabled {
@@ -125,13 +166,13 @@ export const inputStyles = `
   background: none;
   cursor: pointer;
   color: var(--input-placeholder, var(--ty-input-placeholder));
-  transition: color 0.15s ease-in-out;
+  transition: var(--ty-local-transition, color 0.15s ease-in-out);
 }
 .password-toggle:hover {
   color: var(--input-color, var(--ty-input-color));
 }
 .password-toggle:focus-visible {
-  outline: 2px solid var(--ty-color-primary);
+  outline: 2px solid var(--input-accent, var(--ty-color-primary));
   outline-offset: 2px;
   border-radius: 2px;
 }
@@ -214,22 +255,9 @@ input::placeholder {
 
 /* ===== SIZE MODIFIERS ===== */
 
-/* Extra Small */
-.input-wrapper.xs {
-  min-height: 32px;
-  padding: 0 8px;
-  border-radius: var(--ty-input-radius-xs, var(--ty-radius-base));
-}
-
-.input-wrapper.xs input {
-  font-size: var(--ty-font-xs);
-  line-height: var(--ty-leading-xs);
-  letter-spacing: var(--ty-tracking-xs);
-}
-
 /* Small */
 .input-wrapper.sm {
-  min-height: 36px;
+  min-height: var(--ty-size-sm);
   padding: 0 10px;
   border-radius: var(--ty-input-radius-sm, var(--ty-radius-base));
 }
@@ -242,7 +270,7 @@ input::placeholder {
 
 /* Medium (default) */
 .input-wrapper.md {
-  min-height: 40px;
+  min-height: var(--ty-size-md);
   padding: 0 12px;
   border-radius: var(--ty-input-radius-md, var(--ty-radius-base));
 }
@@ -255,7 +283,7 @@ input::placeholder {
 
 /* Large */
 .input-wrapper.lg {
-  min-height: 44px;
+  min-height: var(--ty-size-lg);
   padding: 0 14px;
   border-radius: var(--ty-input-radius-lg, var(--ty-radius-base));
 }
@@ -266,92 +294,8 @@ input::placeholder {
   letter-spacing: var(--ty-tracking-base);
 }
 
-/* Extra Large */
-.input-wrapper.xl {
-  min-height: 48px;
-  padding: 0 16px;
-  border-radius: var(--ty-input-radius-xl, var(--ty-radius-base));
-}
-
-.input-wrapper.xl input {
-  font-size: var(--ty-font-lg);
-  line-height: var(--ty-leading-lg);
-  letter-spacing: var(--ty-tracking-lg);
-}
-
-/* ===== SEMANTIC FLAVOR MODIFIERS ===== */
-
-/* Primary */
-.input-wrapper.primary {
-  border-color: var(--ty-input-primary-border, var(--ty-color-primary));
-}
-
-.input-wrapper.primary:hover:not(.disabled) {
-  border-color: var(--ty-color-primary-bold);
-}
-
-.input-wrapper.primary.focused {
-  border-color: var(--ty-color-primary-bold);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 15%, transparent);
-}
-
-/* Secondary */
-.input-wrapper.secondary {
-  border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));
-}
-
-.input-wrapper.secondary.focused {
-  border-color: var(--ty-color-secondary-bold);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-secondary) 15%, transparent);
-}
-
-/* Success */
-.input-wrapper.success {
-  border-color: var(--ty-input-success-border);
-}
-
-.input-wrapper.success:hover:not(.disabled) {
-  border-color: var(--ty-color-success-bold);
-}
-
-.input-wrapper.success.focused {
-  border-color: var(--ty-color-success-bold);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-success) 15%, transparent);
-}
-
-/* Danger */
-.input-wrapper.danger {
-  border-color: var(--ty-input-danger-border);
-}
-
-.input-wrapper.danger:hover:not(.disabled) {
-  border-color: var(--ty-color-danger-bold);
-}
-
-.input-wrapper.danger.focused {
-  border-color: var(--ty-color-danger-bold);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);
-}
-
-/* Warning */
-.input-wrapper.warning {
-  border-color: var(--ty-input-warning-border);
-}
-
-.input-wrapper.warning:hover:not(.disabled) {
-  border-color: var(--ty-color-warning-bold);
-}
-
-.input-wrapper.warning.focused {
-  border-color: var(--ty-color-warning-bold);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-warning) 15%, transparent);
-}
-
-/* Neutral (default) */
-.input-wrapper.neutral.focused {
-  border-color: var(--input-border-focus, var(--ty-input-border-focus));
-  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));
-}
+/* ===== SEMANTIC FLAVOR MODIFIERS (set --input-accent*, consumed above) ===== */
+${FLAVORS.filter((f) => f !== "neutral").map((f) => inputFlavor(f)).join("")}
 
 /* ===== ACCESSIBILITY ENHANCEMENTS ===== */
 

package/lib/styles/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../src/styles/input.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwZ1B,CAAA"}
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../src/styles/input.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C;;;;;;;;;;;;;;sEAcsE;AACtE,MAAM,WAAW,GAAG,CAAC,CAAS,EAAE,EAAW,EAAE,EAAE;IAC7C,MAAM,CAAC,GAAG,CAAC,CAAS,EAAE,EAAE,CACtB,EAAE;QACA,CAAC,CAAC,CAAC;YACD,CAAC,CAAC,kBAAkB,CAAC,GAAG,CAAC,oBAAoB,CAAC,oBAAoB,EAAE,GAAG,CAAC,KAAK;YAC7E,CAAC,CAAC,kBAAkB,CAAC,oBAAoB,EAAE,IAAI;QACjD,CAAC,CAAC,CAAC;YACD,CAAC,CAAC,kBAAkB,CAAC,GAAG,CAAC,oBAAoB,CAAC,IAAI;YAClD,CAAC,CAAC,kBAAkB,CAAC,GAAG,CAAC;IAC/B,OAAO;iBACQ,CAAC;mCACiB,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC;yBACjC,CAAC,CAAC,EAAE,CAAC;sCACQ,CAAC,CAAC,EAAE,CAAC;;iBAE1B,CAAC;oBACE,CAAC,CAAC,EAAE,CAAC;yBACA,CAAC,CAAC,SAAS,CAAC;sCACC,CAAC,CAAC,SAAS,CAAC;;iBAEjC,CAAC;oBACE,CAAC,CAAC,QAAQ,CAAC;yBACN,CAAC,CAAC,OAAO,CAAC;sCACG,CAAC,CAAC,OAAO,CAAC;;CAE/C,CAAC;AACF,CAAC,CAAC;AAEF,8EAA8E;AAC9E,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAEnF,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwPzB,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D3E,CAAA"}

package/lib/styles/multiselect.d.ts

@@ -2,5 +2,7 @@
  * Multiselect Component Styles
  * PORTED FROM: clj/ty/components/multiselect.css
  */
-export declare const multiselectStyles = "\n/* Multiselect-specific styles extending dropdown base styles */\n\n:host {\n  --mobile-border-color: var(--ty-border, #5858587d);\n}\n\n/* ===== DIALOG POSITIONING SUPPORT ===== */\n\n.dropdown-dialog {\n  position: fixed;\n  width: var(--dropdown-width, 200px);\n  max-width: 100vw;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  box-sizing: border-box;\n  padding: var(--dropdown-padding, 20px);\n  /* Modal handles z-index automatically */\n\n  /* Hidden by default */\n  opacity: 0;\n  transition: opacity 400ms ease;\n\n  transform: translate(var(--dropdown-offset-x, 0px), var(--dropdown-offset-y, 0px));\n  top: -1000px;\n  left: -1000px;\n}\n\n/* When opened via showModal(), apply flex layout and direction */\n.dropdown-dialog[open] {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Direction-based positioning with CSS classes */\n.dropdown-dialog.position-below {\n  left: var(--dropdown-x);\n  top: var(--dropdown-y);\n}\n\n.dropdown-dialog.position-above {\n  left: var(--dropdown-x);\n  bottom: var(--dropdown-y);\n  top: auto;\n  flex-direction: column-reverse;\n}\n\n.dropdown-dialog.position-above .dropdown-header {\n  margin-top: 4px;\n}\n\n.dropdown-dialog.position-below .dropdown-header {\n  margin-bottom: 4px;\n}\n\n.dropdown-dialog.position-below .dropdown-options {\n  /* Optional: Add upward-pointing shadow for below positioning */\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1), var(--ty-shadow-md);\n}\n\n/* Animate when .open class is added */\n.dropdown-dialog.open {\n  opacity: 1;\n}\n\n.dropdown-dialog.open .dropdown-options {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n}\n\n.dropdown-dialog::backdrop {\n  background: transparent;\n}\n\n/* ===== DIALOG HEADER ===== */\n\n.dropdown-header {\n  display: flex;\n  align-items: center;\n  gap: var(--ty-spacing-2);\n  position: relative;\n}\n\n.dropdown-search-input {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--input-bg, var(--ty-input-bg));\n  color: var(--input-color, var(--ty-input-color));\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-md);\n  font-family: var(--ty-font-sans);\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  min-height: var(--ty-size-md);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transition: var(--ty-transition-all);\n  outline: none;\n}\n\n.dropdown-search-input: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.dropdown-search-input:disabled {\n  background-color: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.dropdown-search-input::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n}\n\n.dropdown-search-chevron {\n  position: absolute;\n  top: 50%;\n  right: var(--ty-spacing-3);\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  transition: var(--ty-transition-transform);\n  pointer-events: none;\n}\n\n.dropdown-search-chevron.open {\n  transform: translateY(-50%) rotate(180deg);\n}\n\n.dropdown-search-chevron svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ===== MULTISELECT-SPECIFIC STYLES ===== */\n\n/* Multiselect stub modifications */\n.multiselect-stub {\n  min-height: 2.5rem;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n  align-items: center;\n  padding: 0.5rem 2.5rem 0.5rem 0.75rem;\n  /* Transitions - includes opacity for open state */\n  transition: var(--ty-transition-all), opacity 0.2s ease;\n  outline: none;\n  background: var(--input-bg, var(--ty-input-bg));\n  color: var(--input-color, var(--ty-input-color));\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-md);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  cursor: pointer;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.multiselect-stub:hover {\n  border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.multiselect-stub[disabled] {\n  background-color: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Hide stub when dropdown is open */\n.dropdown-wrapper:has(.dropdown-chevron.open) .multiselect-stub {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Hide stub chips when mobile dialog is open (let modal show them) */\n.dropdown-mode-mobile .dropdown-wrapper:has(.mobile-dialog[open]) .multiselect-chips {\n  display: none;\n}\n\n/* When tags are present, reduce padding to make room */\n.multiselect-stub.has-tags {\n  padding: 0.25rem 2.5rem 0.25rem 0.5rem;\n  width: 100%;\n}\n\n.multiselect-stub.has-tags slot[name=\"selected\"] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.25rem;\n}\n\n/* ===== CHEVRON INDICATOR ===== */\n\n.dropdown-chevron {\n  position: absolute;\n  top: 50%;\n  right: var(--ty-spacing-3);\n  transform: translateY(-50%);\n  width: 1rem;\n  height: 1rem;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  transition: var(--ty-transition-transform);\n  pointer-events: none;\n}\n\n.dropdown-chevron.open {\n  transform: translateY(-50%) rotate(180deg);\n}\n\n.dropdown-chevron svg {\n  width: 100%;\n  height: 100%;\n}\n\n\n/* Tags container */\n.multiselect-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  align-items: center;\n  min-width: 0;\n}\n\n.dropdown-placeholder {\n  flex-grow: 1;\n  color: var(--input-placeholder, var(--ty-input-placeholder, #9ca3af));\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-light);\n  font-style: italic;\n}\n\n/* Placeholder styling when tags are present */\n.dropdown-placeholder.hidden {\n  display: none;\n}\n\n/* Options area styling - Override for multiselect */\n.dropdown-options {\n  opacity: 0;\n  background: var(--input-bg, var(--ty-input-bg));\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-lg);\n  max-height: 16rem;\n  width: 100%;\n  max-width: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n  box-sizing: border-box;\n  position: relative;\n  box-shadow:\n    0 20px 25px -5px rgba(0, 0, 0, 0.1),\n    0 10px 10px -5px rgba(0, 0, 0, 0.04);\n\n  /* Animation properties */\n  transform: translateY(-8px) scale(0.95);\n  transition:\n    opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),\n    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n\n  /* Multiselect-specific: flex wrap for tags */\n  display: flex;\n  flex-wrap: wrap;\n  padding: 0.5rem;\n  gap: 0.5rem;\n\n}\n\n/* Hide native scrollbar only when custom scrollbar is active */\n.dropdown-options.ty-custom-scroll {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.dropdown-options.ty-custom-scroll::-webkit-scrollbar {\n  display: none;\n}\n\n/* Options wrapper - positioned container for scrollbar track */\n.dropdown-options-wrapper {\n  position: relative;\n}\n\n/* Show custom scrollbar on hover */\n.dropdown-options-wrapper:hover .ty-scrollbar-track-y.has-overflow {\n  opacity: 1;\n}\n\n/* Make ty-tags in dropdown clickable with pointer cursor */\n.dropdown-options ty-tag {\n  user-select: none;\n  transition: transform 0.1s ease;\n}\n\n.dropdown-options ty-tag:hover {\n  transform: scale(1.02);\n}\n\n.dropdown-options ty-tag:active {\n  transform: scale(0.98);\n}\n\n/* Visual feedback for selected tags in options */\n.dropdown-options ty-tag[selected] {\n  opacity: 0.5;\n}\n\n/* Ensure ty-tag components in multiselect have proper sizing */\n.multiselect-chips ty-tag {\n  max-width: 150px;\n}\n\n/* Responsive adjustments */\n@media (max-width: 640px) {\n  .multiselect-chips ty-tag {\n    max-width: 100px;\n  }\n}\n\n\n/* Ensure proper spacing in container layouts */\n.multiselect-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n/* ===== DROPDOWN WRAPPER & LABEL ===== */\n\n.dropdown-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n.ty-field-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 12px;\n  display: flex;\n  align-items: center;\n}\n\n/* Required indicator - using SVG icon */\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: #ef4444;\n  width: 12px;\n  height: 12px;\n  vertical-align: middle;\n  margin-left: 4px;\n}\n\n.required-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n:host([disabled]) .multiselect-container {\n  pointer-events: none;\n}\n\n/* ============================================================================\n   MOBILE MODAL STYLES\n   ============================================================================ */\n\n.dropdown-mode-mobile .mobile-dialog {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100vw;\n  height: 100vh;\n  max-width: 100vw;\n  max-height: 100vh;\n  margin: 0;\n  padding: 0;\n  padding-top: 10vh; /* Position content from top */\n  border: none;\n  background: transparent; /* Backdrop handles background */\n  /* Note: Don't set display - browser controls <dialog> visibility */\n  align-items: flex-start;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 300ms ease;\n}\n\n/* When opened via showModal(), add flex layout */\n.dropdown-mode-mobile .mobile-dialog[open] {\n  display: flex;\n}\n\n.dropdown-mode-mobile .mobile-dialog.open {\n  opacity: 1;\n}\n\n/* Native dialog backdrop with blur */\n.dropdown-mode-mobile .mobile-dialog::backdrop {\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n}\n\n.dropdown-mode-mobile .mobile-dialog-content {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% - 32px); /* Side margins */\n  max-width: 400px; /* Constrained width like dropdown */\n  min-height: 200px;\n  max-height: calc(90vh - 10vh);\n  opacity: 0;\n  transform: scale(0.95);\n  transition: \n    opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),\n    transform 300ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.dropdown-mode-mobile .mobile-dialog.open .mobile-dialog-content {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.dropdown-mode-mobile .mobile-search-input:focus {\n  border-color: var(--ty-border);\n}\n\n/* Mobile search header - label floats above, search + close below */\n.dropdown-mode-mobile .mobile-search-header {\n  flex-shrink: 0;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n  padding: 0;\n  background: transparent;\n  position: relative;\n}\n\n.dropdown-mode-mobile .mobile-header-content {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n}\n\n/* Header for non-searchable (label + close button) */\n.dropdown-mode-mobile .mobile-header-nosearch {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-bottom: 16px;\n  padding: 0;\n  background: transparent;\n  position: relative;\n  min-height: 40px;\n}\n\n.dropdown-mode-mobile .mobile-header-label {\n  position: absolute;\n  bottom: 100%;\n  left: 6px;\n  margin-bottom: 4px;\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n  font-weight: 700;\n  color: var(--ty-color-neutral);\n  pointer-events: none;\n}\n\n/* Close button - circular with border (matches dropdown.ts) */\n.dropdown-mode-mobile .mobile-close-button {\n  flex-shrink: 0;\n  width: 36px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--ty-surface-floating);\n  border: 2px solid var(--mobile-border-color);\n  border-radius: 50%;\n  color: var(--ty-text-strong);\n  cursor: pointer;\n  transition: var(--ty-transition-all);\n  padding: 0;\n}\n\n.dropdown-mode-mobile .mobile-close-button:hover {\n  background: var(--ty-bg-neutral);\n  border-color: var(--ty-border);\n  color: var(--ty-text-strong);\n}\n\n.dropdown-mode-mobile .mobile-close-button:active {\n  transform: scale(0.9);\n}\n\n.dropdown-mode-mobile .mobile-close-button svg {\n  width: 24px;\n  height: 24px;\n}\n\n/* Mobile search input (matches dropdown.ts) */\n.dropdown-mode-mobile .mobile-search-input {\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--ty-surface-floating);\n  color: var(--ty-text);\n  border: 2px solid;\n  border-color: var(--mobile-border-color);\n  border-radius: var(--ty-radius-md);\n  font-family: var(--ty-font-sans);\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  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  height: 40px;\n  transition: var(--ty-transition-all);\n  outline: none;\n}\n\n.dropdown-mode-mobile .mobile-search-input::placeholder {\n  color: var(--ty-text-faint);\n}\n\n.dropdown-mode-mobile .mobile-search-input:focus {\n  border-color: var(--ty-border);\n}\n\n/* ============================================================================\n   MOBILE BODY & SECTIONS - UPDATED STRUCTURE\n   ============================================================================ */\n\n/* Mobile body - contains both sections */\n.dropdown-mode-mobile .mobile-body {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  height: var(--body-height, 350px);\n  max-height: 350px;\n  overflow: hidden;\n  background: var(--ty-surface-floating);\n  border-radius: var(--ty-radius-lg);\n  box-shadow: \n    0 20px 25px -5px rgba(0, 0, 0, 0.1),\n    0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  border: 2px solid;\n  border-color: var(--mobile-border-color);\n}\n\n/* ===== SECTION HEADERS - Labels, not buttons ===== */\n\n.dropdown-mode-mobile .section-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 36px;\n  flex-shrink: 0;\n  padding: 0 16px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--ty-text-bold);\n  background: transparent;\n  cursor: default;\n  user-select: none;\n}\n\n.dropdown-mode-mobile .section-header .section-title {\n  flex: 1;\n}\n\n.dropdown-mode-mobile .section-header .section-count {\n  font-weight: 500;\n  color: var(--ty-text-faint);\n  margin-left: 0.25rem;\n}\n\n/* ===== SELECTED STRIP - pinned, capped height, collapses when empty ===== */\n\n.dropdown-mode-mobile .mobile-selected-section {\n  display: flex;\n  flex-direction: column;\n  background: var(--ty-input-bg);\n  overflow: hidden;\n  flex: 0 0 auto;\n  max-height: 40%;\n  transition: max-height 200ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Empty: collapse to header only */\n.dropdown-mode-mobile .mobile-selected-section[data-empty=\"true\"] {\n  max-height: 36px;\n  flex: 0 0 36px;\n}\n\n.dropdown-mode-mobile .mobile-selected-section .section-content {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: 0.75rem 1rem;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  align-content: flex-start;\n  /* Soft fade at bottom edge \u2014 hints at scrollable overflow */\n  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 12px), transparent);\n  mask-image: linear-gradient(to bottom, black calc(100% - 12px), transparent);\n}\n\n/* ===== AVAILABLE LIST - takes remaining space ===== */\n\n.dropdown-mode-mobile .mobile-available-section {\n  display: flex;\n  flex-direction: column;\n  background: var(--ty-input-bg);\n  overflow: hidden;\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n.dropdown-mode-mobile .mobile-available-section .section-content {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  padding: 0.75rem 1rem;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  align-content: flex-start;\n}\n\n/* ===== EMPTY STATES =====\n   Selected strip collapses (no text needed).\n   Available shows the empty message only when there are zero tags total. */\n\n.dropdown-mode-mobile .empty-state {\n  display: none;\n  width: 100%;\n  padding: 2rem 1rem;\n  text-align: center;\n  color: var(--ty-text-faint);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-style: italic;\n}\n\n.dropdown-mode-mobile .mobile-available-section[data-empty=\"true\"] .empty-state {\n  display: block;\n}\n\n.dropdown-mode-mobile .mobile-selected-section[data-empty=\"true\"] .section-content,\n.dropdown-mode-mobile .mobile-available-section[data-empty=\"true\"] slot {\n  display: none;\n}\n\n/* ===== TAG STYLING IN MOBILE ===== */\n\n.dropdown-mode-mobile .section-content ::slotted(ty-tag) {\n  cursor: pointer;\n  user-select: none;\n  transition: transform 0.1s ease;\n  margin: 2px 0; /* Vertical spacing like dropdown options */\n  /* Fade + scale entry \u2014 replays on each (re)insertion when a tag moves\n     between selected and available slots */\n  animation: ty-multiselect-tag-enter 180ms cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n@media (hover: hover) {\n  .dropdown-mode-mobile .section-content ::slotted(ty-tag:hover) {\n    transform: scale(1.02);\n  }\n}\n\n.dropdown-mode-mobile .section-content ::slotted(ty-tag:active) {\n  transform: scale(0.96);\n}\n\n/* Dimmed appearance for hidden filtered tags */\n.dropdown-mode-mobile .section-content ::slotted(ty-tag[hidden]) {\n  display: none !important;\n}\n\n@keyframes ty-multiselect-tag-enter {\n  from { opacity: 0; transform: scale(0.85); }\n  to   { opacity: 1; transform: scale(1); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dropdown-mode-mobile .section-content ::slotted(ty-tag) {\n    animation: none;\n  }\n}\n\n/* ==================== LOADING STATE ====================\n   Spinner overlay shown inside the options area while the parent\n   (external-search mode) is fetching. Search input stays usable.\n\n   Carries its own surface so it stays visible even when the host\n   has restyled the popup with a transparent or unusual background.\n   Override with --ty-loader-bg / --ty-loader-radius / --ty-loader-border.\n*/\n.dropdown-loading {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ty-spacing-2);\n  padding: var(--ty-spacing-4) var(--ty-spacing-3);\n  color: var(--ty-text-soft);\n  font-size: var(--ty-font-sm);\n  min-height: 4rem;\n  /* Match the .dropdown-options popup look \u2014 same background, border, radius, shadow */\n  background: var(--ty-loader-bg, var(--input-bg, var(--ty-input-bg)));\n  border: 1px solid var(--ty-loader-border, var(--input-border, var(--ty-input-border)));\n  border-radius: var(--ty-loader-radius, var(--ty-radius-lg));\n  box-shadow: var(--ty-loader-shadow, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));\n  box-sizing: border-box;\n}\n\n.dropdown-options-wrapper.loading .dropdown-loading {\n  display: flex;\n}\n\n/* Slot is transparent for layout \u2014 fallback (spinner + text) and user-provided\n   slotted content both act as direct flex children of .dropdown-loading. */\n.dropdown-loading > slot[name=\"loading\"] {\n  display: contents;\n}\n\n/* Mobile: full-screen dialog is the surface \u2014 drop the card chrome,\n   stack vertically, scale up so it feels native to a fullscreen view.\n   Slotted content adapts automatically since the slot is display:contents. */\n.dropdown-mode-mobile .dropdown-loading {\n  background: transparent;\n  border: none;\n  box-shadow: none;\n  flex: 1;\n  flex-direction: column;\n  gap: var(--ty-spacing-3);\n  padding: var(--ty-spacing-8) var(--ty-spacing-4);\n  min-height: 12rem;\n}\n\n.dropdown-mode-mobile .dropdown-loading-spinner {\n  width: 2rem;\n  height: 2rem;\n}\n\n.dropdown-mode-mobile .dropdown-loading-text {\n  font-size: var(--ty-font-base);\n}\n\n.dropdown-options-wrapper.loading .dropdown-options,\n.dropdown-options-wrapper.loading > slot#options-slot,\n.dropdown-options-wrapper.loading .empty-state {\n  display: none;\n}\n\n.dropdown-loading-spinner {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.125rem;\n  height: 1.125rem;\n  flex-shrink: 0;\n  animation: ty-multiselect-spin 0.7s linear infinite;\n  color: var(--ty-color-primary);\n}\n\n.dropdown-loading-spinner svg {\n  width: 100%;\n  height: 100%;\n}\n\n.dropdown-loading-text {\n  color: var(--ty-text-soft);\n}\n\n@keyframes ty-multiselect-spin {\n  to { transform: rotate(360deg); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .dropdown-loading-spinner {\n    animation-duration: 1.6s;\n  }\n}\n\n/* Custom scrollbar styles */\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
+/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
+export declare const selectCustomFlavorCss: (base: string) => string;
+export declare const multiselectStyles: string;
 //# sourceMappingURL=multiselect.d.ts.map

package/lib/styles/multiselect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../src/styles/multiselect.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,eAAO,MAAM,iBAAiB,sjyBAkzB7B,CAAC"}
+{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../src/styles/multiselect.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAyBH,8EAA8E;AAC9E,eAAO,MAAM,qBAAqB,GAAI,MAAM,MAAM,WAAkC,CAAC;AAErF,eAAO,MAAM,iBAAiB,QAqzB7B,CAAC"}

package/lib/styles/multiselect.js

@@ -2,7 +2,28 @@
  * Multiselect Component Styles
  * PORTED FROM: clj/ty/components/multiselect.css
  */
+import { FLAVORS } from "../types/common.js";
 import { customScrollbarStyles } from "./custom-scrollbar.js";
+/* Flavor rules only set --select-accent (border) and --select-accent-bold
+   (hover border); the .multiselect-stub rules below consume them. Doubles
+   as the per-instance override API: `ty-select { --select-accent: … }`.
+   Neutral is skipped — it IS the default unstyled chrome (--ty-input-*
+   tokens), same convention as ty-input/ty-date-picker. Fallback flavor `fb`
+   is used for custom flavors so missing tokens degrade to neutral. */
+const selectFlavor = (f, fb) => {
+    const c = (s) => fb
+        ? s
+            ? `var(--ty-color-${f}${s}, var(--ty-color-${f}, var(--ty-color-${fb}${s})))`
+            : `var(--ty-color-${f}, var(--ty-color-${fb}))`
+        : `var(--ty-color-${f}${s})`;
+    return `
+:host([flavor="${f}"])  { --select-accent: var(--ty-input-${f}-border, ${c("")}); --select-accent-bold: ${c("-bold")}; }
+:host([flavor="${f}+"]) { --select-accent: ${c("-strong")}; --select-accent-bold: ${c("-strong")}; }
+:host([flavor="${f}-"]) { --select-accent: ${c("-soft")}; --select-accent-bold: ${c("")}; }
+`;
+};
+/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
+export const selectCustomFlavorCss = (base) => selectFlavor(base, "neutral");
 export const multiselectStyles = `
 /* Multiselect-specific styles extending dropdown base styles */
 
@@ -160,7 +181,7 @@ export const multiselectStyles = `
   outline: none;
   background: var(--input-bg, var(--ty-input-bg));
   color: var(--input-color, var(--ty-input-color));
-  border: 1px solid var(--input-border, var(--ty-input-border));
+  border: 1px solid var(--select-accent, var(--input-border, var(--ty-input-border)));
   border-radius: var(--ty-radius-md);
   font-family: var(--ty-font-sans);
   font-size: var(--ty-font-sm);
@@ -173,7 +194,7 @@ export const multiselectStyles = `
 }
 
 .multiselect-stub:hover {
-  border-color: var(--input-border-hover, var(--ty-input-border-hover));
+  border-color: var(--select-accent-bold, var(--input-border-hover, var(--ty-input-border-hover)));
 }
 
 .multiselect-stub[disabled] {
@@ -821,5 +842,8 @@ export const multiselectStyles = `
 
 /* Custom scrollbar styles */
 ${customScrollbarStyles}
+
+/* ===== FLAVOR VARIANTS (set --select-accent*, consumed above) ===== */
+${FLAVORS.filter((f) => f !== "neutral").map((f) => selectFlavor(f)).join("")}
 `;
 //# sourceMappingURL=multiselect.js.map

package/lib/styles/multiselect.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.js","sourceRoot":"","sources":["../../src/styles/multiselect.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAizB/B,qBAAqB;CACtB,CAAC"}
+{"version":3,"file":"multiselect.js","sourceRoot":"","sources":["../../src/styles/multiselect.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9D;;;;;sEAKsE;AACtE,MAAM,YAAY,GAAG,CAAC,CAAS,EAAE,EAAW,EAAE,EAAE;IAC9C,MAAM,CAAC,GAAG,CAAC,CAAS,EAAE,EAAE,CACtB,EAAE;QACA,CAAC,CAAC,CAAC;YACD,CAAC,CAAC,kBAAkB,CAAC,GAAG,CAAC,oBAAoB,CAAC,oBAAoB,EAAE,GAAG,CAAC,KAAK;YAC7E,CAAC,CAAC,kBAAkB,CAAC,oBAAoB,EAAE,IAAI;QACjD,CAAC,CAAC,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC;IACjC,OAAO;iBACQ,CAAC,0CAA0C,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,4BAA4B,CAAC,CAAC,OAAO,CAAC;iBACnG,CAAC,2BAA2B,CAAC,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC,SAAS,CAAC;iBAC/E,CAAC,2BAA2B,CAAC,CAAC,OAAO,CAAC,2BAA2B,CAAC,CAAC,EAAE,CAAC;CACtF,CAAC;AACF,CAAC,CAAC;AAEF,8EAA8E;AAC9E,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAErF,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAizB/B,qBAAqB;;;EAGrB,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;CAC5E,CAAC"}

package/lib/styles/option.d.ts

@@ -2,5 +2,5 @@
  * Option Component Styles
  * PORTED FROM: clj/ty/components/option.css
  */
-export declare const optionStyles = "\n/* Ty Option Component Styles */\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  /* Ensure content is clickable */\n  cursor: pointer;\n  user-select: none;\n\n  /* Smooth transitions */\n  transition: var(--ty-transition-all);\n\n  /* Text styling \u2014 Linear-paired typography */\n  color: var(--ty-text);\n  font-family: var(--ty-font-sans);\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:host([cloned]) .option-content {\n  padding: 0px;\n  background: transparent;\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  font-weight: var(--ty-font-semibold);\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, visible only on selected options */\n.option-check {\n  display: none;\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  display: block;\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-text {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.option-clear-btn {\n  flex-shrink: 0;\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.5);\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  padding: 0;\n  transition: all 150ms ease;\n  opacity: 0.9;\n}\n\n.option-clear-btn:hover {\n  background: rgba(0, 0, 0, 0.7);\n  opacity: 1;\n  transform: scale(1.05);\n}\n\n.option-clear-btn:active {\n  background: rgba(0, 0, 0, 0.85);\n  transform: scale(0.95);\n}\n\n.option-clear-btn svg {\n  width: 16px;\n  height: 16px;\n  color: #ffffff;\n  stroke-width: 2.5;\n}\n\n.option-content[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.option-content[hidden] {}\n\n/* Ensure nested elements inherit proper styling */\n.option-content * {\n  pointer-events: none;\n}\n\n/* CRITICAL: Re-enable pointer events on clear button */\n.option-clear-btn {\n  pointer-events: auto !important;\n}\n\n.option-clear-btn * {\n  pointer-events: none;\n}\n";
+export declare const optionStyles = "\n/* Ty Option Component Styles */\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  /* Ensure content is clickable */\n  cursor: pointer;\n  user-select: none;\n\n  /* Smooth transitions */\n  transition: var(--ty-transition-all);\n\n  /* Text styling \u2014 Linear-paired typography */\n  color: var(--ty-text);\n  font-family: var(--ty-font-sans);\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:host([cloned]) .option-content {\n  padding: 0px;\n  background: transparent;\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  font-weight: var(--ty-font-semibold);\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, visible only on selected options */\n.option-check {\n  display: none;\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  display: block;\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/* Ensure nested elements inherit proper styling */\n.option-content * {\n  pointer-events: none;\n}\n";
 //# sourceMappingURL=option.d.ts.map

package/lib/styles/option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../src/styles/option.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,YAAY,4vFAsIxB,CAAA"}
+{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../src/styles/option.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,YAAY,62DAmFxB,CAAA"}

package/lib/styles/option.js

@@ -74,48 +74,6 @@ export const optionStyles = `
   background: var(--ty-bg-neutral-soft);
 }
 
-.option-text {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.option-clear-btn {
-  flex-shrink: 0;
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.5);
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  padding: 0;
-  transition: all 150ms ease;
-  opacity: 0.9;
-}
-
-.option-clear-btn:hover {
-  background: rgba(0, 0, 0, 0.7);
-  opacity: 1;
-  transform: scale(1.05);
-}
-
-.option-clear-btn:active {
-  background: rgba(0, 0, 0, 0.85);
-  transform: scale(0.95);
-}
-
-.option-clear-btn svg {
-  width: 16px;
-  height: 16px;
-  color: #ffffff;
-  stroke-width: 2.5;
-}
-
 .option-content[disabled] {
   opacity: 0.5;
   cursor: not-allowed;
@@ -127,14 +85,5 @@ export const optionStyles = `
 .option-content * {
   pointer-events: none;
 }
-
-/* CRITICAL: Re-enable pointer events on clear button */
-.option-clear-btn {
-  pointer-events: auto !important;
-}
-
-.option-clear-btn * {
-  pointer-events: none;
-}
 `;
 //# sourceMappingURL=option.js.map

package/lib/styles/option.js.map

@@ -1 +1 @@
-{"version":3,"file":"option.js","sourceRoot":"","sources":["../../src/styles/option.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsI3B,CAAA"}
+{"version":3,"file":"option.js","sourceRoot":"","sources":["../../src/styles/option.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmF3B,CAAA"}

package/lib/styles/radio.d.ts

@@ -4,5 +4,7 @@
  * ty-radio-group: optional label + vertical/horizontal stack of radios + error message
  * ty-radio: circle with inner dot when checked
  */
-export declare const radioStyles = "\n\n:host {\n  display: block;\n  font-family: var(--ty-font-sans);\n  width: 100%;\n}\n\n:host([size=\"xl\"]) {\n  font-size: 20px;\n}\n\n\n:host([size=\"xs\"]) {\n  font-size: 12px;\n}\n\n\n:host([size=\"sm\"]) {\n  font-size: 14px;\n}\n\n:host([size=\"lg\"]) {\n  font-size: 18px;\n}\n\n.input-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ===== LABEL STYLING ===== */\n\n.ty-field-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 12px;\n  display: flex;\n  align-items: center;\n}\n\n/* Required indicator - using SVG icon */\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/* ===== INPUT WRAPPER WITH SLOTS ===== */\n\n.input-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem; /* No gap by default */\n  width: 100%;\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(--input-bg, var(--ty-input-bg)));\n  transition: all 0.15s ease-in-out;\n  \n  /* Default size (md) */\n  min-height: 40px;\n  padding: 0 12px;\n}\n\n/* Wrapper states */\n.input-wrapper:hover:not(.disabled) {\n  border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.input-wrapper.focused {\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.input-wrapper.disabled {\n  cursor: not-allowed;\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/* ===== SLOT STYLING ===== */\n\n/* Style slotted content directly (no wrappers needed) */\n::slotted([slot=\"start\"]),\n::slotted([slot=\"end\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: var(--ty-color-text-soft);\n}\n\n/* Password reveal toggle (rendered for type=\"password\") */\n.password-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  transition: color 0.15s ease-in-out;\n}\n.password-toggle:hover {\n  color: var(--input-color, var(--ty-input-color));\n}\n.password-toggle:focus-visible {\n  outline: 2px solid var(--ty-color-primary);\n  outline-offset: 2px;\n  border-radius: 2px;\n}\n.password-toggle svg {\n  width: 1rem;\n  height: 1rem;\n}\n\n/* Icon sizing for slotted icons */\n::slotted(ty-icon) {\n  width: 1em;\n  height: 1em;\n  flex-shrink: 0;\n}\n\n/* ===== ERROR MESSAGE STYLING ===== */\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: 12px;\n}\n\n/* Error state for wrapper */\n.input-wrapper.error {\n  border-color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-soft);\n}\n\n.input-wrapper.error.focused {\n  border-color: var(--ty-color-danger-bold);\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== INPUT BASE STYLING ===== */\n\ninput {\n  /* Reset and base styles \u2014 Linear-paired typography */\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: var(--input-color, var(--ty-input-color));\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  font-weight: var(--ty-font-normal);\n  padding: 0;\n  margin: 0;\n}\n\n/* Remove number input spinner arrows */\ninput[type=\"number\"]::-webkit-outer-spin-button,\ninput[type=\"number\"]::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput[type=\"number\"] {\n  -moz-appearance: textfield;\n}\n\n/* Disabled state */\ninput:disabled {\n  cursor: not-allowed;\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling */\ninput::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: 400;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\n.input-wrapper.xs {\n  min-height: 32px;\n  padding: 0 8px;\n  border-radius: var(--ty-input-radius-xs, var(--ty-radius-base));\n}\n\n.input-wrapper.xs input {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n}\n\n/* Small */\n.input-wrapper.sm {\n  min-height: 36px;\n  padding: 0 10px;\n  border-radius: var(--ty-input-radius-sm, var(--ty-radius-base));\n}\n\n.input-wrapper.sm input {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Medium (default) */\n.input-wrapper.md {\n  min-height: 40px;\n  padding: 0 12px;\n  border-radius: var(--ty-input-radius-md, var(--ty-radius-base));\n}\n\n.input-wrapper.md input {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Large */\n.input-wrapper.lg {\n  min-height: 44px;\n  padding: 0 14px;\n  border-radius: var(--ty-input-radius-lg, var(--ty-radius-base));\n}\n\n.input-wrapper.lg input {\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n}\n\n/* Extra Large */\n.input-wrapper.xl {\n  min-height: 48px;\n  padding: 0 16px;\n  border-radius: var(--ty-input-radius-xl, var(--ty-radius-base));\n}\n\n.input-wrapper.xl input {\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== SEMANTIC FLAVOR MODIFIERS ===== */\n\n/* Primary */\n.input-wrapper.primary {\n  border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.input-wrapper.primary:hover:not(.disabled) {\n  border-color: var(--ty-color-primary-bold);\n}\n\n.input-wrapper.primary.focused {\n  border-color: var(--ty-color-primary-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 15%, transparent);\n}\n\n/* Secondary */\n.input-wrapper.secondary {\n  border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.input-wrapper.secondary.focused {\n  border-color: var(--ty-color-secondary-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-secondary) 15%, transparent);\n}\n\n/* Success */\n.input-wrapper.success {\n  border-color: var(--ty-input-success-border);\n}\n\n.input-wrapper.success:hover:not(.disabled) {\n  border-color: var(--ty-color-success-bold);\n}\n\n.input-wrapper.success.focused {\n  border-color: var(--ty-color-success-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-success) 15%, transparent);\n}\n\n/* Danger */\n.input-wrapper.danger {\n  border-color: var(--ty-input-danger-border);\n}\n\n.input-wrapper.danger:hover:not(.disabled) {\n  border-color: var(--ty-color-danger-bold);\n}\n\n.input-wrapper.danger.focused {\n  border-color: var(--ty-color-danger-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);\n}\n\n/* Warning */\n.input-wrapper.warning {\n  border-color: var(--ty-input-warning-border);\n}\n\n.input-wrapper.warning:hover:not(.disabled) {\n  border-color: var(--ty-color-warning-bold);\n}\n\n.input-wrapper.warning.focused {\n  border-color: var(--ty-color-warning-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-warning) 15%, transparent);\n}\n\n/* Neutral (default) */\n.input-wrapper.neutral.focused {\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/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ninput:focus-visible {\n  outline: none;\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  .input-wrapper {\n    border-width: 2px;\n  }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  .input-wrapper {\n    transition: none;\n  }\n}\n\n/* ===== RESPONSIVE BEHAVIOR ===== */\n\n@media (max-width: 640px) {\n  .input-wrapper.lg {\n    min-height: 40px;\n    padding: 0 12px;\n  }\n\n  .input-wrapper.lg input {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n  }\n\n  .input-wrapper.xl {\n    min-height: 44px;\n    padding: 0 14px;\n  }\n\n  .input-wrapper.xl input {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n  }\n}\n\n@media (max-width: 480px) {\n  .input-wrapper.xl {\n    min-height: 40px;\n    padding: 0 12px;\n  }\n\n  .input-wrapper.xl input {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n  }\n}\n\n\n/* Override input's :host. ty-radio is just the circle (inline);\n   ty-radio-group is a form-field block. */\n:host(ty-radio) {\n  display: inline-flex;\n  width: auto;\n  vertical-align: middle;\n}\n\n:host(ty-radio-group) {\n  display: block;\n  width: 100%;\n}\n\n/* ===== RADIO GROUP ===== */\n.radio-group-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4rem;\n  font-family: var(--ty-font-sans);\n  color: var(--ty-color-text);\n}\n\n.radio-group-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-color-text);\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.radio-group-list {\n  display: flex;\n  gap: 0.6rem;\n  align-items: flex-start;\n}\n\n.radio-group-list.vertical {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.radio-group-list.horizontal {\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n.radio-group-error {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  color: var(--ty-color-danger);\n}\n\n.radio-group-container .required-icon {\n  width: 0.65em;\n  height: 0.65em;\n  color: var(--ty-color-danger);\n}\n.radio-group-container .required-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ===== RADIO ITEM (just the circle) ===== */\n.radio-container {\n  display: inline-block;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  vertical-align: middle;\n}\n\n.radio-container.disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.radio-container:focus-visible .radio-circle,\n.radio-container.focused .radio-circle {\n  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.radio-circle {\n  position: relative;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: 2px solid var(--ty-input-border);\n  background: var(--ty-input-bg);\n  box-sizing: border-box;\n  transition: border-color 0.15s ease-in-out;\n}\n\n.radio-circle::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--ty-color-primary);\n  transform: translate(-50%, -50%) scale(0);\n  transition: transform 0.15s ease-in-out;\n}\n\n.radio-container[aria-checked=\"true\"] .radio-circle {\n  border-color: var(--ty-color-primary);\n}\n\n.radio-container[aria-checked=\"true\"] .radio-circle::after {\n  transform: translate(-50%, -50%) scale(1);\n}\n\n/* Size variants */\n.radio-container.xs .radio-circle { width: 14px; height: 14px; }\n.radio-container.xs .radio-circle::after { width: 6px; height: 6px; }\n\n.radio-container.sm .radio-circle { width: 16px; height: 16px; }\n.radio-container.sm .radio-circle::after { width: 7px; height: 7px; }\n\n.radio-container.lg .radio-circle { width: 22px; height: 22px; }\n.radio-container.lg .radio-circle::after { width: 10px; height: 10px; }\n\n.radio-container.xl .radio-circle { width: 26px; height: 26px; }\n.radio-container.xl .radio-circle::after { width: 12px; height: 12px; }\n\n/* Flavor variants \u2014 color of inner dot + checked border */\n.radio-container.primary[aria-checked=\"true\"] .radio-circle { border-color: var(--ty-color-primary); }\n.radio-container.primary .radio-circle::after { background: var(--ty-color-primary); }\n\n.radio-container.secondary[aria-checked=\"true\"] .radio-circle { border-color: var(--ty-color-secondary); }\n.radio-container.secondary .radio-circle::after { background: var(--ty-color-secondary); }\n\n.radio-container.success[aria-checked=\"true\"] .radio-circle { border-color: var(--ty-color-success); }\n.radio-container.success .radio-circle::after { background: var(--ty-color-success); }\n\n.radio-container.danger[aria-checked=\"true\"] .radio-circle { border-color: var(--ty-color-danger); }\n.radio-container.danger .radio-circle::after { background: var(--ty-color-danger); }\n\n.radio-container.warning[aria-checked=\"true\"] .radio-circle { border-color: var(--ty-color-warning); }\n.radio-container.warning .radio-circle::after { background: var(--ty-color-warning); }\n\n.radio-container.neutral[aria-checked=\"true\"] .radio-circle { border-color: var(--ty-color-neutral); }\n.radio-container.neutral .radio-circle::after { background: var(--ty-color-neutral); }\n";
+/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
+export declare const radioCustomFlavorCss: (base: string) => string;
+export declare const radioStyles: string;
 //# sourceMappingURL=radio.d.ts.map

package/lib/styles/radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/styles/radio.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,eAAO,MAAM,WAAW,y8aAuJvB,CAAC"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/styles/radio.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAqBH,8EAA8E;AAC9E,eAAO,MAAM,oBAAoB,GAAI,MAAM,MAAM,WAAiC,CAAC;AAEnF,eAAO,MAAM,WAAW,QAyIvB,CAAC"}

package/lib/styles/radio.js

@@ -4,7 +4,24 @@
  * ty-radio-group: optional label + vertical/horizontal stack of radios + error message
  * ty-radio: circle with inner dot when checked
  */
+import { FLAVORS } from "../types/common.js";
 import { inputStyles } from "./input.js";
+/* Flavor rules only set --radio-color (checked border + inner dot); base
+   rules below consume it. Doubles as the per-instance override API:
+   `ty-radio { --radio-color: … }`. Fallback flavor `fb` is used for custom
+   flavors so missing tokens degrade to neutral. */
+const radioFlavor = (f, fb) => {
+    const tok = (s) => fb
+        ? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
+        : `var(--ty-color-${f}${s})`;
+    return `
+:host([flavor="${f}"])  { --radio-color: ${tok("")}; }
+:host([flavor="${f}+"]) { --radio-color: ${tok("-strong")}; }
+:host([flavor="${f}-"]) { --radio-color: ${tok("-soft")}; }
+`;
+};
+/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
+export const radioCustomFlavorCss = (base) => radioFlavor(base, "neutral");
 export const radioStyles = `
 ${inputStyles}
 
@@ -101,9 +118,11 @@ ${inputStyles}
   border: 2px solid var(--ty-input-border);
   background: var(--ty-input-bg);
   box-sizing: border-box;
-  transition: border-color 0.15s ease-in-out;
+  transition: var(--ty-local-transition, border-color 0.15s ease-in-out);
 }
 
+/* Default (no flavor attribute) is primary — defaults don't reflect to the
+   host attribute, so the base rules' fallback carries the default look. */
 .radio-circle::after {
   content: "";
   position: absolute;
@@ -112,13 +131,13 @@ ${inputStyles}
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--ty-color-primary);
+  background: var(--radio-color, var(--ty-color-primary));
   transform: translate(-50%, -50%) scale(0);
   transition: transform 0.15s ease-in-out;
 }
 
 .radio-container[aria-checked="true"] .radio-circle {
-  border-color: var(--ty-color-primary);
+  border-color: var(--radio-color, var(--ty-color-primary));
 }
 
 .radio-container[aria-checked="true"] .radio-circle::after {
@@ -138,23 +157,7 @@ ${inputStyles}
 .radio-container.xl .radio-circle { width: 26px; height: 26px; }
 .radio-container.xl .radio-circle::after { width: 12px; height: 12px; }
 
-/* Flavor variants — color of inner dot + checked border */
-.radio-container.primary[aria-checked="true"] .radio-circle { border-color: var(--ty-color-primary); }
-.radio-container.primary .radio-circle::after { background: var(--ty-color-primary); }
-
-.radio-container.secondary[aria-checked="true"] .radio-circle { border-color: var(--ty-color-secondary); }
-.radio-container.secondary .radio-circle::after { background: var(--ty-color-secondary); }
-
-.radio-container.success[aria-checked="true"] .radio-circle { border-color: var(--ty-color-success); }
-.radio-container.success .radio-circle::after { background: var(--ty-color-success); }
-
-.radio-container.danger[aria-checked="true"] .radio-circle { border-color: var(--ty-color-danger); }
-.radio-container.danger .radio-circle::after { background: var(--ty-color-danger); }
-
-.radio-container.warning[aria-checked="true"] .radio-circle { border-color: var(--ty-color-warning); }
-.radio-container.warning .radio-circle::after { background: var(--ty-color-warning); }
-
-.radio-container.neutral[aria-checked="true"] .radio-circle { border-color: var(--ty-color-neutral); }
-.radio-container.neutral .radio-circle::after { background: var(--ty-color-neutral); }
+/* Flavor variants — set --radio-color, consumed by the base rules above */
+${FLAVORS.map((f) => radioFlavor(f)).join("")}
 `;
 //# sourceMappingURL=radio.js.map

package/lib/styles/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/styles/radio.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,MAAM,CAAC,MAAM,WAAW,GAAG;EACzB,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJZ,CAAC"}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/styles/radio.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC;;;mDAGmD;AACnD,MAAM,WAAW,GAAG,CAAC,CAAS,EAAE,EAAW,EAAE,EAAE;IAC7C,MAAM,GAAG,GAAG,CAAC,CAAS,EAAE,EAAE,CACxB,EAAE;QACA,CAAC,CAAC,kBAAkB,CAAC,GAAG,CAAC,oBAAoB,EAAE,GAAG,CAAC,IAAI;QACvD,CAAC,CAAC,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC;IACjC,OAAO;iBACQ,CAAC,yBAAyB,GAAG,CAAC,EAAE,CAAC;iBACjC,CAAC,yBAAyB,GAAG,CAAC,SAAS,CAAC;iBACxC,CAAC,yBAAyB,GAAG,CAAC,OAAO,CAAC;CACtD,CAAC;AACF,CAAC,CAAC;AAEF,8EAA8E;AAC9E,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAEnF,MAAM,CAAC,MAAM,WAAW,GAAG;EACzB,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuIX,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;CAC5C,CAAC"}