@adea-ai/ui 0.99.1 → 0.99.3

package/src/components/ui/input-otp/input-otp.tsx

@@ -38,7 +38,17 @@ export function InputOtp(props: InputOtpProps) {
   return (
     <OtpField
       maxLength={length()}
-      class={cn('flex items-center gap-2', local.class)}
+      class={cn(
+        'flex items-center gap-2',
+        // corvu positions the field itself, but its hidden input is 40px wider
+        // than the field so a password manager's badge lands outside the boxes
+        // (`shiftPWManagers`). `clip-path` only hides that overhang; it still
+        // counts as overflow, and a full-width field scrolled the page sideways.
+        // `overflow-hidden` contains it, and `p-1` keeps the edge boxes' focus
+        // ring (`ring-3`) inside the clip.
+        'overflow-hidden p-1',
+        local.class
+      )}
       {...rest}
       children={(field) => (
         <>
@@ -72,7 +82,9 @@ export function InputOtp(props: InputOtpProps) {
                             'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'
                           )}
                           data-active={field.activeSlots.includes(slot)}
-                          data-disabled={props.disabled}
+                          // Present-or-absent, never `"false"`: `data-[disabled]`
+                          // matches any value, so `disabled={false}` dimmed the boxes.
+                          data-disabled={props.disabled ? '' : undefined}
                         >
                           {field.value[slot] ?? ''}
                         </span>

package/src/components/ui/menubar/menubar.tsx

@@ -160,6 +160,14 @@ export function MenubarRadioItem(props: ComponentProps<typeof KobalteMenubar.Rad
   )
 }
 
+/**
+ * The caption of a `MenubarGroup`, and that group's accessible name. It must be a
+ * child of the group it names: Kobalte reads the group from context, so a label
+ * placed directly in the content throws `useMenuGroupContext must be used within
+ * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
+ * label and its items in a group anyway — the grouping is what a screen reader
+ * announces.
+ */
 export function MenubarLabel(props: ComponentProps<typeof KobalteMenubar.GroupLabel>) {
   const [local, rest] = splitProps(props, ['class'])
   return <KobalteMenubar.GroupLabel class={cn(menuLabel, local.class)} {...rest} />

package/src/components/ui/navigation-menu/navigation-menu.tsx

@@ -41,9 +41,15 @@ import { menuContentPadding, menuItem, overlayMotion, overlaySurface } from '#li
  * - `Content` must be a direct child of `Menu`, and the `Viewport` is a **sibling
  *   of the menus** — not inside them. All the panels share one viewport, which is
  *   what lets the bar animate between them instead of each panel popping in place.
+ * - The viewport is an empty surface. Each `Content` reaches it through Kobalte's
+ *   `Portal`, which mounts the panel inside the viewport while keeping it in its
+ *   own `Menu`'s context. A `Content` rendered anywhere else — the viewport's own
+ *   children included — has no `Menu` above it, and Kobalte throws
+ *   `useMenuRootContext must be used within a MenuRoot` the moment a panel opens.
  *
- * The wrapper enforces the last of those by rendering the `Viewport` itself, so a
- * caller cannot forget it and get a menu whose panels never appear.
+ * The wrapper enforces the last two by rendering the `Viewport` itself and by
+ * portalling every `NavigationMenuContent`, so a caller cannot forget either and
+ * get a menu whose panels never appear.
  */
 
 export type NavigationMenuProps = ComponentProps<typeof KobalteNavigationMenu.Root> & {
@@ -112,25 +118,41 @@ export function NavigationMenuContent(props: ComponentProps<typeof KobalteNaviga
   const [local, rest] = splitProps(props, ['class', 'children'])
 
   return (
-    <KobalteNavigationMenu.Content
-      class={cn(
-        'grid w-max gap-1 p-2',
-        // A two-column panel is the shape most menu bars want, and it is opt-in
-        // through this hook rather than a prop because the column count is a
-        // layout decision the caller's content makes.
-        'data-[wide]:grid-cols-2',
-        local.class
-      )}
-      {...rest}
-    >
-      {local.children}
-    </KobalteNavigationMenu.Content>
+    <KobalteNavigationMenu.Portal>
+      <KobalteNavigationMenu.Content
+        class={cn(
+          // Absolute so the viewport sizes to the active panel's measured box and
+          // animates between panels, rather than stacking them.
+          'absolute top-0 left-0 grid w-max gap-1 p-2 outline-none',
+          // The motion is the panel's, not the viewport's. Kobalte keeps an
+          // outgoing panel mounted until the viewport's own animation ends; a
+          // viewport that carries an entrance animation never fires that again
+          // after it opens, so the previous panel would stay painted under the
+          // next one.
+          overlayMotion,
+          // A two-column panel is the shape most menu bars want, and it is opt-in
+          // through this hook rather than a prop because the column count is a
+          // layout decision the caller's content makes.
+          'data-[wide]:grid-cols-2',
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </KobalteNavigationMenu.Content>
+    </KobalteNavigationMenu.Portal>
   )
 }
 
 /**
  * The shared panel surface. One per menu bar, and the wrapper supplies it — but
  * exported so a caller with an unusual layout can place it themselves.
+ *
+ * It renders no children: the panels arrive through each `NavigationMenuContent`'s
+ * portal. Kobalte positions it under the bar and publishes the active panel's size
+ * as `--kb-navigation-menu-viewport-*`, which the surface animates between.
+ * `box-content` keeps the border outside that measured size so a panel is never
+ * clipped by its own frame.
  */
 export function NavigationMenuViewport(
   props: ComponentProps<typeof KobalteNavigationMenu.Viewport>
@@ -139,24 +161,16 @@ export function NavigationMenuViewport(
 
   return (
     <KobalteNavigationMenu.Viewport
+      data-slot="navigation-menu-viewport"
       class={cn(
-        'absolute top-full left-0 isolate z-(--z-menu) mt-1.5 flex justify-center overflow-hidden',
+        overlaySurface,
+        'isolate z-(--z-menu) mt-1.5 box-content list-none overflow-hidden',
         'h-(--kb-navigation-menu-viewport-height) w-(--kb-navigation-menu-viewport-width)',
-        'origin-top transition-[width,height] duration-200 ease-out',
+        'origin-(--kb-menu-content-transform-origin) transition-[width,height] duration-200 ease-out',
         local.class
       )}
       {...rest}
-    >
-      <div
-        class={cn(
-          overlaySurface,
-          overlayMotion,
-          'w-full rounded-lg border border-border bg-popover p-1 shadow-lg'
-        )}
-      >
-        <KobalteNavigationMenu.Content />
-      </div>
-    </KobalteNavigationMenu.Viewport>
+    />
   )
 }
 

package/src/components/ui/pagination/pagination.tsx

@@ -55,7 +55,14 @@ export function Pagination(props: PaginationProps) {
         ((itemProps) => <PaginationItem page={itemProps.page}>{itemProps.page}</PaginationItem>)
       }
       ellipsisComponent={local.ellipsisComponent ?? (() => <PaginationEllipsis />)}
-      class={cn('flex w-full items-center justify-center gap-1', local.class)}
+      // Kobalte renders the root as a `<nav>` wrapping a `<ul>`, and every control —
+      // previous, the page run, next — is an `<li>` inside that list. The row has to be
+      // declared on the list: on the `<nav>` alone it lays out one child and the
+      // controls stack vertically.
+      class={cn(
+        'flex w-full items-center justify-center [&>ul]:m-0 [&>ul]:flex [&>ul]:list-none [&>ul]:items-center [&>ul]:gap-1 [&>ul]:p-0',
+        local.class
+      )}
       {...rest}
     >
       <Show when={local.children} fallback={<DefaultPaginationControls />}>

package/src/components/ui/resizable/resizable.tsx

@@ -1,7 +1,7 @@
 import Resizable from '@corvu/resizable'
 import { GripVertical } from 'lucide-solid'
 import type { ComponentProps } from 'solid-js'
-import { splitProps } from 'solid-js'
+import { createContext, splitProps, useContext } from 'solid-js'
 import { cn } from '#lib/utils'
 
 /**
@@ -16,20 +16,54 @@ import { cn } from '#lib/utils'
  * is a real focusable element with an accessible role, so a split pane can be
  * adjusted from the keyboard; a bare `cursor-col-resize` div cannot.
  */
+/**
+ * Whether the group was given `initialSizes`. Those are corvu's to apply, and a
+ * panel's own `initialSize` overrides them — so an unsized panel must not invent
+ * one when the group already has an answer.
+ */
+const GroupSizesContext = createContext<() => boolean>(() => false)
+
 export function ResizablePanelGroup(props: ComponentProps<typeof Resizable> & { class?: string }) {
   const [local, rest] = splitProps(props, ['class'])
 
   return (
-    <Resizable
-      class={cn('flex size-full data-[orientation=vertical]:flex-col', local.class)}
-      {...rest}
-    />
+    <GroupSizesContext.Provider value={() => rest.initialSizes !== undefined}>
+      <Resizable
+        class={cn('flex size-full data-[orientation=vertical]:flex-col', local.class)}
+        {...rest}
+      />
+    </GroupSizesContext.Provider>
   )
 }
 
+/**
+ * The size an unsized panel registers with: whatever its earlier siblings left.
+ *
+ * corvu registers a panel without `initialSize` at a flat 50%, so `0.28` beside
+ * an unsized panel summed to 78% and left a gap. Panels register in document
+ * order, so at registration `sizes` holds exactly the panels before this one.
+ * When nothing is left — a second unsized panel — it takes an equal share, and
+ * corvu shrinks the earlier panels by that share to keep the total at 100%.
+ */
+function remainingSize(sizes: readonly number[]): number {
+  const left = 1 - sizes.reduce((total, size) => total + size, 0)
+  return left > 0.001 ? left : 1 / (sizes.length + 1)
+}
+
 export function ResizablePanel(props: ComponentProps<typeof Resizable.Panel> & { class?: string }) {
-  const [local, rest] = splitProps(props, ['class'])
-  return <Resizable.Panel class={cn('min-h-0 min-w-0 overflow-hidden', local.class)} {...rest} />
+  const [local, rest] = splitProps(props, ['class', 'initialSize'])
+  const group = Resizable.useContext(rest.contextId)
+  const groupHasSizes = useContext(GroupSizesContext)
+
+  return (
+    <Resizable.Panel
+      initialSize={
+        local.initialSize ?? (groupHasSizes() ? undefined : remainingSize(group.sizes()))
+      }
+      class={cn('min-h-0 min-w-0 overflow-hidden', local.class)}
+      {...rest}
+    />
+  )
 }
 
 export type ResizableHandleProps = ComponentProps<typeof Resizable.Handle> & {
@@ -46,11 +80,15 @@ export type ResizableHandleProps = ComponentProps<typeof Resizable.Handle> & {
 
 export function ResizableHandle(props: ResizableHandleProps) {
   const [local, rest] = splitProps(props, ['class', 'withHandle', 'label'])
+  const group = Resizable.useContext(rest.contextId)
 
   return (
     <Resizable.Handle
       aria-label={local.label ?? 'Resize panels'}
-      aria-orientation="vertical"
+      // A separator's orientation is the line's own, which runs across the
+      // group: a row of panels is divided by a vertical line, a column by a
+      // horizontal one. corvu reports the group's orientation instead.
+      aria-orientation={group.orientation() === 'horizontal' ? 'vertical' : 'horizontal'}
       class={cn(
         'group/resize bg-border relative flex w-px shrink-0 items-center justify-center',
         /* Widen the hit target without moving the visual line: the divider is

package/src/components/ui/toast/toast.tsx

@@ -179,11 +179,23 @@ export type ToasterProps = ComponentProps<typeof KobalteToast.Region> & {
   region?: string
 }
 
+/**
+ * The corner is set on the region, not the list. The region is the `fixed`
+ * element: an inset on the list inside it positions nothing, and the region falls
+ * back to wherever it happens to sit in the document flow.
+ */
 const toasterPosition = {
-  'top-left': 'top-0 left-0 items-start',
-  'top-right': 'top-0 right-0 items-end',
-  'bottom-left': 'bottom-0 left-0 items-start',
-  'bottom-right': 'bottom-0 right-0 items-end',
+  'top-left': 'top-0 left-0',
+  'top-right': 'top-0 right-0',
+  'bottom-left': 'bottom-0 left-0',
+  'bottom-right': 'bottom-0 right-0',
+}
+
+const toasterAlignment = {
+  'top-left': 'items-start',
+  'top-right': 'items-end',
+  'bottom-left': 'items-start',
+  'bottom-right': 'items-end',
 }
 
 /** Mount once, near the root. Renders the stack and owns its timing defaults. */
@@ -203,13 +215,16 @@ export function Toaster(props: ToasterProps) {
        * in-flight notification, and clicking a toast must not dismiss the
        * dialog behind it.
        */
-      class="pointer-events-none fixed z-(--z-toast) flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm"
+      class={cn(
+        'pointer-events-none fixed z-(--z-toast) flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm',
+        toasterPosition[local.position ?? 'bottom-right']
+      )}
       {...rest}
     >
       <KobalteToast.List
         class={cn(
           'flex flex-col gap-2',
-          toasterPosition[local.position ?? 'bottom-right'],
+          toasterAlignment[local.position ?? 'bottom-right'],
           local.class
         )}
       />

package/src/lib/cn-tables.generated.ts

@@ -54,7 +54,7 @@ const DZ = (s: string): Int32Array => {
     }
     return out
 }
-const GROUP_COUNT = 387
+const GROUP_COUNT = 384
 const customValidatorNames: string[] = []
 const edgeStart = PS(U("E0500002005282000000002000150000020021820000011200000003022202000300004200120000200420001200021200301200010400162000010000220021010:2192001200220012000220012000200200200400010200040000000000400200108200110100000022010313000162002000020020012020080213000228200000000082000000000120002000120020020040101020300130001001010"))
 const labelStart = PS(U(":11111111211111119311546544411119731869:671397415686432441111111111161114151214313433415:78311132233313187211117221449443411141111151152226611131111112212518142224214215421421542142424242516171151615616347111111111197911327451111111111111111111113134714133513411111311111111111111111111112444411111342312715245411117:3"))
@@ -91,7 +91,7 @@ const nodeVlist = (() => {
     for (let i = 0; i < A.length; i++) out[A[i]!] = V[i]!
     return out
 })()
-const SETS = "container |break-after- all auto avoid avoid-page column left page right|break-before- all auto avoid avoid-page column left page right|break-inside-a uto void void-column void-page|box-decoration- clone slice|box- border content| contents flow-root hidden table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group| not-sr-only sr-only|float- end left none right start|clear- both end left none right start|isolat e ion-auto|overflow- auto clip hidden scroll visible|overflow-x- auto clip hidden scroll visible|overflow-y- auto clip hidden scroll visible|overscroll- auto contain none|overscroll-x- auto contain none|overscroll-y- auto contain none| absolute fixed relative static sticky| collapse invisible visible|justify- around baseline between center center-safe end end-safe evenly normal start stretch|justify-items- center center-safe end end-safe normal start stretch|justify-self- auto center center-safe end end-safe start stretch|items- baseline baseline-last center center-safe end end-safe start stretch|self- auto baseline baseline-last center center-safe end end-safe start stretch|place-content- around baseline between center center-safe end end-safe evenly start stretch|place-items- baseline center center-safe end end-safe start stretch|place-self- auto center center-safe end end-safe start stretch| antialiased subpixel-antialiased| italic not-italic|normal-nums |ordinal |slashed-zero | lining-nums oldstyle-nums| proportional-nums tabular-nums| diagonal-fractions stacked-fractions| no-underline overline| capitalize lowercase normal-case uppercase|truncate |whitespace- break-spaces normal nowrap pre pre-line pre-wrap|break- all keep normal words|wrap- anywhere break-word normal|hyphens- auto manual none|mix-blend- color color-burn color-dodge darken difference exclusion hard-light hue lighten luminosity multiply normal overlay plus-darker plus-lighter saturation screen soft-light|table- auto fixed|caption- bottom top|backface- hidden visible|appearance- auto none|scheme- dark light light-dark normal only-dark only-light|field-sizing- content fixed|pointer-events- auto none|resize  -none -x -y|snap- align-none center end start|snap- always normal|snap- both none x y|snap- mandatory proximity|touch- auto manipulation none|touch-pan- left right x|touch-pan- down up y|touch-pinch-zoom |select- all auto none text|forced-color-adjust- auto none| normal size| baseline bottom middle sub super text-bottom text-top top| bounce none ping pulse spin| auto square video| auto fr max min px|none | auto full px| fixed local scroll|clip- border content padding text|origin- border content padding| bottom bottom-left bottom-right center left left-bottom left-top right right-bottom right-top top top-left top-right| no-repeat repeat repeat-round repeat-space repeat-x repeat-y| auto contain cover| gradient-to-b gradient-to-bl gradient-to-br gradient-to-l gradient-to-r gradient-to-t gradient-to-tl gradient-to-tr none|blend- color color-burn color-dodge darken difference exclusion hard-light hue lighten luminosity multiply normal overlay saturation screen soft-light|to- b bl br l r t tl tr| auto dvh fit full lh lvh max min px screen svh| dashed dotted double hidden none solid| collapse separate|px |auto |full | content none strict| inline-size size|layout |paint |style | around baseline between center center-safe end end-safe evenly normal start stretch| alias all-scroll auto cell col-resize context-menu copy crosshair default e-resize ew-resize grab grabbing help move n-resize ne-resize nesw-resize no-drop none not-allowed ns-resize nw-resize nwse-resize pointer progress row-resize s-resize se-resize sw-resize text vertical-text w-resize wait zoom-in zoom-out| dashed dotted double solid wavy| auto from-font|reverse |initial | in in-out initial linear out| col col-reverse row row-reverse| nowrap wrap wrap-reverse| auto initial none| black bold extrabold extralight light medium normal semibold thin| condensed expanded extra-condensed extra-expanded normal semi-condensed semi-expanded ultra-condensed ultra-expanded|flow- col col-dense dense row row-dense| none subgrid| auto dvh dvw fit full lh lvh lvw max min px screen svh svw| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs rail-item row-lg row-md row-sm statusbar topbar| block flex grid table| auto dvw fit full lvw max min px screen svw| loose none normal px relaxed snug tight|through |item | inside outside| decimal disc none| auto px| clip-border clip-content clip-fill clip-padding clip-stroke clip-view no-clip| add exclude intersect subtract| alpha luminance match|origin- border content fill padding stroke view|type- alpha luminance| circle ellipse| closest-corner closest-side farthest-corner farthest-side|at- bottom bottom-left bottom-right center left left-bottom left-top right right-bottom right-top top top-left top-right| dvh fit full lh lvh max min none px screen svh| auto dvh dvw fit full lh lvh lvw max min none px screen svh svw| dvw fit full lvw max min none px screen svw| auto dvh dvw fit full lvh lvw max min none prose px svh svw| auto dvh dvw fit full lvh lvw max min none px screen svh svw| contain cover fill none scale-down| first last none| distant dramatic midrange near none normal|inset | full none|3d | auto smooth|gutter- auto both stable| auto none thin| inner none| auto dvh dvw fit full lvh lvw max min px svh svw| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs rail-item|base | center end justify left right start| clip ellipsis| balance nowrap pretty wrap| normal tight tighter wide wider widest| cpu gpu none| 3d flat| all colors none opacity shadow transform| discrete normal| full px| auto dvh dvw fit full lvh lvw max min px screen svh svw| rail rail-expanded sidebar sidebar-compact| auto contents scroll transform".split('|').map((s) => {
+const SETS = "container |break-after- all auto avoid avoid-page column left page right|break-before- all auto avoid avoid-page column left page right|break-inside-a uto void void-column void-page|box-decoration- clone slice|box- border content| contents flow-root hidden table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group| not-sr-only sr-only|float- end left none right start|clear- both end left none right start|isolat e ion-auto|overflow- auto clip hidden scroll visible|overflow-x- auto clip hidden scroll visible|overflow-y- auto clip hidden scroll visible|overscroll- auto contain none|overscroll-x- auto contain none|overscroll-y- auto contain none| absolute fixed relative static sticky| collapse invisible visible|justify- around baseline between center center-safe end end-safe evenly normal start stretch|justify-items- center center-safe end end-safe normal start stretch|justify-self- auto center center-safe end end-safe start stretch|items- baseline baseline-last center center-safe end end-safe start stretch|self- auto baseline baseline-last center center-safe end end-safe start stretch|place-content- around baseline between center center-safe end end-safe evenly start stretch|place-items- baseline center center-safe end end-safe start stretch|place-self- auto center center-safe end end-safe start stretch| antialiased subpixel-antialiased| italic not-italic|normal-nums |ordinal |slashed-zero | lining-nums oldstyle-nums| proportional-nums tabular-nums| diagonal-fractions stacked-fractions| no-underline overline| capitalize lowercase normal-case uppercase|truncate |whitespace- break-spaces normal nowrap pre pre-line pre-wrap|break- all keep normal words|wrap- anywhere break-word normal|hyphens- auto manual none|mix-blend- color color-burn color-dodge darken difference exclusion hard-light hue lighten luminosity multiply normal overlay plus-darker plus-lighter saturation screen soft-light|table- auto fixed|caption- bottom top|backface- hidden visible|appearance- auto none|scheme- dark light light-dark normal only-dark only-light|field-sizing- content fixed|pointer-events- auto none|resize  -none -x -y|snap- align-none center end start|snap- always normal|snap- both none x y|snap- mandatory proximity|touch- auto manipulation none|touch-pan- left right x|touch-pan- down up y|touch-pinch-zoom |select- all auto none text|forced-color-adjust- auto none| normal size| baseline bottom middle sub super text-bottom text-top top| bounce none ping pulse spin| auto square video| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs fr max min px|none | auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs full px| fixed local scroll|clip- border content padding text|origin- border content padding| bottom bottom-left bottom-right center left left-bottom left-top right right-bottom right-top top top-left top-right| no-repeat repeat repeat-round repeat-space repeat-x repeat-y| auto contain cover| gradient-to-b gradient-to-bl gradient-to-br gradient-to-l gradient-to-r gradient-to-t gradient-to-tl gradient-to-tr none|blend- color color-burn color-dodge darken difference exclusion hard-light hue lighten luminosity multiply normal overlay saturation screen soft-light|to- b bl br l r t tl tr| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh fit full lh lvh max min px screen svh| dashed dotted double hidden none solid| collapse separate| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs px|auto |full | content none strict| inline-size size|layout |paint |style | around baseline between center center-safe end end-safe evenly normal start stretch| alias all-scroll auto cell col-resize context-menu copy crosshair default e-resize ew-resize grab grabbing help move n-resize ne-resize nesw-resize no-drop none not-allowed ns-resize nw-resize nwse-resize pointer progress row-resize s-resize se-resize sw-resize text vertical-text w-resize wait zoom-in zoom-out| dashed dotted double solid wavy| auto from-font|reverse |initial | in in-out initial linear out| col col-reverse row row-reverse| nowrap wrap wrap-reverse| auto initial none| black bold extrabold extralight light medium normal semibold thin| condensed expanded extra-condensed extra-expanded normal semi-condensed semi-expanded ultra-condensed ultra-expanded|flow- col col-dense dense row row-dense| none subgrid| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lh lvh lvw max min px rail-item row-lg row-md row-sm screen statusbar svh svw topbar| block flex grid table| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvw fit full lvw max min px screen svw| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs loose none normal px relaxed snug tight|through |item | inside outside| decimal disc none| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs px| clip-border clip-content clip-fill clip-padding clip-stroke clip-view no-clip| add exclude intersect subtract| alpha luminance match|origin- border content fill padding stroke view|type- alpha luminance| circle ellipse| closest-corner closest-side farthest-corner farthest-side|at- bottom bottom-left bottom-right center left left-bottom left-top right right-bottom right-top top top-left top-right| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh fit full lh lvh max min none px screen svh| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lh lvh lvw max min none px rail-item row-lg row-md row-sm screen statusbar svh svw topbar| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvw fit full lvw max min none px screen svw| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min none prose px rail rail-expanded sidebar sidebar-compact svh svw| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min none px rail rail-expanded screen sidebar sidebar-compact svh svw| contain cover fill none scale-down| first last none| distant dramatic midrange near none normal|inset | full none|3d | auto smooth|gutter- auto both stable| auto none thin| inner none| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min px rail-item svh svw|base | center end justify left right start| clip ellipsis| balance nowrap pretty wrap| normal tight tighter wide wider widest| cpu gpu none| 3d flat| all colors none opacity shadow transform| discrete normal| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs full px| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min px rail rail-expanded screen sidebar sidebar-compact svh svw| auto contents scroll transform".split('|').map((s) => {
     const tails = s.split(' ')
     const prefix = tails.shift()!
     for (let i = 0; i < tails.length; i++) {
@@ -99,12 +99,12 @@ const SETS = "container |break-after- all auto avoid avoid-page column left page
     }
     return tails
 })
-const AA = DZ("0000000000000000000000000000000000000000000000000000000000000262242:6@200000006:240B428:44224000020460442224262200266426424062026224222824220022400000000\\00N222422242222222224062242222222422226264222422222222222222442804222422222222222222222222220<40<02042600024440202042244022")
-const AG = DZ("ɠ222222222222222222222222222222222222222222222222222222222222˕4222226>ʶ22ʷʺʷ2ʸʷ42ʴ2ʓ22>621422ɶ222ɹɼɷɺɷɺ22ɱ42222ɨ2ɧ26622ɘɓ24ɐɋƸƵ222]d24242ǖǓƚÆȭ2263ȪȧȪ2222222ǥ222222222222222222DŽƿ2ǀƷ2222222422222ƞƓ22222222222222222222144Ũť22Ťš222222222222222222222ĺ2ij6İħĪħĪɥŰ4Ĥ¯²ġ822ĘĕĘ2ė22226Čĉ2")
-const AS = DZ("02222222222222222222222222222222222222222222222222222222222222222202022222222222EH2200IL021042222Y\\222IL0cf2e10j2222U00X2022]`2{0000120~}€„22‡Š‰:22~22222222222G000sˆOVI00000œ2>40000ŽŸB00000Iª«000®00000000000000021M°¯00²•000000000000000000000˜2222ŸHGHa1¾222Ã2Ä2222ÍÐ000±´22·")
-const litAnchor = new Int32Array(1020)
-const litGroup = new Int32Array(1020)
-const litPool = new Int32Array(1020)
+const AA = DZ("0000000000000000000000000000000000000000000000000000000000000262242:6@200000006:240B428:4422400002046044222426220026642642462026224222824220022400000000\\00N222422242222222224062242222222422226264222422222222222222442804222422222222222222222222220<4<0204260002444020204224422")
+const AG = DZ("ɠ222222222222222222222222222222222222222222222222222222222222˕4222226>ʶ22ʷʺʷ2ʸʷ42ʴ2ʓ22>621422ɶ222ɹɼɷɺɷɺ22ɱ42222ɨ2ɧ26622ɘɓ244ƸƵ222]d24242ǖǓƚÄȫ2263ȨȥȨ2222222ǣ222222222222222222ǂƽ2ƾƵ2222222422222ƜƑ22222222222222222222144Ŧţ22Ţş222222222222222222222ĸ2ı68ĦģĦɡŰ4Ġ«®ĝ822ĔđĔ2ē2222622")
+const AS = DZ("02222222222222222222222222222222222222222222222222222222222222222202022222222222EH2200IL021042222Y\\222IL0cf2e10j2222U00X202[^2y0000120|{~‚22…ˆ‡:22|22222222222G000q†OVI00000}š2›>40000ŒB00000I¨©000¬00000000000000021M®­00°“000000000000000000000–222›HGHa1º222¿2À2222ÉÌ000­°2±")
+const litAnchor = new Int32Array(1635)
+const litGroup = new Int32Array(1635)
+const litPool = new Int32Array(1635)
 let poolText = ''
 const poolOffsets = new Int32Array(1072)
 {
@@ -129,9 +129,9 @@ const poolOffsets = new Int32Array(1072)
     }
 }
 // conflict adjacency (engine builds claim bitmask CSR at init)
-const adjGid = DZ("0b2N:222@R>F@286¦2@H2D266226FB22B2>BD\\6N22222Z222D222t")
+const adjGid = DZ("0b2N:222@R>F@286¦2@H2D266226FB22B2>BD\\6N22222Z222D222p")
 const adjStart = PS(U("1::24444432:442:44:44>222222:44:4421322511111311111114"))
-const adjTgt = DZ("2Š4A;33N=C@H4A;33N=C@<27;83:;8393NQ:3NQʰ222ˉºŴŽ2R2=18cƴÅҜ=cĞÛC1ƈǝȈ:ħ25=11D3A@4=<1;1DEr25;11B3?<6;:371BCn9@7=<8192>2E121@9@EHE@9>2T25511<398454131<=V25511<398454131<=„ƧNž2Ĕé242L222290000f22500ɛ000ǘ222")
+const adjTgt = DZ("2Š4A;33N=C@H4A;33N=C@<27;83:;8393NQ:3NQʰ222ˉºŴŽ2R2=18cƴÅҜ=cĞÛC1ƈǝȈ:ħ25=11D3A@4=<1;1DEr25;11B3?<6;:371BCn9@7=<8192>2E121@9@EHE@9>2T25511<398454131<=V25511<398454131<=„ƧNž2Đå242L222290000f22500ɛ000ǘ222")
 const patGid = U("ij")
 const patTgt = U("—")
 const postfixLookupGroups = U("1")

package/src/styles/base.css

@@ -59,8 +59,11 @@
   }
 }
 
+/* Presence, like the variants above: corvu and Kobalte mark a selected item
+   with an empty attribute (`data-selected=""`), while cmdk writes `"true"` and
+   `"false"`. Matching only `'true'` left every corvu calendar day unfilled. */
 @custom-variant data-selected {
-  &:where([data-selected='true']) {
+  &:where([data-selected]:not([data-selected='false'])) {
     @slot;
   }
 }

package/src/styles/theme.css

@@ -16,9 +16,10 @@
  *     lightness step reads as the same step in every hue and a re-hue does not
  *     need its ramp re-derived by eye.
  *   - **`@adea-ai/themes` supplies the values.** The two default themes are composed
- *     there from upstream palettes — Aardvark Ink's canvas and greyscale for Adea
- *     Dark, Nord Light's for Adea Light, and GitHub's hues for both — and normalized
- *     against measured contrast floors. The colour declarations in sections 1 and 2
+ *     there from upstream palettes — GitHub Dark Default's canvas and greyscale,
+ *     re-greyed to violet, for Adea Dark; GitHub Light Default's white canvas for Adea
+ *     Light; and GitHub's dark hues for both — and normalized against measured
+ *     contrast floors. The colour declarations in sections 1 and 2
  *     are *generated* from that catalogue (`bun run theme:build`) rather than written
  *     here; everything else in this file is this system's own.
  *
@@ -41,11 +42,11 @@
  * ========================================================================== */
 
 /* ---------------------------------------------------------------------------
- * 1. Colour — light theme (the default)
+ * 1. Colour — light theme (the `:root` fallback; Storybook opens dark)
  *
- * Contrast: body text 8.6:1 on the canvas and 7.7:1 on a card, `--muted-foreground`
- * 5.5:1 on the canvas and 5.0:1 on a card, `--primary-foreground` on `--primary`
- * 5.9:1. Measured rather than estimated; `tests/tokens.test.ts` asserts each pairing.
+ * Contrast: body text 15.8:1 on the canvas and 14.3:1 on a card, `--muted-foreground`
+ * 6.2:1 on the canvas and 5.6:1 on a card and the sidebar, `--primary-foreground` on
+ * `--primary` 6.1:1. Measured rather than estimated; `tests/tokens.test.ts` asserts each pairing.
  * ------------------------------------------------------------------------- */
 :root {
   /* @generated theme:root — run `bun run theme:build` after changing the catalogue */
@@ -176,13 +177,15 @@
 /* ---------------------------------------------------------------------------
  * 2. Colour — dark theme
  *
- * adea's dark theme is a *soft* neutral rather than a near-black: the canvas is a
- * light grey and the primary is near-white. That is the product's existing look,
- * and it is deliberately not the near-black blue-tinted dark of the donor this
- * system's structure came from.
+ * A near-black violet-grey canvas — GitHub Dark Default's greyscale with its chroma
+ * halved and its hue turned from blue to violet — and a bright violet primary that
+ * carries a near-black label. The tint is what pairs it with the light theme's
+ * violet; it is deliberately not the blue-tinted dark of the donor this system's
+ * structure came from.
  *
- * Contrast: body text 14.9:1, `--muted-foreground` 6.1:1 on the canvas and 4.9:1
- * on a card, `--primary-foreground` on `--primary` 10.4:1.
+ * Contrast: body text 16.0:1 on the canvas and 14.9:1 on a card,
+ * `--muted-foreground` 7.0:1 on the canvas and 6.5:1 on a card and the sidebar,
+ * `--primary-foreground` on `--primary` 7.5:1.
  * ------------------------------------------------------------------------- */
 .dark {
   /* @generated theme:dark — run `bun run theme:build` after changing the catalogue */
@@ -304,7 +307,7 @@
 /* ---------------------------------------------------------------------------
  * 3. The accent axis
  *
- * adea's six accents, as a selection rather than a constant. `data-accent` sits on
+ * adea's six accent presets, as a selection rather than a constant. `data-accent` sits on
  * the same element as `dark` — in both applications that is `<html>` — and each
  * block overrides the roles an accent owns: the interactive primary, its label,
  * its hover rung, its tint and the focus ring.
@@ -319,7 +322,7 @@
  *      for exactly this reason: a bright violet in dark mode carries a black
  *      label, and the same accent's deep light-mode form carries a white one.
  *
- * `theme` (the default) is the monochrome primary above and needs no block.
+ * `theme` (the default) is the theme's own primary above and needs no block.
  * ------------------------------------------------------------------------- */
 
 /* @generated accents — run `bun run theme:build` after changing the catalogue */
@@ -490,23 +493,6 @@
   --ui-word-spacing: -2.5px;
 }
 
-/* The default, and it has to be declared *above* the blocks above.
- *
- * `:root` and `[data-font='…']` have the same specificity, so the later one wins
- * outright. With the default written after them — which is where it naturally
- * belongs, next to the stacks it references — every `[data-font]` block was
- * dead: all five typefaces resolved to Space Grotesk while the toolbar reported a
- * different selection.
- *
- * The references resolve fine from here even though `--font-family-*` is declared
- * further down, because a custom property is resolved where it is used rather than
- * where it is declared. The ordering that matters is between two declarations of
- * the *same* property, and there is only one of those below.
- *
- * `tests/appearance-axes.test.ts` asserts this order, because "the block is above
- * the default" is invisible to review and to every behavioural test.
- */
-
 /* ---------------------------------------------------------------------------
  * 4. Non-colour scales
  *
@@ -596,12 +582,6 @@
   --row-height-md: 2rem;
   --row-height-lg: 2.25rem;
 
-  /* Space Grotesk is the default because it is the face the visual language was
-     drawn against: the donor this system's structure comes from sets it, and its
-     slightly narrow, geometric forms are part of the look. The *selection* that
-     picks between it and the other four is the `:root` block above, which has to
-     precede every `[data-font]` block for the reason given there. */
-
   /* Shell geometry. One place to change how wide a rail or sidebar is, so the two
      consumer apps cannot disagree. 56px keeps the icon column to its content:
      20px glyphs centred in a 36px row need less chrome than the 74px the donor's
@@ -621,9 +601,9 @@
   --tooltip-max-width: min(16rem, calc(100vw - 1.5rem));
 
   /* Shadows. Two parts on purpose: a tinted spread that reads as elevation, plus a
-     hairline that keeps an edge visible when the surface behind a panel is the
-     same colour as the panel — which is the light theme, where `--card` and
-     `--background` are both white. */
+     hairline that keeps an edge visible when the surface behind a panel is
+     nearly the same colour as the panel — which is the light theme, where `--card`
+     is one faint step off a white `--background`. */
   --shadow-2xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
   --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.06);
   --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06), 0 0 0 1px oklch(0 0 0 / 0.04);
@@ -631,8 +611,8 @@
   --shadow-lg: 0 12px 28px oklch(0 0 0 / 0.12);
   --shadow-xl: 0 20px 44px oklch(0 0 0 / 0.16);
 
-  /* Motion. Two durations cover the system: `fast` for a state change the user is
-     already watching, `normal` for an entrance. The easing is KiroCrew's entrance
+  /* Motion. Three durations cover the system: `fast` for a state change the user is
+     already watching, `normal` for an entrance, `slow` for a layout settle. The easing is KiroCrew's entrance
      curve — a fast start and a long settle, which reads as decisive rather than
      floaty. */
   --duration-fast: 120ms;