@womp/kookie-ui 0.21.0 → 0.22.1

package/src/components/button.css

@@ -9,31 +9,31 @@
 
 @import './_internal/base-button.css';
 
-.rt-Button:where(:not([data-icon-only])) {
+.kui-Button:where(:not([data-icon-only])) {
   font-weight: var(--font-weight-medium);
 }
 
 @breakpoints {
-  .rt-Button:where(:not([data-icon-only])) {
-    &:where(.rt-r-size-1) {
+  .kui-Button:where(:not([data-icon-only])) {
+    &:where(.kui-r-size-1) {
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
     }
 
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
     }
 
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
     }
 
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       font-size: var(--font-size-4);
       line-height: var(--line-height-4);
       letter-spacing: var(--letter-spacing-4);

package/src/components/button.tsx

@@ -163,7 +163,7 @@ const Button = React.forwardRef(
         {...tooltipAccessibilityProps}
         ref={forwardedRef}
         data-icon-only={iconOnly || undefined}
-        className={classNames('rt-Button', className)}
+        className={classNames('kui-Button', className)}
         style={style}
       />
     );

package/src/components/card.css

@@ -4,11 +4,11 @@
 /* Disable selector-max-type rule to target `button` and `a` tags. */
 /* Make sure these tags are wrapped in `:where()` for 0 specificity. */
 
-.rt-Card {
+.kui-Card {
   --base-card-border-width: var(--card-border-width);
 
   /*
-   * A Card is a nesting surface (rt-SurfaceNest, tokens/radius.css): it pads by its own
+   * A Card is a nesting surface (kui-SurfaceNest, tokens/radius.css): it pads by its own
    * --kui-sf-p and draws --kui-sf-r, which inside another surface is the outer corner minus
    * the outer padding, so a Card in a Card stays concentric.
    */
@@ -32,3 +32,17 @@
     }
   }
 }
+
+/*
+ * A CHOSEN card: a card that holds a checked Checkbox or Radio reads as picked, as in v2, so a
+ * Card holding a choice replaces CheckboxCards and RadioCards. Only the card's own control
+ * counts as a checkbox or radio; a Card holding a whole form of them is a form, not a choice.
+ */
+.kui-Card:where(:has(:is([role='checkbox'], [role='radio'])[data-state='checked'], input:is([type='checkbox'], [type='radio']):checked)) {
+  &::before {
+    background-image: linear-gradient(var(--accent-a2), var(--accent-a2));
+  }
+  &::after {
+    box-shadow: inset 0 0 0 1px var(--accent-a8);
+  }
+}

package/src/components/card.props.tsx

@@ -8,8 +8,8 @@ const variants = ['raised', 'surface', 'outline', 'ghost', 'soft'] as const;
 const cardPropDefs = {
   ...asChildPropDef,
   /** Padding --surface-p-N and corner --radius-surface-N. Unset, it follows the Theme size. */
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
+  size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'raised' },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;

package/src/components/card.tsx

@@ -22,7 +22,7 @@ const Card = React.forwardRef<CardElement, CardProps>((ownProps, forwardedRef) =
     <Comp
       ref={forwardedRef}
       {...cardProps}
-      className={classNames('rt-reset', 'rt-BaseCard', 'rt-Card', 'rt-SurfaceNest', className)}
+      className={classNames('kui-reset', 'kui-BaseCard', 'kui-Card', 'kui-SurfaceNest', className)}
     />
   );
 });

package/src/components/chatbar.css

@@ -1,13 +1,13 @@
 /* stylelint-disable selector-max-specificity */
 /* Container */
-.rt-ChatbarField {
+.kui-ChatbarField {
   position: relative;
   width: 100%;
   min-width: 0;
 }
 
 /* Defaults */
-.rt-ChatbarRoot {
+.kui-ChatbarRoot {
   --chatbar-item-lead: var(--space-6);
   --chatbar-item-lead-radius: var(--radius-2);
   --chatbar-item-padding: var(--space-2);
@@ -18,7 +18,7 @@
 }
 
 /* Unstyled textarea (reset) */
-.rt-ChatbarInput {
+.kui-ChatbarInput {
   display: block;
   width: 100%;
   min-width: 0;
@@ -33,16 +33,16 @@
   line-height: inherit;
   text-align: start;
 }
-.rt-ChatbarInput:focus,
-.rt-ChatbarInput:focus-visible {
+.kui-ChatbarInput:focus,
+.kui-ChatbarInput:focus-visible {
   outline: none;
 }
-.rt-ChatbarInput::selection {
+.kui-ChatbarInput::selection {
   background-color: var(--v-selection-color, var(--focus-a5));
 }
 
 /* Main container - flex layout */
-.rt-ChatbarBox :where(.rt-ChatbarGrid) {
+.kui-ChatbarBox :where(.kui-ChatbarGrid) {
   display: flex;
   flex-direction: column;
   gap: var(--space-5);
@@ -50,20 +50,20 @@
 }
 
 /* Compact state - horizontal flex */
-.rt-ChatbarRoot:where([data-state='closed']) :where(.rt-ChatbarGrid) {
+.kui-ChatbarRoot:where([data-state='closed']) :where(.kui-ChatbarGrid) {
   flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
 }
 
 /* In compact mode, keep attachments on a dedicated row above inline content */
-.rt-ChatbarRoot:where([data-state='closed']) :where(.rt-ChatbarAttachmentsRow) {
+.kui-ChatbarRoot:where([data-state='closed']) :where(.kui-ChatbarAttachmentsRow) {
   flex-basis: 100%;
   order: -1;
 }
 
 /* Textarea flex behavior */
-.rt-ChatbarTextarea {
+.kui-ChatbarTextarea {
   flex: 1;
   min-width: 0;
 }
@@ -71,46 +71,46 @@
 /* Send button - extend button transition with opacity for visibility fade */
 
 /* Hidden send button stays invisible even when disabled styling applies */
-.rt-ChatbarSend[aria-hidden='true'] {
+.kui-ChatbarSend[aria-hidden='true'] {
   opacity: 0;
   pointer-events: none;
 }
 
 /* Row visibility and layout */
-.rt-ChatbarRoot:where([data-state='closed']) :where(.rt-ChatbarRow) {
+.kui-ChatbarRoot:where([data-state='closed']) :where(.kui-ChatbarRow) {
   display: none;
 }
-.rt-ChatbarRoot:where([data-state='open']) :where(.rt-ChatbarRow) {
+.kui-ChatbarRoot:where([data-state='open']) :where(.kui-ChatbarRow) {
   display: block;
   width: 100%;
 }
 
 /* Attachments row */
-.rt-ChatbarAttachmentsRow {
+.kui-ChatbarAttachmentsRow {
   /* ScrollArea needs a defined width to enable scrolling */
   width: 100%;
 }
 
 /* ScrollArea follows the attachments radius */
-.rt-ChatbarScrollArea {
+.kui-ChatbarScrollArea {
   border-radius: var(--chatbar-attachments-radius);
 }
 
 /* Thin scrollbar (shown on hover) so overflowed attachments stay reachable with a mouse */
-.rt-ChatbarScrollArea :where(.rt-ScrollAreaScrollbar[data-orientation='horizontal']) {
+.kui-ChatbarScrollArea :where(.kui-ScrollAreaScrollbar[data-orientation='horizontal']) {
   --scrollarea-scrollbar-size: 3px;
 }
 
 /*
  * Attachments and items are one pill: a lead tile (thumbnail or tinted icon),
  * a label and a remove button. A custom `renderAttachment` keeps only the
- * plain .rt-ChatbarAttachment hook.
+ * plain .kui-ChatbarAttachment hook.
  */
-.rt-ChatbarAttachment {
+.kui-ChatbarAttachment {
   position: relative;
 }
 
-.rt-ChatbarItem {
+.kui-ChatbarItem {
   display: inline-flex;
   align-items: center;
   gap: var(--space-3);
@@ -119,18 +119,18 @@
   max-width: 240px;
   padding: var(--chatbar-item-padding);
   padding-right: calc(var(--chatbar-item-padding) + var(--space-2));
-  border: 1px solid var(--gray-a5);
+  border: 1px solid var(--neutral-a5);
   border-radius: calc(var(--chatbar-item-lead-radius) + var(--chatbar-item-padding));
-  background-color: var(--color-panel-solid);
-  box-shadow: 0 1px 2px var(--gray-a3);
-  color: var(--gray-12);
+  background-color: var(--color-surface);
+  box-shadow: 0 1px 2px var(--neutral-a3);
+  color: var(--neutral-12);
 }
 
-.rt-ChatbarItem:where([data-status='error']) {
+.kui-ChatbarItem:where([data-status='error']) {
   border-color: var(--red-a7);
 }
 
-.rt-ChatbarItemLead {
+.kui-ChatbarItemLead {
   height: var(--chatbar-item-lead);
   width: var(--chatbar-item-lead);
   flex-shrink: 0;
@@ -149,28 +149,28 @@
   }
 
   &:where([data-kind='image']) {
-    background: var(--gray-a3);
+    background: var(--neutral-a3);
   }
 }
 
 /* An attachment's file icon and spinner stay neutral */
-.rt-ChatbarAttachment .rt-ChatbarItemLead:where([data-kind='icon']) {
-  background: var(--gray-a3);
-  color: var(--gray-11);
+.kui-ChatbarAttachment .kui-ChatbarItemLead:where([data-kind='icon']) {
+  background: var(--neutral-a3);
+  color: var(--neutral-11);
 }
 
-.rt-ChatbarAttachmentImage {
+.kui-ChatbarAttachmentImage {
   width: 100%;
   height: 100%;
   object-fit: cover;
   max-width: none;
 }
 
-.rt-ChatbarItemLabel {
+.kui-ChatbarItemLabel {
   min-width: 0;
 }
 
-.rt-ChatbarItemRemove {
+.kui-ChatbarItemRemove {
   /* A hosted control: as tall as the lead tile, so a pill with × is as tall as one without. */
   --base-button-height: var(--chatbar-item-lead);
   flex-shrink: 0;
@@ -178,18 +178,18 @@
 }
 
 @breakpoints {
-  .rt-ChatbarRoot {
-    &:where(.rt-r-size-1) {
+  .kui-ChatbarRoot {
+    &:where(.kui-r-size-1) {
       --chatbar-item-lead: var(--space-5);
       --chatbar-item-lead-radius: var(--radius-1);
       --chatbar-item-padding: var(--space-2);
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       --chatbar-item-lead: var(--space-6);
       --chatbar-item-lead-radius: var(--radius-2);
       --chatbar-item-padding: var(--space-2);
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       --chatbar-item-lead: calc(var(--space-6) + var(--space-2));
       --chatbar-item-lead-radius: var(--radius-2);
       --chatbar-item-padding: calc(var(--space-2) * 1.5);
@@ -200,7 +200,7 @@
 /* Text components handle styling, no custom classes needed */
 
 /* Chatbar visual shell mirrors TextAreaRoot */
-.rt-ChatbarBox {
+.kui-ChatbarBox {
   box-sizing: border-box;
   width: 100%;
   /* Padding is applied per size below to match Card spacing */
@@ -209,32 +209,32 @@
 
 /* Sizes (padding and radius via tokens) */
 @breakpoints {
-  .rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarBox {
+  .kui-ChatbarRoot:where(.kui-r-size-1) .kui-ChatbarBox {
     /* Map Chatbar size 1 to Card size 2 */
     border-radius: var(--radius-surface-2);
     padding: var(--space-4);
   }
-  .rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarInput {
+  .kui-ChatbarRoot:where(.kui-r-size-1) .kui-ChatbarInput {
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
   }
-  .rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarBox {
+  .kui-ChatbarRoot:where(.kui-r-size-2) .kui-ChatbarBox {
     /* Map Chatbar size 2 to Card size 3 */
     border-radius: var(--radius-surface-3);
     padding: var(--space-5);
   }
-  .rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarInput {
+  .kui-ChatbarRoot:where(.kui-r-size-2) .kui-ChatbarInput {
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
   }
-  .rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarBox {
+  .kui-ChatbarRoot:where(.kui-r-size-3) .kui-ChatbarBox {
     /* Custom Chatbar size 3, different to Card size 4 */
     border-radius: var(--radius-surface-3);
     padding: var(--space-5);
   }
-  .rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarInput {
+  .kui-ChatbarRoot:where(.kui-r-size-3) .kui-ChatbarInput {
     font-size: var(--font-size-3);
     line-height: var(--line-height-3);
     letter-spacing: var(--letter-spacing-3);
@@ -243,26 +243,26 @@
 
 /* Only enforce min-height when expanded */
 @breakpoints {
-  .rt-ChatbarRoot:where([data-state='open'].rt-r-size-1) .rt-ChatbarBox {
+  .kui-ChatbarRoot:where([data-state='open'].kui-r-size-1) .kui-ChatbarBox {
     min-height: var(--space-9);
   }
-  .rt-ChatbarRoot:where([data-state='open'].rt-r-size-2) .rt-ChatbarBox {
+  .kui-ChatbarRoot:where([data-state='open'].kui-r-size-2) .kui-ChatbarBox {
     min-height: var(--space-10);
   }
-  .rt-ChatbarRoot:where([data-state='open'].rt-r-size-3) .rt-ChatbarBox {
+  .kui-ChatbarRoot:where([data-state='open'].kui-r-size-3) .kui-ChatbarBox {
     min-height: 80px;
   }
 }
 
 /* Reduced radius when collapsed (scale down by 1) */
 @breakpoints {
-  .rt-ChatbarRoot:where([data-state='closed'].rt-r-size-1) .rt-ChatbarBox {
+  .kui-ChatbarRoot:where([data-state='closed'].kui-r-size-1) .kui-ChatbarBox {
     border-radius: var(--radius-surface-1);
   }
-  .rt-ChatbarRoot:where([data-state='closed'].rt-r-size-2) .rt-ChatbarBox {
+  .kui-ChatbarRoot:where([data-state='closed'].kui-r-size-2) .kui-ChatbarBox {
     border-radius: var(--radius-surface-2);
   }
-  .rt-ChatbarRoot:where([data-state='closed'].rt-r-size-3) .rt-ChatbarBox {
+  .kui-ChatbarRoot:where([data-state='closed'].kui-r-size-3) .kui-ChatbarBox {
     border-radius: var(--radius-surface-2);
   }
 }
@@ -277,7 +277,7 @@
  ***************************************************************************************************/
 
 /* Soft variant palette */
-.rt-ChatbarBox:where(.rt-variant-soft) {
+.kui-ChatbarBox:where(.kui-variant-soft) {
   --text-area-border-width: 0px;
   --v-selection-color: var(--accent-a5);
   --v-focus-color: var(--accent-8);
@@ -286,7 +286,7 @@
 }
 
 /* Ghost variant palette */
-.rt-ChatbarBox:where(.rt-variant-ghost) {
+.kui-ChatbarBox:where(.kui-variant-ghost) {
   --text-area-border-width: 0px;
   --v-selection-color: var(--accent-a5);
   --v-focus-color: var(--accent-8);
@@ -296,7 +296,7 @@
 }
 
 /* Outline variant palette */
-.rt-ChatbarBox:where(.rt-variant-outline) {
+.kui-ChatbarBox:where(.kui-variant-outline) {
   --text-area-border-width: 1px;
   --v-selection-color: var(--focus-a5);
   --v-focus-color: var(--focus-8);
@@ -308,7 +308,7 @@
 }
 
 /* Surface variant palette */
-.rt-ChatbarBox:where(.rt-variant-surface) {
+.kui-ChatbarBox:where(.kui-variant-surface) {
   --text-area-border-width: 1px;
   --v-selection-color: var(--accent-a5);
   --v-focus-color: var(--accent-8);
@@ -329,13 +329,13 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-ChatbarBox:where(.rt-variant-soft, .rt-variant-ghost, .rt-variant-outline, .rt-variant-surface) {
+.kui-ChatbarBox:where(.kui-variant-soft, .kui-variant-ghost, .kui-variant-outline, .kui-variant-surface) {
   /* Rest state */
   background-color: var(--v-bg);
 
   /* Hover state */
   @media (hover: hover) {
-    &:where(:hover:not(:focus-within)):where(:not(.rt-ChatbarRoot:is([data-disabled], [data-readonly]) *)) {
+    &:where(:hover:not(:focus-within)):where(:not(.kui-ChatbarRoot:is([data-disabled], [data-readonly]) *)) {
       background-color: var(--v-bg-hover);
     }
   }
@@ -348,13 +348,13 @@
 }
 
 /* Border variants: outline and surface */
-.rt-ChatbarBox:where(.rt-variant-outline, .rt-variant-surface) {
+.kui-ChatbarBox:where(.kui-variant-outline, .kui-variant-surface) {
   /* Rest state border */
   box-shadow: inset 0 0 0 1px var(--v-border);
 
   /* Hover state border */
   @media (hover: hover) {
-    &:where(:hover:not(:focus-within)):where(:not(.rt-ChatbarRoot:is([data-disabled], [data-readonly]) *)) {
+    &:where(:hover:not(:focus-within)):where(:not(.kui-ChatbarRoot:is([data-disabled], [data-readonly]) *)) {
       box-shadow: inset 0 0 0 1px var(--v-border-hover);
     }
   }
@@ -366,14 +366,14 @@
 }
 
 /* Ghost focus state - needs background on focus */
-.rt-ChatbarBox:where(.rt-variant-ghost) {
+.kui-ChatbarBox:where(.kui-variant-ghost) {
   &:where(:focus-within) {
     background-color: var(--v-bg-focus, var(--v-bg));
   }
 }
 
 /* Surface focus state - background changes on focus */
-.rt-ChatbarBox:where(.rt-variant-surface) {
+.kui-ChatbarBox:where(.kui-variant-surface) {
   &:where(:focus-within) {
     background-color: var(--v-bg-focus, var(--v-bg));
   }
@@ -388,17 +388,17 @@
  ***************************************************************************************************/
 
 /* Raised variant - uses --color-surface and shadow */
-.rt-ChatbarBox:where(.rt-variant-raised) {
+.kui-ChatbarBox:where(.kui-variant-raised) {
   --text-area-border-width: 0px;
   --v-selection-color: var(--focus-a5);
   --v-focus-color: var(--focus-8);
 
-  background-color: var(--color-surface-solid);
+  background-color: var(--color-surface);
   box-shadow: var(--shadow-2);
 
   /* Hover effects */
   @media (hover: hover) {
-    &:where(:hover:not(:focus-within)):where(:not(.rt-ChatbarRoot:is([data-disabled], [data-readonly]) *)) {
+    &:where(:hover:not(:focus-within)):where(:not(.kui-ChatbarRoot:is([data-disabled], [data-readonly]) *)) {
       background-color: var(--accent-2);
       box-shadow: var(--shadow-3);
     }
@@ -418,32 +418,32 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-ChatbarRoot:where([data-disabled], [data-readonly]) {
-  & .rt-ChatbarBox {
-    --v-selection-color: var(--gray-a5);
-    --v-focus-color: var(--gray-8);
+.kui-ChatbarRoot:where([data-disabled], [data-readonly]) {
+  & .kui-ChatbarBox {
+    --v-selection-color: var(--neutral-a5);
+    --v-focus-color: var(--neutral-8);
   }
 
-  & .rt-ChatbarBox:where(.rt-variant-ghost, .rt-variant-outline, .rt-variant-surface) {
-    background-color: var(--gray-a2);
+  & .kui-ChatbarBox:where(.kui-variant-ghost, .kui-variant-outline, .kui-variant-surface) {
+    background-color: var(--neutral-a2);
   }
 
-  & .rt-ChatbarBox:where(.rt-variant-soft) {
-    background-color: var(--gray-a3);
+  & .kui-ChatbarBox:where(.kui-variant-soft) {
+    background-color: var(--neutral-a3);
   }
 
-  & .rt-ChatbarBox:where(.rt-variant-outline, .rt-variant-surface) {
-    box-shadow: inset 0 0 0 var(--text-area-border-width) var(--gray-a6);
+  & .kui-ChatbarBox:where(.kui-variant-outline, .kui-variant-surface) {
+    box-shadow: inset 0 0 0 var(--text-area-border-width) var(--neutral-a6);
   }
 
-  & .rt-ChatbarBox:where(.rt-variant-raised) {
-    background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
+  & .kui-ChatbarBox:where(.kui-variant-raised) {
+    background-image: linear-gradient(var(--neutral-a2), var(--neutral-a2));
   }
 
-  & .rt-ChatbarInput {
-    color: var(--gray-a11);
+  & .kui-ChatbarInput {
+    color: var(--neutral-a11);
     /* Safari */
-    -webkit-text-fill-color: var(--gray-a11);
+    -webkit-text-fill-color: var(--neutral-a11);
 
     &::placeholder {
       opacity: 0.5;
@@ -451,27 +451,27 @@
   }
 }
 
-.rt-ChatbarRoot:where([data-disabled]) {
-  & .rt-ChatbarBox,
-  & .rt-ChatbarInput {
+.kui-ChatbarRoot:where([data-disabled]) {
+  & .kui-ChatbarBox,
+  & .kui-ChatbarInput {
     cursor: not-allowed;
   }
 }
 
 /* Dropzone states */
-.rt-ChatbarRoot:where([data-drop-active]) .rt-ChatbarBox {
+.kui-ChatbarRoot:where([data-drop-active]) .kui-ChatbarBox {
   outline: 2px dashed var(--accent-8);
   outline-offset: -1px;
 }
 
 /* Drop overlay */
-.rt-ChatbarDropOverlay {
+.kui-ChatbarDropOverlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: var(--gray-a3);
+  background: var(--neutral-a3);
   border-radius: inherit;
   display: flex;
   align-items: center;
@@ -479,7 +479,7 @@
   z-index: 10;
 }
 
-.rt-ChatbarDropContent {
+.kui-ChatbarDropContent {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -489,8 +489,8 @@
 /* Reduced motion */
 
 /* Inline slot positioning */
-.rt-ChatbarInlineStart,
-.rt-ChatbarInlineEnd {
+.kui-ChatbarInlineStart,
+.kui-ChatbarInlineEnd {
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
@@ -498,14 +498,14 @@
 }
 
 /* Row slot positioning */
-.rt-ChatbarRowStart {
+.kui-ChatbarRowStart {
   display: inline-flex;
   align-items: center;
   gap: var(--space-3);
   flex-shrink: 0;
 }
 
-.rt-ChatbarRowEnd {
+.kui-ChatbarRowEnd {
   display: inline-flex;
   align-items: center;
   gap: var(--space-3);
@@ -515,20 +515,20 @@
 
 /* Size-based font sizing for chatbar */
 @breakpoints {
-  .rt-ChatbarRoot {
-    &:where(.rt-r-size-1) {
+  .kui-ChatbarRoot {
+    &:where(.kui-r-size-1) {
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       /* --chatbar-attachments-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2))); */
       --chatbar-attachments-radius: var(--radius-1);
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       /* --chatbar-attachments-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3))); */
       --chatbar-attachments-radius: var(--radius-2);
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       /* --chatbar-attachments-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4))); */
@@ -544,14 +544,14 @@
  ***************************************************************************************************/
 
 /* Notices stand above the box, in a column; the last one is nearest the text. */
-.rt-ChatbarNotices {
+.kui-ChatbarNotices {
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
 }
 
 /* Context is quiet text below the box, inset to line up with the text inside it. */
-.rt-ChatbarContext {
+.kui-ChatbarContext {
   padding: 0 var(--space-4);
   min-width: 0;
   overflow-wrap: anywhere;