tyrell-components 1.0.0-TC8 → 1.0.0-TC9

package/lib/styles/calendar-month.js

@@ -3,6 +3,50 @@
  * Improved design with better visual hierarchy and size variants
  */
 export const calendarMonthStyles = `
+/* ============================================================================
+   Theming Tokens
+   Override these to retheme the calendar without touching the global palette.
+   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-mild);
+
+  /* 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-mild);
+  --ty-calendar-selected-hover-border: var(--ty-color-primary-mild);
+
+  /* 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;
+}
+
 /* ============================================================================
    Base Calendar Container
    ============================================================================ */
@@ -33,7 +77,7 @@ export const calendarMonthStyles = `
 
 .calendar-header-row {
   flex: 0 0 auto;
-  color: var(--ty-color-neutral-strong);
+  color: var(--ty-calendar-header-color);
 }
 
 .calendar-day-row {
@@ -75,32 +119,33 @@ export const calendarMonthStyles = `
 .calendar-day-cell {
   /* Square cells */
   aspect-ratio: 1;
-  
+
   /* Layout */
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  
+
   /* Spacing */
   margin: 0.125rem;
-  
+
   /* Visual */
-  border-radius: 0.375rem;
-  border: 1px solid var(--ty-border);
-  color: var(--ty-color-neutral);
+  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);
   cursor: pointer;
   transition: all 0.15s ease;
-  
+
   /* Typography */
   font-weight: 400;
 }
 
 /* Hover State - Stronger Feedback */
 .calendar-day-cell:hover {
-  color: var(--ty-color-neutral-strong);
-  background-color: var(--ty-bg-neutral-soft);
-  border-color: var(--ty-border-mild);
+  color: var(--ty-calendar-day-hover-color);
+  background-color: var(--ty-calendar-day-hover-bg);
+  border-color: var(--ty-calendar-day-hover-border);
 }
 
 /* ============================================================================
@@ -109,39 +154,40 @@ export const calendarMonthStyles = `
 
 /* Today - Strong Visual Indicator */
 .calendar-day-cell.today {
-  background-color: var(--ty-bg-secondary-soft);
-  color: var(--ty-color-secondary-strong);
-  border-color: var(--ty-color-secondary);
+  background-color: var(--ty-calendar-today-bg);
+  color: var(--ty-calendar-today-color);
+  border-color: var(--ty-calendar-today-border);
   font-weight: 600;
 }
 
 /* Weekend - Subtle Color Shift */
 .calendar-day-cell.weekend {
-  color: var(--ty-color-danger-soft);
+  color: var(--ty-calendar-weekend-color);
 }
 
 /* Other Month - Muted */
 .calendar-day-cell.other-month {
-  color: var(--ty-color-neutral-faint);
-  opacity: 0.5;
+  color: var(--ty-calendar-other-month-color);
+  opacity: var(--ty-calendar-other-month-opacity);
 }
 
-.calendar-day-cell.other-month:hover {
-  background-color: var(--ty-bg-neutral-soft);
+.calendar-day-cell.other-month:hover { 
+  color: var(--ty-calendar-day-hover-color);
+  background-color: var(--ty-calendar-day-hover-bg);
   opacity: 0.7;
 }
 
 /* Selected State (for custom usage) */
 .calendar-day-cell.selected {
-  background-color: var(--ty-bg-primary) !important;
-  color: var(--ty-color-primary-strong) !important;
-  border-color: var(--ty-color-primary) !important;
+  background-color: var(--ty-calendar-selected-bg);
+  color: var(--ty-calendar-selected-color);
+  border-color: var(--ty-calendar-selected-border);
   font-weight: 600;
 }
 
 .calendar-day-cell.selected:hover {
-  background-color: var(--ty-bg-primary-mild) !important;
-  border-color: var(--ty-color-primary-mild) !important;
+  background-color: var(--ty-calendar-selected-hover-bg);
+  border-color: var(--ty-calendar-selected-hover-border);
 }
 
 .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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+NlC,CAAC"}
+{"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"}

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: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-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-bg-neutral-soft);\n  color: var(--ty-color-neutral-strong);\n}\n\n.nav-btn:active {\n  background-color: var(--ty-bg-neutral);\n  transform: scale(0.95);\n}\n\n.nav-btn:focus-visible {\n  outline: 2px solid 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-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: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";
 //# 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,i/FAuHpC,CAAC"}
+{"version":3,"file":"calendar-navigation.d.ts","sourceRoot":"","sources":["../../src/styles/calendar-navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,wBAAwB,s2HAyIpC,CAAC"}

package/lib/styles/calendar-navigation.js

@@ -14,6 +14,24 @@ export const calendarNavigationStyles = `
   --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"]) {
@@ -81,24 +99,24 @@ export const calendarNavigationStyles = `
   border: none;
   border-radius: 0.375rem;
   background-color: transparent;
-  color: var(--ty-color-neutral);
+  color: var(--ty-calendar-nav-color);
   cursor: pointer;
   transition: all 0.15s ease;
   outline: none;
 }
 
 .nav-btn:hover {
-  background-color: var(--ty-bg-neutral-soft);
-  color: var(--ty-color-neutral-strong);
+  background-color: var(--ty-calendar-nav-hover-bg);
+  color: var(--ty-calendar-nav-hover-color);
 }
 
 .nav-btn:active {
-  background-color: var(--ty-bg-neutral);
+  background-color: var(--ty-calendar-nav-active-bg);
   transform: scale(0.95);
 }
 
 .nav-btn:focus-visible {
-  outline: 2px solid var(--ty-color-primary);
+  outline: 2px solid var(--ty-calendar-nav-focus-outline);
   outline-offset: 2px;
 }
 
@@ -116,7 +134,7 @@ export const calendarNavigationStyles = `
 .month-year-display {
   font-size: var(--nav-font-size);
   font-weight: 600;
-  color: var(--ty-color-neutral-strong);
+  color: var(--ty-calendar-nav-title-color);
   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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuHvC,CAAC"}
+{"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"}

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/* 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.dropdown-label {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  line-height: 1.25;\n  padding-left: 12px;\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-input-bg);\n  color: var(--ty-input-color);\n  border: 1px solid var(--ty-input-border);\n  border-radius: var(--ty-radius-md);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  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-input-border-hover);\n}\n\n.date-picker-stub[disabled] {\n  background-color: var(--ty-input-disabled-bg);\n  color: var(--ty-input-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-input-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-input-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-mild);\n}\n\n.date-picker-stub.primary:focus,\n.date-picker-stub.primary.open {\n  border-color: var(--ty-color-primary-mild);\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\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-mild);\n}\n\n.date-picker-stub.secondary:focus,\n.date-picker-stub.secondary.open {\n  border-color: var(--ty-color-secondary-mild);\n  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\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-mild);\n}\n\n.date-picker-stub.success:focus,\n.date-picker-stub.success.open {\n  border-color: var(--ty-color-success-mild);\n  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\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-mild);\n}\n\n.date-picker-stub.danger:focus,\n.date-picker-stub.danger.open {\n  border-color: var(--ty-color-danger-mild);\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\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-mild);\n}\n\n.date-picker-stub.warning:focus,\n.date-picker-stub.warning.open {\n  border-color: var(--ty-color-warning-mild);\n  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\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-input-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-input-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-surface-floating);\n  border: 1px solid var(--ty-color-neutral-soft);\n  border-radius: var(--ty-radius-lg);\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);\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-color-neutral-faint);\n  background-color: var(--ty-bg-neutral-faint);\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-color-neutral);\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-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-input-placeholder);\n}\n\n.time-icon {\n  display: flex;\n  align-items: center;\n  color: var(--ty-color-neutral-soft);\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: 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.dropdown-label {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  line-height: 1.25;\n  padding-left: 12px;\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-mild);\n}\n\n.date-picker-stub.primary:focus,\n.date-picker-stub.primary.open {\n  border-color: var(--ty-color-primary-mild);\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\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-mild);\n}\n\n.date-picker-stub.secondary:focus,\n.date-picker-stub.secondary.open {\n  border-color: var(--ty-color-secondary-mild);\n  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\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-mild);\n}\n\n.date-picker-stub.success:focus,\n.date-picker-stub.success.open {\n  border-color: var(--ty-color-success-mild);\n  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\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-mild);\n}\n\n.date-picker-stub.danger:focus,\n.date-picker-stub.danger.open {\n  border-color: var(--ty-color-danger-mild);\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\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-mild);\n}\n\n.date-picker-stub.warning:focus,\n.date-picker-stub.warning.open {\n  border-color: var(--ty-color-warning-mild);\n  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\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";
 //# 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,wqSA0Y5B,CAAC"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../src/styles/date-picker.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,gBAAgB,kwWA6a5B,CAAC"}

package/lib/styles/date-picker.js

@@ -8,6 +8,41 @@ export const datePickerStyles = `
   display: block;
   width: auto;
   min-width: 200px;
+
+  /* ==========================================================================
+     Theming Tokens — Date Picker Stub
+     Thin shim over --ty-input-*. Override these to retheme just the date-picker
+     trigger without affecting other inputs.
+     ========================================================================== */
+  --ty-date-picker-bg: var(--ty-input-bg);
+  --ty-date-picker-color: var(--ty-input-color);
+  --ty-date-picker-placeholder: var(--ty-input-placeholder);
+  --ty-date-picker-border: var(--ty-input-border);
+  --ty-date-picker-border-hover: var(--ty-input-border-hover);
+  --ty-date-picker-border-focus: var(--ty-input-border-focus);
+  --ty-date-picker-shadow-focus: var(--ty-input-shadow-focus);
+  --ty-date-picker-disabled-bg: var(--ty-input-disabled-bg);
+  --ty-date-picker-disabled-color: var(--ty-input-disabled-color);
+  --ty-date-picker-radius: var(--ty-radius-md);
+
+  /* ==========================================================================
+     Theming Tokens — Calendar Popup Surface
+     Shared with ty-calendar / ty-calendar-month theming.
+     ========================================================================== */
+  --ty-calendar-surface-bg: var(--ty-surface-floating);
+  --ty-calendar-surface-border: var(--ty-input-border);
+  --ty-calendar-surface-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);
+  --ty-calendar-surface-radius: var(--ty-radius-lg);
+
+  /* ==========================================================================
+     Theming Tokens — Time Section
+     ========================================================================== */
+  --ty-calendar-time-bg: var(--ty-bg-neutral-faint);
+  --ty-calendar-time-border: var(--ty-input-border);
+  --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);
+  --ty-calendar-time-icon-color: var(--ty-color-neutral-soft);
 }
 
 /* Container structure (reuses dropdown patterns) */
@@ -66,10 +101,10 @@ export const datePickerStyles = `
   position: relative;
   display: flex;
   align-items: center;
-  background: var(--ty-input-bg);
-  color: var(--ty-input-color);
-  border: 1px solid var(--ty-input-border);
-  border-radius: var(--ty-radius-md);
+  background: var(--ty-date-picker-bg);
+  color: var(--ty-date-picker-color);
+  border: 1px solid var(--ty-date-picker-border);
+  border-radius: var(--ty-date-picker-radius);
   font-family: var(--ty-font-sans);
   font-size: var(--ty-font-sm);
   font-weight: var(--ty-font-normal);
@@ -82,20 +117,20 @@ export const datePickerStyles = `
 }
 
 .date-picker-stub:hover:not([disabled]):not(.open) {
-  border-color: var(--ty-input-border-hover);
+  border-color: var(--ty-date-picker-border-hover);
 }
 
 .date-picker-stub[disabled] {
-  background-color: var(--ty-input-disabled-bg);
-  color: var(--ty-input-disabled-color);
+  background-color: var(--ty-date-picker-disabled-bg);
+  color: var(--ty-date-picker-disabled-color);
   cursor: not-allowed;
   opacity: 0.6;
 }
 
 .date-picker-stub:focus,
 .date-picker-stub.open {
-  border-color: var(--ty-input-border-focus);
-  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);
+  border-color: var(--ty-date-picker-border-focus);
+  box-shadow: 0 0 0 3px var(--ty-date-picker-shadow-focus);
 }
 
 /* Size variants */
@@ -215,7 +250,7 @@ export const datePickerStyles = `
 }
 
 .stub-text.placeholder {
-  color: var(--ty-input-placeholder);
+  color: var(--ty-date-picker-placeholder);
 }
 
 /* Icons */
@@ -268,7 +303,7 @@ export const datePickerStyles = `
 
 .date-picker-stub:focus .stub-arrow,
 .date-picker-stub.open .stub-arrow {
-  color: var(--ty-input-border-focus);
+  color: var(--ty-date-picker-border-focus);
 }
 
 /* Calendar dialog (showModal positioning system) */
@@ -315,10 +350,10 @@ export const datePickerStyles = `
 
 /* Calendar content container */
 .calendar-content {
-  background-color: var(--ty-surface-floating);
-  border: 1px solid var(--ty-color-neutral-soft);
-  border-radius: var(--ty-radius-lg);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);
+  background-color: var(--ty-calendar-surface-bg);
+  border: 1px solid var(--ty-calendar-surface-border);
+  border-radius: var(--ty-calendar-surface-radius);
+  box-shadow: var(--ty-calendar-surface-shadow);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -358,8 +393,8 @@ export const datePickerStyles = `
   justify-content: center;
   gap: 0.5rem;
   padding: 0.5rem 1rem;
-  border-top: 1px solid var(--ty-color-neutral-faint);
-  background-color: var(--ty-bg-neutral-faint);
+  border-top: 1px solid var(--ty-calendar-time-border);
+  background-color: var(--ty-calendar-time-bg);
   width: 100%;
   box-sizing: border-box;
   position: relative;
@@ -368,7 +403,7 @@ export const datePickerStyles = `
 .time-label {
   font-size: var(--ty-font-sm);
   font-weight: 500;
-  color: var(--ty-color-neutral);
+  color: var(--ty-calendar-time-label-color);
   flex-shrink: 0;
 }
 
@@ -377,7 +412,7 @@ export const datePickerStyles = `
   border: none;
   border-radius: var(--ty-radius-sm);
   background: transparent;
-  color: var(--ty-input-color);
+  color: var(--ty-calendar-time-input-color);
   font-family: var(--ty-font-sans);
   font-size: var(--ty-font-sm);
   text-align: center;
@@ -385,13 +420,13 @@ export const datePickerStyles = `
 }
 
 .time-input::placeholder {
-  color: var(--ty-input-placeholder);
+  color: var(--ty-calendar-time-placeholder-color);
 }
 
 .time-icon {
   display: flex;
   align-items: center;
-  color: var(--ty-color-neutral-soft);
+  color: var(--ty-calendar-time-icon-color);
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Y/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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6a/B,CAAC"}