@ropav/styles 0.5.0 → 0.7.0

package/dist/components/calendar/calendar.styles.d.ts

@@ -1,79 +1,43 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const calendarVariants: import("tailwind-variants").TVReturnType<{}, {
-    /** Root calendar container */
-    base: string;
-    /** Calendar cell (td) */
-    cell: string;
-    /** Cell indicator (small dot at bottom of cell) */
-    cellIndicator: string;
-    /** Calendar grid (table) */
-    grid: string;
-    /** Grid body (tbody) */
-    gridBody: string;
-    /** Grid header (thead) */
-    gridHeader: string;
-    /** Grid row (tr) */
-    gridRow: string;
-    /** Calendar header containing heading and navigation */
-    header: string;
-    /** Header cell (th - day names) */
-    headerCell: string;
-    /** Month/year heading text */
-    heading: string;
-    /** Previous/Next navigation button */
-    navButton: string;
-    /** Navigation button icon */
-    navButtonIcon: string;
-}, undefined, {}, {
-    /** Root calendar container */
-    base: string;
-    /** Calendar cell (td) */
-    cell: string;
-    /** Cell indicator (small dot at bottom of cell) */
-    cellIndicator: string;
-    /** Calendar grid (table) */
-    grid: string;
-    /** Grid body (tbody) */
-    gridBody: string;
-    /** Grid header (thead) */
-    gridHeader: string;
-    /** Grid row (tr) */
-    gridRow: string;
-    /** Calendar header containing heading and navigation */
-    header: string;
-    /** Header cell (th - day names) */
-    headerCell: string;
-    /** Month/year heading text */
-    heading: string;
-    /** Previous/Next navigation button */
-    navButton: string;
-    /** Navigation button icon */
-    navButtonIcon: string;
-}, import("tailwind-variants").TVReturnTypeLike<{}, {
-    /** Root calendar container */
-    base: string;
-    /** Calendar cell (td) */
-    cell: string;
-    /** Cell indicator (small dot at bottom of cell) */
-    cellIndicator: string;
-    /** Calendar grid (table) */
-    grid: string;
-    /** Grid body (tbody) */
-    gridBody: string;
-    /** Grid header (thead) */
-    gridHeader: string;
-    /** Grid row (tr) */
-    gridRow: string;
-    /** Calendar header containing heading and navigation */
-    header: string;
-    /** Header cell (th - day names) */
-    headerCell: string;
-    /** Month/year heading text */
-    heading: string;
-    /** Previous/Next navigation button */
-    navButton: string;
-    /** Navigation button icon */
-    navButtonIcon: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const calendarVariants: (props?: ({
+    class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+} & {}) | undefined) => {
+    base: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    cell: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    cellIndicator: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    grid: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    gridBody: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    gridHeader: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    gridRow: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    header: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    headerCell: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    heading: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    navButton: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+    navButtonIcon: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & {}) | undefined) => string;
+};
 export type CalendarVariants = VariantProps<typeof calendarVariants>;
 //# sourceMappingURL=calendar.styles.d.ts.map

package/dist/components/calendar/calendar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/calendar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,gBAAgB;IAGzB,8BAA8B;;IAE9B,yBAAyB;;IAEzB,mDAAmD;;IAEnD,4BAA4B;;IAE5B,wBAAwB;;IAExB,0BAA0B;;IAE1B,oBAAoB;;IAEpB,wDAAwD;;IAExD,mCAAmC;;IAEnC,8BAA8B;;IAE9B,sCAAsC;;IAEtC,6BAA6B;;;IAtB7B,8BAA8B;;IAE9B,yBAAyB;;IAEzB,mDAAmD;;IAEnD,4BAA4B;;IAE5B,wBAAwB;;IAExB,0BAA0B;;IAE1B,oBAAoB;;IAEpB,wDAAwD;;IAExD,mCAAmC;;IAEnC,8BAA8B;;IAE9B,sCAAsC;;IAEtC,6BAA6B;;;IAtB7B,8BAA8B;;IAE9B,yBAAyB;;IAEzB,mDAAmD;;IAEnD,4BAA4B;;IAE5B,wBAAwB;;IAExB,0BAA0B;;IAE1B,oBAAoB;;IAEpB,wDAAwD;;IAExD,mCAAmC;;IAEnC,8BAA8B;;IAE9B,sCAAsC;;IAEtC,6BAA6B;;GAI/B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"calendar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/calendar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/calendar/calendar.styles.js

@@ -1,32 +1,32 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/calendar/calendar.styles.ts
 const calendarVariants = tv({
 	defaultVariants: {},
 	slots: {
 		/** Root calendar container */
-		base: "calendar",
+		base: "rp-calendar",
 		/** Calendar cell (td) */
-		cell: "calendar__cell",
+		cell: "rp-calendar__cell",
 		/** Cell indicator (small dot at bottom of cell) */
-		cellIndicator: "calendar__cell-indicator",
+		cellIndicator: "rp-calendar__cell-indicator",
 		/** Calendar grid (table) */
-		grid: "calendar__grid",
+		grid: "rp-calendar__grid",
 		/** Grid body (tbody) */
-		gridBody: "calendar__grid-body",
+		gridBody: "rp-calendar__grid-body",
 		/** Grid header (thead) */
-		gridHeader: "calendar__grid-header",
+		gridHeader: "rp-calendar__grid-header",
 		/** Grid row (tr) */
-		gridRow: "calendar__grid-row",
+		gridRow: "rp-calendar__grid-row",
 		/** Calendar header containing heading and navigation */
-		header: "calendar__header",
+		header: "rp-calendar__header",
 		/** Header cell (th - day names) */
-		headerCell: "calendar__header-cell",
+		headerCell: "rp-calendar__header-cell",
 		/** Month/year heading text */
-		heading: "calendar__heading",
+		heading: "rp-calendar__heading",
 		/** Previous/Next navigation button */
-		navButton: "calendar__nav-button",
+		navButton: "rp-calendar__nav-button",
 		/** Navigation button icon */
-		navButtonIcon: "calendar__nav-button-icon"
+		navButtonIcon: "rp-calendar__nav-button-icon"
 	},
 	variants: {}
 });

package/dist/components/calendar-year-picker/calendar-year-picker.styles.d.ts

@@ -1,52 +1,22 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const calendarYearPickerVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: {
-            trigger?: import("tailwind-variants").ClassValue;
-            triggerHeading?: import("tailwind-variants").ClassValue;
-            triggerIndicator?: import("tailwind-variants").ClassValue;
-            yearCell?: import("tailwind-variants").ClassValue;
-            yearGrid?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {
-    [x: string]: {
-        [x: string]: {
-            trigger?: import("tailwind-variants").ClassValue;
-            triggerHeading?: import("tailwind-variants").ClassValue;
-            triggerIndicator?: import("tailwind-variants").ClassValue;
-            yearCell?: import("tailwind-variants").ClassValue;
-            yearGrid?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    trigger: string;
-    triggerHeading: string;
-    triggerIndicator: string;
-    yearCell: string;
-    yearGrid: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: {
-            trigger?: import("tailwind-variants").ClassValue;
-            triggerHeading?: import("tailwind-variants").ClassValue;
-            triggerIndicator?: import("tailwind-variants").ClassValue;
-            yearCell?: import("tailwind-variants").ClassValue;
-            yearGrid?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    trigger: string;
-    triggerHeading: string;
-    triggerIndicator: string;
-    yearCell: string;
-    yearGrid: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
-    trigger: string;
-    triggerHeading: string;
-    triggerIndicator: string;
-    yearCell: string;
-    yearGrid: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const calendarYearPickerVariants: (props?: ({
+    class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+} & object) | undefined) => {
+    trigger: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & object) | undefined) => string;
+    triggerHeading: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & object) | undefined) => string;
+    triggerIndicator: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & object) | undefined) => string;
+    yearCell: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & object) | undefined) => string;
+    yearGrid: (props?: ({
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    } & object) | undefined) => string;
+};
 export type CalendarYearPickerVariants = VariantProps<typeof calendarYearPickerVariants>;
 //# sourceMappingURL=calendar-year-picker.styles.d.ts.map

package/dist/components/calendar-year-picker/calendar-year-picker.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-year-picker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/calendar-year-picker/calendar-year-picker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAQrC,CAAC;AAEH,MAAM,MAAM,0BAA0B,GAAG,YAAY,CAAC,OAAO,0BAA0B,CAAC,CAAC"}
+{"version":3,"file":"calendar-year-picker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/calendar-year-picker/calendar-year-picker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;CAQrC,CAAC;AAEH,MAAM,MAAM,0BAA0B,GAAG,YAAY,CAAC,OAAO,0BAA0B,CAAC,CAAC"}

package/dist/components/calendar-year-picker/calendar-year-picker.styles.js

@@ -1,11 +1,11 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/calendar-year-picker/calendar-year-picker.styles.ts
 const calendarYearPickerVariants = tv({ slots: {
-	trigger: "calendar-year-picker__trigger",
-	triggerHeading: "calendar-year-picker__trigger-heading",
-	triggerIndicator: "calendar-year-picker__trigger-indicator",
-	yearCell: "calendar-year-picker__year-cell",
-	yearGrid: "calendar-year-picker__year-grid"
+	trigger: "rp-calendar-year-picker__trigger",
+	triggerHeading: "rp-calendar-year-picker__trigger-heading",
+	triggerIndicator: "rp-calendar-year-picker__trigger-indicator",
+	yearCell: "rp-calendar-year-picker__year-cell",
+	yearGrid: "rp-calendar-year-picker__year-grid"
 } });
 //#endregion
 export { calendarYearPickerVariants };

package/dist/components/calendar-year-picker.css

@@ -2,7 +2,7 @@
  * Calendar Year Picker Component Styles
  *
  * Internal component used inside Calendar / RangeCalendar to provide a
- * toggleable year selector. Uses CSS :has() on the parent .calendar to
+ * toggleable year selector. Uses CSS :has() on the parent .rp-calendar to
  * drive crossfade transitions.
  *
  * The year grid is absolutely positioned and sized via JS to match the
@@ -15,8 +15,8 @@
 /* -----------------------------------------------------------------------------
  * Positioning Context
  * -------------------------------------------------------------------------- */
-.calendar:has(.calendar-year-picker__year-grid),
-.range-calendar:has(.calendar-year-picker__year-grid) {
+.rp-calendar:has(.rp-calendar-year-picker__year-grid),
+.rp-range-calendar:has(.rp-calendar-year-picker__year-grid) {
   position: relative;
 }
 
@@ -31,8 +31,8 @@
  * -------------------------------------------------------------------------- */
 
 /* Day grid – default visible */
-.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"],
-.range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"] {
+.rp-calendar:has(.rp-calendar-year-picker__year-grid) > [data-slot="calendar-grid"],
+.rp-range-calendar:has(.rp-calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"] {
   will-change: opacity;
   transition:
     opacity 150ms var(--ease-out),
@@ -41,8 +41,9 @@
 }
 
 /* Day grid – hidden when year picker is open (fade + blur out) */
-.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"],
-.range-calendar:has(.calendar-year-picker__year-grid[data-open="true"])
+.rp-calendar:has(.rp-calendar-year-picker__year-grid[data-open="true"])
+  > [data-slot="calendar-grid"],
+.rp-range-calendar:has(.rp-calendar-year-picker__year-grid[data-open="true"])
   > [data-slot="range-calendar-grid"] {
   @apply pointer-events-none opacity-0;
   visibility: hidden;
@@ -55,7 +56,7 @@
 /* -----------------------------------------------------------------------------
  * Trigger Button
  * -------------------------------------------------------------------------- */
-.calendar-year-picker__trigger {
+.rp-calendar-year-picker__trigger {
   @apply flex flex-1 items-center justify-start gap-1 rounded-lg outline-none;
 
   cursor: var(--cursor-interactive);
@@ -67,14 +68,14 @@
   }
 }
 
-.calendar-year-picker__trigger-heading {
+.rp-calendar-year-picker__trigger-heading {
   @apply text-sm font-medium;
 
   transition: color 150ms var(--ease-out);
   @apply motion-reduce:transition-none;
 }
 
-.calendar-year-picker__trigger-indicator {
+.rp-calendar-year-picker__trigger-indicator {
   @apply text-xs text-accent-soft-foreground rtl:[transform:rotate(180deg)];
 
   transition: transform 150ms var(--ease-out);
@@ -82,11 +83,11 @@
 }
 
 /* Rotate chevron when open */
-.calendar-year-picker__trigger[data-open="true"] .calendar-year-picker__trigger-indicator {
+.rp-calendar-year-picker__trigger[data-open="true"] .rp-calendar-year-picker__trigger-indicator {
   transform: rotate(90deg);
 }
 
-.calendar-year-picker__trigger[data-open="true"] .calendar-year-picker__trigger-heading {
+.rp-calendar-year-picker__trigger[data-open="true"] .rp-calendar-year-picker__trigger-heading {
   @apply text-accent-soft-foreground;
 }
 
@@ -96,7 +97,7 @@
  * Absolutely positioned over the day grid area. The exact `top` and `height`
  * are set via JS to match the sibling day grid element.
  * -------------------------------------------------------------------------- */
-.calendar-year-picker__year-grid {
+.rp-calendar-year-picker__year-grid {
   @apply pointer-events-none absolute start-0 end-0 grid scrollbar content-start gap-1 overflow-y-auto p-1 opacity-0;
   grid-template-columns: repeat(3, 1fr);
 
@@ -104,7 +105,7 @@
   will-change: opacity;
 }
 
-.calendar-year-picker__year-grid[data-open="true"] {
+.rp-calendar-year-picker__year-grid[data-open="true"] {
   @apply pointer-events-auto opacity-100;
 
   /* When opening: slight delay so the day grid starts fading out first */
@@ -115,14 +116,23 @@
 /* -----------------------------------------------------------------------------
  * Year Cell
  * -------------------------------------------------------------------------- */
-.calendar-year-picker__year-cell {
+.rp-calendar-year-picker__year-cell {
   @apply relative inline-flex h-8 items-center justify-center rounded-component px-2.5 text-sm font-medium outline-none select-none no-highlight;
   touch-action: manipulation;
 
-  /**
-   * Transitions – same as .tag
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
+  /* The fill and label, per state — selected and hovered land together on the current year. */
+  --calendar-year-picker-year-cell-bg: transparent;
+  --calendar-year-picker-year-cell-bg-hover: var(--state-layer);
+  --calendar-year-picker-year-cell-bg-selected: var(--accent);
+  --calendar-year-picker-year-cell-bg-selected-hover: var(--accent-hover);
+  --calendar-year-picker-year-cell-fg: currentcolor;
+  --calendar-year-picker-year-cell-fg-hover: var(--default-foreground);
+  --calendar-year-picker-year-cell-fg-selected: var(--accent-foreground);
+
+  background-color: var(--calendar-year-picker-year-cell-bg);
+  color: var(--calendar-year-picker-year-cell-fg);
+
+  /* Same as `.rp-tag`. */
   transition:
     color 100ms var(--ease-smooth),
     scale 100ms var(--ease-smooth),
@@ -136,19 +146,22 @@
   /* Hover state (when not selected) – only on devices that support hover */
   @media (hover: hover) and (pointer: fine) {
     &:is(:hover, [data-hovered="true"]):not([data-selected="true"]) {
-      @apply bg-default text-default-foreground;
+      background-color: var(--calendar-year-picker-year-cell-bg-hover);
+      color: var(--calendar-year-picker-year-cell-fg-hover);
     }
   }
 
-  /* Selected state (current year) – same as .tag[data-selected] */
+  /* Selected state (current year) – same as .rp-tag[data-selected] */
   &[data-selected="true"],
   &[aria-selected="true"] {
-    @apply bg-accent text-accent-foreground;
+    background-color: var(--calendar-year-picker-year-cell-bg-selected);
+    color: var(--calendar-year-picker-year-cell-fg-selected);
+
     @apply forced-selected;
 
     @media (hover: hover) and (pointer: fine) {
       &:is(:hover, [data-hovered="true"]) {
-        @apply bg-accent-hover;
+        background-color: var(--calendar-year-picker-year-cell-bg-selected-hover);
       }
     }
   }