motionary 6.7.0 → 6.9.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 (148) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/bin/usa-codemod-7.mjs +91 -0
  3. package/dist/chunks/{base-DchG4q_S.js → base-D5MHqeDd.js} +2 -2
  4. package/dist/chunks/{base-DchG4q_S.js.map → base-D5MHqeDd.js.map} +1 -1
  5. package/dist/chunks/{core-DVyTlo9Q.js → core-DyJu5r5a.js} +2 -2
  6. package/dist/chunks/{core-DVyTlo9Q.js.map → core-DyJu5r5a.js.map} +1 -1
  7. package/dist/chunks/{core-D2vF8kZb.js → core-ZGo4hOEk.js} +2 -2
  8. package/dist/chunks/{core-D2vF8kZb.js.map → core-ZGo4hOEk.js.map} +1 -1
  9. package/dist/chunks/{fx-DUMVKSvg.js → fx-DlGRMJ-Z.js} +2 -2
  10. package/dist/chunks/{fx-DUMVKSvg.js.map → fx-DlGRMJ-Z.js.map} +1 -1
  11. package/dist/chunks/{gpu-BBRLgEzM.cjs → gpu-C2D4T9Q-.cjs} +9 -2
  12. package/dist/chunks/gpu-C2D4T9Q-.cjs.map +1 -0
  13. package/dist/chunks/{gpu-CsP2ZB3x.js → gpu-DPhMkJq6.js} +10 -4
  14. package/dist/chunks/gpu-DPhMkJq6.js.map +1 -0
  15. package/dist/chunks/player-DH3TIz-t.js +516 -0
  16. package/dist/chunks/player-DH3TIz-t.js.map +1 -0
  17. package/dist/chunks/player-PS6_FzNw.cjs +525 -0
  18. package/dist/chunks/player-PS6_FzNw.cjs.map +1 -0
  19. package/dist/chunks/{registry-D23neB4M.js → registry-CTLWeg-J.js} +2 -2
  20. package/dist/chunks/{registry-D23neB4M.js.map → registry-CTLWeg-J.js.map} +1 -1
  21. package/dist/chunks/{spring-BhoT09Qb.js → spring-B-9MZOrW.js} +2 -2
  22. package/dist/chunks/{spring-BhoT09Qb.js.map → spring-B-9MZOrW.js.map} +1 -1
  23. package/dist/chunks/{variants-C_hv_s23.js → variants-CoZn3k_5.js} +2 -2
  24. package/dist/chunks/{variants-C_hv_s23.js.map → variants-CoZn3k_5.js.map} +1 -1
  25. package/dist/components/a11y.js +2 -2
  26. package/dist/components/angular.js +7 -7
  27. package/dist/components/background.js +2 -2
  28. package/dist/components/bridge.js +1 -1
  29. package/dist/components/cards.js +2 -2
  30. package/dist/components/click.js +3 -3
  31. package/dist/components/depth.js +3 -3
  32. package/dist/components/effects.cjs +13 -522
  33. package/dist/components/effects.cjs.map +1 -1
  34. package/dist/components/effects.js +7 -515
  35. package/dist/components/effects.js.map +1 -1
  36. package/dist/components/feedback.js +1 -1
  37. package/dist/components/fx-3d.cjs +8 -2
  38. package/dist/components/fx-3d.cjs.map +1 -1
  39. package/dist/components/fx-3d.d.cts +3 -1
  40. package/dist/components/fx-3d.d.ts +3 -1
  41. package/dist/components/fx-3d.js +9 -4
  42. package/dist/components/fx-3d.js.map +1 -1
  43. package/dist/components/fx-focus.cjs +125 -0
  44. package/dist/components/fx-focus.cjs.map +1 -0
  45. package/dist/components/fx-focus.d.cts +65 -0
  46. package/dist/components/fx-focus.d.ts +65 -0
  47. package/dist/components/fx-focus.js +122 -0
  48. package/dist/components/fx-focus.js.map +1 -0
  49. package/dist/components/fx-gpu.cjs +3 -2
  50. package/dist/components/fx-gpu.cjs.map +1 -1
  51. package/dist/components/fx-gpu.d.cts +3 -1
  52. package/dist/components/fx-gpu.d.ts +3 -1
  53. package/dist/components/fx-gpu.js +3 -3
  54. package/dist/components/fx-light.cjs +8 -2
  55. package/dist/components/fx-light.cjs.map +1 -1
  56. package/dist/components/fx-light.d.cts +3 -1
  57. package/dist/components/fx-light.d.ts +3 -1
  58. package/dist/components/fx-light.js +9 -4
  59. package/dist/components/fx-light.js.map +1 -1
  60. package/dist/components/fx-morph.cjs +8 -2
  61. package/dist/components/fx-morph.cjs.map +1 -1
  62. package/dist/components/fx-morph.d.cts +3 -1
  63. package/dist/components/fx-morph.d.ts +3 -1
  64. package/dist/components/fx-morph.js +9 -4
  65. package/dist/components/fx-morph.js.map +1 -1
  66. package/dist/components/fx-physics.cjs +350 -0
  67. package/dist/components/fx-physics.cjs.map +1 -0
  68. package/dist/components/fx-physics.d.cts +94 -0
  69. package/dist/components/fx-physics.d.ts +94 -0
  70. package/dist/components/fx-physics.js +345 -0
  71. package/dist/components/fx-physics.js.map +1 -0
  72. package/dist/components/fx-text.cjs +8 -2
  73. package/dist/components/fx-text.cjs.map +1 -1
  74. package/dist/components/fx-text.d.cts +3 -1
  75. package/dist/components/fx-text.d.ts +3 -1
  76. package/dist/components/fx-text.js +9 -4
  77. package/dist/components/fx-text.js.map +1 -1
  78. package/dist/components/fx-transitions.cjs +8 -2
  79. package/dist/components/fx-transitions.cjs.map +1 -1
  80. package/dist/components/fx-transitions.d.cts +3 -1
  81. package/dist/components/fx-transitions.d.ts +3 -1
  82. package/dist/components/fx-transitions.js +10 -5
  83. package/dist/components/fx-transitions.js.map +1 -1
  84. package/dist/components/fx-weather.cjs +271 -0
  85. package/dist/components/fx-weather.cjs.map +1 -0
  86. package/dist/components/fx-weather.d.cts +72 -0
  87. package/dist/components/fx-weather.d.ts +72 -0
  88. package/dist/components/fx-weather.js +266 -0
  89. package/dist/components/fx-weather.js.map +1 -0
  90. package/dist/components/fx.js +5 -5
  91. package/dist/components/fx2.cjs +49 -10
  92. package/dist/components/fx2.cjs.map +1 -1
  93. package/dist/components/fx2.d.cts +181 -4
  94. package/dist/components/fx2.d.ts +181 -4
  95. package/dist/components/fx2.js +42 -22
  96. package/dist/components/fx2.js.map +1 -1
  97. package/dist/components/gesture.js +4 -4
  98. package/dist/components/interaction.cjs +1 -0
  99. package/dist/components/interaction.cjs.map +1 -1
  100. package/dist/components/interaction.js +2 -1
  101. package/dist/components/interaction.js.map +1 -1
  102. package/dist/components/layout.js +1 -1
  103. package/dist/components/lite.cjs +2 -0
  104. package/dist/components/lite.cjs.map +1 -1
  105. package/dist/components/lite.js +2 -0
  106. package/dist/components/lite.js.map +1 -1
  107. package/dist/components/marketplace.cjs +82 -0
  108. package/dist/components/marketplace.cjs.map +1 -0
  109. package/dist/components/marketplace.d.cts +108 -0
  110. package/dist/components/marketplace.d.ts +108 -0
  111. package/dist/components/marketplace.js +77 -0
  112. package/dist/components/marketplace.js.map +1 -0
  113. package/dist/components/packs.js +1 -1
  114. package/dist/components/page.js +3 -3
  115. package/dist/components/perf.js +2 -2
  116. package/dist/components/physics.js +3 -3
  117. package/dist/components/reveal.js +1 -1
  118. package/dist/components/solid.js +7 -7
  119. package/dist/components/svelte.js +7 -7
  120. package/dist/components/svg.js +1 -1
  121. package/dist/components/text.js +2 -2
  122. package/dist/components/timeline.js +3 -3
  123. package/dist/components/transitions.js +1 -1
  124. package/dist/components/ui.cjs +1 -0
  125. package/dist/components/ui.cjs.map +1 -1
  126. package/dist/components/ui.js +5 -4
  127. package/dist/components/ui.js.map +1 -1
  128. package/dist/components/vue.js +7 -7
  129. package/dist/components/webgl.js +1 -1
  130. package/dist/components/widgets.cjs +1189 -45
  131. package/dist/components/widgets.cjs.map +1 -1
  132. package/dist/components/widgets.d.cts +177 -2
  133. package/dist/components/widgets.d.ts +177 -2
  134. package/dist/components/widgets.js +1179 -48
  135. package/dist/components/widgets.js.map +1 -1
  136. package/dist/components.js +9 -9
  137. package/dist/components.umd.js +2 -2
  138. package/dist/components.umd.js.map +1 -1
  139. package/dist/index.js +2 -2
  140. package/dist/widgets.umd.js +1 -1
  141. package/dist/widgets.umd.js.map +1 -1
  142. package/docs/ROADMAP.md +2 -2
  143. package/docs/components.md +55 -0
  144. package/docs/deprecations.md +4 -0
  145. package/docs/upgrading-7.md +33 -0
  146. package/package.json +43 -2
  147. package/dist/chunks/gpu-BBRLgEzM.cjs.map +0 -1
  148. package/dist/chunks/gpu-CsP2ZB3x.js.map +0 -1
@@ -422,6 +422,173 @@ interface UsaSwitchElement extends UsaElement {
422
422
  declare const SWITCH_VARIANTS: readonly ["ios", "daynight", "bounce", "liquid"];
423
423
  declare function defineSwitch(tag?: string): CustomElementConstructor | undefined;
424
424
 
425
+ /**
426
+ * `<usa-kanban>` (6.8) — a kanban board with drag-sort. Children are the
427
+ * columns (any element; a `[data-title]` attribute or its first heading is
428
+ * the title); the column's `[data-card]` children (or `<li>`s) are cards.
429
+ * Drag a card (pointer or touch): it lifts and tilts toward the drag
430
+ * direction, a placeholder opens where it will land, and the other cards
431
+ * glide out of the way (FLIP). Keyboard: Space / Enter picks a card up,
432
+ * arrows move it (← → between columns, ↑ ↓ within), Space drops, Esc cancels;
433
+ * moves are announced politely. Event `usa:move` (`{ card, from, to, index }`).
434
+ * Reduced motion: no tilt or glide.
435
+ */
436
+ interface UsaKanbanElement extends UsaElement {
437
+ readonly columns: HTMLElement[];
438
+ cardsOf(col: HTMLElement): HTMLElement[];
439
+ move(card: HTMLElement, to: HTMLElement, index: number): void;
440
+ }
441
+ declare function defineKanban(tag?: string): CustomElementConstructor | undefined;
442
+
443
+ /**
444
+ * `<usa-swipe-deck>` (6.8) — a stack of swipe cards (Tinder style). Drag the
445
+ * top card: it follows the pointer and rotates, "LIKE" / "NOPE" stamps fade
446
+ * in, and past `threshold` px (or a fast fling) it flies off; otherwise it
447
+ * springs back. The next card scales up from behind. Buttons / keys:
448
+ * `like()`, `nope()`, ← / →, and `undo()` brings the last card back.
449
+ * Event `usa:swipe` (`{ card, dir: 'left' | 'right', index }`) and
450
+ * `usa:empty`. Reduced motion: cards fade instead of flying.
451
+ */
452
+ interface UsaSwipeDeckElement extends UsaElement {
453
+ readonly cards: HTMLElement[];
454
+ readonly top: HTMLElement | null;
455
+ like(): void;
456
+ nope(): void;
457
+ undo(): void;
458
+ }
459
+ declare function defineSwipeDeck(tag?: string): CustomElementConstructor | undefined;
460
+
461
+ /**
462
+ * `<usa-weather-card>` (6.8) — an animated weather widget. `condition`
463
+ * (`clear | cloudy | rain | snow | storm | fog | night`) picks an animated
464
+ * icon and sky (sun rays turn, clouds drift, rain and snow fall, a gentle —
465
+ * flash-safe — bolt, fog bands, twinkling stars); `temp` counts up to the
466
+ * value, `unit` (°), `place` and `label` fill the text. Changing `condition`
467
+ * cross-fades the scene. Reduced motion: static icon, no count-up. The scene
468
+ * is decorative; the text is the accessible summary (`role="group"` with an
469
+ * `aria-label` like "Rain, 12°, Lisbon").
470
+ */
471
+ interface UsaWeatherCardElement extends UsaElement {
472
+ condition: string;
473
+ }
474
+ declare const WEATHER_CONDITIONS: readonly ["clear", "cloudy", "rain", "snow", "storm", "fog", "night"];
475
+ declare function defineWeatherCard(tag?: string): CustomElementConstructor | undefined;
476
+
477
+ /**
478
+ * `<usa-pull-cord>` (6.8) — a lamp pull-cord switch. Drag the handle down
479
+ * (or click / Space / Enter): the cord stretches, and when released past
480
+ * `threshold` px it toggles `on` with a click-bounce; the cord swings back on
481
+ * a damped spring (simulated, drawn as an SVG curve). The lamp shade above
482
+ * glows when on (CSS custom property `--usa-pc-glow`). A real switch:
483
+ * `role="switch"`, `aria-checked`; event `usa:change` (`{ on }`). Reduced
484
+ * motion: no swing — it just toggles.
485
+ */
486
+ interface UsaPullCordElement extends UsaElement {
487
+ on: boolean;
488
+ toggle(force?: boolean): void;
489
+ }
490
+ declare function definePullCord(tag?: string): CustomElementConstructor | undefined;
491
+
492
+ /**
493
+ * `<usa-date-picker>` (6.9) — an inline calendar. Changing month slides the
494
+ * grid in from the direction of travel, the selected day pops inside a
495
+ * spring circle and today has a ring. A real date grid: `role="grid"`,
496
+ * arrows (day / week), PageUp / PageDown (month), Home / End (week start /
497
+ * end), Enter / Space selects; `min` / `max` (ISO `YYYY-MM-DD`) disable days
498
+ * outside the range. `value` (ISO), `first-day` (0 = Sunday, 1 = Monday,
499
+ * default 1), `locale`. Event `usa:change` (`{ value, date }`). Reduced
500
+ * motion: no slide or pop.
501
+ */
502
+ interface UsaDatePickerElement extends UsaElement {
503
+ value: string;
504
+ month: string;
505
+ showMonth(delta: number): void;
506
+ }
507
+ /** Parse `YYYY-MM-DD` as a local date (or null). */
508
+ declare function parseISODate(s: string | null | undefined): Date | null;
509
+ /** The 6×7 day grid of a month (first row starts on `firstDay`). */
510
+ declare function monthGrid(year: number, month: number, firstDay?: number): Date[];
511
+ declare function defineDatePicker(tag?: string): CustomElementConstructor | undefined;
512
+
513
+ /**
514
+ * `<usa-color-picker>` (6.9) — a colour picker: a saturation / brightness
515
+ * square and a hue strip (both `role="slider"`, arrow keys, Shift = ×10),
516
+ * spring-follow thumbs, a preview chip that morphs to the new colour, and
517
+ * optional `swatches` (comma-separated hex) that pop on pick. `value` is
518
+ * `#rrggbb`. Events `usa:input` while dragging and `usa:change` on release
519
+ * (`{ value }`). Reduced motion: thumbs jump, no pop.
520
+ */
521
+ interface UsaColorPickerElement extends UsaElement {
522
+ value: string;
523
+ }
524
+ /** HSV (h 0–360, s / v 0–1) → `#rrggbb`. */
525
+ declare function hsvToHex(h: number, s: number, v: number): string;
526
+ /** `#rrggbb` → HSV (or null). */
527
+ declare function hexToHsv(hex: string): [number, number, number] | null;
528
+ declare function defineColorPicker(tag?: string): CustomElementConstructor | undefined;
529
+
530
+ /**
531
+ * `<usa-file-drop>` (6.9) — a file drop zone. Dragging files over it lights
532
+ * the zone with marching-ants borders and lifts the icon; dropping (or
533
+ * choosing via the built-in file input — click / Enter / Space) flies each
534
+ * file into a list with a progress bar. Progress is yours to report with
535
+ * `setProgress(index, 0–1)`, or `simulate` fakes it for demos; a finished
536
+ * file draws a check. Attributes `accept`, `multiple`, `label`. Event
537
+ * `usa:files` (`{ files }`). Reduced motion: no ants, lift or fly-in.
538
+ */
539
+ interface UsaFileDropElement extends UsaElement {
540
+ readonly files: File[];
541
+ setProgress(index: number, value: number): void;
542
+ addFiles(files: ArrayLike<File>): void;
543
+ clear(): void;
544
+ }
545
+ declare function defineFileDrop(tag?: string): CustomElementConstructor | undefined;
546
+
547
+ interface AnimationTrack {
548
+ /** Selector inside the player (`:scope` = the player). */
549
+ target?: string;
550
+ /** Start time in ms. */
551
+ start?: number;
552
+ duration?: number;
553
+ /** A timeline preset (`fade-up`, `scale`, `blur`…). */
554
+ preset?: string;
555
+ keyframes?: Keyframe[];
556
+ easing?: string;
557
+ /** A registered effect fired at `start` (instead of keyframes). */
558
+ effect?: string;
559
+ options?: Record<string, unknown>;
560
+ label?: string;
561
+ }
562
+ interface AnimationJSON {
563
+ format?: string;
564
+ version?: number;
565
+ name?: string;
566
+ loop?: boolean;
567
+ /** Total length; defaults to the end of the last track. */
568
+ duration?: number;
569
+ tracks: AnimationTrack[];
570
+ }
571
+
572
+ /**
573
+ * `<usa-keyframe-editor>` (6.9) — animation editor 2.0: a compact timeline
574
+ * for `<usa-player>` JSON. Each track is a row with a draggable bar (drag to
575
+ * move, drag the right edge to resize; ← / → move by 50 ms, Shift + ← / →
576
+ * resize); a playhead scrubs the preview, ▶ plays it. The preview target is
577
+ * the element with id `for` (its children are the tracks' targets). Set
578
+ * `animation` (object or JSON string, or a `<script type="application/json">`
579
+ * child); read `animation` / `toJSON()` for the edited JSON (format
580
+ * `use-scroll-animate/animation` v1 — playable by `<usa-player>`). Event
581
+ * `usa:change` (`{ animation }`). Reduced motion: the preview jumps to the
582
+ * end state.
583
+ */
584
+ interface UsaKeyframeEditorElement extends UsaElement {
585
+ animation: AnimationJSON;
586
+ toJSON(): AnimationJSON;
587
+ play(): void;
588
+ seek(ms: number): void;
589
+ }
590
+ declare function defineKeyframeEditor(tag?: string): CustomElementConstructor | undefined;
591
+
425
592
  /**
426
593
  * motionary/components/widgets — the 6.x animated UI widgets, in their own
427
594
  * entry so `motionary/components` and `components/lite` keep their size
@@ -467,8 +634,16 @@ declare global {
467
634
  'usa-pagination': UsaPaginationElement;
468
635
  'usa-segmented': UsaSegmentedElement;
469
636
  'usa-switch': UsaSwitchElement;
637
+ 'usa-kanban': UsaKanbanElement;
638
+ 'usa-swipe-deck': UsaSwipeDeckElement;
639
+ 'usa-weather-card': UsaWeatherCardElement;
640
+ 'usa-pull-cord': UsaPullCordElement;
641
+ 'usa-date-picker': UsaDatePickerElement;
642
+ 'usa-color-picker': UsaColorPickerElement;
643
+ 'usa-file-drop': UsaFileDropElement;
644
+ 'usa-keyframe-editor': UsaKeyframeEditorElement;
470
645
  }
471
646
  }
472
647
 
473
- export { CAROUSEL_EFFECTS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WIDGETS, WIDGET_TAGS, defineCarousel, defineCompare, defineCubeGallery, defineDisclosure, defineDock, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineNavMorph, defineOdometer, definePagination, defineProgressRing, defineSegmented, defineSheet, defineSkeletonReveal, defineStarRating, defineStepper, defineStories, defineSwitch, defineTabBar, defineTip, defineToastStack, defineWidgets, pageWindow, stackToast };
474
- export type { StackToastOptions, UsaCarouselElement, UsaCompareElement, UsaCubeGalleryElement, UsaDisclosureElement, UsaDockElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMilestonesElement, UsaModalElement, UsaNavMorphElement, UsaOdometerElement, UsaPaginationElement, UsaProgressRingElement, UsaSegmentedElement, UsaSheetElement, UsaSkeletonRevealElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement };
648
+ export { CAROUSEL_EFFECTS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, defineCarousel, defineColorPicker, defineCompare, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineFileDrop, defineKanban, defineKeyframeEditor, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineNavMorph, defineOdometer, definePagination, defineProgressRing, definePullCord, defineSegmented, defineSheet, defineSkeletonReveal, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineWeatherCard, defineWidgets, hexToHsv, hsvToHex, monthGrid, pageWindow, parseISODate, stackToast };
649
+ export type { StackToastOptions, UsaCarouselElement, UsaColorPickerElement, UsaCompareElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaFileDropElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMilestonesElement, UsaModalElement, UsaNavMorphElement, UsaOdometerElement, UsaPaginationElement, UsaProgressRingElement, UsaPullCordElement, UsaSegmentedElement, UsaSheetElement, UsaSkeletonRevealElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaWeatherCardElement };
@@ -422,6 +422,173 @@ interface UsaSwitchElement extends UsaElement {
422
422
  declare const SWITCH_VARIANTS: readonly ["ios", "daynight", "bounce", "liquid"];
423
423
  declare function defineSwitch(tag?: string): CustomElementConstructor | undefined;
424
424
 
425
+ /**
426
+ * `<usa-kanban>` (6.8) — a kanban board with drag-sort. Children are the
427
+ * columns (any element; a `[data-title]` attribute or its first heading is
428
+ * the title); the column's `[data-card]` children (or `<li>`s) are cards.
429
+ * Drag a card (pointer or touch): it lifts and tilts toward the drag
430
+ * direction, a placeholder opens where it will land, and the other cards
431
+ * glide out of the way (FLIP). Keyboard: Space / Enter picks a card up,
432
+ * arrows move it (← → between columns, ↑ ↓ within), Space drops, Esc cancels;
433
+ * moves are announced politely. Event `usa:move` (`{ card, from, to, index }`).
434
+ * Reduced motion: no tilt or glide.
435
+ */
436
+ interface UsaKanbanElement extends UsaElement {
437
+ readonly columns: HTMLElement[];
438
+ cardsOf(col: HTMLElement): HTMLElement[];
439
+ move(card: HTMLElement, to: HTMLElement, index: number): void;
440
+ }
441
+ declare function defineKanban(tag?: string): CustomElementConstructor | undefined;
442
+
443
+ /**
444
+ * `<usa-swipe-deck>` (6.8) — a stack of swipe cards (Tinder style). Drag the
445
+ * top card: it follows the pointer and rotates, "LIKE" / "NOPE" stamps fade
446
+ * in, and past `threshold` px (or a fast fling) it flies off; otherwise it
447
+ * springs back. The next card scales up from behind. Buttons / keys:
448
+ * `like()`, `nope()`, ← / →, and `undo()` brings the last card back.
449
+ * Event `usa:swipe` (`{ card, dir: 'left' | 'right', index }`) and
450
+ * `usa:empty`. Reduced motion: cards fade instead of flying.
451
+ */
452
+ interface UsaSwipeDeckElement extends UsaElement {
453
+ readonly cards: HTMLElement[];
454
+ readonly top: HTMLElement | null;
455
+ like(): void;
456
+ nope(): void;
457
+ undo(): void;
458
+ }
459
+ declare function defineSwipeDeck(tag?: string): CustomElementConstructor | undefined;
460
+
461
+ /**
462
+ * `<usa-weather-card>` (6.8) — an animated weather widget. `condition`
463
+ * (`clear | cloudy | rain | snow | storm | fog | night`) picks an animated
464
+ * icon and sky (sun rays turn, clouds drift, rain and snow fall, a gentle —
465
+ * flash-safe — bolt, fog bands, twinkling stars); `temp` counts up to the
466
+ * value, `unit` (°), `place` and `label` fill the text. Changing `condition`
467
+ * cross-fades the scene. Reduced motion: static icon, no count-up. The scene
468
+ * is decorative; the text is the accessible summary (`role="group"` with an
469
+ * `aria-label` like "Rain, 12°, Lisbon").
470
+ */
471
+ interface UsaWeatherCardElement extends UsaElement {
472
+ condition: string;
473
+ }
474
+ declare const WEATHER_CONDITIONS: readonly ["clear", "cloudy", "rain", "snow", "storm", "fog", "night"];
475
+ declare function defineWeatherCard(tag?: string): CustomElementConstructor | undefined;
476
+
477
+ /**
478
+ * `<usa-pull-cord>` (6.8) — a lamp pull-cord switch. Drag the handle down
479
+ * (or click / Space / Enter): the cord stretches, and when released past
480
+ * `threshold` px it toggles `on` with a click-bounce; the cord swings back on
481
+ * a damped spring (simulated, drawn as an SVG curve). The lamp shade above
482
+ * glows when on (CSS custom property `--usa-pc-glow`). A real switch:
483
+ * `role="switch"`, `aria-checked`; event `usa:change` (`{ on }`). Reduced
484
+ * motion: no swing — it just toggles.
485
+ */
486
+ interface UsaPullCordElement extends UsaElement {
487
+ on: boolean;
488
+ toggle(force?: boolean): void;
489
+ }
490
+ declare function definePullCord(tag?: string): CustomElementConstructor | undefined;
491
+
492
+ /**
493
+ * `<usa-date-picker>` (6.9) — an inline calendar. Changing month slides the
494
+ * grid in from the direction of travel, the selected day pops inside a
495
+ * spring circle and today has a ring. A real date grid: `role="grid"`,
496
+ * arrows (day / week), PageUp / PageDown (month), Home / End (week start /
497
+ * end), Enter / Space selects; `min` / `max` (ISO `YYYY-MM-DD`) disable days
498
+ * outside the range. `value` (ISO), `first-day` (0 = Sunday, 1 = Monday,
499
+ * default 1), `locale`. Event `usa:change` (`{ value, date }`). Reduced
500
+ * motion: no slide or pop.
501
+ */
502
+ interface UsaDatePickerElement extends UsaElement {
503
+ value: string;
504
+ month: string;
505
+ showMonth(delta: number): void;
506
+ }
507
+ /** Parse `YYYY-MM-DD` as a local date (or null). */
508
+ declare function parseISODate(s: string | null | undefined): Date | null;
509
+ /** The 6×7 day grid of a month (first row starts on `firstDay`). */
510
+ declare function monthGrid(year: number, month: number, firstDay?: number): Date[];
511
+ declare function defineDatePicker(tag?: string): CustomElementConstructor | undefined;
512
+
513
+ /**
514
+ * `<usa-color-picker>` (6.9) — a colour picker: a saturation / brightness
515
+ * square and a hue strip (both `role="slider"`, arrow keys, Shift = ×10),
516
+ * spring-follow thumbs, a preview chip that morphs to the new colour, and
517
+ * optional `swatches` (comma-separated hex) that pop on pick. `value` is
518
+ * `#rrggbb`. Events `usa:input` while dragging and `usa:change` on release
519
+ * (`{ value }`). Reduced motion: thumbs jump, no pop.
520
+ */
521
+ interface UsaColorPickerElement extends UsaElement {
522
+ value: string;
523
+ }
524
+ /** HSV (h 0–360, s / v 0–1) → `#rrggbb`. */
525
+ declare function hsvToHex(h: number, s: number, v: number): string;
526
+ /** `#rrggbb` → HSV (or null). */
527
+ declare function hexToHsv(hex: string): [number, number, number] | null;
528
+ declare function defineColorPicker(tag?: string): CustomElementConstructor | undefined;
529
+
530
+ /**
531
+ * `<usa-file-drop>` (6.9) — a file drop zone. Dragging files over it lights
532
+ * the zone with marching-ants borders and lifts the icon; dropping (or
533
+ * choosing via the built-in file input — click / Enter / Space) flies each
534
+ * file into a list with a progress bar. Progress is yours to report with
535
+ * `setProgress(index, 0–1)`, or `simulate` fakes it for demos; a finished
536
+ * file draws a check. Attributes `accept`, `multiple`, `label`. Event
537
+ * `usa:files` (`{ files }`). Reduced motion: no ants, lift or fly-in.
538
+ */
539
+ interface UsaFileDropElement extends UsaElement {
540
+ readonly files: File[];
541
+ setProgress(index: number, value: number): void;
542
+ addFiles(files: ArrayLike<File>): void;
543
+ clear(): void;
544
+ }
545
+ declare function defineFileDrop(tag?: string): CustomElementConstructor | undefined;
546
+
547
+ interface AnimationTrack {
548
+ /** Selector inside the player (`:scope` = the player). */
549
+ target?: string;
550
+ /** Start time in ms. */
551
+ start?: number;
552
+ duration?: number;
553
+ /** A timeline preset (`fade-up`, `scale`, `blur`…). */
554
+ preset?: string;
555
+ keyframes?: Keyframe[];
556
+ easing?: string;
557
+ /** A registered effect fired at `start` (instead of keyframes). */
558
+ effect?: string;
559
+ options?: Record<string, unknown>;
560
+ label?: string;
561
+ }
562
+ interface AnimationJSON {
563
+ format?: string;
564
+ version?: number;
565
+ name?: string;
566
+ loop?: boolean;
567
+ /** Total length; defaults to the end of the last track. */
568
+ duration?: number;
569
+ tracks: AnimationTrack[];
570
+ }
571
+
572
+ /**
573
+ * `<usa-keyframe-editor>` (6.9) — animation editor 2.0: a compact timeline
574
+ * for `<usa-player>` JSON. Each track is a row with a draggable bar (drag to
575
+ * move, drag the right edge to resize; ← / → move by 50 ms, Shift + ← / →
576
+ * resize); a playhead scrubs the preview, ▶ plays it. The preview target is
577
+ * the element with id `for` (its children are the tracks' targets). Set
578
+ * `animation` (object or JSON string, or a `<script type="application/json">`
579
+ * child); read `animation` / `toJSON()` for the edited JSON (format
580
+ * `use-scroll-animate/animation` v1 — playable by `<usa-player>`). Event
581
+ * `usa:change` (`{ animation }`). Reduced motion: the preview jumps to the
582
+ * end state.
583
+ */
584
+ interface UsaKeyframeEditorElement extends UsaElement {
585
+ animation: AnimationJSON;
586
+ toJSON(): AnimationJSON;
587
+ play(): void;
588
+ seek(ms: number): void;
589
+ }
590
+ declare function defineKeyframeEditor(tag?: string): CustomElementConstructor | undefined;
591
+
425
592
  /**
426
593
  * motionary/components/widgets — the 6.x animated UI widgets, in their own
427
594
  * entry so `motionary/components` and `components/lite` keep their size
@@ -467,8 +634,16 @@ declare global {
467
634
  'usa-pagination': UsaPaginationElement;
468
635
  'usa-segmented': UsaSegmentedElement;
469
636
  'usa-switch': UsaSwitchElement;
637
+ 'usa-kanban': UsaKanbanElement;
638
+ 'usa-swipe-deck': UsaSwipeDeckElement;
639
+ 'usa-weather-card': UsaWeatherCardElement;
640
+ 'usa-pull-cord': UsaPullCordElement;
641
+ 'usa-date-picker': UsaDatePickerElement;
642
+ 'usa-color-picker': UsaColorPickerElement;
643
+ 'usa-file-drop': UsaFileDropElement;
644
+ 'usa-keyframe-editor': UsaKeyframeEditorElement;
470
645
  }
471
646
  }
472
647
 
473
- export { CAROUSEL_EFFECTS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WIDGETS, WIDGET_TAGS, defineCarousel, defineCompare, defineCubeGallery, defineDisclosure, defineDock, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineNavMorph, defineOdometer, definePagination, defineProgressRing, defineSegmented, defineSheet, defineSkeletonReveal, defineStarRating, defineStepper, defineStories, defineSwitch, defineTabBar, defineTip, defineToastStack, defineWidgets, pageWindow, stackToast };
474
- export type { StackToastOptions, UsaCarouselElement, UsaCompareElement, UsaCubeGalleryElement, UsaDisclosureElement, UsaDockElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMilestonesElement, UsaModalElement, UsaNavMorphElement, UsaOdometerElement, UsaPaginationElement, UsaProgressRingElement, UsaSegmentedElement, UsaSheetElement, UsaSkeletonRevealElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement };
648
+ export { CAROUSEL_EFFECTS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, defineCarousel, defineColorPicker, defineCompare, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineFileDrop, defineKanban, defineKeyframeEditor, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineNavMorph, defineOdometer, definePagination, defineProgressRing, definePullCord, defineSegmented, defineSheet, defineSkeletonReveal, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineWeatherCard, defineWidgets, hexToHsv, hsvToHex, monthGrid, pageWindow, parseISODate, stackToast };
649
+ export type { StackToastOptions, UsaCarouselElement, UsaColorPickerElement, UsaCompareElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaFileDropElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMilestonesElement, UsaModalElement, UsaNavMorphElement, UsaOdometerElement, UsaPaginationElement, UsaProgressRingElement, UsaPullCordElement, UsaSegmentedElement, UsaSheetElement, UsaSkeletonRevealElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaWeatherCardElement };