@adea-ai/ui 0.99.2 → 0.99.4

package/src/components/conversation/thread-panel.tsx

@@ -86,8 +86,11 @@ export function ThreadPanel(props: ThreadPanelProps) {
         <div class="bg-muted/40 shrink-0 border-b border-border px-3 py-2">{local.root}</div>
       </Show>
 
+      {/* The replies carry their own inline padding: a row brings only `px-1`, so
+          a bubble at its widest otherwise meets the panel's edge. `px-2` plus the
+          row's `px-1` lands on the `px-3` line the header and root use. */}
       <div
-        class="min-h-0 flex-1 overflow-y-auto overscroll-contain"
+        class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-2 py-2"
         role="region"
         aria-label="Thread replies"
         tabindex="0"

package/src/components/ui/badge/badge.tsx

@@ -25,6 +25,13 @@ export const badgeVariants = cva(
         destructive: 'bg-destructive-subtle text-foreground',
         info: 'bg-info-subtle text-foreground',
         subtle: 'bg-primary-subtle text-primary',
+        /**
+         * A count that asks for attention, pinned to a corner of another control
+         * (a workspace mark, a rail icon). At `sm` it is a 2xs label on whatever
+         * surface sits behind the corner, where the destructive tint all but
+         * disappears — so it takes the solid, contrast-measured action fill.
+         */
+        notification: 'bg-destructive-action text-destructive-action-foreground',
       },
       size: {
         sm: 'h-4 px-1.5 text-2xs',

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

@@ -131,6 +131,14 @@ export function ContextMenuRadioItem(props: ComponentProps<typeof KobalteContext
   )
 }
 
+/**
+ * The caption of a `ContextMenuGroup`, 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 ContextMenuLabel(props: ComponentProps<typeof KobalteContextMenu.GroupLabel>) {
   const [local, rest] = splitProps(props, ['class'])
   return <KobalteContextMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />

package/src/components/ui/drawer/drawer.tsx

@@ -41,7 +41,14 @@ export function DrawerOverlay(props: ComponentProps<typeof DrawerPrimitive.Overl
   )
 }
 
-export type DrawerContentProps = ComponentProps<typeof DrawerPrimitive.Content> & {
+export type DrawerContentProps = Omit<ComponentProps<typeof DrawerPrimitive.Content>, 'side'> & {
+  /**
+   * Not accepted here. corvu reads the side from the root `Drawer`, which uses it
+   * for the drag axis and publishes it as `data-side`; a `side` on the content
+   * would type-check through the polymorphic props and be silently ignored,
+   * leaving the drawer on the bottom edge. Set `<Drawer side="right">` instead.
+   */
+  side?: never
   /**
    * Draw the grabber at the leading edge of the sheet.
    *

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

@@ -187,6 +187,14 @@ export function DropdownMenuRadioItem(props: ComponentProps<typeof KobalteDropdo
   )
 }
 
+/**
+ * The caption of a `DropdownMenuGroup`, 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 DropdownMenuLabel(props: ComponentProps<typeof KobalteDropdownMenu.GroupLabel>) {
   const [local, rest] = splitProps(props, ['class'])
   return <KobalteDropdownMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />

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/tabs/tabs.tsx

@@ -75,6 +75,12 @@ export type TabsListProps = ComponentProps<typeof KobalteTabs.List> & {
   appearance?: 'underline' | 'segmented'
 }
 
+/**
+ * The underline appearance's rule is the baseline a horizontal row of tabs sits
+ * on. A vertical list has no baseline — its triggers stack — so the rule is
+ * dropped there; otherwise it draws as a stray line under the last trigger,
+ * spanning only the list's width (the SettingsLayout rail showed exactly that).
+ */
 export function TabsList(props: TabsListProps) {
   const [local, rest] = splitProps(props, ['class', 'appearance'])
 
@@ -84,7 +90,7 @@ export function TabsList(props: TabsListProps) {
         'inline-flex w-fit shrink-0 items-center justify-center',
         local.appearance === 'segmented'
           ? 'gap-0.5 rounded-lg bg-surface-hover p-0.5'
-          : 'gap-1 rounded-none border-b border-border',
+          : 'gap-1 rounded-none border-b border-border data-[orientation=vertical]:border-b-0',
         'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',
         local.class
       )}

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/components/ui/tooltip/tooltip.tsx

@@ -367,6 +367,9 @@ export function TooltipContent(props: TooltipContentProps) {
   return (
     <KobalteTooltip.Portal>
       <KobalteTooltip.Content
+        /* The slot is what base.css's pointer-transparency rule keys on; every
+           tip carries it, so no consumer has to remember to pass it. */
+        data-slot="tooltip-content"
         class={cn(
           tooltipTip,
           // The max width is a token, not a fixed measure: it has to fall

package/src/lib/version-notes.ts

@@ -34,15 +34,23 @@ export function plainTextFromMarkdown(markdown: string): string {
  * A release date, formatted for a reader. Returns the input when it cannot be
  * parsed — a date a build tool wrote in an unusual format is still better shown
  * verbatim than dropped.
+ *
+ * A date-only value (`2026-09-24`) is a calendar day, not an instant. `new Date`
+ * reads it as UTC midnight, and formatting that instant in the reader's zone
+ * moves it to the previous day anywhere west of UTC — so a date-only value is
+ * formatted in UTC, where its midnight still falls on the day it names. A full
+ * timestamp is a real instant and keeps the reader's zone.
  */
 export function formatReleaseDate(value: string | null): string | null {
   if (!value) return null
   const date = new Date(value)
   if (Number.isNaN(date.getTime())) return value
+  const dateOnly = /^\d{4}-\d{2}-\d{2}$/.test(value.trim())
   return new Intl.DateTimeFormat(undefined, {
     day: 'numeric',
     month: 'short',
     year: 'numeric',
+    ...(dateOnly ? { timeZone: 'UTC' } : {}),
   }).format(date)
 }
 

package/src/styles/base.css

@@ -592,6 +592,19 @@
       color var(--duration-normal) var(--ease-out);
   }
 
+  /* A tooltip is informational: neither its popper positioner nor its content
+     may intercept the pointer and block the control the tooltip describes —
+     or a control beside it. The layer stack writes `pointer-events: auto`
+     inline on the active layer, so the content needs `!important` to stay out
+     of the pointer path. */
+  [data-popper-positioner]:has(> [data-slot='tooltip-content']) {
+    pointer-events: none;
+  }
+
+  [data-slot='tooltip-content'] {
+    pointer-events: none !important;
+  }
+
   /* Keyboard focus only. `:focus-visible` rather than `:focus` so a pointer
      click never paints a ring. */
   :focus-visible {