@talelk/newui-organisms 1.0.0 → 2.0.0

package/src/organisms/DetailHeader/DetailHeader.tsx

@@ -1,6 +1,7 @@
 import { Badge, Button, type ButtonTheme } from '@talelk/newui-atoms'
 import { type BreadcrumbItem, Breadcrumbs } from '@talelk/newui-molecules'
 import { For, type JSX, Show } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
 
 export interface DetailAction {
   label: string
@@ -11,6 +12,8 @@ export interface DetailHeaderProps {
   /** The trail above the title. Omitted → no breadcrumbs. */
   breadcrumbs?: BreadcrumbItem[]
   title: JSX.Element
+  /** Semantic level of the title. @default 1 */
+  headingLevel?: 1 | 2 | 3 | 4
   /** Muted line under the title — a record id, an owner, a timestamp. */
   subtitle?: JSX.Element
   /** Status pill beside the title. */
@@ -49,7 +52,12 @@ export function DetailHeader(props: DetailHeaderProps): JSX.Element {
       <div class="flex flex-wrap items-start justify-between gap-card-gap">
         <div class="flex min-w-0 flex-col gap-1">
           <div class="flex min-w-0 items-center gap-control-gap">
-            <h1 class="truncate text-metric text-ink-gray-9">{props.title}</h1>
+            <Dynamic
+              component={`h${props.headingLevel ?? 1}`}
+              class="min-w-0 text-metric text-ink-gray-9 [overflow-wrap:anywhere]"
+            >
+              {props.title}
+            </Dynamic>
             <Show when={props.status}>
               {(status) => (
                 <Badge

package/src/organisms/FilterBar/FilterBar.test.tsx

@@ -135,6 +135,7 @@ describe('FilterBar', () => {
     render(() => (
       <FilterBar
         tabs={{
+          label: 'View',
           value: 'list',
           onValueChange,
           options: [
@@ -145,7 +146,7 @@ describe('FilterBar', () => {
       />
     ))
 
-    await userEvent.click(screen.getByRole('tab', { name: 'Board' }))
+    await userEvent.click(screen.getByRole('radio', { name: 'Board' }))
     expect(onValueChange).toHaveBeenCalledWith('board')
   })
 })

package/src/organisms/FilterBar/FilterBar.tsx

@@ -1,4 +1,4 @@
-import { Button, Icon, TextInput } from '@talelk/newui-atoms'
+import { Button, cn, Icon, TextInput } from '@talelk/newui-atoms'
 import { Select, type SelectOption, TabButtons } from '@talelk/newui-molecules'
 import { For, type JSX, onCleanup, onMount, Show } from 'solid-js'
 
@@ -35,6 +35,8 @@ export interface FilterBarProps {
   selects?: FilterSelect[]
   /** A segmented control on the trailing edge — the view switcher. */
   tabs?: {
+    /** Accessible name for the radiogroup. */
+    label: string
     options: FilterOption[]
     value?: string
     onValueChange?: (value: string) => void
@@ -51,6 +53,8 @@ export interface FilterBarProps {
   resultCount?: number
   /** Anything else on the trailing edge, after the tabs. */
   children?: JSX.Element
+  /** `bare` removes the card surface for a toolbar composed into a Section. */
+  surface?: 'card' | 'bare'
   class?: string
 }
 
@@ -106,6 +110,8 @@ export function FilterBar(props: FilterBarProps): JSX.Element {
     (props.chips?.length ?? 0) +
     (props.selects ?? []).filter((select) => Boolean(select.value)).length +
     (props.query?.value ? 1 : 0)
+  const hasLeading = () =>
+    Boolean(props.query) || (props.selects?.length ?? 0) > 0
   const showClearAll = () => props.onClearAll !== undefined && activeCount() > 0
   const showMetaRow = () =>
     (props.chips?.length ?? 0) > 0 ||
@@ -115,9 +121,16 @@ export function FilterBar(props: FilterBarProps): JSX.Element {
   return (
     <div
       data-slot="filter-bar"
-      class={`flex max-w-full flex-col gap-control-gap rounded-card border border-outline-gray-1 bg-surface-elevation-1 p-control-pad ${props.class ?? ''}`}
+      data-surface={props.surface ?? 'card'}
+      class={cn(
+        'flex max-w-full flex-col gap-control-gap',
+        (props.surface ?? 'card') === 'card'
+          ? 'rounded-card border border-outline-gray-1 bg-surface-elevation-1 p-control-pad'
+          : 'p-0',
+        props.class,
+      )}
     >
-      <div class="grid max-w-full grid-cols-1 items-center gap-control-gap sm:grid-cols-2 xl:flex xl:flex-wrap">
+      <div class="grid max-w-full grid-cols-1 items-center gap-control-gap min-[360px]:grid-cols-2 xl:flex xl:flex-wrap">
         <Show when={props.query}>
           {(query) => (
             <span
@@ -163,10 +176,16 @@ export function FilterBar(props: FilterBarProps): JSX.Element {
           )}
         </For>
 
-        <div class="col-span-full flex min-w-0 max-w-full flex-wrap items-center gap-control-gap sm:justify-end xl:ms-auto">
+        <div
+          class={cn(
+            'col-span-full flex min-w-0 max-w-full flex-wrap items-center gap-control-gap',
+            hasLeading() ? 'sm:justify-end xl:ms-auto' : 'sm:justify-start',
+          )}
+        >
           <Show when={props.tabs}>
             {(tabs) => (
               <TabButtons
+                label={tabs().label}
                 options={tabs().options}
                 value={tabs().value}
                 onValueChange={tabs().onValueChange}
@@ -203,7 +222,7 @@ export function FilterBar(props: FilterBarProps): JSX.Element {
                     <button
                       type="button"
                       aria-label={`Remove filter: ${chip.label}`}
-                      class="grid size-4 place-items-center rounded-full text-ink-gray-6 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-9 focus-visible:focus-ring motion-reduce:transition-none"
+                      class="grid size-6 place-items-center rounded-full text-ink-gray-6 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-9 focus-visible:focus-ring motion-reduce:transition-none"
                       onClick={() => onRemove()()}
                     >
                       <Icon icon="lucide-x" class="size-3" />

package/src/organisms/KanbanBoard/KanbanBoard.tsx

@@ -16,6 +16,7 @@ import {
   onCleanup,
   Show,
 } from 'solid-js'
+import { DataState } from '../DataState'
 import { createKanbanDrag, type KanbanSlot } from './drag'
 
 export type KanbanTone = 'gray' | 'amber' | 'blue' | 'green' | 'red' | 'violet'
@@ -79,6 +80,11 @@ export interface KanbanBoardProps<T extends { id: string }> {
   itemLabel?: (item: T) => string
   /** Rendered in a column with no cards. */
   emptyColumn?: (column: KanbanColumn<T>) => JSX.Element
+  /** Replaces the board with the shared loading skeleton. */
+  loading?: boolean
+  /** Replaces the board with the shared error state. */
+  error?: JSX.Element
+  onRetry?: () => void
   class?: string
 }
 
@@ -155,6 +161,8 @@ export function KanbanBoard<T extends { id: string }>(
 
   /** The live preview of the item in flight: a slot, not a commit. */
   const [preview, setPreview] = createSignal<KanbanSlot & { itemId: string }>()
+  /** A card to re-focus after a keyboard move has re-rendered the column. */
+  const [focusAfterMove, setFocusAfterMove] = createSignal<string>()
 
   const rendered = createMemo(() => {
     const slot = preview()
@@ -171,6 +179,14 @@ export function KanbanBoard<T extends { id: string }>(
    * flight loses the element the gesture is holding. An id survives both.
    */
   const columnIds = createMemo(() => rendered().map((column) => column.id))
+  const status = () =>
+    props.loading
+      ? ('loading' as const)
+      : props.error
+        ? ('error' as const)
+        : columnIds().length === 0
+          ? ('empty' as const)
+          : ('ready' as const)
   const columnOf = (columnId: string): KanbanColumn<T> =>
     rendered().find((column) => column.id === columnId) ?? {
       id: columnId,
@@ -257,12 +273,14 @@ export function KanbanBoard<T extends { id: string }>(
     item: T | undefined,
     from: KanbanSlot | undefined,
     to: KanbanSlot | undefined,
+    restoreFocus = false,
   ) {
     setPreview(undefined)
     if (!item || !from || !to) return
     const next = placeKanbanItem(columns(), item.id, to)
     if (!isControlled()) setInternal(next)
     props.onMove?.({ item, itemId: item.id, from, to, columns: next })
+    if (restoreFocus) setFocusAfterMove(item.id)
   }
 
   const drag = createKanbanDrag<T>({
@@ -279,10 +297,15 @@ export function KanbanBoard<T extends { id: string }>(
   const moveTo = (item: T, columnId: string) => {
     const from = slotOf(item.id)
     if (!from || from.column === columnId) return
-    settle(item, from, {
-      column: columnId,
-      index: columnOf(columnId).items.length,
-    })
+    settle(
+      item,
+      from,
+      {
+        column: columnId,
+        index: columnOf(columnId).items.length,
+      },
+      true,
+    )
   }
 
   createEffect(() => {
@@ -296,6 +319,23 @@ export function KanbanBoard<T extends { id: string }>(
     onCleanup(() => window.removeEventListener('keydown', onKey))
   })
 
+  createEffect(() => {
+    const id = focusAfterMove()
+    if (!id) return
+    // Keyboard moves re-create the card in its destination column, so the
+    // trigger that opened the menu is gone. Put focus back on the same card
+    // and keep it in view instead of dropping the reader on <body>.
+    queueMicrotask(() => {
+      const card = [
+        ...(boardRoot?.querySelectorAll<HTMLElement>('[data-kanban-id]') ?? []),
+      ].find((element) => element.dataset['kanbanId'] === id)
+      if (typeof card?.scrollIntoView === 'function')
+        card.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+      card?.querySelector<HTMLElement>('[data-kanban-action]')?.focus()
+      setFocusAfterMove(undefined)
+    })
+  })
+
   return (
     <div
       ref={boardRoot}
@@ -303,180 +343,195 @@ export function KanbanBoard<T extends { id: string }>(
       data-kanban-dragging={drag.state() ? '' : undefined}
       class={cn('flex min-h-0 flex-col', props.class)}
     >
-      <ScrollArea.Root class="min-h-0 flex-1">
-        <ScrollArea.Viewport>
-          <ul
-            // A list of columns, each holding a list of cards: the structure a
-            // screen reader walks. The drag is invisible to it, which is exactly
-            // why the card menu exists.
-            class={cn(
-              'flex h-full min-w-max items-stretch gap-card-gap p-card-pad',
-              // Below `lg` the board is a phone-width panner, and there the
-              // reference snaps: a column that lands half-off the edge is a
-              // column you cannot read. Wide, it is a drag surface, and snapping
-              // under a pointer mid-drop is just fighting the user.
-              'max-lg:snap-x max-lg:snap-mandatory max-lg:scroll-px-4',
-              // Text selection during a drag turns a card into a smear.
-              drag.state() && 'select-none',
-            )}
-            aria-label={props.label ?? 'Board'}
-          >
-            <For each={columnIds()}>
-              {(columnId) => {
-                const column = () => columnOf(columnId)
-                return (
-                  <li
-                    ref={(element) => columnRoots.set(columnId, element)}
-                    data-kanban-column={columnId}
-                    class="flex min-h-0 w-72 shrink-0 flex-col rounded-card border border-outline-gray-1 bg-surface-gray-1 max-lg:snap-start dark:bg-transparent"
-                  >
-                    <div class="flex items-center justify-between gap-2 pe-1 ps-3 pt-1 pb-2">
-                      <div class="flex min-w-0 items-center gap-2">
-                        <Show when={column().theme}>
-                          {(tone) => (
-                            <span
-                              class={cn('size-2 rounded-full', TONES[tone()])}
-                              aria-hidden="true"
-                            />
-                          )}
-                        </Show>
-                        {/* `h2`, like the reference: the board is the page's
+      <Show
+        when={status() === 'ready'}
+        fallback={
+          <DataState
+            status={status()}
+            skeleton="cards"
+            title={props.emptyColumn ? undefined : 'No columns yet'}
+            error={props.error}
+            onRetry={props.onRetry}
+          />
+        }
+      >
+        <ScrollArea.Root class="min-h-0 flex-1">
+          <ScrollArea.Viewport>
+            <ul
+              // A list of columns, each holding a list of cards: the structure a
+              // screen reader walks. The drag is invisible to it, which is exactly
+              // why the card menu exists.
+              class={cn(
+                'flex h-full min-w-max items-stretch gap-card-gap p-card-pad',
+                // Below `lg` the board is a phone-width panner, and there the
+                // reference snaps: a column that lands half-off the edge is a
+                // column you cannot read. Wide, it is a drag surface, and snapping
+                // under a pointer mid-drop is just fighting the user.
+                'max-lg:snap-x max-lg:snap-mandatory max-lg:scroll-px-4',
+                // Text selection during a drag turns a card into a smear.
+                drag.state() && 'select-none',
+              )}
+              aria-label={props.label ?? 'Board'}
+            >
+              <For each={columnIds()}>
+                {(columnId) => {
+                  const column = () => columnOf(columnId)
+                  return (
+                    <li
+                      ref={(element) => columnRoots.set(columnId, element)}
+                      data-kanban-column={columnId}
+                      class="flex min-h-0 w-72 shrink-0 flex-col rounded-card border border-outline-gray-1 bg-surface-gray-1 max-lg:snap-start min-[1440px]:w-64 2xl:w-72 dark:bg-transparent"
+                    >
+                      <div class="flex items-center justify-between gap-2 pe-1 ps-3 pt-1 pb-2">
+                        <div class="flex min-w-0 items-center gap-2">
+                          <Show when={column().theme}>
+                            {(tone) => (
+                              <span
+                                class={cn('size-2 rounded-full', TONES[tone()])}
+                                aria-hidden="true"
+                              />
+                            )}
+                          </Show>
+                          {/* `h2`, like the reference: the board is the page's
                             main content, and a card's own headings then nest
                             under it. An `h3` here trips the heading-order rule
                             on every screen whose board sits directly under an
                             `h1`. */}
-                        <h2 class="truncate text-sm-medium text-ink-gray-8">
-                          {column().name}
-                        </h2>
-                        {/* The count sits on the column's tinted surface, so it
+                          <h2 class="truncate text-sm-medium text-ink-gray-8">
+                            {column().name}
+                          </h2>
+                          {/* The count sits on the column's tinted surface, so it
                             is `ink-gray-6`: the step above fails AA here. */}
-                        <span class="text-sm text-ink-gray-6">
-                          {column().items.length}
-                        </span>
+                          <span class="text-sm text-ink-gray-6">
+                            {column().items.length}
+                          </span>
+                        </div>
+                        <Show when={column().action}>
+                          {(action) => (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              icon={action().icon ?? 'lucide-plus'}
+                              aria-label={action().label}
+                              class="max-lg:size-10"
+                              onClick={action().onClick}
+                            />
+                          )}
+                        </Show>
                       </div>
-                      <Show when={column().action}>
-                        {(action) => (
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            icon={action().icon ?? 'lucide-plus'}
-                            aria-label={action().label}
-                            onClick={action().onClick}
-                          />
-                        )}
-                      </Show>
-                    </div>
 
-                    <Show when={column().summary}>
-                      <div class="ps-3 pb-2 text-sm tabular-nums text-ink-gray-6">
-                        {column().summary}
-                      </div>
-                    </Show>
+                      <Show when={column().summary}>
+                        <div class="ps-3 pb-2 text-sm tabular-nums text-ink-gray-6">
+                          {column().summary}
+                        </div>
+                      </Show>
 
-                    <ScrollArea.Root class="min-h-0 flex-1">
-                      <ScrollArea.Viewport class="px-2 pb-2">
-                        <ul class="flex min-h-24 flex-col gap-2">
-                          <For
-                            each={column().items}
-                            fallback={
-                              <li class="rounded-5 border border-dashed border-outline-gray-3 p-6 text-center text-sm text-ink-gray-6">
-                                {props.emptyColumn?.(column()) ??
-                                  'Nothing in this column.'}
-                              </li>
-                            }
-                          >
-                            {(item) => (
-                              <li
-                                data-kanban-card=""
-                                data-kanban-id={item.id}
-                                data-dragging={
-                                  drag.isDragging(item.id) ? '' : undefined
-                                }
-                                // Wrapped: a handler read straight off an
-                                // accessor is captured once, and this one needs
-                                // the live element.
-                                onPointerDown={(event) =>
-                                  drag.start(event, item, event.currentTarget)
-                                }
-                                class="shrink-0"
-                              >
-                                <Show
-                                  when={!drag.isDragging(item.id)}
-                                  fallback={
-                                    // The card that was picked up keeps its
-                                    // place as the hole the ghost lands on, so
-                                    // the column does not reflow when it lifts.
-                                    <div
-                                      class="rounded-5 border-2 border-dashed border-outline-gray-2 bg-surface-gray-2"
-                                      style={{
-                                        height: `${drag.state()?.height ?? 0}px`,
-                                      }}
-                                    />
+                      <ScrollArea.Root class="min-h-0 flex-1">
+                        <ScrollArea.Viewport class="px-2 pb-2">
+                          <ul class="flex min-h-24 flex-col gap-2">
+                            <For
+                              each={column().items}
+                              fallback={
+                                <li class="rounded-card border border-dashed border-outline-gray-3 p-6 text-center text-sm text-ink-gray-6">
+                                  {props.emptyColumn?.(column()) ??
+                                    'Nothing in this column.'}
+                                </li>
+                              }
+                            >
+                              {(item) => (
+                                <li
+                                  data-kanban-card=""
+                                  data-kanban-id={item.id}
+                                  data-dragging={
+                                    drag.isDragging(item.id) ? '' : undefined
+                                  }
+                                  // Wrapped: a handler read straight off an
+                                  // accessor is captured once, and this one needs
+                                  // the live element.
+                                  onPointerDown={(event) =>
+                                    drag.start(event, item, event.currentTarget)
                                   }
+                                  class="shrink-0"
                                 >
-                                  <KanbanCardFrame>
-                                    <div class="flex items-start justify-between gap-1">
-                                      <div class="min-w-0 flex-1">
-                                        {props.children(item)}
-                                      </div>
-                                      <Show when={!props.renderActions}>
-                                        <div class="shrink-0 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100">
-                                          <Menu.Root
-                                            onSelect={(value) =>
-                                              moveTo(item, value)
-                                            }
-                                          >
-                                            <Menu.Trigger
-                                              aria-label={`Actions for ${nameOf(item)}`}
-                                              class="flex size-7 cursor-pointer items-center justify-center rounded-3 text-ink-gray-6 transition-colors hover:bg-surface-gray-3 hover:text-ink-gray-8 focus-visible:focus-ring"
-                                            >
-                                              <Icon
-                                                icon="lucide-ellipsis"
-                                                class="size-4"
-                                              />
-                                            </Menu.Trigger>
-                                            <Menu.Content>
-                                              <Menu.Label>Move to</Menu.Label>
-                                              <For
-                                                each={columnIds().filter(
-                                                  (id) => id !== columnId,
-                                                )}
-                                              >
-                                                {(target) => (
-                                                  <Menu.Item value={target}>
-                                                    {columnOf(target).name}
-                                                  </Menu.Item>
-                                                )}
-                                              </For>
-                                            </Menu.Content>
-                                          </Menu.Root>
+                                  <Show
+                                    when={!drag.isDragging(item.id)}
+                                    fallback={
+                                      // The card that was picked up keeps its
+                                      // place as the hole the ghost lands on, so
+                                      // the column does not reflow when it lifts.
+                                      <div
+                                        class="rounded-card border-2 border-dashed border-outline-gray-2 bg-surface-gray-2"
+                                        style={{
+                                          height: `${drag.state()?.height ?? 0}px`,
+                                        }}
+                                      />
+                                    }
+                                  >
+                                    <KanbanCardFrame>
+                                      <div class="flex items-start justify-between gap-1">
+                                        <div class="min-w-0 flex-1">
+                                          {props.children(item)}
                                         </div>
-                                      </Show>
-                                      <Show when={props.renderActions}>
-                                        {(render) => (
+                                        <Show when={!props.renderActions}>
                                           <div class="shrink-0 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100">
-                                            {render()(item)}
+                                            <Menu.Root
+                                              onSelect={(value) =>
+                                                moveTo(item, value)
+                                              }
+                                            >
+                                              <Menu.Trigger
+                                                data-kanban-action=""
+                                                aria-label={`Actions for ${nameOf(item)}`}
+                                                class="flex size-7 cursor-pointer items-center justify-center rounded-3 text-ink-gray-6 transition-colors hover:bg-surface-gray-3 hover:text-ink-gray-8 focus-visible:focus-ring max-lg:size-10"
+                                              >
+                                                <Icon
+                                                  icon="lucide-ellipsis"
+                                                  class="size-4"
+                                                />
+                                              </Menu.Trigger>
+                                              <Menu.Content>
+                                                <Menu.Label>Move to</Menu.Label>
+                                                <For
+                                                  each={columnIds().filter(
+                                                    (id) => id !== columnId,
+                                                  )}
+                                                >
+                                                  {(target) => (
+                                                    <Menu.Item value={target}>
+                                                      {columnOf(target).name}
+                                                    </Menu.Item>
+                                                  )}
+                                                </For>
+                                              </Menu.Content>
+                                            </Menu.Root>
                                           </div>
-                                        )}
-                                      </Show>
-                                    </div>
-                                  </KanbanCardFrame>
-                                </Show>
-                              </li>
-                            )}
-                          </For>
-                        </ul>
-                      </ScrollArea.Viewport>
-                      <ScrollArea.Scrollbar />
-                    </ScrollArea.Root>
-                  </li>
-                )
-              }}
-            </For>
-          </ul>
-        </ScrollArea.Viewport>
-        <ScrollArea.Scrollbar orientation="horizontal" />
-      </ScrollArea.Root>
+                                        </Show>
+                                        <Show when={props.renderActions}>
+                                          {(render) => (
+                                            <div class="shrink-0 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100">
+                                              {render()(item)}
+                                            </div>
+                                          )}
+                                        </Show>
+                                      </div>
+                                    </KanbanCardFrame>
+                                  </Show>
+                                </li>
+                              )}
+                            </For>
+                          </ul>
+                        </ScrollArea.Viewport>
+                        <ScrollArea.Scrollbar />
+                      </ScrollArea.Root>
+                    </li>
+                  )
+                }}
+              </For>
+            </ul>
+          </ScrollArea.Viewport>
+          <ScrollArea.Scrollbar orientation="horizontal" />
+        </ScrollArea.Root>
+      </Show>
 
       <Show when={drag.state()}>
         {(state) => (

package/src/organisms/MobileNav/MobileNav.tsx

@@ -101,7 +101,7 @@ export function MobileNavItem(props: MobileNavItemProps): JSX.Element {
       onClick={local.onClick}
       class={cn(
         'flex min-h-14 flex-col items-center justify-center gap-1 py-2 text-ink-gray-6 transition',
-        'active:scale-95 data-[state=active]:text-ink-gray-8',
+        'active:scale-95 data-[state=active]:bg-surface-blue-1 data-[state=active]:text-ink-blue-8',
         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3',
         local.class,
       )}