@adea-ai/ui 0.118.2 → 0.119.0

package/dist/lib/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":[],"sources":["../../src/lib/overlay.ts"],"sourcesContent":["/**\n * Shared strings for the overlay layer: dialogs, sheets, menus, popovers,\n * tooltips and the command palette.\n *\n * These live here rather than in each component because the overlay family is\n * where consistency is most visible and least likely to survive duplication.\n * A dialog, a sheet and a dropdown that disagree about their border, radius,\n * motion or shadow read as three different apps — and an app that adopts this\n * library would inherit all three. Declaring the surface once is what makes\n * \"an overlay looks like this\" a fact rather than a convention.\n */\n\nimport { cva, type VariantProps } from '#lib/variants'\n\n/** The panel itself: fill, hairline edge, radius, elevation. Menus, popovers\n * and the command palette float on the elevated overlay rung (`--popover`). */\nexport const overlaySurface =\n  'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'\n\n/**\n * The modal panel: the same hairline edge, radius and elevation, painted on the\n * *neutral* theme surface instead of the elevated overlay rung.\n *\n * `--popover` is the catalogue's `surfaceElevated`, whose derivation amplifies\n * the canvas hue's chroma on the elevated step. On the dark default's violet\n * canvas that makes the dialog the most chromatic surface in the ladder —\n * `oklch(0.2406 0.0088 300.91)`, red above green in sRGB — and on a full dialog\n * panel that cast reads as a warm tint the canvas never has. shadcn's own\n * convention already splits the two: a Dialog paints `bg-background`, menus and\n * popovers paint `bg-popover`. The veil, the hairline and the elevation shadow\n * carry the separation the lighter fill no longer provides.\n */\nexport const dialogSurface =\n  'bg-background text-foreground rounded-xl border border-border shadow-lg'\n\n/**\n * Overlay titles have one fixed typography role. Keep this small recipe shared\n * without loading the configurable Heading component into every dialog.\n */\nexport const overlayTitle = 'font-semibold text-base tracking-tight leading-none'\n\n/** The span of the portal wrapper that centres a dialog-like overlay. */\nexport const overlayPositioner = 'fixed inset-0 z-(--z-dialog) grid place-items-center p-4'\n\n/** The dimming layer behind a modal overlay. */\nexport const overlayScrim =\n  'fixed inset-0 z-(--z-dialog) bg-scrim/50 supports-[backdrop-filter]:backdrop-blur-xs'\n\n/**\n * The tip: the card-toned bubble an explanation shows in. The side rail draws\n * it flush to a collapsed row and every floating tooltip composes the same\n * fill, edge, and type, so a control never explains itself in two visual\n * languages.\n */\nexport const tooltipTip =\n  'bg-card text-card-foreground rounded-md border border-border text-sm font-medium shadow-lg'\n\n/**\n * Entrance and exit motion, expressed as data-state classes.\n *\n * `data-expanded` / `data-closed` are Kobalte's; `data-side-*` come from its\n * popper positioning and let a menu slide in from the edge it is anchored to,\n * which is what makes a dropdown feel attached to its trigger rather than\n * dropped on the screen. Exit motion is shorter than entry, because a\n * dismissal should feel immediate while an arrival benefits from being seen.\n */\nexport const overlayMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n  'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n  'data-expanded:duration-200 data-closed:duration-150',\n].join(' ')\n\n/** Popover-style motion: no zoom, so a panel anchored to a control does not\n * appear to breathe away from it. */\nexport const popoverMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n  'data-expanded:duration-150 data-closed:duration-100',\n].join(' ')\n\n/** The popper arrow. Sized in the component; coloured here. */\nexport const popoverArrow = 'fill-popover stroke-border'\n\n/**\n * A menu row: the shared height, radius, hover fill and focus treatment for\n * every item inside a menu, listbox or command list.\n */\nexport const menuItem = [\n  'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',\n  'transition-colors ease-out',\n  'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',\n  'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n  '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',\n  '[&_svg:not([class*=text-])]:text-muted-foreground',\n].join(' ')\n\n/** A destructive action keeps readable text and marks its row with a status edge. */\nexport const destructiveMenuItem =\n  'border-s-2 border-destructive ps-1.5 text-foreground data-[highlighted]:bg-destructive-subtle'\n\n/** The label above a group of menu rows. */\nexport const menuLabel =\n  'px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase'\n\n/** The rule between menu groups. */\nexport const menuSeparator = 'bg-border -mx-1 my-1 h-px'\n\n/**\n * A leading colour swatch on a menu or select row: the sanctioned way to carry\n * a card-tone colour into a list of options. The tones are the system's accent\n * and status roles — the vocabulary a Badge already speaks — so the colour an\n * option shows in a menu is the colour its badge carries on a card, and a\n * caller never passes a raw colour into a list. The dot is `aria-hidden`; the\n * label carries the meaning, so a tone is never the only signal.\n */\nexport const menuSwatchTone = cva('size-2 shrink-0 rounded-full', {\n  variants: {\n    tone: {\n      neutral: 'bg-muted-foreground',\n      primary: 'bg-primary',\n      success: 'bg-success',\n      warning: 'bg-warning',\n      destructive: 'bg-destructive',\n      info: 'bg-info',\n    },\n  },\n  defaultVariants: { tone: 'neutral' },\n})\n\n/** The tones a menu row's swatch can take. */\nexport type MenuSwatchTone = NonNullable<VariantProps<typeof menuSwatchTone>['tone']>\n\n/** Padding shared by every menu-list surface. */\nexport const menuContentPadding = 'p-1'\n\n/**\n * Marks a floating layer — a menu, a listbox, a popover — as part of the top\n * layer.\n *\n * A modal dialog hides everything outside itself from assistive technology\n * (`aria-hidden` on its siblings) and keeps watching `<body>` for new nodes.\n * A menu or select opened from inside the dialog portals to `<body>`, so the\n * dialog hid it too: the list was on screen, focused, and invisible to a\n * screen reader, and an outside-click check could treat a click on it as a\n * click away from the dialog. Kobalte exempts nodes carrying this attribute\n * from both, so every floating layer carries it.\n */\nexport const topLayerProps = { 'data-kb-top-layer': '' } as const\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAa,iBACX;;;;;;;;;;;;;;AAeF,IAAa,gBACX;;;;;AAMF,IAAa,eAAe;;AAG5B,IAAa,oBAAoB;;AAGjC,IAAa,eACX;;;;;;;AAQF,IAAa,aACX;;;;;;;;;;AAWF,IAAa,gBAAgB;CAC3B;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;AAIV,IAAa,gBAAgB,CAC3B,mGACA,qDACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,eAAe;;;;;AAM5B,IAAa,WAAW;CACtB;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,sBACX;;AAGF,IAAa,YACX;;AAGF,IAAa,gBAAgB;;;;;;;;;AAU7B,IAAa,iBAAiB,IAAI,gCAAgC;CAChE,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,SAAS;EACT,SAAS;EACT,aAAa;EACb,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;;;;;;;;;;;;;AAoBD,IAAa,gBAAgB,EAAE,qBAAqB,GAAG"}
+{"version":3,"file":"overlay.js","names":[],"sources":["../../src/lib/overlay.ts"],"sourcesContent":["/**\n * Shared strings for the overlay layer: dialogs, sheets, menus, popovers,\n * tooltips and the command palette.\n *\n * These live here rather than in each component because the overlay family is\n * where consistency is most visible and least likely to survive duplication.\n * A dialog, a sheet and a dropdown that disagree about their border, radius,\n * motion or shadow read as three different apps — and an app that adopts this\n * library would inherit all three. Declaring the surface once is what makes\n * \"an overlay looks like this\" a fact rather than a convention.\n */\n\nimport { cva, type VariantProps } from '#lib/variants'\n\n/** The panel itself: fill, hairline edge, radius, elevation. Menus, popovers\n * and the command palette float on the elevated overlay rung (`--popover`). */\nexport const overlaySurface =\n  'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'\n\n/**\n * The modal panel: the same hairline edge, radius and elevation, painted on the\n * *neutral* theme surface instead of the elevated overlay rung.\n *\n * `--popover` is the catalogue's `surfaceElevated`, whose derivation amplifies\n * the canvas hue's chroma on the elevated step. On the dark default's violet\n * canvas that makes the dialog the most chromatic surface in the ladder —\n * `oklch(0.2406 0.0088 300.91)`, red above green in sRGB — and on a full dialog\n * panel that cast reads as a warm tint the canvas never has. shadcn's own\n * convention already splits the two: a Dialog paints `bg-background`, menus and\n * popovers paint `bg-popover`. The veil, the hairline and the elevation shadow\n * carry the separation the lighter fill no longer provides.\n */\nexport const dialogSurface =\n  'bg-background text-foreground rounded-xl border border-border shadow-lg'\n\n/**\n * Overlay titles have one fixed typography role. Keep this small recipe shared\n * without loading the configurable Heading component into every dialog.\n */\nexport const overlayTitle = 'font-semibold text-base tracking-tight leading-none'\n\n/** The span of the portal wrapper that centres a dialog-like overlay. */\nexport const overlayPositioner = 'fixed inset-0 z-(--z-dialog) grid place-items-center p-4'\n\n/** The dimming layer behind a modal overlay. */\nexport const overlayScrim =\n  'fixed inset-0 z-(--z-dialog) bg-scrim/50 supports-[backdrop-filter]:backdrop-blur-xs'\n\n/**\n * The tip: the card-toned bubble an explanation shows in. The side rail draws\n * it flush to a collapsed row and every floating tooltip composes the same\n * fill, edge, and type, so a control never explains itself in two visual\n * languages.\n */\nexport const tooltipTip =\n  'bg-card text-card-foreground rounded-md border border-border text-sm font-medium shadow-lg'\n\n/**\n * Entrance and exit motion, expressed as data-state classes.\n *\n * `data-expanded` / `data-closed` are Kobalte's; `data-side-*` come from its\n * popper positioning and let a menu slide in from the edge it is anchored to,\n * which is what makes a dropdown feel attached to its trigger rather than\n * dropped on the screen. Exit motion is shorter than entry, because a\n * dismissal should feel immediate while an arrival benefits from being seen.\n */\nexport const overlayMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',\n  'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n  'data-expanded:duration-200 data-closed:duration-150',\n].join(' ')\n\n/** Popover-style motion: no zoom, so a panel anchored to a control does not\n * appear to breathe away from it. */\nexport const popoverMotion = [\n  'data-expanded:animate-in data-expanded:fade-in-0 data-closed:animate-out data-closed:fade-out-0',\n  'data-expanded:duration-150 data-closed:duration-100',\n].join(' ')\n\n/** The popper arrow. Sized in the component; coloured here. */\nexport const popoverArrow = 'fill-popover stroke-border'\n\n/**\n * A menu row: the shared height, radius, hover fill and focus treatment for\n * every item inside a menu, listbox or command list.\n *\n * The row sizes and dims the icons a caller puts in it, but not the glyph of\n * its selection indicator (any `[data-slot$=-indicator]`): a descendant `svg`\n * rule outranks a single utility on the glyph, so without the exclusion a\n * radio item's `size-2` dot drew as a 16px muted disc and every check lost the\n * indicator's accent.\n */\nexport const menuItem = [\n  'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',\n  'transition-colors ease-out',\n  'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',\n  'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n  '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n  '[&_svg:not([data-slot$=-indicator]_*)]:size-4',\n  '[&_svg:not([class*=text-]):not([data-slot$=-indicator]_*)]:text-muted-foreground',\n].join(' ')\n\n/** A destructive action keeps readable text and marks its row with a status edge. */\nexport const destructiveMenuItem =\n  'border-s-2 border-destructive ps-1.5 text-foreground data-[highlighted]:bg-destructive-subtle'\n\n/** The label above a group of menu rows. */\nexport const menuLabel =\n  'px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase'\n\n/** The rule between menu groups. */\nexport const menuSeparator = 'bg-border -mx-1 my-1 h-px'\n\n/**\n * A leading colour swatch on a menu or select row: the sanctioned way to carry\n * a card-tone colour into a list of options. The tones are the system's accent\n * and status roles — the vocabulary a Badge already speaks — so the colour an\n * option shows in a menu is the colour its badge carries on a card, and a\n * caller never passes a raw colour into a list. The dot is `aria-hidden`; the\n * label carries the meaning, so a tone is never the only signal.\n */\nexport const menuSwatchTone = cva('size-2 shrink-0 rounded-full', {\n  variants: {\n    tone: {\n      neutral: 'bg-muted-foreground',\n      primary: 'bg-primary',\n      success: 'bg-success',\n      warning: 'bg-warning',\n      destructive: 'bg-destructive',\n      info: 'bg-info',\n    },\n  },\n  defaultVariants: { tone: 'neutral' },\n})\n\n/** The tones a menu row's swatch can take. */\nexport type MenuSwatchTone = NonNullable<VariantProps<typeof menuSwatchTone>['tone']>\n\n/** Padding shared by every menu-list surface. */\nexport const menuContentPadding = 'p-1'\n\n/**\n * Marks a floating layer — a menu, a listbox, a popover — as part of the top\n * layer.\n *\n * A modal dialog hides everything outside itself from assistive technology\n * (`aria-hidden` on its siblings) and keeps watching `<body>` for new nodes.\n * A menu or select opened from inside the dialog portals to `<body>`, so the\n * dialog hid it too: the list was on screen, focused, and invisible to a\n * screen reader, and an outside-click check could treat a click on it as a\n * click away from the dialog. Kobalte exempts nodes carrying this attribute\n * from both, so every floating layer carries it.\n */\nexport const topLayerProps = { 'data-kb-top-layer': '' } as const\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,IAAa,iBACX;;;;;;;;;;;;;;AAeF,IAAa,gBACX;;;;;AAMF,IAAa,eAAe;;AAG5B,IAAa,oBAAoB;;AAGjC,IAAa,eACX;;;;;;;AAQF,IAAa,aACX;;;;;;;;;;AAWF,IAAa,gBAAgB;CAC3B;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;AAIV,IAAa,gBAAgB,CAC3B,mGACA,qDACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,eAAe;;;;;;;;;;;AAY5B,IAAa,WAAW;CACtB;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;AAGV,IAAa,sBACX;;AAGF,IAAa,YACX;;AAGF,IAAa,gBAAgB;;;;;;;;;AAU7B,IAAa,iBAAiB,IAAI,gCAAgC;CAChE,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,SAAS;EACT,SAAS;EACT,aAAa;EACb,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;;;;;;;;;;;;;AAoBD,IAAa,gBAAgB,EAAE,qBAAqB,GAAG"}

package/dist/r/registry.json

@@ -2186,7 +2186,9 @@
       "type": "registry:ui",
       "title": "Settings",
       "description": "",
-      "dependencies": [],
+      "dependencies": [
+        "@kobalte/core@^0.13.14"
+      ],
       "registryDependencies": [
         "@adea-ai/ui/sidebar-nav",
         "@adea-ai/ui/tabs",

package/dist/r/settings.json

@@ -3,7 +3,9 @@
   "type": "registry:ui",
   "title": "Settings",
   "description": "",
-  "dependencies": [],
+  "dependencies": [
+    "@kobalte/core@^0.13.14"
+  ],
   "registryDependencies": [
     "@adea-ai/ui/sidebar-nav",
     "@adea-ai/ui/tabs",

package/dist/r/src/components/composites/settings/index.ts

@@ -1,5 +1,9 @@
 export { SettingsField, SettingsPage, SettingsRow, SettingsSection } from './settings'
-export { SettingsLayout, type SettingsLayoutProps } from './settings-layout'
+export {
+  SettingsLayout,
+  type SettingsLayoutProps,
+  type SettingsNavigationLayout,
+} from './settings-layout'
 export {
   SettingsNavigation,
   type SettingsNavigationGroup,

package/dist/r/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/dist/r/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/dist/r/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/dist/r/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/dist/r/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/dist/r/src/components/ui/item/index.ts

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

package/dist/r/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/dist/r/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/dist/r/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/dist/r/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. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.118.2",
+  "version": "0.119.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

@@ -2186,7 +2186,9 @@
       "type": "registry:ui",
       "title": "Settings",
       "description": "",
-      "dependencies": [],
+      "dependencies": [
+        "@kobalte/core@^0.13.14"
+      ],
       "registryDependencies": [
         "@adea-ai/ui/sidebar-nav",
         "@adea-ai/ui/tabs",

package/src/components/composites/settings/index.ts

@@ -1,5 +1,9 @@
 export { SettingsField, SettingsPage, SettingsRow, SettingsSection } from './settings'
-export { SettingsLayout, type SettingsLayoutProps } from './settings-layout'
+export {
+  SettingsLayout,
+  type SettingsLayoutProps,
+  type SettingsNavigationLayout,
+} from './settings-layout'
 export {
   SettingsNavigation,
   type SettingsNavigationGroup,