@karmo-co/drift-kit-reference 0.0.0-stage → 23.5.0

package/manifest/components/breadcrumb.md

@@ -0,0 +1,59 @@
+# Breadcrumb (`breadcrumb`)
+
+Where this page sits, and the way back up: the pages above it as quiet pills, its own name last.
+
+
+## Anatomy (HTML)
+
+```text
+nav.dk-component-breadcrumb[data-size]                (aria-label="Breadcrumb")
+  div.dk-component-breadcrumb__arrows                 (optional, role="group")
+    button.dk-component-breadcrumb__arrow             (aria-label="Back", then "Forward")
+  ol.dk-component-breadcrumb__list
+    li.dk-component-breadcrumb__item
+      a.dk-component-breadcrumb__link                 (a page above this one: a pill)
+        span.dk-component-breadcrumb__icon            (optional, aria-hidden)
+        span.dk-component-breadcrumb__label
+    li.dk-component-breadcrumb__item                  (a page with related pages)
+      span.dk-component-breadcrumb__pill              (the link and its chevron, one pill)
+        a.dk-component-breadcrumb__link | span.dk-component-breadcrumb__current
+        div.dk-component-dropdown.dk-component-breadcrumb__more
+          button.dk-component-breadcrumb__trigger.dk-component-dropdown__trigger
+          div.dk-component-menu.dk-component-dropdown__menu
+    li.dk-component-breadcrumb__item                  (the pages folded away)
+      div.dk-component-dropdown.dk-component-breadcrumb__more
+        button.dk-component-breadcrumb__ellipsis.dk-component-dropdown__trigger  ("3 more pages")
+        div.dk-component-menu.dk-component-dropdown__menu
+    li.dk-component-breadcrumb__item                  (the last)
+      span.dk-component-breadcrumb__current[aria-current="page"][title]
+```
+
+## Attributes
+
+| Attribute | Values the stylesheet styles |
+|---|---|
+| `data-size` | `small` |
+| `data-tone` | `error`, `information`, `primary`, `success`, `warning` |
+| `data-variant` | `inset`, `plain`, `raised` |
+
+## React
+
+```tsx
+import { Breadcrumb } from '@karmo-co/drift-kit/react';
+```
+
+| Prop | Type | Notes |
+|---|---|---|
+| `items` (required) | `BreadcrumbItem[]` | From the top down. The last is the current page. |
+| `size` | `'small' \| 'medium'` | medium when absent. |
+| `variant` | `'ghost' \| 'raised' \| 'plain' \| 'inset'` |  |
+| `linkAs` | `ElementType` | The element the ancestors render as: react-router's Link most often, so navigation stays client-side. Each item's own props go to it. |
+| `maxItems` | `number` | Past this many items the middle folds into a "..." pill that opens a Dropdown of them: the first, the "...", the last two. 4 when absent; 0 never folds. |
+| `onBack` | `() => void` | Back and forward arrows in their own pill to the left, shown when either handler is given. |
+| `onForward` | `() => void` |  |
+| `backDisabled` | `boolean` |  |
+| `forwardDisabled` | `boolean` |  |
+
+## Component tokens
+
+`--dk-component-breadcrumb-small-font-size`, `--dk-component-breadcrumb-small-line-height`, `--dk-component-breadcrumb-font-size`, `--dk-component-breadcrumb-line-height`, `--dk-component-breadcrumb-font-family`, `--dk-component-breadcrumb-gap`, `--dk-component-breadcrumb-separator-size`, `--dk-component-breadcrumb-separator-color`, `--dk-component-breadcrumb-container-separator-color`, `--dk-component-breadcrumb-back-icon`, `--dk-component-breadcrumb-link-color`, `--dk-component-breadcrumb-link-color-hover`, `--dk-component-breadcrumb-link-color-active`, `--dk-component-breadcrumb-link-surface-hover`, `--dk-component-breadcrumb-link-surface-active`, `--dk-component-breadcrumb-link-ring`, `--dk-component-breadcrumb-link-ring-width`, `--dk-component-breadcrumb-link-font-weight`, `--dk-component-breadcrumb-press-scale`, `--dk-component-breadcrumb-padding-block`, `--dk-component-breadcrumb-padding-inline`, `--dk-component-breadcrumb-small-padding-block`, `--dk-component-breadcrumb-small-padding-inline`, `--dk-component-breadcrumb-radius`, `--dk-component-breadcrumb-icon-size`, `--dk-component-breadcrumb-small-icon-size`, `--dk-component-breadcrumb-icon-gap`, `--dk-component-breadcrumb-icon-stroke`, `--dk-component-breadcrumb-small-icon-stroke`, `--dk-component-breadcrumb-chevron-size`, `--dk-component-breadcrumb-current-color`, `--dk-component-breadcrumb-current-icon-color`, `--dk-component-breadcrumb-current-font-weight`, `--dk-component-breadcrumb-current-max-width`, `--dk-component-breadcrumb-container-padding`, `--dk-component-breadcrumb-edged-padding-block`, `--dk-component-breadcrumb-edged-padding-inline`, `--dk-component-breadcrumb-container-radius`, `--dk-component-breadcrumb-container-border-width`, `--dk-component-breadcrumb-raised-surface`, `--dk-component-breadcrumb-raised-border`, `--dk-component-breadcrumb-raised-shadow`, `--dk-component-breadcrumb-plain-border`, `--dk-component-breadcrumb-inset-surface`, `--dk-component-breadcrumb-divider`, `--dk-component-breadcrumb-divider-space`, `--dk-component-breadcrumb-inset-divider`, `--dk-component-breadcrumb-inset-toned-color`, `--dk-component-breadcrumb-arrows-surface`, `--dk-component-breadcrumb-arrows-radius`, `--dk-component-breadcrumb-arrow-radius`, `--dk-component-breadcrumb-arrows-padding`, `--dk-component-breadcrumb-arrows-gap`, `--dk-component-breadcrumb-arrows-margin`, `--dk-component-breadcrumb-arrow-size`, `--dk-component-breadcrumb-arrow-icon-size`, `--dk-component-breadcrumb-small-arrow-size`, `--dk-component-breadcrumb-small-arrow-icon-size`, `--dk-component-breadcrumb-arrow-color`, `--dk-component-breadcrumb-arrow-color-hover`, `--dk-component-breadcrumb-arrow-surface-hover`, `--dk-component-breadcrumb-arrow-surface-active`, `--dk-component-breadcrumb-arrow-color-disabled`

package/manifest/components/button.md

@@ -0,0 +1,46 @@
+# Button (`button`)
+
+Two families: four semantic variants (default / accent / outline / subtle) across primary and error statuses, and a four-rung neutral emphasis ladder: ghost (no chrome until you touch it), subtle (a filled tint), plain (flat on its surface with an edge), raised (that edge lifted above it), plus inverse (maximum contrast, opposite-theme fill).
+
+
+## Anatomy (HTML)
+
+```text
+button.dk-component-button[data-variant="default|accent|outline|subtle|raised|plain|ghost|inverse"][data-status="primary|error|success|warning|information"]?[data-size="small|medium|large|extra-large"]?[data-full-width="true"]?[data-alignment]?
+  span.__icon?
+  span.__label
+  span.__spinner?             (while .is-loading)
+```
+
+## Attributes
+
+| Attribute | Values the stylesheet styles |
+|---|---|
+| `data-alignment` | `center`, `left`, `right` |
+| `data-full-width` | `true` |
+| `data-pseudo-class` | `active`, `focus`, `hover` |
+| `data-size` | `extra-large`, `large`, `medium`, `small` |
+| `data-status` | `error`, `information`, `primary`, `success`, `warning` |
+| `data-variant` | `accent`, `default`, `ghost`, `inverse`, `outline`, `plain`, `raised`, `subtle` |
+
+## React
+
+```tsx
+import { Button } from '@karmo-co/drift-kit/react';
+```
+
+| Prop | Type | Notes |
+|---|---|---|
+| `size` | `'small' \| 'medium' \| 'large' \| 'extra-large'` |  |
+| `fullWidth` | `boolean` |  |
+| `alignment` | `'left' \| 'center' \| 'right'` |  |
+| `iconLeft` | `ReactNode` |  |
+| `iconRight` | `ReactNode` |  |
+| `loading` | `boolean` |  |
+| `children` | `ReactNode` |  |
+| `variant` | `'default' \| 'outline' \| 'subtle' \| 'plain' \| 'accent' \| 'raised' \| 'inverse'` |  |
+| `status` | `'primary' \| 'error' \| 'success' \| 'warning' \| 'information'` |  |
+
+## Component tokens
+
+`--dk-component-button-font-family`, `--dk-component-button-font-weight`, `--dk-component-button-transition-duration`, `--dk-component-button-transform-scale-active`, `--dk-component-button-focus-ring-width`, `--dk-component-button-content-alignment`, `--dk-component-button-state-transition-duration`, `--dk-component-button-spinner-size`, `--dk-component-button-spinner-border-width`, `--dk-component-button-spinner-track`, `--dk-component-button-spinner-head`, `--dk-component-button-small-padding-y`, `--dk-component-button-small-padding-x`, `--dk-component-button-small-gap`, `--dk-component-button-small-border-radius`, `--dk-component-button-small-font-size`, `--dk-component-button-small-line-height`, `--dk-component-button-small-icon-size`, `--dk-component-button-medium-padding-y`, `--dk-component-button-medium-padding-x`, `--dk-component-button-medium-gap`, `--dk-component-button-medium-border-radius`, `--dk-component-button-medium-font-size`, `--dk-component-button-medium-line-height`, `--dk-component-button-medium-icon-size`, `--dk-component-button-large-padding-y`, `--dk-component-button-large-padding-x`, `--dk-component-button-large-gap`, `--dk-component-button-large-border-radius`, `--dk-component-button-large-font-size`, `--dk-component-button-large-line-height`, `--dk-component-button-large-icon-size`, `--dk-component-button-extra-large-padding-y`, `--dk-component-button-extra-large-padding-x`, `--dk-component-button-extra-large-gap`, `--dk-component-button-extra-large-border-radius`, `--dk-component-button-extra-large-font-size`, `--dk-component-button-extra-large-line-height`, `--dk-component-button-spin-duration`, `--dk-component-button-extra-large-icon-size`, `--dk-component-button-default-text-default`, `--dk-component-button-default-icon-default`, `--dk-component-button-default-surface-disabled`, `--dk-component-button-default-text-disabled`, `--dk-component-button-default-icon-disabled`, `--dk-component-button-default-primary-text-default`, `--dk-component-button-default-primary-icon-default`, `--dk-component-button-default-primary-surface-default`, `--dk-component-button-default-primary-surface-hover`, `--dk-component-button-default-primary-surface-focus`, `--dk-component-button-default-primary-surface-active`, `--dk-component-button-default-primary-ring`, `--dk-component-button-default-error-text-default`, `--dk-component-button-default-error-icon-default`, `--dk-component-button-default-error-surface-default`, `--dk-component-button-default-error-surface-hover`, `--dk-component-button-default-error-surface-focus`, `--dk-component-button-default-error-surface-active`, `--dk-component-button-default-error-ring`, `--dk-component-button-default-success-text-default`, `--dk-component-button-default-success-icon-default`, `--dk-component-button-default-success-surface-default`, `--dk-component-button-default-success-surface-hover`, `--dk-component-button-default-success-surface-focus`, `--dk-component-button-default-success-surface-active`, `--dk-component-button-default-success-ring`, `--dk-component-button-default-warning-text-default`, `--dk-component-button-default-warning-icon-default`, `--dk-component-button-default-warning-surface-default`, `--dk-component-button-default-warning-surface-hover`, `--dk-component-button-default-warning-surface-focus`, `--dk-component-button-default-warning-surface-active`, `--dk-component-button-default-warning-ring`, `--dk-component-button-default-information-text-default`, `--dk-component-button-default-information-icon-default`, `--dk-component-button-default-information-surface-default`, `--dk-component-button-default-information-surface-hover`, `--dk-component-button-default-information-surface-focus`, `--dk-component-button-default-information-surface-active`, `--dk-component-button-default-information-ring`, `--dk-component-button-accent-text-default`, `--dk-component-button-accent-icon-default`, `--dk-component-button-accent-transition-duration`, `--dk-component-button-accent-gradient-angle`, `--dk-component-button-accent-gradient-stop-1-position`, `--dk-component-button-accent-gradient-stop-2-position`, `--dk-component-button-accent-gradient-stop-3-position`, `--dk-component-button-accent-elevation-height`, `--dk-component-button-accent-elevation-height-small`, `--dk-component-button-accent-gradient-stop-1-disabled`, `--dk-component-button-accent-gradient-stop-2-disabled`, `--dk-component-button-accent-gradient-stop-3-disabled`, `--dk-component-button-accent-elevation-disabled`, `--dk-component-button-accent-text-shadow-disabled`, `--dk-component-button-accent-gradient-stop-1-default`, `--dk-component-button-accent-gradient-stop-2-default`, `--dk-component-button-accent-gradient-stop-3-default`, `--dk-component-button-accent-gradient-stop-1-hover`, `--dk-component-button-accent-gradient-stop-2-hover`, `--dk-component-button-accent-gradient-stop-3-hover`, `--dk-component-button-accent-elevation-default`, `--dk-component-button-accent-elevation-hover`, `--dk-component-button-accent-text-shadow`, `--dk-component-button-accent-ring`, `--dk-component-button-outline-surface-default`, `--dk-component-button-outline-border-width`, `--dk-component-button-outline-border-disabled`, `--dk-component-button-outline-text-disabled`, `--dk-component-button-outline-icon-disabled`, `--dk-component-button-outline-primary-border-default`, `--dk-component-button-outline-primary-border-hover`, `--dk-component-button-outline-primary-border-focus`, `--dk-component-button-outline-primary-border-active`, `--dk-component-button-outline-primary-surface-hover`, `--dk-component-button-outline-primary-surface-focus`, `--dk-component-button-outline-primary-surface-active`, `--dk-component-button-outline-primary-text-default`, `--dk-component-button-outline-primary-icon-default`, `--dk-component-button-outline-primary-text-hover`, `--dk-component-button-outline-primary-text-focus`, `--dk-component-button-outline-primary-text-active`, `--dk-component-button-outline-primary-icon-hover`, `--dk-component-button-outline-primary-icon-focus`, `--dk-component-button-outline-primary-icon-active`, `--dk-component-button-outline-primary-ring`, `--dk-component-button-outline-success-border-default`, `--dk-component-button-outline-success-border-hover`, `--dk-component-button-outline-success-border-focus`, `--dk-component-button-outline-success-border-active`, `--dk-component-button-outline-success-surface-hover`, `--dk-component-button-outline-success-surface-focus`, `--dk-component-button-outline-success-surface-active`, `--dk-component-button-outline-success-text-default`, `--dk-component-button-outline-success-icon-default`, `--dk-component-button-outline-success-text-hover`, `--dk-component-button-outline-success-text-focus`, `--dk-component-button-outline-success-text-active`, `--dk-component-button-outline-success-icon-hover`, `--dk-component-button-outline-success-icon-focus`, `--dk-component-button-outline-success-icon-active`, `--dk-component-button-outline-success-ring`, `--dk-component-button-outline-warning-border-default`, `--dk-component-button-outline-warning-border-hover`, `--dk-component-button-outline-warning-border-focus`, `--dk-component-button-outline-warning-border-active`, `--dk-component-button-outline-warning-surface-hover`, `--dk-component-button-outline-warning-surface-focus`, `--dk-component-button-outline-warning-surface-active`, `--dk-component-button-outline-warning-text-default`, `--dk-component-button-outline-warning-icon-default`, `--dk-component-button-outline-warning-text-hover`, `--dk-component-button-outline-warning-text-focus`, `--dk-component-button-outline-warning-text-active`, `--dk-component-button-outline-warning-icon-hover`, `--dk-component-button-outline-warning-icon-focus`, `--dk-component-button-outline-warning-icon-active`, `--dk-component-button-outline-warning-ring`, `--dk-component-button-outline-information-border-default`, `--dk-component-button-outline-information-border-hover`, `--dk-component-button-outline-information-border-focus`, `--dk-component-button-outline-information-border-active`, `--dk-component-button-outline-information-surface-hover`, `--dk-component-button-outline-information-surface-focus`, `--dk-component-button-outline-information-surface-active`, `--dk-component-button-outline-information-text-default`, `--dk-component-button-outline-information-icon-default`, `--dk-component-button-outline-information-text-hover`, `--dk-component-button-outline-information-text-focus`, `--dk-component-button-outline-information-text-active`, `--dk-component-button-outline-information-icon-hover`, `--dk-component-button-outline-information-icon-focus`, `--dk-component-button-outline-information-icon-active`, `--dk-component-button-outline-information-ring`, `--dk-component-button-outline-error-border-default`, `--dk-component-button-outline-error-border-hover`, `--dk-component-button-outline-error-border-focus`, `--dk-component-button-outline-error-border-active`, `--dk-component-button-outline-error-surface-hover`, `--dk-component-button-outline-error-surface-focus`, `--dk-component-button-outline-error-surface-active`, `--dk-component-button-outline-error-text-default`, `--dk-component-button-outline-error-icon-default`, `--dk-component-button-outline-error-text-hover`, `--dk-component-button-outline-error-text-focus`, `--dk-component-button-outline-error-text-active`, `--dk-component-button-outline-error-icon-hover`, `--dk-component-button-outline-error-icon-focus`, `--dk-component-button-outline-error-icon-active`, `--dk-component-button-outline-error-ring`, `--dk-component-button-subtle-surface-default`, `--dk-component-button-subtle-surface-hover`, `--dk-component-button-subtle-surface-focus`, `--dk-component-button-subtle-surface-active`, `--dk-component-button-subtle-text-default`, `--dk-component-button-subtle-text-hover`, `--dk-component-button-subtle-text-focus`, `--dk-component-button-subtle-text-active`, `--dk-component-button-subtle-icon-default`, `--dk-component-button-subtle-icon-hover`, `--dk-component-button-subtle-icon-focus`, `--dk-component-button-subtle-icon-active`, `--dk-component-button-subtle-ring`, `--dk-component-button-subtle-surface-disabled`, `--dk-component-button-subtle-text-disabled`, `--dk-component-button-subtle-icon-disabled`, `--dk-component-button-subtle-primary-surface-default`, `--dk-component-button-subtle-primary-surface-hover`, `--dk-component-button-subtle-primary-surface-focus`, `--dk-component-button-subtle-primary-surface-active`, `--dk-component-button-subtle-primary-text-default`, `--dk-component-button-subtle-primary-icon-default`, `--dk-component-button-subtle-primary-text-hover`, `--dk-component-button-subtle-primary-text-focus`, `--dk-component-button-subtle-primary-text-active`, `--dk-component-button-subtle-primary-icon-hover`, `--dk-component-button-subtle-primary-icon-focus`, `--dk-component-button-subtle-primary-icon-active`, `--dk-component-button-subtle-primary-ring`, `--dk-component-button-subtle-error-surface-default`, `--dk-component-button-subtle-error-surface-hover`, `--dk-component-button-subtle-error-surface-focus`, `--dk-component-button-subtle-error-surface-active`, `--dk-component-button-subtle-error-text-default`, `--dk-component-button-subtle-error-icon-default`, `--dk-component-button-subtle-error-text-hover`, `--dk-component-button-subtle-error-text-focus`, `--dk-component-button-subtle-error-text-active`, `--dk-component-button-subtle-error-icon-hover`, `--dk-component-button-subtle-error-icon-focus`, `--dk-component-button-subtle-error-icon-active`, `--dk-component-button-subtle-error-ring`, `--dk-component-button-raised-border-width`, `--dk-component-button-raised-shadow`, `--dk-component-button-raised-shadow-hover`, `--dk-component-button-raised-shadow-active`, `--dk-component-button-raised-surface-default`, `--dk-component-button-raised-surface-hover`, `--dk-component-button-raised-surface-focus`, `--dk-component-button-raised-surface-active`, `--dk-component-button-raised-border-default`, `--dk-component-button-raised-border-hover`, `--dk-component-button-raised-border-focus`, `--dk-component-button-raised-border-active`, `--dk-component-button-raised-text-default`, `--dk-component-button-raised-icon-default`, `--dk-component-button-raised-text-hover`, `--dk-component-button-raised-text-focus`, `--dk-component-button-raised-text-active`, `--dk-component-button-raised-icon-hover`, `--dk-component-button-raised-icon-focus`, `--dk-component-button-raised-icon-active`, `--dk-component-button-raised-ring`, `--dk-component-button-raised-surface-disabled`, `--dk-component-button-raised-border-disabled`, `--dk-component-button-raised-text-disabled`, `--dk-component-button-raised-icon-disabled`, `--dk-component-button-ghost-surface-default`, `--dk-component-button-ghost-surface-hover`, `--dk-component-button-ghost-surface-focus`, `--dk-component-button-ghost-surface-active`, `--dk-component-button-ghost-text-default`, `--dk-component-button-ghost-icon-default`, `--dk-component-button-ghost-text-hover`, `--dk-component-button-ghost-text-focus`, `--dk-component-button-ghost-text-active`, `--dk-component-button-ghost-icon-hover`, `--dk-component-button-ghost-icon-focus`, `--dk-component-button-ghost-icon-active`, `--dk-component-button-ghost-ring`, `--dk-component-button-ghost-surface-disabled`, `--dk-component-button-ghost-text-disabled`, `--dk-component-button-ghost-icon-disabled`, `--dk-component-button-plain-border-width`, `--dk-component-button-plain-surface-default`, `--dk-component-button-plain-surface-hover`, `--dk-component-button-plain-surface-focus`, `--dk-component-button-plain-surface-active`, `--dk-component-button-plain-border-default`, `--dk-component-button-plain-border-hover`, `--dk-component-button-plain-border-focus`, `--dk-component-button-plain-border-active`, `--dk-component-button-plain-text-default`, `--dk-component-button-plain-icon-default`, `--dk-component-button-plain-text-hover`, `--dk-component-button-plain-text-focus`, `--dk-component-button-plain-text-active`, `--dk-component-button-plain-icon-hover`, `--dk-component-button-plain-icon-focus`, `--dk-component-button-plain-icon-active`, `--dk-component-button-plain-ring`, `--dk-component-button-plain-surface-disabled`, `--dk-component-button-plain-border-disabled`, `--dk-component-button-plain-text-disabled`, `--dk-component-button-plain-icon-disabled`, `--dk-component-button-ghost-error-surface-default`, `--dk-component-button-ghost-error-surface-hover`, `--dk-component-button-ghost-error-surface-focus`, `--dk-component-button-ghost-error-surface-active`, `--dk-component-button-ghost-error-text-default`, `--dk-component-button-ghost-error-icon-default`, `--dk-component-button-ghost-error-text-hover`, `--dk-component-button-ghost-error-text-focus`, `--dk-component-button-ghost-error-text-active`, `--dk-component-button-ghost-error-icon-hover`, `--dk-component-button-ghost-error-icon-focus`, `--dk-component-button-ghost-error-icon-active`, `--dk-component-button-ghost-error-ring`, `--dk-component-button-plain-error-border-default`, `--dk-component-button-plain-error-border-hover`, `--dk-component-button-plain-error-border-focus`, `--dk-component-button-plain-error-border-active`, `--dk-component-button-plain-error-surface-hover`, `--dk-component-button-plain-error-surface-focus`, `--dk-component-button-plain-error-surface-active`, `--dk-component-button-plain-error-text-default`, `--dk-component-button-plain-error-icon-default`, `--dk-component-button-plain-error-text-hover`, `--dk-component-button-plain-error-text-focus`, `--dk-component-button-plain-error-text-active`, `--dk-component-button-plain-error-icon-hover`, `--dk-component-button-plain-error-icon-focus`, `--dk-component-button-plain-error-icon-active`, `--dk-component-button-plain-error-ring`, `--dk-component-button-inverse-surface-default`, `--dk-component-button-inverse-surface-hover`, `--dk-component-button-inverse-surface-focus`, `--dk-component-button-inverse-surface-active`, `--dk-component-button-inverse-text-default`, `--dk-component-button-inverse-icon-default`, `--dk-component-button-inverse-ring`, `--dk-component-button-inverse-surface-disabled`, `--dk-component-button-inverse-text-disabled`, `--dk-component-button-inverse-icon-disabled`

package/manifest/components/calendar.md

@@ -0,0 +1,69 @@
+# Calendar (`calendar`)
+
+A month grid for choosing a date or a range: the engine behind Date picker, also usable on its own.
+
+
+## Anatomy (HTML)
+
+```text
+div.dk-component-calendar[data-view="day|month|year"]?[data-size="small"]?[data-fluid]?
+  div.__header
+    div.__titles-clip > div.__titles > button.__title
+    div.__nav                   (previous, next)
+  div.__viewport
+    div.__months > div.__month
+      div.__grid > button.__cell[data-today]?[data-selected]?[data-in-range]?
+  div.__live                  (screen-reader announcements)
+```
+
+## Attributes
+
+| Attribute | Values the stylesheet styles |
+|---|---|
+| `data-band` | `end`, `middle`, `start` |
+| `data-columns` | `3`, `4` |
+| `data-fluid` | (present or absent) |
+| `data-in-range` | (present or absent) |
+| `data-pending` | (present or absent) |
+| `data-preview` | (present or absent) |
+| `data-preview-end` | (present or absent) |
+| `data-selected` | (present or absent) |
+| `data-show-cursor` | (present or absent) |
+| `data-size` | `small` |
+| `data-today` | (present or absent) |
+| `data-view` | `day` |
+
+## React
+
+```tsx
+import { Calendar } from '@karmo-co/drift-kit/react';
+```
+
+| Prop | Type | Notes |
+|---|---|---|
+| `mode` | `'single' \| 'range'` |  |
+| `months` | `1 \| 2` | Two months side by side, which a range wants on a desktop. |
+| `size` | `'small' \| 'medium'` |  |
+| `defaultValue` | `CalendarValue` | UNCONTROLLED, like Select: the grid is built by behaviour.js in DOM React does not own. defaultValue seeds it, onChange reports it. An ISO string, or { start, end } in range mode. |
+| `onChange` | `(value: CalendarValue) => void` |  |
+| `name` | `string` | Hidden inputs so the calendar posts in a form: name in single mode, startName and endName in range mode. |
+| `startName` | `string` |  |
+| `endName` | `string` |  |
+| `className` | `string` |  |
+| `id` | `string` |  |
+| `'aria-label'` | `string` |  |
+| `min` | `string` | The first and last days that may be chosen (ISO, YYYY-MM-DD). |
+| `max` | `string` |  |
+| `disabledDays` | `Array<'mon' \| 'tue' \| 'wed' \| 'thu' \| 'fri' \| 'sat' \| 'sun'>` | Weekdays that are never available: ['sat', 'sun']. |
+| `disabledDates` | `string[]` | Single days that are not available (ISO). |
+| `isDisabled` | `(iso: string) => boolean` | Anything else: return true to block a day. |
+| `minLength` | `number` | A range's length in days from its start, at least and at most. |
+| `maxLength` | `number` |  |
+| `rangeAllowsBlocked` | `boolean` | A range may contain blocked days (a report period over weekends). By default an unavailable day breaks a range, as it breaks a stay. |
+| `weekStart` | `0 \| 1` | 1 (Monday, the default) or 0 (Sunday). |
+| `locale` | `string` | Month and weekday names; typed dates stay day first. |
+| `today` | `string` | Pins "today", for tests and fixed demos. |
+
+## Component tokens
+
+`--dk-component-calendar-cell-size`, `--dk-component-calendar-small-cell-size`, `--dk-component-calendar-day-radius`, `--dk-component-calendar-month-gap`, `--dk-component-calendar-header-gap`, `--dk-component-calendar-nav-size`, `--dk-component-calendar-nav-icon-size`, `--dk-component-calendar-cells-gap`, `--dk-component-calendar-font-family`, `--dk-component-calendar-day-font-size`, `--dk-component-calendar-day-line-height`, `--dk-component-calendar-day-font-weight`, `--dk-component-calendar-title-font-size`, `--dk-component-calendar-title-line-height`, `--dk-component-calendar-title-font-weight`, `--dk-component-calendar-weekday-font-size`, `--dk-component-calendar-weekday-line-height`, `--dk-component-calendar-weekday-font-weight`, `--dk-component-calendar-text`, `--dk-component-calendar-weekday-color`, `--dk-component-calendar-nav-color`, `--dk-component-calendar-surface-hover`, `--dk-component-calendar-surface-active`, `--dk-component-calendar-today-surface`, `--dk-component-calendar-today-surface-hover`, `--dk-component-calendar-today-surface-active`, `--dk-component-calendar-today-text`, `--dk-component-calendar-today-font-weight`, `--dk-component-calendar-selected-surface`, `--dk-component-calendar-selected-surface-hover`, `--dk-component-calendar-selected-surface-active`, `--dk-component-calendar-selected-text`, `--dk-component-calendar-range-surface`, `--dk-component-calendar-range-surface-hover`, `--dk-component-calendar-range-surface-active`, `--dk-component-calendar-blocked-text`, `--dk-component-calendar-focus-ring`, `--dk-component-calendar-focus-ring-width`, `--dk-component-calendar-transition-duration`, `--dk-component-calendar-slide-duration`, `--dk-component-calendar-slide-easing`, `--dk-component-calendar-slide-travel`, `--dk-component-calendar-active-scale`

package/manifest/components/card.md

@@ -0,0 +1,71 @@
+# Card (`card`)
+
+A surface that goes somewhere: media over or beside a title, a subtitle and a row of meta, the whole card the target.
+
+
+## Anatomy (HTML)
+
+```text
+a|button|div.dk-component-card[data-variant][data-size][data-orientation]
+                              [data-media][data-tone][data-tone-fill][data-surface]
+  div.__media[data-ratio][data-fit]       an img, a video, an icon
+  div.__body
+    span.__eyebrow
+    h3.__title  (> a.__link, for a card with actions of its own)
+    p.__subtitle
+    div.__meta                            tags, a price, a date
+    div.__cta                             one full-width action
+  div.__corner[data-corner="start|end"]   a heart, a menu, over the top
+```
+
+## Attributes
+
+| Attribute | Values the stylesheet styles |
+|---|---|
+| `data-corner` | `end`, `start` |
+| `data-corners` | `hover` |
+| `data-fit` | `contain` |
+| `data-media` | `inset` |
+| `data-orientation` | `horizontal` |
+| `data-pseudo-class` | `active`, `focus`, `hover` |
+| `data-ratio` | `1/1`, `21/9`, `3/2`, `4/3` |
+| `data-size` | `large`, `small` |
+| `data-tone` | `none` |
+| `data-tone-fill` | `solid` |
+| `data-variant` | `flat`, `outline` |
+
+## React
+
+```tsx
+import { Card } from '@karmo-co/drift-kit/react';
+```
+
+| Prop | Type | Notes |
+|---|---|---|
+| `title` (required) | `ReactNode` |  |
+| `subtitle` | `ReactNode` |  |
+| `eyebrow` | `ReactNode` | Small caps above the title: a category, a status. |
+| `media` | `ReactNode` | The media zone: an image, a video, a cover, an icon. |
+| `mediaRatio` | `'16/9' \| '1/1' \| '4/3' \| '3/2' \| '21/9'` | The media's shape, 16/9 when absent; ignored beside the body. |
+| `mediaFit` | `'cover' \| 'contain'` | contain for a cut-out that must not crop (a vehicle photo). |
+| `mediaInset` | `boolean` | The media framed inside the padding instead of edge to edge. |
+| `meta` | `ReactNode` | At the foot of the body: tags, a price, a date. |
+| `cta` | `ReactNode` | One action, full width at the foot: a Button. |
+| `cornerStart` | `ReactNode` | Buttons floating over the top corners: a heart at the start, a menu (a Dropdown on an icon button) at the end. |
+| `cornerEnd` | `ReactNode` |  |
+| `corners` | `'always' \| 'hover'` | always (the default): the corners show, and on a card with no media they take a row above the words. hover: they fade in under the pointer or the focus, over whatever is there. |
+| `variant` | `'raised' \| 'outline' \| 'flat'` | raised (the default) lifts it, outline is a hairline, flat is its fill. |
+| `size` | `'small' \| 'medium' \| 'large'` |  |
+| `orientation` | `'vertical' \| 'horizontal'` | horizontal puts the media beside the body. |
+| `tone` | `'primary' \| 'success' \| 'warning' \| 'error' \| 'information' \| 'inverse'` | The kit's tone, level and fill, as Box takes them. |
+| `toneFill` | `'solid'` |  |
+| `surface` | `0 \| 1 \| 2` |  |
+| `selected` | `boolean` | The chosen one: aria-current on a link, aria-pressed on a button. |
+| `disabled` | `boolean` |  |
+| `href` | `string` | A card that goes somewhere is a link: the whole card is the target. |
+| `target` | `string` |  |
+| `titleAs` | `'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` | h3 when absent, as in the docs. Pick the level that fits the page. |
+
+## Component tokens
+
+`--dk-component-card-surface`, `--dk-component-card-surface-hover`, `--dk-component-card-surface-active`, `--dk-component-card-border-width`, `--dk-component-card-border`, `--dk-component-card-border-hover`, `--dk-component-card-border-active`, `--dk-component-card-outline-border`, `--dk-component-card-selected-border`, `--dk-component-card-selected-border-hover`, `--dk-component-card-selected-border-active`, `--dk-component-card-disabled-border`, `--dk-component-card-shadow`, `--dk-component-card-shadow-hover`, `--dk-component-card-scale-hover`, `--dk-component-card-scale-active`, `--dk-component-card-duration`, `--dk-component-card-easing`, `--dk-component-card-press-duration`, `--dk-component-card-press-easing`, `--dk-component-card-ring`, `--dk-component-card-ring-width`, `--dk-component-card-small-padding`, `--dk-component-card-padding`, `--dk-component-card-large-padding`, `--dk-component-card-small-radius`, `--dk-component-card-radius`, `--dk-component-card-large-radius`, `--dk-component-card-small-gap`, `--dk-component-card-gap`, `--dk-component-card-large-gap`, `--dk-component-card-font-family`, `--dk-component-card-title-color`, `--dk-component-card-title-font-weight`, `--dk-component-card-small-title-font-size`, `--dk-component-card-small-title-line-height`, `--dk-component-card-title-font-size`, `--dk-component-card-title-line-height`, `--dk-component-card-large-title-font-size`, `--dk-component-card-large-title-line-height`, `--dk-component-card-subtitle-color`, `--dk-component-card-small-subtitle-font-size`, `--dk-component-card-small-subtitle-line-height`, `--dk-component-card-subtitle-font-size`, `--dk-component-card-subtitle-line-height`, `--dk-component-card-large-subtitle-font-size`, `--dk-component-card-large-subtitle-line-height`, `--dk-component-card-subtitle-lines`, `--dk-component-card-eyebrow-color`, `--dk-component-card-eyebrow-font-size`, `--dk-component-card-eyebrow-line-height`, `--dk-component-card-eyebrow-letter-spacing`, `--dk-component-card-eyebrow-font-weight`, `--dk-component-card-disabled-text`, `--dk-component-card-disabled-icon`, `--dk-component-card-media-ratio`, `--dk-component-card-media-surface`, `--dk-component-card-media-surface-hover`, `--dk-component-card-media-surface-active`, `--dk-component-card-media-icon`, `--dk-component-card-small-icon-size`, `--dk-component-card-icon-size`, `--dk-component-card-large-icon-size`, `--dk-component-card-small-media-inline`, `--dk-component-card-media-inline`, `--dk-component-card-large-media-inline`, `--dk-component-card-media-inset-radius-min`, `--dk-component-card-line-color`, `--dk-component-card-cta-gap`

package/manifest/components/checkbox.md

@@ -0,0 +1,43 @@
+# Checkbox (`checkbox`)
+
+Any number of these, or none. A native input, a painted box, three sizes, and a mixed state for a parent row.
+
+
+## Anatomy (HTML)
+
+```text
+label.dk-component-checkbox[data-size]
+  span.dk-component-checkbox__box
+    input.dk-component-checkbox__input
+    span.dk-component-checkbox__indicator > svg
+  span.dk-component-checkbox__text
+    span.dk-component-checkbox__label
+    span.dk-component-checkbox__desc                                    
+```
+
+## Attributes
+
+| Attribute | Values the stylesheet styles |
+|---|---|
+| `data-orientation` | `horizontal` |
+| `data-pseudo-class` | `active`, `focus`, `hover` |
+| `data-size` | `large`, `small` |
+
+## React
+
+```tsx
+import { Checkbox } from '@karmo-co/drift-kit/react';
+```
+
+| Prop | Type | Notes |
+|---|---|---|
+| `indeterminate` | `boolean` | The mixed state. A DOM property rather than an attribute, so it cannot be set in markup and has to be assigned after render; this prop is the whole reason the component keeps a ref to the input. Setting it does not change `checked`, which is why both can be true at once and why the stylesheet paints indeterminate over checked. |
+| `label` | `ReactNode` | The visible label. OPTIONAL, unlike Input's, and the difference is real rather than an oversight: a select row checkbox in a table, a select all in its header and a radio in a comparison grid all take their name from the column or the row they sit in, and printing it beside every one of them would be noise. Omit it and the control collapses to its box. WITHOUT IT THE NAME HAS TO COME FROM SOMEWHERE ELSE. Pass aria-label, or aria-labelledby pointing at the heading that already says it. A checkbox with neither is a control a screen reader announces as "checkbox" and nothing more, which is the one shape this must not make easy. |
+| `size` | `'small' \| 'medium' \| 'large'` |  |
+| `description` | `ReactNode` | A second line under the label. The control's DESCRIPTION, never part of its name: it is rendered outside the <label>'s naming path and wired with aria-describedby, so a screen reader announces "Marketing emails, checkbox, not checked" and then the explanation, rather than running the two together. |
+| `invalid` | `boolean` | The invalid state. A boolean here rather than Input's message-carrying `error`, because a single checkbox's message belongs to the group it sits in: see CheckboxGroup and RadioGroup, which render it once for the set. |
+| `className` | `string` |  |
+
+## Component tokens
+
+`--dk-component-checkbox-size`, `--dk-component-checkbox-small-size`, `--dk-component-checkbox-large-size`, `--dk-component-checkbox-glyph-size`, `--dk-component-checkbox-small-glyph-size`, `--dk-component-checkbox-large-glyph-size`, `--dk-component-checkbox-glyph-stroke`, `--dk-component-checkbox-glyph-scale-active`, `--dk-component-checkbox-glyph-draw-length`, `--dk-component-checkbox-glyph-draw-delay`, `--dk-component-checkbox-glyph-draw-duration`, `--dk-component-checkbox-glyph-draw-easing`, `--dk-component-checkbox-glyph-undraw-duration`, `--dk-component-checkbox-glyph-undraw-easing`, `--dk-component-checkbox-dash-thickness`, `--dk-component-checkbox-small-dash-thickness`, `--dk-component-checkbox-large-dash-thickness`, `--dk-component-checkbox-radius`, `--dk-component-checkbox-border-width`, `--dk-component-checkbox-focus-ring-width`, `--dk-component-checkbox-gap`, `--dk-component-checkbox-text-gap`, `--dk-component-checkbox-group-gap`, `--dk-component-checkbox-group-legend-gap`, `--dk-component-checkbox-group-row-gap`, `--dk-component-checkbox-label-font-family`, `--dk-component-checkbox-label-font-size`, `--dk-component-checkbox-label-line-height`, `--dk-component-checkbox-small-label-font-size`, `--dk-component-checkbox-small-label-line-height`, `--dk-component-checkbox-large-label-font-size`, `--dk-component-checkbox-large-label-line-height`, `--dk-component-checkbox-label-font-weight`, `--dk-component-checkbox-desc-font-weight`, `--dk-component-checkbox-surface-default`, `--dk-component-checkbox-surface-hover`, `--dk-component-checkbox-surface-active`, `--dk-component-checkbox-border-default`, `--dk-component-checkbox-border-hover`, `--dk-component-checkbox-border-active`, `--dk-component-checkbox-checked-surface-default`, `--dk-component-checkbox-checked-surface-hover`, `--dk-component-checkbox-checked-surface-active`, `--dk-component-checkbox-checked-border-default`, `--dk-component-checkbox-checked-border-hover`, `--dk-component-checkbox-checked-border-active`, `--dk-component-checkbox-glyph`, `--dk-component-checkbox-halo`, `--dk-component-checkbox-halo-width`, `--dk-component-checkbox-ring`, `--dk-component-checkbox-focus-border`, `--dk-component-checkbox-error-border-default`, `--dk-component-checkbox-error-border-hover`, `--dk-component-checkbox-error-ring`, `--dk-component-checkbox-error-color`, `--dk-component-checkbox-disabled-surface`, `--dk-component-checkbox-disabled-border`, `--dk-component-checkbox-disabled-checked-surface`, `--dk-component-checkbox-disabled-checked-border`, `--dk-component-checkbox-disabled-glyph`, `--dk-component-checkbox-label-color`, `--dk-component-checkbox-desc-color`, `--dk-component-checkbox-disabled-label-color`, `--dk-component-checkbox-disabled-desc-color`, `--dk-component-checkbox-legend-color`

package/manifest/components/choice-card.md

@@ -0,0 +1,61 @@
+# Choice card (`choice-card`)
+
+A radio or checkbox drawn as a card, for a choice that needs room to explain itself: a payment frequency and its price, a saved card.
+
+
+## Anatomy (HTML)
+
+```text
+fieldset.dk-component-choice-card-group[data-legend="visible"]?
+  legend
+  label.dk-component-choice-card[data-size="small|large"]?
+    span.dk-component-radio|dk-component-checkbox   (the native input)
+    span.__media?
+    span.__body
+      span.__overline? + span.__title + span.__description? + span.__note?
+    span.__aside? > span.__value
+```
+
+## Attributes
+
+| Attribute | Values the stylesheet styles |
+|---|---|
+| `data-legend` | `visible` |
+| `data-show` | `checked` |
+| `data-size` | `large`, `small` |
+| `data-status` | `error` |
+| `data-tone` | `muted` |
+
+## React
+
+```tsx
+import { ChoiceCard } from '@karmo-co/drift-kit/react';
+```
+
+| Prop | Type | Notes |
+|---|---|---|
+| `type` | `'radio' \| 'checkbox'` | 'radio' or 'checkbox' make it a choice; omitted, the card is static: the same look, listed rather than chosen, never clickable. |
+| `name` | `string` |  |
+| `value` | `string` |  |
+| `checked` | `boolean` |  |
+| `defaultChecked` | `boolean` |  |
+| `onChange` | `(value: string, checked: boolean) => void` | The card's value, and whether it is now checked. |
+| `disabled` | `boolean` |  |
+| `required` | `boolean` |  |
+| `size` | `'small' \| 'medium' \| 'large'` | The title and the value's type: body-sm, body-md (default), body-lg. |
+| `tone` | `'muted'` | Static only: muted greys its words (what is due later). |
+| `media` | `ReactNode` | A logo up to 40px, or an <IconTile> (the line items' 48px tiles). |
+| `overline` | `ReactNode` | Above the title, as a saved card's "CREDIT CARD". |
+| `title` | `ReactNode` |  |
+| `caption` | `ReactNode` | The same overline type below the title, as a frequency's "PAY ONCE EVERY 7 DAYS". |
+| `description` | `ReactNode` |  |
+| `note` | `ReactNode` |  |
+| `noteStatus` | `'error'` | 'error' turns the note red ("Card expired"). |
+| `aside` | `ReactNode` | Right-aligned: a price (wrap it in .dk-component-choice-card__value) or a Tag. Anything with data-show="checked" shows only while chosen. |
+| `action` | `ChoiceCardAction` | An edit button beside the card, never inside it. Interactive cards only: a static card has nothing to edit. A disabled one shows no tooltip. |
+| `id` | `string` |  |
+| `className` | `string` |  |
+
+## Component tokens
+
+`--dk-component-choice-card-surface`, `--dk-component-choice-card-border`, `--dk-component-choice-card-border-width`, `--dk-component-choice-card-radius`, `--dk-component-choice-card-padding`, `--dk-component-choice-card-gap`, `--dk-component-choice-card-shadow`, `--dk-component-choice-card-shadow-hover`, `--dk-component-choice-card-focus-ring-width`, `--dk-component-choice-card-focus-ring`, `--dk-component-choice-card-scale-active`, `--dk-component-choice-card-scale-hover`, `--dk-component-choice-card-duration`, `--dk-component-choice-card-easing`, `--dk-component-choice-card-surface-hover`, `--dk-component-choice-card-surface-active`, `--dk-component-choice-card-border-hover`, `--dk-component-choice-card-border-active`, `--dk-component-choice-card-checked-border`, `--dk-component-choice-card-checked-border-hover`, `--dk-component-choice-card-checked-border-active`, `--dk-component-choice-card-disabled-border`, `--dk-component-choice-card-disabled-text`, `--dk-component-choice-card-font-family`, `--dk-component-choice-card-text`, `--dk-component-choice-card-text-muted`, `--dk-component-choice-card-title-font-weight`, `--dk-component-choice-card-small-title-font-size`, `--dk-component-choice-card-small-title-line-height`, `--dk-component-choice-card-title-font-size`, `--dk-component-choice-card-title-line-height`, `--dk-component-choice-card-large-title-font-size`, `--dk-component-choice-card-large-title-line-height`, `--dk-component-choice-card-overline-font-size`, `--dk-component-choice-card-overline-line-height`, `--dk-component-choice-card-overline-letter-spacing`, `--dk-component-choice-card-overline-font-weight`, `--dk-component-choice-card-overline-color`, `--dk-component-choice-card-description-font-size`, `--dk-component-choice-card-description-line-height`, `--dk-component-choice-card-description-color`, `--dk-component-choice-card-note-font-size`, `--dk-component-choice-card-note-line-height`, `--dk-component-choice-card-note-font-weight`, `--dk-component-choice-card-note-color`, `--dk-component-choice-card-note-error-color`, `--dk-component-choice-card-body-gap`, `--dk-component-choice-card-phone-padding`, `--dk-component-choice-card-phone-action-width`, `--dk-component-choice-card-media-size`, `--dk-component-choice-card-group-gap`, `--dk-component-choice-card-row-gap`, `--dk-component-choice-card-action-width`, `--dk-component-choice-card-action-icon-size`, `--dk-component-choice-card-action-icon`, `--dk-component-choice-card-action-icon-hover`, `--dk-component-choice-card-action-icon-active`, `--dk-component-choice-card-action-border-hover`, `--dk-component-choice-card-action-border-active`, `--dk-component-choice-card-action-disabled-icon`, `--dk-component-choice-card-action-disabled-border`

package/manifest/components/code-input.md

@@ -0,0 +1,56 @@
+# Code input (`code-input`)
+
+A verification code, a PIN, a voucher. N characters, one per box, with one real input underneath them.
+
+
+## Anatomy (HTML)
+
+```text
+div.dk-component-code-input[data-cells="4..8"][data-size="small|large"]?[data-mask]?
+  label.__label
+  div.__field
+    input.__control            (one real input)
+    span.__cells[aria-hidden] > span.__cell   (written by the runtime)
+  p.__caption? | p.__error?
+```
+
+## Attributes
+
+| Attribute | Values the stylesheet styles |
+|---|---|
+| `data-active` | (present or absent) |
+| `data-filled` | (present or absent) |
+| `data-group-end` | (present or absent) |
+| `data-mask` | (present or absent) |
+| `data-placeholder` | (present or absent) |
+| `data-ready` | (present or absent) |
+| `data-size` | `large`, `small` |
+
+## React
+
+```tsx
+import { CodeInput } from '@karmo-co/drift-kit/react';
+```
+
+| Prop | Type | Notes |
+|---|---|---|
+| `label` | `ReactNode` |  |
+| `size` | `'small' \| 'medium' \| 'large'` |  |
+| `caption` | `ReactNode` |  |
+| `error` | `ReactNode` | The message AND the invalid state, as on Input: one prop so the red boxes, the words and aria-invalid cannot disagree. |
+| `required` | `boolean` |  |
+| `cells` | `number` | How many characters the code has. Six unless said otherwise, which is what every code texted to a phone is. |
+| `group` | `number` | Extra air after every N cells, so six reads as "123 456". Presentation only: the value is one string either way. |
+| `mask` | `boolean` | Draws a dot instead of the character and switches the control to type="password", for a PIN rather than a code arriving in the clear. |
+| `charset` | `'numeric' \| 'alphanumeric'` | Numeric unless said otherwise. alphanumeric also upper-cases as you type, which is what a voucher code wants. |
+| `placeholder` | `boolean` | A character in every empty box, standing where a typed one will go. A BOOLEAN rather than the string the native attribute takes: the control is transparent and one string laid out across it would show through nothing, so the boxes draw it themselves, one glyph each. The glyph is a CSS token, --dk-component-code-input-placeholder-char, for a field that wants a dash rather than a zero. |
+| `defaultValue` | `string` | Read once. There is deliberately no `value` prop: behaviour.js sanitises what is typed and writes the result back to the control, and a controlled value would be overwritten on the next render, so the two would fight over every rejected character. Read the value from onChange, from the form, or from the ref. |
+| `onChange` | `(value: string) => void` |  |
+| `onComplete` | `(value: string) => void` | Fires the first time the code reaches its full length, which is the auto-submit every verification screen wants. |
+| `className` | `string` |  |
+| `'aria-label'` (required) | `string` |  |
+| `'aria-labelledby'` (required) | `string` |  |
+
+## Component tokens
+
+`--dk-component-code-input-gap`, `--dk-component-code-input-cell-size`, `--dk-component-code-input-small-cell-size`, `--dk-component-code-input-large-cell-size`, `--dk-component-code-input-cell-gap`, `--dk-component-code-input-group-gap`, `--dk-component-code-input-padding-inline`, `--dk-component-code-input-radius`, `--dk-component-code-input-border-width`, `--dk-component-code-input-focus-ring-width`, `--dk-component-code-input-caret-width`, `--dk-component-code-input-caret-height`, `--dk-component-code-input-caret-color`, `--dk-component-code-input-caret-blink-duration`, `--dk-component-code-input-placeholder-char`, `--dk-component-code-input-placeholder-color`, `--dk-component-code-input-mask-dot-size`, `--dk-component-code-input-font-family`, `--dk-component-code-input-font-weight`, `--dk-component-code-input-font-size`, `--dk-component-code-input-line-height`, `--dk-component-code-input-small-font-size`, `--dk-component-code-input-small-line-height`, `--dk-component-code-input-large-font-size`, `--dk-component-code-input-large-line-height`, `--dk-component-code-input-label-font-family`, `--dk-component-code-input-label-font-size`, `--dk-component-code-input-label-line-height`, `--dk-component-code-input-label-letter-spacing`, `--dk-component-code-input-label-font-weight`, `--dk-component-code-input-caption-font-size`, `--dk-component-code-input-caption-line-height`, `--dk-component-code-input-error-color`

package/manifest/components/date-picker.md

@@ -0,0 +1,66 @@
+# Date picker (`date-picker`)
+
+A date field you can type into or pick from a calendar: one date (a date of birth among them) or a start and an end.
+
+
+## Anatomy (HTML)
+
+```text
+div.dk-component-input.dk-component-date-picker[data-mode="range"]?[data-entry="calendar"]?[data-appearance="sentence"]?[data-min]?[data-value]?
+  label.dk-component-input__label
+  div.dk-component-input__field
+    input.__input              (typed, masked)
+    button.__button            (opens the calendar)
+  div.__popup                 (a dk-component-calendar, portalled; a sheet on a phone)
+```
+
+## Attributes
+
+| Attribute | Values the stylesheet styles |
+|---|---|
+| `data-appearance` | `sentence` |
+| `data-empty` | (present or absent) |
+| `data-layout` | `split` |
+| `data-mode` | `range` |
+| `data-proxy` | (present or absent) |
+| `data-sheet-open` | (present or absent) |
+
+## React
+
+```tsx
+import { DatePicker } from '@karmo-co/drift-kit/react';
+```
+
+| Prop | Type | Notes |
+|---|---|---|
+| `mode` | `'single' \| 'range'` | single (the default) or range. |
+| `calendar` | `boolean` | Single: the calendar button and its popup (true, the default). A date of birth turns it off: nobody should page back thirty years. |
+| `mobileEntry` | `'calendar' \| 'keyboard'` | On a phone, with a calendar: a tap opens it (calendar, the default) or types (keyboard), for a date people copy rather than choose. |
+| `entry` | `'typed' \| 'calendar'` | Single: 'calendar' makes the field a trigger reading "Thu 2 Oct 2025" that only opens the calendar; no typing. |
+| `appearance` | `'field' \| 'sentence'` | 'sentence' sets the trigger inside a line of text, the value in bold primary ("Every [Monday] of each week"). Name it with label (kept, not shown) or aria-label. |
+| `layout` | `'combined' \| 'split'` | A range in one field with a dash between its dates (combined, the default), or as two fields with their own labels (split). |
+| `label` | `ReactNode` | The field's label; for a split range, startLabel and endLabel. |
+| `startLabel` | `ReactNode` |  |
+| `endLabel` | `ReactNode` |  |
+| `caption` | `ReactNode` |  |
+| `error` | `ReactNode` | The message AND the invalid state, as on Input. It wins over the picker's own messages ("Enter a date as DD/MM/YYYY"). For a split range it shows under the end field. |
+| `size` | `'small' \| 'medium' \| 'large'` |  |
+| `months` | `1 \| 2` | Two months in the popup (a phone's sheet always shows one). |
+| `defaultValue` | `DatePickerValue` | UNCONTROLLED, like Select: an ISO string, or { start, end } for a range. onChange reports the same shape, in ISO. |
+| `onChange` | `(value: DatePickerValue) => void` |  |
+| `name` | `string` | Hidden inputs, so the picker posts ISO in a form. |
+| `startName` | `string` |  |
+| `endName` | `string` |  |
+| `minAge` | `number` | Single: the age bounds, checked when the date is complete. A date of birth is calendar={false}, minAge={18}, autoComplete="bday". |
+| `maxAge` | `number` |  |
+| `autoComplete` | `string` | The input's autocomplete: "bday" lets a browser fill a date of birth. |
+| `disabled` | `boolean` |  |
+| `readOnly` | `boolean` |  |
+| `required` | `boolean` |  |
+| `id` | `string` |  |
+| `className` | `string` |  |
+| `'aria-label'` | `string` |  |
+
+## Component tokens
+
+`--dk-component-date-picker-separator-color`, `--dk-component-date-picker-separator-size`, `--dk-component-date-picker-date-width`, `--dk-component-date-picker-split-gap`, `--dk-component-date-picker-split-min`, `--dk-component-date-picker-popup-padding`, `--dk-component-date-picker-placeholder-color`, `--dk-component-date-picker-chevron-color`, `--dk-component-date-picker-chevron-size`, `--dk-component-date-picker-sheet-cell-size`, `--dk-component-date-picker-sheet-cell-max`, `--dk-component-date-picker-sheet-inset`

package/manifest/components/day-of-month.md

@@ -0,0 +1,54 @@
+# Day of month (`day-of-month`)
+
+A day of the month, 1 to 31, chosen from a grid: the day a bill is paid.
+
+
+## Anatomy (HTML)
+
+```text
+div.dk-component-input.dk-component-day-of-month[data-mode="field|inline"]?[data-appearance="sentence"]?[data-value]?[data-disabled-days]?
+  span.dk-component-input__label
+  button.__trigger            (field mode: shows "14th")
+  div.__popup | div[role="radiogroup"]   (the day grid)
+```
+
+## Attributes
+
+| Attribute | Values the stylesheet styles |
+|---|---|
+| `data-appearance` | `sentence` |
+| `data-empty` | (present or absent) |
+| `data-mode` | `field` |
+| `data-sheet-open` | (present or absent) |
+
+## React
+
+```tsx
+import { DayOfMonth } from '@karmo-co/drift-kit/react';
+```
+
+| Prop | Type | Notes |
+|---|---|---|
+| `mode` | `'inline' \| 'field'` | inline (the default): the grid itself. field: an Input-style field whose trigger reads "14th" and opens the grid in the kit popup. |
+| `days` | `number` | How many days, 1 to 31 (31). |
+| `disabledDays` | `number[]` | Days that cannot be chosen, such as [29, 30, 31]. |
+| `disabledReason` | `string` | Why: the disabled days' tooltip and description. The caption is caption's own. |
+| `label` | `ReactNode` | Field: the label above it; inline, name it with aria-label instead. |
+| `caption` | `ReactNode` |  |
+| `error` | `ReactNode` | The message and the invalid state, as on Input. |
+| `placeholder` | `string` |  |
+| `size` | `'small' \| 'medium' \| 'large'` |  |
+| `appearance` | `'field' \| 'sentence'` | Field: 'sentence' sets the trigger inside a line of text, the value in bold primary ("Every [Monday] of each week"). Name it with label (kept, not shown) or aria-label. |
+| `defaultValue` | `number` | UNCONTROLLED, like Select: defaultValue seeds it, onChange reports it. |
+| `onChange` | `(value: number \| null) => void` |  |
+| `name` | `string` |  |
+| `required` | `boolean` |  |
+| `disabled` | `boolean` |  |
+| `locale` | `string` |  |
+| `id` | `string` |  |
+| `className` | `string` |  |
+| `'aria-label'` | `string` |  |
+
+## Component tokens
+
+`--dk-component-day-of-month-cell-size`, `--dk-component-day-of-month-gap`, `--dk-component-day-of-month-radius`, `--dk-component-day-of-month-popup-padding`, `--dk-component-day-of-month-sheet-cell-max`, `--dk-component-day-of-month-font-family`, `--dk-component-day-of-month-font-size`, `--dk-component-day-of-month-line-height`, `--dk-component-day-of-month-font-weight`, `--dk-component-day-of-month-text`, `--dk-component-day-of-month-surface-hover`, `--dk-component-day-of-month-surface-active`, `--dk-component-day-of-month-selected-surface`, `--dk-component-day-of-month-selected-surface-hover`, `--dk-component-day-of-month-selected-surface-active`, `--dk-component-day-of-month-selected-text`, `--dk-component-day-of-month-blocked-text`, `--dk-component-day-of-month-focus-ring`, `--dk-component-day-of-month-focus-ring-width`, `--dk-component-day-of-month-active-scale`, `--dk-component-day-of-month-transition-duration`, `--dk-component-day-of-month-placeholder-color`, `--dk-component-day-of-month-chevron-color`, `--dk-component-day-of-month-chevron-size`

package/manifest/components/detail-list.md

@@ -0,0 +1,37 @@
+# Detail list (`detail-list`)
+
+Rows of a glyph, a title and a line, with a value at the end, on a hairline between rows.
+
+
+## Anatomy (HTML)
+
+```text
+ul.dk-component-detail-list[data-size]
+  li.__row
+    span.__media?          usually an Icon tile; the author picks its size
+    div.__body
+      span.__title
+      span.__description?
+    div.__aside?           span.__value + span.__note?
+    div.__actions?         a Link, a Button, an icon button
+```
+
+## Attributes
+
+| Attribute | Values the stylesheet styles |
+|---|---|
+| `data-size` | `large`, `small` |
+
+## React
+
+```tsx
+import { DetailList } from '@karmo-co/drift-kit/react';
+```
+
+| Prop | Type | Notes |
+|---|---|---|
+| `size` | `'small' \| 'medium' \| 'large'` | Row padding, gap and type together. medium when absent. |
+
+## Component tokens
+
+`--dk-component-detail-list-divider`, `--dk-component-detail-list-divider-width`, `--dk-component-detail-list-font-family`, `--dk-component-detail-list-body-gap`, `--dk-component-detail-list-body-min-width`, `--dk-component-detail-list-actions-gap`, `--dk-component-detail-list-small-padding-block`, `--dk-component-detail-list-small-gap`, `--dk-component-detail-list-small-body-gap`, `--dk-component-detail-list-medium-padding-block`, `--dk-component-detail-list-medium-gap`, `--dk-component-detail-list-large-padding-block`, `--dk-component-detail-list-large-gap`, `--dk-component-detail-list-title-color`, `--dk-component-detail-list-title-font-weight`, `--dk-component-detail-list-title-font-size`, `--dk-component-detail-list-title-line-height`, `--dk-component-detail-list-description-color`, `--dk-component-detail-list-description-font-weight`, `--dk-component-detail-list-description-font-size`, `--dk-component-detail-list-description-line-height`, `--dk-component-detail-list-small-title-font-size`, `--dk-component-detail-list-small-title-line-height`, `--dk-component-detail-list-small-description-font-size`, `--dk-component-detail-list-small-description-line-height`, `--dk-component-detail-list-large-title-font-size`, `--dk-component-detail-list-large-title-line-height`, `--dk-component-detail-list-large-description-font-size`, `--dk-component-detail-list-large-description-line-height`, `--dk-component-detail-list-value-color`, `--dk-component-detail-list-value-font-weight`, `--dk-component-detail-list-note-color`, `--dk-component-detail-list-note-font-weight`