@adea-ai/ui 0.118.3 → 0.119.0

package/dist/components/ui/item/item.js

@@ -1,10 +1,10 @@
 import { cn } from "../../../lib/utils.js";
 import { cva } from "../../../lib/variants.js";
-import { createComponent, effect, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
+import { className, createComponent, effect, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
 import { Show, splitProps } from "solid-js";
 //#region src/components/ui/item/item.tsx
 var _tmpl$ = /*#__PURE__*/ template(`<span data-slot=item-media class="flex size-8 shrink-0 items-center justify-center [&amp;_svg]:size-4">`);
-var _tmpl$2 = /*#__PURE__*/ template(`<span data-slot=item-trailing class="flex shrink-0 items-center gap-2">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span data-slot=item-trailing>`);
 var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=item><div data-slot=item-body class="flex min-w-0 flex-1 flex-col gap-0.5">`);
 var _tmpl$4 = /*#__PURE__*/ template(`<div data-slot=item-title>`);
 var _tmpl$5 = /*#__PURE__*/ template(`<div data-slot=item-description>`);
@@ -56,16 +56,22 @@ function Item(props) {
 		"size",
 		"media",
 		"trailing",
+		"stackTrailing",
 		"children"
 	]);
 	return (() => {
 		var _el$ = _tmpl$3(), _el$3 = _el$.firstChild;
-		spread(_el$, mergeProps({ get ["class"]() {
-			return cn(itemVariants({
-				variant: local.variant,
-				size: local.size
-			}), local.class);
-		} }, rest), false, true);
+		spread(_el$, mergeProps({
+			get ["data-stack-trailing"]() {
+				return local.stackTrailing ? "" : void 0;
+			},
+			get ["class"]() {
+				return cn(itemVariants({
+					variant: local.variant,
+					size: local.size
+				}), { "@container/item flex-wrap": local.stackTrailing }, local.class);
+			}
+		}, rest), false, true);
 		insert(_el$, createComponent(Show, {
 			get when() {
 				return local.media;
@@ -84,6 +90,7 @@ function Item(props) {
 			get children() {
 				var _el$4 = _tmpl$2();
 				insert(_el$4, () => local.trailing);
+				effect(() => className(_el$4, 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 })));
 				return _el$4;
 			}
 		}), null);
@@ -101,11 +108,11 @@ function ItemTitle(props) {
 	})();
 }
 function ItemDescription(props) {
-	const [local, rest] = splitProps(props, ["class"]);
+	const [local, rest] = splitProps(props, ["class", "clamp"]);
 	return (() => {
 		var _el$6 = _tmpl$5();
 		spread(_el$6, mergeProps({ get ["class"]() {
-			return cn("text-muted-foreground line-clamp-2 text-xs text-pretty", local.class);
+			return cn("text-muted-foreground text-xs text-pretty", { "line-clamp-2": local.clamp !== false }, local.class);
 		} }, rest), false, false);
 		return _el$6;
 	})();

package/dist/components/ui/item/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","names":["ComponentProps","JSX","Show","splitProps","cva","VariantProps","cn","itemVariants","variants","variant","default","outline","muted","size","sm","md","lg","defaultVariants","ItemVariantProps","ItemProps","media","Element","trailing","Item","props","local","rest","_el$","_tmpl$3","_el$3","firstChild","_$spread","_$mergeProps","class","_$insert","_$createComponent","when","children","_el$2","_tmpl$","_el$4","_tmpl$2","ItemTitle","_el$5","_tmpl$4","ItemDescription","_el$6","_tmpl$5","ItemGroup","label","listLabel","_el$7","_tmpl$7","_el$9","_el$8","_tmpl$6","_$effect","_$setAttribute","ItemGroupEntry","role","ItemEmpty","_el$0","_tmpl$8","_$mergeProps","_$createComponent","_$setAttribute"],"sources":["../../../../src/components/ui/item/item.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Item.\n *\n * The general row: a leading slot, a body, and a trailing slot. It is the shape\n * almost every list in an application takes — a file, a member, a setting, a\n * search result — and it exists as a component because a row is where inconsistency\n * is most visible: twenty of them make any drift in height, padding or alignment\n * obvious at a glance.\n *\n * The difference from `ListRow` is what it is *for*. `ListRow` is one row in a list\n * of like things, sized by the row ladder and meant to be scanned down a column.\n * `Item` is a self-contained block — it has a border, its own surface, an optional\n * title and description — and is meant to stand alone or sit in a grid. A list uses\n * `ListRow`; a search result or a settings card uses `Item`.\n *\n * `variant=\"outline\"` and `\"muted\"` exist because the two questions a caller\n * actually has are \"does this need an edge\" and \"is it on the canvas or inset\".\n */\nexport const itemVariants = cva('flex w-full items-center gap-3 rounded-lg text-sm', {\n  variants: {\n    variant: {\n      default: 'bg-transparent',\n      /** On the canvas, with an edge — the search-result shape. */\n      outline: 'border border-border bg-card',\n      /** Inset: a code well, a disabled row, a quoted message. */\n      muted: 'bg-muted',\n    },\n    size: {\n      sm: 'min-h-row-sm px-3 py-1.5',\n      md: 'min-h-row-md px-3 py-2',\n      lg: 'min-h-row-lg px-4 py-2.5',\n    },\n  },\n  defaultVariants: { variant: 'default', size: 'md' },\n})\n\ntype ItemVariantProps = VariantProps<typeof itemVariants>\n\nexport type ItemProps = ComponentProps<'div'> &\n  ItemVariantProps & {\n    /** A media slot: an icon, an avatar, a thumbnail. */\n    media?: JSX.Element\n    /** A trailing slot: a badge, a timestamp, a menu trigger. */\n    trailing?: JSX.Element\n  }\n\nexport function Item(props: ItemProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'variant',\n    'size',\n    'media',\n    'trailing',\n    'children',\n  ])\n\n  return (\n    <div\n      data-slot=\"item\"\n      class={cn(itemVariants({ variant: local.variant, size: local.size }), local.class)}\n      {...rest}\n    >\n      <Show when={local.media}>\n        <span\n          data-slot=\"item-media\"\n          class=\"flex size-8 shrink-0 items-center justify-center [&_svg]:size-4\"\n        >\n          {local.media}\n        </span>\n      </Show>\n      <div data-slot=\"item-body\" class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        {local.children}\n      </div>\n      <Show when={local.trailing}>\n        <span data-slot=\"item-trailing\" class=\"flex shrink-0 items-center gap-2\">\n          {local.trailing}\n        </span>\n      </Show>\n    </div>\n  )\n}\n\nexport function ItemTitle(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <div data-slot=\"item-title\" class={cn('truncate font-medium', local.class)} {...rest} />\n}\n\nexport function ItemDescription(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"item-description\"\n      class={cn('text-muted-foreground line-clamp-2 text-xs text-pretty', local.class)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * A group of items with an optional heading. It is a real `role=\"list\"` with\n * `role=\"listitem\"` children, so a screen reader reports the count — which is how a\n * user knows how many results there are without counting them.\n */\nexport function ItemGroup(\n  props: ComponentProps<'div'> & {\n    label?: string\n    /** The list's accessible name. */ listLabel?: string\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'listLabel', 'children'])\n\n  return (\n    <div data-slot=\"item-group\" class={cn('flex flex-col gap-2', local.class)} {...rest}>\n      <Show when={local.label}>\n        <div class=\"text-muted-foreground text-2xs font-medium tracking-wide uppercase\">\n          {local.label}\n        </div>\n      </Show>\n      <div role=\"list\" aria-label={local.listLabel ?? local.label} class=\"flex flex-col gap-2\">\n        {local.children}\n      </div>\n    </div>\n  )\n}\n\n/** An item inside an `ItemGroup`, which is what makes it a list item. */\nexport function ItemGroupEntry(props: ItemProps) {\n  return <Item role=\"listitem\" {...props} />\n}\n\n/** A centred message for a group with nothing in it. */\nexport function ItemEmpty(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"item-empty\"\n      class={cn('text-muted-foreground py-6 text-center text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"item.js","names":["ComponentProps","JSX","Show","splitProps","cva","VariantProps","cn","itemVariants","variants","variant","default","outline","muted","size","sm","md","lg","defaultVariants","ItemVariantProps","ItemProps","media","Element","trailing","stackTrailing","Item","props","local","rest","_el$","_tmpl$3","_el$3","firstChild","_$spread","_$mergeProps","data-stack-trailing","undefined","class","_$insert","_$createComponent","when","children","_el$2","_tmpl$","_el$4","_tmpl$2","_$effect","_$className","ItemTitle","_el$5","_tmpl$4","ItemDescriptionProps","clamp","ItemDescription","_el$6","_tmpl$5","ItemGroup","label","listLabel","_el$7","_tmpl$7","_el$9","_el$8","_tmpl$6","_$setAttribute","ItemGroupEntry","role","ItemEmpty","_el$0","_tmpl$8","_$mergeProps","_$createComponent","_$className","_$setAttribute"],"sources":["../../../../src/components/ui/item/item.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cva, type VariantProps } from '#lib/variants'\nimport { cn } from '#lib/utils'\n\n/**\n * Item.\n *\n * The general row: a leading slot, a body, and a trailing slot. It is the shape\n * almost every list in an application takes — a file, a member, a setting, a\n * search result — and it exists as a component because a row is where inconsistency\n * is most visible: twenty of them make any drift in height, padding or alignment\n * obvious at a glance.\n *\n * The difference from `ListRow` is what it is *for*. `ListRow` is one row in a list\n * of like things, sized by the row ladder and meant to be scanned down a column.\n * `Item` is a self-contained block — it has a border, its own surface, an optional\n * title and description — and is meant to stand alone or sit in a grid. A list uses\n * `ListRow`; a search result or a settings card uses `Item`.\n *\n * `variant=\"outline\"` and `\"muted\"` exist because the two questions a caller\n * actually has are \"does this need an edge\" and \"is it on the canvas or inset\".\n */\nexport const itemVariants = cva('flex w-full items-center gap-3 rounded-lg text-sm', {\n  variants: {\n    variant: {\n      default: 'bg-transparent',\n      /** On the canvas, with an edge — the search-result shape. */\n      outline: 'border border-border bg-card',\n      /** Inset: a code well, a disabled row, a quoted message. */\n      muted: 'bg-muted',\n    },\n    size: {\n      sm: 'min-h-row-sm px-3 py-1.5',\n      md: 'min-h-row-md px-3 py-2',\n      lg: 'min-h-row-lg px-4 py-2.5',\n    },\n  },\n  defaultVariants: { variant: 'default', size: 'md' },\n})\n\ntype ItemVariantProps = VariantProps<typeof itemVariants>\n\nexport type ItemProps = ComponentProps<'div'> &\n  ItemVariantProps & {\n    /** A media slot: an icon, an avatar, a thumbnail. */\n    media?: JSX.Element\n    /** A trailing slot: a badge, a timestamp, a menu trigger. */\n    trailing?: JSX.Element\n    /**\n     * Move the trailing slot onto its own line, end-aligned under the body, once\n     * the item is narrower than 28rem — the width `ListRow` stacks its trailing\n     * controls at. Off by default: a row of badges and an icon button fits beside\n     * the body, but a pair of labelled buttons squeezes a phone-width body to a\n     * few characters.\n     */\n    stackTrailing?: boolean\n  }\n\nexport function Item(props: ItemProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'variant',\n    'size',\n    'media',\n    'trailing',\n    'stackTrailing',\n    'children',\n  ])\n\n  return (\n    <div\n      data-slot=\"item\"\n      data-stack-trailing={local.stackTrailing ? '' : undefined}\n      class={cn(\n        itemVariants({ variant: local.variant, size: local.size }),\n        // The item is its own query container: the trailing slot answers to the\n        // width the item was given, not the viewport, so an item in a narrow\n        // column of a wide window stacks too.\n        { '@container/item flex-wrap': local.stackTrailing },\n        local.class\n      )}\n      {...rest}\n    >\n      <Show when={local.media}>\n        <span\n          data-slot=\"item-media\"\n          class=\"flex size-8 shrink-0 items-center justify-center [&_svg]:size-4\"\n        >\n          {local.media}\n        </span>\n      </Show>\n      <div data-slot=\"item-body\" class=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        {local.children}\n      </div>\n      <Show when={local.trailing}>\n        <span\n          data-slot=\"item-trailing\"\n          class={cn('flex shrink-0 items-center gap-2', {\n            '@max-md/item:w-full @max-md/item:flex-wrap @max-md/item:justify-end':\n              local.stackTrailing,\n          })}\n        >\n          {local.trailing}\n        </span>\n      </Show>\n    </div>\n  )\n}\n\nexport function ItemTitle(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return <div data-slot=\"item-title\" class={cn('truncate font-medium', local.class)} {...rest} />\n}\n\nexport type ItemDescriptionProps = ComponentProps<'div'> & {\n  /**\n   * Clamp to two lines. On by default, so a grid of items keeps one height; pass\n   * `false` where the description is the content — a setting's explanation, an\n   * error the reader has to read in full.\n   */\n  clamp?: boolean\n}\n\nexport function ItemDescription(props: ItemDescriptionProps) {\n  const [local, rest] = splitProps(props, ['class', 'clamp'])\n  return (\n    <div\n      data-slot=\"item-description\"\n      class={cn(\n        'text-muted-foreground text-xs text-pretty',\n        { 'line-clamp-2': local.clamp !== false },\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * A group of items with an optional heading. It is a real `role=\"list\"` with\n * `role=\"listitem\"` children, so a screen reader reports the count — which is how a\n * user knows how many results there are without counting them.\n */\nexport function ItemGroup(\n  props: ComponentProps<'div'> & {\n    label?: string\n    /** The list's accessible name. */ listLabel?: string\n  }\n) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'listLabel', 'children'])\n\n  return (\n    <div data-slot=\"item-group\" class={cn('flex flex-col gap-2', local.class)} {...rest}>\n      <Show when={local.label}>\n        <div class=\"text-muted-foreground text-2xs font-medium tracking-wide uppercase\">\n          {local.label}\n        </div>\n      </Show>\n      <div role=\"list\" aria-label={local.listLabel ?? local.label} class=\"flex flex-col gap-2\">\n        {local.children}\n      </div>\n    </div>\n  )\n}\n\n/** An item inside an `ItemGroup`, which is what makes it a list item. */\nexport function ItemGroupEntry(props: ItemProps) {\n  return <Item role=\"listitem\" {...props} />\n}\n\n/** A centred message for a group with nothing in it. */\nexport function ItemEmpty(props: ComponentProps<'div'>) {\n  const [local, rest] = splitProps(props, ['class'])\n  return (\n    <div\n      data-slot=\"item-empty\"\n      class={cn('text-muted-foreground py-6 text-center text-sm', local.class)}\n      {...rest}\n    />\n  )\n}\n"],"mappings":"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"}

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/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/package.json

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