@womp/kookie-ui 0.34.1 → 0.35.0

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

@@ -101,7 +101,6 @@
  /* Staggered effect like tabs */
   :where(.kui-SegmentedControlItem[data-state='on']) & {
     opacity: 0;
- /* Immediate transition for state change */
   }
 }
 
@@ -114,7 +113,19 @@
  /* Immediate transition for active state like tabs */
   :where(.kui-SegmentedControlItem[data-state='on']) & {
     opacity: 1;
- /* Immediate transition for active state */
+  }
+}
+
+/* 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);
   }
 }
 
@@ -141,7 +152,6 @@
   :where(.kui-SegmentedControlItem:where([data-state='on'], :focus-visible)) + * & {
     opacity: 0;
   }
-  /* Don't transition when the separator is hidden because of the focus outline */
 }
 
 :where(.kui-theme) {

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>
   );

package/src/components/select.tsx

@@ -143,8 +143,8 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
         <button
           data-accent-color={color}
           data-radius={radius}
-          data-error={error}
-          data-loading={loading}
+          data-error={error || undefined}
+          data-loading={loading || undefined}
           {...triggerProps}
           {...ariaProps}
           ref={forwardedRef}

package/src/components/sheet.tsx

@@ -5,7 +5,7 @@
  *
  * A side-placed overlay built on top of Radix Dialog. It inherits accessibility,
  * focus management, overlay behavior, and sizing scales from the base dialog, and
- * adds side placement and slide motion suited for navigation panels and drawers.
+ * adds side placement, suited for navigation panels and drawers.
  *
  * Structure mirrors Dialog:
  * - Root, Trigger, Content, Title, Description, Close
@@ -58,7 +58,7 @@ type SheetSide = 'start' | 'end' | 'top' | 'bottom' | 'left' | 'right';
 
 /**
  * Sheet is a side-placed overlay built on the Dialog primitive.
- * It reuses Dialog's accessibility, focus, overlay, and size scales, while adding side placement and slide motion.
+ * It reuses Dialog's accessibility, focus, overlay, and size scales, while adding side placement.
  */
 
 // Root

package/src/components/shell.context.tsx

@@ -2,7 +2,7 @@
 
 /**
  * Since 0.8.0 the Shell has two contexts: the pane registry (the store) and
- * the inset set. They live in `_internal/shell-store.tsx`. This module keeps
+ * the set of panes off the frame. They live in `_internal/shell-store.tsx`. This module keeps
  * the two hooks consumers can reach: `useSidebarMode`, and the deprecated
  * `useShell`.
  */

package/src/components/sidebar.css

@@ -392,14 +392,13 @@
   background: none;
   border: none;
   width: 100%;
-  text-align: left;
+  text-align: start;
   cursor: var(--cursor-menu-item);
   user-select: none;
 
   /* Header/Footer-specific styling */
   justify-content: flex-start;
 
-  /* Transitions */
 
   /* Focus state */
   &:where(:focus-visible) {
@@ -407,7 +406,6 @@
     outline-offset: 2px;
   }
 
-  /* Reduced motion support */
 }
 
 /***************************************************************************************************
@@ -419,7 +417,7 @@
 /* A sub-trigger's chevron sits at the row's end; its size comes from the size ladder below */
 .kui-SidebarMenuSubTriggerIcon {
   flex-shrink: 0;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 @breakpoints {
@@ -539,14 +537,12 @@
 .kui-SidebarHeader:where(.kui-menu-variant-soft),
 .kui-SidebarContent:where(.kui-menu-variant-soft),
 .kui-SidebarFooter:where(.kui-menu-variant-soft) {
-  /* Sub-trigger transitions - match base menu */
 
   /* Sub-trigger open state - match base menu */
   & :where(.kui-SidebarMenuSubTrigger[data-state='open']) {
     background-color: var(--accent-3);
   }
 
-  /* Menu item transitions - match base menu */
 
   /* Hover/highlighted state for soft variant - EXACT match to base menu */
   & :where(.kui-SidebarMenuButton:where([data-highlighted]):not([data-disabled])) {
@@ -671,7 +667,6 @@
     }
 }
 
-/* Removed old icon-only collapsed mode rules in favor of Shell rail mode */
 
 /* ===== Sidebar Search ===== */
 

package/src/components/sidebar.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { Slot } from './slot.js';
-import * as Accordion from '@radix-ui/react-accordion';
+import { Accordion } from 'radix-ui';
 import * as DropdownMenu from './dropdown-menu.js';
 import * as Popover from './popover.js';
 

package/src/components/table.tsx

@@ -10,6 +10,10 @@ import { ScrollArea } from './scroll-area.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
+// Built once: `extractProps` caches its compiled prop defs on the identity of this object, so
+// making it inside the component would recompile them on every render.
+const { layout: _layoutPropDef, ...rootPropDefs } = tableRootPropDefs;
+
 type TableRootElement = React.ElementRef<'div'>;
 type TableRootOwnProps = GetPropDefTypes<typeof tableRootPropDefs>;
 interface TableRootProps
@@ -17,7 +21,6 @@ interface TableRootProps
     TableRootOwnProps {}
 const TableRoot = React.forwardRef<TableRootElement, TableRootProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, tableRootPropDefs.size);
-  const { layout: layoutPropDef, ...rootPropDefs } = tableRootPropDefs;
   const {
     className,
     children,

package/src/components/text-area.css

@@ -208,7 +208,6 @@
   --v-border-hover: var(--accent-7);
   --v-border-hover-a: var(--accent-a7);
   --v-placeholder-color: var(--neutral-a10);
-  /* Outline uses a different transition */
 }
 
 /* Surface variant palette */

package/src/components/text-field.css

@@ -347,7 +347,7 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-/* surface */
+/* outline */
 
 .kui-TextFieldRoot:where(.kui-variant-outline) {
   --text-field-selection-color: var(--focus-a5);
@@ -531,7 +531,7 @@
   }
 }
 
-/* outline */
+/* surface */
 
 .kui-TextFieldRoot:where(.kui-variant-surface) {
   --text-field-selection-color: var(--accent-a5);

package/src/components/virtual-menu.css

@@ -45,7 +45,6 @@
   /* - display: flex, align-items: center, gap */
   /* - min-height, padding */
   /* - cursor, user-select */
-  /* - transition */
 }
 
 /*

package/src/components/virtual-menu.tsx

@@ -569,7 +569,14 @@ interface VirtualMenuItemProps extends React.ComponentPropsWithoutRef<'div'> {
 }
 
 const VirtualMenuItemInner = React.forwardRef<HTMLDivElement, VirtualMenuItemProps>(
-  ({ className, children, ...props }, forwardedRef) => {
+  ({ className, children, ...allProps }, forwardedRef) => {
+    // A `renderItem` component usually spreads everything it is given onto this row. These three
+    // are for the component, not the element, so they stop here.
+    const { isHighlighted: _isHighlighted, index: _index, item: _item, ...props } = allProps as typeof allProps & {
+      isHighlighted?: boolean;
+      index?: number;
+      item?: unknown;
+    };
     return (
       <div
         ref={forwardedRef}

package/src/helpers/index.ts

@@ -9,7 +9,6 @@ export * from './get-subtree.js';
 export * from './has-own-property.js';
 export * from './input-attributes.js';
 export * from './is-responsive-object.js';
-export * from './map-prop-values.js';
 export * from './merge-styles.js';
 export * from './normalize-to-px.js';
 export * from './require-react-element.js';

package/src/hooks/index.ts

@@ -1,7 +1,5 @@
-export { useLiveAnnouncer } from './use-live-announcer.js';
 export { useBodyPointerEventsCleanup } from './use-body-pointer-events-cleanup.js';
 export { useTooltipWrapper } from './use-tooltip-wrapper.js';
-export { useToggleState } from './use-toggle-state.js';
 export { useAppearance, setAppearance } from './use-appearance.js';
 export { appearanceScript, APPEARANCE_STORAGE_KEY } from './appearance-script.js';
 export type { AppearanceChoice, ResolvedAppearance } from './use-appearance.js';

package/src/props/index.ts

@@ -5,6 +5,7 @@ export * from './prop-def.js';
 export * from './as-child.prop.js';
 export * from './color.prop.js';
 export * from './emphasis.prop.js';
+export * from './font-family.prop.js';
 export * from './gap.props.js';
 export * from './height.props.js';
 export * from './layout.props.js';
@@ -12,7 +13,6 @@ export * from './leading-trim.prop.js';
 export * from './margin.props.js';
 export * from './padding.props.js';
 export * from './radius.prop.js';
-export * from './shadow.props.js';
 export * from './text-align.prop.js';
 export * from './text-wrap.prop.js';
 export * from './truncate.prop.js';
@@ -20,6 +20,7 @@ export * from './weight.prop.js';
 export * from './width.props.js';
 
 // Component props
+export * from '../components/accordion.props.js';
 export * from '../components/alert-dialog.props.js';
 export * from '../components/avatar.props.js';
 export * from '../components/blockquote.props.js';
@@ -30,14 +31,17 @@ export * from '../components/checkbox-group.props.js';
 export * from '../components/checkbox.props.js';
 export * from '../components/chip.props.js';
 export * from '../components/code.props.js';
+export * from '../components/combobox.props.js';
 export * from '../components/context-menu.props.js';
 export * from '../components/dialog.props.js';
 export * from '../components/dropdown-menu.props.js';
 export * from '../components/flex.props.js';
 export * from '../components/grid.props.js';
 export * from '../components/heading.props.js';
+export * from '../components/image.props.js';
 export * from '../components/kbd.props.js';
 export * from '../components/link.props.js';
+export * from '../components/navbar.props.js';
 export * from '../components/popover.props.js';
 export * from '../components/progress.props.js';
 export * from '../components/radio.props.js';
@@ -55,4 +59,5 @@ export * from '../components/text-area.props.js';
 export * from '../components/text-field.props.js';
 export * from '../components/text.props.js';
 export * from '../components/theme.props.js';
+export * from '../components/toolbar.props.js';
 export * from '../components/tooltip.props.js';

package/src/styles/utilities/inset.css

@@ -47,6 +47,33 @@
   .kui-r-inset-12 {
     inset: var(--space-12);
   }
+  .-kui-r-inset-1 {
+    inset: calc(-1 * var(--space-1));
+  }
+  .-kui-r-inset-2 {
+    inset: calc(-1 * var(--space-2));
+  }
+  .-kui-r-inset-3 {
+    inset: calc(-1 * var(--space-3));
+  }
+  .-kui-r-inset-4 {
+    inset: calc(-1 * var(--space-4));
+  }
+  .-kui-r-inset-5 {
+    inset: calc(-1 * var(--space-5));
+  }
+  .-kui-r-inset-6 {
+    inset: calc(-1 * var(--space-6));
+  }
+  .-kui-r-inset-7 {
+    inset: calc(-1 * var(--space-7));
+  }
+  .-kui-r-inset-8 {
+    inset: calc(-1 * var(--space-8));
+  }
+  .-kui-r-inset-9 {
+    inset: calc(-1 * var(--space-9));
+  }
 }
 
 .kui-r-inset {
@@ -127,6 +154,33 @@
   .kui-r-top-12 {
     top: var(--space-12);
   }
+  .-kui-r-top-1 {
+    top: calc(-1 * var(--space-1));
+  }
+  .-kui-r-top-2 {
+    top: calc(-1 * var(--space-2));
+  }
+  .-kui-r-top-3 {
+    top: calc(-1 * var(--space-3));
+  }
+  .-kui-r-top-4 {
+    top: calc(-1 * var(--space-4));
+  }
+  .-kui-r-top-5 {
+    top: calc(-1 * var(--space-5));
+  }
+  .-kui-r-top-6 {
+    top: calc(-1 * var(--space-6));
+  }
+  .-kui-r-top-7 {
+    top: calc(-1 * var(--space-7));
+  }
+  .-kui-r-top-8 {
+    top: calc(-1 * var(--space-8));
+  }
+  .-kui-r-top-9 {
+    top: calc(-1 * var(--space-9));
+  }
 }
 
 .kui-r-top {
@@ -207,6 +261,33 @@
   .kui-r-right-12 {
     right: var(--space-12);
   }
+  .-kui-r-right-1 {
+    right: calc(-1 * var(--space-1));
+  }
+  .-kui-r-right-2 {
+    right: calc(-1 * var(--space-2));
+  }
+  .-kui-r-right-3 {
+    right: calc(-1 * var(--space-3));
+  }
+  .-kui-r-right-4 {
+    right: calc(-1 * var(--space-4));
+  }
+  .-kui-r-right-5 {
+    right: calc(-1 * var(--space-5));
+  }
+  .-kui-r-right-6 {
+    right: calc(-1 * var(--space-6));
+  }
+  .-kui-r-right-7 {
+    right: calc(-1 * var(--space-7));
+  }
+  .-kui-r-right-8 {
+    right: calc(-1 * var(--space-8));
+  }
+  .-kui-r-right-9 {
+    right: calc(-1 * var(--space-9));
+  }
 }
 
 .kui-r-right {
@@ -287,6 +368,33 @@
   .kui-r-bottom-12 {
     bottom: var(--space-12);
   }
+  .-kui-r-bottom-1 {
+    bottom: calc(-1 * var(--space-1));
+  }
+  .-kui-r-bottom-2 {
+    bottom: calc(-1 * var(--space-2));
+  }
+  .-kui-r-bottom-3 {
+    bottom: calc(-1 * var(--space-3));
+  }
+  .-kui-r-bottom-4 {
+    bottom: calc(-1 * var(--space-4));
+  }
+  .-kui-r-bottom-5 {
+    bottom: calc(-1 * var(--space-5));
+  }
+  .-kui-r-bottom-6 {
+    bottom: calc(-1 * var(--space-6));
+  }
+  .-kui-r-bottom-7 {
+    bottom: calc(-1 * var(--space-7));
+  }
+  .-kui-r-bottom-8 {
+    bottom: calc(-1 * var(--space-8));
+  }
+  .-kui-r-bottom-9 {
+    bottom: calc(-1 * var(--space-9));
+  }
 }
 
 .kui-r-bottom {
@@ -367,6 +475,33 @@
   .kui-r-left-12 {
     left: var(--space-12);
   }
+  .-kui-r-left-1 {
+    left: calc(-1 * var(--space-1));
+  }
+  .-kui-r-left-2 {
+    left: calc(-1 * var(--space-2));
+  }
+  .-kui-r-left-3 {
+    left: calc(-1 * var(--space-3));
+  }
+  .-kui-r-left-4 {
+    left: calc(-1 * var(--space-4));
+  }
+  .-kui-r-left-5 {
+    left: calc(-1 * var(--space-5));
+  }
+  .-kui-r-left-6 {
+    left: calc(-1 * var(--space-6));
+  }
+  .-kui-r-left-7 {
+    left: calc(-1 * var(--space-7));
+  }
+  .-kui-r-left-8 {
+    left: calc(-1 * var(--space-8));
+  }
+  .-kui-r-left-9 {
+    left: calc(-1 * var(--space-9));
+  }
 }
 
 .kui-r-left {