npm - @adea-ai/ui - Versions diffs - 0.99.1 → 0.99.3 - Mend

@adea-ai/ui 0.99.1 → 0.99.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (123) hide show

package/dist/r/src/components/ui/chart/chart.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { For, splitProps, type JSX } from 'solid-js'
+import { For, Show, createSignal, onCleanup, onMount, splitProps, type JSX } from 'solid-js'
 import { Dynamic } from 'solid-js/web'
 import { Bar, Bubble, Doughnut, Line, Pie, PolarArea, Radar, Scatter } from 'solid-chartjs'
 import {
@@ -17,6 +17,13 @@ import {
 } from 'chart.js'
 import type { ChartOptions, ChartType } from 'chart.js'
 import { cn } from '../../../lib/utils'
+import {
+  chartOptions,
+  chartSeriesColors,
+  mergeChartOptions,
+  resolveCssVariables,
+  type ChartScaleShape,
+} from './chart-options'
 /**
  * Chart.
@@ -46,11 +53,16 @@ import { cn } from '../../../lib/utils'
  *
  * ## Theming
  *
- * Colours resolve from `--chart-1` through `--chart-5`, which every theme
- * defines, plus `--chart-grid`, `--chart-axis` and `--chart-label`. That means a
- * chart follows the accent axis, the appearance, and the font axis with no
- * per-chart configuration — and a caller that wants a specific series colour
- * passes it explicitly rather than reaching into the theme.
+ * Colours come from `--chart-1` through `--chart-5`, which every theme
+ * defines, and the grid, ticks and labels from `--border` and
+ * `--muted-foreground`. That means a chart follows the accent axis and the
+ * appearance with no per-chart configuration — and a caller that wants a
+ * specific series colour passes it explicitly, as a colour or as `var(--token)`.
+ *
+ * A canvas cannot read a custom property, so the options and datasets carry
+ * `var(--token)` strings and each chart resolves them against its own element
+ * when it renders, and again whenever the root's attributes change — the
+ * `.dark` class, `data-accent`, an inline override. See `createThemeResolver`.
  */
 /**
@@ -78,68 +90,72 @@ ChartJs.register(
   Legend
 )
-/** The five series colours, in the order a multi-series chart should use them. */
-export const chartSeriesColors = [
-  'var(--chart-1)',
-  'var(--chart-2)',
-  'var(--chart-3)',
-  'var(--chart-4)',
-  'var(--chart-5)',
-] as const
+export { chartOptions, chartSeriesColors }
+/**
+ * One pixel to paint a colour on, shared by every chart.
+ *
+ * The canvas *paints* `oklch()`, but Chart.js also *parses* colours — to derive a
+ * hover shade and to animate between two colours — and its parser reads only
+ * rgb, hsl, hex and names. Painting the computed value and reading the pixel
+ * back gives the sRGB colour the canvas would have drawn anyway, in a form both
+ * understand, whatever syntax a theme uses (`oklch()`, `color-mix()`, …).
+ */
+let swatch: CanvasRenderingContext2D | null | undefined
+function toCanvasColor(value: string): string {
+  if (typeof CSS === 'undefined' || !CSS.supports('color', value)) return value
+  if (swatch === undefined) {
+    const canvas = document.createElement('canvas')
+    canvas.width = 1
+    canvas.height = 1
+    swatch = canvas.getContext('2d', { willReadFrequently: true })
+  }
+  if (!swatch) return value
+  swatch.globalCompositeOperation = 'copy'
+  swatch.fillStyle = value
+  swatch.fillRect(0, 0, 1, 1)
+  const [r, g, b, a] = swatch.getImageData(0, 0, 1, 1).data
+  return `rgba(${r}, ${g}, ${b}, ${Math.round(((a ?? 255) / 255) * 1000) / 1000})`
+}
 /**
- * The theme's defaults as Chart.js options.
+ * Resolves `var(--token)` strings against a chart's element, and re-resolves
+ * them when the theme changes.
  *
- * Exported so a caller can spread it and change one thing, rather than
- * restating every colour. Everything a chart draws that is not data — grid,
- * ticks, legend, tooltip — is decided here once, which is what makes two charts
- * in one application look like they came from the same place.
+ * The element rather than the root, so a chart inside a subtree with its own
+ * inline tokens takes those. The observer watches every attribute on `<html>`,
+ * because that is where both applications switch appearance, accent and theme
+ * (`.dark`, `data-accent`, `data-theme`, inline variables); a theme axis added
+ * later is covered without touching this. It is released with the chart.
  */
-export function chartOptions(overrides?: ChartOptions): ChartOptions {
+function createThemeResolver() {
+  let element: HTMLElement | undefined
+  const [revision, invalidate] = createSignal(undefined, { equals: false })
+  onMount(() => {
+    const observer = new MutationObserver(() => invalidate())
+    observer.observe(document.documentElement, { attributes: true })
+    onCleanup(() => observer.disconnect())
+  })
   return {
-    responsive: true,
-    maintainAspectRatio: false,
-    interaction: { mode: 'nearest', intersect: false },
-    plugins: {
-      legend: {
-        labels: {
-          color: 'var(--chart-label)',
-          boxWidth: 8,
-          boxHeight: 8,
-          usePointStyle: true,
-          pointStyle: 'circle',
-          font: { size: 11 },
-        },
-      },
-      tooltip: {
-        backgroundColor: 'var(--popover)',
-        titleColor: 'var(--popover-foreground)',
-        bodyColor: 'var(--popover-foreground)',
-        borderColor: 'var(--border)',
-        borderWidth: 1,
-        padding: 8,
-        cornerRadius: 6,
-        displayColors: true,
-        boxWidth: 8,
-        boxHeight: 8,
-        usePointStyle: true,
-        titleFont: { size: 11, weight: 600 },
-        bodyFont: { size: 11 },
-      },
+    ref: (el: HTMLElement) => {
+      element = el
     },
-    scales: {
-      x: {
-        border: { color: 'var(--chart-grid)' },
-        grid: { color: 'var(--chart-grid)', drawTicks: false },
-        ticks: { color: 'var(--chart-axis)', font: { size: 10 } },
-      },
-      y: {
-        border: { display: false },
-        grid: { color: 'var(--chart-grid)', drawTicks: false },
-        ticks: { color: 'var(--chart-axis)', font: { size: 10 } },
-      },
+    resolve<T>(value: T): T {
+      revision()
+      if (!element || typeof getComputedStyle === 'undefined') return value
+      const style = getComputedStyle(element)
+      const resolved = new Map<string, string | undefined>()
+      return resolveCssVariables(value, (name) => {
+        if (!resolved.has(name)) {
+          const raw = style.getPropertyValue(name).trim()
+          resolved.set(name, raw ? toCanvasColor(raw) : undefined)
+        }
+        return resolved.get(name)
+      })
     },
-    ...overrides,
   }
 }
@@ -163,7 +179,9 @@ export function ChartFrame(props: ChartFrameProps) {
       <figcaption class="flex items-start justify-between gap-3">
         <div>
           <h3 class="text-sm font-semibold text-foreground">{local.title}</h3>
-          {local.description}
+          <Show when={local.description}>
+            <p class="text-xs text-muted-foreground">{local.description}</p>
+          </Show>
         </div>
         {local.actions}
       </figcaption>
@@ -177,7 +195,7 @@ type SeriesChartProps = {
   labels: readonly string[]
   /** One entry per series. `data` is aligned to `labels`. */
   series: readonly { label: string; data: readonly number[]; color?: string }[]
-  /** Chart.js options, merged over the theme's defaults. */
+  /** Chart.js options, merged deeply over the theme's defaults. */
   options?: ChartOptions
   /** Stack the series. */
   stacked?: boolean
@@ -206,26 +224,31 @@ function datasetsFor(series: SeriesChartProps['series'], filled: boolean) {
   }))
 }
-function seriesOptions(props: SeriesChartProps, extra?: ChartOptions): ChartOptions {
-  return chartOptions({
-    ...extra,
-    ...(props.stacked
-      ? { scales: { ...extra?.scales, x: { stacked: true }, y: { stacked: true } } }
-      : {}),
-    ...props.options,
-  })
+function seriesOptions(
+  props: SeriesChartProps,
+  extra?: ChartOptions,
+  shape: ChartScaleShape = 'cartesian'
+): ChartOptions {
+  // Stacking is a cartesian idea; a radar has no x or y to stack, and naming
+  // them would make Chart.js draw them.
+  const stacked =
+    props.stacked && shape === 'cartesian'
+      ? { scales: { x: { stacked: true }, y: { stacked: true } } }
+      : undefined
+  return chartOptions(mergeChartOptions(extra, stacked, props.options), shape)
 }
 /** A line chart. The default for a series over time. */
 export function LineChart(props: SeriesChartProps & { area?: boolean }) {
+  const theme = createThemeResolver()
   return (
-    <div class={cn('h-64', props.class)}>
+    <div ref={theme.ref} class={cn('h-64', props.class)}>
       <Line
-        data={{
+        data={theme.resolve({
           labels: [...props.labels],
           datasets: datasetsFor(props.series, props.area ?? false),
-        }}
-        options={seriesOptions(props)}
+        })}
+        options={theme.resolve(seriesOptions(props))}
       />
     </div>
   )
@@ -233,18 +256,19 @@ export function LineChart(props: SeriesChartProps & { area?: boolean }) {
 /** A bar chart. `stacked` for parts of a whole over categories. */
 export function BarChart(props: SeriesChartProps & { horizontal?: boolean }) {
+  const theme = createThemeResolver()
   return (
-    <div class={cn('h-64', props.class)}>
+    <div ref={theme.ref} class={cn('h-64', props.class)}>
       <Bar
-        data={{
+        data={theme.resolve({
           labels: [...props.labels],
           datasets: datasetsFor(props.series, true).map((dataset) => ({
             ...dataset,
             borderWidth: 0,
             borderRadius: 3,
           })),
-        }}
-        options={seriesOptions(props, { indexAxis: props.horizontal ? 'y' : 'x' })}
+        })}
+        options={theme.resolve(seriesOptions(props, { indexAxis: props.horizontal ? 'y' : 'x' }))}
       />
     </div>
   )
@@ -256,10 +280,11 @@ export function ScatterChart(props: {
   options?: ChartOptions
   class?: string
 }) {
+  const theme = createThemeResolver()
   return (
-    <div class={cn('h-64', props.class)}>
+    <div ref={theme.ref} class={cn('h-64', props.class)}>
       <Scatter
-        data={{
+        data={theme.resolve({
           datasets: props.series.map((entry, index) => ({
             label: entry.label,
             data: entry.data.map((point) => ({ ...point })),
@@ -267,8 +292,8 @@ export function ScatterChart(props: {
             pointRadius: 3,
             pointHoverRadius: 5,
           })),
-        }}
-        options={chartOptions(props.options)}
+        })}
+        options={theme.resolve(chartOptions(props.options))}
       />
     </div>
   )
@@ -284,17 +309,18 @@ export function BubbleChart(props: {
   options?: ChartOptions
   class?: string
 }) {
+  const theme = createThemeResolver()
   return (
-    <div class={cn('h-64', props.class)}>
+    <div ref={theme.ref} class={cn('h-64', props.class)}>
       <Bubble
-        data={{
+        data={theme.resolve({
           datasets: props.series.map((entry, index) => ({
             label: entry.label,
             data: entry.data.map((point) => ({ ...point })),
             backgroundColor: entry.color ?? chartSeriesColors[index % chartSeriesColors.length],
           })),
-        }}
-        options={chartOptions(props.options)}
+        })}
+        options={theme.resolve(chartOptions(props.options))}
       />
     </div>
   )
@@ -302,27 +328,39 @@ export function BubbleChart(props: {
 /** A radar chart, for a profile across fixed axes. */
 export function RadarChart(props: SeriesChartProps) {
+  const theme = createThemeResolver()
   return (
-    <div class={cn('h-64', props.class)}>
+    <div ref={theme.ref} class={cn('h-64', props.class)}>
       <Radar
-        data={{ labels: [...props.labels], datasets: datasetsFor(props.series, true) }}
-        options={seriesOptions(props, { scales: { r: { grid: { color: 'var(--chart-grid)' } } } })}
+        data={theme.resolve({
+          labels: [...props.labels],
+          datasets: datasetsFor(props.series, true),
+        })}
+        options={theme.resolve(seriesOptions(props, undefined, 'radial'))}
       />
     </div>
   )
 }
-/** A polar area chart: radial bars, for a composition. */
+/**
+ * A polar area chart: radial bars, for a composition.
+ *
+ * Its scale is left to Chart.js's polar-area defaults (`'none'` rather than
+ * `'radial'`): `solid-chartjs` deletes `options.scales.r` for every chart type
+ * but radar when it first creates the chart, so radial styling here would apply
+ * only after the first theme change — a chart that restyles itself on a toggle.
+ */
 export function PolarAreaChart(props: {
   labels: readonly string[]
   data: readonly number[]
   options?: ChartOptions
   class?: string
 }) {
+  const theme = createThemeResolver()
   return (
-    <div class={cn('h-64', props.class)}>
+    <div ref={theme.ref} class={cn('h-64', props.class)}>
       <PolarArea
-        data={{
+        data={theme.resolve({
           labels: [...props.labels],
           datasets: [
             {
@@ -332,8 +370,8 @@ export function PolarAreaChart(props: {
               borderWidth: 2,
             },
           ],
-        }}
-        options={chartOptions(props.options)}
+        })}
+        options={theme.resolve(chartOptions(props.options, 'none'))}
       />
     </div>
   )
@@ -356,14 +394,15 @@ export function DonutChart(props: {
   options?: ChartOptions
   class?: string
 }) {
+  const theme = createThemeResolver()
   // `Dynamic` rather than a local component accessor: Solid's JSX types require
   // a component reference, and an accessor returning one is a call in disguise.
   const component = () => (props.cutout === 0 ? Pie : Doughnut)
   return (
-    <div class={cn('h-64', props.class)}>
+    <div ref={theme.ref} class={cn('h-64', props.class)}>
       <Dynamic
         component={component()}
-        data={{
+        data={theme.resolve({
           labels: [...props.labels],
           datasets: [
             {
@@ -375,11 +414,20 @@ export function DonutChart(props: {
               borderWidth: 2,
             },
           ],
-        }}
-        options={chartOptions({
-          ...props.options,
-          ...(props.cutout === 0 ? {} : { cutout: `${props.cutout ?? 60}%` }),
         })}
+        options={theme.resolve(
+          chartOptions(
+            mergeChartOptions(
+              props.cutout === 0
+                ? undefined
+                : ({
+                    cutout: `${props.cutout ?? 60}%`,
+                  } satisfies ChartOptions<'doughnut'> as ChartOptions),
+              props.options
+            ),
+            'none'
+          )
+        )}
       />
     </div>
   )

package/dist/r/src/components/ui/context-menu/context-menu.tsx CHANGED Viewed

@@ -131,6 +131,14 @@ export function ContextMenuRadioItem(props: ComponentProps<typeof KobalteContext
   )
 }
+/**
+ * The caption of a `ContextMenuGroup`, and that group's accessible name. It must be a
+ * child of the group it names: Kobalte reads the group from context, so a label
+ * placed directly in the content throws `useMenuGroupContext must be used within
+ * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
+ * label and its items in a group anyway — the grouping is what a screen reader
+ * announces.
+ */
 export function ContextMenuLabel(props: ComponentProps<typeof KobalteContextMenu.GroupLabel>) {
   const [local, rest] = splitProps(props, ['class'])
   return <KobalteContextMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />

package/dist/r/src/components/ui/drawer/drawer.tsx CHANGED Viewed

@@ -41,7 +41,14 @@ export function DrawerOverlay(props: ComponentProps<typeof DrawerPrimitive.Overl
   )
 }
-export type DrawerContentProps = ComponentProps<typeof DrawerPrimitive.Content> & {
+export type DrawerContentProps = Omit<ComponentProps<typeof DrawerPrimitive.Content>, 'side'> & {
+  /**
+   * Not accepted here. corvu reads the side from the root `Drawer`, which uses it
+   * for the drag axis and publishes it as `data-side`; a `side` on the content
+   * would type-check through the polymorphic props and be silently ignored,
+   * leaving the drawer on the bottom edge. Set `<Drawer side="right">` instead.
+   */
+  side?: never
   /**
    * Draw the grabber at the leading edge of the sheet.
    *

package/dist/r/src/components/ui/dropdown-menu/dropdown-menu.tsx CHANGED Viewed

@@ -187,6 +187,14 @@ export function DropdownMenuRadioItem(props: ComponentProps<typeof KobalteDropdo
   )
 }
+/**
+ * The caption of a `DropdownMenuGroup`, and that group's accessible name. It must be a
+ * child of the group it names: Kobalte reads the group from context, so a label
+ * placed directly in the content throws `useMenuGroupContext must be used within
+ * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
+ * label and its items in a group anyway — the grouping is what a screen reader
+ * announces.
+ */
 export function DropdownMenuLabel(props: ComponentProps<typeof KobalteDropdownMenu.GroupLabel>) {
   const [local, rest] = splitProps(props, ['class'])
   return <KobalteDropdownMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />

package/dist/r/src/components/ui/input-otp/input-otp.tsx CHANGED Viewed

@@ -38,7 +38,17 @@ export function InputOtp(props: InputOtpProps) {
   return (
     <OtpField
       maxLength={length()}
-      class={cn('flex items-center gap-2', local.class)}
+      class={cn(
+        'flex items-center gap-2',
+        // corvu positions the field itself, but its hidden input is 40px wider
+        // than the field so a password manager's badge lands outside the boxes
+        // (`shiftPWManagers`). `clip-path` only hides that overhang; it still
+        // counts as overflow, and a full-width field scrolled the page sideways.
+        // `overflow-hidden` contains it, and `p-1` keeps the edge boxes' focus
+        // ring (`ring-3`) inside the clip.
+        'overflow-hidden p-1',
+        local.class
+      )}
       {...rest}
       children={(field) => (
         <>
@@ -72,7 +82,9 @@ export function InputOtp(props: InputOtpProps) {
                             'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'
                           )}
                           data-active={field.activeSlots.includes(slot)}
-                          data-disabled={props.disabled}
+                          // Present-or-absent, never `"false"`: `data-[disabled]`
+                          // matches any value, so `disabled={false}` dimmed the boxes.
+                          data-disabled={props.disabled ? '' : undefined}
                         >
                           {field.value[slot] ?? ''}
                         </span>

package/dist/r/src/components/ui/menubar/menubar.tsx CHANGED Viewed

@@ -160,6 +160,14 @@ export function MenubarRadioItem(props: ComponentProps<typeof KobalteMenubar.Rad
   )
 }
+/**
+ * The caption of a `MenubarGroup`, and that group's accessible name. It must be a
+ * child of the group it names: Kobalte reads the group from context, so a label
+ * placed directly in the content throws `useMenuGroupContext must be used within
+ * a Menu.Group` the moment the menu opens. For an ungrouped caption, wrap the
+ * label and its items in a group anyway — the grouping is what a screen reader
+ * announces.
+ */
 export function MenubarLabel(props: ComponentProps<typeof KobalteMenubar.GroupLabel>) {
   const [local, rest] = splitProps(props, ['class'])
   return <KobalteMenubar.GroupLabel class={cn(menuLabel, local.class)} {...rest} />

package/dist/r/src/components/ui/navigation-menu/navigation-menu.tsx CHANGED Viewed

@@ -41,9 +41,15 @@ import { menuContentPadding, menuItem, overlayMotion, overlaySurface } from '../
  * - `Content` must be a direct child of `Menu`, and the `Viewport` is a **sibling
  *   of the menus** — not inside them. All the panels share one viewport, which is
  *   what lets the bar animate between them instead of each panel popping in place.
+ * - The viewport is an empty surface. Each `Content` reaches it through Kobalte's
+ *   `Portal`, which mounts the panel inside the viewport while keeping it in its
+ *   own `Menu`'s context. A `Content` rendered anywhere else — the viewport's own
+ *   children included — has no `Menu` above it, and Kobalte throws
+ *   `useMenuRootContext must be used within a MenuRoot` the moment a panel opens.
  *
- * The wrapper enforces the last of those by rendering the `Viewport` itself, so a
- * caller cannot forget it and get a menu whose panels never appear.
+ * The wrapper enforces the last two by rendering the `Viewport` itself and by
+ * portalling every `NavigationMenuContent`, so a caller cannot forget either and
+ * get a menu whose panels never appear.
  */
 export type NavigationMenuProps = ComponentProps<typeof KobalteNavigationMenu.Root> & {
@@ -112,25 +118,41 @@ export function NavigationMenuContent(props: ComponentProps<typeof KobalteNaviga
   const [local, rest] = splitProps(props, ['class', 'children'])
   return (
-    <KobalteNavigationMenu.Content
-      class={cn(
-        'grid w-max gap-1 p-2',
-        // A two-column panel is the shape most menu bars want, and it is opt-in
-        // through this hook rather than a prop because the column count is a
-        // layout decision the caller's content makes.
-        'data-[wide]:grid-cols-2',
-        local.class
-      )}
-      {...rest}
-    >
-      {local.children}
-    </KobalteNavigationMenu.Content>
+    <KobalteNavigationMenu.Portal>
+      <KobalteNavigationMenu.Content
+        class={cn(
+          // Absolute so the viewport sizes to the active panel's measured box and
+          // animates between panels, rather than stacking them.
+          'absolute top-0 left-0 grid w-max gap-1 p-2 outline-none',
+          // The motion is the panel's, not the viewport's. Kobalte keeps an
+          // outgoing panel mounted until the viewport's own animation ends; a
+          // viewport that carries an entrance animation never fires that again
+          // after it opens, so the previous panel would stay painted under the
+          // next one.
+          overlayMotion,
+          // A two-column panel is the shape most menu bars want, and it is opt-in
+          // through this hook rather than a prop because the column count is a
+          // layout decision the caller's content makes.
+          'data-[wide]:grid-cols-2',
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+      </KobalteNavigationMenu.Content>
+    </KobalteNavigationMenu.Portal>
   )
 }
 /**
  * The shared panel surface. One per menu bar, and the wrapper supplies it — but
  * exported so a caller with an unusual layout can place it themselves.
+ *
+ * It renders no children: the panels arrive through each `NavigationMenuContent`'s
+ * portal. Kobalte positions it under the bar and publishes the active panel's size
+ * as `--kb-navigation-menu-viewport-*`, which the surface animates between.
+ * `box-content` keeps the border outside that measured size so a panel is never
+ * clipped by its own frame.
  */
 export function NavigationMenuViewport(
   props: ComponentProps<typeof KobalteNavigationMenu.Viewport>
@@ -139,24 +161,16 @@ export function NavigationMenuViewport(
   return (
     <KobalteNavigationMenu.Viewport
+      data-slot="navigation-menu-viewport"
       class={cn(
-        'absolute top-full left-0 isolate z-(--z-menu) mt-1.5 flex justify-center overflow-hidden',
+        overlaySurface,
+        'isolate z-(--z-menu) mt-1.5 box-content list-none overflow-hidden',
         'h-(--kb-navigation-menu-viewport-height) w-(--kb-navigation-menu-viewport-width)',
-        'origin-top transition-[width,height] duration-200 ease-out',
+        'origin-(--kb-menu-content-transform-origin) transition-[width,height] duration-200 ease-out',
         local.class
       )}
       {...rest}
-    >
-      <div
-        class={cn(
-          overlaySurface,
-          overlayMotion,
-          'w-full rounded-lg border border-border bg-popover p-1 shadow-lg'
-        )}
-      >
-        <KobalteNavigationMenu.Content />
-      </div>
-    </KobalteNavigationMenu.Viewport>
+    />
   )
 }

package/dist/r/src/components/ui/pagination/pagination.tsx CHANGED Viewed

@@ -55,7 +55,14 @@ export function Pagination(props: PaginationProps) {
         ((itemProps) => <PaginationItem page={itemProps.page}>{itemProps.page}</PaginationItem>)
       }
       ellipsisComponent={local.ellipsisComponent ?? (() => <PaginationEllipsis />)}
-      class={cn('flex w-full items-center justify-center gap-1', local.class)}
+      // Kobalte renders the root as a `<nav>` wrapping a `<ul>`, and every control —
+      // previous, the page run, next — is an `<li>` inside that list. The row has to be
+      // declared on the list: on the `<nav>` alone it lays out one child and the
+      // controls stack vertically.
+      class={cn(
+        'flex w-full items-center justify-center [&>ul]:m-0 [&>ul]:flex [&>ul]:list-none [&>ul]:items-center [&>ul]:gap-1 [&>ul]:p-0',
+        local.class
+      )}
       {...rest}
     >
       <Show when={local.children} fallback={<DefaultPaginationControls />}>