tyrell-components 1.0.0-RC13 → 1.0.0-RC15

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

@@ -1,8 +1,4 @@
-/**
- * Calendar Month Styles
- * Improved design with better visual hierarchy and size variants
- */
+/** Calendar Month Styles */
 /** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
 export declare const calendarMonthCustomFlavorCss: (base: string) => string;
 export declare const calendarMonthStyles: string;
-//# sourceMappingURL=calendar-month.d.ts.map

package/lib/styles/calendar-month.js

@@ -1,308 +1,191 @@
-/**
- * Calendar Month Styles
- * Improved design with better visual hierarchy and size variants
- */
 import { FLAVORS } from "../types/common.js";
-/* Flavor rules set --calendar-month-* local vars, wired in as the fallback
-   BEHIND every existing --ty-calendar-* public override (so those keep
-   working exactly as before) and AHEAD of the hardcoded primary default.
-   Doubles as the per-instance override API for a specific flavor: e.g.
-   `ty-calendar-month { --calendar-month-accent: ... }`. Fallback flavor
-   `fb` is used for custom flavors so missing tokens degrade to neutral. */
 const calendarMonthFlavor = (f, fb) => {
-    const color = (s) => fb
-        ? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
-        : `var(--ty-color-${f}${s})`;
-    const bg = (s) => fb
-        ? `var(--ty-bg-${f}${s}, var(--ty-bg-${fb}${s}))`
-        : `var(--ty-bg-${f}${s})`;
-    return `
+const color = (s) => fb
+? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
+: `var(--ty-color-${f}${s})`;
+const bg = (s) => fb
+? `var(--ty-bg-${f}${s}, var(--ty-bg-${fb}${s}))`
+: `var(--ty-bg-${f}${s})`;
+return `
 :host([flavor="${f}"]) {
-  --calendar-month-accent: ${color("")};
-  --calendar-month-selected-bg: ${bg("")};
-  --calendar-month-selected-color: ${color("-strong")};
-  --calendar-month-selected-hover-bg: ${bg("-bold")};
+--calendar-month-accent: ${color("")};
+--calendar-month-selected-bg: ${bg("")};
+--calendar-month-selected-color: ${color("-strong")};
+--calendar-month-selected-hover-bg: ${bg("-bold")};
 }
 :host([flavor="${f}+"]) {
-  --calendar-month-accent: ${color("-strong")};
-  --calendar-month-selected-bg: ${bg("-bold")};
-  --calendar-month-selected-color: ${color("-strong")};
-  --calendar-month-selected-hover-bg: ${bg("-bold")};
+--calendar-month-accent: ${color("-strong")};
+--calendar-month-selected-bg: ${bg("-bold")};
+--calendar-month-selected-color: ${color("-strong")};
+--calendar-month-selected-hover-bg: ${bg("-bold")};
 }
 :host([flavor="${f}-"]) {
-  --calendar-month-accent: ${color("-soft")};
-  --calendar-month-selected-bg: ${bg("-soft")};
-  --calendar-month-selected-color: ${color("")};
-  --calendar-month-selected-hover-bg: ${bg("")};
+--calendar-month-accent: ${color("-soft")};
+--calendar-month-selected-bg: ${bg("-soft")};
+--calendar-month-selected-color: ${color("")};
+--calendar-month-selected-hover-bg: ${bg("")};
 }
 `;
 };
-/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
 export const calendarMonthCustomFlavorCss = (base) => calendarMonthFlavor(base, "neutral");
 export const calendarMonthStyles = `
-/* ============================================================================
-   Theming Tokens
-   Override these to retheme the calendar without touching the global palette.
-   Defaults chain back to the global --ty-color-* / --ty-bg-* / --ty-border tokens.
-   ============================================================================ */
-
-/* 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
-   ============================================================================ */
-
 .calendar-flex-container {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  gap: 0;
-  padding: 0.75rem;
-  border-radius: var(--ty-radius-md);
-  font-family: system-ui, sans-serif;
-  user-select: none;
-  width: var(--calendar-width, fit-content);
-  min-width: 280px;
-  max-width: var(--calendar-max-width, none);
-}
-
-/* ============================================================================
-   Rows (Header + 6 Day Rows)
-   ============================================================================ */
-
+display: flex;
+flex-direction: column;
+box-sizing: border-box;
+gap: 0;
+padding: 0.75rem;
+border-radius: var(--ty-radius-md);
+font-family: inherit;
+user-select: none;
+width: var(--calendar-width, fit-content);
+min-width: var(--ty-calendar-width, 280px);
+max-width: var(--calendar-max-width, none);
+}
 .calendar-row {
-  display: flex;
-  flex: 1;
-  min-height: 0;
+display: flex;
+flex: 1;
+min-height: 0;
 }
-
 .calendar-header-row {
-  flex: 0 0 auto;
-  color: var(--ty-calendar-header-color, var(--ty-color-neutral-soft));
+flex: 0 0 auto;
+color: var(--ty-calendar-header-color, var(--ty-color-neutral-soft));
 }
-
 .calendar-day-row {
-  flex: 1;
-  min-height: 2rem;
-  margin-bottom: 0.125rem;
-}
-
-/* ============================================================================
-   Base Cell Styles
-   ============================================================================ */
-
+flex: 1;
+min-height: 2rem;
+margin-bottom: 0.125rem;
+}
 .calendar-cell {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 0;
-  position: relative;
-  box-sizing: border-box;
-}
-
-/* ============================================================================
-   Header Cells
-   ============================================================================ */
-
+flex: 1;
+display: flex;
+align-items: center;
+justify-content: center;
+min-width: 0;
+position: relative;
+box-sizing: border-box;
+}
 .calendar-header-cell {
-  text-align: center;
-  font-weight: 500;
-  text-transform: uppercase;
-  padding: 0.25rem;
-  letter-spacing: 0.05em;
-}
-
-/* ============================================================================
-   Day Cells - Square with Better Visual Hierarchy
-   ============================================================================ */
-
+text-align: center;
+font-weight: 500;
+text-transform: uppercase;
+padding: 0.25rem;
+letter-spacing: 0.05em;
+}
 .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: ghost cells — no boxes; the border is a theming hook only */
-  border-radius: var(--ty-calendar-day-radius, 0.5rem);
-  border: 1px solid var(--ty-calendar-day-border, transparent);
-  background-color: var(--ty-calendar-day-bg, transparent);
-  color: var(--ty-calendar-day-color, var(--ty-calendar-muted, var(--ty-text)));
-  cursor: pointer;
-  transition: var(--ty-local-transition, background-color 0.15s ease, color 0.15s ease);
-
-  /* Typography */
-  font-weight: 400;
-  font-variant-numeric: tabular-nums;
-}
-
-/* Hover: soft rounded pill, no border flash */
+aspect-ratio: 1;
+display: flex;
+align-items: center;
+justify-content: center;
+flex-direction: column;
+margin: 0.125rem;
+border-radius: var(--ty-calendar-day-radius, 0.5rem);
+border: 1px solid var(--ty-calendar-day-border, transparent);
+background-color: var(--ty-calendar-day-bg, transparent);
+color: var(--ty-calendar-day-color, var(--ty-calendar-muted, var(--ty-text)));
+cursor: pointer;
+transition: var(--ty-local-transition, background-color 0.15s ease, color 0.15s ease);
+font-weight: 400;
+font-variant-numeric: tabular-nums;
+}
 .calendar-day-cell:hover {
-  color: var(--ty-calendar-day-hover-color, var(--ty-text-strong));
-  background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));
-  border-color: var(--ty-calendar-day-hover-border, transparent);
-}
-
-/* Keyboard focus ring (roving tabindex — see calendar-month.ts's render()).
-   :focus-visible, not :focus, so mouse/pointerdown activation doesn't flash
-   a ring; only Tab-in / arrow-key navigation does. */
+color: var(--ty-calendar-day-hover-color, var(--ty-text-strong));
+background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));
+border-color: var(--ty-calendar-day-hover-border, transparent);
+}
 .calendar-day-cell:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--calendar-month-accent, var(--ty-color-primary));
-}
-
-/* ============================================================================
-   Day States
-   ============================================================================ */
-
-/* Today: accent number, no slab — never collides with hover, and the
-   selected pill wins when today is picked */
+outline: none;
+box-shadow: 0 0 0 2px var(--calendar-month-accent, var(--ty-color-primary));
+}
 .calendar-day-cell.today {
-  background-color: var(--ty-calendar-today-bg, transparent);
-  color: var(--ty-calendar-today-color, var(--ty-calendar-today-accent, var(--calendar-month-accent, var(--ty-color-primary))));
-  border-color: var(--ty-calendar-today-border, transparent);
-  font-weight: 600;
+background-color: var(--ty-calendar-today-bg, transparent);
+color: var(--ty-calendar-today-color, var(--ty-calendar-today-accent, var(--calendar-month-accent, var(--ty-color-primary))));
+border-color: var(--ty-calendar-today-border, transparent);
+font-weight: 600;
 }
-
-/* Weekend: no distinction by default (hook kept for theming) */
 .calendar-day-cell.weekend {
-  color: var(--ty-calendar-weekend-color, var(--ty-calendar-day-color, var(--ty-text)));
-}
-
-/* Other Month - Muted.
-   Was color: var(--ty-color-neutral-faint) at opacity 0.5 — -faint alone is
-   only ~2.5:1 against the content surface (already under the 4.5:1 AA text
-   minimum), and blending it toward the background via opacity made it
-   worse (~1.5:1 in light mode). --ty-calendar-other-month-color is its own
-   token (tyrell.css :root / html.dark) calibrated to actually pass, with
-   opacity dropped rather than layered on top. */
+color: var(--ty-calendar-weekend-color, var(--ty-calendar-day-color, var(--ty-text)));
+}
 .calendar-day-cell.other-month {
-  color: var(--ty-calendar-other-month-color, #6b7280);
+color: var(--ty-calendar-other-month-color, #6b7280);
 }
-
 .calendar-day-cell.other-month:hover { 
-  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;
+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;
 }
-
-/* Disabled - outside min/max bounds */
 .calendar-day-cell.disabled {
-  color: var(--ty-calendar-disabled-color, var(--ty-color-neutral-faint));
-  opacity: var(--ty-calendar-disabled-opacity, 0.35);
-  cursor: default;
-  pointer-events: none;
+color: var(--ty-calendar-disabled-color, var(--ty-color-neutral-faint));
+opacity: var(--ty-calendar-disabled-opacity, 0.35);
+cursor: default;
+pointer-events: none;
 }
-
-/* Selected: the one strong element in the grid */
 .calendar-day-cell.selected {
-  background-color: var(--ty-calendar-selected-bg, var(--calendar-month-selected-bg, var(--ty-bg-primary)));
-  color: var(--ty-calendar-selected-color, var(--calendar-month-selected-color, var(--ty-color-primary-strong)));
-  border-color: var(--ty-calendar-selected-border, var(--ty-calendar-accent, var(--calendar-month-accent, transparent)));
-  font-weight: 600;
+background-color: var(--ty-calendar-selected-bg, var(--calendar-month-selected-bg, var(--ty-bg-primary)));
+color: var(--ty-calendar-selected-color, var(--calendar-month-selected-color, var(--ty-color-primary-strong)));
+border-color: var(--ty-calendar-selected-border, var(--ty-calendar-accent, var(--calendar-month-accent, transparent)));
+font-weight: 600;
 }
-
 .calendar-day-cell.selected:hover {
-  background-color: var(--ty-calendar-selected-hover-bg, var(--calendar-month-selected-hover-bg, var(--ty-bg-primary-bold)));
-  border-color: var(--ty-calendar-selected-hover-border, transparent);
+background-color: var(--ty-calendar-selected-hover-bg, var(--calendar-month-selected-hover-bg, var(--ty-bg-primary-bold)));
+border-color: var(--ty-calendar-selected-hover-border, transparent);
 }
-
 .calendar-day-cell.selected.other-month {
-  opacity: 0.7;
-}
-
-/* ============================================================================
-   Size Variants
-   ============================================================================ */
-
-/* Small - Compact (240px min-width) */
+opacity: 0.7;
+}
 .calendar-size-sm {
-  padding: 0.5rem;
-  min-width: 240px;
+padding: 0.5rem;
+min-width: var(--ty-calendar-width, 240px);
 }
-
 .calendar-size-sm .calendar-header-cell {
-  font-size: 0.625rem;
-  padding: 0.125rem;
+font-size: 0.625rem;
+padding: 0.125rem;
 }
-
 .calendar-size-sm .calendar-day-cell {
-  font-size: 0.75rem;
-  margin: 0.0625rem;
+font-size: 0.75rem;
+margin: 0.0625rem;
 }
-
 .calendar-size-sm .calendar-day-row {
-  min-height: 1.5rem;
+min-height: 1.5rem;
 }
-
-/* Medium - Default (280px min-width) */
 .calendar-size-md {
-  padding: 0.75rem;
-  min-width: 280px;
+padding: 0.75rem;
+min-width: var(--ty-calendar-width, 280px);
 }
-
 .calendar-size-md .calendar-header-cell {
-  font-size: 0.6875rem;
-  padding: 0.25rem;
+font-size: 0.6875rem;
+padding: 0.25rem;
 }
-
 .calendar-size-md .calendar-day-cell {
-  font-size: 0.8125rem;
-  margin: 0.125rem;
+font-size: 0.8125rem;
+margin: 0.125rem;
 }
-
 .calendar-size-md .calendar-day-row {
-  min-height: 2rem;
+min-height: 2rem;
 }
-
-/* Large - Spacious (360px min-width) */
 .calendar-size-lg {
-  padding: 1rem;
-  min-width: 360px;
+padding: 1rem;
+min-width: var(--ty-calendar-width, 360px);
 }
-
 .calendar-size-lg .calendar-header-cell {
-  font-size: 0.75rem;
-  padding: 0.375rem;
+font-size: 0.75rem;
+padding: 0.375rem;
 }
-
 .calendar-size-lg .calendar-day-cell {
-  font-size: 0.875rem;
-  margin: 0.1875rem;
+font-size: 0.875rem;
+margin: 0.1875rem;
 }
-
 .calendar-size-lg .calendar-day-row {
-  min-height: 2.5rem;
+min-height: 2.5rem;
 }
-
-/* ============================================================================
-   Backwards Compatibility
-   ============================================================================ */
-
 .calendar-day {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-
-/* ============================================================================
-   Flavor Variants (set --calendar-month-*, consumed above)
-   ============================================================================ */
+width: 100%;
+height: 100%;
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+box-sizing: border-box;
+}
 ${FLAVORS.map((f) => calendarMonthFlavor(f)).join("")}
 `;
-//# sourceMappingURL=calendar-month.js.map

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

@@ -1,6 +1,2 @@
-/**
- * Calendar Navigation Styles
- * Clean, modern design with proper visual hierarchy and size variants
- */
-export declare const calendarNavigationStyles = "\n/* ============================================================================\n   Size Variants (CSS Custom Properties)\n   ============================================================================ */\n\n/* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of\n   use (NOT on :host) so consumers can override them from outside \u2014 this\n   component is nested inside ty-calendar's shadow, so a :host default would\n   block inherited overrides. --ty-calendar-accent still cascades in. */\n\n:host([data-size=\"md\"]) {\n  --nav-btn-size: 2rem;\n  --nav-btn-icon-size: 1.25rem;\n  --nav-font-size: 1rem;\n  --nav-padding: 0.5rem 0.75rem;\n  --nav-default-width: 280px;\n}\n\n:host([data-size=\"sm\"]) {\n  --nav-btn-size: 1.5rem;\n  --nav-btn-icon-size: 1rem;\n  --nav-font-size: 0.875rem;\n  --nav-padding: 0.375rem 0.5rem;\n  --nav-default-width: 240px;\n}\n\n:host([data-size=\"lg\"]) {\n  --nav-btn-size: 2.5rem;\n  --nav-btn-icon-size: 1.5rem;\n  --nav-font-size: 1.125rem;\n  --nav-padding: 0.625rem 1rem;\n  --nav-default-width: 360px;\n}\n\n/* ============================================================================\n   Main Navigation Header\n   ============================================================================ */\n\n.calendar-navigation-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--nav-padding);\n  font-family: system-ui, sans-serif;\n  user-select: none;\n  width: var(--nav-width, var(--nav-default-width));\n  box-sizing: border-box;\n}\n\n/* ============================================================================\n   Navigation Groups (Left, Center, Right)\n   ============================================================================ */\n\n.nav-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.nav-group-left,\n.nav-group-right {\n  flex: 0 0 auto;\n}\n\n.nav-group-center {\n  flex: 1;\n  justify-content: center;\n}\n\n/* ============================================================================\n   Navigation Buttons\n   ============================================================================ */\n\n.nav-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--nav-btn-size);\n  height: var(--nav-btn-size);\n  padding: 0;\n  border: none;\n  border-radius: var(--ty-radius-base);\n  background-color: transparent;\n  color: var(--ty-calendar-nav-color, var(--ty-color-neutral));\n  cursor: pointer;\n  transition: var(--ty-local-transition, all 0.15s ease);\n  outline: none;\n}\n\n.nav-btn:hover {\n  background-color: var(--ty-calendar-nav-hover-bg, var(--ty-bg-neutral-soft));\n  color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));\n}\n\n.nav-btn:active {\n  background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));\n  transform: scale(0.95);\n}\n\n.nav-btn:disabled {\n  opacity: 0.35;\n  cursor: default;\n  pointer-events: none;\n}\n\n.nav-btn:focus-visible {\n  outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));\n  outline-offset: 2px;\n}\n\n/* SVG sizing */\n.nav-btn svg {\n  width: var(--nav-btn-icon-size);\n  height: var(--nav-btn-icon-size);\n  display: block;\n}\n\n/* ============================================================================\n   Month/Year Display (Center)\n   ============================================================================ */\n\n.month-year-display {\n  font-size: var(--nav-font-size);\n  font-weight: 600;\n  color: var(--ty-calendar-nav-title-color, var(--ty-color-neutral-strong));\n  text-align: center;\n  white-space: nowrap;\n  letter-spacing: -0.01em;\n}\n";
-//# sourceMappingURL=calendar-navigation.d.ts.map
+/** Calendar Navigation Styles */
+export declare const calendarNavigationStyles = "\n/* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of\n   use (NOT on :host) so consumers can override them from outside \u2014 this\n   component is nested inside ty-calendar's shadow, so a :host default would\n   block inherited overrides. --ty-calendar-accent still cascades in. */\n\n:host([data-size=\"md\"]) {\n  --nav-btn-size: 2rem;\n  --nav-btn-icon-size: 1.25rem;\n  --nav-font-size: 0.875rem;\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: 0.875rem;\n  --nav-padding: 0.625rem 1rem;\n  --nav-default-width: 360px;\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: inherit;\n  user-select: none;\n  /* --ty-calendar-width is the public knob: set it on ty-calendar (or any\n     ancestor) and BOTH the nav and the day grid follow it, because custom\n     properties inherit through shadow boundaries. --nav-default-width can't\n     serve that role \u2014 it's declared on :host([data-size]) inside this shadow\n     root, and a declaration on the element always beats a value inherited\n     into it, so an outside override of it is silently dead. --nav-width\n     (set inline by the width attribute) still wins over both. */\n  width: var(--nav-width, var(--ty-calendar-width, var(--nav-default-width)));\n  box-sizing: border-box;\n}\n\n/* Navigation groups: left, center, right */\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  /* Flex items default to min-width:auto, i.e. they refuse to shrink below\n     their content. A long month name (\"September 2026\") therefore widened\n     this group and shoved the arrow groups outward \u2014 the nav visibly\n     re-laid-out as you paged month to month. min-width:0 lets the centre\n     take exactly the leftover space, so the arrows stay pinned whatever the\n     label says, and an over-long label ellipsizes instead of pushing. */\n  min-width: 0;\n}\n\n.nav-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--nav-btn-size);\n  height: var(--nav-btn-size);\n  padding: 0;\n  border: none;\n  border-radius: var(--ty-radius-base);\n  background-color: transparent;\n  color: var(--ty-calendar-nav-color, var(--ty-color-neutral));\n  cursor: pointer;\n  transition: var(--ty-local-transition, all 0.15s ease);\n  outline: none;\n}\n\n.nav-btn:hover {\n  background-color: var(--ty-calendar-nav-hover-bg, var(--ty-bg-neutral-soft));\n  color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));\n}\n\n.nav-btn:active {\n  background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));\n  transform: scale(0.95);\n}\n\n.nav-btn:disabled {\n  opacity: 0.35;\n  cursor: default;\n  pointer-events: none;\n}\n\n.nav-btn:focus-visible {\n  outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));\n  outline-offset: 2px;\n}\n\n.nav-btn svg {\n  width: var(--nav-btn-icon-size);\n  height: var(--nav-btn-icon-size);\n  display: block;\n}\n\n/* 14px uppercase at every size, not a per-size type scale: the label is the\n   widest thing in the bar and the only one whose width depends on the data\n   (\"May\" vs \"September\"), so scaling it up on lg was what made the arrows\n   shuffle around. Small caps read as chrome, stay legible, and leave the\n   centre column comfortably wider than the longest localized month name.\n   Ellipsis is a backstop for a narrow --nav-width, not the sizing strategy. */\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  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n";

package/lib/styles/calendar-navigation.js

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