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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/manifest/components/box.md +2 -0
  2. package/manifest/components/button.md +1 -1
  3. package/manifest/components/choice-card.md +2 -1
  4. package/manifest/components/day-of-month.md +1 -0
  5. package/manifest/components/heading.md +1 -1
  6. package/manifest/components/input.md +1 -0
  7. package/manifest/components/select.md +1 -0
  8. package/manifest/components/toast.md +1 -1
  9. package/manifest/components/top-bar.md +1 -0
  10. package/manifest/components/vehicle.md +1 -0
  11. package/manifest/index.json +13 -1
  12. package/manifest/setup.md +15 -14
  13. package/manifest/tokens/border.md +1 -0
  14. package/package.json +1 -1
package/manifest/components/box.md CHANGED
@@ -45,6 +45,8 @@ import { Box } from '@karmo-co/drift-kit/react';
45
45
  | `surface` | `0 \| 1 \| 2` | A step down the neutral ladder (1 or 2), so a flat box reads as a panel. |
46
46
  | `title` | `ReactNode` | A header: the title wires aria-labelledby, so the box is a named region. |
47
47
  | `titleAs` | `'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` | |
48
+ | `titleId` | `string` | The title's id, when something in the box is named by it (a Day of month's grid). Generated otherwise. |
49
+ | `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. |
48
50
  | `description` | `ReactNode` | |
49
51
  | `actions` | `ReactNode` | Beside the title: a Link, a Button, an icon button. |
50
52
  | `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 CHANGED
@@ -38,7 +38,7 @@ import { Button } from '@karmo-co/drift-kit/react';
38
38
  | `iconRight` | `ReactNode` | |
39
39
  | `loading` | `boolean` | |
40
40
  | `children` | `ReactNode` | |
41
- | `variant` | `'default' \| 'outline' \| 'subtle' \| 'plain' \| 'accent' \| 'raised' \| 'inverse'` | |
41
+ | `variant` | `'default' \| 'outline' \| 'subtle' \| 'plain' \| 'ghost' \| 'accent' \| 'raised' \| 'inverse'` | |
42
42
  | `status` | `'primary' \| 'error' \| 'success' \| 'warning' \| 'information'` | |
43
43
 
44
44
  ## Component tokens
package/manifest/components/choice-card.md CHANGED
@@ -51,7 +51,8 @@ import { ChoiceCard } from '@karmo-co/drift-kit/react';
51
51
  | `description` | `ReactNode` | |
52
52
  | `note` | `ReactNode` | |
53
53
  | `noteStatus` | `'error'` | 'error' turns the note red ("Card expired"). |
54
- | `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. |
54
+ | `amount` | `ReactNode` | Right-aligned: an amount, drawn as the card's __value. |
55
+ | `aside` | `ReactNode` | Right-aligned too, after the amount: a Tag. Anything with data-show="checked" shows only while chosen. |
55
56
  | `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. |
56
57
  | `id` | `string` | |
57
58
  | `className` | `string` | |
package/manifest/components/day-of-month.md CHANGED
@@ -48,6 +48,7 @@ import { DayOfMonth } from '@karmo-co/drift-kit/react';
48
48
  | `id` | `string` | |
49
49
  | `className` | `string` | |
50
50
  | `'aria-label'` | `string` | |
51
+ | `'aria-labelledby'` | `string` | Inline: named by a heading already on the page, as a Box's title. |
51
52
 
52
53
  ## Component tokens
53
54
 
package/manifest/components/heading.md CHANGED
@@ -6,7 +6,7 @@ The outline tier: Inter, six responsive sizes, nine weights, the Body colour gra
6
6
  ## Anatomy (HTML)
7
7
 
8
8
  ```text
9
- h1..h6.dk-component-heading[data-size="xxlarge|xlarge|large|medium|small|xsmall"]?[data-weight]?[data-color]?[data-align]?
9
+ h1..h6.dk-component-heading[data-size="xxlarge|xlarge|large|medium|small|xsmall|xxsmall"]?[data-weight]?[data-color]?[data-align]?
10
10
  ```
11
11
 
12
12
  ## Attributes
package/manifest/components/input.md CHANGED
@@ -43,6 +43,7 @@ import { Input } from '@karmo-co/drift-kit/react';
43
43
  | `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. |
44
44
  | `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. |
45
45
  | `leading` | `ReactNode` | |
46
+ | `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. |
46
47
  | `trailing` | `ReactNode` | |
47
48
  | `required` | `boolean` | Marks the control required and renders the asterisk. The asterisk is decorative; the native attribute is what carries the meaning. |
48
49
  | `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 CHANGED
@@ -100,6 +100,7 @@ import { Select } from '@karmo-co/drift-kit/react';
100
100
  | `className` | `string` | |
101
101
  | `id` | `string` | |
102
102
  | `'aria-label'` | `string` | |
103
+ | `'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. |
103
104
 
104
105
  ## Component tokens
105
106
 
package/manifest/components/toast.md CHANGED
@@ -6,7 +6,7 @@ A message that arrives, says one thing and goes: a card with a badge, a title an
6
6
  ## Anatomy (HTML)
7
7
 
8
8
  ```text
9
- div.dk-component-toast[data-status][data-variant="compact"]?[role="status"]
9
+ div.dk-component-toast[data-status][data-variant="compact"]?
10
10
  div.__panel
11
11
  div.dk-component-feedback-badge?
12
12
  div.__text > p.__title + p.__description?
package/manifest/components/top-bar.md CHANGED
@@ -53,6 +53,7 @@ import { TopBar } from '@karmo-co/drift-kit/react';
53
53
  | `drawerLabel` | `string` | |
54
54
  | `renderLink` | `(props: TopBarLinkProps) => ReactElement` | |
55
55
  | `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. |
56
+ | `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. |
56
57
  | `className` | `string` | |
57
58
 
58
59
  ## Component tokens
package/manifest/components/vehicle.md CHANGED
@@ -37,6 +37,7 @@ import { Vehicle } from '@karmo-co/drift-kit/react';
37
37
  | `toneFill` | `'solid'` | |
38
38
  | `surface` | `1 \| 2` | A step down the neutral ladder for the panel. |
39
39
  | `className` | `string` | className and style go on the figure, not the image: sizing the figure sizes the photo and its panel together. |
40
+ | `caption` | `ReactNode` | Words under the car, in Body small, inside the figure. |
40
41
 
41
42
  ## Component tokens
42
43
 
package/manifest/index.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "schema": 1,
3
- "version": "23.12.1",
3
+ "version": "23.13.0",
4
4
  "built": "2026-10-28",
5
5
  "components": [
6
6
  {
@@ -1364,6 +1364,18 @@
1364
1364
  "components": [],
1365
1365
  "tokens": []
1366
1366
  }
1367
+ },
1368
+ "23.13.0": {
1369
+ "added": {
1370
+ "components": [],
1371
+ "tokens": [
1372
+ "--dk-border-field-plain-default"
1373
+ ]
1374
+ },
1375
+ "removed": {
1376
+ "components": [],
1377
+ "tokens": []
1378
+ }
1367
1379
  }
1368
1380
  }
1369
1381
  }
package/manifest/setup.md CHANGED
@@ -16,6 +16,7 @@ Installed as `@karmo-co/drift-kit` from GitHub Packages.
16
16
  | `@karmo-co/drift-kit/react` | `./dist/react/index.js` |
17
17
  | `@karmo-co/drift-kit/behaviours/*` | `./dist/react/behaviours/*.js` |
18
18
  | `@karmo-co/drift-kit/icons/*` | `./dist/icons/*.js` |
19
+ | `@karmo-co/drift-kit/data/*` | `./dist/data/*.js` |
19
20
 
20
21
  ## Root attributes the stylesheet reads
21
22
 
@@ -53,23 +54,23 @@ A page with no npm install (a plain HTML prototype, a slide deck) links this ver
53
54
  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:
54
55
 
55
56
  ```html
56
- <link rel="stylesheet" href="https://storage.googleapis.com/drift-kit-public/23.12.1/drift-kit.css" integrity="sha384-AdYAGrJNy4nRm2z4qxc654f/gXSNRiL5vuefeG+2oS317ykdqKtGDmFkHYQmL9nP" crossorigin="anonymous" />
57
- <script src="https://storage.googleapis.com/drift-kit-public/23.12.1/components.js" integrity="sha384-LhRRZV2uEQAHV4VDMgNWf/ZtrNILziWyWMbdb5SI4ttA1va4krlxvEhoebzEreJE" crossorigin="anonymous" defer></script>
58
- <script src="https://storage.googleapis.com/drift-kit-public/23.12.1/drift-icons-<set>.js" integrity="<its integrity>" crossorigin="anonymous" defer></script>
57
+ <link rel="stylesheet" href="https://storage.googleapis.com/drift-kit-public/23.13.0/drift-kit.css" integrity="sha384-6diR876ZJBewREp4eN17l4gwb8Up8nrHiJoKGqrtr08fLu9UdNg/5w5XkqMNQxvN" crossorigin="anonymous" />
58
+ <script src="https://storage.googleapis.com/drift-kit-public/23.13.0/components.js" integrity="sha384-ionKosisdHsadPUziJ58ZFrd5WfRFjgZmGA3v8RP3ae5xroJ7Op5NqhMr065xygt" crossorigin="anonymous" defer></script>
59
+ <script src="https://storage.googleapis.com/drift-kit-public/23.13.0/drift-icons-<set>.js" integrity="<its integrity>" crossorigin="anonymous" defer></script>
59
60
  ```
60
61
 
61
62
  | File | Address | Integrity |
62
63
  |---|---|---|
63
- | `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/23.12.1/drift-kit.css` | `sha384-AdYAGrJNy4nRm2z4qxc654f/gXSNRiL5vuefeG+2oS317ykdqKtGDmFkHYQmL9nP` |
64
- | `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/23.12.1/drift-kit.min.css` | `sha384-yjU9bW8PjSBWGv8CoS7xAI353OvZZ2CmM91bE7GexyOjetxwn6cymneB/I8hwDXq` |
65
- | `components.js` | `https://storage.googleapis.com/drift-kit-public/23.12.1/components.js` | `sha384-LhRRZV2uEQAHV4VDMgNWf/ZtrNILziWyWMbdb5SI4ttA1va4krlxvEhoebzEreJE` |
66
- | `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.12.1/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
67
- | `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.12.1/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
68
- | `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.12.1/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
69
- | `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.12.1/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
70
- | `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.12.1/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
71
- | `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.12.1/drift-icons-lucide.js` | `sha384-yEy9LdLbPCXUy577fmNq4loJ2G9AQ1InAW54iozwnVfe8KIK6gVe2227eaNmxFi1` |
72
- | `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.12.1/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
64
+ | `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/23.13.0/drift-kit.css` | `sha384-6diR876ZJBewREp4eN17l4gwb8Up8nrHiJoKGqrtr08fLu9UdNg/5w5XkqMNQxvN` |
65
+ | `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/23.13.0/drift-kit.min.css` | `sha384-qCBNQOaCsS5d5kzPBRzaxdNXo5uEQHbDNoABwPBUZ7ZgNar+uSk1zxjO4ii00kLQ` |
66
+ | `components.js` | `https://storage.googleapis.com/drift-kit-public/23.13.0/components.js` | `sha384-ionKosisdHsadPUziJ58ZFrd5WfRFjgZmGA3v8RP3ae5xroJ7Op5NqhMr065xygt` |
67
+ | `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.13.0/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
68
+ | `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.13.0/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
69
+ | `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.13.0/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
70
+ | `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.13.0/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
71
+ | `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.13.0/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
72
+ | `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.13.0/drift-icons-lucide.js` | `sha384-wLKQdccKZKGXZJ9kcU8XCKyNI79EGI/7NrBVmOAlE0DZNThpyW1SY6z4j3teJLB0` |
73
+ | `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.13.0/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
73
74
 
74
75
  ### Integrity for 23.4.0
75
76
 
@@ -97,5 +98,5 @@ The behaviour script initialises every component on the page when it loads. Mark
97
98
  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.
98
99
 
99
100
  ```json
100
- {"version":"23.12.1","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"}
101
+ {"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"}
101
102
  ```
package/manifest/tokens/border.md CHANGED
@@ -41,6 +41,7 @@ Declared values, light and dark. Reference a token by name; never copy its value
41
41
  | `--dk-border-field-focus` | `var(--dk-color-primary-600)` | `var(--dk-color-primary-400)` |
42
42
  | `--dk-border-field-focus-ring` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-600)` |
43
43
  | `--dk-border-field-hover` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-500)` |
44
+ | `--dk-border-field-plain-default` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-700)` |
44
45
  | `--dk-border-field-raised-default` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-800)` |
45
46
  | `--dk-border-field-raised-focus` | `var(--dk-color-primary-400)` | `var(--dk-color-primary-500)` |
46
47
  | `--dk-border-field-raised-hover` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-700)` |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@karmo-co/drift-kit-reference",
3
- "version": "23.12.1",
3
+ "version": "23.13.0",
4
4
  "description": "Reference documentation of Karmo's private Drift design system, for Karmo's Claude skills. Documentation only.",
5
5
  "bin": {
6
6
  "drift-kit-ref": "bin/drift-kit-ref.js"