@womp/kookie-ui 0.34.0 → 0.34.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.34.0",
+  "version": "0.34.2",
   "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
   "keywords": [
     "react",
@@ -20,7 +20,7 @@
   "copyright": "Copyright (c) 2024-2026 Womp 3D Inc. Sole author: Kushagra Dhawan.",
   "license": "MIT",
   "engines": {
-    "node": ">=16"
+    "node": ">=22"
   },
   "type": "commonjs",
   "main": "./dist/cjs/index.js",
@@ -161,14 +161,13 @@
   },
   "dependencies": {
     "@radix-ui/colors": "^3.0.0",
-    "@radix-ui/react-accordion": "^1.2.20",
     "@shadcn/react": "0.3.1",
     "@tanstack/react-virtual": "^3.14.13",
     "classnames": "^2.5.1",
     "cmdk": "^1.1.1",
     "radix-ui": "^1.6.7",
     "react-dropzone": "^20.1.2",
-    "zod": "^4.6.5"
+    "zod": "^4.6.7"
   },
   "peerDependencies": {
     "@types/react": "*",

package/schemas/base-button.json

@@ -37,6 +37,15 @@
                     "4"
                   ]
                 },
+                "xs": {
+                  "type": "string",
+                  "enum": [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                  ]
+                },
                 "sm": {
                   "type": "string",
                   "enum": [
@@ -144,6 +153,10 @@
           "description": "Disabled state",
           "type": "boolean"
         },
+        "done": {
+          "description": "Shows a tick in place of the icon to say the action finished",
+          "type": "boolean"
+        },
         "type": {
           "description": "Type attribute for form buttons",
           "type": "string",

package/schemas/button.json

@@ -37,6 +37,15 @@
                     "4"
                   ]
                 },
+                "xs": {
+                  "type": "string",
+                  "enum": [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                  ]
+                },
                 "sm": {
                   "type": "string",
                   "enum": [
@@ -144,6 +153,10 @@
           "description": "Disabled state",
           "type": "boolean"
         },
+        "done": {
+          "description": "Shows a tick in place of the icon to say the action finished",
+          "type": "boolean"
+        },
         "type": {
           "description": "Type attribute for form buttons",
           "type": "string",

package/schemas/index.json

@@ -44,6 +44,15 @@
                         "4"
                       ]
                     },
+                    "xs": {
+                      "type": "string",
+                      "enum": [
+                        "1",
+                        "2",
+                        "3",
+                        "4"
+                      ]
+                    },
                     "sm": {
                       "type": "string",
                       "enum": [
@@ -151,6 +160,10 @@
               "description": "Disabled state",
               "type": "boolean"
             },
+            "done": {
+              "description": "Shows a tick in place of the icon to say the action finished",
+              "type": "boolean"
+            },
             "type": {
               "description": "Type attribute for form buttons",
               "type": "string",
@@ -301,6 +314,15 @@
                         "4"
                       ]
                     },
+                    "xs": {
+                      "type": "string",
+                      "enum": [
+                        "1",
+                        "2",
+                        "3",
+                        "4"
+                      ]
+                    },
                     "sm": {
                       "type": "string",
                       "enum": [
@@ -408,6 +430,10 @@
               "description": "Disabled state",
               "type": "boolean"
             },
+            "done": {
+              "description": "Shows a tick in place of the icon to say the action finished",
+              "type": "boolean"
+            },
             "type": {
               "description": "Type attribute for form buttons",
               "type": "string",
@@ -611,6 +637,15 @@
                         "4"
                       ]
                     },
+                    "xs": {
+                      "type": "string",
+                      "enum": [
+                        "1",
+                        "2",
+                        "3",
+                        "4"
+                      ]
+                    },
                     "sm": {
                       "type": "string",
                       "enum": [
@@ -972,6 +1007,10 @@
               "description": "Height of the header, in pixels",
               "type": "number"
             },
+            "flush": {
+              "description": "Whether the header joins the app frame. Defaults to true. `false` makes it a card off the frame.",
+              "type": "boolean"
+            },
             "className": {
               "description": "Additional CSS class name",
               "type": "string"
@@ -1092,8 +1131,8 @@
               "description": "Width in pixels",
               "type": "number"
             },
-            "inset": {
-              "description": "Lifts the pane off the frame and paints the backdrop behind it",
+            "flush": {
+              "description": "Whether the pane joins the app frame. Defaults to true. `false` pulls it off the frame as a card.",
               "type": "boolean"
             },
             "className": {
@@ -1296,8 +1335,8 @@
               "description": "Open width in pixels",
               "type": "number"
             },
-            "inset": {
-              "description": "Lifts the pane off the frame and paints the backdrop behind it",
+            "flush": {
+              "description": "Whether the pane joins the app frame. Defaults to true. `false` pulls it off the frame as a card.",
               "type": "boolean"
             },
             "className": {
@@ -1571,8 +1610,8 @@
               "description": "Open width in pixels",
               "type": "number"
             },
-            "inset": {
-              "description": "Lifts the pane off the frame and paints the backdrop behind it",
+            "flush": {
+              "description": "Whether the pane joins the app frame. Defaults to true. `false` pulls it off the frame as a card.",
               "type": "boolean"
             },
             "className": {
@@ -1826,8 +1865,8 @@
         "Shell-contentSchema": {
           "type": "object",
           "properties": {
-            "inset": {
-              "description": "Lifts the pane off the frame and paints the backdrop behind it",
+            "flush": {
+              "description": "Whether the work area joins the app frame. Defaults to true. `false` makes it a card on the Shell background.",
               "type": "boolean"
             },
             "className": {
@@ -1953,8 +1992,8 @@
               "description": "Open width in pixels",
               "type": "number"
             },
-            "inset": {
-              "description": "Lifts the pane off the frame and paints the backdrop behind it",
+            "flush": {
+              "description": "Whether the pane joins the app frame. Defaults to true. `false` pulls it off the frame as a card.",
               "type": "boolean"
             },
             "className": {
@@ -2225,8 +2264,8 @@
               "description": "Open height in pixels",
               "type": "number"
             },
-            "inset": {
-              "description": "Lifts the pane off the frame and paints the backdrop behind it",
+            "flush": {
+              "description": "Whether the pane joins the app frame. Defaults to true. `false` pulls it off the frame as a card.",
               "type": "boolean"
             },
             "className": {

package/schemas/shell-bottom.json

@@ -88,8 +88,8 @@
           "description": "Open height in pixels",
           "type": "number"
         },
-        "inset": {
-          "description": "Lifts the pane off the frame and paints the backdrop behind it",
+        "flush": {
+          "description": "Whether the pane joins the app frame. Defaults to true. `false` pulls it off the frame as a card.",
           "type": "boolean"
         },
         "className": {

package/schemas/shell-content.json

@@ -4,8 +4,8 @@
     "Shell-contentSchema": {
       "type": "object",
       "properties": {
-        "inset": {
-          "description": "Lifts the pane off the frame and paints the backdrop behind it",
+        "flush": {
+          "description": "Whether the work area joins the app frame. Defaults to true. `false` makes it a card on the Shell background.",
           "type": "boolean"
         },
         "className": {

package/schemas/shell-header.json

@@ -9,6 +9,10 @@
           "description": "Height of the header, in pixels",
           "type": "number"
         },
+        "flush": {
+          "description": "Whether the header joins the app frame. Defaults to true. `false` makes it a card off the frame.",
+          "type": "boolean"
+        },
         "className": {
           "description": "Additional CSS class name",
           "type": "string"

package/schemas/shell-inspector.json

@@ -91,8 +91,8 @@
           "description": "Open width in pixels",
           "type": "number"
         },
-        "inset": {
-          "description": "Lifts the pane off the frame and paints the backdrop behind it",
+        "flush": {
+          "description": "Whether the pane joins the app frame. Defaults to true. `false` pulls it off the frame as a card.",
           "type": "boolean"
         },
         "className": {

package/schemas/shell-panel.json

@@ -87,8 +87,8 @@
           "description": "Open width in pixels",
           "type": "number"
         },
-        "inset": {
-          "description": "Lifts the pane off the frame and paints the backdrop behind it",
+        "flush": {
+          "description": "Whether the pane joins the app frame. Defaults to true. `false` pulls it off the frame as a card.",
           "type": "boolean"
         },
         "className": {

package/schemas/shell-rail.json

@@ -88,8 +88,8 @@
           "description": "Width in pixels",
           "type": "number"
         },
-        "inset": {
-          "description": "Lifts the pane off the frame and paints the backdrop behind it",
+        "flush": {
+          "description": "Whether the pane joins the app frame. Defaults to true. `false` pulls it off the frame as a card.",
           "type": "boolean"
         },
         "className": {

package/schemas/shell-sidebar.json

@@ -91,8 +91,8 @@
           "description": "Open width in pixels",
           "type": "number"
         },
-        "inset": {
-          "description": "Lifts the pane off the frame and paints the backdrop behind it",
+        "flush": {
+          "description": "Whether the pane joins the app frame. Defaults to true. `false` pulls it off the frame as a card.",
           "type": "boolean"
         },
         "className": {

package/schemas/toggle.json

@@ -37,6 +37,15 @@
                     "4"
                   ]
                 },
+                "xs": {
+                  "type": "string",
+                  "enum": [
+                    "1",
+                    "2",
+                    "3",
+                    "4"
+                  ]
+                },
                 "sm": {
                   "type": "string",
                   "enum": [

package/src/components/_internal/base-dialog.css

@@ -1,7 +1,7 @@
 .kui-BaseDialogOverlay {
   position: fixed;
   inset: 0;
-  z-index: 100; /* Above shell header (50) and shell stacked panes (30-40) */
+  z-index: 100; /* Above the Shell's own layers, which stay under 10 */
 
   &::before {
     position: fixed;

package/src/components/_internal/pane-chrome.tsx

@@ -5,8 +5,7 @@
  *
  * Shell.Sidebar and Shell.Panel render these as `Shell.PaneHeader`, `Shell.Scroll` and
  * `Shell.PaneFooter`. The pane renders anything; with these parts it is the presentation, so
- * Sidebar's menu parts work inside it with no `Sidebar.Root`. The index comes from the nearest
- * Shell (`Shell.Root size`), or from a deprecated `Sidebar.Root` that still wraps them.
+ * Sidebar's menu parts work inside it. The index comes from the nearest Shell (`Shell.Root size`).
  */
 
 import * as React from 'react';
@@ -166,7 +165,7 @@ interface ScrollProps extends React.ComponentPropsWithoutRef<'div'> {
  */
 const Scroll = React.forwardRef<HTMLDivElement, ScrollProps>(({ className, style, dir, children, fade = false, pane = false, ...props }, forwardedRef) => {
   const chrome = useChromeClasses();
-  // A Sidebar.Root inside the content still gets a menu.
+  // Pane chrome nested inside the content (a pane portalled into it) still gets a menu.
   const contentPane = React.useContext(ShellContentContext);
   const visual = useSidebarVisual();
   const inContent = contentPane && visual === null && !pane;

package/src/components/_internal/shell-handles.tsx

@@ -20,6 +20,7 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
     minSize,
     maxSize,
     defaultSize,
+    startSize,
     orientation,
     edge,
     growth,
@@ -118,6 +119,8 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
       aria-label={`Resize ${targetLabel} pane`}
       aria-controls={controls}
       aria-orientation={orientation}
+      // A focusable separator must state its value. The effects keep it current after mount.
+      aria-valuenow={Math.round(startSize)}
       aria-valuemin={minSize}
       aria-valuemax={maxSize}
       {...props}

package/src/components/_internal/shell-resizable.tsx

@@ -213,6 +213,13 @@ export function useResizablePane(options: ResizableOptions): PaneResizeContextVa
     };
   }, [resizable, adapter, options.overlaying, writeSize, minSize, maxSize, name]);
 
+  // What the handle announces before any effect has run: the same starting size the pane's
+  // first render uses, so the server HTML already states a value.
+  const [startSize] = React.useState(() => {
+    const value = size ?? defaultSize;
+    return typeof value === 'number' && Number.isFinite(value) ? clampTo(value, minSize, maxSize) : options.expandedSize;
+  });
+
   const onResize = React.useCallback((value: number) => latest.current.onResize?.(value), []);
   const onResizeStart = React.useCallback((value: number) => {
     // A resize makes the size the user's: a new expandedSize no longer moves it.
@@ -238,6 +245,7 @@ export function useResizablePane(options: ResizableOptions): PaneResizeContextVa
       minSize,
       maxSize,
       defaultSize: options.expandedSize,
+      startSize,
       orientation,
       edge: options.edge,
       growth: options.growth,
@@ -259,6 +267,7 @@ export function useResizablePane(options: ResizableOptions): PaneResizeContextVa
       minSize,
       maxSize,
       options.expandedSize,
+      startSize,
       orientation,
       options.edge,
       options.growth,

package/src/components/_internal/shell-resize.tsx

@@ -9,6 +9,8 @@ export interface PaneResizeContextValue {
   minSize: number;
   maxSize: number;
   defaultSize: number;
+  /** The size the pane starts at, for the handle's first `aria-valuenow`. */
+  startSize: number;
   orientation: 'vertical' | 'horizontal';
   edge: 'start' | 'end';
   /**

package/src/components/avatar.tsx

@@ -107,7 +107,9 @@ type AvatarImageProps = Pick<
 >;
 
 const AvatarImpl = React.memo(({ fallback, onLoadingStatusChange, ...imageProps }: AvatarImageProps) => {
-  const [status, setStatus] = React.useState<'idle' | 'loading' | 'loaded' | 'error'>('idle');
+  // With no picture to wait for, the fallback is the avatar from the first render, so it is in
+  // the server HTML. With one, the box stays empty until the picture loads or fails.
+  const [status, setStatus] = React.useState<'idle' | 'loading' | 'loaded' | 'error'>(() => (imageProps.src ? 'idle' : 'error'));
 
   const handleLoadingStatusChange = React.useCallback(
     (newStatus: 'idle' | 'loading' | 'loaded' | 'error') => {

package/src/components/button.tsx

@@ -92,7 +92,7 @@ type ButtonComponent = <C extends React.ElementType = 'button'>(props: ButtonPro
  * still loading (an empty `aria-label` while a translation loads) must not crash the tree.
  */
 function validateIconButtonName(props: Record<string, unknown>) {
-  if (props['aria-label'] || props['aria-labelledby']) return;
+  if (process.env.NODE_ENV === 'production' || props['aria-label'] || props['aria-labelledby']) return;
   const errorMessage =
     'Button: an `iconOnly` button must have an accessible name. Pass `aria-label`, or ' +
     '`aria-labelledby` referencing a label element.';

package/src/components/chatbar.tsx

@@ -1114,7 +1114,8 @@ const Attachment = React.forwardRef<HTMLDivElement, AttachmentProps>((props, for
   const ctx = useChatbarContext();
   const Comp = asChild ? Slot : 'div';
   const isImage = !!attachment.url && isImageLike(attachment.name, attachment.type);
-  const sizeLabel = `${Math.ceil(attachment.size / 1024)} KB`;
+  const kilobytes = Math.ceil(attachment.size / 1024);
+  const sizeLabel = kilobytes >= 1024 ? `${Math.round((kilobytes / 1024) * 10) / 10} MB` : `${kilobytes} KB`;
   const statusLabel = attachment.status ? STATUS_LABEL[attachment.status] : undefined;
   const locked = ctx.disabled || ctx.readOnly;
 

package/src/components/combobox.tsx

@@ -17,7 +17,6 @@
  * items are never lit at once and Enter always picks the lit item.
  */
 
-import { warnDeprecated } from '../helpers/warn-deprecated.js';
 import * as React from 'react';
 import classNames from 'classnames';
 import { Popover as PopoverPrimitive } from 'radix-ui';
@@ -396,8 +395,8 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
       <button
         data-accent-color={resolvedColor}
         data-radius={radius}
-        data-error={error}
-        data-loading={loading}
+        data-error={error || undefined}
+        data-loading={loading || undefined}
         data-disabled={isDisabled || undefined}
         data-read-only={readOnly || undefined}
         data-placeholder={isPlaceholder ? '' : undefined}

package/src/components/navbar.tsx

@@ -41,14 +41,13 @@ interface NavbarRootProps
 const NavbarRoot = React.forwardRef<NavbarRootElement, NavbarRootProps>(
   (ownProps, forwardedRef) => {
     const props = useThemeSizeProps(ownProps, navbarRootPropDefs.size);
-    const { children, className, ...rootProps } = extractProps(
+    // `position` and `size` are written as data attributes below. They are taken out here so the
+    // spread does not also write them on the <header> as attributes it does not have.
+    const { children, className, position = 'fixed', size = '2', ...rootProps } = extractProps(
       props,
       navbarRootPropDefs,
     );
 
-    const position = props.position ?? 'fixed';
-    const size = props.size ?? '2';
-
     return (
       <header
         {...rootProps}

package/src/components/navigator.css

@@ -49,7 +49,7 @@
   min-block-size: var(--control-height-3);
   padding-inline: var(--layout-space-3);
   border-radius: var(--radius-control-3);
-  color: var(--gray-12);
+  color: var(--neutral-12);
   font-size: var(--font-size-3);
   line-height: var(--line-height-3);
   text-align: start;
@@ -66,17 +66,17 @@
 
 .kui-NavigatorLinkGlyph {
   flex-shrink: 0;
-  color: var(--gray-a10);
+  color: var(--neutral-a10);
 }
 
 @media (hover: hover) {
   .kui-NavigatorLink:where(:hover) {
-    background-color: var(--gray-a3);
+    background-color: var(--neutral-a3);
   }
 }
 
 .kui-NavigatorLink:where(:active) {
-  background-color: var(--gray-a4);
+  background-color: var(--neutral-a4);
 }
 
 .kui-NavigatorLink:where(:focus-visible) {

package/src/components/schemas/base-button.schema.ts

@@ -46,6 +46,7 @@ export const BaseButtonSchema = z
         z.enum(['1', '2', '3', '4']),
         z.object({
           initial: z.enum(['1', '2', '3', '4']).optional(),
+          xs: z.enum(['1', '2', '3', '4']).optional(),
           sm: z.enum(['1', '2', '3', '4']).optional(),
           md: z.enum(['1', '2', '3', '4']).optional(),
           lg: z.enum(['1', '2', '3', '4']).optional(),
@@ -124,6 +125,12 @@ export const BaseButtonSchema = z
      */
     disabled: z.boolean().optional().default(false).describe('Disabled state'),
 
+    /**
+     * Shows a tick in place of the icon to say the action finished
+     * @default false
+     */
+    done: z.boolean().optional().describe('Shows a tick in place of the icon to say the action finished'),
+
     /**
      * Type attribute for form buttons
      * @default 'button'

package/src/components/schemas/shell.schema.ts

@@ -79,7 +79,7 @@ const PaneBaseShape = {
   id: z.string().optional().describe('The pane id. A Trigger points `aria-controls` at it.'),
   presentation: ResponsivePresentationSchema.optional(),
   expandedSize: z.number().optional(),
-  inset: z.boolean().optional().describe('Lifts the pane off the frame and paints the backdrop behind it'),
+  flush: z.boolean().optional().describe('Whether the pane joins the app frame. Defaults to true. `false` pulls it off the frame as a card.'),
   onExpand: z.function({ output: z.void() }).optional().describe('Deprecated: use `onOpenChange`'),
   onCollapse: z.function({ output: z.void() }).optional().describe('Deprecated: use `onOpenChange`'),
   className: z.string().optional().describe('Additional CSS class name'),
@@ -139,6 +139,7 @@ export const ShellRootSchema = z
 export const ShellHeaderSchema = z
   .object({
     height: z.number().default(64).describe('Height of the header, in pixels'),
+    flush: z.boolean().optional().describe('Whether the header joins the app frame. Defaults to true. `false` makes it a card off the frame.'),
     className: z.string().optional().describe('Additional CSS class name'),
     style: StyleSchema,
     children: z.any().optional().describe('Header content'),
@@ -202,7 +203,7 @@ export const ShellSidebarSchema = z
  */
 export const ShellContentSchema = z
   .object({
-    inset: z.boolean().optional().describe('Lifts the pane off the frame and paints the backdrop behind it'),
+    flush: z.boolean().optional().describe('Whether the work area joins the app frame. Defaults to true. `false` makes it a card on the Shell background.'),
     className: z.string().optional().describe('Additional CSS class name'),
     style: StyleSchema,
     children: z.any().optional().describe('Main content'),

package/src/components/schemas/toggle.schema.ts

@@ -14,7 +14,8 @@ import { ButtonObjectSchema } from './button.schema.js';
  * const iconProps = ToggleSchema.parse({ iconOnly: true, 'aria-label': 'Bold' });
  * ```
  */
-export const ToggleSchema = ButtonObjectSchema.extend({
+// A toggle's state is `pressed`, so it does not take Button's `done`.
+export const ToggleSchema = ButtonObjectSchema.omit({ done: true }).extend({
   /**
    * Controlled pressed state
    * When provided, the component is controlled and the pressed state is managed externally

package/src/components/segmented-control.css

@@ -118,6 +118,19 @@
   }
 }
 
+/* A segment that holds more than text draws one label: always shown, at its state's weight. */
+.kui-SegmentedControlItemLabelActive:where([data-single]) {
+  opacity: 1;
+  font-weight: var(--font-weight-regular);
+  letter-spacing: var(--tab-inactive-letter-spacing);
+  word-spacing: var(--tab-inactive-word-spacing);
+  :where(.kui-SegmentedControlItem[data-state='on']) & {
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--tab-active-letter-spacing);
+    word-spacing: var(--tab-active-word-spacing);
+  }
+}
+
 .kui-SegmentedControlItemSeparator {
   /*
    * Place the separator below the indicator.

package/src/components/segmented-control.tsx

@@ -135,6 +135,10 @@ interface SegmentedControlItemProps extends ComponentPropsWithout<typeof ToggleG
 
 const SegmentedControlItem = React.forwardRef<HTMLButtonElement, SegmentedControlItemProps>(({ children, className, iconOnly, onFocus, ...props }, forwardedRef) => {
   const context = React.useContext(SegmentedControlContext);
+  // The label is drawn twice, at both weights, so selecting a segment never changes its width.
+  // Only plain text is copied, as in Tabs: copying an element would duplicate its id and mount
+  // it twice. A segment holding an icon draws once and takes the weight of its state.
+  const isText = React.Children.toArray(children).every((child) => typeof child === 'string' || typeof child === 'number');
   return (
     <ToggleGroupPrimitive.Item
       ref={forwardedRef}
@@ -149,10 +153,14 @@ const SegmentedControlItem = React.forwardRef<HTMLButtonElement, SegmentedContro
     >
       <span className="kui-SegmentedControlItemSeparator" />
       <span className="kui-SegmentedControlItemLabel">
-        <span className="kui-SegmentedControlItemLabelActive">{children}</span>
-        <span className="kui-SegmentedControlItemLabelInactive" aria-hidden>
+        <span className="kui-SegmentedControlItemLabelActive" data-single={isText ? undefined : ''}>
           {children}
         </span>
+        {isText ? (
+          <span className="kui-SegmentedControlItemLabelInactive" aria-hidden>
+            {children}
+          </span>
+        ) : null}
       </span>
     </ToggleGroupPrimitive.Item>
   );