@karmo-co/drift-kit-reference 23.12.0 → 23.13.0

package/manifest/components/box.md

@@ -45,6 +45,8 @@ import { Box } from '@karmo-co/drift-kit/react';
 | `surface` | `0 \| 1 \| 2` | A step down the neutral ladder (1 or 2), so a flat box reads as a panel. |
 | `title` | `ReactNode` | A header: the title wires aria-labelledby, so the box is a named region. |
 | `titleAs` | `'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` |  |
+| `titleId` | `string` | The title's id, when something in the box is named by it (a Day of month's grid). Generated otherwise. |
+| `heading` | `ReactNode` | A heading of your own in place of title and description: a Section heading, for one with an icon. Name the box with aria-labelledby. |
 | `description` | `ReactNode` |  |
 | `actions` | `ReactNode` | Beside the title: a Link, a Button, an icon button. |
 | `headerBand` | `boolean` | The header as a band: edge to edge, one level up from the box's surface (a level-2 box steps back to 1), with a hairline under it. On a toned box it carries the tone too. |

package/manifest/components/button.md

@@ -38,7 +38,7 @@ import { Button } from '@karmo-co/drift-kit/react';
 | `iconRight` | `ReactNode` |  |
 | `loading` | `boolean` |  |
 | `children` | `ReactNode` |  |
-| `variant` | `'default' \| 'outline' \| 'subtle' \| 'plain' \| 'accent' \| 'raised' \| 'inverse'` |  |
+| `variant` | `'default' \| 'outline' \| 'subtle' \| 'plain' \| 'ghost' \| 'accent' \| 'raised' \| 'inverse'` |  |
 | `status` | `'primary' \| 'error' \| 'success' \| 'warning' \| 'information'` |  |
 
 ## Component tokens

package/manifest/components/choice-card.md

@@ -51,7 +51,8 @@ import { ChoiceCard } from '@karmo-co/drift-kit/react';
 | `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. |
+| `amount` | `ReactNode` | Right-aligned: an amount, drawn as the card's __value. |
+| `aside` | `ReactNode` | Right-aligned too, after the amount: 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` |  |

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

@@ -48,6 +48,7 @@ import { DayOfMonth } from '@karmo-co/drift-kit/react';
 | `id` | `string` |  |
 | `className` | `string` |  |
 | `'aria-label'` | `string` |  |
+| `'aria-labelledby'` | `string` | Inline: named by a heading already on the page, as a Box's title. |
 
 ## Component tokens
 

package/manifest/components/heading.md

@@ -6,7 +6,7 @@ The outline tier: Inter, six responsive sizes, nine weights, the Body colour gra
 ## Anatomy (HTML)
 
 ```text
-h1..h6.dk-component-heading[data-size="xxlarge|xlarge|large|medium|small|xsmall"]?[data-weight]?[data-color]?[data-align]?
+h1..h6.dk-component-heading[data-size="xxlarge|xlarge|large|medium|small|xsmall|xxsmall"]?[data-weight]?[data-color]?[data-align]?
 ```
 
 ## Attributes

package/manifest/components/input.md

@@ -43,6 +43,7 @@ import { Input } from '@karmo-co/drift-kit/react';
 | `caption` | `ReactNode` | Helper text. Rendered as the control's DESCRIPTION, never part of its name: the markup this component replaces wrapped label, field and caption in one <label>, which made every Karmo field announce its helper text as part of its own name. |
 | `error` | `ReactNode` | The message AND the invalid state. One prop so the border, the words and aria-invalid cannot disagree; there is deliberately no separate `invalid` boolean. |
 | `leading` | `ReactNode` |  |
+| `leadingControl` | `boolean` | The leading slot holds a CONTROL rather than a glyph: a country picker beside a number, a currency beside an amount. Renders data-leading-control, which turns the field into the split shape (two halves, a divider, each with its own hover and focus), exactly as the HTML form spells it. |
 | `trailing` | `ReactNode` |  |
 | `required` | `boolean` | Marks the control required and renders the asterisk. The asterisk is decorative; the native attribute is what carries the meaning. |
 | `revealable` | `boolean` | A reveal toggle for type="password". Flips the control to type="text" and back, and moves aria-pressed with it. |

package/manifest/components/select.md

@@ -100,6 +100,7 @@ import { Select } from '@karmo-co/drift-kit/react';
 | `className` | `string` |  |
 | `id` | `string` |  |
 | `'aria-label'` | `string` |  |
+| `'aria-labelledby'` | `string` | With no visible label: named by an element already on the page (a Pagination's "Rows"), then by the value, as a label names it. |
 
 ## Component tokens
 

package/manifest/components/toast.md

@@ -6,7 +6,7 @@ A message that arrives, says one thing and goes: a card with a badge, a title an
 ## Anatomy (HTML)
 
 ```text
-div.dk-component-toast[data-status][data-variant="compact"]?[role="status"]
+div.dk-component-toast[data-status][data-variant="compact"]?
   div.__panel
     div.dk-component-feedback-badge?
     div.__text > p.__title + p.__description?

package/manifest/components/top-bar.md

@@ -53,6 +53,7 @@ import { TopBar } from '@karmo-co/drift-kit/react';
 | `drawerLabel` | `string` |  |
 | `renderLink` | `(props: TopBarLinkProps) => ReactElement` |  |
 | `theme` | `'light' \| 'dark'` | Dark chrome: 'dark' makes it dark on a light page and one step deeper than a dark one. Everything inside resolves dark, menus included. |
+| `device` | `'auto' \| 'phone' \| 'desktop'` | Which bar to draw: the page's width decides when absent or 'auto'; a frame that shows a phone says 'phone', as ActionBar and Sidebar take it. |
 | `className` | `string` |  |
 
 ## Component tokens

package/manifest/components/vehicle.md

@@ -37,6 +37,7 @@ import { Vehicle } from '@karmo-co/drift-kit/react';
 | `toneFill` | `'solid'` |  |
 | `surface` | `1 \| 2` | A step down the neutral ladder for the panel. |
 | `className` | `string` | className and style go on the figure, not the image: sizing the figure sizes the photo and its panel together. |
+| `caption` | `ReactNode` | Words under the car, in Body small, inside the figure. |
 
 ## Component tokens
 

package/manifest/index.json

@@ -1,6 +1,6 @@
 {
   "schema": 1,
-  "version": "23.12.0",
+  "version": "23.13.0",
   "built": "2026-10-28",
   "components": [
     {
@@ -1354,6 +1354,28 @@
           "components": [],
           "tokens": []
         }
+      },
+      "23.12.1": {
+        "added": {
+          "components": [],
+          "tokens": []
+        },
+        "removed": {
+          "components": [],
+          "tokens": []
+        }
+      },
+      "23.13.0": {
+        "added": {
+          "components": [],
+          "tokens": [
+            "--dk-border-field-plain-default"
+          ]
+        },
+        "removed": {
+          "components": [],
+          "tokens": []
+        }
       }
     }
   }

package/manifest/setup.md

@@ -16,6 +16,7 @@ Installed as `@karmo-co/drift-kit` from GitHub Packages.
 | `@karmo-co/drift-kit/react` | `./dist/react/index.js` |
 | `@karmo-co/drift-kit/behaviours/*` | `./dist/react/behaviours/*.js` |
 | `@karmo-co/drift-kit/icons/*` | `./dist/icons/*.js` |
+| `@karmo-co/drift-kit/data/*` | `./dist/data/*.js` |
 
 ## Root attributes the stylesheet reads
 
@@ -53,23 +54,23 @@ A page with no npm install (a plain HTML prototype, a slide deck) links this ver
 Both scripts are deferred, and an icon script goes after `components.js`, which replaces the icon registry when it runs: an icon script that runs first loses its set. Every tag carries its file's `integrity` from the table below and `crossorigin="anonymous"`, so a file whose bytes changed never loads. In this order:
 
 ```html
-<link rel="stylesheet" href="https://storage.googleapis.com/drift-kit-public/23.12.0/drift-kit.css" integrity="sha384-Lej40WcVmryr1r5aGnR1BimXtd7KbcCN+olBxuxL8kbN/k9lHB6IBlfrbwXMnPbz" crossorigin="anonymous" />
-<script src="https://storage.googleapis.com/drift-kit-public/23.12.0/components.js" integrity="sha384-JyKsz4dRewlo5gwE4zzPRNZShH70WfSJnvX02nTOBRfCXDBiWeZA9I5XIF1FN/Ip" crossorigin="anonymous" defer></script>
-<script src="https://storage.googleapis.com/drift-kit-public/23.12.0/drift-icons-<set>.js" integrity="<its integrity>" crossorigin="anonymous" defer></script>
+<link rel="stylesheet" href="https://storage.googleapis.com/drift-kit-public/23.13.0/drift-kit.css" integrity="sha384-6diR876ZJBewREp4eN17l4gwb8Up8nrHiJoKGqrtr08fLu9UdNg/5w5XkqMNQxvN" crossorigin="anonymous" />
+<script src="https://storage.googleapis.com/drift-kit-public/23.13.0/components.js" integrity="sha384-ionKosisdHsadPUziJ58ZFrd5WfRFjgZmGA3v8RP3ae5xroJ7Op5NqhMr065xygt" crossorigin="anonymous" defer></script>
+<script src="https://storage.googleapis.com/drift-kit-public/23.13.0/drift-icons-<set>.js" integrity="<its integrity>" crossorigin="anonymous" defer></script>
 ```
 
 | File | Address | Integrity |
 |---|---|---|
-| `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/23.12.0/drift-kit.css` | `sha384-Lej40WcVmryr1r5aGnR1BimXtd7KbcCN+olBxuxL8kbN/k9lHB6IBlfrbwXMnPbz` |
-| `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/23.12.0/drift-kit.min.css` | `sha384-gaazCqS0UNHz4646nvtDAA0eEPfbS8h2dBEj0nGA5Q8PHWGUpighVoE21+Vmocx4` |
-| `components.js` | `https://storage.googleapis.com/drift-kit-public/23.12.0/components.js` | `sha384-JyKsz4dRewlo5gwE4zzPRNZShH70WfSJnvX02nTOBRfCXDBiWeZA9I5XIF1FN/Ip` |
-| `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.12.0/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
-| `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.12.0/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
-| `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.12.0/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
-| `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.12.0/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
-| `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.12.0/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
-| `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.12.0/drift-icons-lucide.js` | `sha384-yEy9LdLbPCXUy577fmNq4loJ2G9AQ1InAW54iozwnVfe8KIK6gVe2227eaNmxFi1` |
-| `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.12.0/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
+| `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/23.13.0/drift-kit.css` | `sha384-6diR876ZJBewREp4eN17l4gwb8Up8nrHiJoKGqrtr08fLu9UdNg/5w5XkqMNQxvN` |
+| `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/23.13.0/drift-kit.min.css` | `sha384-qCBNQOaCsS5d5kzPBRzaxdNXo5uEQHbDNoABwPBUZ7ZgNar+uSk1zxjO4ii00kLQ` |
+| `components.js` | `https://storage.googleapis.com/drift-kit-public/23.13.0/components.js` | `sha384-ionKosisdHsadPUziJ58ZFrd5WfRFjgZmGA3v8RP3ae5xroJ7Op5NqhMr065xygt` |
+| `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.13.0/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
+| `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.13.0/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
+| `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.13.0/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
+| `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.13.0/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
+| `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.13.0/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
+| `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.13.0/drift-icons-lucide.js` | `sha384-wLKQdccKZKGXZJ9kcU8XCKyNI79EGI/7NrBVmOAlE0DZNThpyW1SY6z4j3teJLB0` |
+| `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.13.0/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
 
 ### Integrity for 23.4.0
 
@@ -97,5 +98,5 @@ The behaviour script initialises every component on the page when it loads. Mark
 The kit class names the drift-critique capture script keys on, at this version. Pass them to it as `--kit '<this JSON>'` so its alignment and reduced-motion checks read this version's names.
 
 ```json
-{"version":"23.12.0","field":".dk-component-input__field","trigger":".dk-component-select__trigger","button":".dk-component-button","iconButton":".dk-component-icon-button","spinners":[".dk-component-loading-spinner",".dk-component-button__spinner"],"componentPrefix":"dk-component-","fieldRoot":"dk-component-input"}
+{"version":"23.13.0","field":".dk-component-input__field","trigger":".dk-component-select__trigger","button":".dk-component-button","iconButton":".dk-component-icon-button","spinners":[".dk-component-loading-spinner",".dk-component-button__spinner"],"componentPrefix":"dk-component-","fieldRoot":"dk-component-input"}
 ```

package/manifest/tokens/border.md

@@ -41,6 +41,7 @@ Declared values, light and dark. Reference a token by name; never copy its value
 | `--dk-border-field-focus` | `var(--dk-color-primary-600)` | `var(--dk-color-primary-400)` |
 | `--dk-border-field-focus-ring` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-600)` |
 | `--dk-border-field-hover` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-500)` |
+| `--dk-border-field-plain-default` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-700)` |
 | `--dk-border-field-raised-default` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-800)` |
 | `--dk-border-field-raised-focus` | `var(--dk-color-primary-400)` | `var(--dk-color-primary-500)` |
 | `--dk-border-field-raised-hover` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-700)` |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@karmo-co/drift-kit-reference",
-  "version": "23.12.0",
+  "version": "23.13.0",
   "description": "Reference documentation of Karmo's private Drift design system, for Karmo's Claude skills. Documentation only.",
   "bin": {
     "drift-kit-ref": "bin/drift-kit-ref.js"