@womp/kookie-ui 0.20.0 → 0.22.0

package/src/components/accordion.css

@@ -1,5 +1,5 @@
 /* Accordion Root */
-.rt-AccordionRoot {
+.kui-AccordionRoot {
   overflow: hidden;
   contain: layout;
   isolation: isolate;
@@ -7,97 +7,64 @@
 
 /* Size-specific border radius — surface channel */
 @breakpoints {
-  .rt-AccordionRoot {
-    &:where(.rt-r-size-1) {
+  .kui-AccordionRoot {
+    &:where(.kui-r-size-1) {
       border-radius: var(--radius-surface-1);
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       border-radius: var(--radius-surface-1);
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       border-radius: var(--radius-surface-1);
     }
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       border-radius: var(--radius-surface-1);
     }
   }
 }
 
-:where(.rt-AccordionRoot:where(.rt-variant-surface)) {
+:where(.kui-AccordionRoot:where(.kui-variant-surface)) {
   background-color: var(--accent-2);
   box-shadow: inset 0 0 0 1px var(--accent-6);
 }
 
-:where(.rt-AccordionRoot:where(.rt-variant-raised)) {
-  background-color: var(--color-surface-solid);
+:where(.kui-AccordionRoot:where(.kui-variant-raised)) {
+  background-color: var(--color-surface);
   box-shadow: var(--shadow-2);
 }
 
-:where(.rt-AccordionRoot:where(.rt-variant-soft)) {
+:where(.kui-AccordionRoot:where(.kui-variant-soft)) {
   background-color: var(--accent-2);
 }
 
-:where(.rt-AccordionRoot:where(.rt-variant-outline)) {
+:where(.kui-AccordionRoot:where(.kui-variant-outline)) {
   box-shadow: inset 0 0 0 1px var(--accent-6);
 }
 
-:where(.rt-AccordionRoot:where(.rt-variant-ghost)) {
+:where(.kui-AccordionRoot:where(.kui-variant-ghost)) {
   background-color: transparent;
 }
 
-/* Ghost variant flush support */
-:where(.rt-AccordionRoot:where(.rt-variant-ghost)[data-flush='true']) {
-  /* We reset the defined margin variables to avoid inheriting them from a higher component */
-  /* If a margin IS defined on the component itself, the utility class will win and reset it */
-  --margin-top: 0px;
-  --margin-right: 0px;
-  --margin-bottom: 0px;
-  --margin-left: 0px;
-
-  /* Calculate padding values for different accordion sizes */
-  --accordion-padding-x: calc(var(--space-5) * var(--padding-ratio-horizontal) / 4);
-  --accordion-padding-y: calc(var(--space-4) / 8);
-
-  /* Define the overrides to incorporate the negative margins */
-  --margin-top-override: calc(var(--margin-top) - var(--accordion-padding-y));
-  --margin-right-override: calc(var(--margin-right) - var(--accordion-padding-x));
-  --margin-bottom-override: calc(var(--margin-bottom) - var(--accordion-padding-y));
-  --margin-left-override: calc(var(--margin-left) - var(--accordion-padding-x));
-
-  margin-top: var(--margin-top-override);
-  margin-right: var(--margin-right-override);
-  margin-bottom: var(--margin-bottom-override);
-  margin-left: var(--margin-left-override);
-
-  /* Reset the overrides on direct children */
-  :where(&) > * {
-    --margin-top-override: initial;
-    --margin-right-override: initial;
-    --margin-bottom-override: initial;
-    --margin-left-override: initial;
-  }
-}
-
 /* Accordion Item */
-.rt-AccordionItem {
+.kui-AccordionItem {
   overflow: hidden;
 }
 
-:where(.rt-AccordionItem:not(:last-child)) {
-  border-bottom: 1px solid var(--gray-a6);
+:where(.kui-AccordionItem:not(:last-child)) {
+  border-bottom: 1px solid var(--neutral-a6);
 }
 
-:where(.rt-AccordionRoot:where(.rt-variant-ghost)) :where(.rt-AccordionItem:not(:last-child)) {
-  border-bottom: 1px solid var(--gray-a4);
+:where(.kui-AccordionRoot:where(.kui-variant-ghost)) :where(.kui-AccordionItem:not(:last-child)) {
+  border-bottom: 1px solid var(--neutral-a4);
 }
 
 /* Accordion Header */
-.rt-AccordionHeader {
+.kui-AccordionHeader {
   display: flex;
 }
 
 /* Accordion Trigger */
-.rt-AccordionTrigger {
+.kui-AccordionTrigger {
   all: unset;
   font-family: inherit;
   display: flex;
@@ -108,111 +75,111 @@
   font-size: var(--font-size-2);
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height-3);
-  color: var(--gray-12);
+  color: var(--neutral-12);
   cursor: pointer;
 }
 
 /* Size variants */
-:where(.rt-AccordionRoot:where(.rt-r-size-1)) .rt-AccordionTrigger {
+:where(.kui-AccordionRoot:where(.kui-r-size-1)) .kui-AccordionTrigger {
   padding: var(--space-3) var(--space-4);
   font-size: var(--font-size-1);
 }
 
-:where(.rt-AccordionRoot:where(.rt-r-size-2)) .rt-AccordionTrigger {
+:where(.kui-AccordionRoot:where(.kui-r-size-2)) .kui-AccordionTrigger {
   padding: var(--space-4) var(--space-5);
   font-size: var(--font-size-2);
 }
 
-:where(.rt-AccordionRoot:where(.rt-r-size-3)) .rt-AccordionTrigger {
+:where(.kui-AccordionRoot:where(.kui-r-size-3)) .kui-AccordionTrigger {
   padding: var(--space-5) var(--space-6);
   font-size: var(--font-size-3);
 }
 
-:where(.rt-AccordionRoot:where(.rt-r-size-4)) .rt-AccordionTrigger {
+:where(.kui-AccordionRoot:where(.kui-r-size-4)) .kui-AccordionTrigger {
   padding: var(--space-6) var(--space-7);
   font-size: var(--font-size-4);
 }
 
 /* Trigger hover states */
 @media (hover: hover) {
-  :where(.rt-AccordionTrigger:hover) {
-    background-color: var(--gray-a3);
+  :where(.kui-AccordionTrigger:hover) {
+    background-color: var(--neutral-a3);
   }
 }
 
 /* Trigger colour reads the loud ink in every variant; gray resolves to step 12 */
-:where(.rt-AccordionRoot:where(.rt-variant-soft, .rt-variant-outline, .rt-variant-surface, .rt-variant-ghost, .rt-variant-raised)) .rt-AccordionTrigger {
+:where(.kui-AccordionRoot:where(.kui-variant-soft, .kui-variant-outline, .kui-variant-surface, .kui-variant-ghost, .kui-variant-raised)) .kui-AccordionTrigger {
   color: var(--accent-ink);
 }
 
 /* Raised variant shadow states */
 @media (hover: hover) {
-  :where(.rt-AccordionRoot:where(.rt-variant-raised):hover) {
+  :where(.kui-AccordionRoot:where(.kui-variant-raised):hover) {
     background-color: var(--accent-2);
     box-shadow: var(--shadow-2);
   }
 }
 
-:where(.rt-AccordionRoot:where(.rt-variant-raised):focus-within) {
+:where(.kui-AccordionRoot:where(.kui-variant-raised):focus-within) {
   outline: 2px solid var(--focus-8);
   outline-offset: 2px;
 }
 
 @media (hover: hover) {
-  :where(.rt-AccordionRoot:where(.rt-variant-soft)) :where(.rt-AccordionTrigger:hover) {
+  :where(.kui-AccordionRoot:where(.kui-variant-soft)) :where(.kui-AccordionTrigger:hover) {
     background-color: var(--accent-4);
   }
 }
 
 @media (hover: hover) {
-  :where(.rt-AccordionRoot:where(.rt-variant-outline)) :where(.rt-AccordionTrigger:hover) {
+  :where(.kui-AccordionRoot:where(.kui-variant-outline)) :where(.kui-AccordionTrigger:hover) {
     background-color: var(--accent-2);
     box-shadow: inset 0 0 0 1px var(--accent-7);
   }
 }
 
 @media (hover: hover) {
-  :where(.rt-AccordionRoot:where(.rt-variant-surface)) :where(.rt-AccordionTrigger:hover) {
+  :where(.kui-AccordionRoot:where(.kui-variant-surface)) :where(.kui-AccordionTrigger:hover) {
     background-color: var(--accent-3);
     box-shadow: inset 0 0 0 1px var(--accent-7);
   }
 }
 
 @media (hover: hover) {
-  :where(.rt-AccordionRoot:where(.rt-variant-ghost)) :where(.rt-AccordionTrigger:hover) {
+  :where(.kui-AccordionRoot:where(.kui-variant-ghost)) :where(.kui-AccordionTrigger:hover) {
     background-color: var(--accent-3);
   }
 }
 
 /* Trigger focus states */
-:where(.rt-AccordionTrigger:focus-visible) {
+:where(.kui-AccordionTrigger:focus-visible) {
   outline: var(--focus-outline-width) solid var(--focus-8);
   outline-offset: var(--focus-outline-offset-inset);
 }
 
 /* Variant-specific focus styles */
-:where(.rt-AccordionRoot:where(.rt-variant-soft):focus-within) {
+:where(.kui-AccordionRoot:where(.kui-variant-soft):focus-within) {
   outline: 2px solid var(--focus-8);
   outline-offset: 2px;
 }
 
-:where(.rt-AccordionRoot:where(.rt-variant-surface):focus-within) {
+:where(.kui-AccordionRoot:where(.kui-variant-surface):focus-within) {
   outline: 2px solid var(--focus-8);
   outline-offset: 2px;
 }
 
-:where(.rt-AccordionRoot:where(.rt-variant-outline):focus-within) {
+:where(.kui-AccordionRoot:where(.kui-variant-outline):focus-within) {
   outline: 2px solid var(--focus-8);
   outline-offset: 2px;
 }
 
-:where(.rt-AccordionRoot:where(.rt-variant-ghost):focus-within) {
+:where(.kui-AccordionRoot:where(.kui-variant-ghost):focus-within) {
   outline: 2px solid var(--focus-8);
   outline-offset: 2px;
 }
 
 /* Accordion Content */
-.rt-AccordionContent {
+.kui-AccordionContent {
   overflow: hidden;
   /* remove padding here */
   font-size: var(--font-size-2);
@@ -222,27 +189,27 @@
   will-change: height, opacity, transform;
 }
 
-.rt-AccordionContentInner {
+.kui-AccordionContentInner {
   padding: 0 var(--space-5) var(--space-4);
 }
 
 /* Size variants for content */
-:where(.rt-AccordionRoot:where(.rt-r-size-1)) .rt-AccordionContentInner {
+:where(.kui-AccordionRoot:where(.kui-r-size-1)) .kui-AccordionContentInner {
   padding: 0 var(--space-4) var(--space-3);
   font-size: var(--font-size-1);
 }
 
-:where(.rt-AccordionRoot:where(.rt-r-size-2)) .rt-AccordionContentInner {
+:where(.kui-AccordionRoot:where(.kui-r-size-2)) .kui-AccordionContentInner {
   padding: 0 var(--space-5) var(--space-4);
   font-size: var(--font-size-2);
 }
 
-:where(.rt-AccordionRoot:where(.rt-r-size-3)) .rt-AccordionContentInner {
+:where(.kui-AccordionRoot:where(.kui-r-size-3)) .kui-AccordionContentInner {
   padding: 0 var(--space-6) var(--space-5);
   font-size: var(--font-size-3);
 }
 
-:where(.rt-AccordionRoot:where(.rt-r-size-4)) .rt-AccordionContentInner {
+:where(.kui-AccordionRoot:where(.kui-r-size-4)) .kui-AccordionContentInner {
   padding: 0 var(--space-7) var(--space-6);
   font-size: var(--font-size-4);
 }
@@ -251,41 +218,41 @@
 
 /* Color accent support */
 @media (hover: hover) {
-  :where(.rt-AccordionRoot:where(.rt-variant-soft)[data-accent-color]) :where(.rt-AccordionTrigger:hover) {
+  :where(.kui-AccordionRoot:where(.kui-variant-soft)[data-accent-color]) :where(.kui-AccordionTrigger:hover) {
     background-color: var(--accent-a4);
   }
 }
 
 /* Forced colors support */
 @media (forced-colors: active) {
-  :where(.rt-AccordionTrigger) {
+  :where(.kui-AccordionTrigger) {
     border: 1px solid CanvasText;
   }
 
-  :where(.rt-AccordionTrigger:focus-visible) {
+  :where(.kui-AccordionTrigger:focus-visible) {
     outline: 2px solid CanvasText;
     outline-offset: 2px;
   }
 
-  :where(.rt-AccordionItem:not(:last-child)) {
+  :where(.kui-AccordionItem:not(:last-child)) {
     border-bottom: 1px solid CanvasText;
   }
 
-  :where(.rt-AccordionRoot) {
+  :where(.kui-AccordionRoot) {
     border: 1px solid CanvasText;
   }
 }
 
 /* Soft variant hover states */
 @media (hover: hover) {
-  :where(.rt-AccordionRoot.rt-variant-soft:hover) {
+  :where(.kui-AccordionRoot.kui-variant-soft:hover) {
     background-color: var(--accent-4);
   }
 }
 
 /* Outline variant hover states */
 @media (hover: hover) {
-  :where(.rt-AccordionRoot.rt-variant-outline:hover) {
+  :where(.kui-AccordionRoot.kui-variant-outline:hover) {
     background-color: var(--accent-2);
     box-shadow: inset 0 0 0 1px var(--accent-7);
   }
@@ -293,7 +260,7 @@
 
 /* Surface variant hover states */
 @media (hover: hover) {
-  :where(.rt-AccordionRoot.rt-variant-surface:hover) {
+  :where(.kui-AccordionRoot.kui-variant-surface:hover) {
     background-color: var(--accent-3);
     box-shadow: inset 0 0 0 1px var(--accent-7);
   }
@@ -301,13 +268,13 @@
 
 /* Ghost variant hover with lowered specificity */
 @media (hover: hover) {
-  :where(.rt-AccordionRoot.rt-variant-ghost:hover) {
+  :where(.kui-AccordionRoot.kui-variant-ghost:hover) {
     background-color: var(--accent-2);
   }
 }
 /* Disabled: the same treatment as a disabled menu item. It keeps no hover fill or lift. */
-.rt-AccordionTrigger:where([data-disabled]) {
-  color: var(--gray-a8);
+.kui-AccordionTrigger:where([data-disabled]) {
+  color: var(--neutral-a8);
   cursor: default;
   background-color: transparent;
   transform: none;

package/src/components/accordion.props.tsx

@@ -9,15 +9,13 @@ const variants = ['raised', 'soft', 'surface', 'outline', 'ghost'] as const;
 
 const accordionRootPropDefs = {
   ...asChildPropDef,
-  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' },
   ...colorPropDef,
   ...radiusPropDef,
-  flush: { type: 'boolean', default: false },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
-  flush: PropDef<boolean>;
 };
 
 const accordionItemPropDefs = {
@@ -57,7 +55,6 @@ export type AccordionRootOwnProps = {
   variant?: (typeof variants)[number];
   color?: string;
   radius?: string;
-  flush?: boolean;
 };
 
 export type AccordionItemOwnProps = {

package/src/components/accordion.tsx

@@ -30,7 +30,7 @@ interface AccordionRootProps
 const AccordionRoot = React.forwardRef<AccordionRootElement, AccordionRootProps>(
   (ownProps, forwardedRef) => {
     const props = useThemeSizeProps(ownProps, accordionRootPropDefs.size);
-    const { className, flush, radius, color, ...extractedRadixProps } =
+    const { className, radius, color, ...extractedRadixProps } =
       extractProps(props, accordionRootPropDefs);
 
     const radixProps = extractedRadixProps as React.ComponentPropsWithoutRef<
@@ -71,9 +71,8 @@ const AccordionRoot = React.forwardRef<AccordionRootElement, AccordionRootProps>
       <AccordionPrimitive.Root
         {...radixProps}
         ref={forwardedRef}
-        className={classNames('rt-AccordionRoot', className)}
+        className={classNames('kui-AccordionRoot', className)}
         data-accent-color={color}
-        data-flush={flush || undefined}
         data-radius={radius}
         onKeyDown={handleKeyDown}
       />
@@ -96,7 +95,7 @@ const AccordionItem = React.forwardRef<AccordionItemElement, AccordionItemProps>
       <AccordionPrimitive.Item
         {...itemProps}
         ref={forwardedRef}
-        className={classNames('rt-AccordionItem', className)}
+        className={classNames('kui-AccordionItem', className)}
       />
     );
   },
@@ -117,7 +116,7 @@ const AccordionHeader = React.forwardRef<AccordionHeaderElement, AccordionHeader
       <AccordionPrimitive.Header
         {...headerProps}
         ref={forwardedRef}
-        className={classNames('rt-AccordionHeader', className)}
+        className={classNames('kui-AccordionHeader', className)}
       />
     );
   },
@@ -148,7 +147,7 @@ const AccordionTrigger = React.forwardRef<AccordionTriggerElement, AccordionTrig
             forwardedRef.current = node;
           }
         }}
-        className={classNames('rt-AccordionTrigger', className)}
+        className={classNames('kui-AccordionTrigger', className)}
       >
         {children}
       </AccordionPrimitive.Trigger>
@@ -171,10 +170,10 @@ const AccordionContent = React.forwardRef<AccordionContentElement, AccordionCont
       <AccordionPrimitive.Content
         {...contentProps}
         ref={forwardedRef}
-        className={classNames('rt-AccordionContent', className)}
+        className={classNames('kui-AccordionContent', className)}
         aria-live="polite"
       >
-        <div className="rt-AccordionContentInner">{children}</div>
+        <div className="kui-AccordionContentInner">{children}</div>
       </AccordionPrimitive.Content>
     );
   },

package/src/components/alert-dialog.css

@@ -1,5 +1,5 @@
 @import './_internal/base-dialog.css';
 
-.rt-AlertDialogContent {
+.kui-AlertDialogContent {
   max-width: var(--overlay-w);
 }

package/src/components/alert-dialog.tsx

@@ -123,15 +123,15 @@ const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDial
     return (
       <AlertDialogPrimitive.Portal container={container} forceMount={forceMount}>
         <Theme asChild>
-          <AlertDialogPrimitive.Overlay className="rt-BaseDialogOverlay rt-AlertDialogOverlay">
-            <div className="rt-BaseDialogScroll rt-AlertDialogScroll">
+          <AlertDialogPrimitive.Overlay className="kui-BaseDialogOverlay kui-AlertDialogOverlay">
+            <div className="kui-BaseDialogScroll kui-AlertDialogScroll">
               <div
-                className={`rt-BaseDialogScrollPadding rt-AlertDialogScrollPadding ${alignClassName}`}
+                className={`kui-BaseDialogScrollPadding kui-AlertDialogScrollPadding ${alignClassName}`}
               >
                 <AlertDialogPrimitive.Content
                   {...contentProps}
                   ref={combinedRef}
-                  className={classNames('rt-BaseDialogContent', 'rt-AlertDialogContent', className)}
+                  className={classNames('kui-BaseDialogContent', 'kui-AlertDialogContent', className)}
                   tabIndex={-1}
                   role="alertdialog"
                   aria-modal="true"
@@ -147,7 +147,7 @@ const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDial
                 <div
                   aria-live="assertive"
                   aria-atomic="true"
-                  className="rt-sr-only"
+                  className="kui-sr-only"
                   id="alert-dialog-announcement"
                 />
               </div>
@@ -165,7 +165,7 @@ type AlertDialogTitleProps = ComponentPropsWithout<typeof Heading, 'asChild'>;
 const AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(
   (props, forwardedRef) => (
     <AlertDialogPrimitive.Title asChild>
-      <Heading size="5" mb="4" trim="start" {...props} asChild={false} ref={forwardedRef} />
+      <Heading size="5" trim="start" {...props} asChild={false} ref={forwardedRef} />
     </AlertDialogPrimitive.Title>
   ),
 );