@adea-ai/ui 0.118.2 → 0.119.0

package/src/components/composites/settings/settings-layout.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps, JSX } from 'solid-js'
-import { splitProps } from 'solid-js'
+import { createSignal, onCleanup, onMount, splitProps } from 'solid-js'
 import { cn } from '#lib/utils'
 import { Tabs } from '../../ui/tabs'
 import { SettingsNavigation, type SettingsNavigationGroup } from './settings-navigation'
@@ -10,7 +10,7 @@ export type SettingsLayoutProps = Omit<
 > & {
   /** Grouped navigation entries; the host owns their values and panel content. */
   groups: readonly SettingsNavigationGroup[]
-  /** Accessible name for the vertical tab list. */
+  /** Accessible name for the tab list. */
   'aria-label': string
   /** The host-controlled selected destination. */
   value: string
@@ -20,16 +20,42 @@ export type SettingsLayoutProps = Omit<
   onReselect?: (value: string) => void
   /** Reveal the selected row on value changes and window resizes. Defaults to nearest scroll. */
   revealSelected?: boolean | ((trigger: HTMLButtonElement | undefined) => void)
+  /**
+   * How the section navigation sits beside the panels. `auto` (the default) is
+   * the vertical rail from 48rem of viewport width up and a horizontal,
+   * scrollable strip of tabs above the panels below it. `rail` and `strip` pin
+   * one shape at every width.
+   */
+  navigationLayout?: SettingsNavigationLayout
   /** Panels must be rendered as `TabsContent` descendants. */
   children?: JSX.Element
 }
 
+export type SettingsNavigationLayout = 'auto' | 'rail' | 'strip'
+
+/** The `md` breakpoint the rail has always widened at; below it the rail becomes a strip. */
+const RAIL_MEDIA_QUERY = '(min-width: 48rem)'
+
+function railQuery(): MediaQueryList | undefined {
+  return typeof window === 'undefined' || typeof window.matchMedia !== 'function'
+    ? undefined
+    : window.matchMedia(RAIL_MEDIA_QUERY)
+}
+
 /**
  * SettingsLayout.
  *
  * A controlled, vertical settings rail beside its scrollable panel viewport.
  * The host keeps ownership of selection, URL/hash state and panel content.
- * At narrow viewports the rail contracts while both columns remain shrinkable.
+ *
+ * Below 48rem the rail becomes a horizontal strip of tabs above the panels.
+ * A 6rem rail at phone width clips every label, so this is the default rather
+ * than an opt-in. It changes the tab root's orientation, not just its
+ * styling: the list's `aria-orientation` and Kobalte's arrow keys (Up/Down on
+ * the rail, Left/Right on the strip) follow the axis the reader sees. The
+ * breakpoint is the viewport's, like CatalogBrowser's and ContextualSidebar's,
+ * and is read before the first render so a phone never paints the rail. A
+ * server render, which has no viewport, renders the rail.
  */
 export function SettingsLayout(props: SettingsLayoutProps) {
   const [local, rest] = splitProps(props, [
@@ -40,12 +66,29 @@ export function SettingsLayout(props: SettingsLayoutProps) {
     'value',
     'onReselect',
     'revealSelected',
+    'navigationLayout',
   ])
 
+  const [wide, setWide] = createSignal(railQuery()?.matches ?? true)
+  onMount(() => {
+    const query = railQuery()
+    if (!query) return
+    const update = () => setWide(query.matches)
+    update()
+    query.addEventListener('change', update)
+    onCleanup(() => query.removeEventListener('change', update))
+  })
+  const layout = (): 'rail' | 'strip' => {
+    const requested = local.navigationLayout ?? 'auto'
+    if (requested !== 'auto') return requested
+    return wide() ? 'rail' : 'strip'
+  }
+
   return (
     <Tabs
       {...rest}
-      orientation="vertical"
+      orientation={layout() === 'rail' ? 'vertical' : 'horizontal'}
+      data-navigation-layout={layout()}
       value={local.value}
       class={cn('min-h-0 min-w-0 flex-1 gap-0', local.class)}
     >
@@ -55,7 +98,7 @@ export function SettingsLayout(props: SettingsLayoutProps) {
         value={local.value}
         onReselect={local.onReselect}
         revealSelected={local.revealSelected}
-        class="w-24 md:w-sidebar"
+        class={layout() === 'rail' ? 'w-24 md:w-sidebar' : undefined}
       />
       <div data-slot="settings-layout-panels" class="min-h-0 min-w-0 flex-1 overflow-y-auto p-4">
         {local.children}

package/src/components/composites/settings/settings-navigation.tsx

@@ -1,5 +1,6 @@
+import { useTabsContext } from '@kobalte/core/tabs'
 import type { JSX } from 'solid-js'
-import { createEffect, createUniqueId, onCleanup, splitProps } from 'solid-js'
+import { createEffect, createUniqueId, onCleanup, Show, splitProps } from 'solid-js'
 import { cn } from '#lib/utils'
 import { sidebarNavItemClass, sidebarNavItemStateClass } from '../../layout/sidebar-nav/sidebar-nav'
 import { TabsList, TabsTrigger, type TabsListProps } from '../../ui/tabs'
@@ -47,6 +48,14 @@ export type SettingsNavigationProps = Omit<
  * the controlled value, panel content, icons and any persistence or routing.
  * Use ordinary tabs for a short, ungrouped row of view choices.
  *
+ * The shape follows the enclosing `Tabs` orientation rather than a prop of its
+ * own, so the visual axis can never disagree with the arrow keys Kobalte
+ * binds: `vertical` is the grouped rail, `horizontal` is a single scrollable
+ * strip of tabs (what `SettingsLayout` shows below 48rem). The strip keeps the
+ * groups in order, separated by a rule; their visible headings drop out, since
+ * an overline between tabs reads as another tab, but each tab still carries its
+ * group as its accessible description.
+ *
  * Kobalte owns roving focus, arrow keys, selection and tab/panel ARIA. This
  * component adds no URL, storage or host-specific state. Set
  * `revealSelected={false}` when the surrounding layout does not use an internal
@@ -88,12 +97,16 @@ export function SettingsNavigation(props: SettingsNavigationProps) {
     'onReselect',
     'revealSelected',
   ])
+  const tabs = useTabsContext()
+  const strip = () => tabs.orientation() === 'horizontal'
   const triggers = new Map<string, HTMLButtonElement>()
   const groupIdPrefix = `settings-navigation-${createUniqueId()}`
 
   createEffect(() => {
     const value = local.value
     const reveal = local.revealSelected
+    // Tracked so a rail that becomes a strip (or back) re-reveals on the new axis.
+    strip()
     if (reveal === false) return
 
     const revealCurrent = () => {
@@ -111,9 +124,17 @@ export function SettingsNavigation(props: SettingsNavigationProps) {
     <TabsList
       data-slot="settings-navigation"
       aria-label={local['aria-label']}
-      orientation="vertical"
+      orientation={tabs.orientation()}
       class={cn(
-        'flex max-h-full min-h-0 min-w-0 shrink-0 flex-col items-stretch justify-start gap-2 overflow-x-hidden overflow-y-auto px-2 py-2',
+        // Positioned so the visually hidden group names are laid out (and
+        // clipped) inside the list: unpositioned, their absolute boxes escape a
+        // scrolled strip and widen the page by however far it has scrolled.
+        'relative flex min-w-0 shrink-0 justify-start',
+        strip()
+          ? // The block padding is the room the focus ring needs: a scroller
+            // clips at its padding edge, and this one scrolls sideways only.
+            'scroll-fade w-full flex-row items-center gap-1 overflow-x-auto overflow-y-hidden border-b border-border px-2 py-1.5'
+          : 'max-h-full min-h-0 flex-col items-stretch gap-2 overflow-x-hidden overflow-y-auto px-2 py-2',
         local.class
       )}
       {...rest}
@@ -124,24 +145,30 @@ export function SettingsNavigation(props: SettingsNavigationProps) {
           <div
             role="none"
             data-slot="settings-navigation-group"
-            class="flex min-w-0 flex-col gap-0.5"
+            class={cn(
+              'flex gap-0.5',
+              strip()
+                ? 'shrink-0 flex-row items-center not-first:ms-1 not-first:border-s not-first:border-border not-first:ps-2'
+                : 'min-w-0 flex-col'
+            )}
           >
             <span id={groupId} class="sr-only">
               {group.label}
             </span>
-            {/* The overline role on the sidebar's own muted foreground. */}
-            <Text
-              variant="overline"
-              tone="inherit"
-              aria-hidden="true"
-              class="px-2 py-1.5 text-sidebar-muted-foreground"
-            >
-              {group.label}
-            </Text>
+            <Show when={!strip()}>
+              {/* The overline role on the sidebar's own muted foreground. */}
+              <Text
+                variant="overline"
+                tone="inherit"
+                aria-hidden="true"
+                class="px-2 py-1.5 text-sidebar-muted-foreground"
+              >
+                {group.label}
+              </Text>
+            </Show>
             {group.items.map((item) => (
               <TabsTrigger
                 data-slot="settings-navigation-trigger"
-                orientation="vertical"
                 aria-describedby={groupId}
                 value={item.value}
                 disabled={item.disabled}
@@ -155,11 +182,12 @@ export function SettingsNavigation(props: SettingsNavigationProps) {
                 class={cn(
                   sidebarNavItemClass,
                   sidebarNavItemStateClass.idle,
-                  'h-row-lg w-full justify-start border-0 px-3 py-2 text-left data-[selected]:bg-primary-subtle data-[selected]:text-foreground'
+                  'h-row-lg justify-start border-0 px-3 py-2 text-left data-[selected]:bg-primary-subtle data-[selected]:text-foreground',
+                  strip() ? 'w-auto shrink-0' : 'w-full'
                 )}
               >
                 {item.icon}
-                <span class="min-w-0 truncate">{item.label}</span>
+                <span class={cn('min-w-0', { truncate: !strip() })}>{item.label}</span>
               </TabsTrigger>
             ))}
           </div>

package/src/components/ui/code-block/code-block.tsx

@@ -69,6 +69,19 @@ export type CodeBlockProps = Omit<ComponentProps<'div'>, 'children'> & {
   showLineNumbers?: boolean
   /** The height above which the action row is repeated below the block. */
   tallThreshold?: number
+  /**
+   * Cap the code body's height and scroll it vertically past that. A number is
+   * pixels; a string is any CSS length (`'20rem'`, `'50vh'`). Unset, the block
+   * grows with its content.
+   */
+  maxHeight?: number | string
+  /**
+   * Soft-wrap long lines inside the block instead of scrolling sideways. Off by
+   * default: wrapped code loses its column alignment, so it is for prose-like
+   * output (logs, long commands) in a narrow column. Wraps the plain renderer and
+   * any `pre` inside `highlight` output; line numbers stay on the first visual line.
+   */
+  wrap?: boolean
 }
 
 /** The height a block must exceed before its actions are repeated. */
@@ -103,6 +116,8 @@ export function CodeBlock(props: CodeBlockProps) {
     'lineHeight',
     'showLineNumbers',
     'tallThreshold',
+    'maxHeight',
+    'wrap',
     'class',
     'ref',
   ])
@@ -114,6 +129,8 @@ export function CodeBlock(props: CodeBlockProps) {
   const label = () => local.title ?? local.language ?? 'code'
   const regionLabel = () => (local.language ? `${local.language} code` : 'code')
   const lines = createMemo(() => local.code.replace(/\n$/, '').split('\n'))
+  const maxHeight = () =>
+    typeof local.maxHeight === 'number' ? `${local.maxHeight}px` : local.maxHeight
 
   const copy = async () => {
     const ok = await copyText(local.code)
@@ -160,7 +177,15 @@ export function CodeBlock(props: CodeBlockProps) {
         <Actions />
       </div>
       <div
-        class="scroll-fade overflow-x-auto"
+        data-slot="code-block-body"
+        data-wrap={local.wrap ? '' : undefined}
+        class={cn('scroll-fade overflow-x-auto', {
+          // A capped body scrolls on both axes; the region is already a tab stop,
+          // so the keyboard reaches the vertical overflow the same way.
+          'overflow-y-auto': local.maxHeight !== undefined,
+          '[&_pre]:whitespace-pre-wrap [&_pre]:[overflow-wrap:anywhere]': local.wrap,
+        })}
+        style={maxHeight() === undefined ? undefined : { 'max-height': maxHeight() }}
         // A region that scrolls must be focusable, and a tab stop needs a name.
         tabindex="0"
         role="region"
@@ -181,7 +206,7 @@ export function CodeBlock(props: CodeBlockProps) {
                         >
                           {index() + 1}
                         </span>
-                        <span>{line || ' '}</span>
+                        <span class={cn({ 'min-w-0': local.wrap })}>{line || ' '}</span>
                       </span>
                     )}
                   </For>

package/src/components/ui/combobox/combobox.tsx

@@ -135,7 +135,10 @@ export function ComboboxItem(props: ComponentProps<typeof KobalteCombobox.Item>)
       <KobalteCombobox.ItemLabel>{local.children}</KobalteCombobox.ItemLabel>
       {/* The indicator reads in the accent, like every other selected state in
       the system. */}
-      <KobalteCombobox.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center text-primary">
+      <KobalteCombobox.ItemIndicator
+        data-slot="combobox-indicator"
+        class="absolute end-2 flex size-4 items-center justify-center text-primary"
+      >
         <Check class="size-4" />
       </KobalteCombobox.ItemIndicator>
     </KobalteCombobox.Item>

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

@@ -111,7 +111,10 @@ export function ContextMenuCheckboxItem(
       {local.children}
       {/* The indicator reads in the accent, like every other selected state in
       the system. */}
-      <KobalteContextMenu.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center text-primary">
+      <KobalteContextMenu.ItemIndicator
+        data-slot="context-menu-indicator"
+        class="absolute end-2 flex size-4 items-center justify-center text-primary"
+      >
         <Check class="size-4" />
       </KobalteContextMenu.ItemIndicator>
     </KobalteContextMenu.CheckboxItem>
@@ -130,7 +133,10 @@ export function ContextMenuRadioItem(props: ComponentProps<typeof KobalteContext
       {local.children}
       {/* The indicator reads in the accent, like every other selected state in
       the system. */}
-      <KobalteContextMenu.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center text-primary">
+      <KobalteContextMenu.ItemIndicator
+        data-slot="context-menu-indicator"
+        class="absolute end-2 flex size-4 items-center justify-center text-primary"
+      >
         <Circle class="size-2 fill-current" />
       </KobalteContextMenu.ItemIndicator>
     </KobalteContextMenu.RadioItem>

package/src/components/ui/item/index.ts

@@ -6,5 +6,6 @@ export {
   ItemGroupEntry,
   ItemTitle,
   itemVariants,
+  type ItemDescriptionProps,
   type ItemProps,
 } from './item'

package/src/components/ui/item/item.tsx

@@ -47,6 +47,14 @@ export type ItemProps = ComponentProps<'div'> &
     media?: JSX.Element
     /** A trailing slot: a badge, a timestamp, a menu trigger. */
     trailing?: JSX.Element
+    /**
+     * Move the trailing slot onto its own line, end-aligned under the body, once
+     * the item is narrower than 28rem — the width `ListRow` stacks its trailing
+     * controls at. Off by default: a row of badges and an icon button fits beside
+     * the body, but a pair of labelled buttons squeezes a phone-width body to a
+     * few characters.
+     */
+    stackTrailing?: boolean
   }
 
 export function Item(props: ItemProps) {
@@ -56,13 +64,22 @@ export function Item(props: ItemProps) {
     'size',
     'media',
     'trailing',
+    'stackTrailing',
     'children',
   ])
 
   return (
     <div
       data-slot="item"
-      class={cn(itemVariants({ variant: local.variant, size: local.size }), local.class)}
+      data-stack-trailing={local.stackTrailing ? '' : undefined}
+      class={cn(
+        itemVariants({ variant: local.variant, size: local.size }),
+        // The item is its own query container: the trailing slot answers to the
+        // width the item was given, not the viewport, so an item in a narrow
+        // column of a wide window stacks too.
+        { '@container/item flex-wrap': local.stackTrailing },
+        local.class
+      )}
       {...rest}
     >
       <Show when={local.media}>
@@ -77,7 +94,13 @@ export function Item(props: ItemProps) {
         {local.children}
       </div>
       <Show when={local.trailing}>
-        <span data-slot="item-trailing" class="flex shrink-0 items-center gap-2">
+        <span
+          data-slot="item-trailing"
+          class={cn('flex shrink-0 items-center gap-2', {
+            '@max-md/item:w-full @max-md/item:flex-wrap @max-md/item:justify-end':
+              local.stackTrailing,
+          })}
+        >
           {local.trailing}
         </span>
       </Show>
@@ -90,12 +113,25 @@ export function ItemTitle(props: ComponentProps<'div'>) {
   return <div data-slot="item-title" class={cn('truncate font-medium', local.class)} {...rest} />
 }
 
-export function ItemDescription(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
+export type ItemDescriptionProps = ComponentProps<'div'> & {
+  /**
+   * Clamp to two lines. On by default, so a grid of items keeps one height; pass
+   * `false` where the description is the content — a setting's explanation, an
+   * error the reader has to read in full.
+   */
+  clamp?: boolean
+}
+
+export function ItemDescription(props: ItemDescriptionProps) {
+  const [local, rest] = splitProps(props, ['class', 'clamp'])
   return (
     <div
       data-slot="item-description"
-      class={cn('text-muted-foreground line-clamp-2 text-xs text-pretty', local.class)}
+      class={cn(
+        'text-muted-foreground text-xs text-pretty',
+        { 'line-clamp-2': local.clamp !== false },
+        local.class
+      )}
       {...rest}
     />
   )

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

@@ -141,7 +141,10 @@ export function MenubarCheckboxItem(props: ComponentProps<typeof KobalteMenubar.
       {local.children}
       {/* The indicator reads in the accent, like every other selected state in
       the system. */}
-      <KobalteMenubar.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center text-primary">
+      <KobalteMenubar.ItemIndicator
+        data-slot="menubar-indicator"
+        class="absolute end-2 flex size-4 items-center justify-center text-primary"
+      >
         <Check class="size-4" />
       </KobalteMenubar.ItemIndicator>
     </KobalteMenubar.CheckboxItem>
@@ -159,7 +162,10 @@ export function MenubarRadioItem(props: ComponentProps<typeof KobalteMenubar.Rad
       {local.children}
       {/* The indicator reads in the accent, like every other selected state in
       the system. */}
-      <KobalteMenubar.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center text-primary">
+      <KobalteMenubar.ItemIndicator
+        data-slot="menubar-indicator"
+        class="absolute end-2 flex size-4 items-center justify-center text-primary"
+      >
         <Circle class="size-2 fill-current" />
       </KobalteMenubar.ItemIndicator>
     </KobalteMenubar.RadioItem>

package/src/components/ui/select/select.tsx

@@ -192,7 +192,10 @@ export function SelectItem(
       <KobalteSelect.ItemLabel>{local.children}</KobalteSelect.ItemLabel>
       {/* The indicator reads in the accent, like every other selected state in
           the system — the row's own foreground reads as decoration. */}
-      <KobalteSelect.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center text-primary">
+      <KobalteSelect.ItemIndicator
+        data-slot="select-indicator"
+        class="absolute end-2 flex size-4 items-center justify-center text-primary"
+      >
         <Check class="size-4" />
       </KobalteSelect.ItemIndicator>
     </KobalteSelect.Item>

package/src/lib/overlay.ts

@@ -83,14 +83,21 @@ export const popoverArrow = 'fill-popover stroke-border'
 /**
  * A menu row: the shared height, radius, hover fill and focus treatment for
  * every item inside a menu, listbox or command list.
+ *
+ * The row sizes and dims the icons a caller puts in it, but not the glyph of
+ * its selection indicator (any `[data-slot$=-indicator]`): a descendant `svg`
+ * rule outranks a single utility on the glyph, so without the exclusion a
+ * radio item's `size-2` dot drew as a 16px muted disc and every check lost the
+ * indicator's accent.
  */
 export const menuItem = [
   'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',
   'transition-colors ease-out',
   'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',
   'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',
-  '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',
-  '[&_svg:not([class*=text-])]:text-muted-foreground',
+  '[&_svg]:pointer-events-none [&_svg]:shrink-0',
+  '[&_svg:not([data-slot$=-indicator]_*)]:size-4',
+  '[&_svg:not([class*=text-]):not([data-slot$=-indicator]_*)]:text-muted-foreground',
 ].join(' ')
 
 /** A destructive action keeps readable text and marks its row with a status edge. */