@viraui/react 2026.3.10 → 2026.4.0

package/dist/components/button/button-link.guide.json

@@ -1,69 +0,0 @@
-{
-  "name": "ButtonLink",
-  "structure": "<ButtonLink href=\"#\">Save</ButtonLink>",
-  "summary": "Navigation link that shares Button visual chrome (--vui-button-* CSS) and default a root with optional render for framework Link.",
-  "whenToUse": [
-    "Actions that navigate (href or router Link) but should look like Button",
-    "Same size, variant, addon, pill, and loading chrome as Button without button semantics",
-    "Compose with Next.js Link or React Router Link via the render prop"
-  ],
-  "whenNotToUse": ["In-page actions that do not navigate — use Button", "Icon-only navigation — use IconButtonLink"],
-  "accessibility": [
-    "Renders a real link root so assistive tech get link role and keyboard behavior",
-    "loading sets aria-disabled / aria-busy for loading chrome; no disabled prop — native links stay activatable",
-    "Loading sets aria-busy; Spinner stays decorative"
-  ],
-  "antiPatterns": ["Using Button with render={<a />} instead of ButtonLink", "Forcing role=button on a link"],
-  "related": ["Button", "IconButtonLink", "Icon", "Spinner", "Chip"],
-  "properties": {
-    "react": {
-      "addon": {
-        "description": "Decorative addon rendered alongside the link label."
-      },
-      "addonPosition": {
-        "description": "Controls whether the addon appears before or after the label."
-      },
-      "loading": {
-        "description": "Shows a centered spinner overlay while preserving the original content width. Sets `aria-disabled` / `aria-busy` for loading chrome; link stays activatable."
-      },
-      "pill": {
-        "description": "Applies a fully rounded pill shape."
-      },
-      "render": {
-        "description": "Replaces the default `a` root using Base UI render semantics (e.g. Next.js `Link`)."
-      },
-      "size": {
-        "description": "Controls the visual button size."
-      },
-      "variant": {
-        "description": "Selects the visual treatment matching Button."
-      }
-    },
-    "css": {
-      "background": {
-        "description": "Button fill; variant and state selectors preset this."
-      },
-      "color": {
-        "description": "Button label and icon color."
-      },
-      "height": {
-        "description": "Button block size; size prop presets via data attributes."
-      },
-      "icon-size": {
-        "description": "Addon icon size inside the button."
-      },
-      "padding-block": {
-        "description": "Vertical padding inside the button."
-      },
-      "padding-inline": {
-        "description": "Horizontal padding inside the button."
-      },
-      "radius": {
-        "description": "Corner radius; pill sets infinite radius via data-pill."
-      },
-      "spinner-color": {
-        "description": "Loading spinner color on the root."
-      }
-    }
-  }
-}

package/dist/components/button/button.guide.json

@@ -1,78 +0,0 @@
-{
-  "name": "Button",
-  "baseUIApi": "https://base-ui.com/react/components/button#api-reference",
-  "structure": "<Button>Save</Button>",
-  "summary": "Primary action control with size, variant, optional addon, optional pill shape, and loading state.",
-  "whenToUse": [
-    "Labeled actions with text and optional leading or trailing addon",
-    "Primary, secondary, flat, or destructive visual treatments",
-    "Capsule-shaped actions via pill when a fully rounded button fits the layout",
-    "Async actions that need a stable width while loading",
-    "Primary Chip addons inside a primary Button — set data-mode=\"inverted\" on the Chip so its background contrasts the button fill"
-  ],
-  "whenNotToUse": [
-    "Icon-only actions without a visible label — use IconButton",
-    "Navigation or non-button semantics — use ButtonLink"
-  ],
-  "accessibility": [
-    "Visible button text should name the action; avoid relying on addon alone",
-    "Loading sets aria-busy on the control while Spinner stays decorative",
-    "Disabled and loading states should not remove the action from the tab order without clear context"
-  ],
-  "antiPatterns": [
-    "Using Button without children as icon-only — prefer IconButton",
-    "Using Button with render={<a />} for links — Base UI enforces button semantics; use ButtonLink",
-    "Duplicating icon size on every addon slot — Button CSS sizes SVG descendants",
-    "Mixing pill with custom border-radius overrides that fight data-pill styling",
-    "Primary Chip addon inside a primary Button without data-mode=\"inverted\" — chip background matches the button fill and disappears"
-  ],
-  "related": ["ButtonLink", "IconButton", "IconButtonLink", "Icon", "Spinner", "Chip"],
-  "properties": {
-    "react": {
-      "addon": {
-        "description": "Decorative addon rendered alongside the button label. Pass any React element; use a named icon from `@viraui/icons/react` or `<Chip />` for status chips."
-      },
-      "addonPosition": {
-        "description": "Controls whether the addon appears before or after the label."
-      },
-      "loading": {
-        "description": "Shows a centered spinner overlay while preserving the original content width."
-      },
-      "pill": {
-        "description": "Applies a fully rounded pill shape to the button."
-      },
-      "size": {
-        "description": "Controls the visual button size."
-      },
-      "variant": {
-        "description": "Selects the visual treatment for the button."
-      }
-    },
-    "css": {
-      "background": {
-        "description": "Button fill; variant and state selectors preset this."
-      },
-      "color": {
-        "description": "Button label and icon color."
-      },
-      "height": {
-        "description": "Button block size; size prop presets via data attributes."
-      },
-      "icon-size": {
-        "description": "Addon icon size inside the button."
-      },
-      "padding-block": {
-        "description": "Vertical padding inside the button."
-      },
-      "padding-inline": {
-        "description": "Horizontal padding inside the button."
-      },
-      "radius": {
-        "description": "Corner radius; pill sets infinite radius via data-pill."
-      },
-      "spinner-color": {
-        "description": "Loading spinner color on the root."
-      }
-    }
-  }
-}

package/dist/components/checkbox/checkbox.guide.json

@@ -1,68 +0,0 @@
-{
-  "name": "Checkbox",
-  "baseUIApi": "https://base-ui.com/react/components/checkbox#api-reference",
-  "structure": "<Checkbox label=\"…\" />",
-  "summary": "Field.Item checkbox option for standalone fields or CheckboxGroup children.",
-  "whenToUse": [
-    "Single boolean fields wrapped in Field.Root with optional label and helper text — no Fieldset required",
-    "CheckboxGroup alone inside Field.Root when each Checkbox has its own label and no shared group legend is needed",
-    "Multi-select sets with shared legend or group copy — Field.Root > Fieldset render={<CheckboxGroup />} with Checkbox children",
-    "Invalid and disabled states with Switch-parity focus treatment"
-  ],
-  "whenNotToUse": [
-    "Unlabeled checkbox without aria-label on the root",
-    "Mutually exclusive options in a set (use Radio and RadioGroup instead)",
-    "Assuming Fieldset is mandatory for every CheckboxGroup — add Fieldset only for shared legend or group copy",
-    "Group legend, description, or validation on CheckboxGroup props — use Field.Root and Fieldset instead"
-  ],
-  "accessibility": [
-    "Provide visible label or aria-label so the checkbox has an accessible name",
-    "Checked and indeterminate states must map to native checkbox semantics exposed by the control",
-    "Surface standalone invalid state and error copy through Field.Root and FieldHelperCopy on Checkbox"
-  ],
-  "antiPatterns": [
-    "Rendering a checkbox without label and without aria-label",
-    "Using Checkbox without Field.Root for standalone validated fields",
-    "Expecting description to stay visible when invalid without an error message"
-  ],
-  "related": ["Fieldset", "CheckboxGroup", "Switch", "Stack", "Text"],
-  "properties": {
-    "react": {
-      "description": {
-        "description": "Helper copy rendered with `Field.Description` and `Text` for this option."
-      },
-      "error": {
-        "description": "Error copy rendered in the same slot as `description` while invalid."
-      },
-      "hPadding": {
-        "description": "Sets inline padding using one token for both sides or a `[start, end]` tuple."
-      },
-      "label": {
-        "description": "Visible label rendered with shared internal `FieldLabel`."
-      },
-      "size": {
-        "description": "Controls the visual checkbox size."
-      },
-      "vPadding": {
-        "description": "Sets block padding using one token for both sides or a `[start, end]` tuple."
-      }
-    },
-    "css": {
-      "background": {
-        "description": "Checkbox control background color."
-      },
-      "border-color": {
-        "description": "Checkbox control border color; invalid and checked states override."
-      },
-      "indicator-color": {
-        "description": "Checkbox check/minus indicator color."
-      },
-      "radius": {
-        "description": "Checkbox control corner radius."
-      },
-      "size": {
-        "description": "Checkbox control box size; size presets adjust footprint and radius."
-      }
-    }
-  }
-}

package/dist/components/chip/chip.guide.json

@@ -1,69 +0,0 @@
-{
-  "name": "Chip",
-  "structure": "<Chip>Label</Chip>",
-  "summary": "Compact visual label primitive for short status, category, or metadata treatments.",
-  "whenToUse": [
-    "Short, non-interactive labels that need a compact pill treatment",
-    "Metadata, category, status, or inline tag-like presentation",
-    "Color-coded badges using the semantic highlight palette",
-    "Polymorphic label content that should render as div by default or as another semantic tag through render"
-  ],
-  "whenNotToUse": [
-    "Interactive actions or dismiss controls — use Button or IconButton",
-    "Long-form text content that should wrap like body copy — use Text"
-  ],
-  "accessibility": [
-    "Chip renders a div by default, so choose render explicitly when a different semantic element is needed",
-    "Decorative addons are aria-hidden and should not carry the accessible name",
-    "Chip does not add button semantics, disabled state, or loading behavior in v1"
-  ],
-  "antiPatterns": [
-    "Using Chip as a button replacement for clickable actions",
-    "Expecting addonPosition to have any effect when addon is omitted",
-    "Introducing custom size variants instead of the fixed compact height",
-    "Re-adding a one-off destructive variant instead of using the red highlight color"
-  ],
-  "related": ["Button", "Icon", "IconButton", "Stack", "Text"],
-  "properties": {
-    "react": {
-      "addon": {
-        "description": "Decorative addon rendered alongside the chip label."
-      },
-      "addonPosition": {
-        "description": "Controls whether the addon appears before or after the label."
-      },
-      "ref": {
-        "description": "Ref forwarded to the rendered chip root element."
-      },
-      "render": {
-        "description": "Replaces the default `div` root using Base UI render semantics."
-      },
-      "variant": {
-        "description": "Selects the visual treatment for the chip."
-      }
-    },
-    "css": {
-      "background": {
-        "description": "Chip fill; variant presets via data attributes."
-      },
-      "border-color": {
-        "description": "Chip border color."
-      },
-      "color": {
-        "description": "Chip label and icon color."
-      },
-      "color-bg-opacity": {
-        "description": "Highlight variant background opacity mix."
-      },
-      "color-border-opacity": {
-        "description": "Highlight variant border opacity mix."
-      },
-      "height": {
-        "description": "Fixed chip block size."
-      },
-      "icon-size": {
-        "description": "Decorative addon icon size."
-      }
-    }
-  }
-}

package/dist/components/clamp-text/clamp-text.guide.json

@@ -1,47 +0,0 @@
-{
-  "name": "ClampText",
-  "structure": "<ClampText>…</ClampText>",
-  "summary": "Presentational utility that truncates overflowing copy to a fixed line count.",
-  "whenToUse": [
-    "Single- or multi-line ellipsis in constrained layouts",
-    "Clamp Text or Title roots through render",
-    "Inline or block clamped typography"
-  ],
-  "whenNotToUse": [
-    "Full text must remain visible without truncation",
-    "Heading semantics without composing Title through render"
-  ],
-  "accessibility": [
-    "Truncation hides content — provide full text nearby, in a tooltip, or on a detail view when it matters",
-    "Do not use clamped text alone for critical instructions or legal copy",
-    "Choose Title render for headings so document outline stays correct"
-  ],
-  "antiPatterns": [
-    "Using ClampText as a heading primitive without Title render",
-    "Expecting children-driven sizing instead of rows"
-  ],
-  "related": ["Text", "Title"],
-  "properties": {
-    "react": {
-      "inline": {
-        "description": "Uses inline `-webkit-inline-box` display instead of block `-webkit-box`."
-      },
-      "ref": {
-        "description": "Ref forwarded to the rendered clamp text root element."
-      },
-      "render": {
-        "description": "Replaces the default `span` root using Base UI render semantics."
-      },
-      "rows": {
-        "description": "Sets how many lines of text remain visible before truncation.",
-        "refCss": "rows"
-      }
-    },
-    "css": {
-      "rows": {
-        "description": "WebKit line-clamp row count on the root.",
-        "refReact": "rows"
-      }
-    }
-  }
-}

package/dist/components/dialog/dialog.guide.json

@@ -1,72 +0,0 @@
-{
-  "name": "Dialog",
-  "baseUIApi": "https://base-ui.com/react/components/drawer#api-reference",
-  "structure": "<Dialog.Provider>\n  <Dialog.IndentBackground />\n  <Dialog.Indent>\n    …\n    <Dialog>\n      <Dialog.Trigger />\n      <Dialog.Sheet title=\"…\">\n        …\n        <Dialog.Close />\n      </Dialog.Sheet>\n    </Dialog>\n  </Dialog.Indent>\n</Dialog.Provider>",
-  "summary": "Compound drawer sheet with `Dialog.Trigger`, `Dialog.Sheet`, `Dialog.Close`, and Base UI pass-through `Dialog.Provider`, `Dialog.Indent`, and `Dialog.IndentBackground` for app-shell indent effects.",
-  "whenToUse": [
-    "Focused tasks or confirmations that interrupt the current page without navigation",
-    "Short forms or read-only content that needs a modal layer above the app",
-    "Bottom sheets where swipe dismissal or snap points are useful (pass `snapPoints`, `snapPoint`/`onSnapPointChange`, or `defaultSnapPoint` directly on `Dialog`)",
-    "Drill-down sheet flows (for example settings sub-pages) by nesting a `Dialog` inside `Dialog.Sheet` children",
-    "App-shell indent effects by wrapping page content in `Dialog.Provider`, `Dialog.IndentBackground`, and `Dialog.Indent`",
-    "Custom portal host (iframe preview, shadow root, or app overlay root) via `container` on the portal-owning public part"
-  ],
-  "whenNotToUse": [
-    "Small anchored hints or quick actions that should use Popover or Menu",
-    "Highly custom sheet anatomy that needs primitive-level composition",
-    "Centered modal layouts that should not slide from the screen edge"
-  ],
-  "accessibility": [
-    "Always pass `title`; add `description` when the heading alone is not enough context",
-    "Compose `Dialog.Close` with an accessible name when a visible close control is needed",
-    "Use `Dialog.Close` for footer actions that should dismiss the sheet",
-    "For non-modal Dialogs (`modal={false}` with `disablePointerDismissal`), the Sheet backdrop is omitted automatically — do not expect a scrim"
-  ],
-  "antiPatterns": [
-    "Opening a sheet without `title` copy for assistive technologies",
-    "Relying only on backdrop press or swipe when a footer action is the primary close path",
-    "Using Dialog when a centered non-gesture modal is enough and a future Dialog primitive is available"
-  ],
-  "related": ["Surface", "Button", "IconButton", "Stack", "Elevator"],
-  "properties": {
-    "react": {
-      "Sheet.children": {
-        "description": "Optional body content rendered below the description."
-      },
-      "Sheet.container": {
-        "description": "Portal mount node (iframe body, shadow root, or app overlay root). Omit for Base UI default (`document.body` from the module window — iframe hosts must pass the iframe document body explicitly)."
-      },
-      "Sheet.description": {
-        "description": "Supporting copy announced with the title."
-      },
-      "Sheet.fitContent": {
-        "description": "Centers the sheet horizontally within the viewport."
-      },
-      "Sheet.headerAlign": {
-        "description": "Aligns the header stack and title/description text (`start` | `center` | `end`)."
-      },
-      "Sheet.maxContentWidth": {
-        "description": "Optional maximum width of the content area."
-      },
-      "Sheet.maxHeight": {
-        "description": "Maximum block size of the sheet panel.",
-        "refCss": "max-block-size"
-      },
-      "Sheet.showCloseButton": {
-        "description": "Whether to show the close button."
-      },
-      "Sheet.showHandle": {
-        "description": "Whether to show the drag handle above the sheet header."
-      },
-      "Sheet.title": {
-        "description": "Accessible dialog title rendered as the modal heading."
-      }
-    },
-    "css": {
-      "max-block-size": {
-        "description": "Max block size of Dialog.Sheet popup root.",
-        "refReact": "Sheet.maxHeight"
-      }
-    }
-  }
-}

package/dist/components/elevator/elevator.guide.json

@@ -1,46 +0,0 @@
-{
-  "name": "Elevator",
-  "structure": "<Elevator resting={1}>…</Elevator>",
-  "summary": "No-DOM elevation utility that merges shadow hooks onto valid element children.",
-  "whenToUse": [
-    "Apply resting and optional hover elevation to existing elements",
-    "Compose animated box-shadow transitions with data-elevation hooks",
-    "Use getElevationProps when you need the mapping directly"
-  ],
-  "whenNotToUse": [
-    "When you need a wrapper DOM node for layout or styling isolation",
-    "Non-element children that cannot receive merged props"
-  ],
-  "accessibility": [
-    "Elevation is visual only — do not use shadow depth as the only affordance for interactivity",
-    "Preserve child focus order and semantics; Elevator does not add a focusable node",
-    "Respect reduced-motion preferences when pairing animated elevation with motion"
-  ],
-  "antiPatterns": [
-    "Wrapping invalid or non-element nodes",
-    "Overwriting child transition shorthand without composing box-shadow"
-  ],
-  "related": ["Surface"],
-  "properties": {
-    "react": {
-      "children": {
-        "description": "Element or elements that receive elevation hooks on their rendered root."
-      },
-      "direction": {
-        "description": "Shadow cast direction mapped to `data-elevation-direction`."
-      },
-      "extraShadow": {
-        "description": "Additional shadow layer mapped to the `--extra-shadow` custom property."
-      },
-      "hover": {
-        "description": "Hover elevation level mapped to `data-elevation-hover`."
-      },
-      "resting": {
-        "description": "Resting elevation level mapped to `data-elevation`."
-      },
-      "shadowColor": {
-        "description": "Shadow color mapped to the `--shadow-color` custom property."
-      }
-    }
-  }
-}

package/dist/components/fieldset/fieldset.guide.json

@@ -1,43 +0,0 @@
-{
-  "name": "Fieldset",
-  "baseUIApi": "https://base-ui.com/react/components/fieldset#api-reference",
-  "structure": "<Fieldset label=\"…\">…</Fieldset>",
-  "summary": "Semantic field grouping with shared legend and optional group helper copy.",
-  "whenToUse": [
-    "Section legends for multiple related fields — billing details with Textfield, Textarea, or Select children",
-    "Choice groups that need a shared legend, group description, or group error — Field.Root > Fieldset render={<RadioGroup<Value> />} or render={<CheckboxGroup />}",
-    "Group validation and helper copy that require a Field.Root ancestor plus Fieldset description or error",
-    "Type-safe radio unions via RadioGroup<'ssd' | 'hdd'> merged through Fieldset render",
-    "Shared legend plus optional group description/error for a form block — border/section chrome belongs on Surface or the consumer"
-  ],
-  "whenNotToUse": [
-    "Every RadioGroup or CheckboxGroup by default — Fieldset is optional when options already have labels and no group copy is needed",
-    "Single Textfield, Textarea, Select, Radio, or Checkbox that already exposes its own label",
-    "Standalone RadioGroup or CheckboxGroup inside Field.Root with no shared legend — primitives are enough",
-    "Group legend, description, or validation on RadioGroup or CheckboxGroup props — those belong on Fieldset (with Field.Root when validating)"
-  ],
-  "accessibility": [
-    "Map visible label to Fieldset.Legend so grouped controls share an accessible section name",
-    "Keep group invalid state on Field.Root and surface group error copy through Fieldset error",
-    "Pass disabled to `<Fieldset disabled>` when the whole section should ignore interaction"
-  ],
-  "antiPatterns": [
-    "Wrapping Fieldset.Root in Stack render — breaks Base UI render merge with RadioGroup or CheckboxGroup",
-    "Expecting description or error on Fieldset without a Field.Root ancestor",
-    "Omitting RadioGroup<Value> generics when option values are a restricted union"
-  ],
-  "related": ["RadioGroup", "CheckboxGroup", "Textfield", "Textarea", "Select", "Stack"],
-  "properties": {
-    "react": {
-      "description": {
-        "description": "Group helper copy rendered below the legend while valid. Requires a `Field.Root` ancestor for `FieldHelperCopy`."
-      },
-      "error": {
-        "description": "Group error copy rendered below the legend when invalid. Requires a `Field.Root` ancestor."
-      },
-      "label": {
-        "description": "Visible legend copy rendered with shared internal `FieldLabel`."
-      }
-    }
-  }
-}

package/dist/components/fit-text/fit-text.guide.json

@@ -1,38 +0,0 @@
-{
-  "name": "FitText",
-  "structure": "<FitText>…</FitText>",
-  "summary": "CSS-only fit-to-width wrapper that scales children to fill available inline space.",
-  "whenToUse": [
-    "Headlines or short copy that should fill a constrained inline width",
-    "Multi-line display type broken with br (or equivalent) inside Title, Text, or native markup",
-    "Resize-friendly marketing/hero type without JS measurement"
-  ],
-  "whenNotToUse": [
-    "Long body copy that should wrap and reflow at a fixed type size",
-    "Truncation — use ClampText instead",
-    "Cases that need a JS-measured or observer-driven fit"
-  ],
-  "accessibility": [
-    "Children render twice; the reference copy is aria-hidden and inert so assistive tech sees one tree",
-    "Keep semantic roots on the visible children (Title render, heading elements, paragraphs)",
-    "Fitted size still respects user zoom because the ratio multiplies 1em"
-  ],
-  "antiPatterns": [
-    "Expecting automatic line breaks without br or block structure in children",
-    "Putting interactive controls inside FitText (duplicate trees and inert reference)",
-    "Using FitText for truncation or ellipsis"
-  ],
-  "related": ["Title", "Text", "ClampText"],
-  "properties": {
-    "react": {
-      "maxFontSize": {
-        "description": "Caps the fitted font size using any valid CSS length string."
-      }
-    },
-    "css": {
-      "max-font-size": {
-        "description": "Upper bound for the fitted font size on the display slot."
-      }
-    }
-  }
-}

package/dist/components/glow/glow.guide.json

@@ -1,108 +0,0 @@
-{
-  "name": "Glow",
-  "structure": "<Glow>{children}</Glow>",
-  "summary": "Decorative pointer-driven border highlight on a transparent Surface shell (radius only). Put the visual card as children; a shared rAF tracker paints CSS variables without React re-renders. Memory-heavy — use sparingly (rarely).",
-  "whenToUse": [
-    "Wrap a Surface (or other content) that should highlight toward the pointer",
-    "Grid of glow shells that share one pointer highlight path",
-    "Nested glow inside a padded Surface using radius=\"auto\""
-  ],
-  "whenNotToUse": [
-    "Default decoration on many cards — memory cost is high; reserve for rare focal moments",
-    "Static or continuously animated borders — use Surface border or Beam instead",
-    "Accessible status or focus indication — glow is decorative only",
-    "As a replacement for Surface color/padding — compose Surface as children"
-  ],
-  "accessibility": [
-    "Root stays in the accessibility tree; highlight is decorative CSS only",
-    "Glow is not a focus or status indicator — consumer owns accessible names and state",
-    "Highlight hides under coarse pointer / no-hover and under prefers-reduced-motion"
-  ],
-  "antiPatterns": [
-    "Relying on Glow for keyboard focus visibility",
-    "Treating Glow as the visual card (color/padding) instead of composing Surface children",
-    "Setting overflow:hidden on an ancestor Surface when outer glow must remain visible",
-    "Expecting soft bloom Light layer — Glow is border-ring only",
-    "Using many Glow instances on one page — memory- and CPU-heavy",
-    "Expecting continuous spin — use Beam instead"
-  ],
-  "related": ["Surface", "Beam", "Shimmer", "ProgressiveBlur"],
-  "properties": {
-    "react": {
-      "radius": {
-        "description": "Sets corner radius from the Vira radius token scale, a per-corner [top-left, top-right, bottom-right, bottom-left] tuple (0 for square corners), or auto for concentric radii from the nearest ancestor Surface."
-      },
-      "proximity": {
-        "description": "Distance from the surface edge where the glow becomes fully active."
-      },
-      "spread": {
-        "description": "Angular width of the highlighted arc (degrees, used as a unitless CSS number).",
-        "refCss": "spread"
-      },
-      "opacity": {
-        "description": "Resting opacity of the glow when the pointer is outside proximity."
-      },
-      "fitContent": {
-        "description": "Shrinks the root to fit its content (`max-width: fit-content`)."
-      },
-      "borderWidth": {
-        "description": "Width of the masked glow border ring.",
-        "refCss": "border-width"
-      },
-      "borderColor": {
-        "description": "Color of the masked border ring under the highlight.",
-        "refCss": "border-color"
-      },
-      "borderOffset": {
-        "description": "Offset of the glow ring from the surface edge. Negative values place the ring outside.",
-        "refCss": "border-offset"
-      },
-      "glowColor": {
-        "description": "Overrides the glow gradient with a solid color or custom background value. Ignored when `rainbowColors` is true.",
-        "refCss": "color"
-      },
-      "globalHighlight": {
-        "description": "Shares the highlight gradient across cards via `background-attachment: fixed`. Forced off when `rainbowColors` is true."
-      },
-      "rainbowColors": {
-        "description": "Uses the multi-stop rainbow highlight gradient and disables global highlight attachment."
-      },
-      "angleLag": {
-        "description": "CSS transition duration in milliseconds for the pointer-driven starting angle. Soft follow by default; set 0 for instant snap.",
-        "refCss": "angle-lag"
-      }
-    },
-    "css": {
-      "starting-angle": {
-        "description": "Conic gradient start angle in degrees (unitless number). Pointer tracker writes a continuous unwrapped value."
-      },
-      "angle-lag": {
-        "description": "Transition duration for `--vui-glow-starting-angle`.",
-        "refReact": "angleLag"
-      },
-      "active-opacity": {
-        "description": "Current glow opacity from proximity tracking. Written by the shared tracker."
-      },
-      "spread": {
-        "description": "Angular width of the highlighted arc.",
-        "refReact": "spread"
-      },
-      "border-width": {
-        "description": "Masked glow border ring width.",
-        "refReact": "borderWidth"
-      },
-      "border-color": {
-        "description": "Masked border ring color under the highlight.",
-        "refReact": "borderColor"
-      },
-      "border-offset": {
-        "description": "Glow ring offset from the surface edge.",
-        "refReact": "borderOffset"
-      },
-      "color": {
-        "description": "Glow fill (solid color or gradient).",
-        "refReact": "glowColor"
-      }
-    }
-  }
-}