@adea-ai/ui 0.101.0 → 0.102.0

package/dist/r/src/components/ui/board/board.tsx

@@ -1,8 +1,10 @@
 import {
+  type ComponentProps,
   createEffect,
   createMemo,
   createSignal,
   For,
+  Index,
   onCleanup,
   Show,
   splitProps,
@@ -10,6 +12,8 @@ import {
 } from 'solid-js'
 import { cva, type VariantProps } from '../../../lib/variants'
 import { cn } from '../../../lib/utils'
+import { badgeVariants } from '../badge/badge'
+import { headingVariants, textVariants } from '../typography'
 
 /**
  * Board.
@@ -37,13 +41,48 @@ import { cn } from '../../../lib/utils'
  * of drag props. That is deliberate: a card's contents are domain — a title, a
  * priority tag, an assignee — and a board that rendered them itself could only
  * ever serve one product.
+ *
+ * `collapseEmpty` folds a column with no cards to a strip one line of text wide,
+ * its label turned on its side. A board of seven lanes where three are empty
+ * otherwise spends half its width on nothing, and the lanes with work in them
+ * are the ones that need the room. A folded lane is still a full-height drop
+ * target and still accepts a keyboard move, so nothing about operating the
+ * board changes; it does not unfold under a drag, because a lane that grows
+ * under the pointer moves every lane after it and the drop lands somewhere else.
+ *
+ * Give the board a height (`class="h-full"`) and each lane scrolls on its own;
+ * leave it unconstrained and lanes grow with their cards and the page scrolls.
  */
 
+/**
+ * A lane's identifying colour, drawn as a dot before its label. The chart hues,
+ * in the order the token set gives them, because a lane colour tells lanes apart
+ * like a series does; it carries no status. `neutral` is for a lane that should
+ * not draw the eye — a backlog, an archive.
+ */
+export type BoardTone =
+  | 'neutral'
+  | 'chart-1'
+  | 'chart-2'
+  | 'chart-3'
+  | 'chart-4'
+  | 'chart-5'
+  | 'chart-6'
+
 export type BoardColumn = Readonly<{
   id: string
   label: string
-  /** A count or a limit, shown beside the label. */
+  /** The number of cards, shown as an accent count beside the label. */
+  count?: number
+  /** A limit or any other note, shown after the count. */
   meta?: JSX.Element
+  /** The lane's dot colour. Omitted, the header has no dot. */
+  tone?: BoardTone
+  /**
+   * `false` keeps this lane open when it is empty under `collapseEmpty` — the
+   * inbox lane new cards arrive in, which should always show where they land.
+   */
+  collapsible?: boolean
   /** Dim the column and refuse drops — a lane that is closed or read-only. */
   disabled?: boolean
 }>
@@ -70,6 +109,8 @@ export type BoardProps<T> = {
   emptyColumn?: (column: BoardColumn) => JSX.Element
   /** The board's accessible name. Defaults to "Board". */
   label?: string
+  /** Fold columns with no cards to a narrow strip with a sideways label. */
+  collapseEmpty?: boolean
   class?: string
 }
 
@@ -78,6 +119,40 @@ const cardDragState = {
   dragging: 'opacity-40',
 } as const
 
+const toneDot: Record<BoardTone, string> = {
+  neutral: 'bg-muted-foreground',
+  'chart-1': 'bg-chart-1',
+  'chart-2': 'bg-chart-2',
+  'chart-3': 'bg-chart-3',
+  'chart-4': 'bg-chart-4',
+  'chart-5': 'bg-chart-5',
+  'chart-6': 'bg-chart-6',
+}
+
+function BoardColumnDot(props: { tone?: BoardTone }) {
+  return (
+    <Show when={props.tone}>
+      {(tone) => (
+        <span aria-hidden="true" class={cn('size-2 shrink-0 rounded-full', toneDot[tone()])} />
+      )}
+    </Show>
+  )
+}
+
+function BoardColumnCount(props: { count?: number }) {
+  return (
+    <Show when={props.count !== undefined}>
+      {/* The Badge's classes, not the component: Board stays free of Kobalte. */}
+      <span
+        class={cn(badgeVariants({ variant: 'subtle', size: 'sm' }), 'tabular-nums')}
+        data-slot="board-column-count"
+      >
+        {props.count}
+      </span>
+    </Show>
+  )
+}
+
 export function Board<T>(props: BoardProps<T>) {
   const [local] = splitProps(props, [
     'columns',
@@ -89,6 +164,7 @@ export function Board<T>(props: BoardProps<T>) {
     'children',
     'emptyColumn',
     'label',
+    'collapseEmpty',
     'class',
   ])
 
@@ -135,9 +211,15 @@ export function Board<T>(props: BoardProps<T>) {
     })
   })
 
-  const prepareFocus = (item: T, columnId: string, source?: HTMLElement) => {
+  /**
+   * `always` is for a pointer drop: dragging a card is a direct act on it, so it
+   * ends focused wherever focus was. Chromium also blurs a focused control
+   * inside a draggable once the native drag starts, so "was focus in the card"
+   * cannot be read at drop time.
+   */
+  const prepareFocus = (item: T, columnId: string, source?: HTMLElement, always = false) => {
     const card = source ?? cardElements.get(local.itemId(item))
-    if (card?.contains(card.ownerDocument.activeElement)) {
+    if (card && (always || card.contains(card.ownerDocument.activeElement))) {
       setPendingFocus({ itemId: local.itemId(item), columnId, source: card })
     }
   }
@@ -163,7 +245,7 @@ export function Board<T>(props: BoardProps<T>) {
     setDragging(null)
     setOverColumn(null)
     if (!item || !from || from === column.id || !accepted) return
-    prepareFocus(item, column.id)
+    prepareFocus(item, column.id, undefined, true)
     local.onMove({ itemId: local.itemId(item), from, to: column.id })
   }
 
@@ -198,97 +280,144 @@ export function Board<T>(props: BoardProps<T>) {
       with more columns than fit, has nothing focusable to scroll from.
     */
     <div
-      class={cn('flex min-h-0 gap-4 overflow-x-auto pb-2', local.class)}
+      class={cn('flex min-h-0 gap-3 overflow-x-auto pb-2', local.class)}
       role="region"
       aria-label={local.label ?? 'Board'}
       tabindex="0"
     >
-      <For each={local.columns}>
+      {/*
+        Index, not For: callers derive columns (a count, a tone) and hand over
+        fresh objects whenever a card moves. Keyed by identity, every lane would
+        remount on each move and take the moved card's restored focus with it.
+      */}
+      <Index each={local.columns}>
         {(column) => {
-          const items = () => byColumn().get(column.id) ?? []
+          const items = () => byColumn().get(column().id) ?? []
+          const collapsed = () =>
+            Boolean(local.collapseEmpty) && column().collapsible !== false && items().length === 0
+          const over = () => overColumn() === column().id
           return (
             <section
               class={cn(
-                'flex w-72 shrink-0 flex-col gap-2 rounded-lg border border-border bg-muted/40 p-2',
-                accepts(column) && 'border-ring bg-muted',
-                overColumn() === column.id && !accepts(column) && 'border-dashed opacity-60',
-                column.disabled && 'opacity-50'
+                'flex shrink-0 flex-col rounded-lg border border-border bg-muted/40 transition-colors',
+                {
+                  'w-72': !collapsed(),
+                  'w-10 items-center': collapsed(),
+                  'border-dashed border-ring': accepts(column()) && !over(),
+                  'border-ring bg-primary-subtle': accepts(column()) && over(),
+                  'border-dashed opacity-60': over() && !accepts(column()),
+                  'opacity-50': column().disabled,
+                }
               )}
-              aria-label={column.label}
+              aria-label={column().label}
+              data-collapsed={collapsed() ? '' : undefined}
               onDragOver={(event) => {
-                setOverColumn(column.id)
-                if (accepts(column)) event.preventDefault()
+                setOverColumn(column().id)
+                if (accepts(column())) event.preventDefault()
+              }}
+              onDragLeave={(event) => {
+                // Leaving for a child is not leaving the lane.
+                if (event.currentTarget.contains(event.relatedTarget as Node | null)) return
+                setOverColumn((current) => (current === column().id ? null : current))
               }}
-              onDragLeave={() =>
-                setOverColumn((current) => (current === column.id ? null : current))
-              }
               onDrop={(event) => {
                 event.preventDefault()
-                drop(column)
+                drop(column())
               }}
             >
-              <header class="flex items-center justify-between gap-2 px-1 py-0.5">
-                <h3 class="text-xs font-semibold text-foreground">{column.label}</h3>
-                <Show when={column.meta}>
-                  <span class="text-2xs text-muted-foreground">{column.meta}</span>
-                </Show>
-              </header>
-              <div class="flex min-h-16 flex-col gap-2">
-                <For each={items()}>
-                  {(item) => {
-                    const isDragging = () => {
-                      const current = dragging()
-                      return Boolean(current && local.itemId(current) === local.itemId(item))
-                    }
-                    return (
-                      <article
-                        ref={(element) => {
-                          const id = local.itemId(item)
-                          cardElements.set(id, element)
-                          onCleanup(() => {
-                            if (cardElements.get(id) === element) cardElements.delete(id)
-                          })
-                        }}
-                        class={cn(
-                          'rounded-md border border-border bg-card text-sm shadow-xs',
-                          cardDragState[isDragging() ? 'dragging' : 'idle']
-                        )}
-                        // A board card is a control that can be moved, so it is
-                        // focusable and carries the chord it responds to.
-                        tabindex="0"
-                        aria-roledescription="Draggable card"
-                        draggable={true}
-                        onDragStart={() => setDragging(() => item)}
-                        onDragEnd={() => {
-                          setDragging(null)
-                          setOverColumn(null)
-                        }}
-                        onKeyDown={(event) => {
-                          if (!(event.ctrlKey || event.metaKey)) return
-                          if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
-                          event.preventDefault()
-                          moveByKeyboard(
-                            item,
-                            event.key === 'ArrowRight' ? 1 : -1,
-                            event.currentTarget
-                          )
-                        }}
-                      >
-                        {local.children(item, { dragging: isDragging() })}
-                      </article>
-                    )
-                  }}
-                </For>
-                <Show when={items().length === 0}>
-                  <p class="rounded-md border border-dashed border-border px-2 py-4 text-center text-2xs text-muted-foreground">
-                    {local.emptyColumn?.(column) ?? 'Nothing here'}
-                  </p>
-                </Show>
-              </div>
+              <Show
+                when={!collapsed()}
+                fallback={
+                  <header class="flex flex-col items-center gap-2 py-3">
+                    <BoardColumnDot tone={column().tone} />
+                    <BoardColumnCount count={column().count} />
+                    <h3
+                      class={cn(
+                        headingVariants({ size: 'subsection', leading: 'none', tone: 'muted' }),
+                        'text-vertical'
+                      )}
+                    >
+                      {column().label}
+                    </h3>
+                  </header>
+                }
+              >
+                <header class="flex h-10 shrink-0 items-center gap-2 px-3">
+                  <BoardColumnDot tone={column().tone} />
+                  <h3
+                    class={cn(
+                      headingVariants({ size: 'subsection', leading: 'none', tone: 'foreground' }),
+                      'truncate'
+                    )}
+                  >
+                    {column().label}
+                  </h3>
+                  <BoardColumnCount count={column().count} />
+                  <Show when={column().meta}>
+                    <span class="ms-auto text-2xs text-muted-foreground">{column().meta}</span>
+                  </Show>
+                </header>
+                <div class="flex min-h-16 flex-1 flex-col gap-2 overflow-y-auto px-2 pb-2">
+                  <For each={items()}>
+                    {(item) => {
+                      const isDragging = () => {
+                        const current = dragging()
+                        return Boolean(current && local.itemId(current) === local.itemId(item))
+                      }
+                      return (
+                        <article
+                          ref={(element) => {
+                            const id = local.itemId(item)
+                            cardElements.set(id, element)
+                            onCleanup(() => {
+                              if (cardElements.get(id) === element) cardElements.delete(id)
+                            })
+                          }}
+                          class={cn(
+                            'relative shrink-0 cursor-grab rounded-md border border-border bg-card text-sm shadow-xs outline-none transition-colors hover:bg-surface-hover focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle active:cursor-grabbing',
+                            cardDragState[isDragging() ? 'dragging' : 'idle']
+                          )}
+                          // A board card is a control that can be moved, so it is
+                          // focusable and carries the chord it responds to.
+                          tabindex="0"
+                          aria-roledescription="Draggable card"
+                          draggable={true}
+                          onDragStart={(event) => {
+                            event.dataTransfer?.setData('text/plain', local.itemId(item))
+                            if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'
+                            setDragging(() => item)
+                          }}
+                          onDragEnd={() => {
+                            setDragging(null)
+                            setOverColumn(null)
+                          }}
+                          onKeyDown={(event) => {
+                            if (!(event.ctrlKey || event.metaKey)) return
+                            if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+                            event.preventDefault()
+                            moveByKeyboard(
+                              item,
+                              event.key === 'ArrowRight' ? 1 : -1,
+                              event.currentTarget
+                            )
+                          }}
+                        >
+                          {local.children(item, { dragging: isDragging() })}
+                        </article>
+                      )
+                    }}
+                  </For>
+                  <Show when={items().length === 0}>
+                    <p class="rounded-md border border-dashed border-border px-2 py-4 text-center text-2xs text-muted-foreground">
+                      {local.emptyColumn?.(column()) ?? 'Nothing here'}
+                    </p>
+                  </Show>
+                </div>
+              </Show>
             </section>
           )
         }}
-      </For>
+      </Index>
       {/*
         The keyboard move's result, announced. A drag speaks for itself — the card
         visibly moves — while a keyboard move happens with the focus elsewhere.
@@ -320,3 +449,28 @@ export function BoardCardTitle(props: BoardCardTitleProps) {
 export function BoardCardBody(props: { class?: string; children: JSX.Element }) {
   return <div class={cn('grid gap-1.5 p-2.5', props.class)}>{props.children}</div>
 }
+
+/**
+ * The card's open action: its title, as a real button whose hit area stretches
+ * over the whole card. A card is one target to a pointer — clicking anywhere on
+ * it opens it — while assistive technology still meets a named button rather
+ * than a clickable `article`. Other controls on the card sit above the stretched
+ * area by being positioned (`class="relative"`), so they keep their own click.
+ */
+export function BoardCardTrigger(props: ComponentProps<'button'>) {
+  const [local, rest] = splitProps(props, ['class', 'type'])
+  return (
+    <button
+      type={local.type ?? 'button'}
+      data-slot="board-card-trigger"
+      class={cn(
+        textVariants({ variant: 'label', tone: 'foreground' }),
+        'min-w-0 flex-1 truncate rounded-sm text-start outline-none',
+        'after:absolute after:inset-0 after:rounded-md',
+        'focus-visible:ring-3 focus-visible:ring-primary-subtle',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}

package/dist/r/src/components/ui/board/index.ts

@@ -2,9 +2,11 @@ export {
   Board,
   BoardCardBody,
   BoardCardTitle,
+  BoardCardTrigger,
   boardCardTitleVariants,
   type BoardCardTitleProps,
   type BoardColumn,
   type BoardMove,
   type BoardProps,
+  type BoardTone,
 } from './board'

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

@@ -2,7 +2,14 @@ import { splitProps, type ComponentProps, type JSX } from 'solid-js'
 import * as KobalteNavigationMenu from '@kobalte/core/navigation-menu'
 import { ChevronDown } from 'lucide-solid'
 import { cn } from '../../../lib/utils'
-import { menuContentPadding, menuItem, overlayMotion, overlaySurface } from '../../../lib/overlay'
+import {
+  menuContentPadding,
+  menuItem,
+  menuLabel,
+  menuSeparator,
+  overlayMotion,
+  overlaySurface,
+} from '../../../lib/overlay'
 
 /**
  * NavigationMenu.
@@ -123,7 +130,11 @@ export function NavigationMenuContent(props: ComponentProps<typeof KobalteNaviga
         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',
+          'absolute top-0 left-0 grid w-max gap-1 outline-none',
+          // The viewport is the surface and carries no padding of its own (its
+          // measured size is the panel's), so the panel supplies the inset every
+          // menu surface shares — the one the separator's bleed is cut for.
+          menuContentPadding,
           // 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
@@ -193,7 +204,11 @@ export function NavigationMenuItem(props: NavigationMenuItemProps) {
     <KobalteNavigationMenu.Item
       class={cn(
         menuItem,
-        'grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-0.5',
+        // The description sits under the label, in the label's column. Without
+        // an icon there is no leading column, and a two-column grid would set
+        // the description beside the label instead of beneath it.
+        local.icon ? 'grid grid-cols-[auto_1fr]' : 'grid grid-cols-1',
+        'items-center gap-x-2 gap-y-0.5',
         local.description && 'grid-rows-[auto_auto] py-2',
         local.class
       )}
@@ -202,7 +217,13 @@ export function NavigationMenuItem(props: NavigationMenuItemProps) {
       {local.icon}
       <span class="font-medium">{local.children}</span>
       {local.description && (
-        <span class="col-start-2 text-xs text-muted-foreground">{local.description}</span>
+        <span
+          class={cn('text-xs text-muted-foreground', {
+            'col-start-2': !!local.icon,
+          })}
+        >
+          {local.description}
+        </span>
       )}
     </KobalteNavigationMenu.Item>
   )
@@ -212,12 +233,7 @@ export function NavigationMenuSeparator(
   props: ComponentProps<typeof KobalteNavigationMenu.Separator>
 ) {
   const [local, rest] = splitProps(props, ['class'])
-  return (
-    <KobalteNavigationMenu.Separator
-      class={cn('-mx-1 my-1 h-px bg-border', local.class)}
-      {...rest}
-    />
-  )
+  return <KobalteNavigationMenu.Separator class={cn(menuSeparator, local.class)} {...rest} />
 }
 
 /** A non-interactive caption above a group of items. */
@@ -225,16 +241,7 @@ export function NavigationMenuGroupLabel(
   props: ComponentProps<typeof KobalteNavigationMenu.GroupLabel>
 ) {
   const [local, rest] = splitProps(props, ['class'])
-  return (
-    <KobalteNavigationMenu.GroupLabel
-      class={cn(
-        menuContentPadding,
-        'text-2xs font-semibold text-muted-foreground uppercase',
-        local.class
-      )}
-      {...rest}
-    />
-  )
+  return <KobalteNavigationMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />
 }
 
 export function NavigationMenuGroup(props: ComponentProps<typeof KobalteNavigationMenu.Group>) {

package/dist/r/src/components/ui/tabs/tabs.tsx

@@ -13,6 +13,7 @@ import { cn } from '../../../lib/utils'
 
 type TabsIdContextValue = {
   id: Accessor<string>
+  orientation: Accessor<'horizontal' | 'vertical'>
   triggerIds: Accessor<ReadonlyMap<string, string>>
   registerTriggerId: (value: string, id: string) => void
   unregisterTriggerId: (value: string, id: string) => void
@@ -43,6 +44,7 @@ export function Tabs(props: ComponentProps<typeof KobalteTabs>) {
   const [triggerIds, setTriggerIds] = createSignal<ReadonlyMap<string, string>>(new Map())
   const tabs: TabsIdContextValue = {
     id,
+    orientation: () => rest.orientation ?? 'horizontal',
     triggerIds,
     registerTriggerId: (value, triggerId) => {
       setTriggerIds((current) => new Map(current).set(value, triggerId))
@@ -103,6 +105,19 @@ export type TabsTriggerProps = ComponentProps<typeof KobalteTabs.Trigger> & {
   appearance?: 'underline' | 'segmented'
 }
 
+/**
+ * The underline appearance marks the selected trigger on the edge it shares
+ * with the list's axis. A horizontal row reads left to right along a baseline,
+ * so the mark is a bottom bar sitting on the list's rule. A vertical list stacks
+ * its triggers, and a bottom bar there underlines one row of a column — it reads
+ * as a divider, not a selection — so the mark moves to the inline-start edge,
+ * the leading bar a side navigation uses, and the label aligns to that edge.
+ *
+ * The orientation is read from the root rather than from a `data-orientation`
+ * selector so the vertical classes are unprefixed: a composite that replaces the
+ * mark (SettingsNavigation's filled row passes `border-0`) then overrides it
+ * through the ordinary class merge instead of fighting a variant-scoped border.
+ */
 export function TabsTrigger(props: TabsTriggerProps) {
   const [local, rest] = splitProps(props, ['class', 'appearance', 'id'])
   const tabs = useTabsId()
@@ -128,7 +143,9 @@ export function TabsTrigger(props: TabsTriggerProps) {
         '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',
         local.appearance === 'segmented'
           ? 'h-control-sm rounded-md px-control-sm data-[selected]:bg-card data-[selected]:shadow-xs'
-          : 'h-control-md -mb-px rounded-none border-b-2 border-transparent px-2 pb-2 data-[selected]:border-primary',
+          : tabs.orientation() === 'vertical'
+            ? 'h-control-md justify-start rounded-none border-s-2 border-transparent ps-3 pe-2 data-[selected]:border-primary'
+            : 'h-control-md -mb-px rounded-none border-b-2 border-transparent px-2 pb-2 data-[selected]:border-primary',
         local.class
       )}
       {...rest}

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

@@ -180,6 +180,10 @@ export type ToasterProps = ComponentProps<typeof KobalteToast.Region> & {
 }
 
 /**
+ * `class` lands on the region too: the props describe the region, and the
+ * region is the element a caller lays out (an inset clear of a status bar, a
+ * narrower stack). The list inside it is an implementation detail.
+ *
  * 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.
@@ -217,16 +221,13 @@ export function Toaster(props: ToasterProps) {
        */
       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']
+        toasterPosition[local.position ?? 'bottom-right'],
+        local.class
       )}
       {...rest}
     >
       <KobalteToast.List
-        class={cn(
-          'flex flex-col gap-2',
-          toasterAlignment[local.position ?? 'bottom-right'],
-          local.class
-        )}
+        class={cn('flex flex-col gap-2', toasterAlignment[local.position ?? 'bottom-right'])}
       />
     </KobalteToast.Region>
   )

package/dist/r/src/styles/base.css

@@ -244,6 +244,17 @@
   }
 }
 
+/**
+ * A label set on its side, reading top to bottom (turned 90° clockwise). For a
+ * collapsed lane or rail section that must stay named while it is only as wide
+ * as a line of text. Letters keep their orientation for the reader's head tilt
+ * rather than stacking, which is unreadable past a few characters.
+ */
+@utility text-vertical {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+}
+
 @utility no-scrollbar {
   -ms-overflow-style: none;
   scrollbar-width: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.101.0",
+  "version": "0.102.0",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",

package/registry.json

@@ -152,6 +152,8 @@
       "description": "",
       "dependencies": [],
       "registryDependencies": [
+        "@adea-ai/ui/badge",
+        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [