@ropav/styles 0.6.0 → 0.7.0

package/README.md

@@ -2,13 +2,19 @@
 
 The style layer behind [`ropav`](https://www.npmjs.com/package/ropav): plain CSS for every component,
 themes, utilities, and custom variants, plus `tv()` variants that do nothing but map props to class names.
-Framework-agnostic — not a line of Vue or React in it. `dependencies` are `tailwind-variants` and
-`tw-animate-css`; the only peer is `tailwindcss`.
+Framework-agnostic — not a line of Vue or React in it. The only `dependency` is `tw-animate-css`;
+the only peer is `tailwindcss`.
+
+**[Theming guide](https://ropav.netlify.app/theming/)** ·
+[Tokens](https://ropav.netlify.app/theming/tokens) ·
+[Class names](https://ropav.netlify.app/theming/class-names) ·
+[State colors](https://ropav.netlify.app/theming/state-colors)
 
 ## Provenance
 
 A derivative work of [`@heroui/styles@3.2.4`](https://github.com/heroui-inc/heroui/tree/v3.2.4/packages/styles),
-vendored into this workspace so the style layer can be fixed in place. See the root [README](../../README.md).
+vendored into this workspace so the style layer can be fixed in place. See
+[`ropav`](https://www.npmjs.com/package/ropav) for the rest.
 
 ## Installation
 
@@ -34,7 +40,7 @@ That single line pulls in, in layer order (`theme, base, components, utilities`)
 
 - Tailwind CSS v4 and `tw-animate-css`
 - base styles and the scrollbar system
-- the component layer — 85 files, one per component
+- the component layer — 88 files, one per component
 - the default theme: tokens for light and dark
 - utilities and custom variants
 
@@ -59,7 +65,7 @@ That single line pulls in, in layer order (`theme, base, components, utilities`)
 ```ts
 import {buttonVariants, type ButtonVariants} from "@ropav/styles";
 
-buttonVariants({variant: "primary", size: "sm"}); // "button button--primary button--sm"
+buttonVariants({variant: "primary", size: "sm"}); // "rp-button rp-button--primary rp-button--sm"
 ```
 
 Every component also has its own subpath so bundlers can drop the rest:
@@ -73,7 +79,7 @@ packages/styles/
 ├── base/
 │   ├── base.css           # Layout tokens, typography, resets
 │   └── scrollbar.css      # Scrollbar system
-├── components/            # 85 CSS files, one per component
+├── components/            # 88 CSS files, one per component
 ├── themes/
 │   ├── default.css        # Default theme — hand-written, light and dark token sets
 │   ├── sky.css … rabbit.css  # Ten more themes — generated, do not edit
@@ -88,22 +94,31 @@ packages/styles/
 
 ## Class naming
 
-BEM, so a class can be read without looking it up:
+Prefixed BEM, so a class can be read without looking it up and belongs to nobody else:
 
-- **Block** — the component itself: `.button`, `.card`, `.alert`
-- **Modifier** — a variation, double dash: `.button--primary`, `.button--lg`, `.button--icon-only`
-- **Element** — a part of the component, double underscore: `.card__header`, `.alert__icon`
+- **Prefix** — `rp-`, on every class the component layer defines
+- **Block** — the component itself: `.rp-button`, `.rp-card`, `.rp-alert`
+- **Modifier** — a variation, double dash: `.rp-button--primary`, `.rp-button--lg`, `.rp-button--icon-only`
+- **Element** — a part of the component, double underscore: `.rp-card__header`, `.rp-alert__icon`
 
 ```html
-<button class="button">Click me</button>
-<button class="button button--primary">Save</button>
-<button class="button button--primary button--sm">Small primary</button>
+<button class="rp-button">Click me</button>
+<button class="rp-button rp-button--primary">Save</button>
+<button class="rp-button rp-button--primary rp-button--sm">Small primary</button>
 ```
 
+**The prefix is not decoration.** Component rules live in the `components` layer and a host app's
+CSS is usually unlayered, so the host wins every property it declares — and what leaks onto it is
+every property it never mentioned. A host element wearing a bare `menu` or `card` would inherit
+half a component and no error anywhere. `rp-` is what stops the library from claiming names it does
+not own; keyframes and `view-transition-class` names carry it for the same reason, being
+document-global too. `tests/styles/class-prefix.test.ts` in `ropav` fails on any that does not.
+
 Two conventions the whole layer relies on:
 
-**Default size lives in the base class.** `.button` already renders at the `--md` size, so `.button--md` is an
-empty rule with a comment saying why. A component with no size modifier never looks broken.
+**Default size lives in the base class.** `.rp-button` already renders at the `--md` size, so
+`.rp-button--md` is an empty rule with a comment saying why. A component with no size modifier
+never looks broken.
 
 **State keys on `data-*`, with a pseudo-class fallback.** Interactive rules are written as
 `&:hover, &[data-hovered="true"]`, `&:active, &[data-pressed="true"]`, `&:focus-visible,
@@ -112,10 +127,12 @@ component that publishes it as an attribute.
 
 `components/button.css` is the densest example of both — read it before writing a new component file.
 
-**Every `ropav` component takes a `class` prop**, merged through its `tv()` recipe rather than
-concatenated, so a utility that conflicts with one the recipe already carries replaces it. That is
-the first thing to reach for. It cannot reach a part drawn in `::before`/`::after`, and it flattens
-every state of whatever property it sets — see [State colors](#state-colors) for the way round both.
+**Every `ropav` component takes a `class` prop**, appended to the classes its `tv()` recipe
+carries. A utility passed that way wins on cascade order alone — component rules live in the
+`components` layer, utilities in the later `utilities` one — so nothing has to be stripped for it
+to take effect. That is the first thing to reach for. It cannot reach a part drawn in
+`::before`/`::after`, and it flattens every state of whatever property it sets — see
+[State colors](#state-colors) for the way round both.
 
 ## Theming
 
@@ -226,7 +243,7 @@ So a caller sets the property instead, and the states that read the others are l
 
 ```html
 <!-- No line at rest; it still flares on hover and while dragging. -->
-<SidebarRoot class="[--sidebar-rail-line:transparent]">
+<Sidebar class="[--sidebar-rail-line:transparent]">
 ```
 
 The qualifier is what keeps this from becoming surface for its own sake. Where exactly one state

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

@@ -1,53 +1,50 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const accordionVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: {};
-        surface: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    body: string;
-    bodyInner: string;
-    heading: string;
-    indicator: string;
-    item: string;
-    panel: string;
-    trigger: string;
-}, undefined, {
-    variant: {
-        default: {};
-        surface: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    body: string;
-    bodyInner: string;
-    heading: string;
-    indicator: string;
-    item: string;
-    panel: string;
-    trigger: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        default: {};
-        surface: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    body: string;
-    bodyInner: string;
-    heading: string;
-    indicator: string;
-    item: string;
-    panel: string;
-    trigger: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const accordionVariants: (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;
+} & {
+    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;
+    } & {
+        variant?: "default" | "surface" | undefined;
+    }) | undefined) => string;
+    body: (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;
+    } & {
+        variant?: "default" | "surface" | undefined;
+    }) | undefined) => string;
+    bodyInner: (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;
+    } & {
+        variant?: "default" | "surface" | 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;
+    } & {
+        variant?: "default" | "surface" | undefined;
+    }) | undefined) => string;
+    indicator: (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;
+    } & {
+        variant?: "default" | "surface" | undefined;
+    }) | undefined) => string;
+    item: (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;
+    } & {
+        variant?: "default" | "surface" | undefined;
+    }) | undefined) => string;
+    panel: (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;
+    } & {
+        variant?: "default" | "surface" | undefined;
+    }) | undefined) => string;
+    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;
+    } & {
+        variant?: "default" | "surface" | undefined;
+    }) | undefined) => string;
+};
 type DisclosureRenderPropsKeys = "isExpanded" | "isDisabled" | "state";
 export type AccordionVariants = Omit<VariantProps<typeof accordionVariants>, DisclosureRenderPropsKeys>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.styles.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,iBAAiB;;QAaxB,OAAO;QACP,OAAO;YACL,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAGH,KAAK,yBAAyB,GAAG,YAAY,GAAG,YAAY,GAAG,OAAO,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,YAAY,CAAC,OAAO,iBAAiB,CAAC,EACtC,yBAAyB,CAC1B,CAAC"}
+{"version":3,"file":"accordion.styles.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmB5B,CAAC;AAGH,KAAK,yBAAyB,GAAG,YAAY,GAAG,YAAY,GAAG,OAAO,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,YAAY,CAAC,OAAO,iBAAiB,CAAC,EACtC,yBAAyB,CAC1B,CAAC"}

package/dist/components/accordion/accordion.styles.js

@@ -1,19 +1,19 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/accordion/accordion.styles.ts
 const accordionVariants = tv({
 	slots: {
-		base: "accordion",
-		body: "accordion__body",
-		bodyInner: "accordion__body-inner",
-		heading: "accordion__heading",
-		indicator: "accordion__indicator",
-		item: "accordion__item",
-		panel: "accordion__panel",
-		trigger: "accordion__trigger"
+		base: "rp-accordion",
+		body: "rp-accordion__body",
+		bodyInner: "rp-accordion__body-inner",
+		heading: "rp-accordion__heading",
+		indicator: "rp-accordion__indicator",
+		item: "rp-accordion__item",
+		panel: "rp-accordion__panel",
+		trigger: "rp-accordion__trigger"
 	},
 	variants: { variant: {
 		default: {},
-		surface: { base: "accordion--surface" }
+		surface: { base: "rp-accordion--surface" }
 	} }
 });
 //#endregion

package/dist/components/accordion.css

@@ -1,5 +1,5 @@
 /* Base accordion styles */
-.accordion {
+.rp-accordion {
   @apply w-full;
 
   /* Performance optimization - contain layout changes */
@@ -7,19 +7,19 @@
 }
 
 /* Accordion elements */
-.accordion__body {
+.rp-accordion__body {
   @apply text-sm;
 }
 
-.accordion__body-inner {
+.rp-accordion__body-inner {
   @apply px-4 pt-0 pb-4 text-muted;
 }
 
-.accordion__heading {
+.rp-accordion__heading {
   @apply flex;
 }
 
-.accordion__indicator {
+.rp-accordion__indicator {
   @apply ms-auto size-4 shrink-0 text-muted;
 
   /**
@@ -34,26 +34,26 @@
 }
 
 /* Accordion Item - Separator styles */
-.accordion__item {
+.rp-accordion__item {
   @apply relative border-none;
 }
 
-.accordion__item::after {
+.rp-accordion__item::after {
   content: "";
   @apply absolute start-0 bottom-0 h-px w-full rounded-xs bg-separator;
 }
 
-.accordion__item:last-child::after {
+.rp-accordion__item:last-child::after {
   content: none;
 }
 
 /* Hide separator when hideSeparator prop is set */
-.accordion__item[data-hide-separator="true"]::after {
+.rp-accordion__item[data-hide-separator="true"]::after {
   display: none;
 }
 /* ------------------------------------ */
 
-.accordion__trigger {
+.rp-accordion__trigger {
   cursor: var(--cursor-interactive);
 
   /* Base Styles */
@@ -89,7 +89,7 @@
   }
 }
 
-.accordion__panel {
+.rp-accordion__panel {
   opacity: 0;
   height: var(--disclosure-panel-height);
   overflow: clip;
@@ -106,7 +106,7 @@
 }
 
 /* Surface variant */
-.accordion--surface {
+.rp-accordion--surface {
   @apply bg-surface;
   border-radius: min(32px, var(--component-radius));
 
@@ -117,7 +117,7 @@
     outline-offset: -1px;
   }
 
-  .accordion__trigger {
+  .rp-accordion__trigger {
     @media (hover: hover) {
       &:hover:not([aria-expanded="true"]),
       &[data-hovered="true"]:not([aria-expanded="true"]) {
@@ -126,12 +126,12 @@
     }
   }
 
-  .accordion__item::after {
+  .rp-accordion__item::after {
     @apply bg-surface-foreground/6;
   }
 }
 
-.accordion--surface .accordion__item {
+.rp-accordion--surface .rp-accordion__item {
   /* Surface variant separator styling */
   &::after {
     @apply start-[3%] w-[94%];

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

@@ -1,76 +1,34 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const alertVariants: import("tailwind-variants").TVReturnType<{
-    status: {
-        accent: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        default: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    description: string;
-    indicator: string;
-    title: string;
-}, undefined, {
-    status: {
-        accent: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        default: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    description: string;
-    indicator: string;
-    title: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    status: {
-        accent: {
-            base: string;
-        };
-        danger: {
-            base: string;
-        };
-        default: {
-            base: string;
-        };
-        success: {
-            base: string;
-        };
-        warning: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    content: string;
-    description: string;
-    indicator: string;
-    title: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const alertVariants: (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;
+} & {
+    status?: "accent" | "danger" | "default" | "success" | "warning" | 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;
+    } & {
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+    }) | undefined) => string;
+    content: (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;
+    } & {
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+    }) | undefined) => string;
+    description: (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;
+    } & {
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+    }) | undefined) => string;
+    indicator: (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;
+    } & {
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+    }) | undefined) => string;
+    title: (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;
+    } & {
+        status?: "accent" | "danger" | "default" | "success" | "warning" | undefined;
+    }) | undefined) => string;
+};
 export type AlertVariants = VariantProps<typeof alertVariants>;
 //# sourceMappingURL=alert.styles.d.ts.map

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

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

package/dist/components/alert/alert.styles.js

@@ -1,20 +1,20 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/alert/alert.styles.ts
 const alertVariants = tv({
 	defaultVariants: { status: "default" },
 	slots: {
-		base: "alert",
-		content: "alert__content",
-		description: "alert__description",
-		indicator: "alert__indicator",
-		title: "alert__title"
+		base: "rp-alert",
+		content: "rp-alert__content",
+		description: "rp-alert__description",
+		indicator: "rp-alert__indicator",
+		title: "rp-alert__title"
 	},
 	variants: { status: {
-		accent: { base: "alert--accent" },
-		danger: { base: "alert--danger" },
-		default: { base: "alert--default" },
-		success: { base: "alert--success" },
-		warning: { base: "alert--warning" }
+		accent: { base: "rp-alert--accent" },
+		danger: { base: "rp-alert--danger" },
+		default: { base: "rp-alert--default" },
+		success: { base: "rp-alert--success" },
+		warning: { base: "rp-alert--warning" }
 	} }
 });
 //#endregion