@karmo-co/drift-kit-reference 23.18.2 → 24.0.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 (9) hide show
  1. package/manifest/components/carousel.md +59 -0
  2. package/manifest/components/icon-button.md +4 -4
  3. package/manifest/components/sidebar.md +3 -1
  4. package/manifest/components/tag.md +1 -0
  5. package/manifest/index.json +39 -2
  6. package/manifest/migrations/24.0.0.md +8 -0
  7. package/manifest/setup.md +26 -26
  8. package/manifest/tokens/surface.md +5 -0
  9. package/package.json +1 -1
package/manifest/components/carousel.md ADDED
@@ -0,0 +1,59 @@
1
+ # Carousel (`carousel`)
2
+
3
+ Browse a short run of cards sideways. Two presentations: a slider on a phone or tablet (a centred, optionally looping run whose off-centre cards shrink and fade) and a row on a desktop (equal cards, the next one peeking, an optional bleed to the scrolling ancestor with eased edge fades, arrows that step one card). The card's content and hover are the page's; the item press and the row's snap pause are the Carousel's.
4
+
5
+
6
+ ## Anatomy (HTML)
7
+
8
+ ```text
9
+ div.dk-component-carousel[data-presentation="slider|row"]?[data-loop]?[data-start]?[data-bleed]?[data-lift]?[data-device]?
10
+ (data-presentation follows the nearest data-device when there is one,
11
+ else the kit's phone breakpoint, and the runtime owns it; data-start is
12
+ the real item's index; data-lift is a selector inside an item whose
13
+ centre stays level as the item shrinks; data-bleed runs the track out
14
+ to the nearest scrolling ancestor's edges, else the viewport's, and
15
+ data-bleed="<selector>" to root.closest(selector)'s, e.g. the page's
16
+ body beside a rail when the document scrolls)
17
+ div.__track
18
+ div.__item
19
+ (loop: two aria-hidden clones a side, out of the tab order, which the
20
+ runtime makes; a tap on a clone opens its original)
21
+ button.dk-component-icon-button.__prev
22
+ button.dk-component-icon-button.__next
23
+ (the row's arrows: a solid IconButton in light, lifted on
24
+ the carousel's floating / overlay / lifted shadows, and a raised one
25
+ in a light island in dark, on its own shadow, so they hold on any
26
+ level or tone; the slider hides them)
27
+ ```
28
+
29
+ ## Attributes
30
+
31
+ | Attribute | Values the stylesheet styles |
32
+ |---|---|
33
+ | `data-at-end` | (present or absent) |
34
+ | `data-at-start` | (present or absent) |
35
+ | `data-presentation` | `row`, `slider` |
36
+ | `data-variant` | `solid` |
37
+
38
+ ## React
39
+
40
+ ```tsx
41
+ import { Carousel } from '@karmo-co/drift-kit/react';
42
+ ```
43
+
44
+ | Prop | Type | Notes |
45
+ |---|---|---|
46
+ | `children` | `ReactNode` | One item per child, each wrapped in the item. |
47
+ | `loop` | `boolean` | The slider loops round (three items or more): React renders two clones a side, the runtime teleports between them at rest. A row never loops. |
48
+ | `start` | `number` | The real item the slider opens on (0-based; clones never count). |
49
+ | `bleed` | `boolean \| string` | The track runs out to the page's edges: true, the nearest scrolling ancestor (else the viewport); a selector, root.closest(selector). |
50
+ | `lift` | `string` | A selector inside each item whose centre stays level as an item shrinks (the image of a card). |
51
+ | `device` | `'phone' \| 'tablet' \| 'desktop'` | phone and tablet a slider, desktop a row; else the nearest data-device, else the kit's phone breakpoint. |
52
+ | `arrows` | `{ prev: ReactNode; next: ReactNode; label?: { prev: string; next: string } }` | Previous and Next, for the row (the slider hides them). |
53
+ | `arrowLook` | `'solid' \| 'raised-inverse'` | solid is the primary fill; raised-inverse the raised IconButton in a light island. Unset: solid in light, raised-inverse in dark (the nearest data-theme, followed as it changes). |
54
+ | `onChange` | `(index: number) => void` | The real item now centred (slider) or first (row). |
55
+ | `className` | `string` | |
56
+
57
+ ## Component tokens
58
+
59
+ `--dk-component-carousel-gap`, `--dk-component-carousel-slider-item-width`, `--dk-component-carousel-padding-block`, `--dk-component-carousel-row-count`, `--dk-component-carousel-row-count-wide`, `--dk-component-carousel-row-count-medium`, `--dk-component-carousel-row-count-narrow`, `--dk-component-carousel-row-peek`, `--dk-component-carousel-fade-inset`, `--dk-component-carousel-item-press-scale`, `--dk-component-carousel-arrow-shadow`, `--dk-component-carousel-arrow-shadow-hover`, `--dk-component-carousel-arrow-shadow-active`, `--dk-component-carousel-arrow-offset`
package/manifest/components/icon-button.md CHANGED
@@ -6,7 +6,7 @@ A button whose whole label is its icon. Same rungs as Button, so the two line up
6
6
  ## Anatomy (HTML)
7
7
 
8
8
  ```text
9
- button.dk-component-icon-button[data-variant="subtle|ghost|plain|raised"]?[data-status="primary"]?[data-size="extra-small|small|medium|large"]?[aria-label][aria-pressed]?[data-pressed-glyph="fill"]?
9
+ button.dk-component-icon-button[data-variant="subtle|ghost|plain|raised|solid"]?[data-status="primary"]?[data-size="extra-small|small|medium|large"]?[aria-label][aria-pressed]?[data-pressed-glyph="fill"]?
10
10
  svg | i.dk-component-icon (the glyph)
11
11
  span.__label[hidden]? (optional; when present, hidden is
12
12
  required: words beside the glyph, drawn
@@ -22,7 +22,7 @@ button.dk-component-icon-button[data-variant="subtle|ghost|plain|raised"]?[data-
22
22
  | `data-pressed-glyph` | `fill` |
23
23
  | `data-pseudo-class` | `active`, `focus`, `hover` |
24
24
  | `data-size` | `extra-small`, `large`, `medium`, `small` |
25
- | `data-variant` | `ghost`, `plain`, `raised`, `subtle` |
25
+ | `data-variant` | `ghost`, `plain`, `raised`, `solid`, `subtle` |
26
26
 
27
27
  ## React
28
28
 
@@ -35,7 +35,7 @@ import { IconButton } from '@karmo-co/drift-kit/react';
35
35
  | `'aria-label'` | `string` | |
36
36
  | `'aria-labelledby'` | `string` | |
37
37
  | `icon` (required) | `ReactNode` | The glyph: one <svg>, an icon component, or an <i data-lucide>. The component sizes it to its rung. |
38
- | `variant` | `'subtle' \| 'ghost' \| 'plain' \| 'raised'` | subtle when absent: a tint of the surface it sits on. ghost and plain are transparent at rest; raised lifts it on an elevation. |
38
+ | `variant` | `'subtle' \| 'ghost' \| 'plain' \| 'raised' \| 'solid'` | subtle when absent: a tint of the surface it sits on. ghost and plain are transparent at rest; raised lifts it on an elevation; solid is the primary fill. |
39
39
  | `size` | `'extra-small' \| 'small' \| 'medium' \| 'large'` | medium when absent. small, medium and large are Button's rungs and land on its heights, so the two line up in a row. |
40
40
  | `loading` | `boolean` | Button's loading state: a spinner in place of the glyph, aria-busy and aria-disabled, still focusable, clicks and Enter/Space blocked. |
41
41
  | `pressedGlyph` | `'fill'` | With aria-pressed: fill the glyph when on. For closed glyphs only (a heart, a star, a bookmark); a line glyph would fill to a blob. |
@@ -44,4 +44,4 @@ import { IconButton } from '@karmo-co/drift-kit/react';
44
44
 
45
45
  ## Component tokens
46
46
 
47
- `--dk-component-icon-button-extra-small-padding`, `--dk-component-icon-button-extra-small-line-height`, `--dk-component-icon-button-extra-small-icon-size`, `--dk-component-icon-button-extra-small-border-radius`, `--dk-component-icon-button-small-padding`, `--dk-component-icon-button-small-line-height`, `--dk-component-icon-button-small-icon-size`, `--dk-component-icon-button-small-border-radius`, `--dk-component-icon-button-medium-padding`, `--dk-component-icon-button-medium-line-height`, `--dk-component-icon-button-medium-icon-size`, `--dk-component-icon-button-medium-border-radius`, `--dk-component-icon-button-large-padding`, `--dk-component-icon-button-large-line-height`, `--dk-component-icon-button-large-icon-size`, `--dk-component-icon-button-large-border-radius`, `--dk-component-icon-button-extra-small-spinner-size`, `--dk-component-icon-button-small-spinner-size`, `--dk-component-icon-button-medium-spinner-size`, `--dk-component-icon-button-large-spinner-size`, `--dk-component-icon-button-spinner-border-width`, `--dk-component-icon-button-spinner-track`, `--dk-component-icon-button-spinner-head`, `--dk-component-icon-button-spin-duration`, `--dk-component-icon-button-focus-ring-width`, `--dk-component-icon-button-transform-scale-active`, `--dk-component-icon-button-subtle-surface-default`, `--dk-component-icon-button-subtle-surface-hover`, `--dk-component-icon-button-subtle-surface-active`, `--dk-component-icon-button-subtle-icon-default`, `--dk-component-icon-button-subtle-icon-hover`, `--dk-component-icon-button-subtle-icon-active`, `--dk-component-icon-button-subtle-ring`, `--dk-component-icon-button-ghost-surface-default`, `--dk-component-icon-button-ghost-surface-hover`, `--dk-component-icon-button-ghost-surface-active`, `--dk-component-icon-button-ghost-icon-default`, `--dk-component-icon-button-ghost-icon-hover`, `--dk-component-icon-button-ghost-icon-active`, `--dk-component-icon-button-ghost-ring`, `--dk-component-icon-button-plain-border-width`, `--dk-component-icon-button-plain-surface-default`, `--dk-component-icon-button-plain-surface-hover`, `--dk-component-icon-button-plain-surface-active`, `--dk-component-icon-button-plain-border-default`, `--dk-component-icon-button-plain-border-hover`, `--dk-component-icon-button-plain-border-active`, `--dk-component-icon-button-plain-icon-default`, `--dk-component-icon-button-plain-icon-hover`, `--dk-component-icon-button-plain-icon-active`, `--dk-component-icon-button-plain-ring`, `--dk-component-icon-button-raised-border-width`, `--dk-component-icon-button-raised-shadow`, `--dk-component-icon-button-raised-shadow-hover`, `--dk-component-icon-button-raised-shadow-active`, `--dk-component-icon-button-raised-surface-default`, `--dk-component-icon-button-raised-surface-hover`, `--dk-component-icon-button-raised-surface-active`, `--dk-component-icon-button-raised-border-default`, `--dk-component-icon-button-raised-border-hover`, `--dk-component-icon-button-raised-border-active`, `--dk-component-icon-button-raised-icon-default`, `--dk-component-icon-button-raised-icon-hover`, `--dk-component-icon-button-raised-icon-active`, `--dk-component-icon-button-pressed-icon-default`, `--dk-component-icon-button-pressed-icon-hover`, `--dk-component-icon-button-pressed-icon-active`, `--dk-component-icon-button-preview-fill-hover`, `--dk-component-icon-button-preview-fill-active`, `--dk-component-icon-button-raised-ring`, `--dk-component-icon-button-surface-disabled`, `--dk-component-icon-button-icon-disabled`
47
+ `--dk-component-icon-button-extra-small-padding`, `--dk-component-icon-button-extra-small-line-height`, `--dk-component-icon-button-extra-small-icon-size`, `--dk-component-icon-button-extra-small-border-radius`, `--dk-component-icon-button-small-padding`, `--dk-component-icon-button-small-line-height`, `--dk-component-icon-button-small-icon-size`, `--dk-component-icon-button-small-border-radius`, `--dk-component-icon-button-medium-padding`, `--dk-component-icon-button-medium-line-height`, `--dk-component-icon-button-medium-icon-size`, `--dk-component-icon-button-medium-border-radius`, `--dk-component-icon-button-large-padding`, `--dk-component-icon-button-large-line-height`, `--dk-component-icon-button-large-icon-size`, `--dk-component-icon-button-large-border-radius`, `--dk-component-icon-button-extra-small-spinner-size`, `--dk-component-icon-button-small-spinner-size`, `--dk-component-icon-button-medium-spinner-size`, `--dk-component-icon-button-large-spinner-size`, `--dk-component-icon-button-spinner-border-width`, `--dk-component-icon-button-spinner-track`, `--dk-component-icon-button-spinner-head`, `--dk-component-icon-button-spin-duration`, `--dk-component-icon-button-focus-ring-width`, `--dk-component-icon-button-transform-scale-active`, `--dk-component-icon-button-subtle-surface-default`, `--dk-component-icon-button-subtle-surface-hover`, `--dk-component-icon-button-subtle-surface-active`, `--dk-component-icon-button-subtle-icon-default`, `--dk-component-icon-button-subtle-icon-hover`, `--dk-component-icon-button-subtle-icon-active`, `--dk-component-icon-button-subtle-ring`, `--dk-component-icon-button-ghost-surface-default`, `--dk-component-icon-button-ghost-surface-hover`, `--dk-component-icon-button-ghost-surface-active`, `--dk-component-icon-button-ghost-icon-default`, `--dk-component-icon-button-ghost-icon-hover`, `--dk-component-icon-button-ghost-icon-active`, `--dk-component-icon-button-ghost-ring`, `--dk-component-icon-button-plain-border-width`, `--dk-component-icon-button-plain-surface-default`, `--dk-component-icon-button-plain-surface-hover`, `--dk-component-icon-button-plain-surface-active`, `--dk-component-icon-button-plain-border-default`, `--dk-component-icon-button-plain-border-hover`, `--dk-component-icon-button-plain-border-active`, `--dk-component-icon-button-plain-icon-default`, `--dk-component-icon-button-plain-icon-hover`, `--dk-component-icon-button-plain-icon-active`, `--dk-component-icon-button-plain-ring`, `--dk-component-icon-button-raised-border-width`, `--dk-component-icon-button-raised-shadow`, `--dk-component-icon-button-raised-shadow-hover`, `--dk-component-icon-button-raised-shadow-active`, `--dk-component-icon-button-raised-surface-default`, `--dk-component-icon-button-raised-surface-hover`, `--dk-component-icon-button-raised-surface-active`, `--dk-component-icon-button-raised-border-default`, `--dk-component-icon-button-raised-border-hover`, `--dk-component-icon-button-raised-border-active`, `--dk-component-icon-button-raised-icon-default`, `--dk-component-icon-button-raised-icon-hover`, `--dk-component-icon-button-raised-icon-active`, `--dk-component-icon-button-pressed-icon-default`, `--dk-component-icon-button-pressed-icon-hover`, `--dk-component-icon-button-pressed-icon-active`, `--dk-component-icon-button-preview-fill-hover`, `--dk-component-icon-button-preview-fill-active`, `--dk-component-icon-button-raised-ring`, `--dk-component-icon-button-solid-surface-default`, `--dk-component-icon-button-solid-surface-hover`, `--dk-component-icon-button-solid-surface-active`, `--dk-component-icon-button-solid-icon-default`, `--dk-component-icon-button-solid-icon-hover`, `--dk-component-icon-button-solid-icon-active`, `--dk-component-icon-button-solid-ring`, `--dk-component-icon-button-surface-disabled`, `--dk-component-icon-button-icon-disabled`
package/manifest/components/sidebar.md CHANGED
@@ -24,10 +24,12 @@ nav.dk-component-sidebar[data-collapsed]?
24
24
  | Attribute | Values the stylesheet styles |
25
25
  |---|---|
26
26
  | `data-bar-hidden` | (present or absent) |
27
+ | `data-bar-indicator` | (present or absent) |
27
28
  | `data-bar-shown` | (present or absent) |
28
29
  | `data-collapsed` | (present or absent) |
29
30
  | `data-current-within` | (present or absent) |
30
31
  | `data-indicator` | (present or absent) |
32
+ | `data-letter` | `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9` |
31
33
  | `data-level` | `2` |
32
34
  | `data-nested` | (present or absent) |
33
35
  | `data-open` | (present or absent) |
@@ -74,4 +76,4 @@ import { Sidebar } from '@karmo-co/drift-kit/react';
74
76
 
75
77
  ## Component tokens
76
78
 
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-item-border-active`, `--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`
79
+ `--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-bar-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-item-border-active`, `--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-font-weight`, `--dk-component-sidebar-bar-line-height`, `--dk-component-sidebar-bar-icon-size`, `--dk-component-sidebar-bar-pill-width`, `--dk-component-sidebar-bar-pill-height`, `--dk-component-sidebar-bar-padding`, `--dk-component-sidebar-bar-item-gap`, `--dk-component-sidebar-bar-item-radius`, `--dk-component-sidebar-bar-item-surface-hover`, `--dk-component-sidebar-bar-item-surface-active`, `--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/tag.md CHANGED
@@ -19,6 +19,7 @@ span.dk-component-tag[data-status|data-hue][data-variant][data-size]
19
19
  | `data-hue` | `next1`, `next2`, `next3`, `next4`, `prev1`, `prev2`, `prev3`, `prev4`, `primary` |
20
20
  | `data-size` | `large`, `small` |
21
21
  | `data-status` | `error`, `information`, `primary`, `success`, `warning` |
22
+ | `data-theme` | `dark`, `light` |
22
23
  | `data-tone-fill` | `solid` |
23
24
  | `data-variant` | `outline`, `solid` |
24
25
 
package/manifest/index.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "schema": 1,
3
- "version": "23.18.2",
4
- "built": "2026-11-03",
3
+ "version": "24.0.0",
4
+ "built": "2026-11-05",
5
5
  "components": [
6
6
  {
7
7
  "id": "accordion",
@@ -58,6 +58,11 @@
58
58
  "name": "Card",
59
59
  "purpose": "A surface that goes somewhere: media over or beside a title, a subtitle and a row of meta, the whole card the target."
60
60
  },
61
+ {
62
+ "id": "carousel",
63
+ "name": "Carousel",
64
+ "purpose": "Browse a short run of cards sideways. Two presentations: a slider on a phone or tablet (a centred, optionally looping run whose off-centre cards shrink and fade) and a row on a desktop (equal cards, the next one peeking, an optional bleed to the scrolling ancestor with eased edge fades, arrows that step one card). The card's content and hover are the page's; the item press and the row's snap pause are the Carousel's."
65
+ },
61
66
  {
62
67
  "id": "checkbox",
63
68
  "name": "Checkbox",
@@ -315,6 +320,10 @@
315
320
  }
316
321
  ],
317
322
  "migrations": [
323
+ {
324
+ "major": "24.0.0",
325
+ "title": "24.0.0 - 2026-11-05"
326
+ },
318
327
  {
319
328
  "major": "23.0.0",
320
329
  "title": "23.0.0 - 2026-10-17"
@@ -1557,6 +1566,34 @@
1557
1566
  "23.18.2": {
1558
1567
  "added": {
1559
1568
  "components": [],
1569
+ "tokens": [
1570
+ "--dk-surface-error-subtle-active",
1571
+ "--dk-surface-information-subtle-active",
1572
+ "--dk-surface-primary-subtle-active",
1573
+ "--dk-surface-success-subtle-active",
1574
+ "--dk-surface-warning-subtle-active"
1575
+ ]
1576
+ },
1577
+ "removed": {
1578
+ "components": [],
1579
+ "tokens": []
1580
+ }
1581
+ },
1582
+ "23.19.0": {
1583
+ "added": {
1584
+ "components": [],
1585
+ "tokens": []
1586
+ },
1587
+ "removed": {
1588
+ "components": [],
1589
+ "tokens": []
1590
+ }
1591
+ },
1592
+ "24.0.0": {
1593
+ "added": {
1594
+ "components": [
1595
+ "carousel"
1596
+ ],
1560
1597
  "tokens": []
1561
1598
  },
1562
1599
  "removed": {
package/manifest/migrations/24.0.0.md ADDED
@@ -0,0 +1,8 @@
1
+ ## 24.0.0 - 2026-11-05
2
+
3
+ ### Migration
4
+
5
+ | Was | Now |
6
+ |---|---|
7
+ | `brand="volvo"` on Logo (`data-brand="volvo"` on its mark) | Gone: use `brand="karmo"`, or leave it and Karmo's marks draw |
8
+
package/manifest/setup.md CHANGED
@@ -57,47 +57,47 @@ Both scripts are deferred, and an icon script goes after `components.js`, which
57
57
 
58
58
  ```html
59
59
  <!-- in the head -->
60
- <link rel="stylesheet" href="https://storage.googleapis.com/drift-kit-public/23.18.2/drift-kit.css" integrity="sha384-V8mvV1qajEjb3zrfFdnHXC7rSPHwKrsXL1lE37XLVArnll6MoG8Gy/GNcUaXgsd/" crossorigin="anonymous" />
61
- <script src="https://storage.googleapis.com/drift-kit-public/23.18.2/components.js" integrity="sha384-Iklbp/RUSJLxRLa0ZSIs5ILONypivMH72PR3jLhvO6sew0lI8znxbw77HLNT0uSJ" crossorigin="anonymous" defer></script>
62
- <script src="https://storage.googleapis.com/drift-kit-public/23.18.2/drift-icons-<set>.js" integrity="<its integrity>" crossorigin="anonymous" defer></script>
60
+ <link rel="stylesheet" href="https://storage.googleapis.com/drift-kit-public/24.0.0/drift-kit.css" integrity="sha384-+Ykf5AyQeHEwIGDkzeXKoDp6fftn8tlXyt5kF8BctmhviGaXPScM8iKqPYDNzzKt" crossorigin="anonymous" />
61
+ <script src="https://storage.googleapis.com/drift-kit-public/24.0.0/components.js" integrity="sha384-NYu2kIOUEKg5pN6yuVWymfHQMz6ltXrcJ1bcsptkkYKhpzGNOoZSnC1JFFEJ0KZm" crossorigin="anonymous" defer></script>
62
+ <script src="https://storage.googleapis.com/drift-kit-public/24.0.0/drift-icons-<set>.js" integrity="<its integrity>" crossorigin="anonymous" defer></script>
63
63
  <!-- the attributes go on the body -->
64
64
  <body data-brand="karmo" data-theme="light">
65
65
  ```
66
66
 
67
67
  | File | Address | Integrity |
68
68
  |---|---|---|
69
- | `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/23.18.2/drift-kit.css` | `sha384-V8mvV1qajEjb3zrfFdnHXC7rSPHwKrsXL1lE37XLVArnll6MoG8Gy/GNcUaXgsd/` |
70
- | `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/23.18.2/drift-kit.min.css` | `sha384-rfSqaPWkqvzSI3lrmzxvJjmHaHWMizsG+fDXe5ovGhlYNXTD6XSQCn9i2/ShFlw6` |
71
- | `components.js` | `https://storage.googleapis.com/drift-kit-public/23.18.2/components.js` | `sha384-Iklbp/RUSJLxRLa0ZSIs5ILONypivMH72PR3jLhvO6sew0lI8znxbw77HLNT0uSJ` |
72
- | `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.18.2/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
73
- | `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.18.2/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
74
- | `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.18.2/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
75
- | `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.18.2/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
76
- | `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.18.2/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
77
- | `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.18.2/drift-icons-lucide.js` | `sha384-wLKQdccKZKGXZJ9kcU8XCKyNI79EGI/7NrBVmOAlE0DZNThpyW1SY6z4j3teJLB0` |
78
- | `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.18.2/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
69
+ | `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/24.0.0/drift-kit.css` | `sha384-+Ykf5AyQeHEwIGDkzeXKoDp6fftn8tlXyt5kF8BctmhviGaXPScM8iKqPYDNzzKt` |
70
+ | `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/24.0.0/drift-kit.min.css` | `sha384-IfGFWkwL8TTILA7xuXdFiAam0FpXPPuGwejfdPmgDFmGu+3pd6Xgjct/oVQ3I3Kw` |
71
+ | `components.js` | `https://storage.googleapis.com/drift-kit-public/24.0.0/components.js` | `sha384-NYu2kIOUEKg5pN6yuVWymfHQMz6ltXrcJ1bcsptkkYKhpzGNOoZSnC1JFFEJ0KZm` |
72
+ | `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/24.0.0/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
73
+ | `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/24.0.0/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
74
+ | `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/24.0.0/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
75
+ | `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/24.0.0/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
76
+ | `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/24.0.0/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
77
+ | `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/24.0.0/drift-icons-lucide.js` | `sha384-wLKQdccKZKGXZJ9kcU8XCKyNI79EGI/7NrBVmOAlE0DZNThpyW1SY6z4j3teJLB0` |
78
+ | `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/24.0.0/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
79
79
 
80
80
  ### In Claude chat and Cowork
81
81
 
82
82
  Their previews load nothing from the bucket. There, link the same version from jsdelivr instead, with these addresses and integrity: the stylesheet is `drift-kit.min.css`, and the attributes still go on `<body>`.
83
83
 
84
84
  ```html
85
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.2/drift-kit.min.css" integrity="sha384-rfSqaPWkqvzSI3lrmzxvJjmHaHWMizsG+fDXe5ovGhlYNXTD6XSQCn9i2/ShFlw6" crossorigin="anonymous" />
86
- <script src="https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.2/components.js" integrity="sha384-mOzIzjZG4391OqvxsNIffuty6OdW3TM/JHnv6QGPqMwlFSQ81QkQ0kFAP5Iyap32" crossorigin="anonymous" defer></script>
85
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@24.0.0/drift-kit.min.css" integrity="sha384-IfGFWkwL8TTILA7xuXdFiAam0FpXPPuGwejfdPmgDFmGu+3pd6Xgjct/oVQ3I3Kw" crossorigin="anonymous" />
86
+ <script src="https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@24.0.0/components.js" integrity="sha384-IXnyH4rCr1SlHtIx6L2Yz6shPOIUAP4eZqJHf1of8ZnN1tD7AyInS8jLu8wOIn2i" crossorigin="anonymous" defer></script>
87
87
  ```
88
88
 
89
89
  | File | Address | Integrity |
90
90
  |---|---|---|
91
- | `components.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.2/components.js` | `sha384-mOzIzjZG4391OqvxsNIffuty6OdW3TM/JHnv6QGPqMwlFSQ81QkQ0kFAP5Iyap32` |
92
- | `drift-data-countries.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.2/drift-data-countries.js` | `sha384-GttgZnsRDPioKDxlsEyQtUqCwO0ObYYdjdjKBBt9LWThZld3OnUBnZ9EScI41qIf` |
93
- | `drift-icons-card.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.2/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
94
- | `drift-icons-coolicon.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.2/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
95
- | `drift-icons-feather.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.2/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
96
- | `drift-icons-flag-circle.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.2/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
97
- | `drift-icons-flag.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.2/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
98
- | `drift-icons-lucide.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.2/drift-icons-lucide.js` | `sha384-wLKQdccKZKGXZJ9kcU8XCKyNI79EGI/7NrBVmOAlE0DZNThpyW1SY6z4j3teJLB0` |
99
- | `drift-icons-social.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.2/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
100
- | `drift-kit.min.css` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.2/drift-kit.min.css` | `sha384-rfSqaPWkqvzSI3lrmzxvJjmHaHWMizsG+fDXe5ovGhlYNXTD6XSQCn9i2/ShFlw6` |
91
+ | `components.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@24.0.0/components.js` | `sha384-IXnyH4rCr1SlHtIx6L2Yz6shPOIUAP4eZqJHf1of8ZnN1tD7AyInS8jLu8wOIn2i` |
92
+ | `drift-data-countries.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@24.0.0/drift-data-countries.js` | `sha384-GttgZnsRDPioKDxlsEyQtUqCwO0ObYYdjdjKBBt9LWThZld3OnUBnZ9EScI41qIf` |
93
+ | `drift-icons-card.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@24.0.0/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
94
+ | `drift-icons-coolicon.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@24.0.0/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
95
+ | `drift-icons-feather.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@24.0.0/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
96
+ | `drift-icons-flag-circle.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@24.0.0/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
97
+ | `drift-icons-flag.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@24.0.0/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
98
+ | `drift-icons-lucide.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@24.0.0/drift-icons-lucide.js` | `sha384-wLKQdccKZKGXZJ9kcU8XCKyNI79EGI/7NrBVmOAlE0DZNThpyW1SY6z4j3teJLB0` |
99
+ | `drift-icons-social.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@24.0.0/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
100
+ | `drift-kit.min.css` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@24.0.0/drift-kit.min.css` | `sha384-IfGFWkwL8TTILA7xuXdFiAam0FpXPPuGwejfdPmgDFmGu+3pd6Xgjct/oVQ3I3Kw` |
101
101
 
102
102
  ### Integrity for 23.4.0
103
103
 
@@ -125,5 +125,5 @@ The behaviour script initialises every component on the page when it loads. Mark
125
125
  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.
126
126
 
127
127
  ```json
128
- {"version":"23.18.2","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"}
128
+ {"version":"24.0.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"}
129
129
  ```
package/manifest/tokens/surface.md CHANGED
@@ -42,6 +42,7 @@ Declared values, light and dark. Reference a token by name; never copy its value
42
42
  | `--dk-surface-error-mark` | `var(--dk-color-error-600)` | `var(--dk-color-error-600)` |
43
43
  | `--dk-surface-error-solid` | `var(--dk-color-error-700)` | `var(--dk-color-error-700)` |
44
44
  | `--dk-surface-error-subtle` | `var(--dk-color-error-50)` | `var(--dk-color-error-900)` |
45
+ | `--dk-surface-error-subtle-active` | `var(--dk-color-error-300)` | `var(--dk-color-error-600)` |
45
46
  | `--dk-surface-error-subtle-focus` | `var(--dk-color-error-200)` | `var(--dk-color-error-700)` |
46
47
  | `--dk-surface-error-subtle-hover` | `var(--dk-color-error-100)` | `var(--dk-color-error-800)` |
47
48
  | `--dk-surface-field-action-active` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
@@ -73,6 +74,7 @@ Declared values, light and dark. Reference a token by name; never copy its value
73
74
  | `--dk-surface-information-mark` | `var(--dk-color-information-600)` | `var(--dk-color-information-600)` |
74
75
  | `--dk-surface-information-solid` | `var(--dk-color-information-700)` | `var(--dk-color-information-700)` |
75
76
  | `--dk-surface-information-subtle` | `var(--dk-color-information-50)` | `var(--dk-color-information-900)` |
77
+ | `--dk-surface-information-subtle-active` | `var(--dk-color-information-300)` | `var(--dk-color-information-600)` |
76
78
  | `--dk-surface-information-subtle-focus` | `var(--dk-color-information-200)` | `var(--dk-color-information-700)` |
77
79
  | `--dk-surface-information-subtle-hover` | `var(--dk-color-information-100)` | `var(--dk-color-information-800)` |
78
80
  | `--dk-surface-inset-active` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-500)` |
@@ -112,6 +114,7 @@ Declared values, light and dark. Reference a token by name; never copy its value
112
114
  | `--dk-surface-primary-oos` | `var(--dk-color-primary-400)` | `var(--dk-color-primary-700)` |
113
115
  | `--dk-surface-primary-solid` | `var(--dk-color-primary-700)` | `var(--dk-color-primary-700)` |
114
116
  | `--dk-surface-primary-subtle` | `var(--dk-color-primary-50)` | `var(--dk-color-primary-850)` |
117
+ | `--dk-surface-primary-subtle-active` | `var(--dk-color-primary-300)` | `var(--dk-color-primary-600)` |
115
118
  | `--dk-surface-primary-subtle-focus` | `var(--dk-color-primary-200)` | `var(--dk-color-primary-700)` |
116
119
  | `--dk-surface-primary-subtle-hover` | `var(--dk-color-primary-100)` | `var(--dk-color-primary-800)` |
117
120
  | `--dk-surface-raised-active` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-800)` |
@@ -126,6 +129,7 @@ Declared values, light and dark. Reference a token by name; never copy its value
126
129
  | `--dk-surface-success-mark` | `var(--dk-color-primary-600)` | `var(--dk-color-primary-600)` |
127
130
  | `--dk-surface-success-solid` | `var(--dk-surface-primary-solid)` | `var(--dk-surface-primary-solid)` |
128
131
  | `--dk-surface-success-subtle` | `var(--dk-color-success-50)` | `var(--dk-color-success-900)` |
132
+ | `--dk-surface-success-subtle-active` | `var(--dk-color-success-300)` | `var(--dk-color-success-600)` |
129
133
  | `--dk-surface-success-subtle-focus` | `var(--dk-color-success-200)` | `var(--dk-color-success-700)` |
130
134
  | `--dk-surface-success-subtle-hover` | `var(--dk-color-success-100)` | `var(--dk-color-success-800)` |
131
135
  | `--dk-surface-warning-default` | `var(--dk-color-warning-500)` | `var(--dk-color-warning-600)` |
@@ -134,5 +138,6 @@ Declared values, light and dark. Reference a token by name; never copy its value
134
138
  | `--dk-surface-warning-mark` | `var(--dk-color-warning-600)` | `var(--dk-color-warning-600)` |
135
139
  | `--dk-surface-warning-solid` | `var(--dk-color-warning-700)` | `var(--dk-color-warning-700)` |
136
140
  | `--dk-surface-warning-subtle` | `var(--dk-color-warning-50)` | `var(--dk-color-warning-900)` |
141
+ | `--dk-surface-warning-subtle-active` | `var(--dk-color-warning-300)` | `var(--dk-color-warning-600)` |
137
142
  | `--dk-surface-warning-subtle-focus` | `var(--dk-color-warning-200)` | `var(--dk-color-warning-700)` |
138
143
  | `--dk-surface-warning-subtle-hover` | `var(--dk-color-warning-100)` | `var(--dk-color-warning-800)` |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@karmo-co/drift-kit-reference",
3
- "version": "23.18.2",
3
+ "version": "24.0.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"