tyrell-components 1.0.0-TC23 → 1.0.0-TC25

package/lib/styles/button.js

@@ -3,7 +3,10 @@
  *
  * Three appearance variants × six semantic flavors × three tones (+/base/-).
  * Each variant uses ONE token system:
- *   - solid    → --ty-solid-{flavor}-{strong|base|soft}  (bg) + --ty-solid-{flavor}-fg (text)
+ *   - solid    → flat per-segment tokens --ty-solid-{flavor}{,-hover,-active,
+ *               -strong,-soft,-fg}. Derived in tyrell-brand.css via OKLCH on
+ *               3 axes (color / hover-active / theme chroma-hue); literal in
+ *               tyrell.css. The component does no color math.
  *   - outlined → --ty-color-{flavor}-{strong|base|soft}  (text === border)
  *   - ghost    → --ty-color-{flavor}-{strong|base|soft}  (text), --ty-bg-{flavor}-soft (hover)
  *
@@ -218,101 +221,62 @@ button.pill.lg:has(ty-icon:only-child) { min-width: 2.25rem; min-height: 2.25rem
 button.pill.xl:has(ty-icon:only-child) { min-width: 2.5rem; min-height: 2.5rem; }
 
 /* ============================================================
-   SOLID — saturated brand fill (uses --ty-solid-{flavor}-* tokens)
-   Bare .solid rule = fallback for custom flavors (theme via --ty-button-*).
+   SOLID — flat: one variable per segment. No color math here; all the
+   --ty-solid-{flavor}-{hover,active,strong,soft} tokens are DERIVED in
+   tyrell-brand.css (OKLCH) or set literally in tyrell.css. Override any
+   single token to recolor that one segment. Bare .solid = custom-flavor
+   fallback, themable via --ty-button-{bg,bg-hover,color}.
    ============================================================ */
 
 button.solid {
   border: none;
+  --_ring: var(--ty-color-neutral);
   background: var(--ty-button-bg, var(--ty-solid-neutral));
   color:      var(--ty-button-color, var(--ty-solid-neutral-fg));
 }
-button.solid:hover:not(:disabled) {
-  background: var(--ty-button-bg-hover, var(--ty-button-bg, var(--ty-solid-neutral-strong)));
-}
+button.solid.tone-plus  { background: var(--ty-button-bg, var(--ty-solid-neutral-strong)); }
+button.solid.tone-minus { background: var(--ty-button-bg, var(--ty-solid-neutral-soft)); }
+button.solid:hover:not(:disabled)  { background: var(--ty-button-bg-hover, var(--ty-solid-neutral-hover)); }
+button.solid:active:not(:disabled) { background: var(--ty-solid-neutral-active); }
 
-/* Primary */
-button.solid.primary {
-  background: var(--ty-button-bg, var(--ty-solid-primary));
-  color:      var(--ty-button-color, var(--ty-solid-primary-fg));
-}
+button.solid.primary   { --_ring: var(--ty-color-primary);   background: var(--ty-button-bg, var(--ty-solid-primary));   color: var(--ty-button-color, var(--ty-solid-primary-fg)); }
 button.solid.primary.tone-plus  { background: var(--ty-button-bg, var(--ty-solid-primary-strong)); }
 button.solid.primary.tone-minus { background: var(--ty-button-bg, var(--ty-solid-primary-soft)); }
-button.solid.primary:hover:not(:disabled) {
-  background: var(--ty-button-bg-hover, var(--ty-solid-primary-strong));
-}
-button.solid.primary:focus-visible {
-  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-primary);
-}
+button.solid.primary:hover:not(:disabled)  { background: var(--ty-button-bg-hover, var(--ty-solid-primary-hover)); }
+button.solid.primary:active:not(:disabled) { background: var(--ty-solid-primary-active); }
 
-/* Secondary */
-button.solid.secondary {
-  background: var(--ty-button-bg, var(--ty-solid-secondary));
-  color:      var(--ty-button-color, var(--ty-solid-secondary-fg));
-}
+button.solid.secondary { --_ring: var(--ty-color-secondary); background: var(--ty-button-bg, var(--ty-solid-secondary)); color: var(--ty-button-color, var(--ty-solid-secondary-fg)); }
 button.solid.secondary.tone-plus  { background: var(--ty-button-bg, var(--ty-solid-secondary-strong)); }
 button.solid.secondary.tone-minus { background: var(--ty-button-bg, var(--ty-solid-secondary-soft)); }
-button.solid.secondary:hover:not(:disabled) {
-  background: var(--ty-button-bg-hover, var(--ty-solid-secondary-strong));
-}
-button.solid.secondary:focus-visible {
-  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-secondary);
-}
+button.solid.secondary:hover:not(:disabled)  { background: var(--ty-button-bg-hover, var(--ty-solid-secondary-hover)); }
+button.solid.secondary:active:not(:disabled) { background: var(--ty-solid-secondary-active); }
 
-/* Success */
-button.solid.success {
-  background: var(--ty-button-bg, var(--ty-solid-success));
-  color:      var(--ty-button-color, var(--ty-solid-success-fg));
-}
+button.solid.success   { --_ring: var(--ty-color-success);   background: var(--ty-button-bg, var(--ty-solid-success));   color: var(--ty-button-color, var(--ty-solid-success-fg)); }
 button.solid.success.tone-plus  { background: var(--ty-button-bg, var(--ty-solid-success-strong)); }
 button.solid.success.tone-minus { background: var(--ty-button-bg, var(--ty-solid-success-soft)); }
-button.solid.success:hover:not(:disabled) {
-  background: var(--ty-button-bg-hover, var(--ty-solid-success-strong));
-}
-button.solid.success:focus-visible {
-  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-success);
-}
+button.solid.success:hover:not(:disabled)  { background: var(--ty-button-bg-hover, var(--ty-solid-success-hover)); }
+button.solid.success:active:not(:disabled) { background: var(--ty-solid-success-active); }
 
-/* Danger */
-button.solid.danger {
-  background: var(--ty-button-bg, var(--ty-solid-danger));
-  color:      var(--ty-button-color, var(--ty-solid-danger-fg));
-}
+button.solid.danger    { --_ring: var(--ty-color-danger);    background: var(--ty-button-bg, var(--ty-solid-danger));    color: var(--ty-button-color, var(--ty-solid-danger-fg)); }
 button.solid.danger.tone-plus  { background: var(--ty-button-bg, var(--ty-solid-danger-strong)); }
 button.solid.danger.tone-minus { background: var(--ty-button-bg, var(--ty-solid-danger-soft)); }
-button.solid.danger:hover:not(:disabled) {
-  background: var(--ty-button-bg-hover, var(--ty-solid-danger-strong));
-}
-button.solid.danger:focus-visible {
-  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-danger);
-}
+button.solid.danger:hover:not(:disabled)  { background: var(--ty-button-bg-hover, var(--ty-solid-danger-hover)); }
+button.solid.danger:active:not(:disabled) { background: var(--ty-solid-danger-active); }
 
-/* Warning */
-button.solid.warning {
-  background: var(--ty-button-bg, var(--ty-solid-warning));
-  color:      var(--ty-button-color, var(--ty-solid-warning-fg));
-}
+button.solid.warning   { --_ring: var(--ty-color-warning);   background: var(--ty-button-bg, var(--ty-solid-warning));   color: var(--ty-button-color, var(--ty-solid-warning-fg)); }
 button.solid.warning.tone-plus  { background: var(--ty-button-bg, var(--ty-solid-warning-strong)); }
 button.solid.warning.tone-minus { background: var(--ty-button-bg, var(--ty-solid-warning-soft)); }
-button.solid.warning:hover:not(:disabled) {
-  background: var(--ty-button-bg-hover, var(--ty-solid-warning-strong));
-}
-button.solid.warning:focus-visible {
-  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-warning);
-}
+button.solid.warning:hover:not(:disabled)  { background: var(--ty-button-bg-hover, var(--ty-solid-warning-hover)); }
+button.solid.warning:active:not(:disabled) { background: var(--ty-solid-warning-active); }
 
-/* Neutral */
-button.solid.neutral {
-  background: var(--ty-button-bg, var(--ty-solid-neutral));
-  color:      var(--ty-button-color, var(--ty-solid-neutral-fg));
-}
+button.solid.neutral   { --_ring: var(--ty-color-neutral);   background: var(--ty-button-bg, var(--ty-solid-neutral));   color: var(--ty-button-color, var(--ty-solid-neutral-fg)); }
 button.solid.neutral.tone-plus  { background: var(--ty-button-bg, var(--ty-solid-neutral-strong)); }
 button.solid.neutral.tone-minus { background: var(--ty-button-bg, var(--ty-solid-neutral-soft)); }
-button.solid.neutral:hover:not(:disabled) {
-  background: var(--ty-button-bg-hover, var(--ty-solid-neutral-strong));
-}
-button.solid.neutral:focus-visible {
-  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--ty-color-neutral);
+button.solid.neutral:hover:not(:disabled)  { background: var(--ty-button-bg-hover, var(--ty-solid-neutral-hover)); }
+button.solid.neutral:active:not(:disabled) { background: var(--ty-solid-neutral-active); }
+
+button.solid:focus-visible {
+  box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--_ring);
 }
 
 /* ============================================================

package/lib/styles/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/styles/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoe3B,CAAC"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/styles/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6b3B,CAAC"}

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

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

@@ -1 +1 @@
-{"version":3,"file":"calendar-month.d.ts","sourceRoot":"","sources":["../../src/styles/calendar-month.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,mBAAmB,0yOA6Q/B,CAAC"}
+{"version":3,"file":"calendar-month.d.ts","sourceRoot":"","sources":["../../src/styles/calendar-month.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,mBAAmB,o0NA6O/B,CAAC"}

package/lib/styles/calendar-month.js

@@ -9,43 +9,11 @@ export const calendarMonthStyles = `
    Defaults chain back to the global --ty-color-* / --ty-bg-* / --ty-border tokens.
    ============================================================================ */
 
-:host {
-  /* Accent aliases — override these three for thin retheming */
-  --ty-calendar-accent: var(--ty-color-primary);
-  --ty-calendar-today-accent: var(--ty-color-secondary);
-  --ty-calendar-muted: var(--ty-color-neutral);
-
-  /* Header (weekday names) */
-  --ty-calendar-header-color: var(--ty-color-neutral-strong);
-
-  /* Day cell — base */
-  --ty-calendar-day-color: var(--ty-calendar-muted);
-  --ty-calendar-day-bg: transparent;
-  --ty-calendar-day-border: var(--ty-border);
-  --ty-calendar-day-radius: 0.375rem;
-
-  /* Day cell — hover */
-  --ty-calendar-day-hover-color: var(--ty-color-neutral-strong);
-  --ty-calendar-day-hover-bg: var(--ty-bg-neutral-soft);
-  --ty-calendar-day-hover-border: var(--ty-border-bold);
-
-  /* Today */
-  --ty-calendar-today-color: var(--ty-color-secondary-strong);
-  --ty-calendar-today-bg: var(--ty-bg-secondary-soft);
-  --ty-calendar-today-border: var(--ty-calendar-today-accent);
-
-  /* Selected */
-  --ty-calendar-selected-color: var(--ty-color-primary-strong);
-  --ty-calendar-selected-bg: var(--ty-bg-primary);
-  --ty-calendar-selected-border: var(--ty-calendar-accent);
-  --ty-calendar-selected-hover-bg: var(--ty-bg-primary-bold);
-  --ty-calendar-selected-hover-border: var(--ty-color-primary-bold);
-
-  /* Modifier states */
-  --ty-calendar-weekend-color: var(--ty-color-danger-soft);
-  --ty-calendar-other-month-color: var(--ty-color-neutral-faint);
-  --ty-calendar-other-month-opacity: 0.5;
-}
+/* Theming tokens are applied as var(--ty-calendar-*, <default>) at point
+   of use (not declared on :host) so consumers can override any of them
+   from outside the shadow root. The 3 accent aliases — --ty-calendar-accent,
+   --ty-calendar-today-accent, --ty-calendar-muted — still cascade into the
+   derived defaults, so overriding one retints the related cells. */
 
 /* ============================================================================
    Base Calendar Container
@@ -77,7 +45,7 @@ export const calendarMonthStyles = `
 
 .calendar-header-row {
   flex: 0 0 auto;
-  color: var(--ty-calendar-header-color);
+  color: var(--ty-calendar-header-color, var(--ty-color-neutral-strong));
 }
 
 .calendar-day-row {
@@ -130,10 +98,10 @@ export const calendarMonthStyles = `
   margin: 0.125rem;
 
   /* Visual */
-  border-radius: var(--ty-calendar-day-radius);
-  border: 1px solid var(--ty-calendar-day-border);
-  background-color: var(--ty-calendar-day-bg);
-  color: var(--ty-calendar-day-color);
+  border-radius: var(--ty-calendar-day-radius, 0.375rem);
+  border: 1px solid var(--ty-calendar-day-border, var(--ty-border-faint));
+  background-color: var(--ty-calendar-day-bg, transparent);
+  color: var(--ty-calendar-day-color, var(--ty-calendar-muted, var(--ty-color-neutral)));
   cursor: pointer;
   transition: all 0.15s ease;
 
@@ -143,9 +111,9 @@ export const calendarMonthStyles = `
 
 /* Hover State - Stronger Feedback */
 .calendar-day-cell:hover {
-  color: var(--ty-calendar-day-hover-color);
-  background-color: var(--ty-calendar-day-hover-bg);
-  border-color: var(--ty-calendar-day-hover-border);
+  color: var(--ty-calendar-day-hover-color, var(--ty-color-neutral-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));
 }
 
 /* ============================================================================
@@ -154,40 +122,40 @@ export const calendarMonthStyles = `
 
 /* Today - Strong Visual Indicator */
 .calendar-day-cell.today {
-  background-color: var(--ty-calendar-today-bg);
-  color: var(--ty-calendar-today-color);
-  border-color: var(--ty-calendar-today-border);
+  background-color: var(--ty-calendar-today-bg, 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)));
   font-weight: 600;
 }
 
 /* Weekend - Subtle Color Shift */
 .calendar-day-cell.weekend {
-  color: var(--ty-calendar-weekend-color);
+  color: var(--ty-calendar-weekend-color, var(--ty-color-danger-soft));
 }
 
 /* Other Month - Muted */
 .calendar-day-cell.other-month {
-  color: var(--ty-calendar-other-month-color);
-  opacity: var(--ty-calendar-other-month-opacity);
+  color: var(--ty-calendar-other-month-color, var(--ty-color-neutral-faint));
+  opacity: var(--ty-calendar-other-month-opacity, 0.5);
 }
 
 .calendar-day-cell.other-month:hover { 
-  color: var(--ty-calendar-day-hover-color);
-  background-color: var(--ty-calendar-day-hover-bg);
+  color: var(--ty-calendar-day-hover-color, var(--ty-color-neutral-strong));
+  background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));
   opacity: 0.7;
 }
 
 /* Selected State (for custom usage) */
 .calendar-day-cell.selected {
-  background-color: var(--ty-calendar-selected-bg);
-  color: var(--ty-calendar-selected-color);
-  border-color: var(--ty-calendar-selected-border);
+  background-color: var(--ty-calendar-selected-bg, var(--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)));
   font-weight: 600;
 }
 
 .calendar-day-cell.selected:hover {
-  background-color: var(--ty-calendar-selected-hover-bg);
-  border-color: var(--ty-calendar-selected-hover-border);
+  background-color: var(--ty-calendar-selected-hover-bg, var(--ty-bg-primary-bold));
+  border-color: var(--ty-calendar-selected-hover-border, var(--ty-color-primary-bold));
 }
 
 .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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6QlC,CAAC"}
+{"version":3,"file":"calendar-month.js","sourceRoot":"","sources":["../../src/styles/calendar-month.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6OlC,CAAC"}

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

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

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

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

package/lib/styles/calendar-navigation.js

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

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

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

package/lib/styles/scroll-container.d.ts

@@ -2,5 +2,5 @@
  * TyScrollContainer styles
  * Component-specific styles + shared custom scrollbar styles
  */
-export declare const scrollContainerStyles = "\n:host {\n  display: block;\n  position: relative;\n  overflow: hidden;\n}\n\n.scroll-wrapper {\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* Allow horizontal scrolling when enabled */\n:host([overflow-x]) .scroll-wrapper {\n  overflow-x: auto;\n}\n\n:host([max-height]) .scroll-wrapper {\n  max-height: var(--scroll-max-height);\n}\n\n/* ===================================== */\n/* hide-scrollbar: hides native, no custom */\n/* ===================================== */\n\n:host([hide-scrollbar]) .scroll-wrapper {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n:host([hide-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n  display: none;\n}\n\n/* ===================================== */\n/* custom-scrollbar: hides native */\n/* ===================================== */\n\n:host([custom-scrollbar]) .scroll-wrapper {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n:host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n  display: none;\n}\n\n/* Show scrollbar tracks on host hover */\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-y.has-overflow,\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-x.has-overflow {\n  opacity: 1;\n}\n\n/* Corner gap when both axes are present */\n:host([custom-scrollbar][overflow-x]) .ty-scrollbar-track-y {\n  bottom: var(--ty-scrollbar-width, 8px);\n}\n\n:host([custom-scrollbar]) .ty-scrollbar-track-x {\n  right: var(--ty-scrollbar-width, 8px);\n}\n\n/* ===================================== */\n/* Shadow Indicators                     */\n/* ===================================== */\n\n.shadow-overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.shadow-top,\n.shadow-bottom,\n.shadow-left,\n.shadow-right {\n  position: absolute;\n  opacity: 0;\n  transition: var(--ty-scroll-shadow-transition, opacity 0.2s ease-out);\n  pointer-events: none;\n}\n\n.shadow-top {\n  top: -40px;\n  left: 0;\n  right: 0;\n  height: 80px;\n  background: var(--ty-scroll-shadow-top, radial-gradient(\n    ellipse 100% 30% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(50% 0 0 0);\n}\n\n.shadow-bottom {\n  bottom: -30px;\n  left: 0;\n  right: 0;\n  height: 60px;\n  background: var(--ty-scroll-shadow-bottom, radial-gradient(\n    ellipse 100% 20% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 18%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 0 50% 0);\n}\n\n.shadow-left {\n  left: -30px;\n  top: 0;\n  bottom: 0;\n  width: 60px;\n  background: var(--ty-scroll-shadow-left, radial-gradient(\n    ellipse 30% 100% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 0 0 50%);\n}\n\n.shadow-right {\n  right: -30px;\n  top: 0;\n  bottom: 0;\n  width: 60px;\n  background: var(--ty-scroll-shadow-right, radial-gradient(\n    ellipse 30% 100% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 50% 0 0);\n}\n\n.shadow-left,\n.shadow-right {\n  display: none;\n}\n\n:host([overflow-x]) .shadow-left,\n:host([overflow-x]) .shadow-right {\n  display: block;\n}\n\n.shadow-top.visible,\n.shadow-bottom.visible,\n.shadow-left.visible,\n.shadow-right.visible {\n  opacity: 1;\n}\n\n:host([shadow=\"false\"]) .shadow-overlay {\n  display: none;\n}\n\n/* Touch devices - restore native scrollbar */\n@media (pointer: coarse) and (hover: none) {\n  :host([custom-scrollbar]) .scroll-wrapper {\n    scrollbar-width: thin;\n    scrollbar-color: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent)) transparent;\n  }\n  :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n    display: block;\n    width: 4px;\n    height: 4px;\n  }\n  :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar-thumb {\n    background: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent));\n    border-radius: 2px;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .shadow-top,\n  .shadow-bottom,\n  .shadow-left,\n  .shadow-right {\n    transition-duration: 0ms !important;\n  }\n}\n\n/* Shared scrollbar styles */\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
+export declare const scrollContainerStyles = "\n:host {\n  display: block;\n  position: relative;\n  overflow: hidden;\n}\n\n.scroll-wrapper {\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* Allow horizontal scrolling when enabled */\n:host([overflow-x]) .scroll-wrapper {\n  overflow-x: auto;\n}\n\n:host([max-height]) .scroll-wrapper {\n  max-height: var(--scroll-max-height);\n}\n\n/* ===================================== */\n/* hide-scrollbar: hides native, no custom */\n/* ===================================== */\n\n:host([hide-scrollbar]) .scroll-wrapper {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n:host([hide-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n  display: none;\n}\n\n/* scroll-anchoring: we manage scroll position in JS, so turn off the browser's\n   native scroll anchoring to avoid double-compensation. */\n:host([scroll-anchoring]) .scroll-wrapper {\n  overflow-anchor: none;\n}\n\n/* ===================================== */\n/* custom-scrollbar: hides native */\n/* ===================================== */\n\n:host([custom-scrollbar]) .scroll-wrapper {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n:host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n  display: none;\n}\n\n/* Show scrollbar tracks on host hover */\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-y.has-overflow,\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-x.has-overflow {\n  opacity: 1;\n}\n\n/* Corner gap when both axes are present */\n:host([custom-scrollbar][overflow-x]) .ty-scrollbar-track-y {\n  bottom: var(--ty-scrollbar-width, 8px);\n}\n\n:host([custom-scrollbar]) .ty-scrollbar-track-x {\n  right: var(--ty-scrollbar-width, 8px);\n}\n\n/* ===================================== */\n/* Shadow Indicators                     */\n/* ===================================== */\n\n.shadow-overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.shadow-top,\n.shadow-bottom,\n.shadow-left,\n.shadow-right {\n  position: absolute;\n  opacity: 0;\n  transition: var(--ty-scroll-shadow-transition, opacity 0.2s ease-out);\n  pointer-events: none;\n}\n\n.shadow-top {\n  top: -40px;\n  left: 0;\n  right: 0;\n  height: 80px;\n  background: var(--ty-scroll-shadow-top, radial-gradient(\n    ellipse 100% 30% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(50% 0 0 0);\n}\n\n.shadow-bottom {\n  bottom: -30px;\n  left: 0;\n  right: 0;\n  height: 60px;\n  background: var(--ty-scroll-shadow-bottom, radial-gradient(\n    ellipse 100% 20% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 18%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 0 50% 0);\n}\n\n.shadow-left {\n  left: -30px;\n  top: 0;\n  bottom: 0;\n  width: 60px;\n  background: var(--ty-scroll-shadow-left, radial-gradient(\n    ellipse 30% 100% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 0 0 50%);\n}\n\n.shadow-right {\n  right: -30px;\n  top: 0;\n  bottom: 0;\n  width: 60px;\n  background: var(--ty-scroll-shadow-right, radial-gradient(\n    ellipse 30% 100% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 50% 0 0);\n}\n\n.shadow-left,\n.shadow-right {\n  display: none;\n}\n\n:host([overflow-x]) .shadow-left,\n:host([overflow-x]) .shadow-right {\n  display: block;\n}\n\n.shadow-top.visible,\n.shadow-bottom.visible,\n.shadow-left.visible,\n.shadow-right.visible {\n  opacity: 1;\n}\n\n:host([shadow=\"false\"]) .shadow-overlay {\n  display: none;\n}\n\n/* Touch devices - restore native scrollbar */\n@media (pointer: coarse) and (hover: none) {\n  :host([custom-scrollbar]) .scroll-wrapper {\n    scrollbar-width: thin;\n    scrollbar-color: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent)) transparent;\n  }\n  :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n    display: block;\n    width: 4px;\n    height: 4px;\n  }\n  :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar-thumb {\n    background: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent));\n    border-radius: 2px;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .shadow-top,\n  .shadow-bottom,\n  .shadow-left,\n  .shadow-right {\n    transition-duration: 0ms !important;\n  }\n}\n\n/* Shared scrollbar styles */\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
 //# sourceMappingURL=scroll-container.d.ts.map

package/lib/styles/scroll-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-container.d.ts","sourceRoot":"","sources":["../../src/styles/scroll-container.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,eAAO,MAAM,qBAAqB,y+QA+LjC,CAAC"}
+{"version":3,"file":"scroll-container.d.ts","sourceRoot":"","sources":["../../src/styles/scroll-container.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,eAAO,MAAM,qBAAqB,msRAqMjC,CAAC"}

package/lib/styles/scroll-container.js

@@ -39,6 +39,12 @@ export const scrollContainerStyles = `
   display: none;
 }
 
+/* scroll-anchoring: we manage scroll position in JS, so turn off the browser's
+   native scroll anchoring to avoid double-compensation. */
+:host([scroll-anchoring]) .scroll-wrapper {
+  overflow-anchor: none;
+}
+
 /* ===================================== */
 /* custom-scrollbar: hides native */
 /* ===================================== */

package/lib/styles/scroll-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-container.js","sourceRoot":"","sources":["../../src/styles/scroll-container.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAE7D,MAAM,CAAC,MAAM,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8LnC,qBAAqB;CACtB,CAAC"}
+{"version":3,"file":"scroll-container.js","sourceRoot":"","sources":["../../src/styles/scroll-container.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAE7D,MAAM,CAAC,MAAM,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoMnC,qBAAqB;CACtB,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-strong);\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-strong);\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-strong);\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-strong);\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-strong);\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 = "\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";
 //# 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,osYAmZrB,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,SAAS,iqYAmZrB,CAAC"}