tyrell-components 1.0.0-RC11 → 1.0.0-RC13

package/lib/styles/calendar-month.d.ts

@@ -2,5 +2,7 @@
  * Calendar Month Styles
  * Improved design with better visual hierarchy and size variants
  */
-export declare const calendarMonthStyles = "\n/* ============================================================================\n   Theming Tokens\n   Override these to retheme the calendar without touching the global palette.\n   Defaults chain back to the global --ty-color-* / --ty-bg-* / --ty-border tokens.\n   ============================================================================ */\n\n:host {\n  /* Accent aliases \u2014 override these three for thin retheming */\n  --ty-calendar-accent: var(--ty-color-primary);\n  --ty-calendar-today-accent: var(--ty-color-secondary);\n  --ty-calendar-muted: var(--ty-color-neutral);\n\n  /* Header (weekday names) */\n  --ty-calendar-header-color: var(--ty-color-neutral-strong);\n\n  /* Day cell \u2014 base */\n  --ty-calendar-day-color: var(--ty-calendar-muted);\n  --ty-calendar-day-bg: transparent;\n  --ty-calendar-day-border: var(--ty-border);\n  --ty-calendar-day-radius: 0.375rem;\n\n  /* Day cell \u2014 hover */\n  --ty-calendar-day-hover-color: var(--ty-color-neutral-strong);\n  --ty-calendar-day-hover-bg: var(--ty-bg-neutral-soft);\n  --ty-calendar-day-hover-border: var(--ty-border-bold);\n\n  /* Today */\n  --ty-calendar-today-color: var(--ty-color-secondary-strong);\n  --ty-calendar-today-bg: var(--ty-bg-secondary-soft);\n  --ty-calendar-today-border: var(--ty-calendar-today-accent);\n\n  /* Selected */\n  --ty-calendar-selected-color: var(--ty-color-primary-strong);\n  --ty-calendar-selected-bg: var(--ty-bg-primary);\n  --ty-calendar-selected-border: var(--ty-calendar-accent);\n  --ty-calendar-selected-hover-bg: var(--ty-bg-primary-bold);\n  --ty-calendar-selected-hover-border: var(--ty-color-primary-bold);\n\n  /* Modifier states */\n  --ty-calendar-weekend-color: var(--ty-color-danger-soft);\n  --ty-calendar-other-month-color: var(--ty-color-neutral-faint);\n  --ty-calendar-other-month-opacity: 0.5;\n}\n\n/* ============================================================================\n   Base Calendar Container\n   ============================================================================ */\n\n.calendar-flex-container {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  gap: 0;\n  padding: 0.75rem;\n  border-radius: 0.5rem;\n  font-family: system-ui, sans-serif;\n  user-select: none;\n  width: var(--calendar-width, fit-content);\n  min-width: 280px;\n  max-width: var(--calendar-max-width, none);\n}\n\n/* ============================================================================\n   Rows (Header + 6 Day Rows)\n   ============================================================================ */\n\n.calendar-row {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n}\n\n.calendar-header-row {\n  flex: 0 0 auto;\n  color: var(--ty-calendar-header-color);\n}\n\n.calendar-day-row {\n  flex: 1;\n  min-height: 2rem;\n  margin-bottom: 0.125rem;\n}\n\n/* ============================================================================\n   Base Cell Styles\n   ============================================================================ */\n\n.calendar-cell {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  position: relative;\n  box-sizing: border-box;\n}\n\n/* ============================================================================\n   Header Cells\n   ============================================================================ */\n\n.calendar-header-cell {\n  text-align: center;\n  font-weight: 600;\n  text-transform: uppercase;\n  padding: 0.25rem;\n  letter-spacing: 0.05em;\n}\n\n/* ============================================================================\n   Day Cells - Square with Better Visual Hierarchy\n   ============================================================================ */\n\n.calendar-day-cell {\n  /* Square cells */\n  aspect-ratio: 1;\n\n  /* Layout */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  /* Spacing */\n  margin: 0.125rem;\n\n  /* Visual */\n  border-radius: var(--ty-calendar-day-radius);\n  border: 1px solid var(--ty-calendar-day-border);\n  background-color: var(--ty-calendar-day-bg);\n  color: var(--ty-calendar-day-color);\n  cursor: pointer;\n  transition: all 0.15s ease;\n\n  /* Typography */\n  font-weight: 400;\n}\n\n/* Hover State - Stronger Feedback */\n.calendar-day-cell:hover {\n  color: var(--ty-calendar-day-hover-color);\n  background-color: var(--ty-calendar-day-hover-bg);\n  border-color: var(--ty-calendar-day-hover-border);\n}\n\n/* ============================================================================\n   Day States\n   ============================================================================ */\n\n/* Today - Strong Visual Indicator */\n.calendar-day-cell.today {\n  background-color: var(--ty-calendar-today-bg);\n  color: var(--ty-calendar-today-color);\n  border-color: var(--ty-calendar-today-border);\n  font-weight: 600;\n}\n\n/* Weekend - Subtle Color Shift */\n.calendar-day-cell.weekend {\n  color: var(--ty-calendar-weekend-color);\n}\n\n/* Other Month - Muted */\n.calendar-day-cell.other-month {\n  color: var(--ty-calendar-other-month-color);\n  opacity: var(--ty-calendar-other-month-opacity);\n}\n\n.calendar-day-cell.other-month:hover { \n  color: var(--ty-calendar-day-hover-color);\n  background-color: var(--ty-calendar-day-hover-bg);\n  opacity: 0.7;\n}\n\n/* Selected State (for custom usage) */\n.calendar-day-cell.selected {\n  background-color: var(--ty-calendar-selected-bg);\n  color: var(--ty-calendar-selected-color);\n  border-color: var(--ty-calendar-selected-border);\n  font-weight: 600;\n}\n\n.calendar-day-cell.selected:hover {\n  background-color: var(--ty-calendar-selected-hover-bg);\n  border-color: var(--ty-calendar-selected-hover-border);\n}\n\n.calendar-day-cell.selected.other-month {\n  opacity: 0.7;\n}\n\n/* ============================================================================\n   Size Variants\n   ============================================================================ */\n\n/* Small - Compact (240px min-width) */\n.calendar-size-sm {\n  padding: 0.5rem;\n  min-width: 240px;\n}\n\n.calendar-size-sm .calendar-header-cell {\n  font-size: 0.625rem;\n  padding: 0.125rem;\n}\n\n.calendar-size-sm .calendar-day-cell {\n  font-size: 0.75rem;\n  margin: 0.0625rem;\n}\n\n.calendar-size-sm .calendar-day-row {\n  min-height: 1.5rem;\n}\n\n/* Medium - Default (280px min-width) */\n.calendar-size-md {\n  padding: 0.75rem;\n  min-width: 280px;\n}\n\n.calendar-size-md .calendar-header-cell {\n  font-size: 0.6875rem;\n  padding: 0.25rem;\n}\n\n.calendar-size-md .calendar-day-cell {\n  font-size: 0.8125rem;\n  margin: 0.125rem;\n}\n\n.calendar-size-md .calendar-day-row {\n  min-height: 2rem;\n}\n\n/* Large - Spacious (360px min-width) */\n.calendar-size-lg {\n  padding: 1rem;\n  min-width: 360px;\n}\n\n.calendar-size-lg .calendar-header-cell {\n  font-size: 0.75rem;\n  padding: 0.375rem;\n}\n\n.calendar-size-lg .calendar-day-cell {\n  font-size: 0.875rem;\n  margin: 0.1875rem;\n}\n\n.calendar-size-lg .calendar-day-row {\n  min-height: 2.5rem;\n}\n\n/* ============================================================================\n   Backwards Compatibility\n   ============================================================================ */\n\n.calendar-day {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n";
+/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
+export declare const calendarMonthCustomFlavorCss: (base: string) => string;
+export declare const calendarMonthStyles: string;
 //# sourceMappingURL=calendar-month.d.ts.map

package/lib/styles/calendar-month.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-month.d.ts","sourceRoot":"","sources":["../../src/styles/calendar-month.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,mBAAmB,0yOA6Q/B,CAAC"}
+{"version":3,"file":"calendar-month.d.ts","sourceRoot":"","sources":["../../src/styles/calendar-month.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAyCH,8EAA8E;AAC9E,eAAO,MAAM,4BAA4B,GAAI,MAAM,MAAM,WAAyC,CAAC;AAEnG,eAAO,MAAM,mBAAmB,QAyQ/B,CAAC"}

package/lib/styles/calendar-month.js

@@ -2,6 +2,43 @@
  * Calendar Month Styles
  * Improved design with better visual hierarchy and size variants
  */
+import { FLAVORS } from "../types/common.js";
+/* Flavor rules set --calendar-month-* local vars, wired in as the fallback
+   BEHIND every existing --ty-calendar-* public override (so those keep
+   working exactly as before) and AHEAD of the hardcoded primary default.
+   Doubles as the per-instance override API for a specific flavor: e.g.
+   `ty-calendar-month { --calendar-month-accent: ... }`. Fallback flavor
+   `fb` is used for custom flavors so missing tokens degrade to neutral. */
+const calendarMonthFlavor = (f, fb) => {
+    const color = (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}"]) {
+  --calendar-month-accent: ${color("")};
+  --calendar-month-selected-bg: ${bg("")};
+  --calendar-month-selected-color: ${color("-strong")};
+  --calendar-month-selected-hover-bg: ${bg("-bold")};
+}
+:host([flavor="${f}+"]) {
+  --calendar-month-accent: ${color("-strong")};
+  --calendar-month-selected-bg: ${bg("-bold")};
+  --calendar-month-selected-color: ${color("-strong")};
+  --calendar-month-selected-hover-bg: ${bg("-bold")};
+}
+:host([flavor="${f}-"]) {
+  --calendar-month-accent: ${color("-soft")};
+  --calendar-month-selected-bg: ${bg("-soft")};
+  --calendar-month-selected-color: ${color("")};
+  --calendar-month-selected-hover-bg: ${bg("")};
+}
+`;
+};
+/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
+export const calendarMonthCustomFlavorCss = (base) => calendarMonthFlavor(base, "neutral");
 export const calendarMonthStyles = `
 /* ============================================================================
    Theming Tokens
@@ -9,43 +46,11 @@ export const calendarMonthStyles = `
    Defaults chain back to the global --ty-color-* / --ty-bg-* / --ty-border tokens.
    ============================================================================ */
 
-:host {
-  /* Accent aliases — override these three for thin retheming */
-  --ty-calendar-accent: var(--ty-color-primary);
-  --ty-calendar-today-accent: var(--ty-color-secondary);
-  --ty-calendar-muted: var(--ty-color-neutral);
-
-  /* Header (weekday names) */
-  --ty-calendar-header-color: var(--ty-color-neutral-strong);
-
-  /* Day cell — base */
-  --ty-calendar-day-color: var(--ty-calendar-muted);
-  --ty-calendar-day-bg: transparent;
-  --ty-calendar-day-border: var(--ty-border);
-  --ty-calendar-day-radius: 0.375rem;
-
-  /* Day cell — hover */
-  --ty-calendar-day-hover-color: var(--ty-color-neutral-strong);
-  --ty-calendar-day-hover-bg: var(--ty-bg-neutral-soft);
-  --ty-calendar-day-hover-border: var(--ty-border-bold);
-
-  /* Today */
-  --ty-calendar-today-color: var(--ty-color-secondary-strong);
-  --ty-calendar-today-bg: var(--ty-bg-secondary-soft);
-  --ty-calendar-today-border: var(--ty-calendar-today-accent);
-
-  /* Selected */
-  --ty-calendar-selected-color: var(--ty-color-primary-strong);
-  --ty-calendar-selected-bg: var(--ty-bg-primary);
-  --ty-calendar-selected-border: var(--ty-calendar-accent);
-  --ty-calendar-selected-hover-bg: var(--ty-bg-primary-bold);
-  --ty-calendar-selected-hover-border: var(--ty-color-primary-bold);
-
-  /* Modifier states */
-  --ty-calendar-weekend-color: var(--ty-color-danger-soft);
-  --ty-calendar-other-month-color: var(--ty-color-neutral-faint);
-  --ty-calendar-other-month-opacity: 0.5;
-}
+/* Theming tokens are applied as var(--ty-calendar-*, <default>) at point
+   of use (not declared on :host) so consumers can override any of them
+   from outside the shadow root. The 3 accent aliases — --ty-calendar-accent,
+   --ty-calendar-today-accent, --ty-calendar-muted — still cascade into the
+   derived defaults, so overriding one retints the related cells. */
 
 /* ============================================================================
    Base Calendar Container
@@ -57,7 +62,7 @@ export const calendarMonthStyles = `
   box-sizing: border-box;
   gap: 0;
   padding: 0.75rem;
-  border-radius: 0.5rem;
+  border-radius: var(--ty-radius-md);
   font-family: system-ui, sans-serif;
   user-select: none;
   width: var(--calendar-width, fit-content);
@@ -77,7 +82,7 @@ export const calendarMonthStyles = `
 
 .calendar-header-row {
   flex: 0 0 auto;
-  color: var(--ty-calendar-header-color);
+  color: var(--ty-calendar-header-color, var(--ty-color-neutral-soft));
 }
 
 .calendar-day-row {
@@ -106,7 +111,7 @@ export const calendarMonthStyles = `
 
 .calendar-header-cell {
   text-align: center;
-  font-weight: 600;
+  font-weight: 500;
   text-transform: uppercase;
   padding: 0.25rem;
   letter-spacing: 0.05em;
@@ -129,65 +134,88 @@ export const calendarMonthStyles = `
   /* Spacing */
   margin: 0.125rem;
 
-  /* Visual */
-  border-radius: var(--ty-calendar-day-radius);
-  border: 1px solid var(--ty-calendar-day-border);
-  background-color: var(--ty-calendar-day-bg);
-  color: var(--ty-calendar-day-color);
+  /* Visual: ghost cells — no boxes; the border is a theming hook only */
+  border-radius: var(--ty-calendar-day-radius, 0.5rem);
+  border: 1px solid var(--ty-calendar-day-border, transparent);
+  background-color: var(--ty-calendar-day-bg, transparent);
+  color: var(--ty-calendar-day-color, var(--ty-calendar-muted, var(--ty-text)));
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: var(--ty-local-transition, background-color 0.15s ease, color 0.15s ease);
 
   /* Typography */
   font-weight: 400;
+  font-variant-numeric: tabular-nums;
 }
 
-/* Hover State - Stronger Feedback */
+/* Hover: soft rounded pill, no border flash */
 .calendar-day-cell:hover {
-  color: var(--ty-calendar-day-hover-color);
-  background-color: var(--ty-calendar-day-hover-bg);
-  border-color: var(--ty-calendar-day-hover-border);
+  color: var(--ty-calendar-day-hover-color, var(--ty-text-strong));
+  background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));
+  border-color: var(--ty-calendar-day-hover-border, transparent);
+}
+
+/* Keyboard focus ring (roving tabindex — see calendar-month.ts's render()).
+   :focus-visible, not :focus, so mouse/pointerdown activation doesn't flash
+   a ring; only Tab-in / arrow-key navigation does. */
+.calendar-day-cell:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--calendar-month-accent, var(--ty-color-primary));
 }
 
 /* ============================================================================
    Day States
    ============================================================================ */
 
-/* Today - Strong Visual Indicator */
+/* Today: accent number, no slab — never collides with hover, and the
+   selected pill wins when today is picked */
 .calendar-day-cell.today {
-  background-color: var(--ty-calendar-today-bg);
-  color: var(--ty-calendar-today-color);
-  border-color: var(--ty-calendar-today-border);
+  background-color: var(--ty-calendar-today-bg, transparent);
+  color: var(--ty-calendar-today-color, var(--ty-calendar-today-accent, var(--calendar-month-accent, var(--ty-color-primary))));
+  border-color: var(--ty-calendar-today-border, transparent);
   font-weight: 600;
 }
 
-/* Weekend - Subtle Color Shift */
+/* Weekend: no distinction by default (hook kept for theming) */
 .calendar-day-cell.weekend {
-  color: var(--ty-calendar-weekend-color);
+  color: var(--ty-calendar-weekend-color, var(--ty-calendar-day-color, var(--ty-text)));
 }
 
-/* Other Month - Muted */
+/* Other Month - Muted.
+   Was color: var(--ty-color-neutral-faint) at opacity 0.5 — -faint alone is
+   only ~2.5:1 against the content surface (already under the 4.5:1 AA text
+   minimum), and blending it toward the background via opacity made it
+   worse (~1.5:1 in light mode). --ty-calendar-other-month-color is its own
+   token (tyrell.css :root / html.dark) calibrated to actually pass, with
+   opacity dropped rather than layered on top. */
 .calendar-day-cell.other-month {
-  color: var(--ty-calendar-other-month-color);
-  opacity: var(--ty-calendar-other-month-opacity);
+  color: var(--ty-calendar-other-month-color, #6b7280);
 }
 
 .calendar-day-cell.other-month:hover { 
-  color: var(--ty-calendar-day-hover-color);
-  background-color: var(--ty-calendar-day-hover-bg);
+  color: var(--ty-calendar-day-hover-color, var(--ty-color-neutral-strong));
+  background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));
   opacity: 0.7;
 }
 
-/* Selected State (for custom usage) */
+/* Disabled - outside min/max bounds */
+.calendar-day-cell.disabled {
+  color: var(--ty-calendar-disabled-color, var(--ty-color-neutral-faint));
+  opacity: var(--ty-calendar-disabled-opacity, 0.35);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Selected: the one strong element in the grid */
 .calendar-day-cell.selected {
-  background-color: var(--ty-calendar-selected-bg);
-  color: var(--ty-calendar-selected-color);
-  border-color: var(--ty-calendar-selected-border);
+  background-color: var(--ty-calendar-selected-bg, var(--calendar-month-selected-bg, var(--ty-bg-primary)));
+  color: var(--ty-calendar-selected-color, var(--calendar-month-selected-color, var(--ty-color-primary-strong)));
+  border-color: var(--ty-calendar-selected-border, var(--ty-calendar-accent, var(--calendar-month-accent, transparent)));
   font-weight: 600;
 }
 
 .calendar-day-cell.selected:hover {
-  background-color: var(--ty-calendar-selected-hover-bg);
-  border-color: var(--ty-calendar-selected-hover-border);
+  background-color: var(--ty-calendar-selected-hover-bg, var(--calendar-month-selected-hover-bg, var(--ty-bg-primary-bold)));
+  border-color: var(--ty-calendar-selected-hover-border, transparent);
 }
 
 .calendar-day-cell.selected.other-month {
@@ -271,5 +299,10 @@ export const calendarMonthStyles = `
   justify-content: center;
   box-sizing: border-box;
 }
+
+/* ============================================================================
+   Flavor Variants (set --calendar-month-*, consumed above)
+   ============================================================================ */
+${FLAVORS.map((f) => calendarMonthFlavor(f)).join("")}
 `;
 //# sourceMappingURL=calendar-month.js.map

package/lib/styles/calendar-month.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-month.js","sourceRoot":"","sources":["../../src/styles/calendar-month.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6QlC,CAAC"}
+{"version":3,"file":"calendar-month.js","sourceRoot":"","sources":["../../src/styles/calendar-month.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C;;;;;2EAK2E;AAC3E,MAAM,mBAAmB,GAAG,CAAC,CAAS,EAAE,EAAW,EAAE,EAAE;IACrD,MAAM,KAAK,GAAG,CAAC,CAAS,EAAE,EAAE,CAC1B,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;6BACW,KAAK,CAAC,EAAE,CAAC;kCACJ,EAAE,CAAC,EAAE,CAAC;qCACH,KAAK,CAAC,SAAS,CAAC;wCACb,EAAE,CAAC,OAAO,CAAC;;iBAElC,CAAC;6BACW,KAAK,CAAC,SAAS,CAAC;kCACX,EAAE,CAAC,OAAO,CAAC;qCACR,KAAK,CAAC,SAAS,CAAC;wCACb,EAAE,CAAC,OAAO,CAAC;;iBAElC,CAAC;6BACW,KAAK,CAAC,OAAO,CAAC;kCACT,EAAE,CAAC,OAAO,CAAC;qCACR,KAAK,CAAC,EAAE,CAAC;wCACN,EAAE,CAAC,EAAE,CAAC;;CAE7C,CAAC;AACF,CAAC,CAAC;AAEF,8EAA8E;AAC9E,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,mBAAmB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAEnG,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwQjC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;CACpD,CAAC"}

package/lib/styles/calendar-navigation.d.ts

@@ -2,5 +2,5 @@
  * Calendar Navigation Styles
  * Clean, modern design with proper visual hierarchy and size variants
  */
-export declare const calendarNavigationStyles = "\n/* ============================================================================\n   Size Variants (CSS Custom Properties)\n   ============================================================================ */\n\n:host {\n  /* Default (md) */\n  --nav-btn-size: 2rem;\n  --nav-btn-icon-size: 1.25rem;\n  --nav-font-size: 1rem;\n  --nav-padding: 0.5rem 0.75rem;\n  --nav-default-width: 280px;\n\n  /* ==========================================================================\n     Theming Tokens\n     Override these to retheme navigation without touching the global palette.\n     ========================================================================== */\n\n  /* Accent alias \u2014 drives focus outline, mirrors --ty-calendar-accent */\n  --ty-calendar-accent: var(--ty-color-primary);\n\n  /* Nav button (prev/next chevrons) */\n  --ty-calendar-nav-color: var(--ty-color-neutral);\n  --ty-calendar-nav-hover-color: var(--ty-color-neutral-strong);\n  --ty-calendar-nav-hover-bg: var(--ty-bg-neutral-soft);\n  --ty-calendar-nav-active-bg: var(--ty-bg-neutral);\n  --ty-calendar-nav-focus-outline: var(--ty-calendar-accent);\n\n  /* Title (month/year display) */\n  --ty-calendar-nav-title-color: var(--ty-color-neutral-strong);\n}\n\n:host([data-size=\"sm\"]) {\n  --nav-btn-size: 1.5rem;\n  --nav-btn-icon-size: 1rem;\n  --nav-font-size: 0.875rem;\n  --nav-padding: 0.375rem 0.5rem;\n  --nav-default-width: 240px;\n}\n\n:host([data-size=\"lg\"]) {\n  --nav-btn-size: 2.5rem;\n  --nav-btn-icon-size: 1.5rem;\n  --nav-font-size: 1.125rem;\n  --nav-padding: 0.625rem 1rem;\n  --nav-default-width: 360px;\n}\n\n/* ============================================================================\n   Main Navigation Header\n   ============================================================================ */\n\n.calendar-navigation-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--nav-padding);\n  font-family: system-ui, sans-serif;\n  user-select: none;\n  width: var(--nav-width, var(--nav-default-width));\n  box-sizing: border-box;\n}\n\n/* ============================================================================\n   Navigation Groups (Left, Center, Right)\n   ============================================================================ */\n\n.nav-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.nav-group-left,\n.nav-group-right {\n  flex: 0 0 auto;\n}\n\n.nav-group-center {\n  flex: 1;\n  justify-content: center;\n}\n\n/* ============================================================================\n   Navigation Buttons\n   ============================================================================ */\n\n.nav-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--nav-btn-size);\n  height: var(--nav-btn-size);\n  padding: 0;\n  border: none;\n  border-radius: 0.375rem;\n  background-color: transparent;\n  color: var(--ty-calendar-nav-color);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  outline: none;\n}\n\n.nav-btn:hover {\n  background-color: var(--ty-calendar-nav-hover-bg);\n  color: var(--ty-calendar-nav-hover-color);\n}\n\n.nav-btn:active {\n  background-color: var(--ty-calendar-nav-active-bg);\n  transform: scale(0.95);\n}\n\n.nav-btn:focus-visible {\n  outline: 2px solid var(--ty-calendar-nav-focus-outline);\n  outline-offset: 2px;\n}\n\n/* SVG sizing */\n.nav-btn svg {\n  width: var(--nav-btn-icon-size);\n  height: var(--nav-btn-icon-size);\n  display: block;\n}\n\n/* ============================================================================\n   Month/Year Display (Center)\n   ============================================================================ */\n\n.month-year-display {\n  font-size: var(--nav-font-size);\n  font-weight: 600;\n  color: var(--ty-calendar-nav-title-color);\n  text-align: center;\n  white-space: nowrap;\n  letter-spacing: -0.01em;\n}\n";
+export declare const calendarNavigationStyles = "\n/* ============================================================================\n   Size Variants (CSS Custom Properties)\n   ============================================================================ */\n\n/* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of\n   use (NOT on :host) so consumers can override them from outside \u2014 this\n   component is nested inside ty-calendar's shadow, so a :host default would\n   block inherited overrides. --ty-calendar-accent still cascades in. */\n\n:host([data-size=\"md\"]) {\n  --nav-btn-size: 2rem;\n  --nav-btn-icon-size: 1.25rem;\n  --nav-font-size: 1rem;\n  --nav-padding: 0.5rem 0.75rem;\n  --nav-default-width: 280px;\n}\n\n:host([data-size=\"sm\"]) {\n  --nav-btn-size: 1.5rem;\n  --nav-btn-icon-size: 1rem;\n  --nav-font-size: 0.875rem;\n  --nav-padding: 0.375rem 0.5rem;\n  --nav-default-width: 240px;\n}\n\n:host([data-size=\"lg\"]) {\n  --nav-btn-size: 2.5rem;\n  --nav-btn-icon-size: 1.5rem;\n  --nav-font-size: 1.125rem;\n  --nav-padding: 0.625rem 1rem;\n  --nav-default-width: 360px;\n}\n\n/* ============================================================================\n   Main Navigation Header\n   ============================================================================ */\n\n.calendar-navigation-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--nav-padding);\n  font-family: system-ui, sans-serif;\n  user-select: none;\n  width: var(--nav-width, var(--nav-default-width));\n  box-sizing: border-box;\n}\n\n/* ============================================================================\n   Navigation Groups (Left, Center, Right)\n   ============================================================================ */\n\n.nav-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.nav-group-left,\n.nav-group-right {\n  flex: 0 0 auto;\n}\n\n.nav-group-center {\n  flex: 1;\n  justify-content: center;\n}\n\n/* ============================================================================\n   Navigation Buttons\n   ============================================================================ */\n\n.nav-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--nav-btn-size);\n  height: var(--nav-btn-size);\n  padding: 0;\n  border: none;\n  border-radius: var(--ty-radius-base);\n  background-color: transparent;\n  color: var(--ty-calendar-nav-color, var(--ty-color-neutral));\n  cursor: pointer;\n  transition: var(--ty-local-transition, all 0.15s ease);\n  outline: none;\n}\n\n.nav-btn:hover {\n  background-color: var(--ty-calendar-nav-hover-bg, var(--ty-bg-neutral-soft));\n  color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));\n}\n\n.nav-btn:active {\n  background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));\n  transform: scale(0.95);\n}\n\n.nav-btn:disabled {\n  opacity: 0.35;\n  cursor: default;\n  pointer-events: none;\n}\n\n.nav-btn:focus-visible {\n  outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));\n  outline-offset: 2px;\n}\n\n/* SVG sizing */\n.nav-btn svg {\n  width: var(--nav-btn-icon-size);\n  height: var(--nav-btn-icon-size);\n  display: block;\n}\n\n/* ============================================================================\n   Month/Year Display (Center)\n   ============================================================================ */\n\n.month-year-display {\n  font-size: var(--nav-font-size);\n  font-weight: 600;\n  color: var(--ty-calendar-nav-title-color, var(--ty-color-neutral-strong));\n  text-align: center;\n  white-space: nowrap;\n  letter-spacing: -0.01em;\n}\n";
 //# sourceMappingURL=calendar-navigation.d.ts.map

package/lib/styles/calendar-navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-navigation.d.ts","sourceRoot":"","sources":["../../src/styles/calendar-navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,wBAAwB,s2HAyIpC,CAAC"}
+{"version":3,"file":"calendar-navigation.d.ts","sourceRoot":"","sources":["../../src/styles/calendar-navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,wBAAwB,kpHAiIpC,CAAC"}

package/lib/styles/calendar-navigation.js

@@ -7,31 +7,17 @@ export const calendarNavigationStyles = `
    Size Variants (CSS Custom Properties)
    ============================================================================ */
 
-:host {
-  /* Default (md) */
+/* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of
+   use (NOT on :host) so consumers can override them from outside — this
+   component is nested inside ty-calendar's shadow, so a :host default would
+   block inherited overrides. --ty-calendar-accent still cascades in. */
+
+:host([data-size="md"]) {
   --nav-btn-size: 2rem;
   --nav-btn-icon-size: 1.25rem;
   --nav-font-size: 1rem;
   --nav-padding: 0.5rem 0.75rem;
   --nav-default-width: 280px;
-
-  /* ==========================================================================
-     Theming Tokens
-     Override these to retheme navigation without touching the global palette.
-     ========================================================================== */
-
-  /* Accent alias — drives focus outline, mirrors --ty-calendar-accent */
-  --ty-calendar-accent: var(--ty-color-primary);
-
-  /* Nav button (prev/next chevrons) */
-  --ty-calendar-nav-color: var(--ty-color-neutral);
-  --ty-calendar-nav-hover-color: var(--ty-color-neutral-strong);
-  --ty-calendar-nav-hover-bg: var(--ty-bg-neutral-soft);
-  --ty-calendar-nav-active-bg: var(--ty-bg-neutral);
-  --ty-calendar-nav-focus-outline: var(--ty-calendar-accent);
-
-  /* Title (month/year display) */
-  --ty-calendar-nav-title-color: var(--ty-color-neutral-strong);
 }
 
 :host([data-size="sm"]) {
@@ -97,26 +83,32 @@ export const calendarNavigationStyles = `
   height: var(--nav-btn-size);
   padding: 0;
   border: none;
-  border-radius: 0.375rem;
+  border-radius: var(--ty-radius-base);
   background-color: transparent;
-  color: var(--ty-calendar-nav-color);
+  color: var(--ty-calendar-nav-color, var(--ty-color-neutral));
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: var(--ty-local-transition, all 0.15s ease);
   outline: none;
 }
 
 .nav-btn:hover {
-  background-color: var(--ty-calendar-nav-hover-bg);
-  color: var(--ty-calendar-nav-hover-color);
+  background-color: var(--ty-calendar-nav-hover-bg, var(--ty-bg-neutral-soft));
+  color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));
 }
 
 .nav-btn:active {
-  background-color: var(--ty-calendar-nav-active-bg);
+  background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));
   transform: scale(0.95);
 }
 
+.nav-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+  pointer-events: none;
+}
+
 .nav-btn:focus-visible {
-  outline: 2px solid var(--ty-calendar-nav-focus-outline);
+  outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));
   outline-offset: 2px;
 }
 
@@ -134,7 +126,7 @@ export const calendarNavigationStyles = `
 .month-year-display {
   font-size: var(--nav-font-size);
   font-weight: 600;
-  color: var(--ty-calendar-nav-title-color);
+  color: var(--ty-calendar-nav-title-color, var(--ty-color-neutral-strong));
   text-align: center;
   white-space: nowrap;
   letter-spacing: -0.01em;

package/lib/styles/calendar-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-navigation.js","sourceRoot":"","sources":["../../src/styles/calendar-navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyIvC,CAAC"}
+{"version":3,"file":"calendar-navigation.js","sourceRoot":"","sources":["../../src/styles/calendar-navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiIvC,CAAC"}

package/lib/styles/checkbox.d.ts

@@ -1,9 +1,11 @@
 /**
- * Checkbox Component Styles
+ * Checkbox Component Styles — self-contained (no inputStyles import).
  *
- * Imports inputStyles (which has the visual rules), then overrides :host
- * to be inline-flex so the checkbox sizes to its visual instead of
- * inheriting `display: block; width: 100%` from input's :host rule.
+ * The checkbox is "just the tick": a single checkmark whose color/opacity
+ * carries the state. Full flavor color when checked, faint when unchecked,
+ * dash at mid-opacity when indeterminate, grayscale when disabled.
  */
-export declare const checkboxStyles = "\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/* 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/* ===== CHECKBOX STYLING ===== */\n\n.checkbox-container {\n  display: inline-flex;\n  align-items: center;\n  outline: none;\n  transition: all 0.15s ease-in-out;\n  user-select: none;\n  cursor: pointer;\n\n  /* Default size (md) - matching input sizes */\n  border-radius: 6px;\n  gap: var(--ty-spacing-1);\n  color: var(--ty-text-faint);\n}\n\n.checkbox-container[aria-checked=\"true\"] {\n  color: var(--ty-text);\n}\n\n/* Ensure slotted label content inherits the color from container */\n.checkbox-container ::slotted(*) {\n  color: inherit;\n  transition: color 0.15s ease-in-out;\n}\n\n.checkbox-container label {\n  cursor: pointer;\n}\n\n.checkbox-container label {\n  font-size: var(--ty-font-sm);\n}\n\n.checkbox-container.sm label {\n  font-size: var(--ty-font-xs);\n}\n\n.checkbox-container.lg label {\n  font-size: var(--ty-font-base);\n}\n\n.checkbox-container.xl label {\n  font-size: var(--ty-font-lg);\n}\n\n/* Checkbox input container - different layout for checkboxes */\n.input-container.checkbox-layout {\n  flex-direction: row;\n  align-items: center;\n  gap: 12px;\n  width: auto;\n  /* Don't force full width for checkboxes */\n}\n\n.input-container.checkbox-layout .ty-field-label {\n  margin-bottom: 0;\n  padding-left: 0;\n  order: 2;\n  cursor: pointer;\n  flex: 1;\n}\n\n.input-container.checkbox-layout .checkbox-container {\n  order: 1;\n  flex-shrink: 0;\n}\n\n/* Error message positioning for checkboxes */\n.input-container.checkbox-layout .error-message {\n  padding-left: 0;\n  margin-left: 52px;\n  /* Align with label text */\n}\n\n.checkbox-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n  transition: color 0.15s ease-in-out;\n  pointer-events: none;\n  /* Let the container handle the click */\n}\n\n.checkbox-container svg {\n  width: 24px;\n  height: 24px;\n}\n\n/* ===== CHECKBOX SIZE MODIFIERS ===== */\n\n.checkbox-container.xs svg {\n  width: 16px;\n  height: 16px;\n}\n\n/* Adjust error message margin for XS */\n.input-container.checkbox-layout .checkbox-container.xs~.error-message {\n  margin-left: 44px;\n}\n\n\n.checkbox-container.sm svg {\n  width: 20px;\n  height: 20px;\n}\n\n/* Adjust error message margin for SM */\n.input-container.checkbox-layout .checkbox-container.sm~.error-message {\n  margin-left: 48px;\n}\n\n\n.checkbox-container.md svg {\n  width: 24px;\n  height: 24px;\n}\n\n\n.checkbox-container.lg svg {\n  width: 28px;\n  height: 28px;\n}\n\n.checkbox-container.xl svg {\n  width: 32px;\n  height: 32px;\n}\n\n\n.checkbox-container.xl svg {\n  font-size: 20px;\n}\n\n/* Adjust error message margin for LG */\n.input-container.checkbox-layout .checkbox-container.lg~.error-message {\n  margin-left: 56px;\n}\n\n\n/* Adjust error message margin for XL */\n.input-container.checkbox-layout .checkbox-container.xl~.error-message {\n  margin-left: 60px;\n  /* 48px + 12px gap */\n}\n\n/* ===== CHECKBOX SEMANTIC FLAVORS ===== */\n\n.checkbox-container.primary {\n  color: var(--ty-color-primary-soft);\n}\n\n\n.checkbox-container.primary[aria-checked=\"true\"] {\n  color: var(--ty-color-primary);\n}\n\n.checkbox-container.secondary {\n  color: var(--ty-color-secondary-soft);\n}\n\n\n.checkbox-container.secondary[aria-checked=\"true\"] {\n  color: var(--ty-color-secondary);\n}\n\n.checkbox-container.success {\n  color: var(--ty-color-success-soft);\n}\n\n\n.checkbox-container.success[aria-checked=\"true\"] {\n  color: var(--ty-color-success);\n}\n\n.checkbox-container.danger {\n  color: var(--ty-color-danger-soft);\n}\n\n.checkbox-container.danger[aria-checked=\"true\"] {\n  color: var(--ty-color-danger);\n}\n\n.checkbox-container.warning {\n  color: var(--ty-color-warning-soft);\n}\n\n.checkbox-container.warning[aria-checked=\"true\"] {\n  color: var(--ty-color-warning);\n}\n\n\n/* Neutral */\n.checkbox-container.neutral {\n  color: var(--ty-color-neutral-soft);\n}\n\n.checkbox-container.neutral[aria-checked=\"true\"] {\n  color: var(--ty-color-neutral);\n}\n\n/* Disabled state */\n.checkbox-container.disabled {\n  pointer-events: none;\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.checkbox-container.disabled .checkbox-icon {\n  color: var(--ty-color-neutral-faint);\n}\n\n/* Error state */\n.checkbox-container.error .checkbox-icon {\n  color: var(--ty-color-danger);\n}\n\n.checkbox-container.error:focus {\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);\n}\n\n/* Required state */\n.checkbox-container.required .checkbox-icon {\n  /* Could add specific styling for required checkboxes */\n}\n\n/* ===== RESPONSIVE CHECKBOX BEHAVIOR ===== */\n\n@container (max-width: 480px) {\n  .checkbox-container.lg {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.lg svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  .checkbox-container.xl {\n    width: 44px;\n    height: 44px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 22px;\n    height: 22px;\n  }\n}\n\n@container (max-width: 320px) {\n  .checkbox-container.xl {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 20px;\n    height: 20px;\n  }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n  .checkbox-container.lg {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.lg svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  .checkbox-container.xl {\n    width: 44px;\n    height: 44px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 22px;\n    height: 22px;\n  }\n}\n\n@media (max-width: 480px) {\n  .checkbox-container.xl {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 20px;\n    height: 20px;\n  }\n}\n\n\n/* Override input's :host to be inline (sized to its visual) */\n:host {\n  display: inline-flex;\n  width: auto;\n  vertical-align: middle;\n}\n";
+/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
+export declare const checkboxCustomFlavorCss: (base: string) => string;
+export declare const checkboxStyles: string;
 //# sourceMappingURL=checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/styles/checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,eAAO,MAAM,cAAc,6zcAS1B,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/styles/checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAwBH,8EAA8E;AAC9E,eAAO,MAAM,uBAAuB,GAAI,MAAM,MAAM,WAAoC,CAAC;AAEzF,eAAO,MAAM,cAAc,QA0G1B,CAAC"}

package/lib/styles/checkbox.js

@@ -1,19 +1,136 @@
 /**
- * Checkbox Component Styles
+ * Checkbox Component Styles — self-contained (no inputStyles import).
  *
- * Imports inputStyles (which has the visual rules), then overrides :host
- * to be inline-flex so the checkbox sizes to its visual instead of
- * inheriting `display: block; width: 100%` from input's :host rule.
+ * The checkbox is "just the tick": a single checkmark whose color/opacity
+ * carries the state. Full flavor color when checked, faint when unchecked,
+ * dash at mid-opacity when indeterminate, grayscale when disabled.
  */
-import { inputStyles } from "./input.js";
+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 = `
-${inputStyles}
-
-/* Override input's :host to be inline (sized to its visual) */
 :host {
   display: inline-flex;
   width: auto;
   vertical-align: middle;
 }
+
+.checkbox-container {
+  display: inline-flex;
+  align-items: center;
+  outline: none;
+  transition: var(--ty-local-transition, all 0.15s ease-in-out);
+  user-select: none;
+  cursor: pointer;
+  border-radius: 6px;
+  gap: var(--ty-spacing-1);
+  /* 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(--checkbox-color, var(--ty-color-neutral));
+}
+
+/* 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 var(--checkbox-ring, color-mix(in oklab, var(--ty-color-primary) 25%, transparent));
+}
+
+.checkbox-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  transition: var(--ty-local-transition, color 0.15s ease-in-out);
+  pointer-events: none;
+  /* Let the container handle the click */
+}
+
+/* ===== SIZES ===== */
+
+.checkbox-container svg {
+  width: 16px;
+  height: 16px;
+}
+
+.checkbox-container.xs svg {
+  width: 12px;
+  height: 12px;
+}
+
+.checkbox-container.sm svg {
+  width: 14px;
+  height: 14px;
+}
+
+.checkbox-container.lg svg {
+  width: 20px;
+  height: 20px;
+}
+
+.checkbox-container.xl svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* ===== SEMANTIC FLAVORS (set --checkbox-color[-off], consumed above) ===== */
+${FLAVORS.map((f) => checkboxFlavor(f)).join("")}
+
+/* ===== STATES ===== */
+
+/* Clean tick: no box outline, just the checkmark. Inactive = faint tick. */
+.checkbox-container:not([aria-checked="true"]) {
+  opacity: 0.35;
+}
+
+/* Indeterminate (dash) sits between unchecked and checked */
+.checkbox-container[aria-checked="mixed"] {
+  opacity: 0.7;
+}
+
+/* Disabled must stay distinguishable from merely-unchecked: grayscale kills
+   the flavor color, and disabled-unchecked drops below the unchecked 0.35. */
+.checkbox-container.disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.5;
+  filter: grayscale(1);
+}
+
+.checkbox-container.disabled:not([aria-checked="true"]) {
+  opacity: 0.2;
+}
+
+/* Error state */
+.checkbox-container.error .checkbox-icon {
+  color: var(--ty-color-danger);
+}
+
+.checkbox-container.error:focus {
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);
+}
 `;
 //# sourceMappingURL=checkbox.js.map

package/lib/styles/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/styles/checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,MAAM,CAAC,MAAM,cAAc,GAAG;EAC5B,WAAW;;;;;;;;CAQZ,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/* 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,ooDAuFtB,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"}