@adea-ai/ui 0.117.0 → 0.118.0

package/src/components/ui/entity-icon/entity-icon.tsx

@@ -35,6 +35,14 @@ import { cn } from '#lib/utils'
  * `shape="rounded"` is the default because a rounded square reads as an object
  * and a circle reads as a person; use `circle` only when the tile really does
  * hold a face.
+ *
+ * `monochrome` is for a third-party brand mark — a vendor logo drawn with its
+ * own `fill`. A brand's hex is chosen for a white page: GitHub's near-black and
+ * Slack's aubergine all but vanish on a dark tile, and no tone can be picked
+ * that suits every brand in both themes. `monochrome` repaints any explicitly
+ * filled shape in the tile's glyph colour (the tone's), so the mark stays
+ * recognisable by its shape and legible in every theme. Stroke-drawn icons
+ * (Lucide, `fill="none"`) are left alone.
  */
 export const entityIconVariants = cva(
   'relative inline-flex shrink-0 items-center justify-center overflow-hidden border font-semibold select-none [&_svg]:pointer-events-none [&_svg]:shrink-0',
@@ -90,6 +98,8 @@ export type EntityIconProps = Omit<ComponentProps<'span'>, 'children'> &
     badge?: JSX.Element
     /** A second edge, drawn outside the tile — an active or selected ring. */
     ring?: boolean
+    /** Repaint a brand mark's own fills in the tile's glyph colour. */
+    monochrome?: boolean
   }
 
 /**
@@ -143,6 +153,7 @@ export function EntityIcon(props: EntityIconProps) {
     'fallback',
     'badge',
     'ring',
+    'monochrome',
     'shape',
     'size',
     'tone',
@@ -159,9 +170,13 @@ export function EntityIcon(props: EntityIconProps) {
 
   return (
     <span
+      data-slot="entity-icon"
       class={cn(
         entityIconVariants({ shape: local.shape, size: local.size, tone: local.tone }),
         local.ring && 'ring-2 ring-ring ring-offset-2 ring-offset-background',
+        // A presentation attribute (`fill="#4A154B"`) loses to any CSS rule, so
+        // this overrides the brand's hex without touching the caller's SVG.
+        local.monochrome && "[&_[fill]:not([fill='none'])]:fill-current",
         local.class
       )}
       role="img"

package/src/components/ui/field/field.tsx

@@ -188,10 +188,30 @@ export function FieldSet(props: ComponentProps<'fieldset'>) {
   return <fieldset class={cn('flex flex-col gap-4', local.class)} {...rest} />
 }
 
+export type FieldGroupProps = ComponentProps<'div'> & {
+  /**
+   * `2` lays the fields out in two columns from the `sm` breakpoint up — a
+   * short form of paired values (host and port, a name and a model). A field
+   * that needs the full width says `class="col-span-full"`. Below `sm` it is
+   * one column again, because two inputs side by side on a phone are each too
+   * narrow to read.
+   */
+  columns?: 1 | 2
+}
+
 /** A visual stack for related controls that does not imply fieldset semantics. */
-export function FieldGroup(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
-  return <div data-slot="field-group" class={cn('flex flex-col gap-4', local.class)} {...rest} />
+export function FieldGroup(props: FieldGroupProps) {
+  const [local, rest] = splitProps(props, ['class', 'columns'])
+  return (
+    <div
+      data-slot="field-group"
+      class={cn(
+        local.columns === 2 ? 'grid gap-4 sm:grid-cols-2' : 'flex flex-col gap-4',
+        local.class
+      )}
+      {...rest}
+    />
+  )
 }
 
 export function FieldLegend(props: ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {

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

@@ -10,6 +10,7 @@ export {
   FieldSeparator,
   FieldSet,
   FieldTextArea,
+  type FieldGroupProps,
   type FormFieldProps,
 } from './field'
 export { NumberField } from './number-field'

package/src/components/ui/input-group/index.ts

@@ -5,5 +5,6 @@ export {
   InputGroupInput,
   InputGroupText,
   type InputGroupAddonProps,
+  type InputGroupProps,
 } from './input-group'
 export { SecretInputGroup, type SecretInputGroupProps } from './secret-input-group'

package/src/components/ui/input-group/input-group.tsx

@@ -15,15 +15,29 @@ import { cn } from '#lib/utils'
  * The focus ring therefore lives on the group and follows `focus-within`. A
  * group containing several focusable things still reads as focused once, which
  * is the correct affordance: the user is somewhere inside it.
+ *
+ * `size` is the control rung, matching `Input`: `sm` for a toolbar search beside
+ * `icon-sm` actions, `md` (the default) everywhere else. The group's input and
+ * text follow it.
  */
-export function InputGroup(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
+export type InputGroupProps = ComponentProps<'div'> & {
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export function InputGroup(props: InputGroupProps) {
+  const [local, rest] = splitProps(props, ['class', 'size'])
 
   return (
     <div
       data-slot="input-group"
+      data-size={local.size}
       class={cn(
-        'border-input flex h-control-md w-full min-w-0 items-center gap-1.5 rounded-md border bg-transparent px-control-sm',
+        'group/input-group border-input flex w-full min-w-0 items-center gap-1.5 rounded-md border bg-transparent',
+        {
+          'h-control-sm px-control-xs': local.size === 'sm',
+          'h-control-md px-control-sm': local.size === 'md' || local.size === undefined,
+          'h-control-lg px-control-md': local.size === 'lg',
+        },
         'transition-[color,box-shadow,border-color] ease-out',
         'focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle',
         'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive-subtle',
@@ -64,7 +78,7 @@ export function InputGroupInput(props: ComponentProps<'input'>) {
       aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}
       aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}
       class={cn(
-        'h-full min-w-0 flex-1 bg-transparent text-sm outline-none',
+        'h-full min-w-0 flex-1 bg-transparent text-sm outline-none group-data-[size=sm]/input-group:text-xs',
         'placeholder:text-muted-foreground',
         'disabled:cursor-not-allowed',
         local.class
@@ -94,6 +108,7 @@ export function InputGroupAddon(props: InputGroupAddonProps) {
       class={cn(
         'text-muted-foreground flex shrink-0 items-center gap-1.5 text-sm select-none',
         '[&_svg]:pointer-events-none [&_svg]:size-4',
+        'group-data-[size=sm]/input-group:text-xs group-data-[size=sm]/input-group:[&_svg]:size-3.5',
         { 'order-first': local.align !== 'end', 'order-last': local.align === 'end' },
         local.class
       )}
@@ -130,5 +145,13 @@ export function InputGroupButton(props: ComponentProps<'button'>) {
 /** Text that reads as a value but is not an input, e.g. a unit or a suffix. */
 export function InputGroupText(props: ComponentProps<'span'> & { children?: JSX.Element }) {
   const [local, rest] = splitProps(props, ['class'])
-  return <span class={cn('text-muted-foreground text-sm', local.class)} {...rest} />
+  return (
+    <span
+      class={cn(
+        'text-muted-foreground text-sm group-data-[size=sm]/input-group:text-xs',
+        local.class
+      )}
+      {...rest}
+    />
+  )
 }

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

@@ -4,7 +4,14 @@ import { createEffect, For, onMount, Show, splitProps } from 'solid-js'
 import { useFormFieldControl } from '#lib/form-field'
 import { cn } from '#lib/utils'
 
-export type NativeSelectProps = ComponentProps<'select'> & {
+export type NativeSelectProps = Omit<ComponentProps<'select'>, 'size'> & {
+  /**
+   * The control rung, matching `Input` and `SelectTrigger`: `sm` for a dense
+   * toolbar or pane filter, `md` (the default) everywhere else. This replaces the
+   * native `size` attribute, which turns a select into a list box — a different
+   * control that this styled single-line select is not.
+   */
+  size?: 'sm' | 'md' | 'lg'
   /** Render the choices from data instead of raw option children. */
   options?: readonly NativeSelectOption[]
   /** Initialize an uncontrolled selection after its native options mount. */
@@ -62,6 +69,7 @@ export type NativeSelectOption = Readonly<{
 export function NativeSelect(props: NativeSelectProps) {
   const [local, rest] = splitProps(props, [
     'class',
+    'size',
     'children',
     'defaultValue',
     'options',
@@ -108,7 +116,13 @@ export function NativeSelect(props: NativeSelectProps) {
         aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}
         aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}
         class={cn(
-          'h-control-md min-w-0 appearance-none rounded-md border border-input bg-transparent px-control-md pr-9 text-sm',
+          'min-w-0 appearance-none rounded-md border border-input bg-transparent',
+          {
+            'h-control-sm px-control-sm pr-8 text-xs': local.size === 'sm',
+            'h-control-md px-control-md pr-9 text-sm':
+              local.size === 'md' || local.size === undefined,
+            'h-control-lg px-control-lg pr-9 text-sm': local.size === 'lg',
+          },
           'transition-[color,box-shadow,border-color] ease-out outline-none',
           'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
           'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',
@@ -132,7 +146,10 @@ export function NativeSelect(props: NativeSelectProps) {
       <ChevronDownIcon
         data-slot="native-select-icon"
         aria-hidden="true"
-        class="pointer-events-none absolute end-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+        class={cn(
+          'pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 text-muted-foreground',
+          local.size === 'sm' ? 'size-3.5' : 'size-4'
+        )}
       />
     </span>
   )

package/src/components/ui/progress/progress.tsx

@@ -39,7 +39,11 @@ export function Progress(props: ProgressProps) {
   ])
 
   return (
-    <KobalteProgress class={cn('flex w-full flex-col gap-1.5', local.class)} {...rest}>
+    <KobalteProgress
+      data-slot="progress"
+      class={cn('flex w-full flex-col gap-1.5', local.class)}
+      {...rest}
+    >
       <Show when={local.label || !local.hideValue}>
         <div class="flex items-center justify-between gap-3">
           <Show when={local.label}>

package/src/components/ui/radio-group/radio-group.tsx

@@ -1,6 +1,6 @@
 import { RadioGroup as KobalteRadioGroup } from '@kobalte/core/radio-group'
 import { Circle } from 'lucide-solid'
-import type { ComponentProps } from 'solid-js'
+import type { ComponentProps, JSX } from 'solid-js'
 import { splitProps } from 'solid-js'
 import { useFormFieldControl } from '#lib/form-field'
 import { cn } from '#lib/utils'
@@ -37,6 +37,7 @@ export function RadioGroup(props: ComponentProps<typeof KobalteRadioGroup>) {
   })
   return (
     <KobalteRadioGroup
+      data-slot="radio-group"
       id={field?.id ?? local.id}
       aria-label={local['aria-label']}
       aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}
@@ -58,14 +59,31 @@ export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item>
    */
   label?: string
   description?: string
+  /**
+   * `card` draws the option as a bordered, selectable card — for a choice
+   * whose options need a sentence each (a source type, a sync budget), where a
+   * bare radio row reads as a form field rather than a decision. The whole card
+   * is the hit target, and the selected card takes the primary edge.
+   */
+  variant?: 'default' | 'card'
+  /** A leading icon or `EntityIcon` between the radio and the text, for `card`. */
+  media?: JSX.Element
 }
 
+/**
+ * A card option's label stretches an invisible layer over the whole card, so a
+ * click anywhere on it — padding, media, description — selects the option
+ * through the label's native association with the radio input. Wrapping the
+ * card in a `<label>` would nest the item's own label inside another.
+ */
 export function RadioGroupItem(props: RadioGroupItemProps) {
   const [local, rest] = splitProps(props, [
     'class',
     'controlClass',
     'label',
     'description',
+    'variant',
+    'media',
     'children',
     'aria-label',
     'aria-labelledby',
@@ -74,11 +92,23 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
     'aria-busy',
     'title',
   ])
+  const card = () => local.variant === 'card'
 
   return (
     <KobalteRadioGroup.Item
+      data-slot="radio-group-item"
+      data-variant={card() ? 'card' : undefined}
       title={local.title}
-      class={cn('group/radio flex items-start gap-2.5', local.class)}
+      class={cn(
+        'group/radio flex items-start gap-2.5',
+        {
+          'relative rounded-lg border border-border bg-card px-3 py-2.5 transition-[color,box-shadow,border-color,background-color] ease-out hover:bg-surface-hover data-[checked]:border-primary data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-card':
+            card(),
+          'has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-primary-subtle':
+            card(),
+        },
+        local.class
+      )}
       {...rest}
     >
       <KobalteRadioGroup.ItemInput
@@ -104,10 +134,17 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
           <Circle class="size-2 fill-current" />
         </KobalteRadioGroup.ItemIndicator>
       </KobalteRadioGroup.ItemControl>
+      {local.media ? (
+        <span data-slot="radio-group-item-media" class="flex shrink-0 items-center">
+          {local.media}
+        </span>
+      ) : null}
       {local.children ?? (
         <div class="grid gap-0.5 leading-none">
           {local.label ? (
-            <KobalteRadioGroup.ItemLabel class="text-sm font-medium">
+            <KobalteRadioGroup.ItemLabel
+              class={cn('text-sm font-medium', card() && 'after:absolute after:inset-0')}
+            >
               {local.label}
             </KobalteRadioGroup.ItemLabel>
           ) : null}

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

@@ -46,6 +46,7 @@ export function SelectTrigger(props: SelectTriggerProps) {
 
   return (
     <KobalteSelect.Trigger
+      data-slot="select-trigger"
       class={cn(
         'border-input bg-transparent flex w-fit items-center justify-between gap-2 rounded-md border px-control-md',
         'whitespace-nowrap transition-[color,box-shadow,border-color] ease-out outline-none',

package/src/components/ui/sheet/sheet.tsx

@@ -60,6 +60,16 @@ const sheetVariants = cva(
         edge: '',
         inset: 'panel-dialog-inset w-lg rounded-xl border',
       },
+      /**
+       * `panel` gives a start or end sheet the shell's panel width
+       * (`--panel-width`, 390px) — the width a pane that collapses into a sheet
+       * on a narrow window already had beside the work, so its content does not
+       * reflow when it moves. Top and bottom sheets span the window either way.
+       */
+      size: {
+        default: '',
+        panel: '',
+      },
     },
     compoundVariants: [
       {
@@ -82,8 +92,15 @@ const sheetVariants = cva(
         variant: 'edge',
         class: 'inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s',
       },
+      {
+        side: ['start', 'end'],
+        variant: 'edge',
+        size: 'panel',
+        class: 'w-panel max-w-[92vw]',
+      },
+      { side: ['start', 'end'], variant: 'inset', size: 'panel', class: 'w-panel' },
     ],
-    defaultVariants: { side: 'end', variant: 'edge' },
+    defaultVariants: { side: 'end', variant: 'edge', size: 'default' },
   }
 )
 
@@ -107,6 +124,7 @@ export function SheetContent(props: SheetContentProps) {
     'class',
     'side',
     'variant',
+    'size',
     'children',
     'closeButton',
     'closeLabel',
@@ -134,7 +152,7 @@ export function SheetContent(props: SheetContentProps) {
       <KobalteDialogContent
         data-variant={variant()}
         class={cn(
-          sheetVariants({ side: local.side, variant: variant() }),
+          sheetVariants({ side: local.side, variant: variant(), size: local.size }),
           'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:duration-200',
           'data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150',
           local.class

package/src/components/ui/slider/slider.tsx

@@ -42,6 +42,7 @@ export function Slider(props: SliderProps) {
 
   return (
     <KobalteSlider
+      data-slot="slider"
       class={cn(
         'relative flex touch-none flex-col justify-center select-none',
         'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-5 data-[orientation=horizontal]:w-full',

package/src/components/ui/status-chip/status-chip.tsx

@@ -90,6 +90,7 @@ export function StatusChip(props: StatusChipProps) {
 
   const chip = (
     <span
+      data-slot="status-chip"
       class={cn(
         'inline-flex w-fit items-center gap-1.5 text-xs font-medium whitespace-nowrap',
         labelTone[local.tone ?? 'neutral'],

package/src/components/ui/switch/switch.tsx

@@ -64,6 +64,7 @@ export function Switch(props: SwitchProps) {
 
   return (
     <KobalteSwitch
+      data-slot="switch"
       id={field ? undefined : local.id}
       title={local.title}
       class={cn('group/switch flex items-center gap-2.5', local.class)}

package/src/components/ui/tabs/tabs.tsx

@@ -62,6 +62,7 @@ export function Tabs(props: ComponentProps<typeof KobalteTabs>) {
   return (
     <TabsIdContext.Provider value={tabs}>
       <KobalteTabs
+        data-slot="tabs"
         id={id()}
         class={cn(
           'flex min-h-0 min-w-0 flex-col gap-2 data-[orientation=vertical]:flex-row',
@@ -75,6 +76,18 @@ export function Tabs(props: ComponentProps<typeof KobalteTabs>) {
 
 export type TabsListProps = ComponentProps<typeof KobalteTabs.List> & {
   appearance?: 'underline' | 'segmented'
+  /**
+   * Span the container, with the triggers at the start. For a row of tabs that
+   * heads a pane: the underline's rule then runs the pane's full width, the
+   * way the pane's other header rules do, instead of stopping at the last tab.
+   */
+  fill?: boolean
+  /**
+   * Scroll sideways when the triggers outgrow the row, with no visible
+   * scrollbar, instead of overflowing it. Implies `fill`. The underline's rule
+   * is drawn inside the scroller so the selected mark still sits on it.
+   */
+  scrollable?: boolean
 }
 
 /**
@@ -82,17 +95,31 @@ export type TabsListProps = ComponentProps<typeof KobalteTabs.List> & {
  * on. A vertical list has no baseline — its triggers stack — so the rule is
  * dropped there; otherwise it draws as a stray line under the last trigger,
  * spanning only the list's width (the SettingsLayout rail showed exactly that).
+ *
+ * A scrolling list cannot draw that rule as its border: a scroller clips at its
+ * padding edge, and the selected trigger's mark overlaps the border by a pixel
+ * (`-mb-px`), so the mark would be cut off and the list would scroll vertically
+ * by that pixel. It reserves the pixel as padding instead and paints the rule
+ * there with an inset shadow, which lands exactly where the border was.
  */
 export function TabsList(props: TabsListProps) {
-  const [local, rest] = splitProps(props, ['class', 'appearance'])
+  const [local, rest] = splitProps(props, ['class', 'appearance', 'fill', 'scrollable'])
+  const underline = () => local.appearance !== 'segmented'
 
   return (
     <KobalteTabs.List
+      data-slot="tabs-list"
       class={cn(
-        'inline-flex w-fit shrink-0 items-center justify-center',
-        local.appearance === 'segmented'
+        'shrink-0 items-center',
+        local.fill || local.scrollable
+          ? 'flex w-full justify-start'
+          : 'inline-flex w-fit justify-center',
+        local.scrollable && 'no-scrollbar overflow-x-auto overflow-y-hidden',
+        !underline()
           ? 'gap-0.5 rounded-lg bg-surface-hover p-0.5'
-          : 'gap-1 rounded-none border-b border-border data-[orientation=vertical]:border-b-0',
+          : local.scrollable
+            ? 'gap-1 rounded-none pb-px shadow-[inset_0_-1px_0_var(--border)] data-[orientation=vertical]:pb-0 data-[orientation=vertical]:shadow-none'
+            : 'gap-1 rounded-none border-b border-border data-[orientation=vertical]:border-b-0',
         'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',
         local.class
       )}
@@ -133,6 +160,7 @@ export function TabsTrigger(props: TabsTriggerProps) {
 
   return (
     <KobalteTabs.Trigger
+      data-slot="tabs-trigger"
       id={triggerId()}
       class={cn(
         'inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium',
@@ -158,6 +186,7 @@ export function TabsContent(props: ComponentProps<typeof KobalteTabs.Content>) {
   const tabs = useTabsId()
   return (
     <KobalteTabs.Content
+      data-slot="tabs-content"
       aria-labelledby={
         local['aria-labelledby'] ??
         tabs.triggerIds().get(rest.value) ??

package/src/components/ui/toggle/toggle.tsx

@@ -58,6 +58,7 @@ export function Toggle(props: ToggleProps) {
 
   return (
     <ToggleButton
+      data-slot="toggle"
       class={cn(toggleVariants({ variant: local.variant, size: local.size }), local.class)}
       {...rest}
     />

package/src/components/ui/toggle-group/toggle-group.tsx

@@ -38,6 +38,7 @@ export function ToggleGroup(props: ToggleGroupProps) {
 
   return (
     <KobalteToggleGroup
+      data-slot="toggle-group"
       multiple={local.multiple ?? false}
       class={cn(
         'flex w-fit flex-row items-center',
@@ -68,6 +69,7 @@ export function ToggleGroupItem(props: ToggleGroupItemProps) {
 
   return (
     <KobalteToggleGroup.Item
+      data-slot="toggle-group-item"
       class={cn(toggleVariants({ variant: local.variant, size: local.size }), local.class)}
       onKeyDown={(event) => {
         invokeEventHandler(local.onKeyDown, event)

package/src/components/ui/typography/typography.tsx

@@ -130,6 +130,13 @@ export function Heading<T extends ValidComponent = 'h2'>(props: HeadingProps<T>)
  * foreground without the caller restating it.
  *
  * Defaults: `body` renders a `p`, `code` a `code`, every other variant a `span`.
+ *
+ * `overline` is the small uppercase label above a group — a list group's
+ * heading, a settings navigation group, an eyebrow over a page title. It is the
+ * one variant whose tone defaults to `muted` rather than inheriting, because an
+ * overline in the body foreground competes with the heading it introduces. Pass
+ * `tone` to override. It labels a group; it is not a heading, so it renders a
+ * `span` and stays out of the document outline.
  */
 export const textVariants = /* @__PURE__ */ cva('', {
   variants: {
@@ -144,6 +151,8 @@ export const textVariants = /* @__PURE__ */ cva('', {
       caption: 'text-xs',
       /** 11px / 500. The floor: keyboard keys, the status bar. */
       micro: 'text-2xs font-medium',
+      /** 11px / 500, uppercase and tracked. A group label or eyebrow; muted by default. */
+      overline: 'text-2xs font-medium tracking-wide uppercase',
       /** 12px mono. Ids, paths, hashes, inline code. */
       code: 'font-code text-code',
     },
@@ -168,9 +177,15 @@ export const textElement = {
   strong: 'span',
   caption: 'span',
   micro: 'span',
+  overline: 'span',
   code: 'code',
 } as const
 
+/** The tone a variant takes when the caller names none: muted for `overline`, else inherit. */
+export function textDefaultTone(variant: TextVariant | null | undefined) {
+  return variant === 'overline' ? 'muted' : undefined
+}
+
 type TextVariantProps = VariantProps<typeof textVariants>
 type TextVariant = keyof typeof textElement
 
@@ -195,7 +210,11 @@ export function Text<T extends ValidComponent = 'p'>(props: TextProps<T>) {
       as={local.as ?? textElement[(local.variant ?? 'body') as TextVariant]}
       data-slot="text"
       class={cn(
-        textVariants({ variant: local.variant, tone: local.tone, numeric: local.numeric }),
+        textVariants({
+          variant: local.variant,
+          tone: local.tone ?? textDefaultTone(local.variant),
+          numeric: local.numeric,
+        }),
         local.class
       )}
       {...(rest as ComponentProps<'p'>)}

package/src/lib/cn-tables.generated.ts

@@ -91,7 +91,7 @@ const nodeVlist = (() => {
     for (let i = 0; i < A.length; i++) out[A[i]!] = V[i]!
     return out
 })()
-const SETS = "container |break-after- all auto avoid avoid-page column left page right|break-before- all auto avoid avoid-page column left page right|break-inside-a uto void void-column void-page|box-decoration- clone slice|box- border content| contents flow-root hidden table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group| not-sr-only sr-only|float- end left none right start|clear- both end left none right start|isolat e ion-auto|overflow- auto clip hidden scroll visible|overflow-x- auto clip hidden scroll visible|overflow-y- auto clip hidden scroll visible|overscroll- auto contain none|overscroll-x- auto contain none|overscroll-y- auto contain none| absolute fixed relative static sticky| collapse invisible visible|justify- around baseline between center center-safe end end-safe evenly normal start stretch|justify-items- center center-safe end end-safe normal start stretch|justify-self- auto center center-safe end end-safe start stretch|items- baseline baseline-last center center-safe end end-safe start stretch|self- auto baseline baseline-last center center-safe end end-safe start stretch|place-content- around baseline between center center-safe end end-safe evenly start stretch|place-items- baseline center center-safe end end-safe start stretch|place-self- auto center center-safe end end-safe start stretch| antialiased subpixel-antialiased| italic not-italic|normal-nums |ordinal |slashed-zero | lining-nums oldstyle-nums| proportional-nums tabular-nums| diagonal-fractions stacked-fractions| no-underline overline| capitalize lowercase normal-case uppercase|truncate |whitespace- break-spaces normal nowrap pre pre-line pre-wrap|break- all keep normal words|wrap- anywhere break-word normal|hyphens- auto manual none|mix-blend- color color-burn color-dodge darken difference exclusion hard-light hue lighten luminosity multiply normal overlay plus-darker plus-lighter saturation screen soft-light|table- auto fixed|caption- bottom top|backface- hidden visible|appearance- auto none|scheme- dark light light-dark normal only-dark only-light|field-sizing- content fixed|pointer-events- auto none|resize  -none -x -y|snap- align-none center end start|snap- always normal|snap- both none x y|snap- mandatory proximity|touch- auto manipulation none|touch-pan- left right x|touch-pan- down up y|touch-pinch-zoom |select- all auto none text|forced-color-adjust- auto none| normal size| baseline bottom middle sub super text-bottom text-top top| bounce none ping pulse spin| auto square video| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs fr max min px|none | auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs full px| fixed local scroll|clip- border content padding text|origin- border content padding| bottom bottom-left bottom-right center left left-bottom left-top right right-bottom right-top top top-left top-right| no-repeat repeat repeat-round repeat-space repeat-x repeat-y| auto contain cover| gradient-to-b gradient-to-bl gradient-to-br gradient-to-l gradient-to-r gradient-to-t gradient-to-tl gradient-to-tr none|blend- color color-burn color-dodge darken difference exclusion hard-light hue lighten luminosity multiply normal overlay saturation screen soft-light|to- b bl br l r t tl tr| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh fit full lh lvh max min px screen svh| dashed dotted double hidden none solid| collapse separate| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs px|auto |full | content none strict| inline-size size|layout |paint |style | around baseline between center center-safe end end-safe evenly normal start stretch| alias all-scroll auto cell col-resize context-menu copy crosshair default e-resize ew-resize grab grabbing help move n-resize ne-resize nesw-resize no-drop none not-allowed ns-resize nw-resize nwse-resize pointer progress row-resize s-resize se-resize sw-resize text vertical-text w-resize wait zoom-in zoom-out| dashed dotted double solid wavy| auto from-font|reverse |initial | in in-out initial linear out| col col-reverse row row-reverse| nowrap wrap wrap-reverse| auto initial none| black bold extrabold extralight light medium normal semibold thin| condensed expanded extra-condensed extra-expanded normal semi-condensed semi-expanded ultra-condensed ultra-expanded|flow- col col-dense dense row row-dense| none subgrid| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lh lvh lvw max min px rail-item row-lg row-md row-sm screen statusbar svh svw topbar| block flex grid table| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvw fit full lvw max min px screen svw| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs loose none normal px relaxed snug tight|through |item | inside outside| decimal disc none| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs px| clip-border clip-content clip-fill clip-padding clip-stroke clip-view no-clip| add exclude intersect subtract| alpha luminance match|origin- border content fill padding stroke view|type- alpha luminance| circle ellipse| closest-corner closest-side farthest-corner farthest-side|at- bottom bottom-left bottom-right center left left-bottom left-top right right-bottom right-top top top-left top-right| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh fit full lh lvh max min none px screen svh| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lh lvh lvw max min none px rail-item row-lg row-md row-sm screen statusbar svh svw topbar| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvw fit full lvw max min none px screen svw| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min none prose px rail rail-expanded sidebar sidebar-compact svh svw| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min none px rail rail-expanded screen sidebar sidebar-compact svh svw| contain cover fill none scale-down| first last none| distant dramatic midrange near none normal|inset | full none|3d | auto smooth|gutter- auto both stable| auto none thin| inner none| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min px rail-item svh svw|base | center end justify left right start| clip ellipsis| balance nowrap pretty wrap| normal tight tighter wide wider widest| cpu gpu none| 3d flat| all colors none opacity shadow transform| discrete normal| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs full px| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min px rail rail-expanded screen sidebar sidebar-compact svh svw| auto contents scroll transform".split('|').map((s) => {
+const SETS = "container |break-after- all auto avoid avoid-page column left page right|break-before- all auto avoid avoid-page column left page right|break-inside-a uto void void-column void-page|box-decoration- clone slice|box- border content| contents flow-root hidden table table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group| not-sr-only sr-only|float- end left none right start|clear- both end left none right start|isolat e ion-auto|overflow- auto clip hidden scroll visible|overflow-x- auto clip hidden scroll visible|overflow-y- auto clip hidden scroll visible|overscroll- auto contain none|overscroll-x- auto contain none|overscroll-y- auto contain none| absolute fixed relative static sticky| collapse invisible visible|justify- around baseline between center center-safe end end-safe evenly normal start stretch|justify-items- center center-safe end end-safe normal start stretch|justify-self- auto center center-safe end end-safe start stretch|items- baseline baseline-last center center-safe end end-safe start stretch|self- auto baseline baseline-last center center-safe end end-safe start stretch|place-content- around baseline between center center-safe end end-safe evenly start stretch|place-items- baseline center center-safe end end-safe start stretch|place-self- auto center center-safe end end-safe start stretch| antialiased subpixel-antialiased| italic not-italic|normal-nums |ordinal |slashed-zero | lining-nums oldstyle-nums| proportional-nums tabular-nums| diagonal-fractions stacked-fractions| no-underline overline| capitalize lowercase normal-case uppercase|truncate |whitespace- break-spaces normal nowrap pre pre-line pre-wrap|break- all keep normal words|wrap- anywhere break-word normal|hyphens- auto manual none|mix-blend- color color-burn color-dodge darken difference exclusion hard-light hue lighten luminosity multiply normal overlay plus-darker plus-lighter saturation screen soft-light|table- auto fixed|caption- bottom top|backface- hidden visible|appearance- auto none|scheme- dark light light-dark normal only-dark only-light|field-sizing- content fixed|pointer-events- auto none|resize  -none -x -y|snap- align-none center end start|snap- always normal|snap- both none x y|snap- mandatory proximity|touch- auto manipulation none|touch-pan- left right x|touch-pan- down up y|touch-pinch-zoom |select- all auto none text|forced-color-adjust- auto none| normal size| baseline bottom middle sub super text-bottom text-top top| bounce none ping pulse spin| auto square video| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs fr max min px|none | auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs full px| fixed local scroll|clip- border content padding text|origin- border content padding| bottom bottom-left bottom-right center left left-bottom left-top right right-bottom right-top top top-left top-right| no-repeat repeat repeat-round repeat-space repeat-x repeat-y| auto contain cover| gradient-to-b gradient-to-bl gradient-to-br gradient-to-l gradient-to-r gradient-to-t gradient-to-tl gradient-to-tr none|blend- color color-burn color-dodge darken difference exclusion hard-light hue lighten luminosity multiply normal overlay saturation screen soft-light|to- b bl br l r t tl tr| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh fit full lh lvh max min px screen svh| dashed dotted double hidden none solid| collapse separate| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs px|auto |full | content none strict| inline-size size|layout |paint |style | around baseline between center center-safe end end-safe evenly normal start stretch| alias all-scroll auto cell col-resize context-menu copy crosshair default e-resize ew-resize grab grabbing help move n-resize ne-resize nesw-resize no-drop none not-allowed ns-resize nw-resize nwse-resize pointer progress row-resize s-resize se-resize sw-resize text vertical-text w-resize wait zoom-in zoom-out| dashed dotted double solid wavy| auto from-font|reverse |initial | in in-out initial linear out| col col-reverse row row-reverse| nowrap wrap wrap-reverse| auto initial none| black bold extrabold extralight light medium normal semibold thin| condensed expanded extra-condensed extra-expanded normal semi-condensed semi-expanded ultra-condensed ultra-expanded|flow- col col-dense dense row row-dense| none subgrid| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lh lvh lvw max min px rail-item row-lg row-md row-sm screen statusbar svh svw topbar| block flex grid table| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvw fit full lvw max min px screen svw| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs loose none normal px relaxed snug tight|through |item | inside outside| decimal disc none| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs px| clip-border clip-content clip-fill clip-padding clip-stroke clip-view no-clip| add exclude intersect subtract| alpha luminance match|origin- border content fill padding stroke view|type- alpha luminance| circle ellipse| closest-corner closest-side farthest-corner farthest-side|at- bottom bottom-left bottom-right center left left-bottom left-top right right-bottom right-top top top-left top-right| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh fit full lh lvh max min none px screen svh| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lh lvh lvw max min none px rail-item row-lg row-md row-sm screen statusbar svh svw topbar| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvw fit full lvw max min none px screen svw| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min none panel prose px rail rail-expanded sidebar sidebar-compact svh svw| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min none panel px rail rail-expanded screen sidebar sidebar-compact svh svw| contain cover fill none scale-down| first last none| distant dramatic midrange near none normal|inset | full none|3d | auto smooth|gutter- auto both stable| auto none thin| inner none| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min px rail-item svh svw|base | center end justify left right start| clip ellipsis| balance nowrap pretty wrap| normal tight tighter wide wider widest| cpu gpu none| 3d flat| all colors none opacity shadow transform| discrete normal| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs full px| auto control-2xl control-2xs control-lg control-md control-sm control-xl control-xs dvh dvw fit full lvh lvw max min panel px rail rail-expanded screen sidebar sidebar-compact svh svw| auto contents scroll transform".split('|').map((s) => {
     const tails = s.split(' ')
     const prefix = tails.shift()!
     for (let i = 0; i < tails.length; i++) {
@@ -102,11 +102,11 @@ const SETS = "container |break-after- all auto avoid avoid-page column left page
 const AA = DZ("0000000000000000000000000000000000000000000000000000000000000262242:6@200000006:240B428:4422400002046044222426220026642642462026224222824220022400000000\\00N222422242222222224062242222222422226264222422222222222222442804222422222222222222222222220<4<0204260002444020204224422")
 const AG = DZ("ɠ222222222222222222222222222222222222222222222222222222222222˕4222226>ʶ22ʷʺʷ2ʸʷ42ʴ2ʓ22>621422ɶ222ɹɼɷɺɷɺ22ɱ42222ɨ2ɧ26622ɘɓ244ƸƵ222]d24242ǖǓƚÄȫ2263ȨȥȨ2222222ǣ222222222222222222ǂƽ2ƾƵ2222222422222ƜƑ22222222222222222222144Ŧţ22Ţş222222222222222222222ĸ2ı68ĦģĦɡŰ4Ġ«®ĝ822ĔđĔ2ē2222622")
 const AS = DZ("02222222222222222222222222222222222222222222222222222222222222222202022222222222EH2200IL021042222Y\\222IL0cf2e10j2222U00X202[^2y0000120|{~‚22…ˆ‡:22|22222222222G000q†OVI00000}š2›>40000ŒB00000I¨©000¬00000000000000021M®­00°“000000000000000000000–222›HGHa1º222¿2À2222ÉÌ000­°2±")
-const litAnchor = new Int32Array(1635)
-const litGroup = new Int32Array(1635)
-const litPool = new Int32Array(1635)
+const litAnchor = new Int32Array(1638)
+const litGroup = new Int32Array(1638)
+const litPool = new Int32Array(1638)
 let poolText = ''
-const poolOffsets = new Int32Array(1072)
+const poolOffsets = new Int32Array(1074)
 {
     const tailRef = new Map()
     let nextRef = 0

package/src/lib/tokens.ts

@@ -379,11 +379,11 @@ export const radiusTokens: TokenDefinition[] = [
     description:
       '10px — cards and panels. Also the knob: move this one value to re-round the whole system.',
   },
-  { name: 'radius-sm', kind: 'dimension', description: '6px — badges, keyboard keys, menu items.' },
+  { name: 'radius-sm', kind: 'dimension', description: '6px — keyboard keys, menu items.' },
   {
     name: 'radius-md',
     kind: 'dimension',
-    description: '8px — every control: buttons, inputs, selects.',
+    description: '8px — every control: buttons, inputs, selects; and badges.',
   },
   { name: 'radius-xl', kind: 'dimension', description: '14px — dialogs, menus, sheets.' },
   { name: 'radius-2xl', kind: 'dimension', description: '18px — full-window surfaces and media.' },
@@ -597,6 +597,11 @@ export const densityTokens: TokenDefinition[] = [
     kind: 'dimension',
     description: '48px — the collapsed secondary column.',
   },
+  {
+    name: 'panel-width',
+    kind: 'dimension',
+    description: '390px — a side pane beside the work, and the same pane as a sheet.',
+  },
   { name: 'topbar-height', kind: 'dimension', description: '48px — the window title row.' },
   { name: 'statusbar-height', kind: 'dimension', description: '28px — the bottom readout strip.' },
   {