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

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 (9) hide show
  1. package/manifest/components/alert.md +1 -1
  2. package/manifest/components/dropdown.md +2 -1
  3. package/manifest/components/select.md +7 -3
  4. package/manifest/components/sidebar.md +1 -1
  5. package/manifest/index.json +33 -2
  6. package/manifest/setup.md +14 -14
  7. package/manifest/tokens/border.md +8 -2
  8. package/manifest/tokens/motion.md +4 -0
  9. package/package.json +1 -1
package/manifest/components/alert.md CHANGED
@@ -24,7 +24,7 @@ div.dk-component-alert[data-status="primary|success|warning|error|information"][
24
24
  | `data-size` | `small` |
25
25
  | `data-status` | `error`, `information`, `primary`, `success`, `warning` |
26
26
  | `data-text` | `tinted` |
27
- | `data-variant` | `outline`, `plain`, `solid` |
27
+ | `data-variant` | `outline`, `plain`, `solid`, `subtle` |
28
28
 
29
29
  ## React
30
30
 
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/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. |
@@ -101,7 +104,8 @@ import { Select } from '@karmo-co/drift-kit/react';
101
104
  | `id` | `string` | |
102
105
  | `'aria-label'` | `string` | |
103
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). |
104
108
 
105
109
  ## Component tokens
106
110
 
107
- `--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/index.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "schema": 1,
3
- "version": "23.13.0",
4
- "built": "2026-10-28",
3
+ "version": "23.14.1",
4
+ "built": "2026-10-30",
5
5
  "components": [
6
6
  {
7
7
  "id": "accordion",
@@ -1376,6 +1376,37 @@
1376
1376
  "components": [],
1377
1377
  "tokens": []
1378
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
+ }
1400
+ },
1401
+ "23.14.1": {
1402
+ "added": {
1403
+ "components": [],
1404
+ "tokens": []
1405
+ },
1406
+ "removed": {
1407
+ "components": [],
1408
+ "tokens": []
1409
+ }
1379
1410
  }
1380
1411
  }
1381
1412
  }
package/manifest/setup.md CHANGED
@@ -54,23 +54,23 @@ A page with no npm install (a plain HTML prototype, a slide deck) links this ver
54
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:
55
55
 
56
56
  ```html
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>
57
+ <link rel="stylesheet" href="https://storage.googleapis.com/drift-kit-public/23.14.1/drift-kit.css" integrity="sha384-fbgmz4TBuMizX+T5D11Kg0BMrH5duk+FZ2DzJ6gvGhS2PBoNsp7EnI/pO5/xHvBi" crossorigin="anonymous" />
58
+ <script src="https://storage.googleapis.com/drift-kit-public/23.14.1/components.js" integrity="sha384-ZMU0V+jYGpVZhabgSCTgqR3LKUYSmeb1O58eJ7efT6P5XOY/4/5UDuRydYEcAgVn" crossorigin="anonymous" defer></script>
59
+ <script src="https://storage.googleapis.com/drift-kit-public/23.14.1/drift-icons-<set>.js" integrity="<its integrity>" crossorigin="anonymous" defer></script>
60
60
  ```
61
61
 
62
62
  | File | Address | Integrity |
63
63
  |---|---|---|
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` |
64
+ | `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/23.14.1/drift-kit.css` | `sha384-fbgmz4TBuMizX+T5D11Kg0BMrH5duk+FZ2DzJ6gvGhS2PBoNsp7EnI/pO5/xHvBi` |
65
+ | `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/23.14.1/drift-kit.min.css` | `sha384-ZqQ4XtbXejJvXnMeu6rPqQZXTo78B5zvM8mCbqytBXzwbMShcqzfeadz29HASIBU` |
66
+ | `components.js` | `https://storage.googleapis.com/drift-kit-public/23.14.1/components.js` | `sha384-ZMU0V+jYGpVZhabgSCTgqR3LKUYSmeb1O58eJ7efT6P5XOY/4/5UDuRydYEcAgVn` |
67
+ | `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.14.1/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
68
+ | `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.14.1/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
69
+ | `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.14.1/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
70
+ | `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.14.1/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
71
+ | `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.14.1/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
72
+ | `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.14.1/drift-icons-lucide.js` | `sha384-wLKQdccKZKGXZJ9kcU8XCKyNI79EGI/7NrBVmOAlE0DZNThpyW1SY6z4j3teJLB0` |
73
+ | `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.14.1/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
74
74
 
75
75
  ### Integrity for 23.4.0
76
76
 
@@ -98,5 +98,5 @@ The behaviour script initialises every component on the page when it loads. Mark
98
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.
99
99
 
100
100
  ```json
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
+ {"version":"23.14.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"}
102
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)` |
@@ -42,9 +45,9 @@ Declared values, light and dark. Reference a token by name; never copy its value
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
47
  | `--dk-border-field-plain-default` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-700)` |
45
- | `--dk-border-field-raised-default` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-800)` |
48
+ | `--dk-border-field-raised-default` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-850)` |
46
49
  | `--dk-border-field-raised-focus` | `var(--dk-color-primary-400)` | `var(--dk-color-primary-500)` |
47
- | `--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)` |
48
51
  | `--dk-border-glass-default` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
49
52
  | `--dk-border-glider-plain` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
50
53
  | `--dk-border-gradient-ai-deep` | `var(--dk-gradient-primary-top-right-default-stop-3)` | `var(--dk-gradient-primary-top-right-default-stop-3)` |
@@ -121,6 +124,9 @@ Declared values, light and dark. Reference a token by name; never copy its value
121
124
  | `--dk-border-progress` | `var(--dk-color-primary-500)` | `var(--dk-color-primary-400)` |
122
125
  | `--dk-border-progress-start` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-700)` |
123
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)` |
124
130
  | `--dk-border-raised-default` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
125
131
  | `--dk-border-raised-hover` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
126
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.13.0",
3
+ "version": "23.14.1",
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"