@ropav/styles 0.5.0 → 0.7.0

package/dist/components/tabs/tabs.styles.js

@@ -1,22 +1,22 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/tabs/tabs.styles.ts
 const tabsVariants = tv({
 	defaultVariants: { variant: "primary" },
 	slots: {
-		base: "tabs",
-		scrollNext: "tabs__list-container__scroll-next",
-		scrollPrev: "tabs__list-container__scroll-prev",
-		scroller: "tabs__list-container__scroller",
-		separator: "tabs__separator",
-		tab: "tabs__tab",
-		tabIndicator: "tabs__indicator",
-		tabList: "tabs__list",
-		tabListContainer: "tabs__list-container",
-		tabPanel: "tabs__panel"
+		base: "rp-tabs",
+		scrollNext: "rp-tabs__list-container__scroll-next",
+		scrollPrev: "rp-tabs__list-container__scroll-prev",
+		scroller: "rp-tabs__list-container__scroller",
+		separator: "rp-tabs__separator",
+		tab: "rp-tabs__tab",
+		tabIndicator: "rp-tabs__indicator",
+		tabList: "rp-tabs__list",
+		tabListContainer: "rp-tabs__list-container",
+		tabPanel: "rp-tabs__panel"
 	},
 	variants: { variant: {
 		primary: {},
-		secondary: { base: "tabs--secondary" }
+		secondary: { base: "rp-tabs--secondary" }
 	} }
 });
 //#endregion

package/dist/components/tabs.css

@@ -1,5 +1,5 @@
 /* Base tabs component */
-.tabs {
+.rp-tabs {
   @apply flex gap-2;
 
   /* Orientation styles */
@@ -13,26 +13,22 @@
 }
 
 /* Tab list container */
-.tabs__list-container {
+.rp-tabs__list-container {
   @apply relative bg-default;
 
-  border-radius: calc(var(--radius) * 2.5);
+  border-radius: min(32px, var(--component-radius));
 
   /* Vertical scroller fills the container height so overflow detection
      engages when the wrapper height is constrained (e.g. h-[240px]) */
-  > .tabs__list-container__scroller[data-orientation="vertical"] {
+  > .rp-tabs__list-container__scroller[data-orientation="vertical"] {
     @apply h-full;
   }
 
   /* Overflow chevron buttons */
-  > .tabs__list-container__scroll-prev,
-  > .tabs__list-container__scroll-next {
+  > .rp-tabs__list-container__scroll-prev,
+  > .rp-tabs__list-container__scroll-next {
     @apply absolute z-2 hidden size-4 cursor-(--cursor-interactive) items-center justify-center rounded-full border-0 bg-transparent p-0 text-foreground outline-none;
 
-    /**
-    * Transitions
-    * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-    */
     transition: opacity 150ms var(--ease-smooth);
     @apply motion-reduce:transition-none;
 
@@ -49,27 +45,27 @@
 
   /* Chevron position - horizontal orientation */
   &:has([data-orientation="horizontal"]) {
-    > .tabs__list-container__scroll-prev {
+    > .rp-tabs__list-container__scroll-prev {
       @apply start-1 top-1/2 -translate-y-1/2;
     }
 
-    > .tabs__list-container__scroll-next {
+    > .rp-tabs__list-container__scroll-next {
       @apply end-1 top-1/2 -translate-y-1/2;
     }
 
-    > .tabs__list-container__scroll-prev,
-    > .tabs__list-container__scroll-next {
+    > .rp-tabs__list-container__scroll-prev,
+    > .rp-tabs__list-container__scroll-next {
       @apply rtl:rotate-180;
     }
   }
 
   /* Chevron position - vertical orientation */
   &:has([data-orientation="vertical"]) {
-    > .tabs__list-container__scroll-prev {
+    > .rp-tabs__list-container__scroll-prev {
       @apply top-1 left-1/2 -translate-x-1/2;
     }
 
-    > .tabs__list-container__scroll-next {
+    > .rp-tabs__list-container__scroll-next {
       @apply bottom-1 left-1/2 -translate-x-1/2;
     }
   }
@@ -83,7 +79,7 @@
         [data-top-bottom-scroll="true"]
       )
     )
-    > .tabs__list-container__scroll-prev {
+    > .rp-tabs__list-container__scroll-prev {
     @apply inline-flex;
   }
 
@@ -95,13 +91,13 @@
         [data-top-bottom-scroll="true"]
       )
     )
-    > .tabs__list-container__scroll-next {
+    > .rp-tabs__list-container__scroll-next {
     @apply inline-flex;
   }
 }
 
 /* Tab list */
-.tabs__list {
+.rp-tabs__list {
   @apply inline-flex p-1;
 
   /* Horizontal orientation - grow with content so ScrollShadow can detect overflow */
@@ -113,23 +109,24 @@
   &[data-orientation="vertical"] {
     @apply flex-col gap-1;
 
-    .tabs__tab {
+    .rp-tabs__tab {
       @apply min-w-20;
     }
   }
 }
 
 /* Individual tab */
-.tabs__tab {
-  @apply relative flex h-8 w-full items-center justify-center rounded-component px-4 text-center text-sm font-medium text-muted outline-none no-highlight;
+.rp-tabs__tab {
+  @apply relative flex h-8 w-full items-center justify-center rounded-component px-4 text-center text-sm font-medium outline-none no-highlight;
+
+  --tabs-tab-fg: var(--muted);
+  --tabs-tab-fg-selected: var(--segment-foreground);
+
+  color: var(--tabs-tab-fg);
 
   z-index: 1;
   cursor: var(--cursor-interactive);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     color 150ms var(--ease-smooth),
     background-color 150ms var(--ease-smooth),
@@ -139,7 +136,7 @@
 
   /* Selected state */
   &[data-selected="true"] {
-    @apply text-segment-foreground;
+    color: var(--tabs-tab-fg-selected);
 
     /* Sits on top of the indicator, which forced colors paints `Highlight`. `forced-color-adjust`
      * suppresses the `Canvas` backplate Chromium would otherwise paint behind this label - it
@@ -150,8 +147,8 @@
     }
 
     /* Hide separator on the selected tab and the one following it */
-    .tabs__separator,
-    & + .tabs__tab .tabs__separator {
+    .rp-tabs__separator,
+    & + .rp-tabs__tab .rp-tabs__separator {
       @apply opacity-0;
     }
   }
@@ -179,29 +176,25 @@
 }
 
 /* Tab separator */
-.tabs__separator {
+.rp-tabs__separator {
   @apply pointer-events-none absolute rounded-sm bg-muted/25;
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition: opacity 150ms var(--ease-smooth);
   @apply motion-reduce:transition-none;
 
   /* Horizontal tabs - vertical separator */
-  .tabs__list[data-orientation="horizontal"] & {
+  .rp-tabs__list[data-orientation="horizontal"] & {
     @apply start-0 top-1/4 h-1/2 w-px;
   }
 
   /* Vertical tabs - horizontal separator */
-  .tabs__list[data-orientation="vertical"] & {
+  .rp-tabs__list[data-orientation="vertical"] & {
     @apply start-[5%] top-0 h-px w-[90%];
   }
 }
 
 /* Tab panel */
-.tabs__panel {
+.rp-tabs__panel {
   @apply w-full p-2 outline-none;
 
   /* Exiting animations */
@@ -220,7 +213,7 @@
 }
 
 /* Tab indicator - React Aria's SelectionIndicator */
-.tabs__indicator {
+.rp-tabs__indicator {
   @apply absolute start-0 top-0 size-full rounded-component bg-segment shadow-surface;
 
   z-index: -1;
@@ -232,10 +225,6 @@
     background-color: Highlight;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition-duration: 250ms;
   transition-property: translate, width, height;
   transition-timing-function: var(--ease-out-fluid);
@@ -246,24 +235,24 @@
    Secondary Variant
    ========================================================================== */
 
-.tabs--secondary {
+.rp-tabs--secondary {
   /* Container - flat, no pill. Underline on container (not list) so it stays
      stable when the inner list scrolls horizontally inside the ScrollShadow. */
-  > .tabs__list-container {
+  > .rp-tabs__list-container {
     @apply rounded-none bg-transparent;
 
     /* Tab list - remove padding */
-    .tabs__list {
+    .rp-tabs__list {
       @apply p-0;
     }
 
     /* Hide separators in secondary variant */
-    .tabs__separator {
+    .rp-tabs__separator {
       @apply hidden;
     }
 
     /* Tab - adjust for secondary variant */
-    .tabs__tab {
+    .rp-tabs__tab {
       @apply rounded-none;
 
       /* Selected state - use text-foreground */
@@ -280,7 +269,7 @@
     }
 
     /* Tab indicator - line style */
-    .tabs__indicator {
+    .rp-tabs__indicator {
       @apply rounded-none bg-accent shadow-none;
 
       /* `bg-accent` outranks the base rule's forced-colors fallback and is itself flattened
@@ -292,19 +281,19 @@
   }
 
   /* Horizontal orientation - bottom border + bottom line indicator */
-  &[data-orientation="horizontal"] > .tabs__list-container {
+  &[data-orientation="horizontal"] > .rp-tabs__list-container {
     @apply border-b border-border;
 
-    .tabs__indicator {
+    .rp-tabs__indicator {
       @apply top-auto bottom-0 h-0.5;
     }
   }
 
   /* Vertical orientation - left border + left line indicator */
-  &[data-orientation="vertical"] > .tabs__list-container {
+  &[data-orientation="vertical"] > .rp-tabs__list-container {
     @apply border-s border-border;
 
-    .tabs__indicator {
+    .rp-tabs__indicator {
       @apply start-0 top-0 h-full w-0.5;
     }
   }

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

@@ -1,73 +1,22 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const tagVariants: import("tailwind-variants").TVReturnType<{
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        default: {
-            base: string;
-        };
-        surface: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    removeButton: string;
-}, undefined, {
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        default: {
-            base: string;
-        };
-        surface: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    removeButton: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    size: {
-        lg: {
-            base: string;
-        };
-        md: {
-            base: string;
-        };
-        sm: {
-            base: string;
-        };
-    };
-    variant: {
-        default: {
-            base: string;
-        };
-        surface: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    removeButton: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const tagVariants: (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;
+} & {
+    size?: "lg" | "md" | "sm" | undefined;
+    variant?: "default" | "surface" | 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;
+    } & {
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "default" | "surface" | undefined;
+    }) | undefined) => string;
+    removeButton: (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;
+    } & {
+        size?: "lg" | "md" | "sm" | undefined;
+        variant?: "default" | "surface" | undefined;
+    }) | undefined) => string;
+};
 export type TagVariants = VariantProps<typeof tagVariants>;
 //# sourceMappingURL=tag.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tag.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tag/tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,WAAW;;QAWlB,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;QAEN,EAAE;YACA,IAAI;;;;QAIN,OAAO;YACL,IAAI;;QAEN,OAAO;YACL,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC"}
+{"version":3,"file":"tag.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tag/tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;CA8BtB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC"}

package/dist/components/tag/tag.styles.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/tag/tag.styles.ts
 const tagVariants = tv({
 	defaultVariants: {
@@ -6,18 +6,18 @@ const tagVariants = tv({
 		variant: "default"
 	},
 	slots: {
-		base: "tag",
-		removeButton: "tag__remove-button"
+		base: "rp-tag",
+		removeButton: "rp-tag__remove-button"
 	},
 	variants: {
 		size: {
-			lg: { base: "tag--lg" },
-			md: { base: "tag--md" },
-			sm: { base: "tag--sm" }
+			lg: { base: "rp-tag--lg" },
+			md: { base: "rp-tag--md" },
+			sm: { base: "rp-tag--sm" }
 		},
 		variant: {
-			default: { base: "tag--default" },
-			surface: { base: "tag--surface" }
+			default: { base: "rp-tag--default" },
+			surface: { base: "rp-tag--surface" }
 		}
 	}
 });

package/dist/components/tag-group/tag-group.styles.d.ts

@@ -1,34 +1,13 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const tagGroupVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            list?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {
-    [x: string]: {
-        [x: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            list?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    base: string;
-    list: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: {
-            base?: import("tailwind-variants").ClassValue;
-            list?: import("tailwind-variants").ClassValue;
-        } | import("tailwind-variants").ClassValue;
-    };
-} | {}, {
-    base: string;
-    list: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
-    base: string;
-    list: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const tagGroupVariants: (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) => {
+    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;
+    } & object) | undefined) => string;
+    list: (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 TagGroupVariants = VariantProps<typeof tagGroupVariants>;
 //# sourceMappingURL=tag-group.styles.d.ts.map

package/dist/components/tag-group/tag-group.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tag-group/tag-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAK3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"tag-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tag-group/tag-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,gBAAgB;;;;;;;;;CAK3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/tag-group/tag-group.styles.js

@@ -1,8 +1,8 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/tag-group/tag-group.styles.ts
 const tagGroupVariants = tv({ slots: {
-	base: "tag-group",
-	list: "tag-group__list"
+	base: "rp-tag-group",
+	list: "rp-tag-group__list"
 } });
 //#endregion
 export { tagGroupVariants };

package/dist/components/tag-group.css

@@ -1,15 +1,15 @@
 /* Base styles */
-.tag-group {
+.rp-tag-group {
   @apply relative flex flex-col gap-1;
 }
 
-.tag-group__list {
+.rp-tag-group__list {
   @apply relative flex flex-wrap gap-1.5;
 }
 
-.tag-group [slot="description"],
-.tag-group [data-slot="description"],
-.tag-group [slot="errorMessage"],
-.tag-group [data-slot="error-message"] {
+.rp-tag-group [slot="description"],
+.rp-tag-group [data-slot="description"],
+.rp-tag-group [slot="errorMessage"],
+.rp-tag-group [data-slot="error-message"] {
   @apply p-1;
 }

package/dist/components/tag.css

@@ -1,13 +1,22 @@
 /* Tag component styles */
-.tag {
+.rp-tag {
   --optical-offset: 0.031em;
 
-  @apply relative inline-flex items-center gap-1 rounded-xl font-medium select-none no-highlight;
+  @apply relative inline-flex items-center gap-1 font-medium select-none no-highlight;
+
+  border-radius: min(32px, var(--component-radius));
+
+  /* The fill and label, per state. The variants re-point these and declare nothing else. */
+  --tag-bg: transparent;
+  --tag-bg-hover: var(--tag-bg);
+  --tag-bg-selected: var(--accent-soft);
+  --tag-bg-selected-hover: var(--accent-soft-hover);
+  --tag-fg: currentcolor;
+  --tag-fg-selected: var(--accent-soft-foreground);
+
+  background-color: var(--tag-bg);
+  color: var(--tag-fg);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     color 100ms var(--ease-smooth),
     scale 100ms var(--ease-smooth),
@@ -28,6 +37,13 @@
     outline-offset: -1px;
   }
 
+  /* Hover state (when not selected or disabled) */
+  @media (hover: hover) {
+    &:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
+      background-color: var(--tag-bg-hover);
+    }
+  }
+
   /* SVG icon styling */
   & svg {
     @apply pointer-events-none size-3 shrink-0 self-center text-current;
@@ -35,70 +51,62 @@
 }
 
 /* Disabled state */
-.tag:is([data-disabled="true"], [aria-disabled="true"]) {
+.rp-tag:is([data-disabled="true"], [aria-disabled="true"]) {
   @apply status-disabled;
 }
 
 /* Focus visible state (keyboard focus only) */
-.tag:is(:focus-visible, [data-focus-visible]) {
+.rp-tag:is(:focus-visible, [data-focus-visible]) {
   @apply status-focused;
 }
 
 /* Pressed/Active state */
-.tag:is(:active, [data-pressed="true"]) {
+.rp-tag:is(:active, [data-pressed="true"]) {
 }
 
 /* Selected state */
-.tag:is([data-selected="true"], [aria-selected="true"]) {
-  @apply bg-accent-soft text-accent-soft-foreground;
+.rp-tag:is([data-selected="true"], [aria-selected="true"]) {
+  background-color: var(--tag-bg-selected);
+  color: var(--tag-fg-selected);
+
   @apply forced-selected;
 
   /* Selected + Hover state */
   @media (hover: hover) {
     &:is(:hover, [data-hovered="true"]) {
-      @apply bg-accent-soft-hover;
+      background-color: var(--tag-bg-selected-hover);
     }
   }
 }
 
 /* Size */
-.tag--sm {
+.rp-tag--sm {
   @apply px-2 py-0.5 text-xs;
 }
 
-.tag--md {
+.rp-tag--md {
   @apply px-2 py-1 text-xs;
 }
 
-.tag--lg {
-  @apply rounded-2xl px-2.5 py-1.5 text-sm;
+.rp-tag--lg {
+  @apply px-2.5 py-1.5 text-sm;
 }
 
 /* Variant */
-.tag--default {
-  @apply bg-default text-default-foreground;
-
-  /* Hover state (when not selected or disabled) */
-  @media (hover: hover) {
-    &:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
-      @apply bg-default-hover;
-    }
-  }
+.rp-tag--default {
+  --tag-bg: var(--default);
+  --tag-bg-hover: var(--default-hover);
+  --tag-fg: var(--default-foreground);
 }
 
-.tag--surface {
-  @apply bg-surface text-surface-foreground;
-
-  /* Hover state (when not selected or disabled) */
-  @media (hover: hover) {
-    &:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
-      @apply bg-surface-hover;
-    }
-  }
+.rp-tag--surface {
+  --tag-bg: var(--surface);
+  --tag-bg-hover: var(--surface-hover);
+  --tag-fg: var(--surface-foreground);
 }
 
 /* Remove Button  */
-.tag__remove-button {
+.rp-tag__remove-button {
   @apply size-3 text-inherit;
 
   /* SVG icon styling */