tyrell-components 1.0.0-TC28 → 1.0.0-TC30

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

@@ -2,5 +2,5 @@
  * 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/* Theming tokens are applied as var(--ty-calendar-*, <default>) at point\n   of use (not declared on :host) so consumers can override any of them\n   from outside the shadow root. The 3 accent aliases \u2014 --ty-calendar-accent,\n   --ty-calendar-today-accent, --ty-calendar-muted \u2014 still cascade into the\n   derived defaults, so overriding one retints the related cells. */\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: var(--ty-radius-md);\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, var(--ty-color-neutral-strong));\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, 0.375rem);\n  border: 1px solid var(--ty-calendar-day-border, var(--ty-border-faint));\n  background-color: var(--ty-calendar-day-bg, transparent);\n  color: var(--ty-calendar-day-color, var(--ty-calendar-muted, var(--ty-color-neutral)));\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, var(--ty-color-neutral-strong));\n  background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));\n  border-color: var(--ty-calendar-day-hover-border, var(--ty-border-bold));\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, var(--ty-bg-secondary-soft));\n  color: var(--ty-calendar-today-color, var(--ty-color-secondary-strong));\n  border-color: var(--ty-calendar-today-border, var(--ty-calendar-today-accent, var(--ty-color-secondary)));\n  font-weight: 600;\n}\n\n/* Weekend - Subtle Color Shift */\n.calendar-day-cell.weekend {\n  color: var(--ty-calendar-weekend-color, var(--ty-color-danger-soft));\n}\n\n/* Other Month - Muted */\n.calendar-day-cell.other-month {\n  color: var(--ty-calendar-other-month-color, var(--ty-color-neutral-faint));\n  opacity: var(--ty-calendar-other-month-opacity, 0.5);\n}\n\n.calendar-day-cell.other-month:hover { \n  color: var(--ty-calendar-day-hover-color, var(--ty-color-neutral-strong));\n  background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));\n  opacity: 0.7;\n}\n\n/* Disabled - outside min/max bounds */\n.calendar-day-cell.disabled {\n  color: var(--ty-calendar-disabled-color, var(--ty-color-neutral-faint));\n  opacity: var(--ty-calendar-disabled-opacity, 0.35);\n  cursor: default;\n  pointer-events: none;\n}\n\n/* Selected State (for custom usage) */\n.calendar-day-cell.selected {\n  background-color: var(--ty-calendar-selected-bg, var(--ty-bg-primary));\n  color: var(--ty-calendar-selected-color, var(--ty-color-primary-strong));\n  border-color: var(--ty-calendar-selected-border, var(--ty-calendar-accent, var(--ty-color-primary)));\n  font-weight: 600;\n}\n\n.calendar-day-cell.selected:hover {\n  background-color: var(--ty-calendar-selected-hover-bg, var(--ty-bg-primary-bold));\n  border-color: var(--ty-calendar-selected-hover-border, var(--ty-color-primary-bold));\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";
+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/* Theming tokens are applied as var(--ty-calendar-*, <default>) at point\n   of use (not declared on :host) so consumers can override any of them\n   from outside the shadow root. The 3 accent aliases \u2014 --ty-calendar-accent,\n   --ty-calendar-today-accent, --ty-calendar-muted \u2014 still cascade into the\n   derived defaults, so overriding one retints the related cells. */\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: var(--ty-radius-md);\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, var(--ty-color-neutral-soft));\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: 500;\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: ghost cells \u2014 no boxes; the border is a theming hook only */\n  border-radius: var(--ty-calendar-day-radius, 0.5rem);\n  border: 1px solid var(--ty-calendar-day-border, transparent);\n  background-color: var(--ty-calendar-day-bg, transparent);\n  color: var(--ty-calendar-day-color, var(--ty-calendar-muted, var(--ty-text)));\n  cursor: pointer;\n  transition: background-color 0.15s ease, color 0.15s ease;\n\n  /* Typography */\n  font-weight: 400;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Hover: soft rounded pill, no border flash */\n.calendar-day-cell:hover {\n  color: var(--ty-calendar-day-hover-color, var(--ty-text-strong));\n  background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));\n  border-color: var(--ty-calendar-day-hover-border, transparent);\n}\n\n/* ============================================================================\n   Day States\n   ============================================================================ */\n\n/* Today: accent number, no slab \u2014 never collides with hover, and the\n   selected pill wins when today is picked */\n.calendar-day-cell.today {\n  background-color: var(--ty-calendar-today-bg, transparent);\n  color: var(--ty-calendar-today-color, var(--ty-calendar-today-accent, var(--ty-color-primary)));\n  border-color: var(--ty-calendar-today-border, transparent);\n  font-weight: 600;\n}\n\n/* Weekend: no distinction by default (hook kept for theming) */\n.calendar-day-cell.weekend {\n  color: var(--ty-calendar-weekend-color, var(--ty-calendar-day-color, var(--ty-text)));\n}\n\n/* Other Month - Muted */\n.calendar-day-cell.other-month {\n  color: var(--ty-calendar-other-month-color, var(--ty-color-neutral-faint));\n  opacity: var(--ty-calendar-other-month-opacity, 0.5);\n}\n\n.calendar-day-cell.other-month:hover { \n  color: var(--ty-calendar-day-hover-color, var(--ty-color-neutral-strong));\n  background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));\n  opacity: 0.7;\n}\n\n/* Disabled - outside min/max bounds */\n.calendar-day-cell.disabled {\n  color: var(--ty-calendar-disabled-color, var(--ty-color-neutral-faint));\n  opacity: var(--ty-calendar-disabled-opacity, 0.35);\n  cursor: default;\n  pointer-events: none;\n}\n\n/* Selected: the one strong element in the grid */\n.calendar-day-cell.selected {\n  background-color: var(--ty-calendar-selected-bg, var(--ty-bg-primary));\n  color: var(--ty-calendar-selected-color, var(--ty-color-primary-strong));\n  border-color: var(--ty-calendar-selected-border, var(--ty-calendar-accent, transparent));\n  font-weight: 600;\n}\n\n.calendar-day-cell.selected:hover {\n  background-color: var(--ty-calendar-selected-hover-bg, var(--ty-bg-primary-bold));\n  border-color: var(--ty-calendar-selected-hover-border, transparent);\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";
 //# 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,8kOAqP/B,CAAC"}
+{"version":3,"file":"calendar-month.d.ts","sourceRoot":"","sources":["../../src/styles/calendar-month.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,mBAAmB,6vOAuP/B,CAAC"}

package/lib/styles/calendar-month.js

@@ -45,7 +45,7 @@ export const calendarMonthStyles = `
 
 .calendar-header-row {
   flex: 0 0 auto;
-  color: var(--ty-calendar-header-color, var(--ty-color-neutral-strong));
+  color: var(--ty-calendar-header-color, var(--ty-color-neutral-soft));
 }
 
 .calendar-day-row {
@@ -74,7 +74,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;
@@ -97,40 +97,42 @@ export const calendarMonthStyles = `
   /* Spacing */
   margin: 0.125rem;
 
-  /* Visual */
-  border-radius: var(--ty-calendar-day-radius, 0.375rem);
-  border: 1px solid var(--ty-calendar-day-border, var(--ty-border-faint));
+  /* 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-color-neutral)));
+  color: var(--ty-calendar-day-color, var(--ty-calendar-muted, var(--ty-text)));
   cursor: pointer;
-  transition: all 0.15s ease;
+  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, var(--ty-color-neutral-strong));
+  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, var(--ty-border-bold));
+  border-color: var(--ty-calendar-day-hover-border, transparent);
 }
 
 /* ============================================================================
    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, var(--ty-bg-secondary-soft));
-  color: var(--ty-calendar-today-color, var(--ty-color-secondary-strong));
-  border-color: var(--ty-calendar-today-border, var(--ty-calendar-today-accent, var(--ty-color-secondary)));
+  background-color: var(--ty-calendar-today-bg, transparent);
+  color: var(--ty-calendar-today-color, var(--ty-calendar-today-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, var(--ty-color-danger-soft));
+  color: var(--ty-calendar-weekend-color, var(--ty-calendar-day-color, var(--ty-text)));
 }
 
 /* Other Month - Muted */
@@ -153,17 +155,17 @@ export const calendarMonthStyles = `
   pointer-events: none;
 }
 
-/* Selected State (for custom usage) */
+/* Selected: the one strong element in the grid */
 .calendar-day-cell.selected {
   background-color: var(--ty-calendar-selected-bg, var(--ty-bg-primary));
   color: var(--ty-calendar-selected-color, var(--ty-color-primary-strong));
-  border-color: var(--ty-calendar-selected-border, var(--ty-calendar-accent, var(--ty-color-primary)));
+  border-color: var(--ty-calendar-selected-border, var(--ty-calendar-accent, transparent));
   font-weight: 600;
 }
 
 .calendar-day-cell.selected:hover {
   background-color: var(--ty-calendar-selected-hover-bg, var(--ty-bg-primary-bold));
-  border-color: var(--ty-calendar-selected-hover-border, var(--ty-color-primary-bold));
+  border-color: var(--ty-calendar-selected-hover-border, transparent);
 }
 
 .calendar-day-cell.selected.other-month {

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqPlC,CAAC"}
+{"version":3,"file":"calendar-month.js","sourceRoot":"","sources":["../../src/styles/calendar-month.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuPlC,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/* 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=\"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: 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";
+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: 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,+7GAyHpC,CAAC"}
+{"version":3,"file":"calendar-navigation.d.ts","sourceRoot":"","sources":["../../src/styles/calendar-navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,wBAAwB,snHAiIpC,CAAC"}

package/lib/styles/calendar-navigation.js

@@ -12,6 +12,14 @@ export const calendarNavigationStyles = `
    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;
+}
+
 :host([data-size="sm"]) {
   --nav-btn-size: 1.5rem;
   --nav-btn-icon-size: 1rem;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHvC,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/date-picker.d.ts

@@ -2,5 +2,5 @@
  * 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: var(--ty-bg-neutral-faint);\n  --ty-calendar-time-border: var(--ty-input-border);\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: none;\n  border-radius: var(--ty-radius-sm);\n  background: transparent;\n  color: var(--ty-calendar-time-input-color);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  text-align: center;\n  outline: none;\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";
+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";
 //# 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,0lXAgb5B,CAAC"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/styles/date-picker.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,gBAAgB,41XAwb5B,CAAC"}

package/lib/styles/date-picker.js

@@ -37,8 +37,8 @@ export const datePickerStyles = `
   /* ==========================================================================
      Theming Tokens — Time Section
      ========================================================================== */
-  --ty-calendar-time-bg: var(--ty-bg-neutral-faint);
-  --ty-calendar-time-border: var(--ty-input-border);
+  --ty-calendar-time-bg: transparent;
+  --ty-calendar-time-border: var(--ty-border-faint);
   --ty-calendar-time-label-color: var(--ty-color-neutral);
   --ty-calendar-time-input-color: var(--ty-input-color);
   --ty-calendar-time-placeholder-color: var(--ty-input-placeholder);
@@ -412,14 +412,22 @@ export const datePickerStyles = `
 
 .time-input {
   width: 3.5rem;
-  border: none;
+  border: 1px solid var(--ty-input-border);
   border-radius: var(--ty-radius-sm);
-  background: transparent;
+  background: var(--ty-input-bg);
   color: var(--ty-calendar-time-input-color);
   font-family: var(--ty-font-sans);
   font-size: var(--ty-font-sm);
+  font-variant-numeric: tabular-nums;
   text-align: center;
+  padding: 0.25rem 0.375rem;
   outline: none;
+  transition: var(--ty-transition-all);
+}
+
+.time-input:focus {
+  border-color: var(--ty-input-border-focus);
+  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);
 }
 
 .time-input::placeholder {

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgb/B,CAAC"}
+{"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"}

package/lib/styles/tag.d.ts

@@ -2,5 +2,5 @@
  * Tag Component Styles
  * PORTED FROM: clj/ty/components/tag.css
  */
-export declare const tagStyles = "\n/* Tag Component Styles using centralized ty.variables.css */\n\n/* Host element */\n\n/* Hidden attribute support */\n:host([hidden]) {\n  display: none !important;\n}\n\n/* Main container */\n.tag-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ty-spacing-1);\n  /* Default pill shape - can be overridden */\n  border-radius: var(--ty-radius-full);\n  font-weight: var(--ty-font-medium);\n  text-align: center;\n  white-space: nowrap;\n  user-select: none;\n  box-sizing: border-box;\n\n  /* Default MD size \u2014 anchor at 28px, even +4 steps for other sizes */\n  padding: 0 0.625rem;                            /* 0 10px */\n  font-size: var(--ty-font-xs);                   /* 14px */\n  line-height: var(--ty-leading-xs);              /* 21px */\n  letter-spacing: var(--ty-tracking-xs);          /* -0.013em */\n  min-height: 28px;\n\n  /* Transitions using centralized values */\n  transition: var(--ty-transition-all);\n\n  /* Colors via custom properties \u2014 override on :host for full control */\n  background: var(--tag-bg, transparent);\n  color: var(--tag-color, var(--ty-text));\n  border: 1px solid;\n  border-color: var(--tag-border-color, var(--ty-border));\n}\n\n/* Non-pill variant - rectangular with rounded corners */\n:host([pill=\"false\"]) .tag-container,\n:host([not-pill]) .tag-container {\n  border-radius: var(--ty-radius-md);\n  /* 6px instead of full pill */\n}\n\n/* Tags with value attribute but NOT selected should be clickable */\n:host([value]:not([selected])) .tag-container:not([aria-disabled=\"true\"]) {\n  cursor: pointer;\n}\n\n:host([selected]) .tag-container:not([aria-disabled=\"true\"]) {\n  cursor: initial;\n}\n\n.tag-container[tabindex]:not([aria-disabled=\"true\"]):hover {\n  background: var(--ty-bg-neutral-soft);\n  transform: translateY(-1px);\n  box-shadow: var(--ty-shadow-sm);\n}\n\n.tag-container[tabindex]:not([aria-disabled=\"true\"]):active {\n  transform: translateY(0);\n  box-shadow: var(--ty-shadow-sm);\n}\n\n.tag-container[tabindex]:focus {\n  outline: none;\n}\n\n/* Disabled state */\n.tag-container[aria-disabled=\"true\"] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Slot containers */\n.tag-start,\n.tag-content,\n.tag-end {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.tag-content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Dismiss button */\n.tag-dismiss {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  background: none;\n  border: none;\n  color: currentColor;\n  cursor: pointer;\n  border-radius: var(--ty-radius-full);\n  transition: var(--ty-transition-all);\n  opacity: 0.7;\n  flex-shrink: 0;\n  /* Default MD dismiss button size */\n  width: var(--ty-spacing-4);\n  /* 16px */\n  height: var(--ty-spacing-4);\n}\n\n.tag-dismiss:hover {\n  opacity: 1;\n  background: rgba(0, 0, 0, 0.1);\n}\n\n.tag-dismiss svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Size variants - override defaults */\n:host([size=\"xs\"]) .tag-container {\n  padding: 0 0.375rem;                            /* 0 6px */\n  font-size: var(--ty-font-xs);                   /* 12px */\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  min-height: 20px;\n}\n\n:host([size=\"xs\"]) .tag-dismiss {\n  width: var(--ty-spacing-3);\n  height: var(--ty-spacing-3);\n  margin-left: var(--ty-spacing-2);\n}\n\n:host([size=\"sm\"]) .tag-container {\n  padding: 0 var(--ty-spacing-2);                 /* 0 8px */\n  font-size: var(--ty-font-xs);                   /* 12px */\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  min-height: 24px;\n}\n\n:host([size=\"sm\"]) .tag-dismiss {\n  width: var(--ty-spacing-3);\n  height: var(--ty-spacing-3);\n  margin-left: var(--ty-spacing-2);\n}\n\n/* MD is now the default - no need for explicit [size=\"md\"] selector */\n/* All default styles above apply to MD size (min-height: 24px) */\n\n:host([size=\"lg\"]) .tag-container {\n  padding: 0 var(--ty-spacing-3);                 /* 0 12px */\n  font-size: var(--ty-font-sm);                   /* 14px */\n  line-height: var(--ty-leading-sm);              /* 21px */\n  letter-spacing: var(--ty-tracking-sm);          /* -0.013em */\n  min-height: 32px;\n}\n\n:host([size=\"lg\"]) .tag-dismiss {\n  width: var(--ty-spacing-5);\n  height: var(--ty-spacing-5);\n  margin-left: var(--ty-spacing-4);\n}\n\n:host([size=\"xl\"]) .tag-container {\n  padding: 0 0.875rem;                            /* 0 14px */\n  font-size: var(--ty-font-sm);                   /* 14px */\n  line-height: var(--ty-leading-sm);              /* 21px */\n  letter-spacing: var(--ty-tracking-sm);          /* -0.013em */\n  min-height: 36px;\n}\n\n:host([size=\"xl\"]) .tag-dismiss {\n  width: var(--ty-spacing-5);\n  height: var(--ty-spacing-5);\n  margin-left: var(--ty-spacing-4);\n}\n\n/* ===== FLAVOR VARIANTS =====\n   Each flavor sets --tag-bg / --tag-color / --tag-border-color on :host.\n   Append '+' to flavor for a stronger shade (mild background, strong color),\n   or '-' for a softer shade (soft background, base color). */\n\n/* ----- PRIMARY ----- */\n:host([flavor=\"primary\"]) {\n  --tag-bg: var(--ty-bg-primary);\n  --tag-color: var(--ty-color-primary);\n  --tag-border-color: var(--ty-border-primary);\n}\n:host([flavor=\"primary+\"]) {\n  --tag-bg: var(--ty-bg-primary-bold);\n  --tag-color: var(--ty-color-primary-strong);\n  --tag-border-color: var(--ty-color-primary);\n}\n:host([flavor=\"primary-\"]) {\n  --tag-bg: var(--ty-bg-primary-soft);\n  --tag-color: var(--ty-color-primary);\n  --tag-border-color: var(--ty-border-primary);\n}\n:host([flavor=\"primary\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"primary+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"primary-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-primary-bold);\n}\n:host([flavor=\"primary\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"primary+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"primary-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-primary-faint);\n}\n\n/* ----- SECONDARY ----- */\n:host([flavor=\"secondary\"]) {\n  --tag-bg: var(--ty-bg-secondary);\n  --tag-color: var(--ty-color-secondary);\n  --tag-border-color: var(--ty-border-secondary);\n}\n:host([flavor=\"secondary+\"]) {\n  --tag-bg: var(--ty-bg-secondary-bold);\n  --tag-color: var(--ty-color-secondary-strong);\n  --tag-border-color: var(--ty-color-secondary);\n}\n:host([flavor=\"secondary-\"]) {\n  --tag-bg: var(--ty-bg-secondary-soft);\n  --tag-color: var(--ty-color-secondary);\n  --tag-border-color: var(--ty-border-secondary);\n}\n:host([flavor=\"secondary\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"secondary+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"secondary-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-secondary-bold);\n}\n:host([flavor=\"secondary\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"secondary+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"secondary-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-secondary-faint);\n}\n\n/* ----- SUCCESS ----- */\n:host([flavor=\"success\"]) {\n  --tag-bg: var(--ty-bg-success);\n  --tag-color: var(--ty-color-success);\n  --tag-border-color: var(--ty-border-success);\n}\n:host([flavor=\"success+\"]) {\n  --tag-bg: var(--ty-bg-success-bold);\n  --tag-color: var(--ty-color-success-strong);\n  --tag-border-color: var(--ty-color-success);\n}\n:host([flavor=\"success-\"]) {\n  --tag-bg: var(--ty-bg-success-soft);\n  --tag-color: var(--ty-color-success);\n  --tag-border-color: var(--ty-border-success);\n}\n:host([flavor=\"success\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"success+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"success-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-success-bold);\n}\n:host([flavor=\"success\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"success+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"success-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-success-faint);\n}\n\n/* ----- DANGER ----- */\n:host([flavor=\"danger\"]) {\n  --tag-bg: var(--ty-bg-danger);\n  --tag-color: var(--ty-color-danger);\n  --tag-border-color: var(--ty-border-danger);\n}\n:host([flavor=\"danger+\"]) {\n  --tag-bg: var(--ty-bg-danger-bold);\n  --tag-color: var(--ty-color-danger-strong);\n  --tag-border-color: var(--ty-color-danger);\n}\n:host([flavor=\"danger-\"]) {\n  --tag-bg: var(--ty-bg-danger-soft);\n  --tag-color: var(--ty-color-danger);\n  --tag-border-color: var(--ty-border-danger);\n}\n:host([flavor=\"danger\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"danger+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"danger-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-danger-bold);\n}\n:host([flavor=\"danger\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"danger+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"danger-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-danger-faint);\n}\n\n/* ----- WARNING ----- */\n:host([flavor=\"warning\"]) {\n  --tag-bg: var(--ty-bg-warning);\n  --tag-color: var(--ty-color-warning);\n  --tag-border-color: var(--ty-border-warning);\n}\n:host([flavor=\"warning+\"]) {\n  --tag-bg: var(--ty-bg-warning-bold);\n  --tag-color: var(--ty-color-warning-strong);\n  --tag-border-color: var(--ty-color-warning);\n}\n:host([flavor=\"warning-\"]) {\n  --tag-bg: var(--ty-bg-warning-soft);\n  --tag-color: var(--ty-color-warning);\n  --tag-border-color: var(--ty-border-warning);\n}\n:host([flavor=\"warning\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"warning+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"warning-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-warning-bold);\n}\n:host([flavor=\"warning\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"warning+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"warning-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-warning-faint);\n}\n\n:host([flavor=\"info\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-info-faint);\n}\n\n/* ----- NEUTRAL ----- */\n:host([flavor=\"neutral\"]) {\n  --tag-color: var(--ty-text-bold);\n  --tag-bg: var(--ty-bg-neutral-soft);\n  --tag-border-color: var(--ty-border-bold);\n}\n\n:host([flavor=\"neutral+\"]) {\n  --tag-bg: var(--ty-bg-neutral-bold);\n  --tag-color: var(--ty-text-bold);\n  --tag-border-color: var(--ty-border-strong);\n}\n:host([flavor=\"neutral-\"]) {\n  --tag-bg: var(--ty-bg-neutral-soft);\n  --tag-color: var(--ty-text-soft);\n  --tag-border-color: var(--ty-border);\n}\n:host([flavor=\"neutral\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"neutral+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"neutral-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n:host([flavor=\"neutral\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"neutral+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"neutral-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-border-soft);\n}\n\n/* Slotted content styling */\n.tag-start ::slotted(*),\n.tag-content ::slotted(*),\n.tag-end ::slotted(*) {\n  display: flex;\n  align-items: center;\n}\n\n/* Icon sizing for slotted icons */\n.tag-start ::slotted(ty-icon),\n.tag-end ::slotted(ty-icon) {\n  width: 1em;\n  height: 1em;\n  flex-shrink: 0;\n}\n\n/* Count/badge styling using centralized spacing */\n.tag-end ::slotted(.count) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--ty-spacing-6);\n  /* 24px */\n  height: var(--ty-spacing-5);\n  /* 20px */\n  padding: 0 var(--ty-spacing-2);\n  /* 0 8px */\n  background: rgba(0, 0, 0, 0.1);\n  border-radius: var(--ty-radius-full);\n  font-size: var(--ty-font-xs);\n  font-weight: var(--ty-font-semibold);\n  line-height: var(--ty-line-height-none);\n  flex-shrink: 0;\n}\n\n/* Special handling for long text content */\n.tag-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:host([data-type=\"user\"]) .tag-container {\n  min-width: var(--ty-spacing-20);\n  /* 80px for user tags */\n}\n\n/* Dark mode is handled automatically by the centralized variables */\n";
+export declare const tagStyles: string;
 //# sourceMappingURL=tag.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,SAAS,iqYAmZrB,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAqCH,eAAO,MAAM,SAAS,QA2QrB,CAAC"}

package/lib/styles/tag.js

@@ -2,6 +2,38 @@
  * Tag Component Styles
  * PORTED FROM: clj/ty/components/tag.css
  */
+import { FLAVORS } from '../types/common.js';
+/* Neutral maps to text/border tokens instead of flavor tokens, so it is
+   written out by hand in the template below. */
+const COLOR_FLAVORS = FLAVORS.filter((f) => f !== 'neutral');
+const tagFlavor = (f) => `
+/* ----- ${f.toUpperCase()} ----- */
+:host([flavor="${f}"]) {
+  --tag-bg: var(--ty-bg-${f});
+  --tag-color: var(--ty-color-${f});
+  --tag-border-color: var(--ty-border-${f});
+}
+:host([flavor="${f}+"]) {
+  --tag-bg: var(--ty-bg-${f}-bold);
+  --tag-color: var(--ty-color-${f}-strong);
+  --tag-border-color: var(--ty-color-${f});
+}
+:host([flavor="${f}-"]) {
+  --tag-bg: var(--ty-bg-${f}-soft);
+  --tag-color: var(--ty-color-${f});
+  --tag-border-color: var(--ty-border-${f});
+}
+:host([flavor="${f}"]) .tag-container[tabindex]:hover,
+:host([flavor="${f}+"]) .tag-container[tabindex]:hover,
+:host([flavor="${f}-"]) .tag-container[tabindex]:hover {
+  background: var(--ty-bg-${f}-bold);
+}
+:host([flavor="${f}"]) .tag-container[tabindex]:focus,
+:host([flavor="${f}+"]) .tag-container[tabindex]:focus,
+:host([flavor="${f}-"]) .tag-container[tabindex]:focus {
+  box-shadow: 0 0 0 3px var(--ty-color-${f}-faint);
+}
+`;
 export const tagStyles = `
 /* Tag Component Styles using centralized ty.variables.css */
 
@@ -189,147 +221,11 @@ export const tagStyles = `
 /* ===== FLAVOR VARIANTS =====
    Each flavor sets --tag-bg / --tag-color / --tag-border-color on :host.
    Append '+' to flavor for a stronger shade (mild background, strong color),
-   or '-' for a softer shade (soft background, base color). */
-
-/* ----- PRIMARY ----- */
-:host([flavor="primary"]) {
-  --tag-bg: var(--ty-bg-primary);
-  --tag-color: var(--ty-color-primary);
-  --tag-border-color: var(--ty-border-primary);
-}
-:host([flavor="primary+"]) {
-  --tag-bg: var(--ty-bg-primary-bold);
-  --tag-color: var(--ty-color-primary-strong);
-  --tag-border-color: var(--ty-color-primary);
-}
-:host([flavor="primary-"]) {
-  --tag-bg: var(--ty-bg-primary-soft);
-  --tag-color: var(--ty-color-primary);
-  --tag-border-color: var(--ty-border-primary);
-}
-:host([flavor="primary"]) .tag-container[tabindex]:hover,
-:host([flavor="primary+"]) .tag-container[tabindex]:hover,
-:host([flavor="primary-"]) .tag-container[tabindex]:hover {
-  background: var(--ty-bg-primary-bold);
-}
-:host([flavor="primary"]) .tag-container[tabindex]:focus,
-:host([flavor="primary+"]) .tag-container[tabindex]:focus,
-:host([flavor="primary-"]) .tag-container[tabindex]:focus {
-  box-shadow: 0 0 0 3px var(--ty-color-primary-faint);
-}
-
-/* ----- SECONDARY ----- */
-:host([flavor="secondary"]) {
-  --tag-bg: var(--ty-bg-secondary);
-  --tag-color: var(--ty-color-secondary);
-  --tag-border-color: var(--ty-border-secondary);
-}
-:host([flavor="secondary+"]) {
-  --tag-bg: var(--ty-bg-secondary-bold);
-  --tag-color: var(--ty-color-secondary-strong);
-  --tag-border-color: var(--ty-color-secondary);
-}
-:host([flavor="secondary-"]) {
-  --tag-bg: var(--ty-bg-secondary-soft);
-  --tag-color: var(--ty-color-secondary);
-  --tag-border-color: var(--ty-border-secondary);
-}
-:host([flavor="secondary"]) .tag-container[tabindex]:hover,
-:host([flavor="secondary+"]) .tag-container[tabindex]:hover,
-:host([flavor="secondary-"]) .tag-container[tabindex]:hover {
-  background: var(--ty-bg-secondary-bold);
-}
-:host([flavor="secondary"]) .tag-container[tabindex]:focus,
-:host([flavor="secondary+"]) .tag-container[tabindex]:focus,
-:host([flavor="secondary-"]) .tag-container[tabindex]:focus {
-  box-shadow: 0 0 0 3px var(--ty-color-secondary-faint);
-}
-
-/* ----- SUCCESS ----- */
-:host([flavor="success"]) {
-  --tag-bg: var(--ty-bg-success);
-  --tag-color: var(--ty-color-success);
-  --tag-border-color: var(--ty-border-success);
-}
-:host([flavor="success+"]) {
-  --tag-bg: var(--ty-bg-success-bold);
-  --tag-color: var(--ty-color-success-strong);
-  --tag-border-color: var(--ty-color-success);
-}
-:host([flavor="success-"]) {
-  --tag-bg: var(--ty-bg-success-soft);
-  --tag-color: var(--ty-color-success);
-  --tag-border-color: var(--ty-border-success);
-}
-:host([flavor="success"]) .tag-container[tabindex]:hover,
-:host([flavor="success+"]) .tag-container[tabindex]:hover,
-:host([flavor="success-"]) .tag-container[tabindex]:hover {
-  background: var(--ty-bg-success-bold);
-}
-:host([flavor="success"]) .tag-container[tabindex]:focus,
-:host([flavor="success+"]) .tag-container[tabindex]:focus,
-:host([flavor="success-"]) .tag-container[tabindex]:focus {
-  box-shadow: 0 0 0 3px var(--ty-color-success-faint);
-}
-
-/* ----- DANGER ----- */
-:host([flavor="danger"]) {
-  --tag-bg: var(--ty-bg-danger);
-  --tag-color: var(--ty-color-danger);
-  --tag-border-color: var(--ty-border-danger);
-}
-:host([flavor="danger+"]) {
-  --tag-bg: var(--ty-bg-danger-bold);
-  --tag-color: var(--ty-color-danger-strong);
-  --tag-border-color: var(--ty-color-danger);
-}
-:host([flavor="danger-"]) {
-  --tag-bg: var(--ty-bg-danger-soft);
-  --tag-color: var(--ty-color-danger);
-  --tag-border-color: var(--ty-border-danger);
-}
-:host([flavor="danger"]) .tag-container[tabindex]:hover,
-:host([flavor="danger+"]) .tag-container[tabindex]:hover,
-:host([flavor="danger-"]) .tag-container[tabindex]:hover {
-  background: var(--ty-bg-danger-bold);
-}
-:host([flavor="danger"]) .tag-container[tabindex]:focus,
-:host([flavor="danger+"]) .tag-container[tabindex]:focus,
-:host([flavor="danger-"]) .tag-container[tabindex]:focus {
-  box-shadow: 0 0 0 3px var(--ty-color-danger-faint);
-}
-
-/* ----- WARNING ----- */
-:host([flavor="warning"]) {
-  --tag-bg: var(--ty-bg-warning);
-  --tag-color: var(--ty-color-warning);
-  --tag-border-color: var(--ty-border-warning);
-}
-:host([flavor="warning+"]) {
-  --tag-bg: var(--ty-bg-warning-bold);
-  --tag-color: var(--ty-color-warning-strong);
-  --tag-border-color: var(--ty-color-warning);
-}
-:host([flavor="warning-"]) {
-  --tag-bg: var(--ty-bg-warning-soft);
-  --tag-color: var(--ty-color-warning);
-  --tag-border-color: var(--ty-border-warning);
-}
-:host([flavor="warning"]) .tag-container[tabindex]:hover,
-:host([flavor="warning+"]) .tag-container[tabindex]:hover,
-:host([flavor="warning-"]) .tag-container[tabindex]:hover {
-  background: var(--ty-bg-warning-bold);
-}
-:host([flavor="warning"]) .tag-container[tabindex]:focus,
-:host([flavor="warning+"]) .tag-container[tabindex]:focus,
-:host([flavor="warning-"]) .tag-container[tabindex]:focus {
-  box-shadow: 0 0 0 3px var(--ty-color-warning-faint);
-}
-
-:host([flavor="info"]) .tag-container[tabindex]:focus {
-  box-shadow: 0 0 0 3px var(--ty-color-info-faint);
-}
+   or '-' for a softer shade (soft background, base color).
+   Generated per flavor above; neutral diverges (text/border tokens) and
+   stays hand-written below. */
 
+${COLOR_FLAVORS.map(tagFlavor).join('')}
 /* ----- NEUTRAL ----- */
 :host([flavor="neutral"]) {
   --tag-color: var(--ty-text-bold);

package/lib/styles/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmZxB,CAAC"}
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAE5C;gDACgD;AAChD,MAAM,aAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAC,CAAA;AAE5D,MAAM,SAAS,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC;WACtB,CAAC,CAAC,WAAW,EAAE;iBACT,CAAC;0BACQ,CAAC;gCACK,CAAC;wCACO,CAAC;;iBAExB,CAAC;0BACQ,CAAC;gCACK,CAAC;uCACM,CAAC;;iBAEvB,CAAC;0BACQ,CAAC;gCACK,CAAC;wCACO,CAAC;;iBAExB,CAAC;iBACD,CAAC;iBACD,CAAC;4BACU,CAAC;;iBAEZ,CAAC;iBACD,CAAC;iBACD,CAAC;yCACuB,CAAC;;CAEzC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+LvB,aAAa,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EtC,CAAC"}

package/lib/types/common.d.ts

@@ -6,7 +6,8 @@
  * for a softer shade — e.g. `primary`, `primary+`, `primary-`. Matches the
  * design system's `ty-bg-primary+` / `ty-text-primary-` class convention.
  */
-export type FlavorBase = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'neutral';
+export declare const FLAVORS: readonly ["primary", "secondary", "success", "danger", "warning", "neutral"];
+export type FlavorBase = (typeof FLAVORS)[number];
 /**
  * A flavor with optional shade suffix: `primary | primary+ | primary-`.
  */

package/lib/types/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,CAAA;AAEb;;GAEG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,UAAU,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAA;AAE/E;;;;;;;;GAQG;AACH,MAAM,MAAM,MAAM,GAAG,YAAY,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;AAEjD,8BAA8B;AAC9B,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnD,wCAAwC;AACxC,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,UAAU,GACV,OAAO,GACP,KAAK,GACL,KAAK,GACL,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,QAAQ,GACR,UAAU,GACV,SAAS,GACT,SAAS,GACT,UAAU,CAAA;AAEd,kDAAkD;AAClD,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,gCAAgC;AAChC,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAA;AAE7D,iCAAiC;AACjC,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,kBAAkB;IAClB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,4FAA4F;IAC5F,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gCAAgC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iBAAiB;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;CACrC;AAED,wBAAwB;AACxB,yBAAyB;AACzB,MAAM,MAAM,QAAQ,GAChB,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GACxC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE9E,2BAA2B;AAC3B,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAEvC,+BAA+B;AAC/B,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gBAAgB;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,qBAAqB;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sBAAsB;IACtB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,wCAAwC;AACxC,MAAM,WAAW,gBAAgB;IAC/B,yBAAyB;IACzB,MAAM,EAAE,WAAW,CAAA;CACpB;AAED,8BAA8B;AAC9B,MAAM,WAAW,YAAa,SAAQ,aAAa;IACjD,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,eAAe;IACf,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gDAAgD;IAChD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,oFAAoF;AACpF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC;IAClE,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,gCAAgC;AAChC,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iBAAiB;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,sBAAsB;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;IAGtC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAG3B,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC3B;AAED,wBAAwB;AACxB,MAAM,WAAW,YAAY;IAC3B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAA;IACX,oCAAoC;IACpC,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"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"}

package/lib/types/common.js

@@ -1,5 +1,17 @@
 /**
  * Ty Component Common Types
  */
-export {};
+/**
+ * Built-in semantic color flavor names. Append `+` for a stronger shade or `-`
+ * for a softer shade — e.g. `primary`, `primary+`, `primary-`. Matches the
+ * design system's `ty-bg-primary+` / `ty-text-primary-` class convention.
+ */
+export const FLAVORS = [
+    'primary',
+    'secondary',
+    'success',
+    'danger',
+    'warning',
+    'neutral',
+];
 //# sourceMappingURL=common.js.map

package/lib/types/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA;;GAEG"}
+{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,SAAS;IACT,WAAW;IACX,SAAS;IACT,QAAQ;IACR,SAAS;IACT,SAAS;CACD,CAAA"}