@adea-ai/ui 0.99.0 → 0.99.2

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

@@ -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/dropdown-menu/dropdown-menu.tsx

@@ -153,7 +153,10 @@ export function DropdownMenuCheckboxItem(
   return (
     <KobalteDropdownMenu.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>
       {local.children}
-      <KobalteDropdownMenu.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center">
+      <KobalteDropdownMenu.ItemIndicator
+        data-slot="dropdown-menu-indicator"
+        class="absolute end-2 flex size-4 items-center justify-center text-primary"
+      >
         <Check class="size-4" />
       </KobalteDropdownMenu.ItemIndicator>
     </KobalteDropdownMenu.CheckboxItem>
@@ -172,7 +175,12 @@ export function DropdownMenuRadioItem(props: ComponentProps<typeof KobalteDropdo
   return (
     <KobalteDropdownMenu.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>
       {local.children}
-      <KobalteDropdownMenu.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center">
+      {/* The indicator reads in the accent, like every other selected state in
+          the system — a canvas-colored dot on a checked row reads as decoration. */}
+      <KobalteDropdownMenu.ItemIndicator
+        data-slot="dropdown-menu-indicator"
+        class="absolute end-2 flex size-4 items-center justify-center text-primary"
+      >
         <Circle class="size-2 fill-current" />
       </KobalteDropdownMenu.ItemIndicator>
     </KobalteDropdownMenu.RadioItem>

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

@@ -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/pagination/pagination.tsx

@@ -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 />}>

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

@@ -1,7 +1,7 @@
 import Resizable from '@corvu/resizable'
 import { GripVertical } from 'lucide-solid'
 import type { ComponentProps } from 'solid-js'
-import { splitProps } from 'solid-js'
+import { createContext, splitProps, useContext } from 'solid-js'
 import { cn } from '../../../lib/utils'
 
 /**
@@ -16,20 +16,54 @@ import { cn } from '../../../lib/utils'
  * is a real focusable element with an accessible role, so a split pane can be
  * adjusted from the keyboard; a bare `cursor-col-resize` div cannot.
  */
+/**
+ * Whether the group was given `initialSizes`. Those are corvu's to apply, and a
+ * panel's own `initialSize` overrides them — so an unsized panel must not invent
+ * one when the group already has an answer.
+ */
+const GroupSizesContext = createContext<() => boolean>(() => false)
+
 export function ResizablePanelGroup(props: ComponentProps<typeof Resizable> & { class?: string }) {
   const [local, rest] = splitProps(props, ['class'])
 
   return (
-    <Resizable
-      class={cn('flex size-full data-[orientation=vertical]:flex-col', local.class)}
-      {...rest}
-    />
+    <GroupSizesContext.Provider value={() => rest.initialSizes !== undefined}>
+      <Resizable
+        class={cn('flex size-full data-[orientation=vertical]:flex-col', local.class)}
+        {...rest}
+      />
+    </GroupSizesContext.Provider>
   )
 }
 
+/**
+ * The size an unsized panel registers with: whatever its earlier siblings left.
+ *
+ * corvu registers a panel without `initialSize` at a flat 50%, so `0.28` beside
+ * an unsized panel summed to 78% and left a gap. Panels register in document
+ * order, so at registration `sizes` holds exactly the panels before this one.
+ * When nothing is left — a second unsized panel — it takes an equal share, and
+ * corvu shrinks the earlier panels by that share to keep the total at 100%.
+ */
+function remainingSize(sizes: readonly number[]): number {
+  const left = 1 - sizes.reduce((total, size) => total + size, 0)
+  return left > 0.001 ? left : 1 / (sizes.length + 1)
+}
+
 export function ResizablePanel(props: ComponentProps<typeof Resizable.Panel> & { class?: string }) {
-  const [local, rest] = splitProps(props, ['class'])
-  return <Resizable.Panel class={cn('min-h-0 min-w-0 overflow-hidden', local.class)} {...rest} />
+  const [local, rest] = splitProps(props, ['class', 'initialSize'])
+  const group = Resizable.useContext(rest.contextId)
+  const groupHasSizes = useContext(GroupSizesContext)
+
+  return (
+    <Resizable.Panel
+      initialSize={
+        local.initialSize ?? (groupHasSizes() ? undefined : remainingSize(group.sizes()))
+      }
+      class={cn('min-h-0 min-w-0 overflow-hidden', local.class)}
+      {...rest}
+    />
+  )
 }
 
 export type ResizableHandleProps = ComponentProps<typeof Resizable.Handle> & {
@@ -46,11 +80,15 @@ export type ResizableHandleProps = ComponentProps<typeof Resizable.Handle> & {
 
 export function ResizableHandle(props: ResizableHandleProps) {
   const [local, rest] = splitProps(props, ['class', 'withHandle', 'label'])
+  const group = Resizable.useContext(rest.contextId)
 
   return (
     <Resizable.Handle
       aria-label={local.label ?? 'Resize panels'}
-      aria-orientation="vertical"
+      // A separator's orientation is the line's own, which runs across the
+      // group: a row of panels is divided by a vertical line, a column by a
+      // horizontal one. corvu reports the group's orientation instead.
+      aria-orientation={group.orientation() === 'horizontal' ? 'vertical' : 'horizontal'}
       class={cn(
         'group/resize bg-border relative flex w-px shrink-0 items-center justify-center',
         /* Widen the hit target without moving the visual line: the divider is

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

@@ -54,7 +54,7 @@ const DZ = (s: string): Int32Array => {
     }
     return out
 }
-const GROUP_COUNT = 387
+const GROUP_COUNT = 384
 const customValidatorNames: string[] = []
 const edgeStart = PS(U("E0500002005282000000002000150000020021820000011200000003022202000300004200120000200420001200021200301200010400162000010000220021010:2192001200220012000220012000200200200400010200040000000000400200108200110100000022010313000162002000020020012020080213000228200000000082000000000120002000120020020040101020300130001001010"))
 const labelStart = PS(U(":11111111211111119311546544411119731869:671397415686432441111111111161114151214313433415:78311132233313187211117221449443411141111151152226611131111112212518142224214215421421542142424242516171151615616347111111111197911327451111111111111111111113134714133513411111311111111111111111111112444411111342312715245411117:3"))
@@ -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 fr max min px|none | auto 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 dvh fit full lh lvh max min px screen svh| dashed dotted double hidden none solid| collapse separate|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 dvh dvw fit full lh lvh lvw max min px screen svh svw| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs rail-item row-lg row-md row-sm statusbar topbar| block flex grid table| auto dvw fit full lvw max min px screen svw| loose none normal px relaxed snug tight|through |item | inside outside| decimal disc none| auto 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| dvh fit full lh lvh max min none px screen svh| auto dvh dvw fit full lh lvh lvw max min none px screen svh svw| dvw fit full lvw max min none px screen svw| auto dvh dvw fit full lvh lvw max min none prose px svh svw| auto dvh dvw fit full lvh lvw max min none px screen 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 dvh dvw fit full lvh lvw max min px svh svw| control-2xl control-2xs control-lg control-md control-sm control-xl control-xs rail-item|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| full px| auto dvh dvw fit full lvh lvw max min px screen svh svw| rail rail-expanded sidebar sidebar-compact| 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 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 tails = s.split(' ')
     const prefix = tails.shift()!
     for (let i = 0; i < tails.length; i++) {
@@ -99,12 +99,12 @@ const SETS = "container |break-after- all auto avoid avoid-page column left page
     }
     return tails
 })
-const AA = DZ("0000000000000000000000000000000000000000000000000000000000000262242:6@200000006:240B428:44224000020460442224262200266426424062026224222824220022400000000\\00N222422242222222224062242222222422226264222422222222222222442804222422222222222222222222220<40<02042600024440202042244022")
-const AG = DZ("ɠ222222222222222222222222222222222222222222222222222222222222˕4222226>ʶ22ʷʺʷ2ʸʷ42ʴ2ʓ22>621422ɶ222ɹɼɷɺɷɺ22ɱ42222ɨ2ɧ26622ɘɓ24ɐɋƸƵ222]d24242ǖǓƚÆȭ2263ȪȧȪ2222222ǥ222222222222222222DŽƿ2ǀƷ2222222422222ƞƓ22222222222222222222144Ũť22Ťš222222222222222222222ĺ2ij6İħĪħĪɥŰ4Ĥ¯²ġ822ĘĕĘ2ė22226Čĉ2")
-const AS = DZ("02222222222222222222222222222222222222222222222222222222222222222202022222222222EH2200IL021042222Y\\222IL0cf2e10j2222U00X2022]`2{0000120~}€„22‡Š‰:22~22222222222G000sˆOVI00000œ2>40000ŽŸB00000Iª«000®00000000000000021M°¯00²•000000000000000000000˜2222ŸHGHa1¾222Ã2Ä2222ÍÐ000±´22·")
-const litAnchor = new Int32Array(1020)
-const litGroup = new Int32Array(1020)
-const litPool = new Int32Array(1020)
+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)
 let poolText = ''
 const poolOffsets = new Int32Array(1072)
 {
@@ -129,9 +129,9 @@ const poolOffsets = new Int32Array(1072)
     }
 }
 // conflict adjacency (engine builds claim bitmask CSR at init)
-const adjGid = DZ("0b2N:222@R>F@286¦2@H2D266226FB22B2>BD\\6N22222Z222D222t")
+const adjGid = DZ("0b2N:222@R>F@286¦2@H2D266226FB22B2>BD\\6N22222Z222D222p")
 const adjStart = PS(U("1::24444432:442:44:44>222222:44:4421322511111311111114"))
-const adjTgt = DZ("2Š4A;33N=C@H4A;33N=C@<27;83:;8393NQ:3NQʰ222ˉºŴŽ2R2=18cƴÅҜ=cĞÛC1ƈǝȈ:ħ25=11D3A@4=<1;1DEr25;11B3?<6;:371BCn9@7=<8192>2E121@9@EHE@9>2T25511<398454131<=V25511<398454131<=„ƧNž2Ĕé242L222290000f22500ɛ000ǘ222")
+const adjTgt = DZ("2Š4A;33N=C@H4A;33N=C@<27;83:;8393NQ:3NQʰ222ˉºŴŽ2R2=18cƴÅҜ=cĞÛC1ƈǝȈ:ħ25=11D3A@4=<1;1DEr25;11B3?<6;:371BCn9@7=<8192>2E121@9@EHE@9>2T25511<398454131<=V25511<398454131<=„ƧNž2Đå242L222290000f22500ɛ000ǘ222")
 const patGid = U("ij")
 const patTgt = U("—")
 const postfixLookupGroups = U("1")

package/dist/r/src/styles/base.css

@@ -59,8 +59,11 @@
   }
 }
 
+/* Presence, like the variants above: corvu and Kobalte mark a selected item
+   with an empty attribute (`data-selected=""`), while cmdk writes `"true"` and
+   `"false"`. Matching only `'true'` left every corvu calendar day unfilled. */
 @custom-variant data-selected {
-  &:where([data-selected='true']) {
+  &:where([data-selected]:not([data-selected='false'])) {
     @slot;
   }
 }