@adea-ai/ui 0.131.0 → 0.133.0

package/dist/components/ui/radio-group/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","names":["RadioGroup","KobalteRadioGroup","Circle","ComponentProps","JSX","splitProps","useFormFieldControl","cn","props","local","rest","field","id","_$createComponent","_$mergeProps","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","class","RadioGroupItemProps","Item","controlClass","label","description","variant","media","Element","RadioGroupItem","card","data-variant","undefined","title","children","ItemInput","aria-busy","ItemControl","ItemIndicator","_$memo","_el$","_tmpl$","_$insert","_el$2","_tmpl$2","_c$","ItemLabel","_c$2","ItemDescription","RadioGroup","_$createComponent","KobalteRadioGroup","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/radio-group/radio-group.tsx"],"sourcesContent":["import { RadioGroup as KobalteRadioGroup } from '@kobalte/core/radio-group'\nimport { Circle } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\n/**\n * RadioGroup.\n *\n * A single choice from a small, visible set. The group owns the value and the\n * arrow-key navigation, so a caller sets `value` once instead of wiring a\n * `name` and a handler onto every item.\n *\n * Below about five options a Select hides the choices behind a click, which is\n * the wrong trade; above about seven, radios become a wall and the Select wins.\n * That call belongs to the caller, and both controls are drawn from the same\n * tokens so either choice sits correctly next to the other.\n */\nexport function RadioGroup(props: ComponentProps<typeof KobalteRadioGroup>) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'id',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n  ])\n  const field = useFormFieldControl('group', {\n    id: local.id,\n    'aria-label': local['aria-label'],\n    'aria-labelledby': local['aria-labelledby'],\n    'aria-describedby': local['aria-describedby'],\n    'aria-invalid': local['aria-invalid'],\n    'aria-errormessage': local['aria-errormessage'],\n  })\n  return (\n    <KobalteRadioGroup\n      data-slot=\"radio-group\"\n      id={field?.id ?? local.id}\n      aria-label={local['aria-label']}\n      aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n      aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n      aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n      aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n      class={cn('grid gap-2', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item> & {\n  controlClass?: string\n  /**\n   * The option's visible label. A radio with no accessible name is unreachable\n   * by a screen reader and by voice control, so supply this, a labelled child,\n   * `aria-label`, or `aria-labelledby`.\n   */\n  label?: string\n  description?: string\n  /**\n   * `card` draws the option as a bordered, selectable card — for a choice\n   * whose options need a sentence each (a source type, a sync budget), where a\n   * bare radio row reads as a form field rather than a decision. The whole card\n   * is the hit target, and the selected card takes the primary edge.\n   */\n  variant?: 'default' | 'card'\n  /** A leading icon or `EntityIcon` between the radio and the text, for `card`. */\n  media?: JSX.Element\n}\n\n/**\n * A card option's label stretches an invisible layer over the whole card, so a\n * click anywhere on it — padding, media, description — selects the option\n * through the label's native association with the radio input. Wrapping the\n * card in a `<label>` would nest the item's own label inside another.\n */\nexport function RadioGroupItem(props: RadioGroupItemProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'controlClass',\n    'label',\n    'description',\n    'variant',\n    'media',\n    'children',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-busy',\n    'title',\n  ])\n  const card = () => local.variant === 'card'\n\n  return (\n    <KobalteRadioGroup.Item\n      data-slot=\"radio-group-item\"\n      data-variant={card() ? 'card' : undefined}\n      title={local.title}\n      class={cn(\n        'group/radio flex items-start gap-2.5',\n        {\n          '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':\n            card(),\n          'has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-primary-subtle':\n            card(),\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      <KobalteRadioGroup.ItemInput\n        aria-label={local['aria-label']}\n        aria-labelledby={local['aria-labelledby']}\n        aria-describedby={local['aria-describedby']}\n        aria-invalid={local['aria-invalid']}\n        aria-busy={local['aria-busy']}\n        title={local.title}\n      />\n      <KobalteRadioGroup.ItemControl\n        class={cn(\n          'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-full border',\n          'transition-[color,box-shadow,border-color,background-color] ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'data-[checked]:border-primary data-[checked]:text-primary',\n          'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n          local.controlClass\n        )}\n      >\n        <KobalteRadioGroup.ItemIndicator class=\"flex items-center justify-center\">\n          <Circle class=\"size-2 fill-current\" />\n        </KobalteRadioGroup.ItemIndicator>\n      </KobalteRadioGroup.ItemControl>\n      {local.media ? (\n        <span data-slot=\"radio-group-item-media\" class=\"flex shrink-0 items-center\">\n          {local.media}\n        </span>\n      ) : null}\n      {local.children ?? (\n        <div class=\"grid gap-0.5 leading-none\">\n          {local.label ? (\n            <KobalteRadioGroup.ItemLabel\n              class={cn('text-sm font-medium', card() && 'after:absolute after:inset-0')}\n            >\n              {local.label}\n            </KobalteRadioGroup.ItemLabel>\n          ) : null}\n          {local.description ? (\n            <KobalteRadioGroup.ItemDescription class=\"text-muted-foreground text-sm\">\n              {local.description}\n            </KobalteRadioGroup.ItemDescription>\n          ) : null}\n        </div>\n      )}\n    </KobalteRadioGroup.Item>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"radio-group.js","names":["RadioGroup","KobalteRadioGroup","Circle","ComponentProps","JSX","splitProps","useFormFieldControl","cn","props","local","rest","field","id","_$createComponent","_$mergeProps","aria-label","aria-labelledby","aria-describedby","aria-invalid","aria-errormessage","class","RadioGroupItemProps","Item","controlClass","label","description","variant","media","Element","RadioGroupItem","card","data-variant","undefined","title","children","ItemInput","aria-busy","ItemControl","ItemIndicator","_$memo","_el$","_tmpl$","_$insert","_el$2","_tmpl$2","_c$","ItemLabel","_c$2","ItemDescription","RadioGroup","_$createComponent","KobalteRadioGroup","_$mergeProps","_$memo"],"sources":["../../../../src/components/ui/radio-group/radio-group.tsx"],"sourcesContent":["import { RadioGroup as KobalteRadioGroup } from '@kobalte/core/radio-group'\nimport { Circle } from 'lucide-solid'\nimport type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { useFormFieldControl } from '#lib/form-field'\nimport { cn } from '#lib/utils'\n\n/**\n * RadioGroup.\n *\n * A single choice from a small, visible set. The group owns the value and the\n * arrow-key navigation, so a caller sets `value` once instead of wiring a\n * `name` and a handler onto every item.\n *\n * Below about five options a Select hides the choices behind a click, which is\n * the wrong trade; above about seven, radios become a wall and the Select wins.\n * That call belongs to the caller, and both controls are drawn from the same\n * tokens so either choice sits correctly next to the other.\n */\nexport function RadioGroup(props: ComponentProps<typeof KobalteRadioGroup>) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'id',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-errormessage',\n  ])\n  const field = useFormFieldControl('group', {\n    id: local.id,\n    'aria-label': local['aria-label'],\n    'aria-labelledby': local['aria-labelledby'],\n    'aria-describedby': local['aria-describedby'],\n    'aria-invalid': local['aria-invalid'],\n    'aria-errormessage': local['aria-errormessage'],\n  })\n  return (\n    <KobalteRadioGroup\n      data-slot=\"radio-group\"\n      id={field?.id ?? local.id}\n      aria-label={local['aria-label']}\n      aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}\n      aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}\n      aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}\n      aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}\n      class={cn('grid gap-2', local.class)}\n      {...rest}\n    />\n  )\n}\n\nexport type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item> & {\n  controlClass?: string\n  /**\n   * The option's visible label. A radio with no accessible name is unreachable\n   * by a screen reader and by voice control, so supply this, a labelled child,\n   * `aria-label`, or `aria-labelledby`.\n   */\n  label?: string\n  description?: string\n  /**\n   * `card` draws the option as a bordered, selectable card — for a choice\n   * whose options need a sentence each (a source type, a sync budget), where a\n   * bare radio row reads as a form field rather than a decision. The whole card\n   * is the hit target, and the selected card takes the primary edge. The radio,\n   * `media` and text centre on one axis; the default variant keeps the radio on\n   * the first line of its label.\n   */\n  variant?: 'default' | 'card'\n  /** A leading icon or `EntityIcon` between the radio and the text, for `card`. */\n  media?: JSX.Element\n}\n\n/**\n * A card option's label stretches an invisible layer over the whole card, so a\n * click anywhere on it — padding, media, description — selects the option\n * through the label's native association with the radio input. Wrapping the\n * card in a `<label>` would nest the item's own label inside another.\n */\nexport function RadioGroupItem(props: RadioGroupItemProps) {\n  const [local, rest] = splitProps(props, [\n    'class',\n    'controlClass',\n    'label',\n    'description',\n    'variant',\n    'media',\n    'children',\n    'aria-label',\n    'aria-labelledby',\n    'aria-describedby',\n    'aria-invalid',\n    'aria-busy',\n    'title',\n  ])\n  const card = () => local.variant === 'card'\n\n  return (\n    <KobalteRadioGroup.Item\n      data-slot=\"radio-group-item\"\n      data-variant={card() ? 'card' : undefined}\n      title={local.title}\n      class={cn(\n        'group/radio flex gap-2.5',\n        {\n          'items-start': !card(),\n          // A card centres its radio, media and text on one axis. Top alignment\n          // is right for a bare row, where the radio sits on the label's first\n          // line, but in a card the media is taller than that line, so a\n          // top-aligned radio floats above the icon and the label beside it.\n          'items-center': card(),\n          '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':\n            card(),\n          'has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-primary-subtle':\n            card(),\n        },\n        local.class\n      )}\n      {...rest}\n    >\n      <KobalteRadioGroup.ItemInput\n        aria-label={local['aria-label']}\n        aria-labelledby={local['aria-labelledby']}\n        aria-describedby={local['aria-describedby']}\n        aria-invalid={local['aria-invalid']}\n        aria-busy={local['aria-busy']}\n        title={local.title}\n      />\n      <KobalteRadioGroup.ItemControl\n        class={cn(\n          'border-input bg-transparent flex size-4 shrink-0 items-center justify-center rounded-full border',\n          'transition-[color,box-shadow,border-color,background-color] ease-out outline-none',\n          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n          'data-[checked]:border-primary data-[checked]:text-primary',\n          'data-[invalid]:border-destructive data-[invalid]:ring-3 data-[invalid]:ring-destructive-subtle',\n          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n          local.controlClass\n        )}\n      >\n        <KobalteRadioGroup.ItemIndicator class=\"flex items-center justify-center\">\n          <Circle class=\"size-2 fill-current\" />\n        </KobalteRadioGroup.ItemIndicator>\n      </KobalteRadioGroup.ItemControl>\n      {local.media ? (\n        <span data-slot=\"radio-group-item-media\" class=\"flex shrink-0 items-center\">\n          {local.media}\n        </span>\n      ) : null}\n      {local.children ?? (\n        <div class=\"grid gap-0.5 leading-none\">\n          {local.label ? (\n            <KobalteRadioGroup.ItemLabel\n              class={cn('text-sm font-medium', card() && 'after:absolute after:inset-0')}\n            >\n              {local.label}\n            </KobalteRadioGroup.ItemLabel>\n          ) : null}\n          {local.description ? (\n            <KobalteRadioGroup.ItemDescription class=\"text-muted-foreground text-sm\">\n              {local.description}\n            </KobalteRadioGroup.ItemDescription>\n          ) : null}\n        </div>\n      )}\n    </KobalteRadioGroup.Item>\n  )\n}\n"],"mappings":"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"}

package/dist/r/src/components/composites/list-row/list-row-control.tsx

@@ -18,6 +18,15 @@ export type ListRowControlProps<T extends ValidComponent = 'div'> = PolymorphicP
     trailing?: JSX.Element
     /** A second line that wraps and grows the row to fit its content. */
     description?: string
+    /**
+     * Keep the description on one line and end it with an ellipsis instead of
+     * wrapping, so a described row stays at its minimum height however long the
+     * text is. Use it where rows must be a predictable height (a virtualised
+     * queue); leave it off where the whole description should be readable. Pair
+     * it with a `tooltip` when the full text matters, and with
+     * `stackTrailing={false}` to keep a trailing slot beside the text.
+     */
+    truncateDescription?: boolean
     /**
      * Whether a described row may drop its trailing slot onto its own line when
      * the row gets narrow (the default). Pass `false` for a short, truncating
@@ -43,6 +52,7 @@ export function ListRowControl<T extends ValidComponent = 'div'>(props: ListRowC
     'leading',
     'trailing',
     'description',
+    'truncateDescription',
     'stackTrailing',
     'type',
     'tabIndex',
@@ -92,7 +102,8 @@ export function ListRowControl<T extends ValidComponent = 'div'>(props: ListRowC
             <span
               data-slot="list-row-description"
               class={cn(
-                'text-xs break-words',
+                'text-xs',
+                { truncate: local.truncateDescription, 'break-words': !local.truncateDescription },
                 local.selected ? 'text-foreground' : 'text-muted-foreground'
               )}
             >

package/dist/r/src/components/ui/accordion/accordion.tsx

@@ -37,7 +37,11 @@ export function AccordionTrigger(props: ComponentProps<typeof KobalteAccordion.T
     <KobalteAccordion.Header class="flex">
       <KobalteAccordion.Trigger
         class={cn(
-          'flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium',
+          // `group/accordion` is what the chevron's `group-data-[expanded]/accordion`
+          // reads. Kobalte puts `data-expanded` on this trigger, not on the item, so
+          // the trigger is the group; without the class the rotation selector has no
+          // ancestor to match and the chevron never turns.
+          'group/accordion flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium',
           'transition-colors ease-out outline-none',
           'hover:text-foreground',
           'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',

package/dist/r/src/components/ui/empty/empty-state.tsx

@@ -2,22 +2,45 @@ import { Search } from 'lucide-solid'
 import type { ComponentProps, JSX } from 'solid-js'
 import { Show, splitProps } from 'solid-js'
 import { ActionButton } from '../../composites/action-button'
+import { cn } from '../../../lib/utils'
 import { Spinner } from '../spinner'
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from './empty'
 
-export type EmptyStateProps = Omit<ComponentProps<'div'>, 'children' | 'role' | 'aria-live'> & {
-  title: string
-  detail: string
-  busy?: boolean
-  icon?: JSX.Element
-  announceAs?: 'alert' | 'status'
-  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
-  action?: () => void
-  actionLabel?: string
-  actionTooltip?: string
-}
+type EmptyStateSecondaryAction =
+  | {
+      secondaryAction?: undefined
+      secondaryActionLabel?: undefined
+      secondaryActionTooltip?: never
+    }
+  | {
+      /** A second, quieter way out beside `action`: "Open settings" next to "Retry". */
+      secondaryAction: () => void
+      /** Required: there is no sensible default name for an arbitrary second action. */
+      secondaryActionLabel: string
+      secondaryActionTooltip?: string
+    }
+
+export type EmptyStateProps = Omit<ComponentProps<'div'>, 'children' | 'role' | 'aria-live'> &
+  EmptyStateSecondaryAction & {
+    title: string
+    detail: string
+    busy?: boolean
+    icon?: JSX.Element
+    announceAs?: 'alert' | 'status'
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+    action?: () => void
+    actionLabel?: string
+    actionTooltip?: string
+  }
 
-/** A semantic empty, loading, or error state built from the shared empty parts. */
+/**
+ * A semantic empty, loading, or error state built from the shared empty parts.
+ *
+ * `action` is the primary way forward. `secondaryAction` adds one quieter
+ * alternative after it, in a `secondary` button, so the primary stays first in
+ * the tab order. Two actions side by side is the limit: a state that needs more
+ * should compose the `Empty*` parts directly.
+ */
 export function EmptyState(props: EmptyStateProps) {
   const [local, rest] = splitProps(props, [
     'title',
@@ -29,6 +52,9 @@ export function EmptyState(props: EmptyStateProps) {
     'action',
     'actionLabel',
     'actionTooltip',
+    'secondaryAction',
+    'secondaryActionLabel',
+    'secondaryActionTooltip',
     'class',
   ])
 
@@ -55,15 +81,27 @@ export function EmptyState(props: EmptyStateProps) {
         </EmptyTitle>
         <EmptyDescription>{local.detail}</EmptyDescription>
       </EmptyHeader>
-      <Show when={local.action}>
-        <EmptyContent>
-          <ActionButton
-            tooltip={local.actionTooltip ?? local.actionLabel ?? 'Try again'}
-            aria-label={local.actionLabel ?? 'Try again'}
-            onClick={local.action}
-          >
-            {local.actionLabel ?? 'Try again'}
-          </ActionButton>
+      <Show when={local.action || local.secondaryAction}>
+        <EmptyContent class={cn({ 'flex-row flex-wrap justify-center': !!local.secondaryAction })}>
+          <Show when={local.action}>
+            <ActionButton
+              tooltip={local.actionTooltip ?? local.actionLabel ?? 'Try again'}
+              aria-label={local.actionLabel ?? 'Try again'}
+              onClick={local.action}
+            >
+              {local.actionLabel ?? 'Try again'}
+            </ActionButton>
+          </Show>
+          <Show when={local.secondaryAction}>
+            <ActionButton
+              variant="secondary"
+              tooltip={local.secondaryActionTooltip ?? local.secondaryActionLabel}
+              aria-label={local.secondaryActionLabel}
+              onClick={local.secondaryAction}
+            >
+              {local.secondaryActionLabel}
+            </ActionButton>
+          </Show>
         </EmptyContent>
       </Show>
     </Empty>

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

@@ -195,8 +195,12 @@ export type FieldGroupProps = ComponentProps<'div'> & {
    * 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.
+   *
+   * `3` is the same grid with three columns from `sm`, for a row of short values
+   * (a trio of limits, a day count and two thresholds). Each column is a third of
+   * the group, so reach for `2` when a field holds a path, a URL or a sentence.
    */
-  columns?: 1 | 2
+  columns?: 1 | 2 | 3
 }
 
 /** A visual stack for related controls that does not imply fieldset semantics. */
@@ -206,7 +210,11 @@ export function FieldGroup(props: FieldGroupProps) {
     <div
       data-slot="field-group"
       class={cn(
-        local.columns === 2 ? 'grid gap-4 sm:grid-cols-2' : 'flex flex-col gap-4',
+        {
+          'grid gap-4 sm:grid-cols-2': local.columns === 2,
+          'grid gap-4 sm:grid-cols-3': local.columns === 3,
+          'flex flex-col gap-4': local.columns !== 2 && local.columns !== 3,
+        },
         local.class
       )}
       {...rest}

package/dist/r/src/components/ui/field/number-field.tsx

@@ -8,6 +8,20 @@ export type NumberFieldProps = {
   value: number
   min: number
   max: number
+  /**
+   * The increment of the spinner and the arrow keys, and the grid a typed value
+   * must sit on: `min` plus a whole number of steps. Use it for stepped or
+   * fractional values (`0.05` for a 0-1 score, `5` for a percentage in fives).
+   * Without it a field steps by 1, or by `any` when `integer` is `false`, which
+   * accepts every decimal but leaves the spinner moving in whole numbers.
+   */
+  step?: number
+  /**
+   * Whether only whole numbers are valid. It defaults to `true`, or, when a
+   * `step` is given, to whether both the step and its base `min` are whole
+   * numbers, so `step={0.05}` accepts decimals without also saying
+   * `integer={false}`, and `min={0.5} step={1}` accepts 0.5, 1.5, 2.5.
+   */
   integer?: boolean
   onChange: (value: number) => void
   class?: string
@@ -16,13 +30,20 @@ export type NumberFieldProps = {
 
 /**
  * A controlled numeric field that keeps an editable draft while validating
- * range and integer constraints. Invalid drafts are announced and restored
- * to the latest controlled value when focus leaves the input.
+ * range, integer and step constraints. Invalid drafts are announced and restored
+ * to the latest controlled value when focus leaves the input, so `onChange`
+ * only ever receives a value the field accepts — a caller never needs a
+ * `Number(value) || fallback` of its own.
  */
 export function NumberField(props: NumberFieldProps) {
   const [draft, setDraft] = createSignal(String(props.value))
   const [error, setError] = createSignal('')
-  const integer = () => props.integer ?? true
+  // Whole numbers only when nothing on the grid is fractional: a whole step from
+  // a fractional `min` (0.5, 1.5, 2.5) puts the spinner's own values off the
+  // integers, so inference needs the step and its base to both be whole.
+  const integer = () =>
+    props.integer ??
+    (props.step === undefined || (Number.isInteger(props.step) && Number.isInteger(props.min)))
 
   createEffect(() => {
     setDraft(String(props.value))
@@ -38,6 +59,16 @@ export function NumberField(props: NumberFieldProps) {
     if (next < props.min || next > props.max) {
       return `${props.label} must be between ${props.min} and ${props.max}.`
     }
+    if (props.step !== undefined && props.step > 0) {
+      // Compare in whole steps with a tolerance: 0.15 / 0.05 is 3.0000000000000004,
+      // and rejecting it would make the spinner's own values invalid.
+      const steps = (next - props.min) / props.step
+      if (Math.abs(steps - Math.round(steps)) > 1e-9) {
+        return props.min === 0
+          ? `${props.label} must be a multiple of ${props.step}.`
+          : `${props.label} must be ${props.min} plus a multiple of ${props.step}.`
+      }
+    }
     return ''
   }
 
@@ -48,7 +79,7 @@ export function NumberField(props: NumberFieldProps) {
         value={draft()}
         min={props.min}
         max={props.max}
-        step={integer() ? 1 : 'any'}
+        step={props.step ?? (integer() ? 1 : 'any')}
         required
         onInput={(event) => {
           const raw = event.currentTarget.value

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

@@ -63,7 +63,9 @@ export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item>
    * `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.
+   * is the hit target, and the selected card takes the primary edge. The radio,
+   * `media` and text centre on one axis; the default variant keeps the radio on
+   * the first line of its label.
    */
   variant?: 'default' | 'card'
   /** A leading icon or `EntityIcon` between the radio and the text, for `card`. */
@@ -100,8 +102,14 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
       data-variant={card() ? 'card' : undefined}
       title={local.title}
       class={cn(
-        'group/radio flex items-start gap-2.5',
+        'group/radio flex gap-2.5',
         {
+          'items-start': !card(),
+          // A card centres its radio, media and text on one axis. Top alignment
+          // is right for a bare row, where the radio sits on the label's first
+          // line, but in a card the media is taller than that line, so a
+          // top-aligned radio floats above the icon and the label beside it.
+          'items-center': card(),
           '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':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.131.0",
+  "version": "0.133.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/src/components/composites/list-row/list-row-control.tsx

@@ -18,6 +18,15 @@ export type ListRowControlProps<T extends ValidComponent = 'div'> = PolymorphicP
     trailing?: JSX.Element
     /** A second line that wraps and grows the row to fit its content. */
     description?: string
+    /**
+     * Keep the description on one line and end it with an ellipsis instead of
+     * wrapping, so a described row stays at its minimum height however long the
+     * text is. Use it where rows must be a predictable height (a virtualised
+     * queue); leave it off where the whole description should be readable. Pair
+     * it with a `tooltip` when the full text matters, and with
+     * `stackTrailing={false}` to keep a trailing slot beside the text.
+     */
+    truncateDescription?: boolean
     /**
      * Whether a described row may drop its trailing slot onto its own line when
      * the row gets narrow (the default). Pass `false` for a short, truncating
@@ -43,6 +52,7 @@ export function ListRowControl<T extends ValidComponent = 'div'>(props: ListRowC
     'leading',
     'trailing',
     'description',
+    'truncateDescription',
     'stackTrailing',
     'type',
     'tabIndex',
@@ -92,7 +102,8 @@ export function ListRowControl<T extends ValidComponent = 'div'>(props: ListRowC
             <span
               data-slot="list-row-description"
               class={cn(
-                'text-xs break-words',
+                'text-xs',
+                { truncate: local.truncateDescription, 'break-words': !local.truncateDescription },
                 local.selected ? 'text-foreground' : 'text-muted-foreground'
               )}
             >

package/src/components/ui/accordion/accordion.tsx

@@ -37,7 +37,11 @@ export function AccordionTrigger(props: ComponentProps<typeof KobalteAccordion.T
     <KobalteAccordion.Header class="flex">
       <KobalteAccordion.Trigger
         class={cn(
-          'flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium',
+          // `group/accordion` is what the chevron's `group-data-[expanded]/accordion`
+          // reads. Kobalte puts `data-expanded` on this trigger, not on the item, so
+          // the trigger is the group; without the class the rotation selector has no
+          // ancestor to match and the chevron never turns.
+          'group/accordion flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium',
           'transition-colors ease-out outline-none',
           'hover:text-foreground',
           'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',

package/src/components/ui/empty/empty-state.tsx

@@ -2,22 +2,45 @@ import { Search } from 'lucide-solid'
 import type { ComponentProps, JSX } from 'solid-js'
 import { Show, splitProps } from 'solid-js'
 import { ActionButton } from '../../composites/action-button'
+import { cn } from '#lib/utils'
 import { Spinner } from '../spinner'
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from './empty'
 
-export type EmptyStateProps = Omit<ComponentProps<'div'>, 'children' | 'role' | 'aria-live'> & {
-  title: string
-  detail: string
-  busy?: boolean
-  icon?: JSX.Element
-  announceAs?: 'alert' | 'status'
-  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
-  action?: () => void
-  actionLabel?: string
-  actionTooltip?: string
-}
+type EmptyStateSecondaryAction =
+  | {
+      secondaryAction?: undefined
+      secondaryActionLabel?: undefined
+      secondaryActionTooltip?: never
+    }
+  | {
+      /** A second, quieter way out beside `action`: "Open settings" next to "Retry". */
+      secondaryAction: () => void
+      /** Required: there is no sensible default name for an arbitrary second action. */
+      secondaryActionLabel: string
+      secondaryActionTooltip?: string
+    }
+
+export type EmptyStateProps = Omit<ComponentProps<'div'>, 'children' | 'role' | 'aria-live'> &
+  EmptyStateSecondaryAction & {
+    title: string
+    detail: string
+    busy?: boolean
+    icon?: JSX.Element
+    announceAs?: 'alert' | 'status'
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+    action?: () => void
+    actionLabel?: string
+    actionTooltip?: string
+  }
 
-/** A semantic empty, loading, or error state built from the shared empty parts. */
+/**
+ * A semantic empty, loading, or error state built from the shared empty parts.
+ *
+ * `action` is the primary way forward. `secondaryAction` adds one quieter
+ * alternative after it, in a `secondary` button, so the primary stays first in
+ * the tab order. Two actions side by side is the limit: a state that needs more
+ * should compose the `Empty*` parts directly.
+ */
 export function EmptyState(props: EmptyStateProps) {
   const [local, rest] = splitProps(props, [
     'title',
@@ -29,6 +52,9 @@ export function EmptyState(props: EmptyStateProps) {
     'action',
     'actionLabel',
     'actionTooltip',
+    'secondaryAction',
+    'secondaryActionLabel',
+    'secondaryActionTooltip',
     'class',
   ])
 
@@ -55,15 +81,27 @@ export function EmptyState(props: EmptyStateProps) {
         </EmptyTitle>
         <EmptyDescription>{local.detail}</EmptyDescription>
       </EmptyHeader>
-      <Show when={local.action}>
-        <EmptyContent>
-          <ActionButton
-            tooltip={local.actionTooltip ?? local.actionLabel ?? 'Try again'}
-            aria-label={local.actionLabel ?? 'Try again'}
-            onClick={local.action}
-          >
-            {local.actionLabel ?? 'Try again'}
-          </ActionButton>
+      <Show when={local.action || local.secondaryAction}>
+        <EmptyContent class={cn({ 'flex-row flex-wrap justify-center': !!local.secondaryAction })}>
+          <Show when={local.action}>
+            <ActionButton
+              tooltip={local.actionTooltip ?? local.actionLabel ?? 'Try again'}
+              aria-label={local.actionLabel ?? 'Try again'}
+              onClick={local.action}
+            >
+              {local.actionLabel ?? 'Try again'}
+            </ActionButton>
+          </Show>
+          <Show when={local.secondaryAction}>
+            <ActionButton
+              variant="secondary"
+              tooltip={local.secondaryActionTooltip ?? local.secondaryActionLabel}
+              aria-label={local.secondaryActionLabel}
+              onClick={local.secondaryAction}
+            >
+              {local.secondaryActionLabel}
+            </ActionButton>
+          </Show>
         </EmptyContent>
       </Show>
     </Empty>

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

@@ -195,8 +195,12 @@ export type FieldGroupProps = ComponentProps<'div'> & {
    * 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.
+   *
+   * `3` is the same grid with three columns from `sm`, for a row of short values
+   * (a trio of limits, a day count and two thresholds). Each column is a third of
+   * the group, so reach for `2` when a field holds a path, a URL or a sentence.
    */
-  columns?: 1 | 2
+  columns?: 1 | 2 | 3
 }
 
 /** A visual stack for related controls that does not imply fieldset semantics. */
@@ -206,7 +210,11 @@ export function FieldGroup(props: FieldGroupProps) {
     <div
       data-slot="field-group"
       class={cn(
-        local.columns === 2 ? 'grid gap-4 sm:grid-cols-2' : 'flex flex-col gap-4',
+        {
+          'grid gap-4 sm:grid-cols-2': local.columns === 2,
+          'grid gap-4 sm:grid-cols-3': local.columns === 3,
+          'flex flex-col gap-4': local.columns !== 2 && local.columns !== 3,
+        },
         local.class
       )}
       {...rest}

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

@@ -8,6 +8,20 @@ export type NumberFieldProps = {
   value: number
   min: number
   max: number
+  /**
+   * The increment of the spinner and the arrow keys, and the grid a typed value
+   * must sit on: `min` plus a whole number of steps. Use it for stepped or
+   * fractional values (`0.05` for a 0-1 score, `5` for a percentage in fives).
+   * Without it a field steps by 1, or by `any` when `integer` is `false`, which
+   * accepts every decimal but leaves the spinner moving in whole numbers.
+   */
+  step?: number
+  /**
+   * Whether only whole numbers are valid. It defaults to `true`, or, when a
+   * `step` is given, to whether both the step and its base `min` are whole
+   * numbers, so `step={0.05}` accepts decimals without also saying
+   * `integer={false}`, and `min={0.5} step={1}` accepts 0.5, 1.5, 2.5.
+   */
   integer?: boolean
   onChange: (value: number) => void
   class?: string
@@ -16,13 +30,20 @@ export type NumberFieldProps = {
 
 /**
  * A controlled numeric field that keeps an editable draft while validating
- * range and integer constraints. Invalid drafts are announced and restored
- * to the latest controlled value when focus leaves the input.
+ * range, integer and step constraints. Invalid drafts are announced and restored
+ * to the latest controlled value when focus leaves the input, so `onChange`
+ * only ever receives a value the field accepts — a caller never needs a
+ * `Number(value) || fallback` of its own.
  */
 export function NumberField(props: NumberFieldProps) {
   const [draft, setDraft] = createSignal(String(props.value))
   const [error, setError] = createSignal('')
-  const integer = () => props.integer ?? true
+  // Whole numbers only when nothing on the grid is fractional: a whole step from
+  // a fractional `min` (0.5, 1.5, 2.5) puts the spinner's own values off the
+  // integers, so inference needs the step and its base to both be whole.
+  const integer = () =>
+    props.integer ??
+    (props.step === undefined || (Number.isInteger(props.step) && Number.isInteger(props.min)))
 
   createEffect(() => {
     setDraft(String(props.value))
@@ -38,6 +59,16 @@ export function NumberField(props: NumberFieldProps) {
     if (next < props.min || next > props.max) {
       return `${props.label} must be between ${props.min} and ${props.max}.`
     }
+    if (props.step !== undefined && props.step > 0) {
+      // Compare in whole steps with a tolerance: 0.15 / 0.05 is 3.0000000000000004,
+      // and rejecting it would make the spinner's own values invalid.
+      const steps = (next - props.min) / props.step
+      if (Math.abs(steps - Math.round(steps)) > 1e-9) {
+        return props.min === 0
+          ? `${props.label} must be a multiple of ${props.step}.`
+          : `${props.label} must be ${props.min} plus a multiple of ${props.step}.`
+      }
+    }
     return ''
   }
 
@@ -48,7 +79,7 @@ export function NumberField(props: NumberFieldProps) {
         value={draft()}
         min={props.min}
         max={props.max}
-        step={integer() ? 1 : 'any'}
+        step={props.step ?? (integer() ? 1 : 'any')}
         required
         onInput={(event) => {
           const raw = event.currentTarget.value

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

@@ -63,7 +63,9 @@ export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item>
    * `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.
+   * is the hit target, and the selected card takes the primary edge. The radio,
+   * `media` and text centre on one axis; the default variant keeps the radio on
+   * the first line of its label.
    */
   variant?: 'default' | 'card'
   /** A leading icon or `EntityIcon` between the radio and the text, for `card`. */
@@ -100,8 +102,14 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
       data-variant={card() ? 'card' : undefined}
       title={local.title}
       class={cn(
-        'group/radio flex items-start gap-2.5',
+        'group/radio flex gap-2.5',
         {
+          'items-start': !card(),
+          // A card centres its radio, media and text on one axis. Top alignment
+          // is right for a bare row, where the radio sits on the label's first
+          // line, but in a card the media is taller than that line, so a
+          // top-aligned radio floats above the icon and the label beside it.
+          'items-center': card(),
           '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':