@ropav/styles 0.5.0 → 0.7.0

package/dist/components/switch.css

@@ -1,5 +1,5 @@
 /* Switch base styles */
-.switch {
+.rp-switch {
   @apply flex flex-col items-start gap-1 no-highlight;
 
   /* Cursor */
@@ -21,8 +21,8 @@
       @apply status-disabled;
     }
 
-    .switch__thumb {
-      @apply bg-default-foreground/20;
+    .rp-switch__thumb {
+      background-color: var(--switch-thumb-bg-disabled);
 
       @media (forced-colors: active) {
         background-color: GrayText;
@@ -39,19 +39,19 @@
     @apply w-full min-w-0 ps-[calc(2.5rem+0.75rem)] text-xs text-muted;
   }
 
-  &.switch--sm > [data-slot="description"] {
+  &.rp-switch--sm > [data-slot="description"] {
     @apply ps-[calc(2rem+0.75rem)];
   }
 
-  &.switch--sm > [data-slot="field-error"] {
+  &.rp-switch--sm > [data-slot="field-error"] {
     @apply ps-[calc(2rem+0.75rem)];
   }
 
-  &.switch--lg > [data-slot="description"] {
+  &.rp-switch--lg > [data-slot="description"] {
     @apply ps-[calc(3rem+0.75rem)];
   }
 
-  &.switch--lg > [data-slot="field-error"] {
+  &.rp-switch--lg > [data-slot="field-error"] {
     @apply ps-[calc(3rem+0.75rem)];
   }
 
@@ -62,38 +62,36 @@
   &[data-disabled="true"][data-selected="true"],
   &[aria-disabled="true"][aria-checked="true"],
   &[aria-disabled="true"][data-selected="true"] {
-    .switch__thumb {
+    .rp-switch__thumb {
       opacity: 0.4;
     }
   }
 }
 
 /* Size variants - default is medium */
-.switch--sm {
+.rp-switch--sm {
   /* Small size modifier */
 }
 
-.switch--md {
+.rp-switch--md {
   /* Medium size - no styles as this is the default */
 }
 
-.switch--lg {
+.rp-switch--lg {
   /* Large size modifier */
 }
 
 /* Switch control (track) */
-.switch__control {
+.rp-switch__control {
   /* Default size (medium) */
-  @apply relative flex shrink-0 items-center overflow-hidden rounded-xl;
+  @apply relative flex shrink-0 items-center overflow-hidden;
+
+  border-radius: min(32px, var(--component-radius));
   height: 1.25rem; /* 20px on desktop (14px base), 20px on mobile (16px base) - scales with font-size */
   width: 2.5rem; /* 35px on desktop, 40px on mobile - scales with font-size */
 
   background-color: var(--switch-control-bg);
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     background-color 250ms var(--ease-smooth),
     box-shadow 150ms var(--ease-out);
@@ -109,30 +107,30 @@
   }
 
   /* Focus states */
-  .switch:focus-visible &,
-  .switch:has([data-slot="switch-content"][data-focus-visible="true"]) &,
-  .switch [data-slot="switch-content"][data-focus-visible="true"] & {
+  .rp-switch:focus-visible &,
+  .rp-switch:has([data-slot="switch-content"][data-focus-visible="true"]) &,
+  .rp-switch [data-slot="switch-content"][data-focus-visible="true"] & {
     @apply status-focused;
   }
 
   /* Hover states */
-  .switch:hover &,
-  .switch:has([data-slot="switch-content"][data-hovered="true"]) &,
-  .switch [data-slot="switch-content"][data-hovered="true"] & {
+  .rp-switch:hover &,
+  .rp-switch:has([data-slot="switch-content"][data-hovered="true"]) &,
+  .rp-switch [data-slot="switch-content"][data-hovered="true"] & {
     background-color: var(--switch-control-bg-hover);
   }
 
   /* Pressed states */
-  .switch:active &,
-  .switch:has([data-slot="switch-content"][data-pressed="true"]) &,
-  .switch [data-slot="switch-content"][data-pressed="true"] & {
+  .rp-switch:active &,
+  .rp-switch:has([data-slot="switch-content"][data-pressed="true"]) &,
+  .rp-switch [data-slot="switch-content"][data-pressed="true"] & {
     background-color: var(--switch-control-bg-pressed);
     @apply motion-reduce:transform-none;
   }
 
   /* Checked states */
-  .switch[aria-checked="true"] &,
-  .switch[data-selected="true"] & {
+  .rp-switch[aria-checked="true"] &,
+  .rp-switch[data-selected="true"] & {
     background-color: var(--switch-control-bg-checked);
 
     @media (forced-colors: active) {
@@ -142,49 +140,56 @@
   }
 
   /* Checked + Hover states */
-  .switch[aria-checked="true"]:hover &,
-  .switch[data-selected="true"]:hover &,
-  .switch[aria-checked="true"][data-hovered="true"] &,
-  .switch[data-selected="true"][data-hovered="true"] &,
-  .switch:has([data-slot="switch-content"][data-hovered="true"])[data-selected="true"] & {
+  .rp-switch[aria-checked="true"]:hover &,
+  .rp-switch[data-selected="true"]:hover &,
+  .rp-switch[aria-checked="true"][data-hovered="true"] &,
+  .rp-switch[data-selected="true"][data-hovered="true"] &,
+  .rp-switch:has([data-slot="switch-content"][data-hovered="true"])[data-selected="true"] & {
     background-color: var(--switch-control-bg-checked-hover);
   }
 
   /* Checked + Pressed states */
-  .switch[aria-checked="true"]:active &,
-  .switch[data-selected="true"]:active &,
-  .switch[aria-checked="true"][data-pressed="true"] &,
-  .switch[data-selected="true"][data-pressed="true"] &,
-  .switch:has([data-slot="switch-content"][data-pressed="true"])[data-selected="true"] & {
+  .rp-switch[aria-checked="true"]:active &,
+  .rp-switch[data-selected="true"]:active &,
+  .rp-switch[aria-checked="true"][data-pressed="true"] &,
+  .rp-switch[data-selected="true"][data-pressed="true"] &,
+  .rp-switch:has([data-slot="switch-content"][data-pressed="true"])[data-selected="true"] & {
     background-color: var(--switch-control-bg-checked-hover);
   }
 }
 
 /* Switch content — the clickable label (control + label text) */
-.switch__content {
+.rp-switch__content {
   @apply relative inline-flex cursor-[inherit] items-center gap-3 text-sm font-medium text-foreground outline-none select-none no-highlight;
 }
 
 /* Size-specific control dimensions */
-.switch--sm .switch__control {
-  @apply rounded-lg;
+.rp-switch--sm .rp-switch__control {
   height: 1rem; /* ~14px on desktop, ~16px on mobile */
   width: 2rem; /* ~32px on desktop, ~36px on mobile */
 }
 
-.switch--md .switch__control {
+.rp-switch--md .rp-switch__control {
   /* No styles as this is the default size */
 }
 
-.switch--lg .switch__control {
+.rp-switch--lg .rp-switch__control {
   height: 1.5rem; /* ~21px on desktop, ~24px on mobile */
   width: 3rem; /* ~48px on desktop, ~56px on mobile */
 }
 
 /* Switch thumb */
-.switch__thumb {
+.rp-switch__thumb {
   /* Default size (medium) with margin-based positioning */
-  @apply ms-0.5 flex origin-center rounded-lg bg-white text-black shadow-field;
+  @apply ms-0.5 flex origin-center text-black shadow-field;
+
+  border-radius: min(32px, var(--component-radius));
+
+  --switch-thumb-bg: var(--white);
+  --switch-thumb-bg-selected: var(--accent-foreground);
+  --switch-thumb-bg-disabled: color-mix(in oklab, var(--default-foreground) 20%, transparent);
+
+  background-color: var(--switch-thumb-bg);
   height: 1rem; /* ~14px on desktop, ~16px on mobile */
   width: 1.375rem; /* ~19px on desktop, ~22px on mobile */
 
@@ -195,19 +200,17 @@
     color: Canvas;
   }
 
-  /**
-   * Transitions
-   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
-   */
   transition:
     margin 300ms var(--ease-out-fluid),
     background-color 200ms var(--ease-out);
   @apply motion-reduce:transition-none;
 
   /* Selected/checked state - use margin instead of translate */
-  .switch[aria-checked="true"] &,
-  .switch[data-selected="true"] & {
-    @apply ms-[calc(100%-1.5rem)] bg-accent-foreground text-accent;
+  .rp-switch[aria-checked="true"] &,
+  .rp-switch[data-selected="true"] & {
+    @apply ms-[calc(100%-1.5rem)] text-accent;
+
+    background-color: var(--switch-thumb-bg-selected);
     box-shadow:
       0px 0px 5px 0px rgb(0 0 0 / 0.02),
       0px 2px 10px 0px rgb(0 0 0 / 0.06),
@@ -219,54 +222,52 @@
     }
   }
 
-  .switch:active &,
-  .switch[data-pressed="true"] & {
+  .rp-switch:active &,
+  .rp-switch[data-pressed="true"] & {
   }
 }
 
 /* Size-specific thumb dimensions */
-.switch--sm .switch__thumb {
-  @apply rounded-md;
+.rp-switch--sm .rp-switch__thumb {
   height: 0.75rem; /* ~10.5px on desktop, ~12px on mobile */
   width: 1.03125rem; /* ~14.4px on desktop, ~16.5px on mobile - maintains 1.375:1 ratio */
 
   /* Small selected state positioning */
-  .switch[aria-checked="true"] &,
-  .switch[data-selected="true"] & {
+  .rp-switch[aria-checked="true"] &,
+  .rp-switch[data-selected="true"] & {
     @apply ms-[calc(100%-1.15625rem)];
   }
 }
 
-.switch--lg .switch__thumb {
-  @apply rounded-xl;
+.rp-switch--lg .rp-switch__thumb {
   height: 1.25rem; /* ~17.5px on desktop, ~20px on mobile */
   width: 1.71875rem; /* ~24px on desktop, ~27.5px on mobile - maintains 1.375:1 ratio */
 
   /* Large selected state positioning */
-  .switch[aria-checked="true"] &,
-  .switch[data-selected="true"] & {
+  .rp-switch[aria-checked="true"] &,
+  .rp-switch[data-selected="true"] & {
     @apply ms-[calc(100%-1.84375rem)];
   }
 }
 
 /* Switch thumb content container */
-.switch__thumb > * {
+.rp-switch__thumb > * {
   @apply flex size-full items-center justify-center;
 }
 
 /* Switch label */
-.switch__label {
+.rp-switch__label {
   @apply text-base font-medium text-foreground;
 }
 
-.switch [data-slot="label"] {
+.rp-switch [data-slot="label"] {
   @apply select-none;
 }
 
-.switch__content [data-slot="label"] {
+.rp-switch__content [data-slot="label"] {
   cursor: var(--cursor-interactive);
 }
 
-.switch [data-slot="description"] {
+.rp-switch [data-slot="description"] {
   @apply cursor-default select-none;
 }

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

@@ -1,80 +1,90 @@
-import type { VariantProps } from "tailwind-variants";
-export declare const tableVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    body: string;
-    cell: string;
-    column: string;
-    columnResizer: string;
-    content: string;
-    footer: string;
-    header: string;
-    loadMore: string;
-    loadMoreContent: string;
-    resizableContainer: string;
-    row: string;
-    scrollContainer: string;
-    sortableColumnHeader: string;
-    sortableColumnIndicator: string;
-}, undefined, {
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    body: string;
-    cell: string;
-    column: string;
-    columnResizer: string;
-    content: string;
-    footer: string;
-    header: string;
-    loadMore: string;
-    loadMoreContent: string;
-    resizableContainer: string;
-    row: string;
-    scrollContainer: string;
-    sortableColumnHeader: string;
-    sortableColumnIndicator: string;
-}, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        primary: {
-            base: string;
-        };
-        secondary: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    body: string;
-    cell: string;
-    column: string;
-    columnResizer: string;
-    content: string;
-    footer: string;
-    header: string;
-    loadMore: string;
-    loadMoreContent: string;
-    resizableContainer: string;
-    row: string;
-    scrollContainer: string;
-    sortableColumnHeader: string;
-    sortableColumnIndicator: string;
-}>>;
+import type { VariantProps } from "../../tv";
+export declare const tableVariants: (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?: "primary" | "secondary" | 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?: "primary" | "secondary" | 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?: "primary" | "secondary" | 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;
+    } & {
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    column: (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?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    columnResizer: (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?: "primary" | "secondary" | 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;
+    } & {
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    dropIndicator: (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?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    footer: (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?: "primary" | "secondary" | 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;
+    } & {
+        variant?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    loadMore: (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?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    loadMoreContent: (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?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    resizableContainer: (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?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    row: (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?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    scrollContainer: (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?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    sortableColumnHeader: (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?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+    sortableColumnIndicator: (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?: "primary" | "secondary" | undefined;
+    }) | undefined) => string;
+};
 type TableRenderPropsKeys = "isHovered" | "isFocused" | "isFocusVisible" | "isSelected" | "isDisabled" | "isDragging" | "isDropTarget" | "state";
 export type TableVariants = Omit<VariantProps<typeof tableVariants>, TableRenderPropsKeys>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAItD,eAAO,MAAM,aAAa;;QAuBpB,OAAO;YACL,IAAI;;QAEN,SAAS;YACP,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIV,CAAC;AAGH,KAAK,oBAAoB,GACrB,WAAW,GACX,WAAW,GACX,gBAAgB,GAChB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,OAAO,CAAC;AAEZ,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,EAAE,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAI7C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCxB,CAAC;AAGH,KAAK,oBAAoB,GACrB,WAAW,GACX,WAAW,GACX,gBAAgB,GAChB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,OAAO,CAAC;AAEZ,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,EAAE,oBAAoB,CAAC,CAAC"}

package/dist/components/table/table.styles.js

@@ -1,27 +1,29 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv.js";
 //#region src/components/table/table.styles.ts
 const tableVariants = tv({
 	defaultVariants: { variant: "primary" },
 	slots: {
-		base: "table-root",
-		body: "table__body",
-		cell: "table__cell",
-		column: "table__column",
-		columnResizer: "table__column-resizer",
-		content: "table__content",
-		footer: "table__footer",
-		header: "table__header",
-		loadMore: "table__load-more",
-		loadMoreContent: "table__load-more-content",
-		resizableContainer: "table__resizable-container",
-		row: "table__row",
-		scrollContainer: "table__scroll-container",
-		sortableColumnHeader: "table__sortable-column-header",
-		sortableColumnIndicator: "table__sortable-column-indicator"
+		base: "rp-table-root",
+		body: "rp-table__body",
+		cell: "rp-table__cell",
+		column: "rp-table__column",
+		columnResizer: "rp-table__column-resizer",
+		content: "rp-table__content",
+		/** Named but unstyled: the hook a caller's own rule attaches to. */
+		dropIndicator: "rp-table__drop-indicator",
+		footer: "rp-table__footer",
+		header: "rp-table__header",
+		loadMore: "rp-table__load-more",
+		loadMoreContent: "rp-table__load-more-content",
+		resizableContainer: "rp-table__resizable-container",
+		row: "rp-table__row",
+		scrollContainer: "rp-table__scroll-container",
+		sortableColumnHeader: "rp-table__sortable-column-header",
+		sortableColumnIndicator: "rp-table__sortable-column-indicator"
 	},
 	variants: { variant: {
-		primary: { base: "table-root--primary" },
-		secondary: { base: "table-root--secondary" }
+		primary: { base: "rp-table-root--primary" },
+		secondary: { base: "rp-table-root--secondary" }
 	} }
 });
 //#endregion