use-scroll-animate 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.
- package/CHANGELOG.md +38 -0
- package/bin/usa-codemod-7.mjs +91 -0
- package/dist/chunks/{base-DchG4q_S.js → base-D5MHqeDd.js} +2 -2
- package/dist/chunks/{base-DchG4q_S.js.map → base-D5MHqeDd.js.map} +1 -1
- package/dist/chunks/{core-DVyTlo9Q.js → core-DyJu5r5a.js} +2 -2
- package/dist/chunks/{core-DVyTlo9Q.js.map → core-DyJu5r5a.js.map} +1 -1
- package/dist/chunks/{core-D2vF8kZb.js → core-ZGo4hOEk.js} +2 -2
- package/dist/chunks/{core-D2vF8kZb.js.map → core-ZGo4hOEk.js.map} +1 -1
- package/dist/chunks/{fx-DUMVKSvg.js → fx-DlGRMJ-Z.js} +2 -2
- package/dist/chunks/{fx-DUMVKSvg.js.map → fx-DlGRMJ-Z.js.map} +1 -1
- package/dist/chunks/{gpu-BBRLgEzM.cjs → gpu-C2D4T9Q-.cjs} +9 -2
- package/dist/chunks/gpu-C2D4T9Q-.cjs.map +1 -0
- package/dist/chunks/{gpu-CsP2ZB3x.js → gpu-DPhMkJq6.js} +10 -4
- package/dist/chunks/gpu-DPhMkJq6.js.map +1 -0
- package/dist/chunks/player-DH3TIz-t.js +516 -0
- package/dist/chunks/player-DH3TIz-t.js.map +1 -0
- package/dist/chunks/player-PS6_FzNw.cjs +525 -0
- package/dist/chunks/player-PS6_FzNw.cjs.map +1 -0
- package/dist/chunks/{registry-D23neB4M.js → registry-CTLWeg-J.js} +2 -2
- package/dist/chunks/{registry-D23neB4M.js.map → registry-CTLWeg-J.js.map} +1 -1
- package/dist/chunks/{spring-BhoT09Qb.js → spring-B-9MZOrW.js} +2 -2
- package/dist/chunks/{spring-BhoT09Qb.js.map → spring-B-9MZOrW.js.map} +1 -1
- package/dist/chunks/{variants-C_hv_s23.js → variants-CoZn3k_5.js} +2 -2
- package/dist/chunks/{variants-C_hv_s23.js.map → variants-CoZn3k_5.js.map} +1 -1
- package/dist/components/a11y.js +2 -2
- package/dist/components/angular.js +7 -7
- package/dist/components/background.js +2 -2
- package/dist/components/bridge.js +1 -1
- package/dist/components/cards.js +2 -2
- package/dist/components/click.js +3 -3
- package/dist/components/depth.js +3 -3
- package/dist/components/effects.cjs +13 -522
- package/dist/components/effects.cjs.map +1 -1
- package/dist/components/effects.js +7 -515
- package/dist/components/effects.js.map +1 -1
- package/dist/components/feedback.js +1 -1
- package/dist/components/fx-3d.cjs +8 -2
- package/dist/components/fx-3d.cjs.map +1 -1
- package/dist/components/fx-3d.d.cts +3 -1
- package/dist/components/fx-3d.d.ts +3 -1
- package/dist/components/fx-3d.js +9 -4
- package/dist/components/fx-3d.js.map +1 -1
- package/dist/components/fx-focus.cjs +125 -0
- package/dist/components/fx-focus.cjs.map +1 -0
- package/dist/components/fx-focus.d.cts +65 -0
- package/dist/components/fx-focus.d.ts +65 -0
- package/dist/components/fx-focus.js +122 -0
- package/dist/components/fx-focus.js.map +1 -0
- package/dist/components/fx-gpu.cjs +3 -2
- package/dist/components/fx-gpu.cjs.map +1 -1
- package/dist/components/fx-gpu.d.cts +3 -1
- package/dist/components/fx-gpu.d.ts +3 -1
- package/dist/components/fx-gpu.js +3 -3
- package/dist/components/fx-light.cjs +8 -2
- package/dist/components/fx-light.cjs.map +1 -1
- package/dist/components/fx-light.d.cts +3 -1
- package/dist/components/fx-light.d.ts +3 -1
- package/dist/components/fx-light.js +9 -4
- package/dist/components/fx-light.js.map +1 -1
- package/dist/components/fx-morph.cjs +8 -2
- package/dist/components/fx-morph.cjs.map +1 -1
- package/dist/components/fx-morph.d.cts +3 -1
- package/dist/components/fx-morph.d.ts +3 -1
- package/dist/components/fx-morph.js +9 -4
- package/dist/components/fx-morph.js.map +1 -1
- package/dist/components/fx-physics.cjs +350 -0
- package/dist/components/fx-physics.cjs.map +1 -0
- package/dist/components/fx-physics.d.cts +94 -0
- package/dist/components/fx-physics.d.ts +94 -0
- package/dist/components/fx-physics.js +345 -0
- package/dist/components/fx-physics.js.map +1 -0
- package/dist/components/fx-text.cjs +8 -2
- package/dist/components/fx-text.cjs.map +1 -1
- package/dist/components/fx-text.d.cts +3 -1
- package/dist/components/fx-text.d.ts +3 -1
- package/dist/components/fx-text.js +9 -4
- package/dist/components/fx-text.js.map +1 -1
- package/dist/components/fx-transitions.cjs +8 -2
- package/dist/components/fx-transitions.cjs.map +1 -1
- package/dist/components/fx-transitions.d.cts +3 -1
- package/dist/components/fx-transitions.d.ts +3 -1
- package/dist/components/fx-transitions.js +10 -5
- package/dist/components/fx-transitions.js.map +1 -1
- package/dist/components/fx-weather.cjs +271 -0
- package/dist/components/fx-weather.cjs.map +1 -0
- package/dist/components/fx-weather.d.cts +72 -0
- package/dist/components/fx-weather.d.ts +72 -0
- package/dist/components/fx-weather.js +266 -0
- package/dist/components/fx-weather.js.map +1 -0
- package/dist/components/fx.js +5 -5
- package/dist/components/fx2.cjs +49 -10
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +181 -4
- package/dist/components/fx2.d.ts +181 -4
- package/dist/components/fx2.js +42 -22
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/gesture.js +4 -4
- package/dist/components/interaction.cjs +1 -0
- package/dist/components/interaction.cjs.map +1 -1
- package/dist/components/interaction.js +2 -1
- package/dist/components/interaction.js.map +1 -1
- package/dist/components/layout.js +1 -1
- package/dist/components/lite.cjs +2 -0
- package/dist/components/lite.cjs.map +1 -1
- package/dist/components/lite.js +2 -0
- package/dist/components/lite.js.map +1 -1
- package/dist/components/marketplace.cjs +82 -0
- package/dist/components/marketplace.cjs.map +1 -0
- package/dist/components/marketplace.d.cts +108 -0
- package/dist/components/marketplace.d.ts +108 -0
- package/dist/components/marketplace.js +77 -0
- package/dist/components/marketplace.js.map +1 -0
- package/dist/components/packs.js +1 -1
- package/dist/components/page.js +3 -3
- package/dist/components/perf.js +2 -2
- package/dist/components/physics.js +3 -3
- package/dist/components/reveal.js +1 -1
- package/dist/components/solid.js +7 -7
- package/dist/components/svelte.js +7 -7
- package/dist/components/svg.js +1 -1
- package/dist/components/text.js +2 -2
- package/dist/components/timeline.js +3 -3
- package/dist/components/transitions.js +1 -1
- package/dist/components/ui.cjs +1 -0
- package/dist/components/ui.cjs.map +1 -1
- package/dist/components/ui.js +5 -4
- package/dist/components/ui.js.map +1 -1
- package/dist/components/vue.js +7 -7
- package/dist/components/webgl.js +1 -1
- package/dist/components/widgets.cjs +1189 -45
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +177 -2
- package/dist/components/widgets.d.ts +177 -2
- package/dist/components/widgets.js +1179 -48
- package/dist/components/widgets.js.map +1 -1
- package/dist/components.js +9 -9
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/widgets.umd.js +1 -1
- package/dist/widgets.umd.js.map +1 -1
- package/docs/ROADMAP.md +2 -2
- package/docs/components.md +55 -0
- package/docs/deprecations.md +4 -0
- package/docs/upgrading-7.md +33 -0
- package/package.json +43 -2
- package/dist/chunks/gpu-BBRLgEzM.cjs.map +0 -1
- 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 };
|