@oddkin/components 0.0.0-stage → 1.0.0-beta.1

package/agent/references/recipes/alert.md

@@ -0,0 +1,10 @@
+# Recipe alert
+
+Id `recipe:alert`.
+
+| Region | Helper |
+| --- | --- |
+| `alert` | row |
+| `end` | row |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/breadcrumbs.md

@@ -0,0 +1,9 @@
+# Recipe breadcrumbs
+
+Id `recipe:breadcrumbs`.
+
+| Region | Helper |
+| --- | --- |
+| `list` | row |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/calendar.md

@@ -0,0 +1,11 @@
+# Recipe calendar
+
+Id `recipe:calendar`.
+
+| Region | Helper |
+| --- | --- |
+| `calendar` | stack |
+| `header` | row |
+| `actions` | row |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/checkbox-group.md

@@ -0,0 +1,13 @@
+# Recipe checkbox-group
+
+Id `recipe:checkbox-group`.
+
+| Region | Helper |
+| --- | --- |
+| `options` | stack |
+
+## Variants
+
+- `orientation`: horizontal
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/color-picker.md

@@ -0,0 +1,14 @@
+# Recipe color-picker
+
+Id `recipe:color-picker`.
+
+| Region | Helper |
+| --- | --- |
+| `controls` | stack |
+| `entries` | row |
+| `entry` | stack |
+| `swatches` | stack |
+| `swatch-row` | row |
+| `actions` | row |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/combobox.md

@@ -0,0 +1,14 @@
+# Recipe combobox
+
+Id `recipe:combobox`.
+
+| Region | Helper |
+| --- | --- |
+| `chips` | row |
+| `count` | row |
+| `avatars` | row |
+| `review-bar` | row |
+| `panel` | stack |
+| `spread` | row |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/command-palette.md

@@ -0,0 +1,11 @@
+# Recipe command-palette
+
+Id `recipe:command-palette`.
+
+| Region | Helper |
+| --- | --- |
+| `search` | row |
+| `state` | row |
+| `footer` | row |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/dialog.md

@@ -0,0 +1,10 @@
+# Recipe dialog
+
+Id `recipe:dialog`.
+
+| Region | Helper |
+| --- | --- |
+| `header` | row |
+| `footer` | row |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/disclosure.md

@@ -0,0 +1,9 @@
+# Recipe disclosure
+
+Id `recipe:disclosure`.
+
+| Region | Helper |
+| --- | --- |
+| `summary` | row |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/empty-state.md

@@ -0,0 +1,10 @@
+# Recipe empty-state
+
+Id `recipe:empty-state`.
+
+| Region | Helper |
+| --- | --- |
+| `empty` | stack |
+| `footer` | row |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/file-input.md

@@ -0,0 +1,13 @@
+# Recipe file-input
+
+Id `recipe:file-input`.
+
+| Region | Helper |
+| --- | --- |
+| `surface` | stack |
+| `header` | row |
+| `file` | row |
+| `files` | stack |
+| `file-text` | stack |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/listbox.md

@@ -0,0 +1,9 @@
+# Recipe listbox
+
+Id `recipe:listbox`.
+
+| Region | Helper |
+| --- | --- |
+| `state` | row |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/pagination.md

@@ -0,0 +1,10 @@
+# Recipe pagination
+
+Id `recipe:pagination`.
+
+| Region | Helper |
+| --- | --- |
+| `pagination` | row |
+| `list` | row |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/progress.md

@@ -0,0 +1,9 @@
+# Recipe progress
+
+Id `recipe:progress`.
+
+| Region | Helper |
+| --- | --- |
+| `head` | row |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/radio-group.md

@@ -0,0 +1,14 @@
+# Recipe radio-group
+
+Id `recipe:radio-group`.
+
+| Region | Helper |
+| --- | --- |
+| `options` | stack |
+| `group` | stack |
+
+## Variants
+
+- `orientation`: horizontal
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/rating.md

@@ -0,0 +1,9 @@
+# Recipe rating
+
+Id `recipe:rating`.
+
+| Region | Helper |
+| --- | --- |
+| `row` | row |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/scroll-region.md

@@ -0,0 +1,9 @@
+# Recipe scroll-region
+
+Id `recipe:scroll-region`.
+
+| Region | Helper |
+| --- | --- |
+| `content` | stack |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/side-nav.md

@@ -0,0 +1,17 @@
+# Recipe side-nav
+
+Id `recipe:side-nav`. Container `side-nav`.
+
+| Region | Helper |
+| --- | --- |
+| `root` | stack |
+| `header` | row |
+| `content` | stack |
+| `group-items` | stack |
+| `footer` | row |
+
+## Conditions
+
+- `@container side-nav (min-inline-size: 40rem)`
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/slider.md

@@ -0,0 +1,10 @@
+# Recipe slider
+
+Id `recipe:slider`.
+
+| Region | Helper |
+| --- | --- |
+| `heading` | row |
+| `endpoints` | row |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/stat.md

@@ -0,0 +1,10 @@
+# Recipe stat
+
+Id `recipe:stat`.
+
+| Region | Helper |
+| --- | --- |
+| `base` | stack |
+| `context` | row |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/toolbar.md

@@ -0,0 +1,13 @@
+# Recipe toolbar
+
+Id `recipe:toolbar`.
+
+| Region | Helper |
+| --- | --- |
+| `toolbar` | row |
+
+## Variants
+
+- `orientation`: vertical
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/tree.md

@@ -0,0 +1,11 @@
+# Recipe tree
+
+Id `recipe:tree`.
+
+| Region | Helper |
+| --- | --- |
+| `root` | stack |
+| `tree` | stack |
+| `state` | row |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/recipes/validation-summary.md

@@ -0,0 +1,11 @@
+# Recipe validation-summary
+
+Id `recipe:validation-summary`.
+
+| Region | Helper |
+| --- | --- |
+| `summary` | stack |
+| `header` | row |
+| `list` | stack |
+
+Layers: recipe.base → recipe.variant → recipe.condition.

package/agent/references/stylesheets/avatar-group.md

@@ -0,0 +1,13 @@
+# Stylesheet avatar-group
+
+Id `stylesheet:avatar-group`. Import `@oddkin/components/css/avatar-group.css` once per document; its rules are in the `odd.components` layer.
+
+`.odd-avatar-group`: overlapping `odd-avatar` children, each ringed in the page colour; `.odd-avatar-group-more` on the last one for an overflow count ("+3").
+
+## Classes
+
+`.odd-avatar-group`, `.odd-avatar-group-more`
+
+## Tokens read
+
+`border.width.strong`, `color.action.default`, `color.canvas`, `color.text.on-action`, `space.xs`

package/agent/references/stylesheets/base.md

@@ -0,0 +1,9 @@
+# Stylesheet base
+
+Id `stylesheet:base`. Import `@oddkin/components/css/base.css` once per document; its rules are in the `odd.base` layer.
+
+Page defaults from the theme: text, surface, links, code, and the keyboard focus ring.
+
+## Tokens read
+
+`color.canvas`, `color.focus.ring`, `color.link`, `color.text.primary`, `focus.offset`, `focus.width`, `font.family.mono`, `type.body.family`, `type.body.letter-spacing`, `type.body.line-height`, `type.body.size`, `type.body.weight`

package/agent/references/stylesheets/button.md

@@ -0,0 +1,17 @@
+# Stylesheet button
+
+Id `stylesheet:button`. Import `@oddkin/components/css/button.css` once per document; its rules are in the `odd.components` layer.
+
+`<button class="odd-button">`: native buttons that look like `odd-button`, for forms that need native submit-button semantics. Indented one level, as the stylesheet writer expects of templates nested in this module.
+
+## Classes
+
+`.odd-button`
+
+## Variables an author may set
+
+`--odd-button-background`, `--odd-button-border-color`, `--odd-button-color`, `--odd-button-height`, `--odd-button-padding-inline`, `--odd-button-radius`
+
+## Tokens read
+
+`border.width.default`, `color.action.default`, `color.action.hover`, `color.action.pressed`, `color.border.strong`, `color.focus.ring`, `color.selection.background`, `color.selection.foreground`, `color.surface.default`, `color.surface.hover`, `color.surface.sunken`, `color.text.disabled`, `color.text.on-action`, `color.text.primary`, `control.gap`, `control.height.lg`, `control.height.md`, `control.height.sm`, `control.padding.inline.lg`, `control.padding.inline.md`, `control.padding.inline.sm`, `control.radius`, `focus.offset`, `focus.width`, `motion.duration.fast`, `motion.easing.standard`, `space.none`, `target.min`, `type.body.size`, `type.ui.family`, `type.ui.letter-spacing`, `type.ui.line-height`, `type.ui.size`, `type.ui.weight`

package/agent/references/stylesheets/description-list.md

@@ -0,0 +1,17 @@
+# Stylesheet description-list
+
+Id `stylesheet:description-list`. Import `@oddkin/components/css/description-list.css` once per document; its rules are in the `odd.components` layer.
+
+`dl.odd-description-list`: term and value pairs, each pair a `div` row (`<div><dt>…</dt> <dd>…</dd></div>`) divided by rules, with one stable term column for every row (at most `--odd-description-list-term-width`). The list is an inline-size container: below 36rem of its own width each term stacks above its value. A missing value is author text ("Not provided").
+
+## Classes
+
+`.odd-description-list`
+
+## Variables an author may set
+
+`--odd-description-list-term-width`
+
+## Tokens read
+
+`border.width.default`, `color.border.default`, `color.text.primary`, `color.text.secondary`, `space.md`, `space.xs`, `type.body.family`, `type.body.letter-spacing`, `type.body.line-height`, `type.body.size`, `type.body.weight`, `type.ui.family`, `type.ui.letter-spacing`, `type.ui.line-height`, `type.ui.size`, `type.ui.weight`

package/agent/references/stylesheets/divider.md

@@ -0,0 +1,13 @@
+# Stylesheet divider
+
+Id `stylesheet:divider`. Import `@oddkin/components/css/divider.css` once per document; its rules are in the `odd.components` layer.
+
+`hr.odd-divider`, or a labelled `.odd-divider` ("or") the author gives `role="separator"`.
+
+## Classes
+
+`.odd-divider`
+
+## Tokens read
+
+`border.width.default`, `color.border.default`, `color.text.secondary`, `space.md`, `space.sm`, `type.small.family`, `type.small.line-height`, `type.small.size`, `type.small.weight`

package/agent/references/stylesheets/field.md

@@ -0,0 +1,17 @@
+# Stylesheet field
+
+Id `stylesheet:field`. Import `@oddkin/components/css/field.css` once per document; its rules are in the `odd.components` layer.
+
+`.odd-field`: the field anatomy for native and third-party controls (`.odd-field-label`, `.odd-field-description`, `.odd-field-control`, `.odd-field-error`), generated from the rules of Oddkin's form controls, with the same `--odd-field-*` variables. The author wires `<label for>`, `aria-describedby`, and `aria-invalid`.
+
+## Classes
+
+`.odd-field`, `.odd-field-control`, `.odd-field-control-box`, `.odd-field-control-end`, `.odd-field-control-start`, `.odd-field-description`, `.odd-field-error`, `.odd-field-label`
+
+## Variables an author may set
+
+`--odd-field-background`, `--odd-field-border-color`, `--odd-field-height`, `--odd-field-radius`
+
+## Tokens read
+
+`border.width.default`, `color.border.strong`, `color.danger.foreground`, `color.surface.default`, `color.surface.hover`, `color.surface.sunken`, `color.text.disabled`, `color.text.primary`, `color.text.secondary`, `control.gap`, `control.height.md`, `control.padding.inline.md`, `control.radius`, `motion.duration.fast`, `motion.easing.standard`, `space.none`, `space.xs`, `target.min`, `type.body.family`, `type.body.line-height`, `type.body.size`, `type.small.line-height`, `type.small.size`, `type.ui.letter-spacing`, `type.ui.line-height`, `type.ui.size`, `type.ui.weight`

package/agent/references/stylesheets/kbd.md

@@ -0,0 +1,13 @@
+# Stylesheet kbd
+
+Id `stylesheet:kbd`. Import `@oddkin/components/css/kbd.css` once per document; its rules are in the `odd.components` layer.
+
+`kbd.odd-kbd`: a key cap that does not look clickable; sequences are adjacent keys.
+
+## Classes
+
+`.odd-kbd`
+
+## Tokens read
+
+`border.width.default`, `color.border.default`, `color.surface.default`, `color.text.secondary`, `radius.sm`, `space.2xs`, `type.code.family`, `type.code.line-height`, `type.code.size`, `type.code.weight`

package/agent/references/stylesheets/layout.md

@@ -0,0 +1,17 @@
+# Stylesheet layout
+
+Id `stylesheet:layout`. Import `@oddkin/components/css/layout.css` once per document; its rules are in the `odd.layout` layer.
+
+Page-author layout classes generated from the same helpers as recipes, with an override property per option (`--odd-stack-gap`, `--odd-split-side-width`, …) defaulting to the theme's layout roles: `.odd-stack` (`-tight`, `-loose`), `.odd-row` (`-between`), `.odd-cluster`, `.odd-grid`, `.odd-auto-grid` (`-fit`), `.odd-grid-stretch` (on either grid), `.odd-split` (`-end`), `.odd-box` (`-none`, `-roomy`), `.odd-center`, and `.odd-aspect-ratio`.
+
+## Classes
+
+`.odd-aspect-ratio`, `.odd-auto-grid`, `.odd-auto-grid-fit`, `.odd-box`, `.odd-box-none`, `.odd-box-roomy`, `.odd-center`, `.odd-cluster`, `.odd-grid`, `.odd-grid-stretch`, `.odd-row`, `.odd-row-between`, `.odd-split`, `.odd-split-end`, `.odd-stack`, `.odd-stack-loose`, `.odd-stack-tight`
+
+## Variables an author may set
+
+`--odd-aspect-ratio`, `--odd-auto-grid-gap`, `--odd-auto-grid-min`, `--odd-box-inset`, `--odd-cluster-gap`, `--odd-grid-columns`, `--odd-grid-gap`, `--odd-row-gap`, `--odd-split-gap`, `--odd-split-main-min`, `--odd-split-side-width`, `--odd-stack-gap`
+
+## Tokens read
+
+`layout.gap`, `layout.inset`, `layout.item-min`, `layout.main-min`, `layout.sidebar-width`, `space.lg`, `space.none`, `space.xl`, `space.xs`

package/agent/references/stylesheets/link.md

@@ -0,0 +1,13 @@
+# Stylesheet link
+
+Id `stylesheet:link`. Import `@oddkin/components/css/link.css` once per document; its rules are in the `odd.components` layer.
+
+`a.odd-link`: link colour, an underline on hover, and the shared keyboard focus ring.
+
+## Classes
+
+`.odd-link`
+
+## Tokens read
+
+`color.focus.ring`, `color.link`, `focus.offset`, `focus.width`, `radius.sm`, `type.ui.family`, `type.ui.line-height`, `type.ui.size`, `type.ui.weight`

package/agent/references/stylesheets/list.md

@@ -0,0 +1,13 @@
+# Stylesheet list
+
+Id `stylesheet:list`. Import `@oddkin/components/css/list.css` once per document; its rules are in the `odd.components` layer.
+
+`ul.odd-list` / `ol.odd-list`: rows on a bordered surface, divided by rules; `.odd-list-meta` for secondary text; the item with `aria-current` takes the selection colours.
+
+## Classes
+
+`.odd-list`, `.odd-list-meta`
+
+## Tokens read
+
+`border.width.default`, `border.width.strong`, `card.radius`, `color.border.default`, `color.selection.background`, `color.selection.foreground`, `color.surface.default`, `color.text.primary`, `color.text.secondary`, `space.md`, `space.sm`, `target.min`, `type.ui.family`, `type.ui.line-height`, `type.ui.size`, `type.ui.weight`

package/agent/references/stylesheets/reset.md

@@ -0,0 +1,5 @@
+# Stylesheet reset
+
+Id `stylesheet:reset`. Import `@oddkin/components/css/reset.css` once per document; its rules are in the `odd.reset` layer.
+
+A focused reset that keeps inherited typography, direction, and user preferences.

package/agent/references/stylesheets/stepper.md

@@ -0,0 +1,13 @@
+# Stylesheet stepper
+
+Id `stylesheet:stepper`. Import `@oddkin/components/css/stepper.css` once per document; its rules are in the `odd.components` layer.
+
+`ol.odd-stepper`: the steps of a task, each an `li` holding an `odd-status-marker` (a number, or complete or failed) and its words (`<div><a href>Name</a><span>Complete</span></div>`). The current step has `aria-current="step"` (on the `li` or its link) and the action colours; a failed step's words take the danger colour. Step links keep the text colour and their underline. Steps sit in a row and stack at 36rem of the list.
+
+## Classes
+
+`.odd-stepper`
+
+## Tokens read
+
+`color.action.default`, `color.danger.foreground`, `color.text.on-action`, `color.text.primary`, `color.text.secondary`, `space.2xs`, `space.sm`, `space.xs`, `type.small.family`, `type.small.line-height`, `type.small.size`, `type.small.weight`, `type.ui.family`, `type.ui.line-height`, `type.ui.size`, `type.ui.weight`

package/agent/references/stylesheets/table.md

@@ -0,0 +1,13 @@
+# Stylesheet table
+
+Id `stylesheet:table`. Import `@oddkin/components/css/table.css` once per document; its rules are in the `odd.components` layer.
+
+`table.odd-table`: a native table on a bordered surface; header cells on the sunken surface, rows divided by rules, `aria-sort` headers in the primary colour, and a row holding a checked checkbox in the selection colours.
+
+## Classes
+
+`.odd-table`
+
+## Tokens read
+
+`border.width.default`, `card.radius`, `color.border.default`, `color.selection.background`, `color.selection.foreground`, `color.surface.default`, `color.surface.sunken`, `color.text.primary`, `color.text.secondary`, `font.weight.medium`, `space.md`, `space.sm`, `space.xs`, `type.ui.family`, `type.ui.line-height`, `type.ui.size`, `type.ui.weight`

package/agent/references/stylesheets/timeline.md

@@ -0,0 +1,13 @@
+# Stylesheet timeline
+
+Id `stylesheet:timeline`. Import `@oddkin/components/css/timeline.css` once per document; its rules are in the `odd.components` layer.
+
+`ol.odd-timeline`: events newest first, each an `li` holding an `odd-status-marker` and its content (`<li><odd-status-marker status="complete"></odd-status-marker><div>title, time, detail</div></li>`). Markers sit on a rail joined by a connector; the title takes the UI role (the danger colour when the event failed), the time and detail the small secondary role.
+
+## Classes
+
+`.odd-timeline`
+
+## Tokens read
+
+`border.width.default`, `color.border.default`, `color.danger.foreground`, `color.danger.surface`, `color.selection.foreground`, `color.selection.surface`, `color.surface.sunken`, `color.text.primary`, `color.text.secondary`, `icon.size.lg`, `space.2xs`, `space.md`, `space.sm`, `type.small.family`, `type.small.line-height`, `type.small.size`, `type.small.weight`, `type.ui.family`, `type.ui.line-height`, `type.ui.size`, `type.ui.weight`

package/agent/references/stylesheets/typography.md

@@ -0,0 +1,13 @@
+# Stylesheet typography
+
+Id `stylesheet:typography`. Import `@oddkin/components/css/typography.css` once per document; its rules are in the `odd.components` layer.
+
+`.odd-type-<role>`: the eight type roles (`display`, `title`, `section`, `body`, `ui`, `small`, `eyebrow`, `code`) on any element; native `h1`–`h6` and `p` keep their semantics.
+
+## Classes
+
+`.odd-type-body`, `.odd-type-code`, `.odd-type-display`, `.odd-type-eyebrow`, `.odd-type-section`, `.odd-type-small`, `.odd-type-title`, `.odd-type-ui`
+
+## Tokens read
+
+`color.text.secondary`, `type.body.family`, `type.body.letter-spacing`, `type.body.line-height`, `type.body.size`, `type.body.weight`, `type.code.family`, `type.code.letter-spacing`, `type.code.line-height`, `type.code.size`, `type.code.weight`, `type.display.family`, `type.display.letter-spacing`, `type.display.line-height`, `type.display.size`, `type.display.weight`, `type.eyebrow.family`, `type.eyebrow.letter-spacing`, `type.eyebrow.line-height`, `type.eyebrow.size`, `type.eyebrow.weight`, `type.section.family`, `type.section.letter-spacing`, `type.section.line-height`, `type.section.size`, `type.section.weight`, `type.small.family`, `type.small.letter-spacing`, `type.small.line-height`, `type.small.size`, `type.small.weight`, `type.title.family`, `type.title.letter-spacing`, `type.title.line-height`, `type.title.size`, `type.title.weight`, `type.ui.family`, `type.ui.letter-spacing`, `type.ui.line-height`, `type.ui.size`, `type.ui.weight`

package/agent/references/stylesheets/utilities.md

@@ -0,0 +1,13 @@
+# Stylesheet utilities
+
+Id `stylesheet:utilities`. Import `@oddkin/components/css/utilities.css` once per document; its rules are in the `odd.utilities` layer.
+
+Page-level utilities with the same rules as the shadow-root primitives.
+
+## Classes
+
+`.odd-focus-ring`, `.odd-visually-hidden`
+
+## Tokens read
+
+`color.focus.ring`, `focus.offset`, `focus.width`

package/agent/references/tokens/component.md

@@ -0,0 +1,13 @@
+# Tokens: component
+
+Theme `default`, modes light, dark. From the theme's token inspection.
+
+| Token | CSS variable | Type | Value | Defined as | Origin |
+| --- | --- | --- | --- | --- | --- |
+| `card.padding` | `--odd-card-padding` | dimension | 1.5rem | alias of `layout.inset` | preset |
+| `card.radius` | `--odd-card-radius` | dimension | 0.75rem | alias of `radius.lg` | preset |
+| `navigation.indent` | `--odd-navigation-indent` | dimension | 1rem | alias of `space.md` | preset |
+| `navigation.item.gap` | `--odd-navigation-item-gap` | dimension | 0.5rem | alias of `space.xs` | preset |
+| `navigation.item.min-height` | `--odd-navigation-item-min-height` | dimension | 2.5rem | alias of `control.height.md` | preset |
+| `navigation.item.padding.block` | `--odd-navigation-item-padding-block` | dimension | 0.5rem | alias of `space.xs` | preset |
+| `navigation.item.padding.inline` | `--odd-navigation-item-padding-inline` | dimension | 0.75rem | alias of `space.sm` | preset |

package/agent/references/tokens/foundation.md

@@ -0,0 +1,73 @@
+# Tokens: foundation
+
+Theme `default`, modes light, dark. From the theme's token inspection.
+
+| Token | CSS variable | Type | Value | Defined as | Origin |
+| --- | --- | --- | --- | --- | --- |
+| `border.width.default` | `--odd-border-width-default` | dimension | 1px | 1px | preset |
+| `border.width.strong` | `--odd-border-width-strong` | dimension | 2px | 2px | preset |
+| `elevation.lg` | `--odd-elevation-lg` | shadow | light: 0 4px 8px rgb(0 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.14); dark: 0 4px 8px rgb(0 0 0 / 0.32), 0 12px 32px rgb(0 0 0 / 0.48) | light: 0 4px 8px rgb(0 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.14); dark: 0 4px 8px rgb(0 0 0 / 0.32), 0 12px 32px rgb(0 0 0 / 0.48) | preset |
+| `elevation.md` | `--odd-elevation-md` | shadow | light: 0 1px 2px rgb(0 0 0 / 0.12), 0 4px 12px rgb(0 0 0 / 0.08); dark: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.32) | light: 0 1px 2px rgb(0 0 0 / 0.12), 0 4px 12px rgb(0 0 0 / 0.08); dark: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.32) | preset |
+| `elevation.none` | `--odd-elevation-none` | shadow | none | none | preset |
+| `elevation.sm` | `--odd-elevation-sm` | shadow | light: 0 1px 2px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.08); dark: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.3) | light: 0 1px 2px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.08); dark: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.3) | preset |
+| `elevation.xl` | `--odd-elevation-xl` | shadow | light: 0 8px 16px rgb(0 0 0 / 0.1), 0 24px 64px rgb(0 0 0 / 0.2); dark: 0 8px 16px rgb(0 0 0 / 0.4), 0 24px 64px rgb(0 0 0 / 0.6) | light: 0 8px 16px rgb(0 0 0 / 0.1), 0 24px 64px rgb(0 0 0 / 0.2); dark: 0 8px 16px rgb(0 0 0 / 0.4), 0 24px 64px rgb(0 0 0 / 0.6) | preset |
+| `focus.offset` | `--odd-focus-offset` | dimension | 2px | 2px | preset |
+| `focus.width` | `--odd-focus-width` | dimension | 2px | 2px | preset |
+| `font.family.display` | `--odd-font-family-display` | fontFamily | system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | alias of `font.family.sans` | preset |
+| `font.family.mono` | `--odd-font-family-mono` | fontFamily | ui-monospace, SFMono-Regular, Menlo, Consolas, monospace | ui-monospace, SFMono-Regular, Menlo, Consolas, monospace | preset |
+| `font.family.sans` | `--odd-font-family-sans` | fontFamily | system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | system-ui, -apple-system, "Segoe UI", Roboto, sans-serif | preset |
+| `font.size.2xl` | `--odd-font-size-2xl` | dimension | 1.5rem | 1.5rem | preset |
+| `font.size.3xl` | `--odd-font-size-3xl` | dimension | 1.875rem | 1.875rem | preset |
+| `font.size.4xl` | `--odd-font-size-4xl` | dimension | 2.25rem | 2.25rem | preset |
+| `font.size.lg` | `--odd-font-size-lg` | dimension | 1.125rem | 1.125rem | preset |
+| `font.size.md` | `--odd-font-size-md` | dimension | 1rem | 1rem | preset |
+| `font.size.sm` | `--odd-font-size-sm` | dimension | 0.875rem | 0.875rem | preset |
+| `font.size.xl` | `--odd-font-size-xl` | dimension | 1.25rem | 1.25rem | preset |
+| `font.size.xs` | `--odd-font-size-xs` | dimension | 0.75rem | 0.75rem | preset |
+| `font.weight.bold` | `--odd-font-weight-bold` | fontWeight | 700 | 700 | preset |
+| `font.weight.medium` | `--odd-font-weight-medium` | fontWeight | 500 | 500 | preset |
+| `font.weight.regular` | `--odd-font-weight-regular` | fontWeight | 400 | 400 | preset |
+| `font.weight.semibold` | `--odd-font-weight-semibold` | fontWeight | 600 | 600 | preset |
+| `icon.size.lg` | `--odd-icon-size-lg` | dimension | 1.5rem | 1.5rem | preset |
+| `icon.size.md` | `--odd-icon-size-md` | dimension | 1.25rem | 1.25rem | preset |
+| `icon.size.sm` | `--odd-icon-size-sm` | dimension | 1rem | 1rem | preset |
+| `letter-spacing.normal` | `--odd-letter-spacing-normal` | dimension | 0 | 0 | preset |
+| `letter-spacing.tight` | `--odd-letter-spacing-tight` | dimension | -0.025em | -0.025em | preset |
+| `letter-spacing.wide` | `--odd-letter-spacing-wide` | dimension | 0.05em | 0.05em | preset |
+| `line-height.none` | `--odd-line-height-none` | number | 1 | 1 | preset |
+| `line-height.normal` | `--odd-line-height-normal` | number | 1.5 | 1.5 | preset |
+| `line-height.relaxed` | `--odd-line-height-relaxed` | number | 1.625 | 1.625 | preset |
+| `line-height.snug` | `--odd-line-height-snug` | number | 1.375 | 1.375 | preset |
+| `line-height.tight` | `--odd-line-height-tight` | number | 1.25 | 1.25 | preset |
+| `motion.duration.fast` | `--odd-motion-duration-fast` | duration | 100ms | 100ms | preset |
+| `motion.duration.normal` | `--odd-motion-duration-normal` | duration | 200ms | 200ms | preset |
+| `motion.duration.slow` | `--odd-motion-duration-slow` | duration | 300ms | 300ms | preset |
+| `motion.duration.slower` | `--odd-motion-duration-slower` | duration | 500ms | 500ms | preset |
+| `motion.easing.enter` | `--odd-motion-easing-enter` | cubicBezier | cubic-bezier(0, 0, 0.2, 1) | cubic-bezier(0, 0, 0.2, 1) | preset |
+| `motion.easing.exit` | `--odd-motion-easing-exit` | cubicBezier | cubic-bezier(0.4, 0, 1, 1) | cubic-bezier(0.4, 0, 1, 1) | preset |
+| `motion.easing.linear` | `--odd-motion-easing-linear` | cubicBezier | cubic-bezier(0, 0, 1, 1) | cubic-bezier(0, 0, 1, 1) | preset |
+| `motion.easing.standard` | `--odd-motion-easing-standard` | cubicBezier | cubic-bezier(0.4, 0, 0.2, 1) | cubic-bezier(0.4, 0, 0.2, 1) | preset |
+| `radius.2xl` | `--odd-radius-2xl` | dimension | 1.5rem | 1.5rem | preset |
+| `radius.full` | `--odd-radius-full` | dimension | 9999px | 9999px | preset |
+| `radius.lg` | `--odd-radius-lg` | dimension | 0.75rem | 0.75rem | preset |
+| `radius.md` | `--odd-radius-md` | dimension | 0.5rem | 0.5rem | preset |
+| `radius.none` | `--odd-radius-none` | dimension | 0 | 0 | preset |
+| `radius.sm` | `--odd-radius-sm` | dimension | 0.25rem | 0.25rem | preset |
+| `radius.xl` | `--odd-radius-xl` | dimension | 1rem | 1rem | preset |
+| `radius.xs` | `--odd-radius-xs` | dimension | 0.125rem | 0.125rem | preset |
+| `space.2xl` | `--odd-space-2xl` | dimension | 3rem | 3rem | preset |
+| `space.2xs` | `--odd-space-2xs` | dimension | 0.25rem | 0.25rem | preset |
+| `space.3xl` | `--odd-space-3xl` | dimension | 4rem | 4rem | preset |
+| `space.3xs` | `--odd-space-3xs` | dimension | 0.125rem | 0.125rem | preset |
+| `space.4xl` | `--odd-space-4xl` | dimension | 6rem | 6rem | preset |
+| `space.lg` | `--odd-space-lg` | dimension | 1.5rem | 1.5rem | preset |
+| `space.md` | `--odd-space-md` | dimension | 1rem | 1rem | preset |
+| `space.none` | `--odd-space-none` | dimension | 0 | 0 | preset |
+| `space.sm` | `--odd-space-sm` | dimension | 0.75rem | 0.75rem | preset |
+| `space.xl` | `--odd-space-xl` | dimension | 2rem | 2rem | preset |
+| `space.xs` | `--odd-space-xs` | dimension | 0.5rem | 0.5rem | preset |
+| `target.min` | `--odd-target-min` | dimension | 1.5rem | 1.5rem | preset |
+| `z-index.base` | `--odd-z-index-base` | number | 0 | 0 | preset |
+| `z-index.overlay` | `--odd-z-index-overlay` | number | 200 | 200 | preset |
+| `z-index.raised` | `--odd-z-index-raised` | number | 1 | 1 | preset |
+| `z-index.sticky` | `--odd-z-index-sticky` | number | 100 | 100 | preset |

package/agent/references/tokens/layout.md

@@ -0,0 +1,12 @@
+# Tokens: layout
+
+Theme `default`, modes light, dark. From the theme's token inspection.
+
+| Token | CSS variable | Type | Value | Defined as | Origin |
+| --- | --- | --- | --- | --- | --- |
+| `layout.gap` | `--odd-layout-gap` | dimension | 1rem | alias of `space.md` | preset |
+| `layout.inset` | `--odd-layout-inset` | dimension | 1.5rem | alias of `space.lg` | preset |
+| `layout.item-min` | `--odd-layout-item-min` | dimension | 16rem | 16rem | preset |
+| `layout.main-min` | `--odd-layout-main-min` | dimension | 20rem | 20rem | preset |
+| `layout.measure` | `--odd-layout-measure` | dimension | 40rem | 40rem | preset |
+| `layout.sidebar-width` | `--odd-layout-sidebar-width` | dimension | 16rem | 16rem | preset |