@karmo-co/drift-kit-reference 23.5.1 → 23.6.1

package/manifest/components/app-shell.md

@@ -35,7 +35,7 @@ import { AppShell } from '@karmo-co/drift-kit/react';
 | `topBar` | `ReactNode` | A Top bar, usually sticky. |
 | `actionBar` | `ReactNode` | An Action bar, usually sticky. |
 | `children` | `ReactNode` | The page. |
-| `contained` | `boolean` | Fill the parent's box instead of the viewport: the main column scrolls and the phone bar stays in the frame. |
+| `contained` | `boolean \| 'layout'` | Fill the parent's box instead of the viewport: the main column scrolls and the phone bar stays in the frame. true makes the shell a layer (a transform) that everything fixed inside it is placed in; 'layout' (23 Oct 2026) makes it only a box, with no layer: the Sidebar's bar, drawer and scrim are absolute in it instead (its runtime writes them), so nothing in the shell is rasterised differently from the page around it. In HTML the Sidebar's runtime takes the layer away (an inline transform: none), so a layout shell with no Sidebar in it keeps the layer; when the shell stops being 'layout' the runtime gives it back at its next sync. |
 | `className` | `string` |  |
 
 ## Component tokens

package/manifest/components/avatar.md

@@ -6,9 +6,9 @@ A person, as their photo or their initials: the photo fades in once it has loade
 ## Anatomy (HTML)
 
 ```text
-span.dk-component-avatar[data-name][data-size="24|40|48"]?[data-variant="solid"]?[data-hue]?
+span.dk-component-avatar[data-name][data-size="24|40|48|<px>"]?[data-variant="solid"]?[data-hue]?
   img?                          (the photo; the runtime sets data-loaded)
-  span.__initials             (written by the runtime from data-name)
+  span.__initials             (written by the runtime from data-name, unless written in it)
 ```
 
 ## Attributes
@@ -29,8 +29,9 @@ import { Avatar } from '@karmo-co/drift-kit/react';
 | Prop | Type | Notes |
 |---|---|---|
 | `name` (required) | `string` | Whose it is: the initials come from it ("Ada Lovelace" is AL). |
+| `initials` | `string` | The initials to draw, when the product has them already (a record's, or a name that does not split the usual way). Worked out from name when absent. |
 | `src` | `string` | A photo. Until it decodes, and if it fails, the initials show. |
-| `size` | `24 \| 32 \| 40 \| 48` | 32 when absent. |
+| `size` | `AvatarSize \| number` | 32 when absent. 24, 40 or 48, or any other number of pixels: the avatar is drawn at that size, its initials a quarter of it plus 4px (the step the named sizes follow, so 64 has 20px initials). |
 | `hue` | `AvatarHue` | A category colour instead of primary, to tell people apart without photos. |
 | `variant` | `'subtle' \| 'solid'` | Subtle when absent. |
 | `label` | `string` | A name for a screen reader, for an avatar that stands on its own. Without one it is decorative: the name is usually written beside it. |

package/manifest/components/dropdown.md

@@ -9,7 +9,8 @@ A menu of commands hanging off a trigger. Select's surface, a menu's semantics:
 div.dk-component-dropdown
   button.dk-component-dropdown__trigger      (aria-haspopup="menu")
   div.dk-component-menu.dk-component-dropdown__menu   (role="menu", portalled)
-    span.dk-component-dropdown__label        (optional heading)
+    span|div.dk-component-dropdown__label    (optional heading: a span for
+                                             words, a div for an element)
     button|a.dk-component-dropdown__item     (role="menuitem"
       span.dk-component-dropdown__item-icon        | "menuitemradio"
       span.dk-component-dropdown__item-label       | "menuitemcheckbox")
@@ -44,6 +45,10 @@ import { Dropdown } from '@karmo-co/drift-kit/react';
 | `placement` | `'top' \| 'bottom' \| 'left' \| 'right'` | Where the menu opens, in dk.position's vocabulary. Below and start-aligned by default. |
 | `align` | `'start' \| 'center' \| 'end'` |  |
 | `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. |
+| `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). |
+| `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. |
+| `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. |
+| `menuClassName` | `string` | A class of the caller's on the menu itself, which is portalled out of the root and so out of reach of any selector through it. |
 | `onSelect` | `(value: string \| undefined, item: HTMLElement) => void` | Any item chosen: its value (undefined for one without) and the element. |
 | `className` | `string` |  |
 

package/manifest/components/icon-button.md

@@ -6,8 +6,12 @@ A button whose whole label is its icon. Same rungs as Button, so the two line up
 ## Anatomy (HTML)
 
 ```text
-button.dk-component-icon-button[data-variant="subtle|ghost|plain|raised"]?[data-size="extra-small|small|medium|large"]?[aria-label][aria-pressed]?[data-pressed-glyph="fill"]?
+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"]?
   svg | i.dk-component-icon   (the glyph)
+  span.__label[hidden]?       (optional; when present, hidden is
+                              required: words beside the glyph, drawn
+                              by the fidelity looks on a desktop only,
+                              which override [hidden] on purpose)
   span.__spinner?             (while .is-loading)
 ```
 
@@ -35,6 +39,8 @@ import { IconButton } from '@karmo-co/drift-kit/react';
 | `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. |
 | `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. |
 | `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. |
+| `status` | `'primary'` | The main action of a toolbar or a row, filled. Drawn by the wireframe and mid-fi looks (filled with the ink); the full look has not designed it yet and draws the variant. |
+| `label` | `ReactNode` | Words beside the glyph, where a look draws them: the wireframe and mid-fi looks on a desktop. Hidden everywhere else, the full look included (not designed yet), so the button stays a square there. Never its name: aria-label still names it. |
 
 ## Component tokens
 

package/manifest/components/loading-spinner.md

@@ -36,6 +36,7 @@ import { LoadingSpinner } from '@karmo-co/drift-kit/react';
 | `label` | `string` |  |
 | `message` | `string` | Text under the spinner, "Loading reports". It is also the accessible name unless label is given. |
 | `brand` | `LogoBrand` |  |
+| `as` | `'div' \| 'span'` | 'span' (23 Oct 2026) for a spinner where a div is not allowed: inside a button, in its icon slot. The stylesheet draws both the same. |
 
 ## Component tokens
 

package/manifest/components/modal.md

@@ -40,13 +40,22 @@ import { Modal } from '@karmo-co/drift-kit/react';
 | `sheet` | `'auto' \| 'always' \| 'never'` |  |
 | `dismissible` | `boolean` | false: it has to be answered; Escape and the backdrop are both refused. |
 | `backdropDismiss` | `boolean` | false keeps Escape and refuses a click beside it, for a form. |
-| `initialFocus` | `string` | A selector inside the box to focus on open. |
+| `initialFocus` | `string \| false` | A selector inside the box to focus on open. false: nothing is focused on open (no ring at rest, the page keeps its focus), and nothing is given back on close unless the keyboard went in. |
 | `title` | `ReactNode` |  |
 | `icon` | `ReactNode` |  |
 | `footer` | `ReactNode` |  |
 | `showClose` | `boolean` | The header's cross. On unless dismissible is false. |
 | `closeLabel` | `string` |  |
 | `children` | `ReactNode` |  |
+| `container` | `Element \| null \| (() => Element \| null)` | Where the overlay renders instead of <body>: an element, or a function asked once it mounts. The overlay is then data-contained, absolute in it (the container must be positioned), and only the container's own content goes inert behind it. <body> (or nothing) is no container. |
+| `variant` | `'side' \| 'bare'` | 'side': a full-height panel on the inline end. 'bare': a lightbox, no box chrome. data-variant on the overlay; drawn by the fidelity looks only for now (the full look draws them as the dialog). |
+| `header` | `ReactNode` | Replaces the header's icon, title and cross with your own row. Name its title with labelledBy. |
+| `labelledBy` | `string` |  |
+| `classNames` | `{ overlay?: string; header?: string; body?: string; footer?: string }` | Classes for the parts the box's className does not reach. |
+| `scrollLock` | `boolean` | Default true. false leaves <html>'s overflow alone: a contained dialog has no page to hold still. |
+| `swapKey` | `string \| number` | Changing it while open swaps: the box plays its exit with the old content (data-swapping on the overlay), then the new content comes in and the box plays its enter; the backdrop never leaves. |
+| `onExited` | `() => void` | After the exit has played, for EVERY close (by open or by the dialog), unlike onClose. Not on unmount. |
+| `onDismiss` | `(how: ModalDismissReason) => void` | Given, the dialog never closes itself: Escape, a click beside the box and the cross call this, and the parent closes it by setting open to false. onClose is then never called. |
 
 ## Component tokens
 

package/manifest/components/select.md

@@ -90,6 +90,13 @@ import { Select } from '@karmo-co/drift-kit/react';
 | `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. |
 | `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. |
 | `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. |
+| `align` | `'start' \| 'end'` | Which edge of the trigger the menu lines up with. |
+| `menuMinWidth` | `number` | A floor for the menu's width, in px, beside the trigger's own width: the menu is as wide as the wider of the two, or its content. |
+| `exact` | `boolean` | Place the menu exactly where it was asked, to the fraction of a pixel, never flipped above the trigger or slid along the screen. For a page drawing something else's layout (a wireframe); a product wants the default, which keeps a menu on screen. |
+| `container` | `MenuContainer` | Where the menu opens instead of <body> (see MenuContainer). |
+| `searchIcon` | `string` | The search field's glyph, as raw markup like an option's icon. |
+| `searchFocus` | `boolean` | false: opening leaves focus on the trigger instead of moving it into the search field (a desktop's default); Tab from the trigger then goes into the field instead of closing. |
+| `countLabel` | `(count: number) => string` | multiple only: the trigger says how many are chosen in these words instead of holding a chip per value ("3 subscriptions selected"). |
 | `className` | `string` |  |
 | `id` | `string` |  |
 | `'aria-label'` | `string` |  |

package/manifest/components/sidebar.md

@@ -7,12 +7,16 @@ An app's main navigation. A rail on a desktop that collapses to its glyphs, and
 
 ```text
 nav.dk-component-sidebar[data-collapsed]?
-  div.__head > a.__brand > span.__mark + span.__wordmark
+  div.__head > a|div.__brand > span.__mark + span.__wordmark
+    (a div when the brand goes nowhere: named by its wordmark, or
+    role="img" with aria-label when it has none)
   div.__body
     div.__section > span.__heading? + ul.__list > a|button.__item[aria-current]?
   div.__foot
     ul.__list > button.__item.__toggle
-    div.dk-component-dropdown.__account > button.__user (an avatar and __user-text)
+    div.dk-component-dropdown.__account > button.__user
+      > span.__icon[data-bar-icon]? + an avatar + __user-text
+    (the glyph shows in place of the avatar on a phone bar only)
 ```
 
 ## Attributes
@@ -46,11 +50,11 @@ import { Sidebar } from '@karmo-co/drift-kit/react';
 |---|---|---|
 | `'aria-label'` | `string` |  |
 | `id` | `string` |  |
-| `brand` | `{ mark: ReactNode; wordmark?: ReactNode; href?: string; label?: string }` |  |
+| `brand` | `{ mark: ReactNode; wordmark?: ReactNode; href?: string \| null; label?: string }` | href null (23 Oct 2026): a brand that goes nowhere, not a link. |
 | `sections` (required) | `SidebarSection[]` |  |
 | `panel` | `SidebarPanel` | Nested: the current section's pages in a panel beside the rail. Mark the section's own row current: 'section'. |
 | `footer` | `SidebarItem[]` | Utilities above the user row: Settings, Help. On a phone bar they are in More. |
-| `user` | `SidebarUser` |  |
+| `user` | `SidebarUser` | The account row: name, meta, avatar, barLabel, menu and onSelect; barIcon (a glyph in place of the avatar on a phone bar), menuHeader (the menu opens with this row and a rule), and sheet, container and position, passed to the account menu's Dropdown. |
 | `collapsible` | `boolean` | A collapse toggle in the foot. On by default. |
 | `collapsed` | `boolean` |  |
 | `defaultCollapsed` | `boolean` |  |
@@ -59,7 +63,7 @@ import { Sidebar } from '@karmo-co/drift-kit/react';
 | `variant` | `'docked' \| 'floating'` |  |
 | `size` | `'medium' \| 'small'` | 'small' steps everything down for an app that needs the room. Medium when absent. |
 | `phone` | `'bar' \| 'drawer' \| 'rail'` |  |
-| `device` | `'auto' \| 'phone' \| 'desktop'` | Force a presentation regardless of the screen, as the docs do. |
+| `device` | `'auto' \| 'phone' \| 'tablet' \| 'desktop'` | Force a presentation regardless of the screen, as the docs do. |
 | `motion` | `'rise' \| 'simple'` | 'simple' skips the letters' rise: the labels fade. |
 | `panelEnter` | `boolean` | Play the panel's opening on mount, not only when a panel arrives later. The page knows how it was reached; the Sidebar does not. |
 | `moreLabel` | `string` |  |

package/manifest/components/stepper.md

@@ -36,7 +36,7 @@ import { Stepper } from '@karmo-co/drift-kit/react';
 | Prop | Type | Notes |
 |---|---|---|
 | `steps` (required) | `StepperStep[]` |  |
-| `current` (required) | `number` | The current step's index. Controlled: the stepper shows what you pass. |
+| `current` (required) | `number` | The current step's index. Controlled: the stepper shows what you pass. steps.length (or more, which clamps to it) is a finished flow: every step complete, none current. |
 | `variant` | `'numbered' \| 'dots' \| 'segments' \| 'inline'` |  |
 | `orientation` | `'horizontal' \| 'vertical'` |  |
 | `narrowOrientation` | `'vertical'` | 'vertical' turns the stepper vertical while it is narrow (a phone), so every step keeps its label; it goes back to orientation when wide. Without it a narrow stepper stays horizontal and shows only the current label. |
@@ -44,7 +44,7 @@ import { Stepper } from '@karmo-co/drift-kit/react';
 | `size` | `'small' \| 'medium' \| 'large'` |  |
 | `onStepClick` | `(index: number) => void` | Makes completed steps buttons. You decide whether to go back, and pass the new current. |
 | `free` | `boolean` | Every step is reachable, not only the completed ones. |
-| `onChange` | `(index: number) => void` | After the current step changes (announced to screen readers). |
+| `onChange` | `(index: number) => void` | After the current step changes (announced to screen readers). The index is steps.length when the flow finishes: there is no steps[index] then. |
 | `'aria-label'` (required) | `string` |  |
 | `className` | `string` |  |
 

package/manifest/components/toast.md

@@ -45,6 +45,8 @@ toast.show({ /* options */ });
 | `counter` | `boolean` |  |
 | `duration` | `number` | ms before it closes itself; 0 keeps it. |
 | `replace` | `boolean` |  |
+| `container` | `Element \| null \| (() => Element \| null)` | Where the region lives instead of <body> (23 Oct 2026): an element, or a function asked at each show. The region is absolute in it (the container must be positioned), one per container and placement, and replace reaches only that container's. <body> is no container. |
+| `className` | `string` | A class of the caller's on the toast itself. |
 | `onClose` | `() => void` |  |
 
 ## Component tokens

package/manifest/index.json

@@ -1,7 +1,7 @@
 {
   "schema": 1,
-  "version": "23.5.1",
-  "built": "2026-10-23",
+  "version": "23.6.1",
+  "built": "2026-10-27",
   "components": [
     {
       "id": "accordion",
@@ -1175,6 +1175,26 @@
           "components": [],
           "tokens": []
         }
+      },
+      "23.6.0": {
+        "added": {
+          "components": [],
+          "tokens": []
+        },
+        "removed": {
+          "components": [],
+          "tokens": []
+        }
+      },
+      "23.6.1": {
+        "added": {
+          "components": [],
+          "tokens": []
+        },
+        "removed": {
+          "components": [],
+          "tokens": []
+        }
       }
     }
   }

package/manifest/setup.md

@@ -26,6 +26,8 @@ Installed as `@karmo-co/drift-kit` from GitHub Packages.
 | `data-border-radius` | `bubbly`, `normal`, `sharp` |
 | `data-border-width` | `medium`, `thick`, `thin` |
 | `data-density` | `normal`, `spacious`, `tight` |
+| `data-fidelity` | `midfi`, `wireframe` |
+| `data-device` | `desktop`, `phone`, `tablet` |
 
 ## Container attributes
 
@@ -51,20 +53,49 @@ A page with no npm install (a plain HTML prototype, a slide deck) links this ver
 Both scripts are deferred, and an icon script goes after `components.js`, which replaces the icon registry when it runs: an icon script that runs first loses its set. Every tag carries its file's `integrity` from the table below and `crossorigin="anonymous"`, so a file whose bytes changed never loads. In this order:
 
 ```html
-<link rel="stylesheet" href="https://storage.googleapis.com/drift-kit-public/23.5.1/drift-kit.css" integrity="sha384-JqnAsXsPdAYb6SeXeAv0CDu+dQVrF2iEfU4CkxPiBWZ9etqR8kw9J+HVInUvGEle" crossorigin="anonymous" />
-<script src="https://storage.googleapis.com/drift-kit-public/23.5.1/components.js" integrity="sha384-UW5LldhqwoGK64Rj68rCB88mFnI66ZOJb/q5pVs2+ZmhgvkcPn6/WfiafoSk58p1" crossorigin="anonymous" defer></script>
-<script src="https://storage.googleapis.com/drift-kit-public/23.5.1/drift-icons-<set>.js" integrity="<its integrity>" crossorigin="anonymous" defer></script>
+<link rel="stylesheet" href="https://storage.googleapis.com/drift-kit-public/23.6.1/drift-kit.css" integrity="sha384-1KPdwoNY8dP62q3PAuFek/7F1iVJ9sIwaJeC9MDps2mrQur7Gy5ZQnhgfNB2kNZ1" crossorigin="anonymous" />
+<script src="https://storage.googleapis.com/drift-kit-public/23.6.1/components.js" integrity="sha384-a+GsziEadZEo+OKihZJEql+BAhCXddJegWhdZHn1n/6Pkm5QlC6UacG6MFomUc/R" crossorigin="anonymous" defer></script>
+<script src="https://storage.googleapis.com/drift-kit-public/23.6.1/drift-icons-<set>.js" integrity="<its integrity>" crossorigin="anonymous" defer></script>
 ```
 
 | File | Address | Integrity |
 |---|---|---|
-| `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/23.5.1/drift-kit.css` | `sha384-JqnAsXsPdAYb6SeXeAv0CDu+dQVrF2iEfU4CkxPiBWZ9etqR8kw9J+HVInUvGEle` |
-| `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/23.5.1/drift-kit.min.css` | `sha384-ZmXoSkPuo9j/BJreDollt4gVbvWO2fxDi+1SC/Q9DWaZAY+hAG+hSOel8MTtdXNK` |
-| `components.js` | `https://storage.googleapis.com/drift-kit-public/23.5.1/components.js` | `sha384-UW5LldhqwoGK64Rj68rCB88mFnI66ZOJb/q5pVs2+ZmhgvkcPn6/WfiafoSk58p1` |
-| `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.5.1/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
-| `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.5.1/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
-| `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.5.1/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
-| `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.5.1/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
-| `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.5.1/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
-| `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.5.1/drift-icons-lucide.js` | `sha384-yEy9LdLbPCXUy577fmNq4loJ2G9AQ1InAW54iozwnVfe8KIK6gVe2227eaNmxFi1` |
-| `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.5.1/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
+| `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/23.6.1/drift-kit.css` | `sha384-1KPdwoNY8dP62q3PAuFek/7F1iVJ9sIwaJeC9MDps2mrQur7Gy5ZQnhgfNB2kNZ1` |
+| `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/23.6.1/drift-kit.min.css` | `sha384-q9dPWOz0cXKAeg10Ng/hhdulQGlWIIFpMWfW0e+CTbn8lqMeTD0iiZ7JfDxGimYG` |
+| `components.js` | `https://storage.googleapis.com/drift-kit-public/23.6.1/components.js` | `sha384-a+GsziEadZEo+OKihZJEql+BAhCXddJegWhdZHn1n/6Pkm5QlC6UacG6MFomUc/R` |
+| `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.6.1/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
+| `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.6.1/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
+| `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.6.1/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
+| `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.6.1/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
+| `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.6.1/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
+| `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.6.1/drift-icons-lucide.js` | `sha384-yEy9LdLbPCXUy577fmNq4loJ2G9AQ1InAW54iozwnVfe8KIK6gVe2227eaNmxFi1` |
+| `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.6.1/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
+
+### Integrity for 23.4.0
+
+A page pinned to 23.4.0 keeps its version in each address and takes the integrity from here.
+
+| File | Address | Integrity |
+|---|---|---|
+| `components.js` | `https://storage.googleapis.com/drift-kit-public/23.4.0/components.js` | `sha384-B4tUaUMgOQoy7IlJk4qIR/JkIveajIbA8j13603GVhfIJznbT21dw0rRnzYI4QXK` |
+| `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.4.0/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
+| `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.4.0/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
+| `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.4.0/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
+| `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.4.0/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
+| `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.4.0/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
+| `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.4.0/drift-icons-lucide.js` | `sha384-yEy9LdLbPCXUy577fmNq4loJ2G9AQ1InAW54iozwnVfe8KIK6gVe2227eaNmxFi1` |
+| `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.4.0/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
+| `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/23.4.0/drift-kit.css` | `sha384-0Roll8sSBP0mENc86ioKN/hPpYfcI8oBtsSeWRdshsf6S7N8Rsp2VnVd2JYmtaU7` |
+| `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/23.4.0/drift-kit.min.css` | `sha384-CLIu21rr62tKaYFC7EFgQr8Wgmy8rbc318n5NzVmWeViqgsTiNx/gF2fGCoM8GAt` |
+
+## Behaviour script
+
+The behaviour script initialises every component on the page when it loads. Markup inserted later is initialised with `dk.component.<name>.init(scope)`, where `<name>` is the component id in camel case (`actionBar` for `action-bar`) and `scope` is the inserted element. React components carry their own behaviour and never need it.
+
+## Capture selectors
+
+The kit class names the drift-critique capture script keys on, at this version. Pass them to it as `--kit '<this JSON>'` so its alignment and reduced-motion checks read this version's names.
+
+```json
+{"version":"23.6.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"}
+```

package/package.json

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