[ { "sourcePath": "src/badge.tsx", "notes": "A badge has no behaviour — no focus management, no keyboard handling, no\nstate. It is a label. So there is no primitive here, only `useRender` for the\nhost-element choice, which is a structural helper rather than a behavioural\none. That matters: layering two behavioural primitives on one node is what\nsilently broke menu triggers, and a badge should never be able to repeat it.\n\nColour comes from the same action tokens the button uses, so a brand gets a\nconsistent badge for free. Only the shape is a component token: GoodSync\nbadges are rectangles, NOKL badges are pills.", "tokensUsed": [ "--badge-height", "--badge-radius", "--button-danger-bg", "--button-danger-content", "--color-action-neutral", "--color-action-neutral-content", "--color-action-primary", "--color-action-primary-content", "--color-border", "--color-brand-accent", "--color-brand-accent-content", "--color-content", "--font-size-control-sm", "--motion-duration", "--motion-ease" ], "components": { "Badge": { "ownProps": { "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null } }, "variants": { "variant": [ "primary", "neutral", "outline", "destructive", "accent" ] } } } }, { "sourcePath": "src/button.tsx", "notes": "Every class below resolves through a token from `@sub-design/tokens`. The\ncomponent has no palette value, no radius literal, and no product name in it\n— swapping `data-brand` is the only thing that changes how it looks.\n\nColours use the `(color:--token)` form and widths the `(length:--token)`\nform: without the data-type hint Tailwind cannot tell what a bare custom\nproperty holds.", "tokensUsed": [ "--button-danger-bg", "--button-danger-bg-hover", "--button-danger-content", "--button-font-weight", "--button-ghost-hover-bg", "--button-ghost-hover-content", "--button-height-lg", "--button-height-md", "--button-height-sm", "--button-height-xs", "--button-padding-x-lg", "--button-padding-x-md", "--button-padding-x-sm", "--button-padding-x-xs", "--button-radius", "--color-action-neutral", "--color-action-neutral-content", "--color-action-neutral-hover", "--color-action-primary", "--color-action-primary-content", "--color-action-primary-hover", "--color-border", "--color-brand-accent", "--color-content", "--color-focus-ring", "--focus-ring-width", "--font-size-control", "--font-size-control-sm", "--motion-duration", "--motion-ease" ], "components": { "Button": { "ownProps": { "className": { "type": "string | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: ButtonState) => CSSProperties | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null } }, "variants": { "variant": [ "primary", "neutral", "outline", "ghost", "destructive", "link" ], "size": [ "xs", "sm", "md", "lg", "icon-xs", "icon-sm", "icon-md", "icon-lg" ] } } } }, { "sourcePath": "src/card.tsx", "notes": "Promoted from NOKL's local Card, 2026-08-11, after a property-by-property\ncomparison against Enterprise's own local Card found only four durable\ndifferences — radius, padding density, border mechanism, and footer\ntint — all expressible as component tokens, the same shape as\n--button-radius. See evolution-policy.md for the comparison this\nresolved and docs/design-system-adoption-audit.md item 9's sibling\nreasoning on Field for the same kind of call.\n\nTwo differences were not token-shaped and are fixed in source instead:\n\n - CardTitle renders a real `

`. NOKL's version rendered a `
` —\n invisible to a screen reader's heading navigation and to the document\n outline. Enterprise already had this right; NOKL did not.\n - The border resolves through `--color-border`, the same token Dialog\n and Menu already use, rather than NOKL's one-off\n `ring-1 ring-foreground/10`. That tint was never wired to any semantic\n token, so it drifted independently of every other bordered surface in\n the same theme.\n\nCardAction has no Enterprise equivalent and is kept anyway: an unused\npart costs nothing, and removing it would break NOKL's real call sites\nfor no reason.\n\n`gap-4`/padding are conditional on Card actually containing a\nCardHeader/CardContent/CardFooter (2026-08-12, found live in Enterprise's\nMSP dashboard). The property comparison that resolved Card never surfaced\nthis: NOKL's original Card *always* had them, because every one of NOKL's\nown call sites already composed with the sub-parts. Enterprise's original\nCard had neither — most of its 60 real call sites put raw, fully custom\nmarkup straight inside ``, flush against its border by design. Once\nunconditional, that raw markup got Card's padding *and* its own, stacked.\nGating both on whether Card has a card-header/card-content/card-footer\ndescendant reproduces the old zero-padding behavior for that shape\nexactly, while leaving every properly-composed Card (all of NOKL's, and\nEnterprise's own already-composed ones) unchanged.\n\nTwo things that don't work here, confirmed against the generated\nstylesheet rather than assumed from the story rendering alone:\n\n - One combined `has-[[data-slot=a],[data-slot=b],[data-slot=c]]`\n variant. It compiles with no build error, but Tailwind silently emits\n no CSS for it at all — three separate `has-data-[slot=X]` variants,\n one per slot, is the form that actually generates rules.\n - `py-(--card-padding)` on each of those three, overridden by a single\n `has-data-[slot=card-footer]:pb-0` for the footer case, and separately\n `has-[>img:first-child]:pt-0` for the leading-image case (mirroring how\n the original unconditional version worked). Both relied on the override\n being more specific than the `py-*`/unconditional rule they replaced —\n true before, but once the base rule is *also* behind a `:has()`\n variant, both sides have equal specificity, and Tailwind's own emission\n order (not source order) decides which one wins — confirmed one way by\n the footer case actually breaking, and confirmed the other way by the\n leading-image case still working, by luck, off the same tie.\n\n Split into `pt`/`pb` instead, with the exclusion folded into each\n trigger's own condition rather than fought afterward: `pb` fires on\n `has-data-[slot=card-header]:not-has-data-[slot=card-footer]` (and the\n same for card-content); `pt` fires on\n `has-data-[slot=card-header]:not-has-[>img:first-child]` (and the same\n for card-content/card-footer). Neither override rule exists anymore —\n there's nothing left for them to need to outrank.", "tokensUsed": [ "--card-footer-bg", "--card-padding", "--card-padding-sm", "--card-radius", "--color-border", "--color-content", "--color-content-muted", "--color-surface-raised", "--font-size-control", "--font-size-title", "--line-height-title" ], "components": { "Card": { "ownProps": {}, "variants": { "size": [ "default", "sm" ] } }, "CardHeader": { "ownProps": {}, "variants": {} }, "CardFooter": { "ownProps": {}, "variants": {} }, "CardTitle": { "ownProps": {}, "variants": {} }, "CardAction": { "ownProps": {}, "variants": {} }, "CardDescription": { "ownProps": {}, "variants": {} }, "CardContent": { "ownProps": {}, "variants": {} } } }, { "sourcePath": "src/checkbox.tsx", "notes": null, "tokensUsed": [ "--checkbox-radius", "--checkbox-size", "--color-action-danger", "--color-border", "--color-brand-accent", "--color-brand-accent-content", "--color-focus-ring", "--focus-ring-width", "--input-background", "--motion-duration", "--motion-ease" ], "components": { "Checkbox": { "ownProps": { "className": { "type": "string | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: CheckboxRootState) => CSSProperties | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null } }, "variants": {} } } }, { "sourcePath": "src/context-menu.tsx", "notes": "Context Menu shares the Menu popup parts and tokens. Only its root and\ntrigger differ: Base UI opens them at the pointer on right click or long\npress rather than anchoring them to a button.", "tokensUsed": [], "components": { "ContextMenu": { "ownProps": {}, "variants": {} }, "ContextMenuTrigger": { "ownProps": { "className": { "type": "string | ((state: ContextMenuTriggerState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: ContextMenuTriggerState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "MenuContent": { "ownProps": { "container": { "type": "HTMLElement | ShadowRoot | RefObject | null | undefined", "required": false, "default": null }, "className": { "type": "string | ((state: MenuPopupState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: MenuPopupState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "MenuGroup": { "ownProps": { "className": { "type": "string | ((state: MenuGroupState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: MenuGroupState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "MenuItem": { "ownProps": { "className": { "type": "string | ((state: MenuItemState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: MenuItemState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": { "variant": [ "default", "destructive" ] } }, "MenuLabel": { "ownProps": { "className": { "type": "string | ((state: MenuGroupLabelState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: MenuGroupLabelState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "MenuSeparator": { "ownProps": { "className": { "type": "string | ((state: SeparatorState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: SeparatorState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "MenuShortcut": { "ownProps": {}, "variants": {} } } }, { "sourcePath": "src/dialog.tsx", "notes": "Base UI stays behind this file. Products import `Dialog` from the platform,\nnever `@base-ui/react/dialog`, so the engine can be replaced later without\ntouching product code.\n\nWhat the primitive already does correctly, and this wrapper must not undo:\nmoving focus into the popup on open, restoring it to the trigger on close,\nEscape, outside-click, and marking the background inert. None of that is\nre-implemented here — the wrapper only supplies styling and slots.", "tokensUsed": [ "--color-backdrop", "--color-border", "--color-content", "--color-content-muted", "--color-surface-raised", "--dialog-radius", "--font-size-control", "--font-size-title", "--line-height-control", "--motion-duration", "--motion-ease" ], "components": { "Dialog": { "ownProps": {}, "variants": {} }, "DialogTrigger": { "ownProps": { "className": { "type": "string | ((state: DialogTriggerState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: DialogTriggerState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "DialogPortal": { "ownProps": { "className": { "type": "string | ((state: DialogPortalState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: DialogPortalState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "DialogClose": { "ownProps": { "className": { "type": "string | ((state: DialogCloseState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: DialogCloseState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "DialogOverlay": { "ownProps": { "className": { "type": "string | ((state: DialogBackdropState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: DialogBackdropState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "DialogContent": { "ownProps": { "container": { "type": "HTMLElement | ShadowRoot | RefObject | null | undefined", "required": false, "default": null }, "className": { "type": "string | ((state: DialogPopupState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: DialogPopupState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "DialogHeader": { "ownProps": {}, "variants": {} }, "DialogFooter": { "ownProps": {}, "variants": {} }, "DialogTitle": { "ownProps": { "className": { "type": "string | ((state: DialogTitleState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: DialogTitleState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "DialogDescription": { "ownProps": { "className": { "type": "string | ((state: DialogDescriptionState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: DialogDescriptionState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} } } }, { "sourcePath": "src/input.tsx", "notes": null, "tokensUsed": [ "--color-action-danger", "--color-border", "--color-brand-accent", "--color-content", "--color-content-muted", "--color-focus-ring", "--focus-ring-width", "--font-size-control", "--font-size-control-coarse", "--input-background", "--input-disabled-background", "--input-height-lg", "--input-height-md", "--input-height-sm", "--input-padding-x-lg", "--input-padding-x-md", "--input-padding-x-sm", "--input-radius", "--motion-duration", "--motion-ease" ], "components": { "Input": { "ownProps": { "className": { "type": "string | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: InputState) => CSSProperties | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null } }, "variants": { "size": [ "sm", "md", "lg" ] } } } }, { "sourcePath": "src/label.tsx", "notes": "Like Badge, a label has no behaviour worth a primitive: the association with\na control is `htmlFor` plus wrapping, which the browser already implements,\nso there is nothing for a library to manage. `useRender` is here for the\nhost-element choice only.\n\nBase UI does ship `Field.Label`, and that is the right component once a Field\nexists — it wires ids and `aria-describedby` to the field's control. It is\nnot a drop-in for a standalone label, because it needs a `Field.Root` around\nit to have anything to point at. Consumers today use labels standalone, so\nthis stays standalone and Field can absorb it later.\n\nThe one thing that is not free: double-clicking a label selects the text\naround it, because the click also lands on the associated control and the\nsecond click extends the selection. Every label implementation guards this\nthe same way, so it belongs here rather than in each consumer.", "tokensUsed": [ "--font-size-control" ], "components": { "Label": { "ownProps": { "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null } }, "variants": {} } } }, { "sourcePath": "src/menu.tsx", "notes": "Base UI stays behind this file, as with Dialog.\n\nThe primitive owns everything hard about a menu: roving focus across items,\narrow-key navigation, typeahead, Escape, outside-click, focus return to the\ntrigger, and anchored positioning. This wrapper adds styling and slots only.\n\n`container` is here for the same reason it is on DialogContent — a portal\nre-parents to document.body and would otherwise escape the `data-brand`\nsubtree that supplies the theme.", "tokensUsed": [ "--color-action-danger", "--color-action-neutral", "--color-border", "--color-content", "--color-content-muted", "--color-surface-raised", "--font-size-control", "--font-size-control-sm", "--line-height-control-sm", "--menu-item-height", "--menu-item-radius", "--menu-radius", "--motion-duration", "--motion-ease" ], "components": { "Menu": { "ownProps": {}, "variants": {} }, "MenuTrigger": { "ownProps": { "className": { "type": "string | ((state: MenuTriggerState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: MenuTriggerState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "MenuGroup": { "ownProps": { "className": { "type": "string | ((state: MenuGroupState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: MenuGroupState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "MenuContent": { "ownProps": { "container": { "type": "HTMLElement | ShadowRoot | RefObject | null | undefined", "required": false, "default": null }, "className": { "type": "string | ((state: MenuPopupState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: MenuPopupState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "MenuItem": { "ownProps": { "className": { "type": "string | ((state: MenuItemState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: MenuItemState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": { "variant": [ "default", "destructive" ] } }, "MenuLabel": { "ownProps": { "className": { "type": "string | ((state: MenuGroupLabelState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: MenuGroupLabelState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "MenuSeparator": { "ownProps": { "className": { "type": "string | ((state: SeparatorState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: SeparatorState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "MenuShortcut": { "ownProps": {}, "variants": {} } } }, { "sourcePath": "src/notice.tsx", "notes": "Promoted 2026-08-11 after NOKL's `Notice` and Enterprise's `Alert` were\ncompared property by property (see evolution-policy.md). The colors were\nalready solved — NOKL already bridges to the platform's\n`--color-feedback-*` contract (0.11.0+); Enterprise duplicated matching\nraw HSL values locally instead of reaching for it. The actual blocker was\nthe composition model: NOKL took `icon`/`title`/`action` as props on one\nelement, Enterprise composed `\n` as a compound component.\n\nEnterprise's shape won — it already matches how Card and Button compose\n(icon as a child, not a prop) — extended with a `NoticeAction` slot\nEnterprise never had, since 3 of NOKL's real call sites pass one.\n\nTwo Enterprise bugs fixed in the merge, not carried over:\n - `success` was missing entirely, despite the token already existing.\n - `destructive` didn't tint its surface or border (`bg-card`, default\n border) while `warning`/etc. did, despite `--destructive-muted`/\n `--destructive-border` already existing unused in Enterprise's own\n globals.css.\n\n`role=\"alert\"` over NOKL's `role=\"note\"`: `alert` only triggers screen-\nreader announcement on dynamic insertion, so it's a no-op for the many\ncall sites already present at first paint, and a real signal for the ones\nthat appear conditionally (a retry banner after an error, a warning after\na fetch resolves). `note` is a landmark role with no live-region behavior\nat all — pure downside.\n\nColored variants leave `NoticeDescription` without its own text color, so\nit inherits the variant's content color from the root by ordinary CSS\ncascade — the same \"title and body share one tone\" behavior NOKL's\nversion already shipped and called AA-checked in its own comment, rather\nthan introducing an unverified muted shade. `neutral` is the one variant\nthat mutes the description, matching Card's own title/description split.", "tokensUsed": [ "--color-border", "--color-content", "--color-content-muted", "--color-feedback-destructive-border", "--color-feedback-destructive-content", "--color-feedback-destructive-surface", "--color-feedback-info-border", "--color-feedback-info-content", "--color-feedback-info-surface", "--color-feedback-success-border", "--color-feedback-success-content", "--color-feedback-success-surface", "--color-feedback-warning-border", "--color-feedback-warning-content", "--color-feedback-warning-surface", "--color-surface-raised", "--font-size-control" ], "components": { "Notice": { "ownProps": {}, "variants": { "variant": [ "neutral", "success", "warning", "info", "destructive" ] } }, "NoticeTitle": { "ownProps": {}, "variants": {} }, "NoticeDescription": { "ownProps": {}, "variants": {} }, "NoticeAction": { "ownProps": {}, "variants": {} } } }, { "sourcePath": "src/radio-group.tsx", "notes": "The primitive owns roving focus, arrow-key selection and the hidden native\ninputs that make the group submit with a form.\n\nSelected uses the brand accent, matching Checkbox and Switch.", "tokensUsed": [ "--color-border", "--color-brand-accent", "--color-focus-ring", "--focus-ring-width", "--input-background", "--motion-duration", "--motion-ease", "--radio-size" ], "components": { "RadioGroup": { "ownProps": { "className": { "type": "string | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: RadioGroupState) => CSSProperties | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null } }, "variants": {} }, "RadioGroupItem": { "ownProps": { "className": { "type": "string | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: RadioRootState) => CSSProperties | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null } }, "variants": {} } } }, { "sourcePath": "src/select.tsx", "notes": "Inline rather than imported, matching Checkbox. The package takes no icon\ndependency, so a product's icon set and version stay entirely its own.", "tokensUsed": [ "--color-action-danger", "--color-action-neutral", "--color-border", "--color-brand-accent", "--color-content", "--color-content-muted", "--color-focus-ring", "--color-surface-raised", "--focus-ring-width", "--font-size-control", "--font-size-control-sm", "--input-background", "--input-height-lg", "--input-height-md", "--input-height-sm", "--input-padding-x-lg", "--input-padding-x-md", "--input-padding-x-sm", "--input-radius", "--line-height-control-sm", "--menu-item-height", "--menu-item-radius", "--menu-radius", "--motion-duration", "--motion-ease" ], "components": { "Select": { "ownProps": { "value": { "type": "string | null | undefined", "required": false, "default": null }, "defaultValue": { "type": "string | null | undefined", "required": false, "default": null }, "onValueChange": { "type": "((value: T) => void) | undefined", "required": false, "default": null } }, "variants": {} }, "SelectGroup": { "ownProps": { "className": { "type": "string | ((state: SelectGroupState) => string | undefined) | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: SelectGroupState) => CSSProperties | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null } }, "variants": {} }, "SelectValue": { "ownProps": { "className": { "type": "string | ((state: SelectValueState) => string | undefined) | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: SelectValueState) => CSSProperties | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null } }, "variants": {} }, "SelectTrigger": { "ownProps": { "className": { "type": "string | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: SelectTriggerState) => CSSProperties | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null } }, "variants": { "size": [ "sm", "md", "lg" ] } }, "SelectContent": { "ownProps": { "className": { "type": "string | undefined", "required": false, "default": null }, "container": { "type": "HTMLElement | ShadowRoot | RefObject | null | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: SelectPopupState) => CSSProperties | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null } }, "variants": {} }, "SelectItem": { "ownProps": { "className": { "type": "string | ((state: SelectItemState) => string | undefined) | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: SelectItemState) => CSSProperties | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null } }, "variants": {} }, "SelectLabel": { "ownProps": { "className": { "type": "string | ((state: SelectGroupLabelState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: SelectGroupLabelState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "SelectSeparator": { "ownProps": { "className": { "type": "string | ((state: SeparatorState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: SeparatorState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} } } }, { "sourcePath": "src/separator.tsx", "notes": "Base UI's Separator is always `role=\"separator\"` with an `aria-orientation`;\nit has no notion of a decorative one. Radix has `decorative`, and both\nGoodSync products were on its default of `true` — so every divider they ship\nis currently hidden from assistive technology, and every divider NOKL ships\nis announced. Seventeen call sites across the two products, not one of which\npasses the prop or separates anything a screen reader needs told about: they\nare lines between sections of a settings page.\n\nSo `decorative` defaults to true here. A divider that carries no meaning\nshould not be read out, and making that the default is what keeps the common\ncase correct without every call site opting in. `decorative={false}` gets Base\nUI's semantics back for the rare separator that genuinely delimits content.\n\nThe override works because Base UI puts its own role and aria-orientation\nfirst in the props it merges, so anything passed in wins. A contract test\npins that, since it is the kind of ordering a dependency can quietly change.", "tokensUsed": [ "--color-border" ], "components": { "Separator": { "ownProps": { "decorative": { "type": "boolean | undefined", "required": false, "default": "true" }, "className": { "type": "string | ((state: SeparatorState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: SeparatorState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} } } }, { "sourcePath": "src/sheet.tsx", "notes": "A Sheet is a Dialog pinned to an edge, and it is built on the same primitive\nfor that reason — focus capture, focus return, Escape, outside click, and\ninerting the background are the modal behaviours a drawer needs too, and none\nof them are re-implemented here.\n\nBoth products already ship exactly this anatomy under exactly these names, so\nthe shape is theirs rather than invented: ten parts, a `side` defaulting to\nright, three-quarter width capped at `sm` on wider viewports, and a close\nbutton in the top corner.", "tokensUsed": [ "--color-backdrop", "--color-border", "--color-content", "--color-content-muted", "--color-surface-raised", "--font-size-control", "--font-size-title", "--line-height-control", "--motion-duration", "--motion-ease" ], "components": { "Sheet": { "ownProps": {}, "variants": {} }, "SheetTrigger": { "ownProps": { "className": { "type": "string | ((state: DialogTriggerState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: DialogTriggerState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "SheetPortal": { "ownProps": { "className": { "type": "string | ((state: DialogPortalState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: DialogPortalState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "SheetClose": { "ownProps": { "className": { "type": "string | ((state: DialogCloseState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: DialogCloseState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "SheetOverlay": { "ownProps": { "className": { "type": "string | ((state: DialogBackdropState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: DialogBackdropState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "SheetContent": { "ownProps": { "showCloseButton": { "type": "boolean | undefined", "required": false, "default": "true" }, "container": { "type": "HTMLElement | ShadowRoot | RefObject | null | undefined", "required": false, "default": null }, "className": { "type": "string | ((state: DialogPopupState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: DialogPopupState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": { "side": [ "top", "right", "bottom", "left" ] } }, "SheetHeader": { "ownProps": {}, "variants": {} }, "SheetFooter": { "ownProps": {}, "variants": {} }, "SheetTitle": { "ownProps": { "className": { "type": "string | ((state: DialogTitleState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: DialogTitleState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "SheetDescription": { "ownProps": { "className": { "type": "string | ((state: DialogDescriptionState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: DialogDescriptionState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} } } }, { "sourcePath": "src/skeleton.tsx", "notes": "A skeleton is a placeholder for content that has not arrived. It has no\nbehaviour and no state, so as with Badge there is no primitive here, only\n`useRender` for the host-element choice. That choice is load-bearing rather\nthan cosmetic: the two products that want this are both loading file lists,\nand a placeholder inside a table has to be able to render as a `td` or a\n`tr`. A `div` nested in a table row is markup the browser silently hoists\nout of the table, which is exactly the layout jump a skeleton exists to\nprevent.\n\nFill reuses `--color-action-neutral`, the tonal grey the quiet button and\ndisabled input already share, so a brand gets a placeholder in its own\nneutral for free — NOKL's is warm, and that falls out of the theme rather\nthan a second colour role invented here. Only the shape is a component\ntoken, matching Badge: GoodSync placeholders are rectangles, NOKL's are\npills.\n\n`aria-hidden` is the default rather than each caller's job. Twenty\nplaceholders read aloud are twenty announcements of nothing; the container\nthat owns the loading state is what should carry the accessible name. Same\ndivision of labour findings.md #17 and #21 reached for icon-only controls,\narrived at from the other direction. A caller that really does want one\nannounced can still pass `aria-hidden={false}`, since caller props win.\n\nThe pulse is the one place a `motion-reduce:` variant is written by hand\ninstead of being left to the token layer. Reduced motion there resolves\ndurations to 1ms, which is right for a transition and wrong for a looping\nanimation — a 1ms pulse is a strobe. It has to stop, not hurry. Tailwind's\nown 2s rhythm is used as-is: no brand has asked for a different one, and the\nevolution policy warns off a token per CSS property.", "tokensUsed": [ "--color-action-neutral", "--skeleton-radius" ], "components": { "Skeleton": { "ownProps": { "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null } }, "variants": {} } } }, { "sourcePath": "src/status-mark.tsx", "notes": "Proposed in roadmap.md's \"Status is encoded by hue alone\": a mark that\ncarries state in colour and nothing else is invisible under deuteranopia —\nchecked directly, the three light-theme feedback dots resolve to\nindistinguishable greenish-browns for roughly 6% of men. `--warning` is\ncorrect as tuned (an ink colour, AA as text); the fix moves meaning onto\nthe glyph and lets hue stay reinforcement rather than the only signal.\n\nDeliberately not a `Badge`: this has no text slot and no host-element\nchoice, because it is one thing — an icon carrying a feedback state. A\nbare icon has no accessible name by default (findings.md #17 and #21,\nthe same lesson twice for Tooltip and Select), so `label` is required\nrather than optional; there is no safe default to fall back to.\n\nWarning gets its own shape (triangle) rather than joining the circular\nfamily success/info/destructive share, matching the universal caution-sign\nconvention roadmap.md named directly (\"triangle for caution, exclamation\nfor critical, check for healthy\").", "tokensUsed": [ "--color-feedback-destructive-content", "--color-feedback-info-content", "--color-feedback-success-content", "--color-feedback-warning-content" ], "components": { "StatusMark": { "ownProps": { "label": { "type": "string", "required": true, "default": null } }, "variants": { "variant": [ "success", "warning", "info", "destructive" ] } } } }, { "sourcePath": "src/switch.tsx", "notes": "The primitive is load-bearing here: a switch is a checkbox to assistive\ntechnology but a track-and-thumb to everyone else, and Base UI supplies the\nrole, the hidden native input for forms, and keyboard toggling.\n\nChecked uses the brand accent rather than the primary action, matching the\ncheckbox — this is a selection state, and the two tokens differ in GoodSync.", "tokensUsed": [ "--color-action-neutral", "--color-brand-accent", "--color-focus-ring", "--color-surface", "--focus-ring-width", "--motion-duration", "--motion-ease", "--switch-height", "--switch-hit-area-min", "--switch-thumb-size", "--switch-width" ], "components": { "Switch": { "ownProps": { "className": { "type": "string | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: SwitchRootState) => CSSProperties | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null } }, "variants": {} } } }, { "sourcePath": "src/tabs.tsx", "notes": "The primitive owns arrow-key navigation, the roving tabindex and the\ntab/panel wiring that keeps a screen reader in step.\n\nNote the state attribute: Tabs marks the active tab with `data-active`,\nwhile Checkbox and Radio use `data-selected`. Base UI is not uniform here, so\nstyling one from memory of another silently produces a tab row where nothing\never looks selected.\n\nTwo variants because the products genuinely differ in kind, not degree:\n`line` is an underlined row that sits on a page rule, `solid` is a filled\nsegmented control. Neither is a brand default — a product picks per surface.", "tokensUsed": [ "--color-action-neutral", "--color-action-neutral-content", "--color-border", "--color-content", "--color-content-muted", "--color-focus-ring", "--color-surface", "--focus-ring-width", "--font-size-control", "--motion-duration", "--motion-ease", "--tabs-item-radius", "--tabs-radius" ], "components": { "Tabs": { "ownProps": { "className": { "type": "string | ((state: TabsRootState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: TabsRootState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "TabsList": { "ownProps": { "className": { "type": "string | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: TabsListState) => CSSProperties | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null } }, "variants": { "variant": [ "line", "solid" ] } }, "TabsTrigger": { "ownProps": { "className": { "type": "string | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: TabsTabState) => CSSProperties | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null } }, "variants": { "variant": [ "line", "solid" ] } }, "TabsContent": { "ownProps": { "className": { "type": "string | ((state: TabsPanelState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: TabsPanelState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} } } }, { "sourcePath": "src/textarea.tsx", "notes": "No Base UI primitive: a textarea has no behaviour a library needs to manage,\nonly the same surface an Input has. So this deliberately reuses the Input\ncontract — `--input-radius`, `--input-background`, `--input-padding-x-md`,\n`--input-disabled-background` — rather than growing a `--textarea-*` set.\n\nThat is not a shortcut. Both products already draw the two the same way and\ndiffer from each other in exactly the three places those tokens cover:\nEnterprise is `rounded-md` with a filled background, NOKL is `rounded-lg` and\ntransparent, and their horizontal padding differs by 2px. A field and a\nmulti-line field that disagreed on radius within one product would be the\nbug, not the feature.\n\nHeight is where it stops borrowing. Input has fixed step heights; a textarea\ngrows, so it takes a minimum and `field-sizing-content`, which lets the\nbrowser size it to what has been typed. Both products already ship that.", "tokensUsed": [ "--color-action-danger", "--color-border", "--color-brand-accent", "--color-content", "--color-content-muted", "--color-focus-ring", "--focus-ring-width", "--font-size-control", "--font-size-control-coarse", "--input-background", "--input-disabled-background", "--input-padding-x-md", "--input-radius", "--motion-duration", "--motion-ease" ], "components": { "Textarea": { "ownProps": {}, "variants": {} } } }, { "sourcePath": "src/tooltip.tsx", "notes": "Base UI owns hover/focus detection, Escape, delay groups, anchored\npositioning, and dismissal. In 1.6 it intentionally treats Tooltip as a\nvisual-only hint: it adds neither `role=\"tooltip\"` nor `aria-describedby`,\nso every trigger still needs its own accessible name. The platform wrapper\nsupplies stable composition/ref contracts and themed presentation only.", "tokensUsed": [ "--color-content", "--color-surface", "--font-size-control-sm", "--motion-duration", "--motion-ease", "--tooltip-max-width", "--tooltip-radius" ], "components": { "Tooltip": { "ownProps": {}, "variants": {} }, "TooltipContent": { "ownProps": { "container": { "type": "HTMLElement | ShadowRoot | RefObject | null | undefined", "required": false, "default": null }, "className": { "type": "string | ((state: TooltipPopupState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: TooltipPopupState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} }, "TooltipProvider": { "ownProps": {}, "variants": {} }, "TooltipTrigger": { "ownProps": { "className": { "type": "string | ((state: TooltipTriggerState) => string | undefined) | undefined", "required": false, "default": null }, "render": { "type": "ReactElement> | ComponentRenderFn | undefined", "required": false, "default": null }, "style": { "type": "CSSProperties | ((state: TooltipTriggerState) => CSSProperties | undefined) | undefined", "required": false, "default": null } }, "variants": {} } } } ]