@womp/kookie-ui 0.20.0 → 0.22.0

package/src/components/chatbar.css

@@ -1,23 +1,24 @@
 /* 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);
   /* A column: notices, then the box (which fills any height the consumer gives the root), then context. */
   display: flex;
   flex-direction: column;
+  gap: var(--space-3);
 }
 
 /* Unstyled textarea (reset) */
-.rt-ChatbarInput {
+.kui-ChatbarInput {
   display: block;
   width: 100%;
   min-width: 0;
@@ -32,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);
@@ -49,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;
 }
@@ -70,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);
@@ -118,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;
@@ -148,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;
@@ -177,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);
@@ -199,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 */
@@ -208,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);
@@ -242,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);
   }
 }
@@ -276,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);
@@ -285,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);
@@ -295,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);
@@ -307,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);
@@ -328,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);
     }
   }
@@ -347,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);
     }
   }
@@ -365,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));
   }
@@ -387,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);
     }
@@ -417,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;
@@ -450,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;
@@ -478,7 +479,7 @@
   z-index: 10;
 }
 
-.rt-ChatbarDropContent {
+.kui-ChatbarDropContent {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -488,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;
@@ -497,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);
@@ -514,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))); */
@@ -543,16 +544,15 @@
  ***************************************************************************************************/
 
 /* 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);
-  margin-bottom: var(--space-3);
 }
 
 /* Context is quiet text below the box, inset to line up with the text inside it. */
-.rt-ChatbarContext {
-  padding: var(--space-3) var(--space-4) 0;
+.kui-ChatbarContext {
+  padding: 0 var(--space-4);
   min-width: 0;
   overflow-wrap: anywhere;
 }