@titan-design/react-ui 0.2.6 → 0.2.7

package/src/components/ui/toolbar-button/ToolbarButton.stories.tsx

@@ -319,7 +319,7 @@ export const CompactMode: Story = {
             onPress={() => setIsCompact(!isCompact)}
           />
         </View>
-        <View className="h-px bg-border-default" />
+        <View className="h-px bg-border" />
         <ToolbarButtonGroup gap="sm">
           <ToolbarButton
             label="Filter"

package/src/components/ui/toolbar-button/ToolbarButton.tsx

@@ -231,7 +231,7 @@ export function ToolbarButton({
             <View
               className={cn(
                 'absolute z-50 top-full left-0 mt-1',
-                'rounded-lg shadow-lg border border-border-default',
+                'rounded-lg shadow-lg border border-border',
                 'min-w-[150px] overflow-hidden',
                 `bg-[${MENU_BG}]`
               )}

package/src/examples/react-hook-form/ControlledFields.tsx

@@ -0,0 +1,171 @@
+import { View, Text } from 'react-native'
+import {
+  Controller,
+  type Control,
+  type FieldPath,
+  type FieldValues,
+  type RegisterOptions,
+} from 'react-hook-form'
+import { FormField } from '../../components/ui/form-field'
+import { Input } from '../../components/ui/input'
+import { Select, type SelectOption } from '../../components/ui/select'
+import { Checkbox } from '../../components/ui/checkbox'
+import { RadioGroup, Radio } from '../../components/ui/radio'
+
+/**
+ * Reusable react-hook-form adapters for the styled form primitives.
+ *
+ * Each adapter follows the canonical RHF `Controller` render-prop idiom: the
+ * library owns the value/validation state and hands it to the already-styled
+ * controlled component through `field` + `fieldState`. None of the components'
+ * public APIs are touched — this is pure wiring a consumer would write.
+ */
+interface BaseControlledProps<T extends FieldValues> {
+  /** The `control` object returned by `useForm`. */
+  control: Control<T>
+  /** The field name — type-checked against the form's value shape. */
+  name: FieldPath<T>
+  /** RHF validation rules (required, pattern, validate, ...). */
+  rules?: Omit<
+    RegisterOptions<T, FieldPath<T>>,
+    'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'
+  >
+  /** Visible field label. */
+  label?: string
+  /** Marks the field as required in the UI. */
+  isRequired?: boolean
+}
+
+export interface ControlledInputProps<T extends FieldValues> extends BaseControlledProps<T> {
+  placeholder?: string
+}
+
+/** `FormField` + `Input` driven by RHF. Surfaces validation via `errorMessage`. */
+export function ControlledInput<T extends FieldValues>({
+  control,
+  name,
+  rules,
+  label,
+  isRequired,
+  placeholder,
+}: ControlledInputProps<T>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      rules={rules}
+      render={({ field, fieldState }) => (
+        <FormField label={label} isRequired={isRequired} errorMessage={fieldState.error?.message}>
+          <Input
+            value={(field.value as string | undefined) ?? ''}
+            onChangeText={field.onChange}
+            onBlur={field.onBlur}
+            placeholder={placeholder}
+          />
+        </FormField>
+      )}
+    />
+  )
+}
+
+export interface ControlledSelectProps<T extends FieldValues> extends BaseControlledProps<T> {
+  options: SelectOption[]
+  placeholder?: string
+}
+
+/** `FormField` + `Select` (single-select) driven by RHF. */
+export function ControlledSelect<T extends FieldValues>({
+  control,
+  name,
+  rules,
+  label,
+  isRequired,
+  options,
+  placeholder,
+}: ControlledSelectProps<T>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      rules={rules}
+      render={({ field, fieldState }) => (
+        <FormField label={label} isRequired={isRequired} errorMessage={fieldState.error?.message}>
+          <Select
+            value={(field.value as string | null | undefined) ?? null}
+            onChange={field.onChange}
+            options={options}
+            placeholder={placeholder}
+          />
+        </FormField>
+      )}
+    />
+  )
+}
+
+/** `Checkbox` (boolean) driven by RHF, with an inline error message. */
+export function ControlledCheckbox<T extends FieldValues>({
+  control,
+  name,
+  rules,
+  label,
+}: BaseControlledProps<T>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      rules={rules}
+      render={({ field, fieldState }) => (
+        <View className="gap-1">
+          <Checkbox
+            label={label}
+            isChecked={Boolean(field.value)}
+            onCheckedChange={field.onChange}
+            isInvalid={!!fieldState.error}
+          />
+          {fieldState.error && (
+            <Text className="text-xs text-status-error">{fieldState.error.message}</Text>
+          )}
+        </View>
+      )}
+    />
+  )
+}
+
+export interface ControlledRadioGroupProps<T extends FieldValues> extends BaseControlledProps<T> {
+  options: SelectOption[]
+}
+
+/** `RadioGroup` + `Radio` options driven by RHF, with an inline error message. */
+export function ControlledRadioGroup<T extends FieldValues>({
+  control,
+  name,
+  rules,
+  label,
+  options,
+}: ControlledRadioGroupProps<T>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      rules={rules}
+      render={({ field, fieldState }) => (
+        <View className="gap-1">
+          <RadioGroup
+            label={label}
+            value={(field.value as string | null | undefined) ?? null}
+            onChange={field.onChange}
+          >
+            {options.map((option) => (
+              <Radio key={option.value} value={option.value}>
+                {option.label}
+              </Radio>
+            ))}
+          </RadioGroup>
+          {fieldState.error && (
+            <Text className="text-xs text-status-error">{fieldState.error.message}</Text>
+          )}
+        </View>
+      )}
+    />
+  )
+}

package/src/examples/react-hook-form/ReactHookForm.stories.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { RhfContactForm, type ContactFormValues } from './RhfContactForm'
+
+/**
+ * Examples showing how a consumer drives the styled form primitives
+ * (`FormField`, `Input`, `Select`, `Checkbox`, `Radio`) with
+ * [react-hook-form](https://react-hook-form.com/) using the canonical
+ * `Controller` render-prop idiom. See `ControlledFields.tsx` for the adapters.
+ */
+const meta: Meta<typeof RhfContactForm> = {
+  title: 'Examples/React Hook Form',
+  component: RhfContactForm,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'react-hook-form owns value + validation state and hands it to the ' +
+          'already-styled controlled components via `Controller`. No component ' +
+          'API is modified — this is pure integration wiring.',
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof RhfContactForm>
+
+/** A complete form: type, select, pick a plan, accept terms, then submit. */
+export const ContactForm: Story = {
+  render: function Render() {
+    const [submitted, setSubmitted] = React.useState<ContactFormValues | null>(null)
+    return (
+      <View style={{ gap: 16 }}>
+        <RhfContactForm onSubmit={setSubmitted} />
+        {submitted && (
+          <Text className="text-sm text-text-secondary">
+            Submitted: {JSON.stringify(submitted)}
+          </Text>
+        )}
+      </View>
+    )
+  },
+}
+
+/** Submitting empty surfaces per-field validation errors from RHF rules. */
+export const ValidationErrors: Story = {
+  render: () => <RhfContactForm />,
+}

package/src/examples/react-hook-form/ReactHookForm.test.tsx

@@ -0,0 +1,61 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { RhfContactForm } from './RhfContactForm'
+
+describe('react-hook-form integration', () => {
+  it('submits the collected values from every controlled component', async () => {
+    // Arrange
+    const onSubmit = vi.fn()
+    render(<RhfContactForm onSubmit={onSubmit} />)
+
+    // Act
+    fireEvent.change(screen.getByPlaceholderText('Ada Lovelace'), {
+      target: { value: 'Grace Hopper' },
+    })
+    fireEvent.click(screen.getByText('Select a role...'))
+    fireEvent.click(screen.getByText('Designer'))
+    fireEvent.click(screen.getByText('Pro'))
+    fireEvent.click(screen.getByRole('checkbox'))
+    fireEvent.click(screen.getByText('Submit'))
+
+    // Assert
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1))
+    expect(onSubmit.mock.calls[0][0]).toEqual({
+      fullName: 'Grace Hopper',
+      role: 'designer',
+      plan: 'pro',
+      acceptedTerms: true,
+    })
+  })
+
+  it('surfaces validation errors and blocks submit when required fields are empty', async () => {
+    // Arrange
+    const onSubmit = vi.fn()
+    render(<RhfContactForm onSubmit={onSubmit} />)
+
+    // Act
+    fireEvent.click(screen.getByText('Submit'))
+
+    // Assert
+    expect(await screen.findByText('Full name is required')).toBeInTheDocument()
+    expect(screen.getByText('Please choose a role')).toBeInTheDocument()
+    expect(screen.getByText('Please pick a plan')).toBeInTheDocument()
+    expect(screen.getByText('You must accept the terms')).toBeInTheDocument()
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+
+  it('clears a field error once the value becomes valid', async () => {
+    // Arrange
+    render(<RhfContactForm />)
+    fireEvent.click(screen.getByText('Submit'))
+    expect(await screen.findByText('Full name is required')).toBeInTheDocument()
+
+    // Act
+    fireEvent.change(screen.getByPlaceholderText('Ada Lovelace'), {
+      target: { value: 'Katherine Johnson' },
+    })
+
+    // Assert
+    await waitFor(() => expect(screen.queryByText('Full name is required')).not.toBeInTheDocument())
+  })
+})

package/src/examples/react-hook-form/RhfContactForm.tsx

@@ -0,0 +1,99 @@
+import { View } from 'react-native'
+import { useForm, type SubmitHandler } from 'react-hook-form'
+import { Button, ButtonText } from '../../components/ui/button'
+import { type SelectOption } from '../../components/ui/select'
+import {
+  ControlledInput,
+  ControlledSelect,
+  ControlledCheckbox,
+  ControlledRadioGroup,
+} from './ControlledFields'
+
+export interface ContactFormValues {
+  fullName: string
+  role: string
+  plan: string
+  acceptedTerms: boolean
+}
+
+const roleOptions: SelectOption[] = [
+  { value: 'engineer', label: 'Engineer' },
+  { value: 'designer', label: 'Designer' },
+  { value: 'manager', label: 'Manager' },
+]
+
+const planOptions: SelectOption[] = [
+  { value: 'free', label: 'Free' },
+  { value: 'pro', label: 'Pro' },
+]
+
+const defaultValues: ContactFormValues = {
+  fullName: '',
+  role: '',
+  plan: '',
+  acceptedTerms: false,
+}
+
+export interface RhfContactFormProps {
+  /** Called with validated form values on a successful submit. */
+  onSubmit?: SubmitHandler<ContactFormValues>
+}
+
+/**
+ * End-to-end example wiring the styled form primitives to react-hook-form.
+ *
+ * Demonstrates the `Controller` idiom across `FormField`, `Input`, `Select`,
+ * `Checkbox`, and `Radio` — a single `useForm` instance owns state, validation,
+ * and submission. No component API is modified.
+ */
+export function RhfContactForm({ onSubmit }: RhfContactFormProps) {
+  const { control, handleSubmit } = useForm<ContactFormValues>({
+    defaultValues,
+  })
+
+  const handleValid: SubmitHandler<ContactFormValues> = (values) => {
+    onSubmit?.(values)
+  }
+
+  return (
+    <View className="gap-4" style={{ maxWidth: 360 }}>
+      <ControlledInput
+        control={control}
+        name="fullName"
+        label="Full name"
+        isRequired
+        placeholder="Ada Lovelace"
+        rules={{ required: 'Full name is required' }}
+      />
+
+      <ControlledSelect
+        control={control}
+        name="role"
+        label="Role"
+        isRequired
+        options={roleOptions}
+        placeholder="Select a role..."
+        rules={{ required: 'Please choose a role' }}
+      />
+
+      <ControlledRadioGroup
+        control={control}
+        name="plan"
+        label="Plan"
+        options={planOptions}
+        rules={{ required: 'Please pick a plan' }}
+      />
+
+      <ControlledCheckbox
+        control={control}
+        name="acceptedTerms"
+        label="I accept the terms and conditions"
+        rules={{ required: 'You must accept the terms' }}
+      />
+
+      <Button onPress={handleSubmit(handleValid)}>
+        <ButtonText>Submit</ButtonText>
+      </Button>
+    </View>
+  )
+}

package/src/stories/PresetShowcase.stories.tsx

@@ -24,7 +24,7 @@ function PresetSwitcher({
   onSwitch: (name: string) => void
 }) {
   return (
-    <View className="flex-row items-center gap-3 p-4 bg-surface-elevated rounded-lg border border-border-default">
+    <View className="flex-row items-center gap-3 p-4 bg-surface-elevated rounded-lg border border-border">
       <Text className="text-text-secondary text-sm font-medium">Active Preset:</Text>
       {Object.keys(presets).map((name) => (
         <Pressable
@@ -33,7 +33,7 @@ function PresetSwitcher({
           className={`px-4 py-2 rounded-md border ${
             activePreset === name
               ? 'bg-brand-primary border-brand-primary'
-              : 'bg-surface-base border-border-default web:hover:bg-interactive-hover'
+              : 'bg-surface-base border-border web:hover:bg-interactive-hover'
           }`}
         >
           <Text
@@ -272,7 +272,7 @@ function TypographyShowcase() {
       </Section>
 
       <Section title="Monospace Font (font-mono)">
-        <View className="bg-surface-elevated rounded-lg p-4 border border-border-default">
+        <View className="bg-surface-elevated rounded-lg p-4 border border-border">
           <Text className="text-sm text-text-primary font-mono">
             {'const theme = applyThemePreset(audiobookPreset)'}
           </Text>
@@ -368,13 +368,13 @@ function ColorPaletteShowcase() {
 
       <Section title="Text Colors">
         <View className="flex-row gap-3 flex-wrap">
-          <View className="rounded-lg p-3 min-w-[120px] min-h-[60px] justify-end bg-surface-elevated border border-border-default">
+          <View className="rounded-lg p-3 min-w-[120px] min-h-[60px] justify-end bg-surface-elevated border border-border">
             <Text className="text-xs font-mono font-medium text-text-primary">text-primary</Text>
           </View>
-          <View className="rounded-lg p-3 min-w-[120px] min-h-[60px] justify-end bg-surface-elevated border border-border-default">
+          <View className="rounded-lg p-3 min-w-[120px] min-h-[60px] justify-end bg-surface-elevated border border-border">
             <Text className="text-xs font-mono font-medium text-text-secondary">text-secondary</Text>
           </View>
-          <View className="rounded-lg p-3 min-w-[120px] min-h-[60px] justify-end bg-surface-elevated border border-border-default">
+          <View className="rounded-lg p-3 min-w-[120px] min-h-[60px] justify-end bg-surface-elevated border border-border">
             <Text className="text-xs font-mono font-medium text-text-tertiary">text-tertiary</Text>
           </View>
         </View>
@@ -382,25 +382,25 @@ function ColorPaletteShowcase() {
 
       <Section title="Surface Colors">
         <View className="flex-row gap-3 flex-wrap">
-          <ColorSwatch label="surface-base" className="bg-surface-base border border-border-default" textClass="text-text-primary" />
-          <ColorSwatch label="surface-elevated" className="bg-surface-elevated border border-border-default" textClass="text-text-primary" />
-          <ColorSwatch label="surface-raised" className="bg-surface-raised border border-border-default" textClass="text-text-primary" />
-          <ColorSwatch label="surface-overlay" className="bg-surface-overlay border border-border-default" textClass="text-text-primary" />
-          <ColorSwatch label="surface-input" className="bg-surface-input border border-border-default" textClass="text-text-primary" />
+          <ColorSwatch label="surface-base" className="bg-surface-base border border-border" textClass="text-text-primary" />
+          <ColorSwatch label="surface-elevated" className="bg-surface-elevated border border-border" textClass="text-text-primary" />
+          <ColorSwatch label="surface-raised" className="bg-surface-raised border border-border" textClass="text-text-primary" />
+          <ColorSwatch label="surface-overlay" className="bg-surface-overlay border border-border" textClass="text-text-primary" />
+          <ColorSwatch label="surface-input" className="bg-surface-input border border-border" textClass="text-text-primary" />
         </View>
       </Section>
 
       <Section title="Background Colors">
         <View className="flex-row gap-3 flex-wrap">
-          <ColorSwatch label="background-base" className="bg-background-base border border-border-default" textClass="text-text-primary" />
-          <ColorSwatch label="background-default" className="bg-background-default border border-border-default" textClass="text-text-primary" />
-          <ColorSwatch label="background-subtle" className="bg-background-subtle border border-border-default" textClass="text-text-primary" />
+          <ColorSwatch label="background-base" className="bg-background-base border border-border" textClass="text-text-primary" />
+          <ColorSwatch label="background-default" className="bg-background-default border border-border" textClass="text-text-primary" />
+          <ColorSwatch label="background-subtle" className="bg-background-subtle border border-border" textClass="text-text-primary" />
         </View>
       </Section>
 
       <Section title="Border Colors">
         <View className="flex-row gap-3 flex-wrap">
-          <View className="rounded-lg p-3 min-w-[120px] min-h-[60px] justify-end bg-surface-base border-2 border-border-default">
+          <View className="rounded-lg p-3 min-w-[120px] min-h-[60px] justify-end bg-surface-base border-2 border-border">
             <Text className="text-xs font-mono font-medium text-text-primary">border-default</Text>
           </View>
           <View className="rounded-lg p-3 min-w-[120px] min-h-[60px] justify-end bg-surface-base border-2 border-border-subtle">

package/src/theme/index.ts

@@ -3,11 +3,12 @@ export * from './tokens'
 export * from './config'
 export * from './shadows'
 export * from './elevation'
+export * from './manifest'
 
 // Re-export commonly used items
 export { getSemanticColors, type ThemeMode } from './tokens/semantic'
 export { getThemeCSSVars, gluestackConfig } from './config'
-export { 
+export {
   neumorphicShadows,
   // Color math utilities (HSV-based)
   lighten,

package/src/theme/manifest/css-property-manifest.example.json

@@ -0,0 +1,79 @@
+{
+  "component": "button",
+  "description": "Illustrative example conforming to css-property-manifest.schema.json. Values are derived from Button.tsx's variant/color/size style maps and the semantic token definitions they reference, not measured via getComputedStyle — a follow-up ticket generates verified manifests from the rendered Storybook DOM.",
+  "baseVariant": { "variant": "solid", "color": "primary", "size": "md" },
+  "properties": [
+    {
+      "property": "backgroundColor",
+      "token": "brand-primary",
+      "cssVariable": "--color-brand-primary",
+      "resolvedValue": "rgb(255, 121, 0)",
+      "variantOverrides": [
+        {
+          "variant": { "variant": "outline" },
+          "token": null,
+          "cssVariable": null,
+          "resolvedValue": "rgba(0, 0, 0, 0)"
+        },
+        {
+          "variant": { "variant": "solid", "color": "error" },
+          "token": "status-error",
+          "cssVariable": "--color-status-error",
+          "resolvedValue": "rgb(209, 67, 67)"
+        }
+      ]
+    },
+    {
+      "property": "color",
+      "token": null,
+      "resolvedValue": "rgb(255, 255, 255)",
+      "variantOverrides": [
+        {
+          "variant": { "variant": "outline" },
+          "token": "brand-primary",
+          "cssVariable": "--color-brand-primary",
+          "resolvedValue": "rgb(255, 121, 0)"
+        }
+      ]
+    },
+    {
+      "property": "borderColor",
+      "token": null,
+      "resolvedValue": "rgba(0, 0, 0, 0)",
+      "variantOverrides": [
+        {
+          "variant": { "variant": "outline" },
+          "token": "brand-primary",
+          "cssVariable": "--color-brand-primary",
+          "resolvedValue": "rgb(255, 121, 0)"
+        }
+      ]
+    },
+    {
+      "property": "borderWidth",
+      "token": null,
+      "resolvedValue": "0px",
+      "variantOverrides": [
+        {
+          "variant": { "variant": "outline" },
+          "token": null,
+          "resolvedValue": "2px"
+        }
+      ]
+    },
+    {
+      "property": "borderRadius",
+      "token": null,
+      "resolvedValue": "6px"
+    },
+    {
+      "property": "paddingLeft",
+      "token": null,
+      "resolvedValue": "20px",
+      "variantOverrides": [
+        { "variant": { "size": "sm" }, "token": null, "resolvedValue": "16px" },
+        { "variant": { "size": "lg" }, "token": null, "resolvedValue": "24px" }
+      ]
+    }
+  ]
+}

package/src/theme/manifest/css-property-manifest.schema.json

@@ -0,0 +1,93 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://titan-design.dev/schemas/css-property-manifest.schema.json",
+  "title": "Component CSS Property Manifest",
+  "description": "Per-component record of visual CSS properties, the design token each one resolves from, the expected computed style value, and any per-variant overrides. Generated manifests serve as fixtures for Playwright computed-style assertions (see packages/ui/tests/visual).",
+  "type": "object",
+  "required": ["component", "properties"],
+  "additionalProperties": false,
+  "properties": {
+    "component": {
+      "type": "string",
+      "pattern": "^[a-z][a-z0-9-]*$",
+      "description": "Component identifier matching its src/components/ui/{component} directory and Storybook id (e.g. \"button\")."
+    },
+    "description": {
+      "type": "string",
+      "description": "Optional human-readable note about what this manifest covers."
+    },
+    "baseVariant": {
+      "$ref": "#/$defs/variantAxes",
+      "description": "The variant axis values (e.g. { \"variant\": \"solid\", \"color\": \"primary\", \"size\": \"md\" }) that each property's top-level resolvedValue was captured against. Axis names must match the component's own prop names."
+    },
+    "properties": {
+      "type": "array",
+      "minItems": 1,
+      "items": { "$ref": "#/$defs/cssPropertyEntry" },
+      "description": "One entry per visual CSS property tracked for this component."
+    }
+  },
+  "$defs": {
+    "variantAxes": {
+      "type": "object",
+      "minProperties": 1,
+      "additionalProperties": { "type": "string" },
+      "description": "A set of variant axis name/value pairs (e.g. variant, color, size, state) as accepted by the component's props."
+    },
+    "cssPropertyEntry": {
+      "type": "object",
+      "required": ["property", "token", "resolvedValue"],
+      "additionalProperties": false,
+      "properties": {
+        "property": {
+          "type": "string",
+          "pattern": "^[a-zA-Z]+$",
+          "description": "CSS property name in camelCase as returned by window.getComputedStyle (e.g. backgroundColor, borderColor, fontSize)."
+        },
+        "token": {
+          "type": ["string", "null"],
+          "description": "Semantic design token key this property is sourced from (e.g. \"brand-primary\"), matching a key in packages/ui/src/theme/tokens/semantic.ts. Use null when the value is a literal not backed by a token."
+        },
+        "cssVariable": {
+          "type": ["string", "null"],
+          "description": "CSS custom property backing the token (e.g. \"--color-brand-primary\"), as declared in packages/ui/src/theme/global.css. Omit or null when no CSS variable is involved."
+        },
+        "resolvedValue": {
+          "type": "string",
+          "minLength": 1,
+          "description": "Expected computed style value for baseVariant, in the format getComputedStyle returns it (e.g. \"rgb(255, 121, 0)\", \"8px\")."
+        },
+        "variantOverrides": {
+          "type": "array",
+          "default": [],
+          "items": { "$ref": "#/$defs/variantOverride" },
+          "description": "Overrides of token/resolvedValue for specific variant axis combinations, merged onto baseVariant."
+        }
+      }
+    },
+    "variantOverride": {
+      "type": "object",
+      "required": ["variant", "resolvedValue"],
+      "additionalProperties": false,
+      "properties": {
+        "variant": {
+          "$ref": "#/$defs/variantAxes",
+          "description": "Partial variant axis values that trigger this override (e.g. { \"variant\": \"outline\" } or { \"color\": \"error\", \"state\": \"hover\" })."
+        },
+        "token": {
+          "type": ["string", "null"],
+          "description": "Semantic token key for this override, or null for a literal value."
+        },
+        "cssVariable": {
+          "type": ["string", "null"],
+          "description": "CSS custom property backing the token for this override."
+        },
+        "resolvedValue": {
+          "type": "string",
+          "minLength": 1,
+          "description": "Expected computed style value when the variant axes match."
+        }
+      }
+    }
+  }
+}