tyrell-components 1.0.0-RC12 → 1.0.0-RC13

package/lib/styles/checkbox.js

@@ -5,6 +5,27 @@
  * carries the state. Full flavor color when checked, faint when unchecked,
  * dash at mid-opacity when indeterminate, grayscale when disabled.
  */
+import { FLAVORS } from "../types/common.js";
+/* Flavor rules only set --checkbox-color (checked) / --checkbox-color-off
+   (unchecked) / --checkbox-ring (focus ring); the base rules below consume
+   them. Doubles as the per-instance override API: `ty-checkbox {
+   --checkbox-color: … }`. --checkbox-ring pre-resolves the color-mix() here
+   (rather than inlining a nested var(...,fallback) as a color-mix argument
+   directly in the box-shadow rule) — that nested form fails at
+   computed-value time in some engines. Fallback flavor `fb` is used for
+   custom flavors so missing tokens degrade to neutral. */
+const checkboxFlavor = (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}"])  { --checkbox-color: ${tok("")}; --checkbox-color-off: ${tok("-soft")}; --checkbox-ring: color-mix(in oklab, ${tok("")} 25%, transparent); }
+:host([flavor="${f}+"]) { --checkbox-color: ${tok("-strong")}; --checkbox-color-off: ${tok("-soft")}; --checkbox-ring: color-mix(in oklab, ${tok("-strong")} 25%, transparent); }
+:host([flavor="${f}-"]) { --checkbox-color: ${tok("-soft")}; --checkbox-color-off: ${tok("-faint")}; --checkbox-ring: color-mix(in oklab, ${tok("-soft")} 25%, transparent); }
+`;
+};
+/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
+export const checkboxCustomFlavorCss = (base) => checkboxFlavor(base, "neutral");
 export const checkboxStyles = `
 :host {
   display: inline-flex;
@@ -16,22 +37,26 @@ export const checkboxStyles = `
   display: inline-flex;
   align-items: center;
   outline: none;
-  transition: all 0.15s ease-in-out;
+  transition: var(--ty-local-transition, all 0.15s ease-in-out);
   user-select: none;
   cursor: pointer;
   border-radius: 6px;
   gap: var(--ty-spacing-1);
-  color: var(--ty-text-faint);
+  /* Default (no flavor attribute) is neutral — defaults don't reflect to the
+     host attribute, so the fallbacks here carry the default look. */
+  color: var(--checkbox-color-off, var(--ty-color-neutral-soft));
 }
 
 .checkbox-container[aria-checked="true"] {
-  color: var(--ty-text);
+  color: var(--checkbox-color, var(--ty-color-neutral));
 }
 
-/* Visible focus ring (keyboard) — .focused is toggled by the component */
+/* Visible focus ring (keyboard) — .focused is toggled by the component.
+   Matches the checked-state color so a danger checkbox gets a red ring,
+   not a fixed primary one. */
 .checkbox-container.focused,
 .checkbox-container:focus-visible {
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 25%, transparent);
+  box-shadow: 0 0 0 3px var(--checkbox-ring, color-mix(in oklab, var(--ty-color-primary) 25%, transparent));
 }
 
 .checkbox-icon {
@@ -39,7 +64,7 @@ export const checkboxStyles = `
   align-items: center;
   justify-content: center;
   color: inherit;
-  transition: color 0.15s ease-in-out;
+  transition: var(--ty-local-transition, color 0.15s ease-in-out);
   pointer-events: none;
   /* Let the container handle the click */
 }
@@ -71,55 +96,8 @@ export const checkboxStyles = `
   height: 24px;
 }
 
-/* ===== SEMANTIC FLAVORS ===== */
-
-.checkbox-container.primary {
-  color: var(--ty-color-primary-soft);
-}
-
-.checkbox-container.primary[aria-checked="true"] {
-  color: var(--ty-color-primary);
-}
-
-.checkbox-container.secondary {
-  color: var(--ty-color-secondary-soft);
-}
-
-.checkbox-container.secondary[aria-checked="true"] {
-  color: var(--ty-color-secondary);
-}
-
-.checkbox-container.success {
-  color: var(--ty-color-success-soft);
-}
-
-.checkbox-container.success[aria-checked="true"] {
-  color: var(--ty-color-success);
-}
-
-.checkbox-container.danger {
-  color: var(--ty-color-danger-soft);
-}
-
-.checkbox-container.danger[aria-checked="true"] {
-  color: var(--ty-color-danger);
-}
-
-.checkbox-container.warning {
-  color: var(--ty-color-warning-soft);
-}
-
-.checkbox-container.warning[aria-checked="true"] {
-  color: var(--ty-color-warning);
-}
-
-.checkbox-container.neutral {
-  color: var(--ty-color-neutral-soft);
-}
-
-.checkbox-container.neutral[aria-checked="true"] {
-  color: var(--ty-color-neutral);
-}
+/* ===== SEMANTIC FLAVORS (set --checkbox-color[-off], consumed above) ===== */
+${FLAVORS.map((f) => checkboxFlavor(f)).join("")}
 
 /* ===== STATES ===== */
 

package/lib/styles/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/styles/checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqJ7B,CAAC"}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/styles/checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C;;;;;;;0DAO0D;AAC1D,MAAM,cAAc,GAAG,CAAC,CAAS,EAAE,EAAW,EAAE,EAAE;IAChD,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,4BAA4B,GAAG,CAAC,EAAE,CAAC,2BAA2B,GAAG,CAAC,OAAO,CAAC,0CAA0C,GAAG,CAAC,EAAE,CAAC;iBAC5H,CAAC,4BAA4B,GAAG,CAAC,SAAS,CAAC,2BAA2B,GAAG,CAAC,OAAO,CAAC,0CAA0C,GAAG,CAAC,SAAS,CAAC;iBAC1I,CAAC,4BAA4B,GAAG,CAAC,OAAO,CAAC,2BAA2B,GAAG,CAAC,QAAQ,CAAC,0CAA0C,GAAG,CAAC,OAAO,CAAC;CACvJ,CAAC;AACF,CAAC,CAAC;AAEF,8EAA8E;AAC9E,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,cAAc,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAEzF,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuE5B,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmC/C,CAAC"}

package/lib/styles/copy.d.ts

@@ -3,5 +3,7 @@
  * Read-only field with copy-to-clipboard functionality
  * Extends input styles with copy-specific styling
  */
-export declare const copyStyles = "\n/* Copy field value display */\n.copy-field-value {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  user-select: none;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n/* Multiline variant */\n.copy-field-value.multiline {\n  white-space: pre-wrap;\n  word-break: break-word;\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n/* Keep the copy button pinned to the top-right when content wraps to multiple lines */\n.input-wrapper:has(.copy-field-value.multiline) {\n  align-items: flex-start;\n  padding-top: 8px;\n  padding-bottom: 8px;\n}\n\n/* Horizontal scroll variant - scroll long content instead of clipping with ellipsis */\n.copy-field-value.horizontal-scroll {\n  overflow-x: auto;\n  overflow-y: hidden;\n  text-overflow: clip;\n  white-space: nowrap;\n}\n\n/* Multiline + horizontal scroll (e.g. code blocks): preserve lines, scroll both axes */\n.copy-field-value.multiline.horizontal-scroll {\n  white-space: pre;\n  word-break: normal;\n  overflow-y: auto;\n}\n\n/* Hide scrollbars on scrollable value - content still scrolls, chrome stays clean */\n.copy-field-value.multiline,\n.copy-field-value.horizontal-scroll {\n  scrollbar-width: none; /* Firefox */\n}\n.copy-field-value.multiline::-webkit-scrollbar,\n.copy-field-value.horizontal-scroll::-webkit-scrollbar {\n  display: none; /* Chrome/Safari */\n}\n\n/* Code format */\n.copy-field-value {\n  font-size: 0.8em;\n}\n\n/* Hover state - primary soft background */\n.input-wrapper:not(.disabled):hover {\n  background: var(--ty-bg-primary-soft);\n  transition: background 0.2s ease;\n}\n\n/* Copy button */\n.copy-button {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  color: var(--ty-text-soft);\n  transition: color 0.2s ease, transform 0.2s ease;\n  padding: 0;\n  margin: 0;\n}\n\n.copy-button:hover:not(.disabled) {\n  color: var(--ty-text);\n  transform: scale(1.1);\n}\n\n.copy-button.success {\n  color: var(--ty-color-success);\n  animation: copy-feedback 0.3s ease;\n}\n\n.copy-button.error {\n  color: var(--ty-color-danger);\n  animation: copy-feedback 0.3s ease;\n}\n\n@keyframes copy-feedback {\n  0%, 100% { transform: scale(1); }\n  50% { transform: scale(1.2); }\n}\n\n.copy-button svg {\n  width: 18px;\n  height: 18px;\n}\n\n.input-wrapper.disabled .copy-button {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.input-wrapper.disabled {\n  cursor: not-allowed;\n}\n";
+/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
+export declare const copyCustomFlavorCss: (base: string) => string;
+export declare const copyStyles: string;
 //# sourceMappingURL=copy.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"copy.d.ts","sourceRoot":"","sources":["../../src/styles/copy.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,UAAU,6mFAuHtB,CAAA"}
+{"version":3,"file":"copy.d.ts","sourceRoot":"","sources":["../../src/styles/copy.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAwBH,8EAA8E;AAC9E,eAAO,MAAM,mBAAmB,GAAI,MAAM,MAAM,WAAgC,CAAC;AAEjF,eAAO,MAAM,UAAU,QA0HtB,CAAA"}

package/lib/styles/copy.js

@@ -3,6 +3,26 @@
  * Read-only field with copy-to-clipboard functionality
  * Extends input styles with copy-specific styling
  */
+import { FLAVORS } from "../types/common.js";
+/* Flavor rules only set --copy-color (button), --copy-color-hover, and
+   --copy-bg-hover (wrapper hover); the base rules below consume them.
+   Doubles as the per-instance override API. Fallback flavor `fb` is used
+   for custom flavors so missing tokens degrade to neutral. */
+const copyFlavor = (f, fb) => {
+    const c = (s) => fb
+        ? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
+        : `var(--ty-color-${f}${s})`;
+    const bg = (s) => fb
+        ? `var(--ty-bg-${f}${s}, var(--ty-bg-${fb}${s}))`
+        : `var(--ty-bg-${f}${s})`;
+    return `
+:host([flavor="${f}"])  { --copy-color: ${c("")}; --copy-color-hover: ${c("-strong")}; --copy-bg-hover: ${bg("-soft")}; }
+:host([flavor="${f}+"]) { --copy-color: ${c("-strong")}; --copy-color-hover: ${c("-strong")}; --copy-bg-hover: ${bg("-soft")}; }
+:host([flavor="${f}-"]) { --copy-color: ${c("-soft")}; --copy-color-hover: ${c("")}; --copy-bg-hover: ${bg("-soft")}; }
+`;
+};
+/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
+export const copyCustomFlavorCss = (base) => copyFlavor(base, "neutral");
 export const copyStyles = `
 /* Copy field value display */
 .copy-field-value {
@@ -66,10 +86,10 @@ export const copyStyles = `
   font-size: 0.8em;
 }
 
-/* Hover state - primary soft background */
+/* Hover state — flavor-soft background (primary by default) */
 .input-wrapper:not(.disabled):hover {
-  background: var(--ty-bg-primary-soft);
-  transition: background 0.2s ease;
+  background: var(--copy-bg-hover, var(--ty-bg-primary-soft));
+  transition: var(--ty-local-transition, background 0.2s ease);
 }
 
 /* Copy button */
@@ -83,14 +103,14 @@ export const copyStyles = `
   cursor: pointer;
   border: none;
   background: transparent;
-  color: var(--ty-text-soft);
-  transition: color 0.2s ease, transform 0.2s ease;
+  color: var(--copy-color, var(--ty-text-soft));
+  transition: var(--ty-local-transition, color 0.2s ease, transform 0.2s ease);
   padding: 0;
   margin: 0;
 }
 
 .copy-button:hover:not(.disabled) {
-  color: var(--ty-text);
+  color: var(--copy-color-hover, var(--ty-text));
   transform: scale(1.1);
 }
 
@@ -122,5 +142,8 @@ export const copyStyles = `
 .input-wrapper.disabled {
   cursor: not-allowed;
 }
+
+/* ===== SEMANTIC FLAVORS (set --copy-*, consumed above) ===== */
+${FLAVORS.map((f) => copyFlavor(f)).join("")}
 `;
 //# sourceMappingURL=copy.js.map

package/lib/styles/copy.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy.js","sourceRoot":"","sources":["../../src/styles/copy.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuHzB,CAAA"}
+{"version":3,"file":"copy.js","sourceRoot":"","sources":["../../src/styles/copy.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C;;;8DAG8D;AAC9D,MAAM,UAAU,GAAG,CAAC,CAAS,EAAE,EAAW,EAAE,EAAE;IAC5C,MAAM,CAAC,GAAG,CAAC,CAAS,EAAE,EAAE,CACtB,EAAE;QACA,CAAC,CAAC,kBAAkB,CAAC,GAAG,CAAC,oBAAoB,EAAE,GAAG,CAAC,IAAI;QACvD,CAAC,CAAC,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC;IACjC,MAAM,EAAE,GAAG,CAAC,CAAS,EAAE,EAAE,CACvB,EAAE;QACA,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,iBAAiB,EAAE,GAAG,CAAC,IAAI;QACjD,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,CAAC;IAC9B,OAAO;iBACQ,CAAC,wBAAwB,CAAC,CAAC,EAAE,CAAC,yBAAyB,CAAC,CAAC,SAAS,CAAC,sBAAsB,EAAE,CAAC,OAAO,CAAC;iBACpG,CAAC,wBAAwB,CAAC,CAAC,SAAS,CAAC,yBAAyB,CAAC,CAAC,SAAS,CAAC,sBAAsB,EAAE,CAAC,OAAO,CAAC;iBAC3G,CAAC,wBAAwB,CAAC,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC,EAAE,CAAC,sBAAsB,EAAE,CAAC,OAAO,CAAC;CAClH,CAAC;AACF,CAAC,CAAC;AAEF,8EAA8E;AAC9E,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAEjF,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyHxB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;CAC3C,CAAA"}

package/lib/styles/custom-scrollbar.d.ts

@@ -2,5 +2,5 @@
  * Shared CSS for CustomScrollbar utility
  * Include this in any component that uses CustomScrollbar
  */
-export declare const customScrollbarStyles = "\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";
+export declare const customScrollbarStyles = "\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: var(--ty-local-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: var(--ty-local-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";
 //# sourceMappingURL=custom-scrollbar.d.ts.map

package/lib/styles/custom-scrollbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-scrollbar.d.ts","sourceRoot":"","sources":["../../src/styles/custom-scrollbar.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,qBAAqB,urIAuJjC,CAAC"}
+{"version":3,"file":"custom-scrollbar.d.ts","sourceRoot":"","sources":["../../src/styles/custom-scrollbar.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,qBAAqB,+uIAuJjC,CAAC"}

package/lib/styles/custom-scrollbar.js

@@ -53,7 +53,7 @@ export const customScrollbarStyles = `
   min-height: var(--ty-scrollbar-thumb-min-height, 30px);
   background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));
   border-radius: var(--ty-scrollbar-radius, 4px);
-  transition: background 0.15s ease-out;
+  transition: var(--ty-local-transition, background 0.15s ease-out);
   box-sizing: border-box;
   border: 1px solid transparent;
 }
@@ -118,7 +118,7 @@ export const customScrollbarStyles = `
   min-width: var(--ty-scrollbar-thumb-min-height, 30px);
   background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));
   border-radius: var(--ty-scrollbar-radius, 4px);
-  transition: background 0.15s ease-out;
+  transition: var(--ty-local-transition, background 0.15s ease-out);
   box-sizing: border-box;
   border: 1px solid transparent;
 }

package/lib/styles/date-picker.d.ts

@@ -2,5 +2,7 @@
  * Date Picker Component Styles
  * PORTED FROM: cljs/ty/components/date_picker.css
  */
-export declare const datePickerStyles = "\n/* Date Picker Component Styles */\n:host {\n  display: block;\n  width: auto;\n  min-width: 200px;\n\n  /* ==========================================================================\n     Theming Tokens \u2014 Date Picker Stub\n     Thin shim over --ty-input-*. Override these to retheme just the date-picker\n     trigger without affecting other inputs.\n     ========================================================================== */\n  --ty-date-picker-bg: var(--ty-input-bg);\n  --ty-date-picker-color: var(--ty-input-color);\n  --ty-date-picker-placeholder: var(--ty-input-placeholder);\n  --ty-date-picker-border: var(--ty-input-border);\n  --ty-date-picker-border-hover: var(--ty-input-border-hover);\n  --ty-date-picker-border-focus: var(--ty-input-border-focus);\n  --ty-date-picker-shadow-focus: var(--ty-input-shadow-focus);\n  --ty-date-picker-disabled-bg: var(--ty-input-disabled-bg);\n  --ty-date-picker-disabled-color: var(--ty-input-disabled-color);\n  --ty-date-picker-radius: var(--ty-radius-md);\n\n  /* ==========================================================================\n     Theming Tokens \u2014 Calendar Popup Surface\n     Shared with ty-calendar / ty-calendar-month theming.\n     ========================================================================== */\n  --ty-calendar-surface-bg: var(--ty-surface-floating);\n  --ty-calendar-surface-border: var(--ty-input-border);\n  --ty-calendar-surface-shadow: var(--ty-shadow-lg, 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1));\n  --ty-calendar-surface-radius: var(--ty-radius-lg);\n\n  /* ==========================================================================\n     Theming Tokens \u2014 Time Section\n     ========================================================================== */\n  --ty-calendar-time-bg: transparent;\n  --ty-calendar-time-border: var(--ty-border-faint);\n  --ty-calendar-time-label-color: var(--ty-color-neutral);\n  --ty-calendar-time-input-color: var(--ty-input-color);\n  --ty-calendar-time-placeholder-color: var(--ty-input-placeholder);\n  --ty-calendar-time-icon-color: var(--ty-color-neutral-soft);\n}\n\n/* Container structure (reuses dropdown patterns) */\n.dropdown-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\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-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.dropdown-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n/* Start-slot icon (leading content inside the date-picker stub) */\n.date-picker-stub ::slotted([slot=\"start\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n  color: var(--ty-color-text-soft);\n}\n\n.date-picker-stub ::slotted(ty-icon[slot=\"start\"]) {\n  width: 1em;\n  height: 1em;\n}\n\n/* Date picker stub (styled like dropdown) */\n.date-picker-stub {\n  width: 100%;\n  cursor: pointer;\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--ty-date-picker-bg);\n  color: var(--ty-date-picker-color);\n  border: 1px solid var(--ty-date-picker-border);\n  border-radius: var(--ty-date-picker-radius);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  font-weight: var(--ty-font-normal);\n  line-height: var(--ty-line-height-tight);\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), opacity 0.2s ease;\n  outline: none;\n}\n\n.date-picker-stub:hover:not([disabled]):not(.open) {\n  border-color: var(--ty-date-picker-border-hover);\n}\n\n.date-picker-stub[disabled] {\n  background-color: var(--ty-date-picker-disabled-bg);\n  color: var(--ty-date-picker-disabled-color);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.date-picker-stub:focus,\n.date-picker-stub.open {\n  border-color: var(--ty-date-picker-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-date-picker-shadow-focus);\n}\n\n/* Size variants */\n.date-picker-stub.xs {\n  min-height: var(--ty-size-xs);\n  font-size: var(--ty-font-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));\n}\n\n.date-picker-stub.sm {\n  min-height: var(--ty-size-sm);\n  font-size: var(--ty-font-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));\n}\n\n.date-picker-stub.lg {\n  min-height: var(--ty-size-lg);\n  font-size: var(--ty-font-base);\n  padding: var(--ty-spacing-2) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1.125rem + var(--ty-spacing-2));\n}\n\n.date-picker-stub.xl {\n  min-height: var(--ty-size-xl);\n  font-size: var(--ty-font-lg);\n  padding: var(--ty-spacing-3) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1.25rem + var(--ty-spacing-3));\n}\n\n/* Flavor variants */\n/* Primary - Main brand focus state */\n.date-picker-stub.primary {\n  border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.date-picker-stub.primary:hover:not([disabled]) {\n  border-color: var(--ty-color-primary-bold);\n}\n\n.date-picker-stub.primary:focus,\n.date-picker-stub.primary.open {\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 - Supporting action focus state */\n.date-picker-stub.secondary {\n  border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.date-picker-stub.secondary:hover:not([disabled]) {\n  border-color: var(--ty-color-secondary-bold);\n}\n\n.date-picker-stub.secondary:focus,\n.date-picker-stub.secondary.open {\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 - Valid/confirmed input state */\n.date-picker-stub.success {\n  border-color: var(--ty-input-success-border, var(--ty-color-success));\n}\n\n.date-picker-stub.success:hover:not([disabled]) {\n  border-color: var(--ty-color-success-bold);\n}\n\n.date-picker-stub.success:focus,\n.date-picker-stub.success.open {\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 - Error/invalid input state */\n.date-picker-stub.danger {\n  border-color: var(--ty-input-danger-border, var(--ty-color-danger));\n}\n\n.date-picker-stub.danger:hover:not([disabled]) {\n  border-color: var(--ty-color-danger-bold);\n}\n\n.date-picker-stub.danger:focus,\n.date-picker-stub.danger.open {\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 - Caution/attention needed input state */\n.date-picker-stub.warning {\n  border-color: var(--ty-input-warning-border, var(--ty-color-warning));\n}\n\n.date-picker-stub.warning:hover:not([disabled]) {\n  border-color: var(--ty-color-warning-bold);\n}\n\n.date-picker-stub.warning:focus,\n.date-picker-stub.warning.open {\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/* Text content */\n.stub-text {\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n  color: inherit;\n  pointer-events: none;\n}\n\n.stub-text.placeholder {\n  color: var(--ty-date-picker-placeholder);\n}\n\n/* Icons */\n.stub-icons {\n  display: flex;\n  align-items: center;\n  gap: var(--ty-spacing-1);\n  position: absolute;\n  right: var(--ty-spacing-3);\n  top: 50%;\n  transform: translateY(-50%);\n  height: 1rem;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.stub-clear {\n  display: 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(--ty-color-neutral-soft);\n  cursor: pointer;\n  border-radius: var(--ty-radius-sm);\n  transition: all 0.15s ease;\n  pointer-events: auto;\n}\n\n.stub-clear:hover {\n  color: var(--ty-color-negative);\n  background-color: var(--ty-bg-negative-faint);\n}\n\n.stub-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  color: var(--ty-color-neutral-soft);\n}\n\n.date-picker-stub:hover .stub-arrow {\n  color: var(--ty-color-neutral);\n}\n\n.date-picker-stub:focus .stub-arrow,\n.date-picker-stub.open .stub-arrow {\n  color: var(--ty-date-picker-border-focus);\n}\n\n/* Calendar dialog (showModal positioning system) */\n.calendar-dialog {\n  position: fixed;\n  flex-direction: column;\n  max-width: 90vw;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  box-sizing: border-box;\n  padding: var(--calendar-padding, 8px);\n\n  /* Hidden by default */\n  opacity: 0;\n  transition: opacity 200ms ease;\n\n  transform: translate(var(--calendar-offset-x, 0px), var(--calendar-offset-y, 0px));\n  top: -1000px;\n  left: -1000px;\n}\n\n/* Direction-based positioning with CSS classes */\n.calendar-dialog.position-below {\n  left: var(--calendar-x);\n  top: var(--calendar-y);\n}\n\n.calendar-dialog.position-above {\n  left: var(--calendar-x);\n  bottom: var(--calendar-y);\n  top: auto;\n  flex-direction: column-reverse;\n}\n\n.calendar-dialog.open {\n  opacity: 1;\n}\n\n.calendar-dialog::backdrop {\n  background: transparent\n}\n\n/* Calendar content container */\n.calendar-content {\n  background-color: var(--ty-calendar-surface-bg);\n  border: 1px solid var(--ty-calendar-surface-border);\n  border-radius: var(--ty-calendar-surface-radius);\n  box-shadow: var(--ty-calendar-surface-shadow);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n/* Native date input for mobile */\n/* Native input is invisible \u2014 used only to trigger the OS picker */\n.native-date-input {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: none;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.native-date-input::-webkit-calendar-picker-indicator {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n}\n\n/* Time input section */\n.time-section {\n  display: flex;\n  min-height: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1rem;\n  border-top: 1px solid var(--ty-calendar-time-border);\n  background-color: var(--ty-calendar-time-bg);\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n}\n\n.time-label {\n  font-size: var(--ty-font-sm);\n  font-weight: 500;\n  color: var(--ty-calendar-time-label-color);\n  flex-shrink: 0;\n}\n\n.time-input {\n  width: 3.5rem;\n  border: 1px solid var(--ty-input-border);\n  border-radius: var(--ty-radius-sm);\n  background: var(--ty-input-bg);\n  color: var(--ty-calendar-time-input-color);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  font-variant-numeric: tabular-nums;\n  text-align: center;\n  padding: 0.25rem 0.375rem;\n  outline: none;\n  transition: var(--ty-transition-all);\n}\n\n.time-input:focus {\n  border-color: var(--ty-input-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.time-input::placeholder {\n  color: var(--ty-calendar-time-placeholder-color);\n}\n\n.time-icon {\n  display: flex;\n  align-items: center;\n  color: var(--ty-calendar-time-icon-color);\n  width: 1rem;\n  height: 1rem;\n  flex-shrink: 0;\n}\n";
+/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
+export declare const datePickerCustomFlavorCss: (base: string) => string;
+export declare const datePickerStyles: string;
 //# sourceMappingURL=date-picker.d.ts.map

package/lib/styles/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/styles/date-picker.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,gBAAgB,41XAwb5B,CAAC"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/styles/date-picker.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAsCH,8EAA8E;AAC9E,eAAO,MAAM,yBAAyB,GAAI,MAAM,MAAM,WAAsC,CAAC;AAE7F,eAAO,MAAM,gBAAgB,QAuW5B,CAAC"}

package/lib/styles/date-picker.js

@@ -2,12 +2,48 @@
  * Date Picker Component Styles
  * PORTED FROM: cljs/ty/components/date_picker.css
  */
+import { FLAVORS } from "../types/common.js";
+/* Flavor rules only set --date-picker-accent (border), -accent-bold
+   (hover/focus border), and -ring (focus shadow); the stub base rules
+   consume them. Doubles as the per-instance override API. Neutral is
+   skipped — the 'default' flavor is the unstyled --ty-date-picker-* chrome.
+   Fallback flavor `fb` is used for custom flavors (suffixed tokens fall
+   back to the custom base color, then neutral). */
+const datePickerFlavor = (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}"]) {
+  --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);
+}
+:host([flavor="${f}+"]) {
+  --date-picker-accent: ${c("")};
+  --date-picker-accent-bold: ${c("-strong")};
+  --date-picker-ring: color-mix(in oklab, ${c("-strong")} 15%, transparent);
+}
+:host([flavor="${f}-"]) {
+  --date-picker-accent: ${c("-faint")};
+  --date-picker-accent-bold: ${c("-soft")};
+  --date-picker-ring: color-mix(in oklab, ${c("-soft")} 15%, transparent);
+}
+`;
+};
+/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
+export const datePickerCustomFlavorCss = (base) => datePickerFlavor(base, "neutral");
 export const datePickerStyles = `
 /* Date Picker Component Styles */
 :host {
   display: block;
   width: auto;
   min-width: 200px;
+  font-family: var(--ty-font-sans);
 
   /* ==========================================================================
      Theming Tokens — Date Picker Stub
@@ -106,7 +142,7 @@ export const datePickerStyles = `
   align-items: center;
   background: var(--ty-date-picker-bg);
   color: var(--ty-date-picker-color);
-  border: 1px solid var(--ty-date-picker-border);
+  border: 1px solid var(--date-picker-accent, var(--ty-date-picker-border));
   border-radius: var(--ty-date-picker-radius);
   font-family: var(--ty-font-sans);
   font-size: var(--ty-font-sm);
@@ -120,7 +156,7 @@ export const datePickerStyles = `
 }
 
 .date-picker-stub:hover:not([disabled]):not(.open) {
-  border-color: var(--ty-date-picker-border-hover);
+  border-color: var(--date-picker-accent-bold, var(--ty-date-picker-border-hover));
 }
 
 .date-picker-stub[disabled] {
@@ -132,18 +168,11 @@ export const datePickerStyles = `
 
 .date-picker-stub:focus,
 .date-picker-stub.open {
-  border-color: var(--ty-date-picker-border-focus);
-  box-shadow: 0 0 0 3px var(--ty-date-picker-shadow-focus);
+  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));
 }
 
 /* Size variants */
-.date-picker-stub.xs {
-  min-height: var(--ty-size-xs);
-  font-size: var(--ty-font-xs);
-  padding: var(--ty-spacing-1) var(--ty-spacing-2);
-  padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));
-}
-
 .date-picker-stub.sm {
   min-height: var(--ty-size-sm);
   font-size: var(--ty-font-xs);
@@ -158,88 +187,8 @@ export const datePickerStyles = `
   padding-right: calc(var(--ty-spacing-4) + 1.125rem + var(--ty-spacing-2));
 }
 
-.date-picker-stub.xl {
-  min-height: var(--ty-size-xl);
-  font-size: var(--ty-font-lg);
-  padding: var(--ty-spacing-3) var(--ty-spacing-4);
-  padding-right: calc(var(--ty-spacing-4) + 1.25rem + var(--ty-spacing-3));
-}
-
-/* Flavor variants */
-/* Primary - Main brand focus state */
-.date-picker-stub.primary {
-  border-color: var(--ty-input-primary-border, var(--ty-color-primary));
-}
-
-.date-picker-stub.primary:hover:not([disabled]) {
-  border-color: var(--ty-color-primary-bold);
-}
-
-.date-picker-stub.primary:focus,
-.date-picker-stub.primary.open {
-  border-color: var(--ty-color-primary-bold);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 15%, transparent);
-}
-
-/* Secondary - Supporting action focus state */
-.date-picker-stub.secondary {
-  border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));
-}
-
-.date-picker-stub.secondary:hover:not([disabled]) {
-  border-color: var(--ty-color-secondary-bold);
-}
-
-.date-picker-stub.secondary:focus,
-.date-picker-stub.secondary.open {
-  border-color: var(--ty-color-secondary-bold);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-secondary) 15%, transparent);
-}
-
-/* Success - Valid/confirmed input state */
-.date-picker-stub.success {
-  border-color: var(--ty-input-success-border, var(--ty-color-success));
-}
-
-.date-picker-stub.success:hover:not([disabled]) {
-  border-color: var(--ty-color-success-bold);
-}
-
-.date-picker-stub.success:focus,
-.date-picker-stub.success.open {
-  border-color: var(--ty-color-success-bold);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-success) 15%, transparent);
-}
-
-/* Danger - Error/invalid input state */
-.date-picker-stub.danger {
-  border-color: var(--ty-input-danger-border, var(--ty-color-danger));
-}
-
-.date-picker-stub.danger:hover:not([disabled]) {
-  border-color: var(--ty-color-danger-bold);
-}
-
-.date-picker-stub.danger:focus,
-.date-picker-stub.danger.open {
-  border-color: var(--ty-color-danger-bold);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);
-}
-
-/* Warning - Caution/attention needed input state */
-.date-picker-stub.warning {
-  border-color: var(--ty-input-warning-border, var(--ty-color-warning));
-}
-
-.date-picker-stub.warning:hover:not([disabled]) {
-  border-color: var(--ty-color-warning-bold);
-}
-
-.date-picker-stub.warning:focus,
-.date-picker-stub.warning.open {
-  border-color: var(--ty-color-warning-bold);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-warning) 15%, transparent);
-}
+/* Flavor variants — set --date-picker-accent*, consumed by the stub rules above */
+${FLAVORS.filter((f) => f !== "neutral").map((f) => datePickerFlavor(f)).join("")}
 
 /* Text content */
 .stub-text {
@@ -282,13 +231,18 @@ export const datePickerStyles = `
   color: var(--ty-color-neutral-soft);
   cursor: pointer;
   border-radius: var(--ty-radius-sm);
-  transition: all 0.15s ease;
+  transition: var(--ty-local-transition, all 0.15s ease);
   pointer-events: auto;
 }
 
 .stub-clear:hover {
-  color: var(--ty-color-negative);
-  background-color: var(--ty-bg-negative-faint);
+  /* Clear is a destructive utility action, not the field's semantic flavor
+     — it stays neutral at rest and always warns danger-red on hover,
+     regardless of the field's own flavor. (--ty-color-negative/
+     --ty-bg-negative-faint used here previously don't exist as tokens —
+     this silently fell back to unstyled inherited color.) */
+  color: var(--ty-color-danger);
+  background-color: var(--ty-bg-danger-soft);
 }
 
 .stub-arrow {
@@ -297,16 +251,16 @@ export const datePickerStyles = `
   justify-content: center;
   width: 1rem;
   height: 1rem;
-  color: var(--ty-color-neutral-soft);
+  color: var(--date-picker-accent, var(--ty-color-neutral-soft));
 }
 
 .date-picker-stub:hover .stub-arrow {
-  color: var(--ty-color-neutral);
+  color: var(--date-picker-accent-bold, var(--ty-color-neutral));
 }
 
 .date-picker-stub:focus .stub-arrow,
 .date-picker-stub.open .stub-arrow {
-  color: var(--ty-date-picker-border-focus);
+  color: var(--date-picker-accent-bold, var(--ty-date-picker-border-focus));
 }
 
 /* Calendar dialog (showModal positioning system) */

package/lib/styles/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../src/styles/date-picker.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwb/B,CAAC"}
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../src/styles/date-picker.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C;;;;;mDAKmD;AACnD,MAAM,gBAAgB,GAAG,CAAC,CAAS,EAAE,EAAW,EAAE,EAAE;IAClD,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;yCACuB,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC;+BACjC,CAAC,CAAC,EAAE,CAAC;4CACQ,CAAC,CAAC,EAAE,CAAC;;iBAEhC,CAAC;0BACQ,CAAC,CAAC,EAAE,CAAC;+BACA,CAAC,CAAC,SAAS,CAAC;4CACC,CAAC,CAAC,SAAS,CAAC;;iBAEvC,CAAC;0BACQ,CAAC,CAAC,QAAQ,CAAC;+BACN,CAAC,CAAC,OAAO,CAAC;4CACG,CAAC,CAAC,OAAO,CAAC;;CAErD,CAAC;AACF,CAAC,CAAC;AAEF,8EAA8E;AAC9E,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAE7F,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuJ9B,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgNhF,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../src/styles/file-upload.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,yhJA+O5B,CAAA"}
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../src/styles/file-upload.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,6mJA+O5B,CAAA"}

package/lib/styles/file-upload.js

@@ -41,7 +41,7 @@ export const fileUploadStyles = `
   padding: 2rem 1.5rem;
   text-align: center;
   cursor: pointer;
-  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+  transition: var(--ty-local-transition, border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease);
   outline: none;
   display: flex;
   flex-direction: column;
@@ -101,7 +101,7 @@ export const fileUploadStyles = `
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: color 0.15s ease, transform 0.15s ease;
+  transition: var(--ty-local-transition, color 0.15s ease, transform 0.15s ease);
   pointer-events: none;
 }
 
@@ -191,7 +191,7 @@ export const fileUploadStyles = `
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  transition: color 0.15s ease, background-color 0.15s ease;
+  transition: var(--ty-local-transition, color 0.15s ease, background-color 0.15s ease);
   border: none;
   background: none;
   padding: 0;

package/lib/styles/input.d.ts

@@ -3,5 +3,7 @@
  * PORTED FROM: clj/ty/components/input.css
  * Phase A: Regular input styles only (no checkbox, no numeric formatting)
  */
-export declare const inputStyles = "\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";
+/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
+export declare const inputCustomFlavorCss: (base: string) => string;
+export declare const inputStyles: string;
 //# sourceMappingURL=input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/styles/input.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,WAAW,4uSAwZvB,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/styles/input.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA+CH,8EAA8E;AAC9E,eAAO,MAAM,oBAAoB,GAAI,MAAM,MAAM,WAAiC,CAAC;AAEnF,eAAO,MAAM,WAAW,QAoTvB,CAAA"}