@karmo-co/drift-kit-reference 23.17.0 → 23.18.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/alert.md +1 -1
  2. package/manifest/components/sidebar.md +1 -1
  3. package/manifest/components/stepper.md +2 -1
  4. package/manifest/components/table.md +1 -1
  5. package/manifest/index.json +28 -2
  6. package/manifest/setup.md +43 -16
  7. package/manifest/tokens/border.md +2 -1
  8. package/manifest/tokens/motion.md +5 -0
  9. package/package.json +1 -1
package/manifest/components/alert.md CHANGED
@@ -50,4 +50,4 @@ import { Alert } from '@karmo-co/drift-kit/react';
50
50
 
51
51
  ## Component tokens
52
52
 
53
- `--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`
53
+ `--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 CHANGED
@@ -74,4 +74,4 @@ import { Sidebar } from '@karmo-co/drift-kit/react';
74
74
 
75
75
  ## Component tokens
76
76
 
77
- `--dk-component-sidebar-width`, `--dk-component-sidebar-collapsed-width`, `--dk-component-sidebar-padding-block`, `--dk-component-sidebar-padding-inline`, `--dk-component-sidebar-gap`, `--dk-component-sidebar-section-gap`, `--dk-component-sidebar-border-width`, `--dk-component-sidebar-docked-surface`, `--dk-component-sidebar-docked-border`, `--dk-component-sidebar-floating-surface`, `--dk-component-sidebar-floating-border`, `--dk-component-sidebar-floating-radius`, `--dk-component-sidebar-floating-shadow`, `--dk-component-sidebar-floating-inset`, `--dk-component-sidebar-blur`, `--dk-component-sidebar-brand-height`, `--dk-component-sidebar-head-height`, `--dk-component-sidebar-brand-mark-size`, `--dk-component-sidebar-brand-gap`, `--dk-component-sidebar-wordmark-font-family`, `--dk-component-sidebar-wordmark-font-size`, `--dk-component-sidebar-wordmark-font-weight`, `--dk-component-sidebar-wordmark-color`, `--dk-component-sidebar-divider`, `--dk-component-sidebar-item-height`, `--dk-component-sidebar-item-gap`, `--dk-component-sidebar-item-radius`, `--dk-component-sidebar-item-icon-size`, `--dk-component-sidebar-item-font-family`, `--dk-component-sidebar-item-font-size`, `--dk-component-sidebar-item-line-height`, `--dk-component-sidebar-item-font-weight`, `--dk-component-sidebar-item-text`, `--dk-component-sidebar-item-text-hover`, `--dk-component-sidebar-item-text-active`, `--dk-component-sidebar-item-surface-hover`, `--dk-component-sidebar-item-border-hover`, `--dk-component-sidebar-item-surface-active`, `--dk-component-sidebar-item-border-active`, `--dk-component-sidebar-item-text-disabled`, `--dk-component-sidebar-item-press-scale`, `--dk-component-sidebar-bar-press-scale`, `--dk-component-sidebar-focus-ring`, `--dk-component-sidebar-focus-ring-width`, `--dk-component-sidebar-current-surface`, `--dk-component-sidebar-current-surface-hover`, `--dk-component-sidebar-current-border`, `--dk-component-sidebar-current-border-hover`, `--dk-component-sidebar-current-border-active`, `--dk-component-sidebar-current-text`, `--dk-component-sidebar-menu-current-text`, `--dk-component-sidebar-menu-current-font-weight`, `--dk-component-sidebar-child-height`, `--dk-component-sidebar-child-icon-size`, `--dk-component-sidebar-child-inset`, `--dk-component-sidebar-child-gap`, `--dk-component-sidebar-child-font-weight`, `--dk-component-sidebar-guide`, `--dk-component-sidebar-guide-width`, `--dk-component-sidebar-guide-radius`, `--dk-component-sidebar-heading-font-size`, `--dk-component-sidebar-heading-line-height`, `--dk-component-sidebar-heading-font-weight`, `--dk-component-sidebar-heading-letter-spacing`, `--dk-component-sidebar-heading-color`, `--dk-component-sidebar-badge-size`, `--dk-component-sidebar-badge-font-size`, `--dk-component-sidebar-badge-font-weight`, `--dk-component-sidebar-badge-surface`, `--dk-component-sidebar-badge-text`, `--dk-component-sidebar-badge-current-surface`, `--dk-component-sidebar-badge-current-text`, `--dk-component-sidebar-dot-size`, `--dk-component-sidebar-dot-surface`, `--dk-component-sidebar-user-height`, `--dk-component-sidebar-user-avatar-size`, `--dk-component-sidebar-user-text-gap`, `--dk-component-sidebar-user-name-font-size`, `--dk-component-sidebar-user-name-font-weight`, `--dk-component-sidebar-user-name-color`, `--dk-component-sidebar-user-meta-font-size`, `--dk-component-sidebar-user-meta-color`, `--dk-component-sidebar-panel-width`, `--dk-component-sidebar-panel-padding`, `--dk-component-sidebar-panel-radius`, `--dk-component-sidebar-panel-surface`, `--dk-component-sidebar-panel-border`, `--dk-component-sidebar-panel-item-surface-hover`, `--dk-component-sidebar-panel-item-border-hover`, `--dk-component-sidebar-panel-title-font-size`, `--dk-component-sidebar-panel-title-font-weight`, `--dk-component-sidebar-panel-title-color`, `--dk-component-sidebar-scrollbar-size`, `--dk-component-sidebar-scrollbar-thumb`, `--dk-component-sidebar-scrollbar-thumb-hover`, `--dk-component-sidebar-duration`, `--dk-component-sidebar-easing`, `--dk-component-sidebar-rise-duration`, `--dk-component-sidebar-rise-stagger`, `--dk-component-sidebar-rise-row-stagger`, `--dk-component-sidebar-indicator-duration`, `--dk-component-sidebar-group-row-duration`, `--dk-component-sidebar-group-stagger`, `--dk-component-sidebar-group-easing`, `--dk-component-sidebar-panel-duration`, `--dk-component-sidebar-panel-easing`, `--dk-component-sidebar-panel-rows-start`, `--dk-component-sidebar-panel-row-duration`, `--dk-component-sidebar-panel-row-easing`, `--dk-component-sidebar-panel-row-beat`, `--dk-component-sidebar-panel-row-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`
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`
package/manifest/components/stepper.md CHANGED
@@ -19,6 +19,7 @@ Where someone is in a process with a known number of steps, and what is left.
19
19
 
20
20
  | Attribute | Values the stylesheet styles |
21
21
  |---|---|
22
+ | `data-arriving` | (present or absent) |
22
23
  | `data-error` | (present or absent) |
23
24
  | `data-labels` | `hidden` |
24
25
  | `data-narrow` | (present or absent) |
@@ -50,4 +51,4 @@ import { Stepper } from '@karmo-co/drift-kit/react';
50
51
 
51
52
  ## Component tokens
52
53
 
53
- `--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`
54
+ `--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 CHANGED
@@ -74,4 +74,4 @@ import { Table } from '@karmo-co/drift-kit/react';
74
74
 
75
75
  ## Component tokens
76
76
 
77
- `--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`
77
+ `--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 CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "schema": 1,
3
- "version": "23.17.0",
4
- "built": "2026-11-02",
3
+ "version": "23.18.0",
4
+ "built": "2026-11-03",
5
5
  "components": [
6
6
  {
7
7
  "id": "accordion",
@@ -1517,6 +1517,32 @@
1517
1517
  "components": [],
1518
1518
  "tokens": []
1519
1519
  }
1520
+ },
1521
+ "23.17.1": {
1522
+ "added": {
1523
+ "components": [],
1524
+ "tokens": [
1525
+ "--dk-border-sidebar-panel-active",
1526
+ "--dk-motion-easing-pulse",
1527
+ "--dk-motion-pulse-duration",
1528
+ "--dk-motion-pulse-easing",
1529
+ "--dk-motion-pulse-scale"
1530
+ ]
1531
+ },
1532
+ "removed": {
1533
+ "components": [],
1534
+ "tokens": []
1535
+ }
1536
+ },
1537
+ "23.18.0": {
1538
+ "added": {
1539
+ "components": [],
1540
+ "tokens": []
1541
+ },
1542
+ "removed": {
1543
+ "components": [],
1544
+ "tokens": []
1545
+ }
1520
1546
  }
1521
1547
  }
1522
1548
  }
package/manifest/setup.md CHANGED
@@ -18,7 +18,9 @@ Installed as `@karmo-co/drift-kit` from GitHub Packages.
18
18
  | `@karmo-co/drift-kit/icons/*` | `./dist/icons/*.js` |
19
19
  | `@karmo-co/drift-kit/data/*` | `./dist/data/*.js` |
20
20
 
21
- ## Root attributes the stylesheet reads
21
+ ## Attributes on `<body>`
22
+
23
+ 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.
22
24
 
23
25
  | Attribute | Values |
24
26
  |---|---|
@@ -32,7 +34,7 @@ Installed as `@karmo-co/drift-kit` from GitHub Packages.
32
34
 
33
35
  ## Container attributes
34
36
 
35
- 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.
37
+ 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.
36
38
 
37
39
  | Attribute | Values |
38
40
  |---|---|
@@ -54,23 +56,48 @@ A page with no npm install (a plain HTML prototype, a slide deck) links this ver
54
56
  Both scripts are deferred, and an icon script goes after `components.js`, which replaces the icon registry when it runs: an icon script that runs first loses its set. Every tag carries its file's `integrity` from the table below and `crossorigin="anonymous"`, so a file whose bytes changed never loads. In this order:
55
57
 
56
58
  ```html
57
- <link rel="stylesheet" href="https://storage.googleapis.com/drift-kit-public/23.17.0/drift-kit.css" integrity="sha384-RxCZ0/ApdBCGMGKVI7bhFvs7m73GpNeloREs6LMeDlXmN1GEJ8Cpm1VdqYKA2FK0" crossorigin="anonymous" />
58
- <script src="https://storage.googleapis.com/drift-kit-public/23.17.0/components.js" integrity="sha384-Ti7ND2rYe6YAu9lTmHvMBtcFGTBb9tNwlSK67a8P3ISQB2biYWEn50fgJsWU3RCh" crossorigin="anonymous" defer></script>
59
- <script src="https://storage.googleapis.com/drift-kit-public/23.17.0/drift-icons-<set>.js" integrity="<its integrity>" crossorigin="anonymous" defer></script>
59
+ <!-- in the head -->
60
+ <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" />
61
+ <script src="https://storage.googleapis.com/drift-kit-public/23.18.0/components.js" integrity="sha384-UKmEOez0eYGYl0cVyqXDvz0LWWysd8yZ5oJTWX0H/STNX+q9HWRMOGFNluQRVDdl" crossorigin="anonymous" defer></script>
62
+ <script src="https://storage.googleapis.com/drift-kit-public/23.18.0/drift-icons-<set>.js" integrity="<its integrity>" crossorigin="anonymous" defer></script>
63
+ <!-- the attributes go on the body -->
64
+ <body data-brand="karmo" data-theme="light">
65
+ ```
66
+
67
+ | File | Address | Integrity |
68
+ |---|---|---|
69
+ | `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/23.18.0/drift-kit.css` | `sha384-ih7qMsZFYsdvvZG+EwW80W00++8OCZz5KGiaM3wpV6v52pquYkPyk/CI8tHJ8jBe` |
70
+ | `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/23.18.0/drift-kit.min.css` | `sha384-kv3tow14N5JPNflkqloySwoLDSId6AFxHoneFb1RY1ochxXZNqc9va6+D+V2GBeo` |
71
+ | `components.js` | `https://storage.googleapis.com/drift-kit-public/23.18.0/components.js` | `sha384-UKmEOez0eYGYl0cVyqXDvz0LWWysd8yZ5oJTWX0H/STNX+q9HWRMOGFNluQRVDdl` |
72
+ | `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.18.0/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
73
+ | `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.18.0/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
74
+ | `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.18.0/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
75
+ | `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.18.0/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
76
+ | `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.18.0/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
77
+ | `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.18.0/drift-icons-lucide.js` | `sha384-wLKQdccKZKGXZJ9kcU8XCKyNI79EGI/7NrBVmOAlE0DZNThpyW1SY6z4j3teJLB0` |
78
+ | `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.18.0/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
79
+
80
+ ### In Claude chat and Cowork
81
+
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
+
84
+ ```html
85
+ <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" />
86
+ <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>
60
87
  ```
61
88
 
62
89
  | File | Address | Integrity |
63
90
  |---|---|---|
64
- | `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/23.17.0/drift-kit.css` | `sha384-RxCZ0/ApdBCGMGKVI7bhFvs7m73GpNeloREs6LMeDlXmN1GEJ8Cpm1VdqYKA2FK0` |
65
- | `drift-kit.min.css` | `https://storage.googleapis.com/drift-kit-public/23.17.0/drift-kit.min.css` | `sha384-xHK7IG6H+GUXXdscYAWZRNMGjckIPWy799u6oZ6US67s1pt4QeI0H6klkThT2Bk4` |
66
- | `components.js` | `https://storage.googleapis.com/drift-kit-public/23.17.0/components.js` | `sha384-Ti7ND2rYe6YAu9lTmHvMBtcFGTBb9tNwlSK67a8P3ISQB2biYWEn50fgJsWU3RCh` |
67
- | `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.17.0/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
68
- | `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.17.0/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
69
- | `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.17.0/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
70
- | `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.17.0/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
71
- | `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.17.0/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
72
- | `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.17.0/drift-icons-lucide.js` | `sha384-wLKQdccKZKGXZJ9kcU8XCKyNI79EGI/7NrBVmOAlE0DZNThpyW1SY6z4j3teJLB0` |
73
- | `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.17.0/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
91
+ | `components.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.0/components.js` | `sha384-mOzIzjZG4391OqvxsNIffuty6OdW3TM/JHnv6QGPqMwlFSQ81QkQ0kFAP5Iyap32` |
92
+ | `drift-data-countries.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.0/drift-data-countries.js` | `sha384-GttgZnsRDPioKDxlsEyQtUqCwO0ObYYdjdjKBBt9LWThZld3OnUBnZ9EScI41qIf` |
93
+ | `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` |
94
+ | `drift-icons-coolicon.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.0/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
95
+ | `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` |
96
+ | `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` |
97
+ | `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` |
98
+ | `drift-icons-lucide.js` | `https://cdn.jsdelivr.net/npm/@karmo-co/drift-kit-public@23.18.0/drift-icons-lucide.js` | `sha384-wLKQdccKZKGXZJ9kcU8XCKyNI79EGI/7NrBVmOAlE0DZNThpyW1SY6z4j3teJLB0` |
99
+ | `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` |
100
+ | `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` |
74
101
 
75
102
  ### Integrity for 23.4.0
76
103
 
@@ -98,5 +125,5 @@ The behaviour script initialises every component on the page when it loads. Mark
98
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.
99
126
 
100
127
  ```json
101
- {"version":"23.17.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"}
128
+ {"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"}
102
129
  ```
package/manifest/tokens/border.md CHANGED
@@ -131,7 +131,8 @@ Declared values, light and dark. Reference a token by name; never copy its value
131
131
  | `--dk-border-raised-hover` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-700)` |
132
132
  | `--dk-border-raised-subtle` | `rgb(from var(--dk-color-base-black) r g b / var(--dk-primitive-opacity-hairline-subtle))` | `rgb(from var(--dk-color-base-white) r g b / var(--dk-primitive-opacity-hairline-subtle-inverse))` |
133
133
  | `--dk-border-sidebar-panel` | `var(--dk-color-neutral-50)` | `var(--dk-color-neutral-1000)` |
134
- | `--dk-border-sidebar-panel-hover` | `var(--dk-color-neutral-100)` | `var(--dk-color-neutral-900)` |
134
+ | `--dk-border-sidebar-panel-active` | `var(--dk-color-neutral-300)` | `var(--dk-color-neutral-600)` |
135
+ | `--dk-border-sidebar-panel-hover` | `var(--dk-color-neutral-200)` | `var(--dk-color-neutral-800)` |
135
136
  | `--dk-border-success-default` | `var(--dk-color-success-500)` | `var(--dk-color-success-400)` |
136
137
  | `--dk-border-success-elevation` | `var(--dk-color-success-800)` | `var(--dk-color-success-800)` |
137
138
  | `--dk-border-success-elevation-focus` | `var(--dk-color-success-700)` | `var(--dk-color-success-700)` |
package/manifest/tokens/motion.md CHANGED
@@ -30,6 +30,7 @@ Declared values, light and dark. Reference a token by name; never copy its value
30
30
  | `--dk-motion-easing-emphasized` | `var(--dk-primitive-motion-easing-emphasized)` | `var(--dk-primitive-motion-easing-emphasized)` |
31
31
  | `--dk-motion-easing-exit` | `var(--dk-primitive-motion-easing-exit)` | `var(--dk-primitive-motion-easing-exit)` |
32
32
  | `--dk-motion-easing-gentle` | `var(--dk-primitive-motion-easing-gentle)` | `var(--dk-primitive-motion-easing-gentle)` |
33
+ | `--dk-motion-easing-pulse` | `var(--dk-primitive-motion-easing-pulse)` | `var(--dk-primitive-motion-easing-pulse)` |
33
34
  | `--dk-motion-easing-spring` | `var(--dk-primitive-motion-easing-spring)` | `var(--dk-primitive-motion-easing-spring)` |
34
35
  | `--dk-motion-easing-standard` | `var(--dk-primitive-motion-easing-standard)` | `var(--dk-primitive-motion-easing-standard)` |
35
36
  | `--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
62
63
  | `--dk-motion-press-scale-item` | `var(--dk-primitive-transform-scale-active-item)` | `var(--dk-primitive-transform-scale-active-item)` |
63
64
  | `--dk-motion-press-scale-panel` | `var(--dk-primitive-transform-scale-active-panel)` | `var(--dk-primitive-transform-scale-active-panel)` |
64
65
  | `--dk-motion-press-scale-surface` | `var(--dk-primitive-transform-scale-active-surface)` | `var(--dk-primitive-transform-scale-active-surface)` |
66
+ | `--dk-motion-pulse-duration` | `var(--dk-motion-duration-slow)` | `var(--dk-motion-duration-slow)` |
67
+ | `--dk-motion-pulse-easing` | `var(--dk-motion-easing-pulse)` | `var(--dk-motion-easing-pulse)` |
68
+ | `--dk-motion-pulse-scale` | `var(--dk-primitive-transform-scale-pulse)` | `var(--dk-primitive-transform-scale-pulse)` |
65
69
  | `--dk-motion-rise-char-beat` | `15ms` | `15ms` |
66
70
  | `--dk-motion-rise-row-beat` | `20ms` | `20ms` |
67
71
  | `--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
83
87
  | Something appearing or leaving: a menu, a toast, a modal | `enter`, `exit` (`enter-large`, `exit-large` for big surfaces) |
84
88
  | Opening in place: an accordion, a revealed row | `expand`, on `grid-template-rows` for a height |
85
89
  | Confirming an action: a tick, a toggle settling | `feedback` |
90
+ | 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 |
86
91
  | Something moving across: a sliding indicator, a thumb | `travel` |
87
92
  | Spinners and other loops | `loop` (an easing only: a loop's length is its own) |
88
93
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@karmo-co/drift-kit-reference",
3
- "version": "23.17.0",
3
+ "version": "23.18.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"