@womp/kookie-ui 0.20.0 → 0.22.0

package/src/components/select.css

@@ -1,4 +1,4 @@
-.rt-SelectTrigger {
+.kui-SelectTrigger {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -15,7 +15,7 @@
 
   /* Selected values use medium font weight */
   &:where(:not([data-placeholder])) {
-    & :where(.rt-SelectTriggerInner) {
+    & :where(.kui-SelectTriggerInner) {
       font-weight: var(--font-weight-medium);
     }
   }
@@ -26,13 +26,13 @@
   }
 }
 
-.rt-SelectTriggerInner {
+.kui-SelectTriggerInner {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.rt-SelectIcon {
+.kui-SelectIcon {
   flex-shrink: 0;
   margin-left: auto;
   width: var(--trigger-icon-size-default);
@@ -44,7 +44,7 @@
  * every item a BaseMenuItem, so the panel pads --panel-p-N and a row hugs its line. What is
  * left here is the select's own: the check mark's box and rich rows.
  */
-.rt-SelectContent {
+.kui-SelectContent {
   --scrollarea-scrollbar-vertical-margin-top: var(--base-menu-content-padding);
   --scrollarea-scrollbar-vertical-margin-bottom: var(--base-menu-content-padding);
   --scrollarea-scrollbar-horizontal-margin-left: var(--base-menu-content-padding);
@@ -52,7 +52,7 @@
 
   overflow: hidden;
   z-index: 200; /* Above dialogs (100) so select inside dialogs/sheets work */
-  background-color: var(--color-panel);
+  background-color: var(--color-surface);
   box-shadow: var(--shadow-5);
 
   &:where([data-side]) {
@@ -62,25 +62,25 @@
   }
 }
 
-.rt-SelectViewport {
+.kui-SelectViewport {
   box-sizing: border-box;
 
-  :where(.rt-SelectContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) & {
+  :where(.kui-SelectContent:has(.kui-ScrollAreaScrollbar[data-orientation='vertical'])) & {
     padding-right: var(--space-4);
   }
 }
 
 /* Rich content grows the row; the mark stays on the first line. */
-.rt-SelectItem:where(.rt-SelectItemRich) {
+.kui-SelectItem:where(.kui-SelectItemRich) {
   align-items: flex-start;
 
-  & :where(.rt-SelectItemIndicator) {
+  & :where(.kui-SelectItemIndicator) {
     bottom: auto;
     height: var(--base-menu-item-height);
   }
 }
 
-.rt-SelectItemIndicator {
+.kui-SelectItemIndicator {
   position: absolute;
   inset-inline-start: var(--base-menu-item-px);
   top: 0;
@@ -91,12 +91,12 @@
   justify-content: center;
 }
 
-.rt-SelectSeparator {
+.kui-SelectSeparator {
   height: var(--separator-height-thin);
 }
 
-.rt-SelectLabel {
-  color: var(--gray-a10);
+.kui-SelectLabel {
+  color: var(--neutral-a10);
 }
 
 /***************************************************************************************************
@@ -105,8 +105,8 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-SelectTrigger {
-  color: var(--gray-12);
+.kui-SelectTrigger {
+  color: var(--neutral-12);
   box-sizing: border-box;
   /* min-height, not height: a hard height clips text resized to 200%. */
   min-height: var(--select-trigger-height);
@@ -124,8 +124,8 @@
 }
 
 @breakpoints {
-  .rt-SelectTrigger {
-    &:where(.rt-r-size-1) {
+  .kui-SelectTrigger {
+    &:where(.kui-r-size-1) {
       --select-trigger-height: var(--control-height-1);
       --select-trigger-px: var(--control-px-1);
       --select-trigger-px-pill: var(--control-px-pill-1);
@@ -135,12 +135,12 @@
       letter-spacing: var(--letter-spacing-1);
       border-radius: var(--radius-control-1);
 
-      & :where(.rt-SelectIcon) {
+      & :where(.kui-SelectIcon) {
         width: var(--trigger-icon-size-1);
         height: var(--trigger-icon-size-1);
       }
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       --select-trigger-height: var(--control-height-2);
       --select-trigger-px: var(--control-px-2);
       --select-trigger-px-pill: var(--control-px-pill-2);
@@ -150,12 +150,12 @@
       letter-spacing: var(--letter-spacing-2);
       border-radius: var(--radius-control-2);
 
-      & :where(.rt-SelectIcon) {
+      & :where(.kui-SelectIcon) {
         width: var(--trigger-icon-size-2);
         height: var(--trigger-icon-size-2);
       }
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       --select-trigger-height: var(--control-height-3);
       --select-trigger-px: var(--control-px-3);
       --select-trigger-px-pill: var(--control-px-pill-3);
@@ -165,12 +165,12 @@
       letter-spacing: var(--letter-spacing-3);
       border-radius: var(--radius-control-3);
 
-      & :where(.rt-SelectIcon) {
+      & :where(.kui-SelectIcon) {
         width: var(--trigger-icon-size-3);
         height: var(--trigger-icon-size-3);
       }
     }
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       --select-trigger-height: var(--control-height-4);
       --select-trigger-px: var(--control-px-4);
       --select-trigger-px-pill: var(--control-px-pill-4);
@@ -180,7 +180,7 @@
       letter-spacing: var(--letter-spacing-4);
       border-radius: var(--radius-control-4);
 
-      & :where(.rt-SelectIcon) {
+      & :where(.kui-SelectIcon) {
         width: var(--trigger-icon-size-4);
         height: var(--trigger-icon-size-4);
       }
@@ -196,7 +196,7 @@
 
 /* raised */
 
-.rt-SelectTrigger:where(.rt-variant-raised) {
+.kui-SelectTrigger:where(.kui-variant-raised) {
   position: relative;
   top: var(--raised-elevation-offset);
   color: var(--accent-ink);
@@ -224,8 +224,8 @@
   }
 
   &:where(:disabled) {
-    color: var(--gray-a8);
-    background-color: var(--gray-a3);
+    color: var(--neutral-a8);
+    background-color: var(--neutral-a3);
     box-shadow: none;
     outline: none;
     cursor: default;
@@ -233,15 +233,15 @@
   }
 
   &:where([data-placeholder]) {
-    & :where(.rt-SelectTriggerInner) {
-      color: var(--gray-a10);
+    & :where(.kui-SelectTriggerInner) {
+      color: var(--neutral-a10);
     }
   }
 }
 
 /* soft */
 
-.rt-SelectTrigger:where(.rt-variant-soft) {
+.kui-SelectTrigger:where(.kui-variant-soft) {
   background-color: var(--accent-3);
   color: var(--accent-ink);
 
@@ -265,13 +265,13 @@
   }
 
   &:where(:disabled) {
-    color: var(--gray-a8);
-    background-color: var(--gray-a3);
+    color: var(--neutral-a8);
+    background-color: var(--neutral-a3);
     cursor: default;
   }
 
   &:where([data-placeholder]) {
-    & :where(.rt-SelectTriggerInner) {
+    & :where(.kui-SelectTriggerInner) {
       color: var(--accent-a11);
       opacity: 0.6;
       font-weight: var(--font-weight-regular);
@@ -281,13 +281,13 @@
 
 /* ghost */
 
-.rt-SelectTrigger:where(.rt-variant-ghost) {
+.kui-SelectTrigger:where(.kui-variant-ghost) {
   background-color: transparent;
   color: var(--accent-ink);
 
   &:where([data-placeholder]) {
-    & :where(.rt-SelectTriggerInner) {
-      color: var(--gray-a10);
+    & :where(.kui-SelectTriggerInner) {
+      color: var(--neutral-a10);
       font-weight: var(--font-weight-regular);
     }
   }
@@ -312,7 +312,7 @@
   }
 
   &:where(:disabled) {
-    color: var(--gray-a8);
+    color: var(--neutral-a8);
     background-color: transparent;
     cursor: default;
   }
@@ -320,7 +320,7 @@
 
 /* outline */
 
-.rt-SelectTrigger:where(.rt-variant-outline) {
+.kui-SelectTrigger:where(.kui-variant-outline) {
   box-shadow: inset 0 0 0 1px var(--accent-6);
   color: var(--accent-ink);
 
@@ -347,15 +347,15 @@
   }
 
   &:where(:disabled) {
-    color: var(--gray-a8);
-    box-shadow: inset 0 0 0 1px var(--gray-a7);
+    color: var(--neutral-a8);
+    box-shadow: inset 0 0 0 1px var(--neutral-a7);
     background-color: transparent;
     cursor: default;
   }
 
   &:where([data-placeholder]) {
-    & :where(.rt-SelectTriggerInner) {
-      color: var(--gray-a10);
+    & :where(.kui-SelectTriggerInner) {
+      color: var(--neutral-a10);
       font-weight: var(--font-weight-regular);
     }
   }
@@ -363,7 +363,7 @@
 
 /* surface */
 
-.rt-SelectTrigger:where(.rt-variant-surface) {
+.kui-SelectTrigger:where(.kui-variant-surface) {
   background-color: var(--accent-2);
   box-shadow: inset 0 0 0 1px var(--accent-6);
   color: var(--accent-ink);
@@ -391,28 +391,28 @@
   }
 
   &:where(:disabled) {
-    color: var(--gray-a8);
-    box-shadow: inset 0 0 0 1px var(--gray-a6);
-    background-color: var(--gray-a2);
+    color: var(--neutral-a8);
+    box-shadow: inset 0 0 0 1px var(--neutral-a6);
+    background-color: var(--neutral-a2);
     cursor: default;
   }
 
   &:where([data-placeholder]) {
-    & :where(.rt-SelectTriggerInner) {
-      color: var(--gray-a10);
+    & :where(.kui-SelectTriggerInner) {
+      color: var(--neutral-a10);
       font-weight: var(--font-weight-regular);
     }
   }
 }
 
 /* all disabled: a colour remap, never opacity, and the arrow cursor */
-.rt-SelectTrigger {
+.kui-SelectTrigger {
   &:where(:disabled) {
-    & :where(.rt-SelectIcon) {
-      color: var(--gray-a9);
+    & :where(.kui-SelectIcon) {
+      color: var(--neutral-a9);
     }
-    &:where([data-placeholder]) :where(.rt-SelectTriggerInner) {
-      color: var(--gray-a8);
+    &:where([data-placeholder]) :where(.kui-SelectTriggerInner) {
+      color: var(--neutral-a8);
       opacity: 1;
     }
   }
@@ -422,8 +422,8 @@
  * Invalid. Keyed on `aria-invalid`, which the `error` prop sets, so both paths style the same.
  * Only the border and the focus ring move; the fill stays the variant's.
  */
-.rt-SelectTrigger:where([aria-invalid='true']) {
-  &:where(:not(.rt-variant-raised)) {
+.kui-SelectTrigger:where([aria-invalid='true']) {
+  &:where(:not(.kui-variant-raised)) {
     box-shadow: inset 0 0 0 1px var(--red-6);
 
     @media (hover: hover) {
@@ -436,7 +436,7 @@
     }
   }
 
-  &:where(.rt-variant-raised) {
+  &:where(.kui-variant-raised) {
     box-shadow: var(--shadow-2), inset 0 0 0 1px var(--red-6);
 
     @media (hover: hover) {
@@ -452,20 +452,20 @@
 }
 
 /* Loading state styling */
-.rt-SelectLoadingIcon {
-  animation: rt-spin 1s linear infinite;
+.kui-SelectLoadingIcon {
+  animation: kui-spin 1s linear infinite;
 }
 
-.rt-SelectLoadingIconCircle {
-  animation: rt-dash 1.5s ease-in-out infinite;
+.kui-SelectLoadingIconCircle {
+  animation: kui-dash 1.5s ease-in-out infinite;
 }
 
-@keyframes rt-spin {
+@keyframes kui-spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
 
-@keyframes rt-dash {
+@keyframes kui-dash {
   0% {
     stroke-dasharray: 1, 150;
     stroke-dashoffset: 0;
@@ -482,7 +482,7 @@
 
 /* Forced colors support */
 @media (forced-colors: active) {
-  .rt-SelectTrigger:where([aria-invalid='true']) {
+  .kui-SelectTrigger:where([aria-invalid='true']) {
     border: 1px solid CanvasText;
   }
 }
@@ -493,45 +493,45 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-SelectItem:where([data-accent-color]) {
+.kui-SelectItem:where([data-accent-color]) {
   color: var(--accent-ink);
 }
-.rt-SelectItem:where([data-disabled]) {
-  color: var(--gray-a8);
+.kui-SelectItem:where([data-disabled]) {
+  color: var(--neutral-a8);
 }
 
-.rt-SelectSeparator {
-  background-color: var(--gray-a6);
+.kui-SelectSeparator {
+  background-color: var(--neutral-a6);
 }
 
 /* Muted text sits a step lower inside items */
-.rt-SelectItem :where(.rt-Text.rt-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
-  color: var(--gray-a10);
+.kui-SelectItem :where(.kui-Text.kui-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
+  color: var(--neutral-a10);
 }
 
 /* soft */
 
-.rt-SelectContent:where(.rt-variant-soft) {
-  & :where(.rt-SelectItem[data-highlighted]) {
+.kui-SelectContent:where(.kui-variant-soft) {
+  & :where(.kui-SelectItem[data-highlighted]) {
     background-color: var(--accent-a4);
 
     /* In soft variant, lift muted text a step while keeping the hierarchy */
-    & :where(.rt-Text.rt-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
-      color: var(--gray-11) !important;
+    & :where(.kui-Text.kui-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
+      color: var(--neutral-11) !important;
     }
   }
 }
 
 /* The highlight is solid when the system asks for more contrast. */
 @media (prefers-contrast: more) {
-  .rt-SelectContent:where(.rt-variant-soft) {
+  .kui-SelectContent:where(.kui-variant-soft) {
     /* Gray fills with step 12 through the solid tokens */
-    & :where(.rt-SelectItem[data-highlighted]) {
+    & :where(.kui-SelectItem[data-highlighted]) {
       background-color: var(--accent-solid);
       color: var(--accent-solid-contrast);
 
       /* Force all text elements to inherit hover color, including those with color="gray" */
-      & :where(.rt-Text) {
+      & :where(.kui-Text) {
         color: inherit !important;
       }
 

package/src/components/select.props.tsx

@@ -8,7 +8,7 @@ import type { PropDef } from '../props/prop-def.js';
 const sizes = ['1', '2', '3', '4'] as const;
 
 const selectRootPropDefs = {
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
+  size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
 };
@@ -16,7 +16,7 @@ const selectRootPropDefs = {
 const triggerVariants = ['raised', 'surface', 'soft', 'outline', 'ghost'] as const;
 
 const selectTriggerPropDefs = {
-  variant: { type: 'enum', className: 'rt-variant', values: triggerVariants, default: 'raised' },
+  variant: { type: 'enum', className: 'kui-variant', values: triggerVariants, default: 'raised' },
   error: { type: 'boolean' },
   loading: { type: 'boolean' },
   disabled: { type: 'boolean' },

package/src/components/select.tsx

@@ -7,7 +7,6 @@ import { Select as SelectPrimitive, ScrollArea as ScrollAreaPrimitive } from 'ra
 
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSize } from '../helpers/theme-size.js';
-import { marginPropDefs } from '../props/margin.props.js';
 import { ChevronDownIcon, ThickCheckIcon } from './icons.js';
 import {
   selectRootPropDefs,
@@ -17,7 +16,6 @@ import {
 import { useThemeContext, Theme } from './theme.js';
 import { useThumbSync } from '../hooks/use-thumb-sync.js';
 
-import type { MarginProps } from '../props/margin.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 
@@ -44,7 +42,6 @@ type SelectTriggerElement = React.ElementRef<typeof SelectPrimitive.Trigger>;
 type SelectTriggerOwnProps = GetPropDefTypes<typeof selectTriggerPropDefs>;
 interface SelectTriggerProps
   extends ComponentPropsWithout<typeof SelectPrimitive.Trigger, RemovedProps>,
-    MarginProps,
     SelectTriggerOwnProps {}
 const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>(
   (props, forwardedRef) => {
@@ -66,22 +63,31 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
       // Pass size prop def to allow it to be extracted
       { size: selectRootPropDefs.size },
       selectTriggerPropDefs,
-      marginPropDefs,
     );
 
 
+    // The props win when set; otherwise a caller's own aria-* (a form library's aria-invalid)
+    // stays, so both paths reach the accessibility tree and the CSS, as on TextField.
+    const {
+      'aria-invalid': ariaInvalid,
+      'aria-busy': ariaBusy,
+      'aria-disabled': ariaDisabled,
+      'aria-readonly': ariaReadOnly,
+    } = triggerProps;
+    const isInvalid = Boolean(error) || ariaInvalid === true || ariaInvalid === 'true';
     const ariaProps = React.useMemo(
       () => ({
-        'aria-invalid': error || undefined,
-        'aria-busy': loading || undefined,
-        'aria-disabled': disabled || undefined,
-        'aria-readonly': readOnly || undefined,
+        'aria-invalid': isInvalid ? true : ariaInvalid,
+        'aria-busy': loading || ariaBusy,
+        'aria-disabled': disabled || ariaDisabled,
+        'aria-readonly': readOnly || ariaReadOnly,
       }),
-      [error, loading, disabled, readOnly],
+      [isInvalid, ariaInvalid, loading, ariaBusy, disabled, ariaDisabled, readOnly, ariaReadOnly],
     );
 
     return (
-      <SelectPrimitive.Trigger asChild>
+      // `disabled` goes to Radix, which merges it with Root's and sets the native attribute.
+      <SelectPrimitive.Trigger asChild disabled={disabled}>
         <button
           data-accent-color={color}
           data-radius={radius}
@@ -90,14 +96,14 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
           {...triggerProps}
           {...ariaProps}
           ref={forwardedRef}
-          className={classNames('rt-reset', 'rt-SelectTrigger', className)}
+          className={classNames('kui-reset', 'kui-SelectTrigger', className)}
         >
-          <span className="rt-SelectTriggerInner">
+          <span className="kui-SelectTriggerInner">
             <SelectPrimitive.Value placeholder={placeholder}>{children}</SelectPrimitive.Value>
           </span>
           <SelectPrimitive.Icon asChild>
             {loading ? (
-              <div className="rt-SelectIcon rt-SelectLoadingIcon" aria-hidden="true">
+              <div className="kui-SelectIcon kui-SelectLoadingIcon" aria-hidden="true">
                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                   <circle
                     cx="8"
@@ -108,12 +114,12 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
                     strokeLinecap="round"
                     strokeDasharray="32"
                     strokeDashoffset="32"
-                    className="rt-SelectLoadingIconCircle"
+                    className="kui-SelectLoadingIconCircle"
                   />
                 </svg>
               </div>
             ) : (
-              <ChevronDownIcon className="rt-SelectIcon" />
+              <ChevronDownIcon className="kui-SelectIcon" />
             )}
           </SelectPrimitive.Icon>
         </button>
@@ -153,31 +159,31 @@ const SelectContent = React.forwardRef<SelectContentElement, SelectContentProps>
             asChild={false}
             ref={forwardedRef}
             className={classNames(
-              'rt-PopperContent',
-              'rt-BaseMenuContent',
-          'rt-variant-soft',
-              'rt-SelectContent',
+              'kui-PopperContent',
+              'kui-BaseMenuContent',
+          'kui-variant-soft',
+              'kui-SelectContent',
               className,
             )}
           >
-            <ScrollAreaPrimitive.Root type="auto" className="rt-ScrollAreaRoot">
+            <ScrollAreaPrimitive.Root type="auto" className="kui-ScrollAreaRoot">
               <SelectPrimitive.Viewport
                 asChild
-                className={classNames('rt-BaseMenuViewport', 'rt-SelectViewport')}
+                className={classNames('kui-BaseMenuViewport', 'kui-SelectViewport')}
               >
                 <ScrollAreaPrimitive.Viewport
                   ref={setThumbViewport}
-                  className="rt-ScrollAreaViewport"
+                  className="kui-ScrollAreaViewport"
                   style={{ overflowY: undefined }}
                 >
                   {children}
                 </ScrollAreaPrimitive.Viewport>
               </SelectPrimitive.Viewport>
               <ScrollAreaPrimitive.Scrollbar
-                className="rt-ScrollAreaScrollbar"
+                className="kui-ScrollAreaScrollbar"
                 orientation="vertical"
               >
-                <ScrollAreaPrimitive.Thumb className="rt-ScrollAreaThumb" />
+                <ScrollAreaPrimitive.Thumb className="kui-ScrollAreaThumb" />
               </ScrollAreaPrimitive.Scrollbar>
             </ScrollAreaPrimitive.Root>
           </SelectPrimitive.Content>
@@ -203,15 +209,15 @@ const SelectItem = React.forwardRef<SelectItemElement, SelectItemProps>((props,
       asChild={false}
       ref={forwardedRef}
       className={classNames(
-        'rt-reset',
-        'rt-BaseMenuItem',
-        'rt-SelectItem',
-        { 'rt-SelectItemRich': isRichContent },
+        'kui-reset',
+        'kui-BaseMenuItem',
+        'kui-SelectItem',
+        { 'kui-SelectItemRich': isRichContent },
         className,
       )}
     >
-      <SelectPrimitive.ItemIndicator className="rt-SelectItemIndicator">
-        <ThickCheckIcon className="rt-SelectItemIndicatorIcon" />
+      <SelectPrimitive.ItemIndicator className="kui-SelectItemIndicator">
+        <ThickCheckIcon className="kui-SelectItemIndicatorIcon" />
       </SelectPrimitive.ItemIndicator>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
@@ -228,7 +234,7 @@ const SelectGroup = React.forwardRef<SelectGroupElement, SelectGroupProps>(
       {...props}
       asChild={false}
       ref={forwardedRef}
-      className={classNames('rt-SelectGroup', className)}
+      className={classNames('kui-SelectGroup', className)}
     />
   ),
 );
@@ -243,7 +249,7 @@ const SelectLabel = React.forwardRef<SelectLabelElement, SelectLabelProps>(
       {...props}
       asChild={false}
       ref={forwardedRef}
-      className={classNames('rt-BaseMenuLabel', 'rt-SelectLabel', className)}
+      className={classNames('kui-BaseMenuLabel', 'kui-SelectLabel', className)}
     />
   ),
 );
@@ -258,7 +264,7 @@ const SelectSeparator = React.forwardRef<SelectSeparatorElement, SelectSeparator
       {...props}
       asChild={false}
       ref={forwardedRef}
-      className={classNames('rt-BaseMenuSeparator', 'rt-SelectSeparator', className)}
+      className={classNames('kui-BaseMenuSeparator', 'kui-SelectSeparator', className)}
     />
   ),
 );

package/src/components/separator.css

@@ -1,11 +1,11 @@
-.rt-Separator {
+.kui-Separator {
   /* Fills its container along its own axis, as in v2. */
   --separator-size: 100%;
   display: block;
   background-color: var(--accent-a5);
 }
 
-.rt-Separator:where(.rt-light) {
+.kui-Separator:where(.kui-light) {
   background-color: var(--accent-a3);
 }
 
@@ -16,12 +16,12 @@
  ***************************************************************************************************/
 
 @breakpoints {
-  .rt-Separator {
-    &:where(.rt-r-orientation-horizontal) {
+  .kui-Separator {
+    &:where(.kui-r-orientation-horizontal) {
       width: var(--separator-size);
       height: 1px;
     }
-    &:where(.rt-r-orientation-vertical) {
+    &:where(.kui-r-orientation-vertical) {
       width: 1px;
       height: var(--separator-size);
     }