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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/bin/drift-kit-ref.js +31 -3
  2. package/manifest/index.json +782 -3
  3. package/manifest/setup.md +42 -0
  4. package/manifest/tokens/interactive.md +16 -0
  5. package/manifest/tokens/layout.md +8 -0
  6. package/manifest/tokens/motion.md +28 -0
  7. package/package.json +1 -1
package/bin/drift-kit-ref.js CHANGED
@@ -98,6 +98,33 @@ function compare(a, b) {
98
98
  return 0;
99
99
  }
100
100
 
101
+ // ---------- the names each release recorded ----------
102
+ /* index.json's history holds, per version from 23.4.0 on, the component ids
103
+ and token names it added and removed; folding them in version order gives
104
+ the names a version had (23 Oct 2026). */
105
+ function namesAt(history, version) {
106
+ const all = Object.keys((history && history.versions) || {}).filter((x) => SEMVER.test(x)).sort(compare);
107
+ if (!all.includes(version)) return null;
108
+ const names = { components: new Set(), tokens: new Set() };
109
+ for (const x of all.filter((y) => compare(y, version) <= 0)) {
110
+ const step = history.versions[x];
111
+ for (const kind of ['components', 'tokens']) {
112
+ for (const n of (step.added && step.added[kind]) || []) names[kind].add(n);
113
+ for (const n of (step.removed && step.removed[kind]) || []) names[kind].delete(n);
114
+ }
115
+ }
116
+ return names;
117
+ }
118
+
119
+ function addedAndRemoved(history, from, to) {
120
+ const a = namesAt(history, from), b = namesAt(history, to);
121
+ if (!a || !b) return `\n${from} has no recorded names (they are recorded from 23.4.0 on), so this lists no added or removed components and tokens: the notes above are the record.\n`;
122
+ const list = (xs) => (xs.length ? xs.sort().map((x) => '`' + x + '`').join(', ') : 'none');
123
+ const diff = (kind) => [[...b[kind]].filter((x) => !a[kind].has(x)), [...a[kind]].filter((x) => !b[kind].has(x))];
124
+ const [ca, cr] = diff('components'), [ta, tr] = diff('tokens');
125
+ return `\n## Added and removed since ${from}\n\nComponents added: ${list(ca)}.\nComponents removed: ${list(cr)}.\nTokens added: ${list(ta)}.\nTokens removed: ${list(tr)}.\n`;
126
+ }
127
+
101
128
  // ---------- the commands ----------
102
129
  function load(dir) {
103
130
  const index = JSON.parse(fs.readFileSync(path.join(dir, 'index.json'), 'utf8'));
@@ -152,15 +179,16 @@ function run(argv, manifestDir) {
152
179
  if (!SEMVER.test(arg)) return usage('changes needs the version you are upgrading from, for example: changes 21.0.0');
153
180
  if (compare(arg, v) >= 0) return { code: 0, out: `${head}${arg} is already at or past ${v}: there are no upgrade notes to apply.\n` };
154
181
  const majors = (m.index.migrations || []).filter((x) => compare(x.major, arg) > 0 && compare(x.major, v) <= 0).sort((a, b) => compare(a.major, b.major));
155
- if (!majors.length) return { code: 0, out: `${head}No breaking changes between ${arg} and ${v}: pin ${v} and rebuild.\n` };
156
- return { code: 0, out: `${head}Upgrade notes from ${arg} to ${v}, oldest first. Apply one major at a time.\n\n` + majors.map((x) => m.read(`migrations/${x.major}.md`) || '').join('\n') };
182
+ const names = addedAndRemoved(m.index.history, arg, v);
183
+ if (!majors.length) return { code: 0, out: `${head}No breaking changes between ${arg} and ${v}: pin ${v} and rebuild.\n` + names };
184
+ return { code: 0, out: `${head}Upgrade notes from ${arg} to ${v}, oldest first. Apply one major at a time.\n\n` + majors.map((x) => m.read(`migrations/${x.major}.md`) || '').join('\n') + names };
157
185
  }
158
186
  default:
159
187
  return usage(`Unknown command "${cmd}".`);
160
188
  }
161
189
  }
162
190
 
163
- module.exports = { run, findManifest };
191
+ module.exports = { run, findManifest, namesAt, compare };
164
192
 
165
193
  if (require.main === module) {
166
194
  const r = run(process.argv.slice(2));
package/manifest/index.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "schema": 1,
3
- "version": "23.4.0",
4
- "built": "2026-10-22",
3
+ "version": "23.5.1",
4
+ "built": "2026-10-23",
5
5
  "components": [
6
6
  {
7
7
  "id": "accordion",
@@ -292,6 +292,10 @@
292
292
  "id": "spacing",
293
293
  "title": "Spacing"
294
294
  },
295
+ {
296
+ "id": "layout",
297
+ "title": "Layout"
298
+ },
295
299
  {
296
300
  "id": "radius",
297
301
  "title": "Radius"
@@ -398,5 +402,780 @@
398
402
  "major": "1.0.0",
399
403
  "title": "1.0.0 — 2026-08-18"
400
404
  }
401
- ]
405
+ ],
406
+ "history": {
407
+ "versions": {
408
+ "23.4.0": {
409
+ "added": {
410
+ "components": [
411
+ "accordion",
412
+ "action-bar",
413
+ "alert",
414
+ "app-shell",
415
+ "avatar",
416
+ "body",
417
+ "box",
418
+ "breadcrumb",
419
+ "button",
420
+ "calendar",
421
+ "card",
422
+ "checkbox",
423
+ "choice-card",
424
+ "code-input",
425
+ "date-picker",
426
+ "day-of-month",
427
+ "detail-list",
428
+ "divider",
429
+ "dropdown",
430
+ "dropzone",
431
+ "eyebrow",
432
+ "feedback-badge",
433
+ "glider",
434
+ "heading",
435
+ "hero",
436
+ "icon",
437
+ "icon-button",
438
+ "icon-tile",
439
+ "input",
440
+ "link",
441
+ "loading-spinner",
442
+ "logo",
443
+ "modal",
444
+ "pagination",
445
+ "payment-form",
446
+ "price-summary",
447
+ "radio",
448
+ "section-heading",
449
+ "select",
450
+ "shield",
451
+ "sidebar",
452
+ "stepper",
453
+ "switch",
454
+ "table",
455
+ "tabs",
456
+ "tag",
457
+ "textarea",
458
+ "toast",
459
+ "tooltip",
460
+ "top-bar",
461
+ "vehicle"
462
+ ],
463
+ "tokens": [
464
+ "--dk-border-base-black",
465
+ "--dk-border-base-white",
466
+ "--dk-border-card-default",
467
+ "--dk-border-card-secondary",
468
+ "--dk-border-choice-card",
469
+ "--dk-border-choice-card-active",
470
+ "--dk-border-choice-card-hover",
471
+ "--dk-border-control-active",
472
+ "--dk-border-control-default",
473
+ "--dk-border-control-hover",
474
+ "--dk-border-dashed-dash",
475
+ "--dk-border-dashed-gap",
476
+ "--dk-border-dashed-primary",
477
+ "--dk-border-dashed-width",
478
+ "--dk-border-default-body",
479
+ "--dk-border-default-body-reverse",
480
+ "--dk-border-disabled-default",
481
+ "--dk-border-disabled-elevation",
482
+ "--dk-border-disabled-subtle",
483
+ "--dk-border-error-default",
484
+ "--dk-border-error-elevation",
485
+ "--dk-border-error-elevation-focus",
486
+ "--dk-border-error-elevation-hover",
487
+ "--dk-border-error-focus",
488
+ "--dk-border-error-hairline",
489
+ "--dk-border-error-hover",
490
+ "--dk-border-error-subtle",
491
+ "--dk-border-error-subtle-focus",
492
+ "--dk-border-error-subtle-hover",
493
+ "--dk-border-field-default",
494
+ "--dk-border-field-disabled",
495
+ "--dk-border-field-error",
496
+ "--dk-border-field-error-focus",
497
+ "--dk-border-field-error-ring",
498
+ "--dk-border-field-focus",
499
+ "--dk-border-field-focus-ring",
500
+ "--dk-border-field-hover",
501
+ "--dk-border-field-raised-default",
502
+ "--dk-border-field-raised-focus",
503
+ "--dk-border-field-raised-hover",
504
+ "--dk-border-glass-default",
505
+ "--dk-border-glider-plain",
506
+ "--dk-border-gradient-ai-deep",
507
+ "--dk-border-gradient-ai-light",
508
+ "--dk-border-gradient-angle",
509
+ "--dk-border-gradient-error-deep",
510
+ "--dk-border-gradient-error-light",
511
+ "--dk-border-gradient-information-deep",
512
+ "--dk-border-gradient-information-light",
513
+ "--dk-border-gradient-neutral-deep",
514
+ "--dk-border-gradient-neutral-light",
515
+ "--dk-border-gradient-primary-deep",
516
+ "--dk-border-gradient-primary-light",
517
+ "--dk-border-gradient-primary-mid",
518
+ "--dk-border-gradient-success-deep",
519
+ "--dk-border-gradient-success-light",
520
+ "--dk-border-gradient-warning-deep",
521
+ "--dk-border-gradient-warning-light",
522
+ "--dk-border-hairline-current",
523
+ "--dk-border-hue-next1-hairline",
524
+ "--dk-border-hue-next2-hairline",
525
+ "--dk-border-hue-next3-hairline",
526
+ "--dk-border-hue-next4-hairline",
527
+ "--dk-border-hue-prev1-hairline",
528
+ "--dk-border-hue-prev2-hairline",
529
+ "--dk-border-hue-prev3-hairline",
530
+ "--dk-border-hue-prev4-hairline",
531
+ "--dk-border-hue-primary-hairline",
532
+ "--dk-border-information-default",
533
+ "--dk-border-information-elevation",
534
+ "--dk-border-information-elevation-focus",
535
+ "--dk-border-information-elevation-hover",
536
+ "--dk-border-information-focus",
537
+ "--dk-border-information-hairline",
538
+ "--dk-border-information-hover",
539
+ "--dk-border-information-subtle",
540
+ "--dk-border-information-subtle-focus",
541
+ "--dk-border-information-subtle-hover",
542
+ "--dk-border-inverse-hairline",
543
+ "--dk-border-inverse-structural",
544
+ "--dk-border-nested-active",
545
+ "--dk-border-nested-default",
546
+ "--dk-border-nested-glass",
547
+ "--dk-border-nested-hover",
548
+ "--dk-border-neutral-default",
549
+ "--dk-border-neutral-elevation",
550
+ "--dk-border-neutral-elevation-focus",
551
+ "--dk-border-neutral-elevation-hover",
552
+ "--dk-border-neutral-focus",
553
+ "--dk-border-neutral-hairline",
554
+ "--dk-border-neutral-hover",
555
+ "--dk-border-neutral-subtle",
556
+ "--dk-border-neutral-subtle-focus",
557
+ "--dk-border-neutral-subtle-hover",
558
+ "--dk-border-page-default",
559
+ "--dk-border-page-secondary",
560
+ "--dk-border-primary-active",
561
+ "--dk-border-primary-default",
562
+ "--dk-border-primary-disabled",
563
+ "--dk-border-primary-disabled-active",
564
+ "--dk-border-primary-disabled-hover",
565
+ "--dk-border-primary-elevation",
566
+ "--dk-border-primary-elevation-focus",
567
+ "--dk-border-primary-elevation-hover",
568
+ "--dk-border-primary-focus",
569
+ "--dk-border-primary-guide",
570
+ "--dk-border-primary-hairline",
571
+ "--dk-border-primary-hover",
572
+ "--dk-border-primary-oos",
573
+ "--dk-border-primary-subtle",
574
+ "--dk-border-primary-subtle-active",
575
+ "--dk-border-primary-subtle-focus",
576
+ "--dk-border-primary-subtle-hover",
577
+ "--dk-border-progress",
578
+ "--dk-border-progress-start",
579
+ "--dk-border-radius-0",
580
+ "--dk-border-radius-100",
581
+ "--dk-border-radius-125",
582
+ "--dk-border-radius-150",
583
+ "--dk-border-radius-200",
584
+ "--dk-border-radius-25",
585
+ "--dk-border-radius-300",
586
+ "--dk-border-radius-400",
587
+ "--dk-border-radius-50",
588
+ "--dk-border-radius-500",
589
+ "--dk-border-radius-600",
590
+ "--dk-border-radius-75",
591
+ "--dk-border-radius-round",
592
+ "--dk-border-radius-round-fixed",
593
+ "--dk-border-raised-active",
594
+ "--dk-border-raised-default",
595
+ "--dk-border-raised-hover",
596
+ "--dk-border-raised-subtle",
597
+ "--dk-border-sidebar-panel",
598
+ "--dk-border-sidebar-panel-hover",
599
+ "--dk-border-success-default",
600
+ "--dk-border-success-elevation",
601
+ "--dk-border-success-elevation-focus",
602
+ "--dk-border-success-elevation-hover",
603
+ "--dk-border-success-focus",
604
+ "--dk-border-success-hairline",
605
+ "--dk-border-success-hover",
606
+ "--dk-border-success-subtle",
607
+ "--dk-border-success-subtle-focus",
608
+ "--dk-border-success-subtle-hover",
609
+ "--dk-border-warning-default",
610
+ "--dk-border-warning-elevation",
611
+ "--dk-border-warning-elevation-focus",
612
+ "--dk-border-warning-elevation-hover",
613
+ "--dk-border-warning-focus",
614
+ "--dk-border-warning-hairline",
615
+ "--dk-border-warning-hover",
616
+ "--dk-border-warning-subtle",
617
+ "--dk-border-warning-subtle-focus",
618
+ "--dk-border-warning-subtle-hover",
619
+ "--dk-border-width-0",
620
+ "--dk-border-width-100",
621
+ "--dk-border-width-150",
622
+ "--dk-border-width-200",
623
+ "--dk-border-width-25",
624
+ "--dk-border-width-50",
625
+ "--dk-font-body-lg-line-height",
626
+ "--dk-font-body-lg-paragraph-spacing",
627
+ "--dk-font-body-lg-text-size",
628
+ "--dk-font-body-md-line-height",
629
+ "--dk-font-body-md-paragraph-spacing",
630
+ "--dk-font-body-md-text-size",
631
+ "--dk-font-body-sm-line-height",
632
+ "--dk-font-body-sm-paragraph-spacing",
633
+ "--dk-font-body-sm-text-size",
634
+ "--dk-font-body-xsm-line-height",
635
+ "--dk-font-body-xsm-paragraph-spacing",
636
+ "--dk-font-body-xsm-text-size",
637
+ "--dk-font-family-primary",
638
+ "--dk-font-family-secondary",
639
+ "--dk-font-heading-h1-line-height",
640
+ "--dk-font-heading-h1-paragraph-spacing",
641
+ "--dk-font-heading-h1-text-size",
642
+ "--dk-font-heading-h2-line-height",
643
+ "--dk-font-heading-h2-paragraph-spacing",
644
+ "--dk-font-heading-h2-text-size",
645
+ "--dk-font-heading-h3-line-height",
646
+ "--dk-font-heading-h3-paragraph-spacing",
647
+ "--dk-font-heading-h3-text-size",
648
+ "--dk-font-heading-h4-line-height",
649
+ "--dk-font-heading-h4-paragraph-spacing",
650
+ "--dk-font-heading-h4-text-size",
651
+ "--dk-font-heading-h5-line-height",
652
+ "--dk-font-heading-h5-paragraph-spacing",
653
+ "--dk-font-heading-h5-text-size",
654
+ "--dk-font-heading-h6-line-height",
655
+ "--dk-font-heading-h6-paragraph-spacing",
656
+ "--dk-font-heading-h6-text-size",
657
+ "--dk-font-input-lg-line-height",
658
+ "--dk-font-input-lg-paragraph-spacing",
659
+ "--dk-font-input-lg-text-size",
660
+ "--dk-font-input-md-line-height",
661
+ "--dk-font-input-md-paragraph-spacing",
662
+ "--dk-font-input-md-text-size",
663
+ "--dk-font-input-sm-line-height",
664
+ "--dk-font-input-sm-paragraph-spacing",
665
+ "--dk-font-input-sm-text-size",
666
+ "--dk-font-overline-lg-line-height",
667
+ "--dk-font-overline-lg-paragraph-spacing",
668
+ "--dk-font-overline-lg-text-size",
669
+ "--dk-font-overline-md-line-height",
670
+ "--dk-font-overline-md-paragraph-spacing",
671
+ "--dk-font-overline-md-text-size",
672
+ "--dk-font-overline-sm-line-height",
673
+ "--dk-font-overline-sm-paragraph-spacing",
674
+ "--dk-font-overline-sm-text-size",
675
+ "--dk-font-scale-body-large-line-height",
676
+ "--dk-font-scale-body-large-text-size",
677
+ "--dk-font-scale-body-medium-line-height",
678
+ "--dk-font-scale-body-medium-text-size",
679
+ "--dk-font-scale-body-small-line-height",
680
+ "--dk-font-scale-body-small-text-size",
681
+ "--dk-font-scale-body-xlarge-line-height",
682
+ "--dk-font-scale-body-xlarge-text-size",
683
+ "--dk-font-scale-body-xsmall-line-height",
684
+ "--dk-font-scale-body-xsmall-text-size",
685
+ "--dk-font-scale-display-large-line-height",
686
+ "--dk-font-scale-display-large-text-size",
687
+ "--dk-font-scale-display-medium-line-height",
688
+ "--dk-font-scale-display-medium-text-size",
689
+ "--dk-font-scale-display-small-line-height",
690
+ "--dk-font-scale-display-small-text-size",
691
+ "--dk-font-scale-display-xlarge-line-height",
692
+ "--dk-font-scale-display-xlarge-text-size",
693
+ "--dk-font-scale-display-xxlarge-line-height",
694
+ "--dk-font-scale-display-xxlarge-text-size",
695
+ "--dk-font-scale-heading-large-line-height",
696
+ "--dk-font-scale-heading-large-text-size",
697
+ "--dk-font-scale-heading-medium-line-height",
698
+ "--dk-font-scale-heading-medium-text-size",
699
+ "--dk-font-scale-heading-small-line-height",
700
+ "--dk-font-scale-heading-small-text-size",
701
+ "--dk-font-scale-heading-xlarge-line-height",
702
+ "--dk-font-scale-heading-xlarge-text-size",
703
+ "--dk-font-scale-heading-xsmall-line-height",
704
+ "--dk-font-scale-heading-xsmall-text-size",
705
+ "--dk-font-scale-heading-xxlarge-line-height",
706
+ "--dk-font-scale-heading-xxlarge-text-size",
707
+ "--dk-font-scale-heading-xxsmall-line-height",
708
+ "--dk-font-scale-heading-xxsmall-text-size",
709
+ "--dk-icon-base-black",
710
+ "--dk-icon-base-white",
711
+ "--dk-icon-choice-disabled",
712
+ "--dk-icon-choice-selected",
713
+ "--dk-icon-choice-track",
714
+ "--dk-icon-control-active",
715
+ "--dk-icon-control-default",
716
+ "--dk-icon-control-disabled",
717
+ "--dk-icon-control-hover",
718
+ "--dk-icon-default-body",
719
+ "--dk-icon-default-body-reverse",
720
+ "--dk-icon-disabled-default",
721
+ "--dk-icon-disabled-subtle",
722
+ "--dk-icon-disabled-subtle-active",
723
+ "--dk-icon-disabled-subtle-hover",
724
+ "--dk-icon-error-active",
725
+ "--dk-icon-error-default",
726
+ "--dk-icon-error-focus",
727
+ "--dk-icon-error-hover",
728
+ "--dk-icon-error-subtle",
729
+ "--dk-icon-error-subtle-focus",
730
+ "--dk-icon-error-subtle-hover",
731
+ "--dk-icon-field-default",
732
+ "--dk-icon-field-disabled",
733
+ "--dk-icon-field-hover",
734
+ "--dk-icon-field-subtle",
735
+ "--dk-icon-field-subtle-hover",
736
+ "--dk-icon-hue-next1-default",
737
+ "--dk-icon-hue-next2-default",
738
+ "--dk-icon-hue-next3-default",
739
+ "--dk-icon-hue-next4-default",
740
+ "--dk-icon-hue-prev1-default",
741
+ "--dk-icon-hue-prev2-default",
742
+ "--dk-icon-hue-prev3-default",
743
+ "--dk-icon-hue-prev4-default",
744
+ "--dk-icon-hue-primary-default",
745
+ "--dk-icon-information-active",
746
+ "--dk-icon-information-default",
747
+ "--dk-icon-information-focus",
748
+ "--dk-icon-information-hover",
749
+ "--dk-icon-information-subtle",
750
+ "--dk-icon-information-subtle-focus",
751
+ "--dk-icon-information-subtle-hover",
752
+ "--dk-icon-inverse-default",
753
+ "--dk-icon-inverse-neutral",
754
+ "--dk-icon-neutral-active",
755
+ "--dk-icon-neutral-default",
756
+ "--dk-icon-neutral-focus",
757
+ "--dk-icon-neutral-hover",
758
+ "--dk-icon-neutral-subtle",
759
+ "--dk-icon-neutral-subtle-focus",
760
+ "--dk-icon-neutral-subtle-hover",
761
+ "--dk-icon-primary-active",
762
+ "--dk-icon-primary-default",
763
+ "--dk-icon-primary-disabled",
764
+ "--dk-icon-primary-disabled-active",
765
+ "--dk-icon-primary-disabled-hover",
766
+ "--dk-icon-primary-focus",
767
+ "--dk-icon-primary-highlight",
768
+ "--dk-icon-primary-hover",
769
+ "--dk-icon-primary-oos",
770
+ "--dk-icon-primary-subtle",
771
+ "--dk-icon-primary-subtle-focus",
772
+ "--dk-icon-primary-subtle-hover",
773
+ "--dk-icon-success-active",
774
+ "--dk-icon-success-default",
775
+ "--dk-icon-success-focus",
776
+ "--dk-icon-success-hover",
777
+ "--dk-icon-success-subtle",
778
+ "--dk-icon-success-subtle-focus",
779
+ "--dk-icon-success-subtle-hover",
780
+ "--dk-icon-warning-active",
781
+ "--dk-icon-warning-default",
782
+ "--dk-icon-warning-focus",
783
+ "--dk-icon-warning-hover",
784
+ "--dk-icon-warning-subtle",
785
+ "--dk-icon-warning-subtle-focus",
786
+ "--dk-icon-warning-subtle-hover",
787
+ "--dk-interactive-control-padding-block",
788
+ "--dk-interactive-control-padding-inline",
789
+ "--dk-interactive-control-radius",
790
+ "--dk-interactive-grow-panel",
791
+ "--dk-interactive-grow-surface",
792
+ "--dk-interactive-item-padding-block",
793
+ "--dk-interactive-item-padding-inline",
794
+ "--dk-interactive-item-radius",
795
+ "--dk-interactive-mark-reach",
796
+ "--dk-interactive-mark-shade",
797
+ "--dk-interactive-panel-padding-block",
798
+ "--dk-interactive-panel-padding-inline",
799
+ "--dk-interactive-panel-radius",
800
+ "--dk-interactive-press-compact",
801
+ "--dk-interactive-press-control",
802
+ "--dk-interactive-press-item",
803
+ "--dk-interactive-press-panel",
804
+ "--dk-interactive-press-surface",
805
+ "--dk-interactive-ring-width",
806
+ "--dk-interactive-surface-padding-block",
807
+ "--dk-interactive-surface-padding-inline",
808
+ "--dk-interactive-surface-radius",
809
+ "--dk-interactive-target-min",
810
+ "--dk-interactive-target-min-touch",
811
+ "--dk-interactive-tone-fill-active",
812
+ "--dk-interactive-tone-fill-hover",
813
+ "--dk-interactive-tone-mark",
814
+ "--dk-interactive-tone-mark-active",
815
+ "--dk-interactive-tone-mark-hover",
816
+ "--dk-interactive-tone-text",
817
+ "--dk-interactive-tone-text-subtle",
818
+ "--dk-motion-cascade-beat",
819
+ "--dk-motion-cascade-duration",
820
+ "--dk-motion-cascade-easing",
821
+ "--dk-motion-cascade-max-beats",
822
+ "--dk-motion-cascade-rise",
823
+ "--dk-motion-curtain-content-delay",
824
+ "--dk-motion-curtain-recede-duration",
825
+ "--dk-motion-curtain-recede-easing",
826
+ "--dk-motion-curtain-recede-opacity",
827
+ "--dk-motion-curtain-recede-scale",
828
+ "--dk-motion-curtain-reveal-duration",
829
+ "--dk-motion-curtain-reveal-easing",
830
+ "--dk-motion-curtain-rise-delay",
831
+ "--dk-motion-curtain-rise-duration",
832
+ "--dk-motion-curtain-rise-easing",
833
+ "--dk-motion-duration-brisk",
834
+ "--dk-motion-duration-moderate",
835
+ "--dk-motion-duration-quick",
836
+ "--dk-motion-duration-slow",
837
+ "--dk-motion-easing-emphasized",
838
+ "--dk-motion-easing-exit",
839
+ "--dk-motion-easing-gentle",
840
+ "--dk-motion-easing-spring",
841
+ "--dk-motion-easing-standard",
842
+ "--dk-motion-enter-duration",
843
+ "--dk-motion-enter-easing",
844
+ "--dk-motion-enter-large-duration",
845
+ "--dk-motion-enter-large-easing",
846
+ "--dk-motion-exit-duration",
847
+ "--dk-motion-exit-easing",
848
+ "--dk-motion-exit-large-duration",
849
+ "--dk-motion-exit-large-easing",
850
+ "--dk-motion-expand-duration",
851
+ "--dk-motion-expand-easing",
852
+ "--dk-motion-feedback-duration",
853
+ "--dk-motion-feedback-easing",
854
+ "--dk-motion-grow-scale-panel",
855
+ "--dk-motion-grow-scale-surface",
856
+ "--dk-motion-loop-easing",
857
+ "--dk-motion-page-fade-duration",
858
+ "--dk-motion-page-fade-easing",
859
+ "--dk-motion-page-fade-exit-duration",
860
+ "--dk-motion-page-fade-exit-easing",
861
+ "--dk-motion-page-rise",
862
+ "--dk-motion-page-slide-duration",
863
+ "--dk-motion-page-slide-easing",
864
+ "--dk-motion-page-slide-max",
865
+ "--dk-motion-press-duration",
866
+ "--dk-motion-press-easing",
867
+ "--dk-motion-press-scale-compact",
868
+ "--dk-motion-press-scale-control",
869
+ "--dk-motion-press-scale-item",
870
+ "--dk-motion-press-scale-panel",
871
+ "--dk-motion-press-scale-surface",
872
+ "--dk-motion-rise-char-beat",
873
+ "--dk-motion-rise-row-beat",
874
+ "--dk-motion-state-duration",
875
+ "--dk-motion-state-easing",
876
+ "--dk-motion-state-enter-duration",
877
+ "--dk-motion-state-exit-duration",
878
+ "--dk-motion-travel-duration",
879
+ "--dk-motion-travel-easing",
880
+ "--dk-motion-travel-lag",
881
+ "--dk-responsive-layout-frame-width",
882
+ "--dk-responsive-layout-max-width",
883
+ "--dk-shadow-card",
884
+ "--dk-shadow-card-hover",
885
+ "--dk-shadow-drop-2xl",
886
+ "--dk-shadow-drop-3xl",
887
+ "--dk-shadow-drop-lg-1",
888
+ "--dk-shadow-drop-lg-2",
889
+ "--dk-shadow-drop-md-1",
890
+ "--dk-shadow-drop-md-2",
891
+ "--dk-shadow-drop-sm-1",
892
+ "--dk-shadow-drop-sm-2",
893
+ "--dk-shadow-drop-xl-1",
894
+ "--dk-shadow-drop-xl-2",
895
+ "--dk-shadow-drop-xs",
896
+ "--dk-shadow-floating",
897
+ "--dk-shadow-focus-ring",
898
+ "--dk-shadow-inner-lg",
899
+ "--dk-shadow-inner-md",
900
+ "--dk-shadow-inner-sm",
901
+ "--dk-shadow-lifted",
902
+ "--dk-shadow-overlay",
903
+ "--dk-shadow-panel",
904
+ "--dk-shadow-raised",
905
+ "--dk-spacing-0-25",
906
+ "--dk-spacing-0-5",
907
+ "--dk-spacing-1",
908
+ "--dk-spacing-1-5",
909
+ "--dk-spacing-10",
910
+ "--dk-spacing-11",
911
+ "--dk-spacing-12",
912
+ "--dk-spacing-14",
913
+ "--dk-spacing-16",
914
+ "--dk-spacing-2",
915
+ "--dk-spacing-2-5",
916
+ "--dk-spacing-20",
917
+ "--dk-spacing-24",
918
+ "--dk-spacing-28",
919
+ "--dk-spacing-3",
920
+ "--dk-spacing-3-5",
921
+ "--dk-spacing-32",
922
+ "--dk-spacing-4",
923
+ "--dk-spacing-4-5",
924
+ "--dk-spacing-40",
925
+ "--dk-spacing-48",
926
+ "--dk-spacing-5",
927
+ "--dk-spacing-5-5",
928
+ "--dk-spacing-56",
929
+ "--dk-spacing-6",
930
+ "--dk-spacing-64",
931
+ "--dk-spacing-7",
932
+ "--dk-spacing-8",
933
+ "--dk-spacing-9",
934
+ "--dk-surface-backdrop-black",
935
+ "--dk-surface-backdrop-soft",
936
+ "--dk-surface-backdrop-transparent",
937
+ "--dk-surface-base-black",
938
+ "--dk-surface-base-white",
939
+ "--dk-surface-canvas-default",
940
+ "--dk-surface-card-active",
941
+ "--dk-surface-card-default",
942
+ "--dk-surface-card-focus",
943
+ "--dk-surface-card-hover",
944
+ "--dk-surface-card-secondary",
945
+ "--dk-surface-card-tertiary",
946
+ "--dk-surface-choice-card",
947
+ "--dk-surface-choice-card-active",
948
+ "--dk-surface-choice-card-hover",
949
+ "--dk-surface-choice-disabled",
950
+ "--dk-surface-choice-selected",
951
+ "--dk-surface-choice-selected-active",
952
+ "--dk-surface-choice-selected-hover",
953
+ "--dk-surface-choice-track",
954
+ "--dk-surface-choice-track-active",
955
+ "--dk-surface-choice-track-hover",
956
+ "--dk-surface-control-active",
957
+ "--dk-surface-control-default",
958
+ "--dk-surface-control-disabled",
959
+ "--dk-surface-control-hover",
960
+ "--dk-surface-current",
961
+ "--dk-surface-curtain-backdrop",
962
+ "--dk-surface-default-body",
963
+ "--dk-surface-default-body-reverse",
964
+ "--dk-surface-disabled-default",
965
+ "--dk-surface-disabled-subtle",
966
+ "--dk-surface-error-default",
967
+ "--dk-surface-error-focus",
968
+ "--dk-surface-error-hover",
969
+ "--dk-surface-error-mark",
970
+ "--dk-surface-error-solid",
971
+ "--dk-surface-error-subtle",
972
+ "--dk-surface-error-subtle-focus",
973
+ "--dk-surface-error-subtle-hover",
974
+ "--dk-surface-field-action-active",
975
+ "--dk-surface-field-action-hover",
976
+ "--dk-surface-field-default",
977
+ "--dk-surface-field-hover",
978
+ "--dk-surface-glass-default",
979
+ "--dk-surface-hue-next1-solid",
980
+ "--dk-surface-hue-next1-subtle",
981
+ "--dk-surface-hue-next2-solid",
982
+ "--dk-surface-hue-next2-subtle",
983
+ "--dk-surface-hue-next3-solid",
984
+ "--dk-surface-hue-next3-subtle",
985
+ "--dk-surface-hue-next4-solid",
986
+ "--dk-surface-hue-next4-subtle",
987
+ "--dk-surface-hue-prev1-solid",
988
+ "--dk-surface-hue-prev1-subtle",
989
+ "--dk-surface-hue-prev2-solid",
990
+ "--dk-surface-hue-prev2-subtle",
991
+ "--dk-surface-hue-prev3-solid",
992
+ "--dk-surface-hue-prev3-subtle",
993
+ "--dk-surface-hue-prev4-solid",
994
+ "--dk-surface-hue-prev4-subtle",
995
+ "--dk-surface-hue-primary-solid",
996
+ "--dk-surface-hue-primary-subtle",
997
+ "--dk-surface-information-default",
998
+ "--dk-surface-information-focus",
999
+ "--dk-surface-information-hover",
1000
+ "--dk-surface-information-mark",
1001
+ "--dk-surface-information-solid",
1002
+ "--dk-surface-information-subtle",
1003
+ "--dk-surface-information-subtle-focus",
1004
+ "--dk-surface-information-subtle-hover",
1005
+ "--dk-surface-inset-active",
1006
+ "--dk-surface-inset-default",
1007
+ "--dk-surface-inset-hover",
1008
+ "--dk-surface-inverse-active",
1009
+ "--dk-surface-inverse-default",
1010
+ "--dk-surface-inverse-hover",
1011
+ "--dk-surface-lifted-active",
1012
+ "--dk-surface-lifted-default",
1013
+ "--dk-surface-lifted-hover",
1014
+ "--dk-surface-nested-active",
1015
+ "--dk-surface-nested-default",
1016
+ "--dk-surface-nested-glass",
1017
+ "--dk-surface-nested-hover",
1018
+ "--dk-surface-neutral-default",
1019
+ "--dk-surface-neutral-focus",
1020
+ "--dk-surface-neutral-hover",
1021
+ "--dk-surface-neutral-subtle",
1022
+ "--dk-surface-neutral-subtle-active",
1023
+ "--dk-surface-neutral-subtle-focus",
1024
+ "--dk-surface-neutral-subtle-hover",
1025
+ "--dk-surface-page-default",
1026
+ "--dk-surface-page-glass",
1027
+ "--dk-surface-page-secondary",
1028
+ "--dk-surface-page-tertiary",
1029
+ "--dk-surface-primary-active",
1030
+ "--dk-surface-primary-brand",
1031
+ "--dk-surface-primary-default",
1032
+ "--dk-surface-primary-disabled",
1033
+ "--dk-surface-primary-disabled-active",
1034
+ "--dk-surface-primary-disabled-hover",
1035
+ "--dk-surface-primary-focus",
1036
+ "--dk-surface-primary-hover",
1037
+ "--dk-surface-primary-mark",
1038
+ "--dk-surface-primary-marker",
1039
+ "--dk-surface-primary-oos",
1040
+ "--dk-surface-primary-solid",
1041
+ "--dk-surface-primary-subtle",
1042
+ "--dk-surface-primary-subtle-focus",
1043
+ "--dk-surface-primary-subtle-hover",
1044
+ "--dk-surface-raised-active",
1045
+ "--dk-surface-raised-default",
1046
+ "--dk-surface-raised-glass",
1047
+ "--dk-surface-raised-hover",
1048
+ "--dk-surface-sidebar-panel",
1049
+ "--dk-surface-sidebar-panel-hover",
1050
+ "--dk-surface-success-default",
1051
+ "--dk-surface-success-focus",
1052
+ "--dk-surface-success-hover",
1053
+ "--dk-surface-success-mark",
1054
+ "--dk-surface-success-solid",
1055
+ "--dk-surface-success-subtle",
1056
+ "--dk-surface-success-subtle-focus",
1057
+ "--dk-surface-success-subtle-hover",
1058
+ "--dk-surface-warning-default",
1059
+ "--dk-surface-warning-focus",
1060
+ "--dk-surface-warning-hover",
1061
+ "--dk-surface-warning-mark",
1062
+ "--dk-surface-warning-solid",
1063
+ "--dk-surface-warning-subtle",
1064
+ "--dk-surface-warning-subtle-focus",
1065
+ "--dk-surface-warning-subtle-hover",
1066
+ "--dk-text-base-black",
1067
+ "--dk-text-base-white",
1068
+ "--dk-text-code-attr",
1069
+ "--dk-text-code-comment",
1070
+ "--dk-text-code-keyword",
1071
+ "--dk-text-code-string",
1072
+ "--dk-text-code-tag",
1073
+ "--dk-text-control-active",
1074
+ "--dk-text-control-default",
1075
+ "--dk-text-control-disabled",
1076
+ "--dk-text-control-hover",
1077
+ "--dk-text-default",
1078
+ "--dk-text-default-reverse",
1079
+ "--dk-text-disabled-default",
1080
+ "--dk-text-disabled-subtle",
1081
+ "--dk-text-disabled-subtle-active",
1082
+ "--dk-text-disabled-subtle-hover",
1083
+ "--dk-text-error-active",
1084
+ "--dk-text-error-default",
1085
+ "--dk-text-error-focus",
1086
+ "--dk-text-error-hover",
1087
+ "--dk-text-error-outline",
1088
+ "--dk-text-error-subtle",
1089
+ "--dk-text-error-subtle-focus",
1090
+ "--dk-text-error-subtle-hover",
1091
+ "--dk-text-eyebrow-default",
1092
+ "--dk-text-field-affix",
1093
+ "--dk-text-field-default",
1094
+ "--dk-text-field-disabled",
1095
+ "--dk-text-field-placeholder",
1096
+ "--dk-text-information-active",
1097
+ "--dk-text-information-default",
1098
+ "--dk-text-information-focus",
1099
+ "--dk-text-information-hover",
1100
+ "--dk-text-information-outline",
1101
+ "--dk-text-information-subtle",
1102
+ "--dk-text-information-subtle-focus",
1103
+ "--dk-text-information-subtle-hover",
1104
+ "--dk-text-inverse-default",
1105
+ "--dk-text-inverse-neutral",
1106
+ "--dk-text-link-active",
1107
+ "--dk-text-link-default",
1108
+ "--dk-text-link-hover",
1109
+ "--dk-text-link-underline",
1110
+ "--dk-text-nested-active",
1111
+ "--dk-text-nested-default",
1112
+ "--dk-text-nested-hover",
1113
+ "--dk-text-neutral-active",
1114
+ "--dk-text-neutral-default",
1115
+ "--dk-text-neutral-focus",
1116
+ "--dk-text-neutral-hover",
1117
+ "--dk-text-neutral-subtle",
1118
+ "--dk-text-neutral-subtle-focus",
1119
+ "--dk-text-neutral-subtle-hover",
1120
+ "--dk-text-primary-active",
1121
+ "--dk-text-primary-brand",
1122
+ "--dk-text-primary-default",
1123
+ "--dk-text-primary-disabled",
1124
+ "--dk-text-primary-disabled-active",
1125
+ "--dk-text-primary-disabled-hover",
1126
+ "--dk-text-primary-focus",
1127
+ "--dk-text-primary-highlight",
1128
+ "--dk-text-primary-hover",
1129
+ "--dk-text-primary-oos",
1130
+ "--dk-text-primary-outline",
1131
+ "--dk-text-primary-subtle",
1132
+ "--dk-text-primary-subtle-focus",
1133
+ "--dk-text-primary-subtle-hover",
1134
+ "--dk-text-success-active",
1135
+ "--dk-text-success-body",
1136
+ "--dk-text-success-default",
1137
+ "--dk-text-success-focus",
1138
+ "--dk-text-success-hover",
1139
+ "--dk-text-success-outline",
1140
+ "--dk-text-success-subtle",
1141
+ "--dk-text-success-subtle-focus",
1142
+ "--dk-text-success-subtle-hover",
1143
+ "--dk-text-tabs-selected",
1144
+ "--dk-text-warning-active",
1145
+ "--dk-text-warning-default",
1146
+ "--dk-text-warning-focus",
1147
+ "--dk-text-warning-hover",
1148
+ "--dk-text-warning-outline",
1149
+ "--dk-text-warning-subtle",
1150
+ "--dk-text-warning-subtle-focus",
1151
+ "--dk-text-warning-subtle-hover"
1152
+ ]
1153
+ },
1154
+ "removed": {
1155
+ "components": [],
1156
+ "tokens": []
1157
+ }
1158
+ },
1159
+ "23.5.0": {
1160
+ "added": {
1161
+ "components": [],
1162
+ "tokens": []
1163
+ },
1164
+ "removed": {
1165
+ "components": [],
1166
+ "tokens": []
1167
+ }
1168
+ },
1169
+ "23.5.1": {
1170
+ "added": {
1171
+ "components": [],
1172
+ "tokens": []
1173
+ },
1174
+ "removed": {
1175
+ "components": [],
1176
+ "tokens": []
1177
+ }
1178
+ }
1179
+ }
1180
+ }
402
1181
  }
package/manifest/setup.md CHANGED
@@ -26,3 +26,45 @@ Installed as `@karmo-co/drift-kit` from GitHub Packages.
26
26
  | `data-border-radius` | `bubbly`, `normal`, `sharp` |
27
27
  | `data-border-width` | `medium`, `thick`, `thin` |
28
28
  | `data-density` | `normal`, `spacious`, `tight` |
29
+
30
+ ## Container attributes
31
+
32
+ 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.
33
+
34
+ | Attribute | Values |
35
+ |---|---|
36
+ | `data-surface` | `0`, `1`, `2`, `raised` |
37
+ | `data-tone` | `credit`, `error`, `information`, `inverse`, `muted`, `neutral`, `none`, `primary`, `success`, `warning` |
38
+ | `data-tone-fill` | `solid` |
39
+
40
+ ## Verify
41
+
42
+ 1. **The tokens resolve:** `getComputedStyle(document.body).getPropertyValue('--dk-surface-current')` is non-empty. Probe on `document.body`, never `document.documentElement`: the tokens live on the attribute scopes. Empty means the root attributes are missing or miscased.
43
+ 2. **The components are styled:** add a temporary main-action Button, `<button class="dk-component-button" data-variant="default" data-status="primary">`, to the body, read its computed `padding-inline-start`, then remove it. Zero means the stylesheet is missing, truncated or from another major.
44
+
45
+ A component token resolves only on its own component's element, so never probe one on `body`: it is empty on a healthy install.
46
+
47
+ ## The public kit
48
+
49
+ A page with no npm install (a plain HTML prototype, a slide deck) links this version from the public kit. Every address carries the version, and a version's files never change, so never write a link without one. Link the stylesheet in the head (`drift-kit.min.css` when shipping), `components.js` only when a component on the page has behaviour, and one icon script, only for the set the page's icons come from. Fonts load from the same folder, relative to the stylesheet.
50
+
51
+ 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:
52
+
53
+ ```html
54
+ <link rel="stylesheet" href="https://storage.googleapis.com/drift-kit-public/23.5.1/drift-kit.css" integrity="sha384-JqnAsXsPdAYb6SeXeAv0CDu+dQVrF2iEfU4CkxPiBWZ9etqR8kw9J+HVInUvGEle" crossorigin="anonymous" />
55
+ <script src="https://storage.googleapis.com/drift-kit-public/23.5.1/components.js" integrity="sha384-UW5LldhqwoGK64Rj68rCB88mFnI66ZOJb/q5pVs2+ZmhgvkcPn6/WfiafoSk58p1" crossorigin="anonymous" defer></script>
56
+ <script src="https://storage.googleapis.com/drift-kit-public/23.5.1/drift-icons-<set>.js" integrity="<its integrity>" crossorigin="anonymous" defer></script>
57
+ ```
58
+
59
+ | File | Address | Integrity |
60
+ |---|---|---|
61
+ | `drift-kit.css` | `https://storage.googleapis.com/drift-kit-public/23.5.1/drift-kit.css` | `sha384-JqnAsXsPdAYb6SeXeAv0CDu+dQVrF2iEfU4CkxPiBWZ9etqR8kw9J+HVInUvGEle` |
62
+ | `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` |
63
+ | `components.js` | `https://storage.googleapis.com/drift-kit-public/23.5.1/components.js` | `sha384-UW5LldhqwoGK64Rj68rCB88mFnI66ZOJb/q5pVs2+ZmhgvkcPn6/WfiafoSk58p1` |
64
+ | `drift-icons-card.js` | `https://storage.googleapis.com/drift-kit-public/23.5.1/drift-icons-card.js` | `sha384-Dl18Pw11QQ+/KtbAzbjt1DdP6fJwFNn4kCykxtFsF+uEZtUfMIseQJ7s14OmqEmg` |
65
+ | `drift-icons-coolicon.js` | `https://storage.googleapis.com/drift-kit-public/23.5.1/drift-icons-coolicon.js` | `sha384-8WaBw9LZuhj/u7G2Jf1aiVo8HBhMj1fBsmpSWJnYi5Xdi2ANXB3BLBZxz2NLQGYl` |
66
+ | `drift-icons-feather.js` | `https://storage.googleapis.com/drift-kit-public/23.5.1/drift-icons-feather.js` | `sha384-MFEltFi3gRSwgNdAMXGCYo+6Ri9iXLLWp4Gq3AeayzeliWAo3czd+pTTLAFHHU6s` |
67
+ | `drift-icons-flag-circle.js` | `https://storage.googleapis.com/drift-kit-public/23.5.1/drift-icons-flag-circle.js` | `sha384-gtU89vOz98Fbn0KZWzkHVQA4+kFhOFYoT/Dr43ljTskqkyGDMw1ihH1I7Zn25dzZ` |
68
+ | `drift-icons-flag.js` | `https://storage.googleapis.com/drift-kit-public/23.5.1/drift-icons-flag.js` | `sha384-VtM24IDkwASIVzD5hI+ijQYRXufYQbveKM0+wqaFSGZbrYZlodFlnvZOexhCpiH9` |
69
+ | `drift-icons-lucide.js` | `https://storage.googleapis.com/drift-kit-public/23.5.1/drift-icons-lucide.js` | `sha384-yEy9LdLbPCXUy577fmNq4loJ2G9AQ1InAW54iozwnVfe8KIK6gVe2227eaNmxFi1` |
70
+ | `drift-icons-social.js` | `https://storage.googleapis.com/drift-kit-public/23.5.1/drift-icons-social.js` | `sha384-+hPy5fFjIqfIAmDN+WOwekTLu7NIFZvyzOwXUTAiBEQqnZ0/kXgd4frbSGOr/c8c` |
package/manifest/tokens/interactive.md CHANGED
@@ -35,3 +35,19 @@ Declared values, light and dark. Reference a token by name; never copy its value
35
35
  | `--dk-interactive-tone-mark-hover` | `initial` | `initial` |
36
36
  | `--dk-interactive-tone-text` | `initial` | `initial` |
37
37
  | `--dk-interactive-tone-text-subtle` | `initial` | `initial` |
38
+
39
+ ## Using it: the interaction foundation
40
+
41
+ Anything clickable that is not already a kit component (a row, a card you built, a tile, a chip) takes `data-interactive` instead of hand-written hover CSS. The value is the tier:
42
+
43
+ | Tier | For | Behaviour |
44
+ |---|---|---|
45
+ | `data-interactive` (empty) or `="control"` | Button-sized controls | The control padding, radius and press |
46
+ | `="compact"` | Small squares: an icon, a page number, a day | A deeper press, so its edge travels like a wider control's |
47
+ | `="item"` | Rows in a list or menu | Starts its content, presses lightly |
48
+ | `="surface"` | Cards | Grows a little on hover, presses on click |
49
+ | `="panel"` | Large panels | The gentlest grow and press |
50
+
51
+ Add `data-interactive-fill="raised"` or `="nested"` when it should have a fill at rest. The foundation gives hover, press, focus ring and the colour motion, all at weight zero, so a component's own rule always wins.
52
+
53
+ The states it reads: selected (a solid primary) from `aria-current`, `aria-pressed` or a single-select `aria-selected`; highlighted (a primary tint, for "in the set") from `aria-checked`, a multi-select `aria-selected` or `data-highlighted`; disabled from `disabled` or `aria-disabled`, which wins over everything. `data-pseudo-class="hover|active|focus"` forces a state for docs and screenshots only.
package/manifest/tokens/layout.md ADDED
@@ -0,0 +1,8 @@
1
+ # Layout tokens
2
+
3
+ Declared values, one per screen width, smallest first. Reference a token by name; never copy its value.
4
+
5
+ | Token | By screen width, smallest first |
6
+ |---|---|
7
+ | `--dk-responsive-layout-frame-width` | `48rem`, `64rem`, `90rem` |
8
+ | `--dk-responsive-layout-max-width` | `48rem`, `64rem`, `80rem` |
package/manifest/tokens/motion.md CHANGED
@@ -67,3 +67,31 @@ Declared values, light and dark. Reference a token by name; never copy its value
67
67
  | `--dk-motion-travel-duration` | `var(--dk-motion-duration-moderate)` | `var(--dk-motion-duration-moderate)` |
68
68
  | `--dk-motion-travel-easing` | `var(--dk-motion-easing-emphasized)` | `var(--dk-motion-easing-emphasized)` |
69
69
  | `--dk-motion-travel-lag` | `0.2` | `0.2` |
70
+
71
+ ## Using it: patterns and the motion API
72
+
73
+ Every pattern is a duration and an easing pair, named for the pattern in the tokens above. By job:
74
+
75
+ | Job | Pattern |
76
+ |---|---|
77
+ | Colour, border or shadow changing on hover or focus | `state` |
78
+ | Shrinking under a press | `press` |
79
+ | Something appearing or leaving: a menu, a toast, a modal | `enter`, `exit` (`enter-large`, `exit-large` for big surfaces) |
80
+ | Opening in place: an accordion, a revealed row | `expand`, on `grid-template-rows` for a height |
81
+ | Confirming an action: a tick, a toggle settling | `feedback` |
82
+ | Something moving across: a sliding indicator, a thumb | `travel` |
83
+ | Spinners and other loops | `loop` (an easing only: a loop's length is its own) |
84
+
85
+ ### The cascade
86
+
87
+ - **HTML:** `data-dk-cascade` on the root; its children are the units. `data-dk-cascade-grid` on a grid gives each visual row one beat, `data-dk-cascade-list` gives rows half a beat, `data-dk-cascade-through` walks into a wrapper, `data-dk-cascade-skip` leaves something out. Plain HTML reveals itself on load; content added later joins with `dk.motion.cascade.late(nodes)`.
88
+ - **TSX:** `<Cascade ready={loaded}>` (or `useCascade(ready)`), keyed or given `arrival` so a new page replays it.
89
+
90
+ ### Changing page
91
+
92
+ - **The swap:** `<TransitionRegion>` with `usePageTransition()` in TSX; `data-dk-transition` on the region and `dk.motion.transition.swap(region, update, { direction })` in HTML. `go('forward' | 'back')` runs in the handler before the state change. It slides on phone-width regions and fades on wider ones.
93
+ - **The curtain:** `curtain(update, { hold, content, cascade })`, in TSX from the React entry and in HTML as `dk.motion.transition.curtain`.
94
+
95
+ ### Reduced motion
96
+
97
+ Anything animated by hand (a WAAPI call, a JS-driven value) reads its timing with `dk.motion.timing(pattern)` and checks `dk.motion.reduced()`.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@karmo-co/drift-kit-reference",
3
- "version": "23.4.0",
3
+ "version": "23.5.1",
4
4
  "description": "Reference documentation of Karmo's private Drift design system, for Karmo's Claude skills. Documentation only.",
5
5
  "bin": {
6
6
  "drift-kit-ref": "bin/drift-kit-ref.js"