@karmo-co/drift-kit-reference 23.17.1 → 23.18.0

package/manifest/components/alert.md

@@ -50,4 +50,4 @@ import { Alert } from '@karmo-co/drift-kit/react';
 
 ## Component tokens
 
-`--dk-component-alert-gap`, `--dk-component-alert-padding`, `--dk-component-alert-radius`, `--dk-component-alert-border-width`, `--dk-component-alert-icon-size`, `--dk-component-alert-dismiss-padding`, `--dk-component-alert-dismiss-offset`, `--dk-component-alert-trailing-extra`, `--dk-component-alert-small-gap`, `--dk-component-alert-small-padding`, `--dk-component-alert-small-icon-size`, `--dk-component-alert-small-dismiss-padding`, `--dk-component-alert-small-dismiss-offset`, `--dk-component-alert-small-trailing-extra`, `--dk-component-alert-title-font-size`, `--dk-component-alert-title-line-height`, `--dk-component-alert-title-font-weight`, `--dk-component-alert-body-font-size`, `--dk-component-alert-body-line-height`, `--dk-component-alert-body-font-weight`, `--dk-component-alert-small-title-font-size`, `--dk-component-alert-small-title-line-height`, `--dk-component-alert-small-body-font-size`, `--dk-component-alert-small-body-line-height`, `--dk-component-alert-pointer-depth`, `--dk-component-alert-pointer-base`, `--dk-component-alert-neutral-color`, `--dk-component-alert-primary-color`, `--dk-component-alert-warning-color`, `--dk-component-alert-error-color`, `--dk-component-alert-information-color`, `--dk-component-alert-success-color`, `--dk-component-alert-scrim-active-opacity`, `--dk-component-alert-scrim-hover-opacity`
+`--dk-component-alert-gap`, `--dk-component-alert-padding`, `--dk-component-alert-radius`, `--dk-component-alert-border-width`, `--dk-component-alert-icon-size`, `--dk-component-alert-dismiss-padding`, `--dk-component-alert-dismiss-offset`, `--dk-component-alert-trailing-extra`, `--dk-component-alert-small-gap`, `--dk-component-alert-small-padding`, `--dk-component-alert-small-icon-size`, `--dk-component-alert-small-dismiss-padding`, `--dk-component-alert-small-dismiss-offset`, `--dk-component-alert-small-trailing-extra`, `--dk-component-alert-font-family`, `--dk-component-alert-title-font-size`, `--dk-component-alert-title-line-height`, `--dk-component-alert-title-font-weight`, `--dk-component-alert-body-font-size`, `--dk-component-alert-body-line-height`, `--dk-component-alert-body-font-weight`, `--dk-component-alert-small-title-font-size`, `--dk-component-alert-small-title-line-height`, `--dk-component-alert-small-body-font-size`, `--dk-component-alert-small-body-line-height`, `--dk-component-alert-pointer-depth`, `--dk-component-alert-pointer-base`, `--dk-component-alert-neutral-color`, `--dk-component-alert-primary-color`, `--dk-component-alert-warning-color`, `--dk-component-alert-error-color`, `--dk-component-alert-information-color`, `--dk-component-alert-success-color`, `--dk-component-alert-scrim-active-opacity`, `--dk-component-alert-scrim-hover-opacity`

package/manifest/components/sidebar.md

@@ -74,4 +74,4 @@ import { Sidebar } from '@karmo-co/drift-kit/react';
 
 ## Component tokens
 
-`--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`
+`--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`

package/manifest/components/stepper.md

@@ -19,6 +19,7 @@ Where someone is in a process with a known number of steps, and what is left.
 
 | Attribute | Values the stylesheet styles |
 |---|---|
+| `data-arriving` | (present or absent) |
 | `data-error` | (present or absent) |
 | `data-labels` | `hidden` |
 | `data-narrow` | (present or absent) |
@@ -50,4 +51,4 @@ import { Stepper } from '@karmo-co/drift-kit/react';
 
 ## Component tokens
 
-`--dk-component-stepper-small-indicator-size`, `--dk-component-stepper-indicator-size`, `--dk-component-stepper-large-indicator-size`, `--dk-component-stepper-small-number-font-size`, `--dk-component-stepper-number-font-size`, `--dk-component-stepper-large-number-font-size`, `--dk-component-stepper-small-label-font-size`, `--dk-component-stepper-small-label-line-height`, `--dk-component-stepper-label-font-size`, `--dk-component-stepper-label-line-height`, `--dk-component-stepper-large-label-font-size`, `--dk-component-stepper-large-label-line-height`, `--dk-component-stepper-description-font-size`, `--dk-component-stepper-description-line-height`, `--dk-component-stepper-font-family`, `--dk-component-stepper-number-font-weight`, `--dk-component-stepper-label-font-weight`, `--dk-component-stepper-label-font-weight-current`, `--dk-component-stepper-icon-size`, `--dk-component-stepper-indicator-border-width`, `--dk-component-stepper-gap`, `--dk-component-stepper-text-gap`, `--dk-component-stepper-connector-thickness`, `--dk-component-stepper-vertical-step-gap`, `--dk-component-stepper-content-gap`, `--dk-component-stepper-target-radius`, `--dk-component-stepper-target-surface-hover`, `--dk-component-stepper-target-surface-active`, `--dk-component-stepper-inline-gap`, `--dk-component-stepper-target-padding`, `--dk-component-stepper-target-padding-block-interactive`, `--dk-component-stepper-target-padding-inline-interactive`, `--dk-component-stepper-complete-surface`, `--dk-component-stepper-complete-surface-hover`, `--dk-component-stepper-complete-surface-active`, `--dk-component-stepper-complete-icon`, `--dk-component-stepper-complete-icon-hover`, `--dk-component-stepper-complete-icon-active`, `--dk-component-stepper-complete-border`, `--dk-component-stepper-complete-border-hover`, `--dk-component-stepper-complete-border-active`, `--dk-component-stepper-current-surface`, `--dk-component-stepper-current-surface-hover`, `--dk-component-stepper-current-surface-active`, `--dk-component-stepper-current-border`, `--dk-component-stepper-current-text`, `--dk-component-stepper-upcoming-surface`, `--dk-component-stepper-upcoming-border`, `--dk-component-stepper-upcoming-text`, `--dk-component-stepper-error-surface`, `--dk-component-stepper-error-border`, `--dk-component-stepper-error-text`, `--dk-component-stepper-error-label`, `--dk-component-stepper-label-color`, `--dk-component-stepper-label-color-upcoming`, `--dk-component-stepper-label-color-complete`, `--dk-component-stepper-label-color-hover`, `--dk-component-stepper-description-color`, `--dk-component-stepper-optional-color`, `--dk-component-stepper-focus-ring`, `--dk-component-stepper-focus-ring-width`, `--dk-component-stepper-connector-track`, `--dk-component-stepper-connector-fill`, `--dk-component-stepper-fill-duration`, `--dk-component-stepper-easing`, `--dk-component-stepper-state-duration`, `--dk-component-stepper-dot-ring-width`, `--dk-component-stepper-dot-size`, `--dk-component-stepper-segment-thickness`, `--dk-component-stepper-segment-content-gap-start`, `--dk-component-stepper-segment-content-gap-end`, `--dk-component-stepper-segment-length`, `--dk-component-stepper-segment-gap`, `--dk-component-stepper-segment-radius`, `--dk-component-stepper-narrow`, `--dk-component-stepper-narrow-label-max`, `--dk-component-stepper-narrow-inline-gap`
+`--dk-component-stepper-small-indicator-size`, `--dk-component-stepper-indicator-size`, `--dk-component-stepper-large-indicator-size`, `--dk-component-stepper-small-number-font-size`, `--dk-component-stepper-number-font-size`, `--dk-component-stepper-large-number-font-size`, `--dk-component-stepper-small-label-font-size`, `--dk-component-stepper-small-label-line-height`, `--dk-component-stepper-label-font-size`, `--dk-component-stepper-label-line-height`, `--dk-component-stepper-large-label-font-size`, `--dk-component-stepper-large-label-line-height`, `--dk-component-stepper-description-font-size`, `--dk-component-stepper-description-line-height`, `--dk-component-stepper-font-family`, `--dk-component-stepper-number-font-weight`, `--dk-component-stepper-label-font-weight`, `--dk-component-stepper-label-font-weight-current`, `--dk-component-stepper-icon-size`, `--dk-component-stepper-indicator-border-width`, `--dk-component-stepper-gap`, `--dk-component-stepper-text-gap`, `--dk-component-stepper-connector-thickness`, `--dk-component-stepper-vertical-step-gap`, `--dk-component-stepper-content-gap`, `--dk-component-stepper-target-radius`, `--dk-component-stepper-target-surface-hover`, `--dk-component-stepper-target-surface-active`, `--dk-component-stepper-inline-gap`, `--dk-component-stepper-target-padding`, `--dk-component-stepper-target-padding-block-interactive`, `--dk-component-stepper-target-padding-inline-interactive`, `--dk-component-stepper-complete-surface`, `--dk-component-stepper-complete-surface-hover`, `--dk-component-stepper-complete-surface-active`, `--dk-component-stepper-complete-icon`, `--dk-component-stepper-complete-icon-hover`, `--dk-component-stepper-complete-icon-active`, `--dk-component-stepper-complete-border`, `--dk-component-stepper-complete-border-hover`, `--dk-component-stepper-complete-border-active`, `--dk-component-stepper-current-surface`, `--dk-component-stepper-current-surface-hover`, `--dk-component-stepper-current-surface-active`, `--dk-component-stepper-current-border`, `--dk-component-stepper-current-text`, `--dk-component-stepper-upcoming-surface`, `--dk-component-stepper-upcoming-border`, `--dk-component-stepper-upcoming-text`, `--dk-component-stepper-error-surface`, `--dk-component-stepper-error-border`, `--dk-component-stepper-error-text`, `--dk-component-stepper-error-label`, `--dk-component-stepper-label-color`, `--dk-component-stepper-label-color-upcoming`, `--dk-component-stepper-label-color-complete`, `--dk-component-stepper-label-color-hover`, `--dk-component-stepper-description-color`, `--dk-component-stepper-optional-color`, `--dk-component-stepper-focus-ring`, `--dk-component-stepper-focus-ring-width`, `--dk-component-stepper-connector-track`, `--dk-component-stepper-connector-fill`, `--dk-component-stepper-fill-duration`, `--dk-component-stepper-easing`, `--dk-component-stepper-state-duration`, `--dk-component-stepper-arrive-delay`, `--dk-component-stepper-arrive-pulse-duration`, `--dk-component-stepper-arrive-pulse-easing`, `--dk-component-stepper-dot-ring-width`, `--dk-component-stepper-dot-size`, `--dk-component-stepper-segment-thickness`, `--dk-component-stepper-segment-content-gap-start`, `--dk-component-stepper-segment-content-gap-end`, `--dk-component-stepper-segment-length`, `--dk-component-stepper-segment-gap`, `--dk-component-stepper-segment-radius`, `--dk-component-stepper-narrow`, `--dk-component-stepper-narrow-label-max`, `--dk-component-stepper-narrow-inline-gap`

package/manifest/components/table.md

@@ -74,4 +74,4 @@ import { Table } from '@karmo-co/drift-kit/react';
 
 ## Component tokens
 
-`--dk-component-table-small-padding-y`, `--dk-component-table-padding-y`, `--dk-component-table-large-padding-y`, `--dk-component-table-padding-inline`, `--dk-component-table-head-surface`, `--dk-component-table-head-radius`, `--dk-component-table-head-font-size`, `--dk-component-table-head-line-height`, `--dk-component-table-head-font-weight`, `--dk-component-table-head-color`, `--dk-component-table-font-family`, `--dk-component-table-font-size`, `--dk-component-table-line-height`, `--dk-component-table-large-font-size`, `--dk-component-table-large-line-height`, `--dk-component-table-font-weight`, `--dk-component-table-color`, `--dk-component-table-rule`, `--dk-component-table-rule-width`, `--dk-component-table-row-hover`, `--dk-component-table-row-active`, `--dk-component-table-row-selected`, `--dk-component-table-row-selected-hover`, `--dk-component-table-row-duration`, `--dk-component-table-row-easing`, `--dk-component-table-zebra-mix`, `--dk-component-table-zebra`, `--dk-component-table-sort-icon-size`, `--dk-component-table-sort-gap`, `--dk-component-table-sort-hover`, `--dk-component-table-sort-active`, `--dk-component-table-sort-radius`, `--dk-component-table-sort-color`, `--dk-component-table-sort-color-hover`, `--dk-component-table-sort-color-active`, `--dk-component-table-sort-icon-mix-rest`, `--dk-component-table-sort-icon-mix-hover`, `--dk-component-table-sort-icon-mix-active`, `--dk-component-table-sort-icon-color`, `--dk-component-table-sort-icon-color-hover`, `--dk-component-table-sort-icon-color-active`, `--dk-component-table-sort-icon-sorted-mix-rest`, `--dk-component-table-sort-icon-sorted-mix-hover`, `--dk-component-table-sort-icon-color-sorted`, `--dk-component-table-sort-icon-color-sorted-hover`, `--dk-component-table-sort-icon-color-sorted-active`, `--dk-component-table-empty-color`, `--dk-component-table-empty-padding-y`, `--dk-component-table-loading-padding-bottom`, `--dk-component-table-sticky-offset`, `--dk-component-table-placeholder-surface`, `--dk-component-table-placeholder-border`, `--dk-component-table-placeholder-border-width`, `--dk-component-table-ghost-surface`, `--dk-component-table-ghost-shadow`, `--dk-component-table-ghost-radius`, `--dk-component-table-reorder-duration`, `--dk-component-table-reorder-easing`, `--dk-component-table-drop-duration`, `--dk-component-table-actions-padding-block`, `--dk-component-table-actions-padding-inline`, `--dk-component-table-chip-padding-block`, `--dk-component-table-caption-font-size`, `--dk-component-table-caption-line-height`, `--dk-component-table-caption-color`
+`--dk-component-table-small-padding-y`, `--dk-component-table-padding-y`, `--dk-component-table-large-padding-y`, `--dk-component-table-padding-inline`, `--dk-component-table-scrollbar-size`, `--dk-component-table-scrollbar-inset`, `--dk-component-table-scrollbar-thumb`, `--dk-component-table-scrollbar-thumb-hover`, `--dk-component-table-head-surface`, `--dk-component-table-head-radius`, `--dk-component-table-head-font-size`, `--dk-component-table-head-line-height`, `--dk-component-table-head-font-weight`, `--dk-component-table-head-color`, `--dk-component-table-font-family`, `--dk-component-table-font-size`, `--dk-component-table-line-height`, `--dk-component-table-large-font-size`, `--dk-component-table-large-line-height`, `--dk-component-table-font-weight`, `--dk-component-table-color`, `--dk-component-table-rule`, `--dk-component-table-rule-width`, `--dk-component-table-row-hover`, `--dk-component-table-row-active`, `--dk-component-table-row-selected`, `--dk-component-table-row-selected-hover`, `--dk-component-table-row-duration`, `--dk-component-table-row-easing`, `--dk-component-table-zebra-mix`, `--dk-component-table-zebra`, `--dk-component-table-sort-icon-size`, `--dk-component-table-sort-gap`, `--dk-component-table-sort-hover`, `--dk-component-table-sort-active`, `--dk-component-table-sort-radius`, `--dk-component-table-sort-color`, `--dk-component-table-sort-color-hover`, `--dk-component-table-sort-color-active`, `--dk-component-table-sort-icon-mix-rest`, `--dk-component-table-sort-icon-mix-hover`, `--dk-component-table-sort-icon-mix-active`, `--dk-component-table-sort-icon-color`, `--dk-component-table-sort-icon-color-hover`, `--dk-component-table-sort-icon-color-active`, `--dk-component-table-sort-icon-sorted-mix-rest`, `--dk-component-table-sort-icon-sorted-mix-hover`, `--dk-component-table-sort-icon-color-sorted`, `--dk-component-table-sort-icon-color-sorted-hover`, `--dk-component-table-sort-icon-color-sorted-active`, `--dk-component-table-empty-color`, `--dk-component-table-empty-padding-y`, `--dk-component-table-loading-padding-bottom`, `--dk-component-table-sticky-offset`, `--dk-component-table-placeholder-surface`, `--dk-component-table-placeholder-border`, `--dk-component-table-placeholder-border-width`, `--dk-component-table-ghost-surface`, `--dk-component-table-ghost-shadow`, `--dk-component-table-ghost-radius`, `--dk-component-table-reorder-duration`, `--dk-component-table-reorder-easing`, `--dk-component-table-drop-duration`, `--dk-component-table-actions-padding-block`, `--dk-component-table-actions-padding-inline`, `--dk-component-table-chip-padding-block`, `--dk-component-table-caption-font-size`, `--dk-component-table-caption-line-height`, `--dk-component-table-caption-color`

package/manifest/index.json

@@ -1,7 +1,7 @@
 {
   "schema": 1,
-  "version": "23.17.1",
-  "built": "2026-11-02",
+  "version": "23.18.0",
+  "built": "2026-11-03",
   "components": [
     {
       "id": "accordion",
@@ -1519,6 +1519,22 @@
         }
       },
       "23.17.1": {
+        "added": {
+          "components": [],
+          "tokens": [
+            "--dk-border-sidebar-panel-active",
+            "--dk-motion-easing-pulse",
+            "--dk-motion-pulse-duration",
+            "--dk-motion-pulse-easing",
+            "--dk-motion-pulse-scale"
+          ]
+        },
+        "removed": {
+          "components": [],
+          "tokens": []
+        }
+      },
+      "23.18.0": {
         "added": {
           "components": [],
           "tokens": []

package/manifest/setup.md

@@ -18,7 +18,9 @@ Installed as `@karmo-co/drift-kit` from GitHub Packages.
 | `@karmo-co/drift-kit/icons/*` | `./dist/icons/*.js` |
 | `@karmo-co/drift-kit/data/*` | `./dist/data/*.js` |
 
-## Root attributes the stylesheet reads
+## Attributes on `<body>`
+
+Put these on `<body>`, never on `<html>`: the stylesheet reads them on the body and everything inside it, so on `<html>` no token resolves and the page renders in the browser's defaults. `data-brand` and `data-theme` are required; the rest are optional.
 
 | Attribute | Values |
 |---|---|
@@ -32,7 +34,7 @@ Installed as `@karmo-co/drift-kit` from GitHub Packages.
 
 ## Container attributes
 
-Set on a panel, not the root: everything inside follows. A container that sets a level or a tone paints `background: var(--dk-surface-current)`, the colour of the place it is in.
+Set on a panel, not on `<body>`: everything inside follows. A container that sets a level or a tone paints `background: var(--dk-surface-current)`, the colour of the place it is in.
 
 | Attribute | Values |
 |---|---|
@@ -54,23 +56,48 @@ 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.17.1/drift-kit.css" integrity="sha384-qm8sgVsfSEpeoM1DY7UUZjcu7TXYCkp0bIh8kDA818AbNembA7Heu/fuuh1d6ka1" crossorigin="anonymous" />
-<script src="https://storage.googleapis.com/drift-kit-public/23.17.1/components.js" integrity="sha384-YmrXnVniXjYHxurs4ZC467yLXX6CenZKTC0omX4JQGQycFizmupZSK0oPy+w1PnV" crossorigin="anonymous" defer></script>
-<script src="https://storage.googleapis.com/drift-kit-public/23.17.1/drift-icons-<set>.js" integrity="<its integrity>" crossorigin="anonymous" defer></script>
+<!-- in the head -->
+<link rel="stylesheet" href="https://storage.googleapis.com/drift-kit-public/23.18.0/drift-kit.css" integrity="sha384-ih7qMsZFYsdvvZG+EwW80W00++8OCZz5KGiaM3wpV6v52pquYkPyk/CI8tHJ8jBe" crossorigin="anonymous" />
+<script src="https://storage.googleapis.com/drift-kit-public/23.18.0/components.js" integrity="sha384-UKmEOez0eYGYl0cVyqXDvz0LWWysd8yZ5oJTWX0H/STNX+q9HWRMOGFNluQRVDdl" crossorigin="anonymous" defer></script>
+<script src="https://storage.googleapis.com/drift-kit-public/23.18.0/drift-icons-<set>.js" integrity="<its integrity>" crossorigin="anonymous" defer></script>
+<!-- the attributes go on the body -->
+<body data-brand="karmo" data-theme="light">
+```
+
+| File | Address | Integrity |
+|---|---|---|
+| `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/23.18.0/drift-kit.css` | `sha384-ih7qMsZFYsdvvZG+EwW80W00++8OCZz5KGiaM3wpV6v52pquYkPyk/CI8tHJ8jBe` |
+| `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/23.18.0/drift-kit.min.css` | `sha384-kv3tow14N5JPNflkqloySwoLDSId6AFxHoneFb1RY1ochxXZNqc9va6+D+V2GBeo` |
+| `components.js` | `https://storage.googleapis.com/drift-kit-public/23.18.0/components.js` | `sha384-UKmEOez0eYGYl0cVyqXDvz0LWWysd8yZ5oJTWX0H/STNX+q9HWRMOGFNluQRVDdl` |
+| `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.18.0/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
+| `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.18.0/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
+| `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.18.0/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
+| `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.18.0/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
+| `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.18.0/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
+| `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.18.0/drift-icons-lucide.js` | `sha384-wLKQdccKZKGXZJ9kcU8XCKyNI79EGI/7NrBVmOAlE0DZNThpyW1SY6z4j3teJLB0` |
+| `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.18.0/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
+
+### In Claude chat and Cowork
+
+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>`.
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.0/drift-kit.min.css" integrity="sha384-kv3tow14N5JPNflkqloySwoLDSId6AFxHoneFb1RY1ochxXZNqc9va6+D+V2GBeo" crossorigin="anonymous" />
+<script src="https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.0/components.js" integrity="sha384-mOzIzjZG4391OqvxsNIffuty6OdW3TM/JHnv6QGPqMwlFSQ81QkQ0kFAP5Iyap32" crossorigin="anonymous" defer></script>
 ```
 
 | File | Address | Integrity |
 |---|---|---|
-| `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/23.17.1/drift-kit.css` | `sha384-qm8sgVsfSEpeoM1DY7UUZjcu7TXYCkp0bIh8kDA818AbNembA7Heu/fuuh1d6ka1` |
-| `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/23.17.1/drift-kit.min.css` | `sha384-YMYBt9mOtoCks/9+IujnigDmKbswU4bdwkYwNSZEZNeQIlhySUAWnBzT0xiGWpfm` |
-| `components.js` | `https://storage.googleapis.com/drift-kit-public/23.17.1/components.js` | `sha384-YmrXnVniXjYHxurs4ZC467yLXX6CenZKTC0omX4JQGQycFizmupZSK0oPy+w1PnV` |
-| `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.17.1/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
-| `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.17.1/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
-| `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.17.1/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
-| `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.17.1/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
-| `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.17.1/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
-| `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.17.1/drift-icons-lucide.js` | `sha384-wLKQdccKZKGXZJ9kcU8XCKyNI79EGI/7NrBVmOAlE0DZNThpyW1SY6z4j3teJLB0` |
-| `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.17.1/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
+| `components.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.0/components.js` | `sha384-mOzIzjZG4391OqvxsNIffuty6OdW3TM/JHnv6QGPqMwlFSQ81QkQ0kFAP5Iyap32` |
+| `drift-data-countries.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.0/drift-data-countries.js` | `sha384-GttgZnsRDPioKDxlsEyQtUqCwO0ObYYdjdjKBBt9LWThZld3OnUBnZ9EScI41qIf` |
+| `drift-icons-card.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.0/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
+| `drift-icons-coolicon.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.0/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
+| `drift-icons-feather.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.0/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
+| `drift-icons-flag-circle.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.0/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
+| `drift-icons-flag.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.0/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
+| `drift-icons-lucide.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.0/drift-icons-lucide.js` | `sha384-wLKQdccKZKGXZJ9kcU8XCKyNI79EGI/7NrBVmOAlE0DZNThpyW1SY6z4j3teJLB0` |
+| `drift-icons-social.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.0/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
+| `drift-kit.min.css` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.0/drift-kit.min.css` | `sha384-kv3tow14N5JPNflkqloySwoLDSId6AFxHoneFb1RY1ochxXZNqc9va6+D+V2GBeo` |
 
 ### Integrity for 23.4.0
 
@@ -98,5 +125,5 @@ The behaviour script initialises every component on the page when it loads. Mark
 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.17.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"}
+{"version":"23.18.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"}
 ```

package/manifest/tokens/border.md

@@ -131,7 +131,8 @@ Declared values, light and dark. Reference a token by name; never copy its value
 | `--dk-border-raised-hover` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
 | `--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))` |
 | `--dk-border-sidebar-panel` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-1000)` |
-| `--dk-border-sidebar-panel-hover` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-900)` |
+| `--dk-border-sidebar-panel-active` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-600)` |
+| `--dk-border-sidebar-panel-hover` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-800)` |
 | `--dk-border-success-default` | `var(--dk-color-success-500)` | `var(--dk-color-success-400)` |
 | `--dk-border-success-elevation` | `var(--dk-color-success-800)` | `var(--dk-color-success-800)` |
 | `--dk-border-success-elevation-focus` | `var(--dk-color-success-700)` | `var(--dk-color-success-700)` |

package/manifest/tokens/motion.md

@@ -30,6 +30,7 @@ Declared values, light and dark. Reference a token by name; never copy its value
 | `--dk-motion-easing-emphasized` | `var(--dk-primitive-motion-easing-emphasized)` | `var(--dk-primitive-motion-easing-emphasized)` |
 | `--dk-motion-easing-exit` | `var(--dk-primitive-motion-easing-exit)` | `var(--dk-primitive-motion-easing-exit)` |
 | `--dk-motion-easing-gentle` | `var(--dk-primitive-motion-easing-gentle)` | `var(--dk-primitive-motion-easing-gentle)` |
+| `--dk-motion-easing-pulse` | `var(--dk-primitive-motion-easing-pulse)` | `var(--dk-primitive-motion-easing-pulse)` |
 | `--dk-motion-easing-spring` | `var(--dk-primitive-motion-easing-spring)` | `var(--dk-primitive-motion-easing-spring)` |
 | `--dk-motion-easing-standard` | `var(--dk-primitive-motion-easing-standard)` | `var(--dk-primitive-motion-easing-standard)` |
 | `--dk-motion-enter-duration` | `var(--dk-motion-duration-moderate)` | `var(--dk-motion-duration-moderate)` |
@@ -62,6 +63,9 @@ Declared values, light and dark. Reference a token by name; never copy its value
 | `--dk-motion-press-scale-item` | `var(--dk-primitive-transform-scale-active-item)` | `var(--dk-primitive-transform-scale-active-item)` |
 | `--dk-motion-press-scale-panel` | `var(--dk-primitive-transform-scale-active-panel)` | `var(--dk-primitive-transform-scale-active-panel)` |
 | `--dk-motion-press-scale-surface` | `var(--dk-primitive-transform-scale-active-surface)` | `var(--dk-primitive-transform-scale-active-surface)` |
+| `--dk-motion-pulse-duration` | `var(--dk-motion-duration-slow)` | `var(--dk-motion-duration-slow)` |
+| `--dk-motion-pulse-easing` | `var(--dk-motion-easing-pulse)` | `var(--dk-motion-easing-pulse)` |
+| `--dk-motion-pulse-scale` | `var(--dk-primitive-transform-scale-pulse)` | `var(--dk-primitive-transform-scale-pulse)` |
 | `--dk-motion-rise-char-beat` | `15ms` | `15ms` |
 | `--dk-motion-rise-row-beat` | `20ms` | `20ms` |
 | `--dk-motion-state-duration` | `var(--dk-motion-state-exit-duration)` | `var(--dk-motion-state-exit-duration)` |
@@ -83,6 +87,7 @@ Every pattern is a duration and an easing pair, named for the pattern in the tok
 | Something appearing or leaving: a menu, a toast, a modal | `enter`, `exit` (`enter-large`, `exit-large` for big surfaces) |
 | Opening in place: an accordion, a revealed row | `expand`, on `grid-template-rows` for a height |
 | Confirming an action: a tick, a toggle settling | `feedback` |
+| Something that has just become what it is, growing a little and settling back: a step lighting up | `pulse`, on the `dk-motion-pulse` keyframe |
 | Something moving across: a sliding indicator, a thumb | `travel` |
 | Spinners and other loops | `loop` (an easing only: a loop's length is its own) |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@karmo-co/drift-kit-reference",
-  "version": "23.17.1",
+  "version": "23.18.0",
   "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"