@karmo-co/drift-kit-reference 23.12.1 → 23.14.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 (17) 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/dropdown.md +2 -1
  6. package/manifest/components/heading.md +1 -1
  7. package/manifest/components/input.md +1 -0
  8. package/manifest/components/select.md +8 -3
  9. package/manifest/components/sidebar.md +1 -1
  10. package/manifest/components/toast.md +1 -1
  11. package/manifest/components/top-bar.md +1 -0
  12. package/manifest/components/vehicle.md +1 -0
  13. package/manifest/index.json +35 -2
  14. package/manifest/setup.md +15 -14
  15. package/manifest/tokens/border.md +9 -2
  16. package/manifest/tokens/motion.md +4 -0
  17. 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/dropdown.md CHANGED
@@ -6,7 +6,7 @@ A menu of commands hanging off a trigger. Select's surface, a menu's semantics:
6
6
  ## Anatomy (HTML)
7
7
 
8
8
  ```text
9
- div.dk-component-dropdown
9
+ div.dk-component-dropdown[data-menu-tone="inverse"]?
10
10
  button.dk-component-dropdown__trigger (aria-haspopup="menu")
11
11
  div.dk-component-menu.dk-component-dropdown__menu (role="menu", portalled)
12
12
  span|div.dk-component-dropdown__label (optional heading: a span for
@@ -45,6 +45,7 @@ import { Dropdown } from '@karmo-co/drift-kit/react';
45
45
  | `placement` | `'top' \| 'bottom' \| 'left' \| 'right'` | Where the menu opens, in dk.position's vocabulary. Below and start-aligned by default. |
46
46
  | `align` | `'start' \| 'center' \| 'end'` | |
47
47
  | `sheet` | `'auto' \| 'always' \| 'never'` | How it presents on a phone: a bottom sheet below the mobile breakpoint by default; 'never' for a menu already inside a sheet; 'always' to force it. |
48
+ | `menuTone` | `'inverse'` | The menu takes the page's theme, whatever the trigger sits on: an inverse trigger opens a light menu on a light page. 'inverse' asks for an inverse menu. |
48
49
  | `exact` | `boolean` | Place the menu exactly where it was asked, to the fraction of a pixel, never flipped or slid on screen (a page drawing a wireframe). |
49
50
  | `container` | `MenuContainer` | Where the menu opens instead of <body>: an element, or a function asked at each opening. It must be positioned; the menu is absolute in it. |
50
51
  | `position` | `'anchor' \| 'css'` | 'css' (23 Oct 2026): the stylesheet places the menu, not its trigger. Nothing inline but its position (fixed, or absolute in a container), so a rule on menuClassName must say where, for example .my-menu { bottom: 72px; left: 16px; } for an account menu above a bar. With no such rule it sits at its static position, and the runtime warns once in the console. 'anchor', beside the trigger, when absent. |
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
@@ -6,10 +6,12 @@ One value from a list. A field-shaped trigger, a floating listbox, and the keybo
6
6
  ## Anatomy (HTML)
7
7
 
8
8
  ```text
9
- div.dk-component-select[data-size][data-open][data-selected]
9
+ div.dk-component-select[data-size][data-open][data-selected][data-menu-tone="inverse"]?
10
10
  label.dk-component-select__label (optional, + __req)
11
11
  input[type=hidden] (the form value)
12
12
  button.dk-component-select__trigger (role=combobox)
13
+ span.dk-component-select__leading (optional, aria-hidden: one glyph for the
14
+ field, a hairline after it; stays whatever is chosen)
13
15
  span.dk-component-select__chips (built by the behaviour, [data-multiple] only)
14
16
  span.dk-component-select__chip
15
17
  span.dk-component-select__chip-label
@@ -58,7 +60,7 @@ div.dk-component-select[data-size][data-open][data-selected]
58
60
  | `data-sheet-closing` | (present or absent) |
59
61
  | `data-sheet-open` | (present or absent) |
60
62
  | `data-size` | `large`, `small` |
61
- | `data-tone` | `error`, `information`, `primary`, `success`, `warning` |
63
+ | `data-tone` | `error`, `information`, `inverse`, `primary`, `success`, `warning` |
62
64
  | `data-variant` | `inset`, `raised` |
63
65
 
64
66
  ## React
@@ -88,6 +90,7 @@ import { Select } from '@karmo-co/drift-kit/react';
88
90
  | `raised` | `boolean` | Lifts the trigger off the surface on an elevation instead of sitting flush in it, the same attribute and the same trade as Input's: the shadow is the whole of it, and padding and height still come from the size rung. Kept as an alias of variant="raised". |
89
91
  | `variant` | `'plain' \| 'raised' \| 'inset' \| 'default'` | How the trigger separates from the surface, as Input's and Glider's do: plain (the default) sits flush with an edge, raised lifts it on a shadow, inset sinks it into the nested fill with no edge. 'default' is the old name for plain and still renders as it. |
90
92
  | `sheet` | `'auto' \| 'always' \| 'never'` | How the menu presents itself on a phone. 'auto', the default, is a bottom sheet below the kit's mobile breakpoint and a dropdown above it. 'never' opts out, for a select inside something that is already a sheet or a full-screen modal. 'always' forces the sheet at any width, which is how the documentation shows it on a desktop. |
93
+ | `menuTone` | `'inverse'` | The menu takes the page's theme, whatever the trigger sits on: an inverse trigger opens a light menu on a light page. 'inverse' asks for an inverse menu. |
91
94
  | `layout` | `'list' \| 'grid'` | 'grid' lays the options out as cards in a wider popup, for options that are pictures (VehicleSelect). Up and down move a row, left and right a card. |
92
95
  | `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. |
93
96
  | `align` | `'start' \| 'end'` | Which edge of the trigger the menu lines up with. |
@@ -100,7 +103,9 @@ import { Select } from '@karmo-co/drift-kit/react';
100
103
  | `className` | `string` | |
101
104
  | `id` | `string` | |
102
105
  | `'aria-label'` | `string` | |
106
+ | `'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. |
107
+ | `leading` | `ReactNode` | One glyph at the trigger's start, a hairline after it: the field's own, in place of a label's words ("[palette] \| Default" for "Tone: Default"). It stays whatever is chosen, and an option's icon is not mirrored beside it. It names nothing, so with no label pass aria-label or aria-labelledby (the Select's props require one). |
103
108
 
104
109
  ## Component tokens
105
110
 
106
- `--dk-component-select-small-padding-y`, `--dk-component-select-padding-y`, `--dk-component-select-large-padding-y`, `--dk-component-select-small-height`, `--dk-component-select-height`, `--dk-component-select-large-height`, `--dk-component-select-padding-inline`, `--dk-component-select-radius`, `--dk-component-select-border-width`, `--dk-component-select-focus-ring-width`, `--dk-component-select-gap`, `--dk-component-select-slot-gap`, `--dk-component-select-chevron-size`, `--dk-component-select-sentence-border`, `--dk-component-select-sentence-surface`, `--dk-component-select-sentence-text`, `--dk-component-select-sentence-font-weight`, `--dk-component-select-sentence-font-size`, `--dk-component-select-sentence-line-height`, `--dk-component-select-sentence-small-font-size`, `--dk-component-select-sentence-small-line-height`, `--dk-component-select-sentence-large-font-size`, `--dk-component-select-sentence-large-line-height`, `--dk-component-select-sentence-padding-inline`, `--dk-component-select-sentence-chevron-size`, `--dk-component-select-sentence-value-min-width`, `--dk-component-select-sentence-margin-inline`, `--dk-component-select-font-family`, `--dk-component-select-font-size`, `--dk-component-select-line-height`, `--dk-component-select-small-font-size`, `--dk-component-select-small-line-height`, `--dk-component-select-large-font-size`, `--dk-component-select-large-line-height`, `--dk-component-select-value-font-weight`, `--dk-component-select-placeholder-font-weight`, `--dk-component-select-label-font-family`, `--dk-component-select-label-font-size`, `--dk-component-select-label-line-height`, `--dk-component-select-label-letter-spacing`, `--dk-component-select-label-font-weight`, `--dk-component-select-label-color`, `--dk-component-select-caption-font-size`, `--dk-component-select-caption-line-height`, `--dk-component-select-caption-color`, `--dk-component-select-error-color`, `--dk-component-select-required-color`, `--dk-component-select-surface-default`, `--dk-component-select-surface-hover`, `--dk-component-select-surface-active`, `--dk-component-select-inset-surface`, `--dk-component-select-inset-surface-hover`, `--dk-component-select-inset-surface-active`, `--dk-component-select-inset-border`, `--dk-component-select-inset-value-color`, `--dk-component-select-inset-placeholder-color`, `--dk-component-select-inset-chevron-color`, `--dk-component-select-inset-chevron-primary`, `--dk-component-select-inset-chevron-success`, `--dk-component-select-inset-chevron-error`, `--dk-component-select-inset-chevron-warning`, `--dk-component-select-inset-chevron-information`, `--dk-component-select-border-default`, `--dk-component-select-border-hover`, `--dk-component-select-border-focus`, `--dk-component-select-ring`, `--dk-component-select-value-color`, `--dk-component-select-placeholder-color`, `--dk-component-select-chevron-color`, `--dk-component-select-chevron-color-hover`, `--dk-component-select-value-icon-color`, `--dk-component-select-raised-shadow`, `--dk-component-select-raised-shadow-hover`, `--dk-component-select-raised-border-default`, `--dk-component-select-raised-border-hover`, `--dk-component-select-raised-border-focus`, `--dk-component-select-error-border-default`, `--dk-component-select-error-border-focus`, `--dk-component-select-error-ring`, `--dk-component-select-disabled-surface`, `--dk-component-select-disabled-border`, `--dk-component-select-disabled-value-color`, `--dk-component-select-disabled-icon-color`, `--dk-component-select-disabled-label-color`, `--dk-component-menu-surface`, `--dk-component-menu-border`, `--dk-component-menu-border-width`, `--dk-component-menu-radius`, `--dk-component-menu-shadow`, `--dk-component-menu-padding-block`, `--dk-component-menu-padding-inline`, `--dk-component-menu-max-height`, `--dk-component-menu-max-width`, `--dk-component-menu-viewport-gap`, `--dk-component-menu-sheet-max-height`, `--dk-component-menu-sheet-radius`, `--dk-component-menu-sheet-padding-block`, `--dk-component-menu-scrim`, `--dk-component-menu-scrim-duration`, `--dk-component-menu-scrim-easing`, `--dk-component-menu-sheet-enter-delay`, `--dk-component-menu-sheet-exit-duration`, `--dk-component-menu-sheet-exit-easing`, `--dk-component-menu-enter-duration`, `--dk-component-menu-enter-easing`, `--dk-component-menu-exit-duration`, `--dk-component-menu-exit-easing`, `--dk-component-menu-motion-offset`, `--dk-component-select-option-touch-height`, `--dk-component-select-sheet-title-color`, `--dk-component-menu-scrollbar-thumb`, `--dk-component-menu-scrollbar-thumb-hover`, `--dk-component-select-chip-gap`, `--dk-component-select-chip-padding-block`, `--dk-component-select-chip-padding-inline`, `--dk-component-select-chip-radius`, `--dk-component-select-chip-surface`, `--dk-component-select-chip-shadow`, `--dk-component-select-chip-surface-hover`, `--dk-component-select-chip-color`, `--dk-component-select-chip-font-size`, `--dk-component-select-chip-line-height`, `--dk-component-select-small-chip-font-size`, `--dk-component-select-small-chip-line-height`, `--dk-component-select-large-chip-font-size`, `--dk-component-select-large-chip-line-height`, `--dk-component-select-chip-remove-size`, `--dk-component-select-chip-remove-icon-size`, `--dk-component-select-chip-remove-radius`, `--dk-component-select-chip-remove-surface`, `--dk-component-select-chip-remove-surface-hover`, `--dk-component-select-chip-remove-surface-active`, `--dk-component-select-chip-remove-color`, `--dk-component-select-chip-remove-color-hover`, `--dk-component-select-chip-remove-color-active`, `--dk-component-select-chip-remove-transform-scale-active`, `--dk-component-select-chips-padding-block`, `--dk-component-select-option-padding-block`, `--dk-component-select-option-padding-inline`, `--dk-component-select-option-radius`, `--dk-component-select-option-gap`, `--dk-component-select-option-transform-scale-active`, `--dk-component-select-option-font-size`, `--dk-component-select-option-line-height`, `--dk-component-select-small-option-font-size`, `--dk-component-select-small-option-line-height`, `--dk-component-select-large-option-font-size`, `--dk-component-select-large-option-line-height`, `--dk-component-select-option-font-weight`, `--dk-component-select-option-color`, `--dk-component-select-option-color-active`, `--dk-component-select-option-color-hover`, `--dk-component-select-option-icon-size`, `--dk-component-select-option-media-width`, `--dk-component-select-value-media-height`, `--dk-component-select-grid-menu-width`, `--dk-component-select-grid-menu-max-height`, `--dk-component-select-grid-card-min`, `--dk-component-select-grid-media-width`, `--dk-component-select-grid-desc-font-size`, `--dk-component-select-grid-desc-line-height`, `--dk-component-select-grid-gap`, `--dk-component-select-grid-card-padding`, `--dk-component-select-grid-card-radius`, `--dk-component-select-grid-card-selected-surface`, `--dk-component-select-grid-card-selected-surface-hover`, `--dk-component-select-grid-card-selected-border`, `--dk-component-select-grid-label-font-size`, `--dk-component-select-grid-label-line-height`, `--dk-component-select-grid-card-selected-width`, `--dk-component-select-option-icon-color`, `--dk-component-select-option-icon-color-hover`, `--dk-component-select-check-size`, `--dk-component-select-check-color`, `--dk-component-select-option-surface-selected`, `--dk-component-select-check-color-selected`, `--dk-component-select-check-stroke-width`, `--dk-component-select-option-surface-hover`, `--dk-component-select-option-surface-active`, `--dk-component-select-option-disabled-color`, `--dk-component-select-option-disabled-icon-color`, `--dk-component-select-option-desc-color`, `--dk-component-select-option-desc-font-weight`, `--dk-component-select-option-desc-gap`, `--dk-component-select-group-font-size`, `--dk-component-select-group-line-height`, `--dk-component-select-group-letter-spacing`, `--dk-component-select-group-font-weight`, `--dk-component-select-group-color`, `--dk-component-select-group-padding-block`, `--dk-component-select-group-gap`, `--dk-component-select-search-padding-block`, `--dk-component-select-search-gap`, `--dk-component-select-search-font-size`, `--dk-component-select-search-line-height`, `--dk-component-select-small-search-font-size`, `--dk-component-select-small-search-line-height`, `--dk-component-select-large-search-font-size`, `--dk-component-select-large-search-line-height`, `--dk-component-select-search-color`, `--dk-component-select-search-placeholder-color`, `--dk-component-select-search-icon-size`, `--dk-component-select-search-icon-color`, `--dk-component-select-search-border`, `--dk-component-select-search-border-width`, `--dk-component-select-search-focus-border`, `--dk-component-select-search-focus-width`, `--dk-component-select-search-focus-icon-color`, `--dk-component-select-sheet-search-padding-block`, `--dk-component-select-loading-color`, `--dk-component-select-loading-spinner-size`, `--dk-component-select-loading-spinner-track`, `--dk-component-select-loading-spinner-head`, `--dk-component-select-loading-duration`, `--dk-component-select-clear-size`, `--dk-component-select-clear-icon-size`, `--dk-component-select-clear-radius`, `--dk-component-select-clear-surface-hover`, `--dk-component-select-clear-surface-active`, `--dk-component-select-clear-color`, `--dk-component-select-clear-color-hover`, `--dk-component-select-clear-color-active`, `--dk-component-select-clear-transform-scale-active`, `--dk-component-select-option-meta-color`, `--dk-component-select-empty-color`, `--dk-component-select-duration`, `--dk-component-select-duration-fast`, `--dk-component-select-easing`
111
+ `--dk-component-select-small-padding-y`, `--dk-component-select-padding-y`, `--dk-component-select-large-padding-y`, `--dk-component-select-small-height`, `--dk-component-select-height`, `--dk-component-select-large-height`, `--dk-component-select-padding-inline`, `--dk-component-select-radius`, `--dk-component-select-border-width`, `--dk-component-select-focus-ring-width`, `--dk-component-select-gap`, `--dk-component-select-slot-gap`, `--dk-component-select-leading-divider`, `--dk-component-select-leading-divider-hover`, `--dk-component-select-leading-divider-active`, `--dk-component-select-leading-divider-inverse`, `--dk-component-select-leading-divider-inverse-hover`, `--dk-component-select-leading-divider-inverse-active`, `--dk-component-select-leading-divider-width`, `--dk-component-select-leading-color`, `--dk-component-select-leading-color-hover`, `--dk-component-select-leading-color-active`, `--dk-component-select-leading-after`, `--dk-component-select-chevron-size`, `--dk-component-select-sentence-border`, `--dk-component-select-sentence-surface`, `--dk-component-select-sentence-text`, `--dk-component-select-sentence-font-weight`, `--dk-component-select-sentence-font-size`, `--dk-component-select-sentence-line-height`, `--dk-component-select-sentence-small-font-size`, `--dk-component-select-sentence-small-line-height`, `--dk-component-select-sentence-large-font-size`, `--dk-component-select-sentence-large-line-height`, `--dk-component-select-sentence-padding-inline`, `--dk-component-select-sentence-chevron-size`, `--dk-component-select-sentence-value-min-width`, `--dk-component-select-sentence-margin-inline`, `--dk-component-select-font-family`, `--dk-component-select-font-size`, `--dk-component-select-line-height`, `--dk-component-select-small-font-size`, `--dk-component-select-small-line-height`, `--dk-component-select-large-font-size`, `--dk-component-select-large-line-height`, `--dk-component-select-value-font-weight`, `--dk-component-select-placeholder-font-weight`, `--dk-component-select-label-font-family`, `--dk-component-select-label-font-size`, `--dk-component-select-label-line-height`, `--dk-component-select-label-letter-spacing`, `--dk-component-select-label-font-weight`, `--dk-component-select-label-color`, `--dk-component-select-caption-font-size`, `--dk-component-select-caption-line-height`, `--dk-component-select-caption-color`, `--dk-component-select-error-color`, `--dk-component-select-required-color`, `--dk-component-select-surface-default`, `--dk-component-select-surface-hover`, `--dk-component-select-surface-active`, `--dk-component-select-inset-surface`, `--dk-component-select-inset-surface-hover`, `--dk-component-select-inset-surface-active`, `--dk-component-select-inset-border`, `--dk-component-select-inset-value-color`, `--dk-component-select-inset-placeholder-color`, `--dk-component-select-inset-chevron-color`, `--dk-component-select-inset-chevron-primary`, `--dk-component-select-inset-chevron-success`, `--dk-component-select-inset-chevron-error`, `--dk-component-select-inset-chevron-warning`, `--dk-component-select-inset-chevron-information`, `--dk-component-select-border-default`, `--dk-component-select-border-hover`, `--dk-component-select-border-focus`, `--dk-component-select-ring`, `--dk-component-select-value-color`, `--dk-component-select-placeholder-color`, `--dk-component-select-chevron-color`, `--dk-component-select-chevron-color-hover`, `--dk-component-select-value-icon-color`, `--dk-component-select-raised-shadow`, `--dk-component-select-raised-shadow-hover`, `--dk-component-select-raised-border-default`, `--dk-component-select-raised-border-hover`, `--dk-component-select-raised-border-focus`, `--dk-component-select-error-border-default`, `--dk-component-select-error-border-focus`, `--dk-component-select-error-ring`, `--dk-component-select-disabled-surface`, `--dk-component-select-disabled-border`, `--dk-component-select-disabled-value-color`, `--dk-component-select-disabled-icon-color`, `--dk-component-select-disabled-label-color`, `--dk-component-menu-surface`, `--dk-component-menu-border`, `--dk-component-menu-border-width`, `--dk-component-menu-radius`, `--dk-component-menu-shadow`, `--dk-component-menu-padding-block`, `--dk-component-menu-padding-inline`, `--dk-component-menu-max-height`, `--dk-component-menu-max-width`, `--dk-component-menu-viewport-gap`, `--dk-component-menu-sheet-max-height`, `--dk-component-menu-sheet-radius`, `--dk-component-menu-sheet-padding-block`, `--dk-component-menu-scrim`, `--dk-component-menu-scrim-duration`, `--dk-component-menu-scrim-easing`, `--dk-component-menu-sheet-enter-delay`, `--dk-component-menu-sheet-exit-duration`, `--dk-component-menu-sheet-exit-easing`, `--dk-component-menu-enter-duration`, `--dk-component-menu-enter-easing`, `--dk-component-menu-exit-duration`, `--dk-component-menu-exit-easing`, `--dk-component-menu-motion-offset`, `--dk-component-select-option-touch-height`, `--dk-component-select-sheet-title-color`, `--dk-component-menu-scrollbar-thumb`, `--dk-component-menu-scrollbar-thumb-hover`, `--dk-component-select-chip-gap`, `--dk-component-select-chip-padding-block`, `--dk-component-select-chip-padding-inline`, `--dk-component-select-chip-radius`, `--dk-component-select-chip-surface`, `--dk-component-select-chip-shadow`, `--dk-component-select-chip-surface-hover`, `--dk-component-select-chip-color`, `--dk-component-select-chip-font-size`, `--dk-component-select-chip-line-height`, `--dk-component-select-small-chip-font-size`, `--dk-component-select-small-chip-line-height`, `--dk-component-select-large-chip-font-size`, `--dk-component-select-large-chip-line-height`, `--dk-component-select-chip-remove-size`, `--dk-component-select-chip-remove-icon-size`, `--dk-component-select-chip-remove-radius`, `--dk-component-select-chip-remove-surface`, `--dk-component-select-chip-remove-surface-hover`, `--dk-component-select-chip-remove-surface-active`, `--dk-component-select-chip-remove-color`, `--dk-component-select-chip-remove-color-hover`, `--dk-component-select-chip-remove-color-active`, `--dk-component-select-chip-remove-transform-scale-active`, `--dk-component-select-chips-padding-block`, `--dk-component-select-option-padding-block`, `--dk-component-select-option-padding-inline`, `--dk-component-select-option-radius`, `--dk-component-select-option-gap`, `--dk-component-select-option-transform-scale-active`, `--dk-component-select-option-font-size`, `--dk-component-select-option-line-height`, `--dk-component-select-small-option-font-size`, `--dk-component-select-small-option-line-height`, `--dk-component-select-large-option-font-size`, `--dk-component-select-large-option-line-height`, `--dk-component-select-option-font-weight`, `--dk-component-select-option-color`, `--dk-component-select-option-color-active`, `--dk-component-select-option-color-hover`, `--dk-component-select-option-icon-size`, `--dk-component-select-option-media-width`, `--dk-component-select-value-media-height`, `--dk-component-select-grid-menu-width`, `--dk-component-select-grid-menu-max-height`, `--dk-component-select-grid-card-min`, `--dk-component-select-grid-media-width`, `--dk-component-select-grid-desc-font-size`, `--dk-component-select-grid-desc-line-height`, `--dk-component-select-grid-gap`, `--dk-component-select-grid-card-padding`, `--dk-component-select-grid-card-radius`, `--dk-component-select-grid-card-selected-surface`, `--dk-component-select-grid-card-selected-surface-hover`, `--dk-component-select-grid-card-selected-border`, `--dk-component-select-grid-label-font-size`, `--dk-component-select-grid-label-line-height`, `--dk-component-select-grid-card-selected-width`, `--dk-component-select-option-icon-color`, `--dk-component-select-option-icon-color-hover`, `--dk-component-select-check-size`, `--dk-component-select-check-color`, `--dk-component-select-option-surface-selected`, `--dk-component-select-check-color-selected`, `--dk-component-select-check-stroke-width`, `--dk-component-select-option-surface-hover`, `--dk-component-select-option-surface-active`, `--dk-component-select-option-disabled-color`, `--dk-component-select-option-disabled-icon-color`, `--dk-component-select-option-desc-color`, `--dk-component-select-option-desc-font-weight`, `--dk-component-select-option-desc-gap`, `--dk-component-select-group-font-size`, `--dk-component-select-group-line-height`, `--dk-component-select-group-letter-spacing`, `--dk-component-select-group-font-weight`, `--dk-component-select-group-color`, `--dk-component-select-group-padding-block`, `--dk-component-select-group-gap`, `--dk-component-select-search-padding-block`, `--dk-component-select-search-gap`, `--dk-component-select-search-font-size`, `--dk-component-select-search-line-height`, `--dk-component-select-small-search-font-size`, `--dk-component-select-small-search-line-height`, `--dk-component-select-large-search-font-size`, `--dk-component-select-large-search-line-height`, `--dk-component-select-search-color`, `--dk-component-select-search-placeholder-color`, `--dk-component-select-search-icon-size`, `--dk-component-select-search-icon-color`, `--dk-component-select-search-border`, `--dk-component-select-search-border-width`, `--dk-component-select-search-focus-border`, `--dk-component-select-search-focus-width`, `--dk-component-select-search-focus-icon-color`, `--dk-component-select-sheet-search-padding-block`, `--dk-component-select-loading-color`, `--dk-component-select-loading-spinner-size`, `--dk-component-select-loading-spinner-track`, `--dk-component-select-loading-spinner-head`, `--dk-component-select-loading-duration`, `--dk-component-select-clear-size`, `--dk-component-select-clear-icon-size`, `--dk-component-select-clear-radius`, `--dk-component-select-clear-surface-hover`, `--dk-component-select-clear-surface-active`, `--dk-component-select-clear-color`, `--dk-component-select-clear-color-hover`, `--dk-component-select-clear-color-active`, `--dk-component-select-clear-transform-scale-active`, `--dk-component-select-option-meta-color`, `--dk-component-select-empty-color`, `--dk-component-select-duration`, `--dk-component-select-duration-fast`, `--dk-component-select-easing`
package/manifest/components/sidebar.md CHANGED
@@ -74,4 +74,4 @@ import { Sidebar } from '@karmo-co/drift-kit/react';
74
74
 
75
75
  ## Component tokens
76
76
 
77
- `--dk-component-sidebar-width`, `--dk-component-sidebar-collapsed-width`, `--dk-component-sidebar-padding-block`, `--dk-component-sidebar-padding-inline`, `--dk-component-sidebar-gap`, `--dk-component-sidebar-section-gap`, `--dk-component-sidebar-border-width`, `--dk-component-sidebar-docked-surface`, `--dk-component-sidebar-docked-border`, `--dk-component-sidebar-floating-surface`, `--dk-component-sidebar-floating-border`, `--dk-component-sidebar-floating-radius`, `--dk-component-sidebar-floating-shadow`, `--dk-component-sidebar-floating-inset`, `--dk-component-sidebar-blur`, `--dk-component-sidebar-brand-height`, `--dk-component-sidebar-head-height`, `--dk-component-sidebar-brand-mark-size`, `--dk-component-sidebar-brand-gap`, `--dk-component-sidebar-wordmark-font-family`, `--dk-component-sidebar-wordmark-font-size`, `--dk-component-sidebar-wordmark-font-weight`, `--dk-component-sidebar-wordmark-color`, `--dk-component-sidebar-divider`, `--dk-component-sidebar-item-height`, `--dk-component-sidebar-item-gap`, `--dk-component-sidebar-item-radius`, `--dk-component-sidebar-item-icon-size`, `--dk-component-sidebar-item-font-family`, `--dk-component-sidebar-item-font-size`, `--dk-component-sidebar-item-line-height`, `--dk-component-sidebar-item-font-weight`, `--dk-component-sidebar-item-text`, `--dk-component-sidebar-item-text-hover`, `--dk-component-sidebar-item-text-active`, `--dk-component-sidebar-item-surface-hover`, `--dk-component-sidebar-item-border-hover`, `--dk-component-sidebar-item-surface-active`, `--dk-component-sidebar-item-border-active`, `--dk-component-sidebar-item-text-disabled`, `--dk-component-sidebar-item-press-scale`, `--dk-component-sidebar-bar-press-scale`, `--dk-component-sidebar-focus-ring`, `--dk-component-sidebar-focus-ring-width`, `--dk-component-sidebar-current-surface`, `--dk-component-sidebar-current-surface-hover`, `--dk-component-sidebar-current-border`, `--dk-component-sidebar-current-border-hover`, `--dk-component-sidebar-current-border-active`, `--dk-component-sidebar-current-text`, `--dk-component-sidebar-menu-current-text`, `--dk-component-sidebar-menu-current-font-weight`, `--dk-component-sidebar-child-height`, `--dk-component-sidebar-child-icon-size`, `--dk-component-sidebar-child-inset`, `--dk-component-sidebar-child-gap`, `--dk-component-sidebar-child-font-weight`, `--dk-component-sidebar-guide`, `--dk-component-sidebar-guide-width`, `--dk-component-sidebar-guide-radius`, `--dk-component-sidebar-heading-font-size`, `--dk-component-sidebar-heading-line-height`, `--dk-component-sidebar-heading-font-weight`, `--dk-component-sidebar-heading-letter-spacing`, `--dk-component-sidebar-heading-color`, `--dk-component-sidebar-badge-size`, `--dk-component-sidebar-badge-font-size`, `--dk-component-sidebar-badge-font-weight`, `--dk-component-sidebar-badge-surface`, `--dk-component-sidebar-badge-text`, `--dk-component-sidebar-badge-current-surface`, `--dk-component-sidebar-badge-current-text`, `--dk-component-sidebar-dot-size`, `--dk-component-sidebar-dot-surface`, `--dk-component-sidebar-user-height`, `--dk-component-sidebar-user-avatar-size`, `--dk-component-sidebar-user-text-gap`, `--dk-component-sidebar-user-name-font-size`, `--dk-component-sidebar-user-name-font-weight`, `--dk-component-sidebar-user-name-color`, `--dk-component-sidebar-user-meta-font-size`, `--dk-component-sidebar-user-meta-color`, `--dk-component-sidebar-panel-width`, `--dk-component-sidebar-panel-padding`, `--dk-component-sidebar-panel-radius`, `--dk-component-sidebar-panel-surface`, `--dk-component-sidebar-panel-border`, `--dk-component-sidebar-panel-item-surface-hover`, `--dk-component-sidebar-panel-item-border-hover`, `--dk-component-sidebar-panel-title-font-size`, `--dk-component-sidebar-panel-title-font-weight`, `--dk-component-sidebar-panel-title-color`, `--dk-component-sidebar-scrollbar-size`, `--dk-component-sidebar-scrollbar-thumb`, `--dk-component-sidebar-scrollbar-thumb-hover`, `--dk-component-sidebar-duration`, `--dk-component-sidebar-easing`, `--dk-component-sidebar-rise-duration`, `--dk-component-sidebar-rise-stagger`, `--dk-component-sidebar-rise-row-stagger`, `--dk-component-sidebar-indicator-duration`, `--dk-component-sidebar-group-row-duration`, `--dk-component-sidebar-group-stagger`, `--dk-component-sidebar-group-easing`, `--dk-component-sidebar-panel-duration`, `--dk-component-sidebar-panel-easing`, `--dk-component-sidebar-panel-rows-start`, `--dk-component-sidebar-panel-row-duration`, `--dk-component-sidebar-panel-row-easing`, `--dk-component-sidebar-panel-row-beat`, `--dk-component-sidebar-panel-row-exit-duration`, `--dk-component-sidebar-panel-row-exit-easing`, `--dk-component-sidebar-bar-height`, `--dk-component-sidebar-bar-surface`, `--dk-component-sidebar-bar-border`, `--dk-component-sidebar-bar-shadow`, `--dk-component-sidebar-bar-radius`, `--dk-component-sidebar-bar-inset`, `--dk-component-sidebar-bar-max-width`, `--dk-component-sidebar-bar-font-size`, `--dk-component-sidebar-bar-icon-size`, `--dk-component-sidebar-bar-pill-width`, `--dk-component-sidebar-bar-pill-height`, `--dk-component-sidebar-bar-current-surface`, `--dk-component-sidebar-bar-current-text`, `--dk-component-sidebar-bar-slots`, `--dk-component-sidebar-bar-z-index`, `--dk-component-sidebar-drawer-width`, `--dk-component-sidebar-drawer-shadow`, `--dk-component-sidebar-scrim`, `--dk-component-sidebar-drawer-duration`, `--dk-component-sidebar-drawer-easing`, `--dk-component-sidebar-drawer-z-index`
77
+ `--dk-component-sidebar-width`, `--dk-component-sidebar-collapsed-width`, `--dk-component-sidebar-padding-block`, `--dk-component-sidebar-padding-inline`, `--dk-component-sidebar-gap`, `--dk-component-sidebar-section-gap`, `--dk-component-sidebar-border-width`, `--dk-component-sidebar-docked-surface`, `--dk-component-sidebar-docked-border`, `--dk-component-sidebar-floating-surface`, `--dk-component-sidebar-floating-border`, `--dk-component-sidebar-floating-radius`, `--dk-component-sidebar-floating-shadow`, `--dk-component-sidebar-floating-inset`, `--dk-component-sidebar-blur`, `--dk-component-sidebar-brand-height`, `--dk-component-sidebar-head-height`, `--dk-component-sidebar-brand-mark-size`, `--dk-component-sidebar-brand-gap`, `--dk-component-sidebar-wordmark-font-family`, `--dk-component-sidebar-wordmark-font-size`, `--dk-component-sidebar-wordmark-font-weight`, `--dk-component-sidebar-wordmark-color`, `--dk-component-sidebar-divider`, `--dk-component-sidebar-item-height`, `--dk-component-sidebar-item-gap`, `--dk-component-sidebar-item-radius`, `--dk-component-sidebar-item-icon-size`, `--dk-component-sidebar-item-font-family`, `--dk-component-sidebar-item-font-size`, `--dk-component-sidebar-item-line-height`, `--dk-component-sidebar-item-font-weight`, `--dk-component-sidebar-item-text`, `--dk-component-sidebar-item-text-hover`, `--dk-component-sidebar-item-text-active`, `--dk-component-sidebar-item-surface-hover`, `--dk-component-sidebar-item-border-hover`, `--dk-component-sidebar-item-surface-active`, `--dk-component-sidebar-item-border-active`, `--dk-component-sidebar-item-text-disabled`, `--dk-component-sidebar-item-press-scale`, `--dk-component-sidebar-bar-press-scale`, `--dk-component-sidebar-focus-ring`, `--dk-component-sidebar-focus-ring-width`, `--dk-component-sidebar-current-surface`, `--dk-component-sidebar-current-surface-hover`, `--dk-component-sidebar-current-border`, `--dk-component-sidebar-current-border-hover`, `--dk-component-sidebar-current-border-active`, `--dk-component-sidebar-current-text`, `--dk-component-sidebar-menu-current-text`, `--dk-component-sidebar-menu-current-font-weight`, `--dk-component-sidebar-child-height`, `--dk-component-sidebar-child-icon-size`, `--dk-component-sidebar-child-inset`, `--dk-component-sidebar-child-gap`, `--dk-component-sidebar-child-font-weight`, `--dk-component-sidebar-guide`, `--dk-component-sidebar-guide-width`, `--dk-component-sidebar-guide-radius`, `--dk-component-sidebar-heading-font-size`, `--dk-component-sidebar-heading-line-height`, `--dk-component-sidebar-heading-font-weight`, `--dk-component-sidebar-heading-letter-spacing`, `--dk-component-sidebar-heading-color`, `--dk-component-sidebar-badge-size`, `--dk-component-sidebar-badge-font-size`, `--dk-component-sidebar-badge-font-weight`, `--dk-component-sidebar-badge-surface`, `--dk-component-sidebar-badge-text`, `--dk-component-sidebar-badge-current-surface`, `--dk-component-sidebar-badge-current-text`, `--dk-component-sidebar-dot-size`, `--dk-component-sidebar-dot-surface`, `--dk-component-sidebar-user-height`, `--dk-component-sidebar-user-avatar-size`, `--dk-component-sidebar-user-text-gap`, `--dk-component-sidebar-user-name-font-size`, `--dk-component-sidebar-user-name-font-weight`, `--dk-component-sidebar-user-name-color`, `--dk-component-sidebar-user-meta-font-size`, `--dk-component-sidebar-user-meta-color`, `--dk-component-sidebar-panel-width`, `--dk-component-sidebar-panel-padding`, `--dk-component-sidebar-panel-radius`, `--dk-component-sidebar-panel-surface`, `--dk-component-sidebar-panel-border`, `--dk-component-sidebar-panel-item-surface-hover`, `--dk-component-sidebar-panel-item-border-hover`, `--dk-component-sidebar-panel-title-font-size`, `--dk-component-sidebar-panel-title-font-weight`, `--dk-component-sidebar-panel-title-color`, `--dk-component-sidebar-scrollbar-size`, `--dk-component-sidebar-scrollbar-thumb`, `--dk-component-sidebar-scrollbar-thumb-hover`, `--dk-component-sidebar-duration`, `--dk-component-sidebar-easing`, `--dk-component-sidebar-rise-duration`, `--dk-component-sidebar-rise-stagger`, `--dk-component-sidebar-rise-row-stagger`, `--dk-component-sidebar-indicator-duration`, `--dk-component-sidebar-group-row-duration`, `--dk-component-sidebar-group-stagger`, `--dk-component-sidebar-group-easing`, `--dk-component-sidebar-panel-duration`, `--dk-component-sidebar-panel-easing`, `--dk-component-sidebar-panel-rows-start`, `--dk-component-sidebar-panel-row-duration`, `--dk-component-sidebar-panel-row-easing`, `--dk-component-sidebar-panel-row-beat`, `--dk-component-sidebar-panel-row-rise`, `--dk-component-sidebar-panel-row-exit-duration`, `--dk-component-sidebar-panel-row-exit-easing`, `--dk-component-sidebar-bar-height`, `--dk-component-sidebar-bar-surface`, `--dk-component-sidebar-bar-border`, `--dk-component-sidebar-bar-shadow`, `--dk-component-sidebar-bar-radius`, `--dk-component-sidebar-bar-inset`, `--dk-component-sidebar-bar-max-width`, `--dk-component-sidebar-bar-font-size`, `--dk-component-sidebar-bar-icon-size`, `--dk-component-sidebar-bar-pill-width`, `--dk-component-sidebar-bar-pill-height`, `--dk-component-sidebar-bar-current-surface`, `--dk-component-sidebar-bar-current-text`, `--dk-component-sidebar-bar-slots`, `--dk-component-sidebar-bar-z-index`, `--dk-component-sidebar-drawer-width`, `--dk-component-sidebar-drawer-shadow`, `--dk-component-sidebar-scrim`, `--dk-component-sidebar-drawer-duration`, `--dk-component-sidebar-drawer-easing`, `--dk-component-sidebar-drawer-z-index`
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,7 +1,7 @@
1
1
  {
2
2
  "schema": 1,
3
- "version": "23.12.1",
4
- "built": "2026-10-28",
3
+ "version": "23.14.0",
4
+ "built": "2026-10-29",
5
5
  "components": [
6
6
  {
7
7
  "id": "accordion",
@@ -1364,6 +1364,39 @@
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
+ }
1379
+ },
1380
+ "23.14.0": {
1381
+ "added": {
1382
+ "components": [],
1383
+ "tokens": [
1384
+ "--dk-border-control-lifted-active",
1385
+ "--dk-border-control-lifted-default",
1386
+ "--dk-border-control-lifted-hover",
1387
+ "--dk-border-raised-control-active",
1388
+ "--dk-border-raised-control-default",
1389
+ "--dk-border-raised-control-hover",
1390
+ "--dk-motion-chrome-cascade-beat",
1391
+ "--dk-motion-chrome-cascade-duration",
1392
+ "--dk-motion-chrome-cascade-easing",
1393
+ "--dk-motion-chrome-cascade-rise"
1394
+ ]
1395
+ },
1396
+ "removed": {
1397
+ "components": [],
1398
+ "tokens": []
1399
+ }
1367
1400
  }
1368
1401
  }
1369
1402
  }
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.14.0/drift-kit.css" integrity="sha384-Hr8X6GvoEXiorbGGSZtcmpZANrSViS0FONWSRj16AIEkOTbakBHWeXi1AgySDVOX" crossorigin="anonymous" />
58
+ <script src="https://storage.googleapis.com/drift-kit-public/23.14.0/components.js" integrity="sha384-RSL5PXBXyLvh22n86QpwuC799naN6iTlIHEMp4UV0GBH9fFDxrems10/OauiZIFk" crossorigin="anonymous" defer></script>
59
+ <script src="https://storage.googleapis.com/drift-kit-public/23.14.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.14.0/drift-kit.css` | `sha384-Hr8X6GvoEXiorbGGSZtcmpZANrSViS0FONWSRj16AIEkOTbakBHWeXi1AgySDVOX` |
65
+ | `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/23.14.0/drift-kit.min.css` | `sha384-8M15FhkPe27SC8PuNi7luZXtGEHP6kD/cUGwOxDwdsdUOCwD3TXvOiTQA3OPZ2T8` |
66
+ | `components.js` | `https://storage.googleapis.com/drift-kit-public/23.14.0/components.js` | `sha384-RSL5PXBXyLvh22n86QpwuC799naN6iTlIHEMp4UV0GBH9fFDxrems10/OauiZIFk` |
67
+ | `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.14.0/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
68
+ | `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.14.0/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
69
+ | `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.14.0/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
70
+ | `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.14.0/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
71
+ | `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.14.0/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
72
+ | `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.14.0/drift-icons-lucide.js` | `sha384-wLKQdccKZKGXZJ9kcU8XCKyNI79EGI/7NrBVmOAlE0DZNThpyW1SY6z4j3teJLB0` |
73
+ | `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.14.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.14.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
@@ -14,6 +14,9 @@ Declared values, light and dark. Reference a token by name; never copy its value
14
14
  | `--dk-border-control-active` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-600)` |
15
15
  | `--dk-border-control-default` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-800)` |
16
16
  | `--dk-border-control-hover` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-700)` |
17
+ | `--dk-border-control-lifted-active` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-650)` |
18
+ | `--dk-border-control-lifted-default` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-850)` |
19
+ | `--dk-border-control-lifted-hover` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-750)` |
17
20
  | `--dk-border-dashed-dash` | `var(--dk-primitive-scale-2-5)` | `var(--dk-primitive-scale-2-5)` |
18
21
  | `--dk-border-dashed-gap` | `var(--dk-primitive-scale-2)` | `var(--dk-primitive-scale-2)` |
19
22
  | `--dk-border-dashed-primary` | `var(--dk-color-primary-400)` | `var(--dk-border-primary-default)` |
@@ -41,9 +44,10 @@ Declared values, light and dark. Reference a token by name; never copy its value
41
44
  | `--dk-border-field-focus` | `var(--dk-color-primary-600)` | `var(--dk-color-primary-400)` |
42
45
  | `--dk-border-field-focus-ring` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-600)` |
43
46
  | `--dk-border-field-hover` | `var(--dk-color-neutral-500)` | `var(--dk-color-neutral-500)` |
44
- | `--dk-border-field-raised-default` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-800)` |
47
+ | `--dk-border-field-plain-default` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-700)` |
48
+ | `--dk-border-field-raised-default` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-850)` |
45
49
  | `--dk-border-field-raised-focus` | `var(--dk-color-primary-400)` | `var(--dk-color-primary-500)` |
46
- | `--dk-border-field-raised-hover` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-700)` |
50
+ | `--dk-border-field-raised-hover` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-750)` |
47
51
  | `--dk-border-glass-default` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
48
52
  | `--dk-border-glider-plain` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
49
53
  | `--dk-border-gradient-ai-deep` | `var(--dk-gradient-primary-top-right-default-stop-3)` | `var(--dk-gradient-primary-top-right-default-stop-3)` |
@@ -120,6 +124,9 @@ Declared values, light and dark. Reference a token by name; never copy its value
120
124
  | `--dk-border-progress` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-400)` |
121
125
  | `--dk-border-progress-start` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-700)` |
122
126
  | `--dk-border-raised-active` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-600)` |
127
+ | `--dk-border-raised-control-active` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-650)` |
128
+ | `--dk-border-raised-control-default` | `var(--dk-color-neutral-25)` | `var(--dk-color-neutral-850)` |
129
+ | `--dk-border-raised-control-hover` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-750)` |
123
130
  | `--dk-border-raised-default` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
124
131
  | `--dk-border-raised-hover` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
125
132
  | `--dk-border-raised-subtle` | `rgb(from var(--dk-color-base-black) r g b / var(--dk-primitive-opacity-hairline-subtle))` | `rgb(from var(--dk-color-base-white) r g b / var(--dk-primitive-opacity-hairline-subtle-inverse))` |
package/manifest/tokens/motion.md CHANGED
@@ -9,6 +9,10 @@ Declared values, light and dark. Reference a token by name; never copy its value
9
9
  | `--dk-motion-cascade-easing` | `var(--dk-primitive-motion-easing-sweep)` | `var(--dk-primitive-motion-easing-sweep)` |
10
10
  | `--dk-motion-cascade-max-beats` | `8` | `8` |
11
11
  | `--dk-motion-cascade-rise` | `24px` | `24px` |
12
+ | `--dk-motion-chrome-cascade-beat` | `60ms` | `60ms` |
13
+ | `--dk-motion-chrome-cascade-duration` | `var(--dk-motion-duration-slow)` | `var(--dk-motion-duration-slow)` |
14
+ | `--dk-motion-chrome-cascade-easing` | `var(--dk-motion-easing-emphasized)` | `var(--dk-motion-easing-emphasized)` |
15
+ | `--dk-motion-chrome-cascade-rise` | `12px` | `12px` |
12
16
  | `--dk-motion-curtain-content-delay` | `var(--dk-primitive-motion-duration-480)` | `var(--dk-primitive-motion-duration-480)` |
13
17
  | `--dk-motion-curtain-recede-duration` | `var(--dk-primitive-motion-duration-850)` | `var(--dk-primitive-motion-duration-850)` |
14
18
  | `--dk-motion-curtain-recede-easing` | `var(--dk-motion-easing-gentle)` | `var(--dk-motion-easing-gentle)` |
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.14.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"