@adea-ai/ui 0.118.3 → 0.119.1

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/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/lib/themes.ts

@@ -296,6 +296,16 @@ function toVariant(theme: AdeaThemeRecord): ThemeVariant {
   }
 }
 
+/**
+ * A variant's `--primary-subtle`: the tint over `var(--primary)` at the strength its
+ * catalogue record measures (`primarySubtleAlpha`). A variant that is not in the
+ * catalogue has nothing to measure, and gets its appearance's ceiling.
+ */
+export function primarySubtleFor(theme: Pick<ThemeVariant, 'id' | 'appearance'>): string {
+  const record = getTheme(theme.id)
+  return record ? primarySubtleCss(record) : primarySubtleCss(theme.appearance)
+}
+
 /** The catalogue, in catalogue order. */
 export const builtinThemes: readonly ThemeVariant[] = Object.freeze(catalogue.map(toVariant))
 
@@ -462,12 +472,17 @@ export function accentVariables(
   const preset = resolveAccentPreset(accentId, light, dark)
   if (!preset) return undefined
 
+  // `--primary-subtle` is deliberately not here. It is a `color-mix()` over
+  // `var(--primary)`, so the theme's own declaration (`themeCssVariables`, or the
+  // default block in `theme.css`) already follows the accent; and its strength is the
+  // *theme's*, measured by `primarySubtleAlpha` to hold body text at 4.5:1 for every
+  // accent the theme offers. Writing one here would replace that measured strength
+  // with whatever this function was given, which is how an accent used to undo it.
   const roles = accentRoles(preset, appearance)
   return {
     '--primary': roles.primary,
     '--primary-foreground': roles.primaryForeground,
     '--primary-hover': roles.primaryHover,
-    '--primary-subtle': roles.primarySubtle,
     '--ring': roles.ring,
   }
 }
@@ -502,12 +517,15 @@ export function themeCssVariables(theme: ThemeVariant): Record<string, string> {
      * step cannot be expressed as a mix (see `primaryHover`). Left out, a theme switch
      * would keep the previous theme's hover on the new theme's primary.
      *
-     * `--primary-subtle` is a mix over `--primary`, so it would follow on its own —
-     * it is written anyway so the pair is applied together and neither is left to
-     * depend on which stylesheet happened to load.
+     * `--primary-subtle` is a mix over `--primary`, so it follows an accent on its
+     * own, but its *strength* is per theme: `primarySubtleCss(record)` lowers the
+     * appearance ceiling only as far as this theme needs for body text to clear 4.5:1
+     * on the tint, over every surface, for every accent it offers. It has to be
+     * written per theme for that reason — the appearance-wide value is not legible on
+     * every palette.
      */
     '--primary-hover': primaryHover(c.primary, theme.appearance),
-    '--primary-subtle': primarySubtleCss(theme.appearance),
+    '--primary-subtle': primarySubtleFor(theme),
     '--secondary': c.secondary,
     '--secondary-foreground': c.secondaryForeground,
     '--muted': c.muted,

package/src/styles/theme.css

@@ -153,6 +153,11 @@
    * rule rather than a matching one — which is what they were not, before.
    */
   --primary-hover: oklch(0.4643 0.1668 301.69);
+  /*
+   * The selected-state tint. A share of `--primary`, so it follows an accent with
+   * no block of its own; the share is this theme's, measured by @adea-ai/themes so
+   * body text clears 4.5:1 on it over every surface, for every accent it offers.
+   */
   --primary-subtle: color-mix(in oklch, var(--primary) 10%, transparent);
   /* The window chrome, one step off the canvas. */
   --chrome: var(--surface);
@@ -283,6 +288,11 @@
    * rule rather than a matching one — which is what they were not, before.
    */
   --primary-hover: oklch(0.7823 0.1668 301.69);
+  /*
+   * The selected-state tint. A share of `--primary`, so it follows an accent with
+   * no block of its own; the share is this theme's, measured by @adea-ai/themes so
+   * body text clears 4.5:1 on it over every surface, for every accent it offers.
+   */
   --primary-subtle: color-mix(in oklch, var(--primary) 16%, transparent);
   /* The window chrome, one step off the canvas. */
   --chrome: var(--surface);
@@ -310,7 +320,13 @@
  * adea's six accent presets, as a selection rather than a constant. `data-accent` sits on
  * the same element as `dark` — in both applications that is `<html>` — and each
  * block overrides the roles an accent owns: the interactive primary, its label,
- * its hover rung, its tint and the focus ring.
+ * its hover rung and the focus ring.
+ *
+ * The tint, `--primary-subtle`, is not one of them. It is a share of `var(--primary)`
+ * declared on the same element, so it already follows the accent; and the share is
+ * the theme's own, measured by @adea-ai/themes so body text clears 4.5:1 on it. A
+ * block keyed only on the appearance could carry only the appearance-wide ceiling,
+ * which would undo that measurement for every theme that needs a lighter wash.
  *
  * The values are adea's accent presets, passed through the same two rules
  * `deriveAccentRoles` applies in the product:
@@ -330,14 +346,12 @@
   --primary: oklch(0.4907 0.2412 292.58);
   --primary-foreground: oklch(1 0 0);
   --primary-hover: oklch(0.4407 0.2412 292.58);
-  --primary-subtle: color-mix(in oklch, var(--primary) 10%, transparent);
   --ring: oklch(0.4907 0.2412 292.58);
 }
 .dark[data-accent='violet'] {
   --primary: oklch(0.709 0.1592 293.54);
   --primary-foreground: oklch(0 0 0);
   --primary-hover: oklch(0.759 0.1592 293.54);
-  --primary-subtle: color-mix(in oklch, var(--primary) 16%, transparent);
   --ring: oklch(0.709 0.1592 293.54);
 }
 
@@ -345,14 +359,12 @@
   --primary: oklch(0.5461 0.2152 262.88);
   --primary-foreground: oklch(1 0 0);
   --primary-hover: oklch(0.4961 0.2152 262.88);
-  --primary-subtle: color-mix(in oklch, var(--primary) 10%, transparent);
   --ring: oklch(0.5461 0.2152 262.88);
 }
 .dark[data-accent='blue'] {
   --primary: oklch(0.7137 0.1434 254.62);
   --primary-foreground: oklch(0 0 0);
   --primary-hover: oklch(0.7637 0.1434 254.62);
-  --primary-subtle: color-mix(in oklch, var(--primary) 16%, transparent);
   --ring: oklch(0.7137 0.1434 254.62);
 }
 
@@ -360,14 +372,12 @@
   --primary: oklch(0.5273 0.1371 150.07);
   --primary-foreground: oklch(1 0 0);
   --primary-hover: oklch(0.4773 0.1371 150.07);
-  --primary-subtle: color-mix(in oklch, var(--primary) 10%, transparent);
   --ring: oklch(0.5273 0.1371 150.07);
 }
 .dark[data-accent='green'] {
   --primary: oklch(0.8003 0.1821 151.71);
   --primary-foreground: oklch(0 0 0);
   --primary-hover: oklch(0.8503 0.1363 151.71);
-  --primary-subtle: color-mix(in oklch, var(--primary) 16%, transparent);
   --ring: oklch(0.8003 0.1821 151.71);
 }
 
@@ -375,14 +385,12 @@
   --primary: oklch(0.5553 0.1455 49);
   --primary-foreground: oklch(1 0 0);
   --primary-hover: oklch(0.5053 0.1455 49);
-  --primary-subtle: color-mix(in oklch, var(--primary) 10%, transparent);
   --ring: oklch(0.5553 0.1455 49);
 }
 .dark[data-accent='amber'] {
   --primary: oklch(0.8369 0.1644 84.43);
   --primary-foreground: oklch(0 0 0);
   --primary-hover: oklch(0.8869 0.0991 84.43);
-  --primary-subtle: color-mix(in oklch, var(--primary) 16%, transparent);
   --ring: oklch(0.8369 0.1644 84.43);
 }
 
@@ -390,14 +398,12 @@
   --primary: oklch(0.5198 0.0936 223.13);
   --primary-foreground: oklch(1 0 0);
   --primary-hover: oklch(0.4698 0.0936 223.13);
-  --primary-subtle: color-mix(in oklch, var(--primary) 10%, transparent);
   --ring: oklch(0.5198 0.0936 223.13);
 }
 .dark[data-accent='cyan'] {
   --primary: oklch(0.7971 0.1339 211.53);
   --primary-foreground: oklch(0 0 0);
   --primary-hover: oklch(0.8471 0.102 211.53);
-  --primary-subtle: color-mix(in oklch, var(--primary) 16%, transparent);
   --ring: oklch(0.7971 0.1339 211.53);
 }
 
@@ -405,14 +411,12 @@
   --primary: oklch(0.5246 0.199 3.96);
   --primary-foreground: oklch(1 0 0);
   --primary-hover: oklch(0.4746 0.199 3.96);
-  --primary-subtle: color-mix(in oklch, var(--primary) 10%, transparent);
   --ring: oklch(0.5246 0.199 3.96);
 }
 .dark[data-accent='pink'] {
   --primary: oklch(0.7253 0.1752 349.76);
   --primary-foreground: oklch(0 0 0);
   --primary-hover: oklch(0.7753 0.1752 349.76);
-  --primary-subtle: color-mix(in oklch, var(--primary) 16%, transparent);
   --ring: oklch(0.7253 0.1752 349.76);
 }
 /* @end generated accents */