use-scroll-animate 8.9.0 → 9.1.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 +31 -0
- package/README.md +2 -2
- package/README_ja.md +2 -2
- package/README_zh.md +2 -2
- package/dist/chunks/manifest-B08-vo9G.cjs +81 -0
- package/dist/chunks/manifest-B08-vo9G.cjs.map +1 -0
- package/dist/chunks/manifest-PJ0h8RS_.js +76 -0
- package/dist/chunks/manifest-PJ0h8RS_.js.map +1 -0
- package/dist/components/dsl.cjs +210 -0
- package/dist/components/dsl.cjs.map +1 -0
- package/dist/components/dsl.d.cts +76 -0
- package/dist/components/dsl.d.ts +76 -0
- package/dist/components/dsl.js +203 -0
- package/dist/components/dsl.js.map +1 -0
- package/dist/components/effects.cjs +6 -29
- package/dist/components/effects.cjs.map +1 -1
- package/dist/components/effects.d.cts +3 -14
- package/dist/components/effects.d.ts +3 -14
- package/dist/components/effects.js +8 -27
- package/dist/components/effects.js.map +1 -1
- package/dist/components/fx-cinema.cjs +100 -0
- package/dist/components/fx-cinema.cjs.map +1 -0
- package/dist/components/fx-cinema.d.cts +70 -0
- package/dist/components/fx-cinema.d.ts +70 -0
- package/dist/components/fx-cinema.js +95 -0
- package/dist/components/fx-cinema.js.map +1 -0
- package/dist/components/fx2.cjs +12 -5
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +25 -1
- package/dist/components/fx2.d.ts +25 -1
- package/dist/components/fx2.js +6 -2
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/marketplace.cjs +82 -71
- package/dist/components/marketplace.cjs.map +1 -1
- package/dist/components/marketplace.d.cts +33 -2
- package/dist/components/marketplace.d.ts +33 -2
- package/dist/components/marketplace.js +74 -68
- package/dist/components/marketplace.js.map +1 -1
- package/dist/components/widgets.cjs +481 -198
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +131 -2
- package/dist/components/widgets.d.ts +131 -2
- package/dist/components/widgets.js +479 -200
- package/dist/components/widgets.js.map +1 -1
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/dist/widgets.umd.js +1 -1
- package/dist/widgets.umd.js.map +1 -1
- package/docs/ROADMAP.md +12 -14
- package/docs/components.md +48 -5
- package/docs/deprecations.md +1 -1
- package/docs/upgrading-9.md +11 -1
- package/package.json +51 -1
|
@@ -1577,6 +1577,131 @@ interface UsaPropPanelElement extends UsaElement {
|
|
|
1577
1577
|
declare function parseProps(s: string): PropSpec[];
|
|
1578
1578
|
declare function definePropPanel(tag?: string): CustomElementConstructor | undefined;
|
|
1579
1579
|
|
|
1580
|
+
/**
|
|
1581
|
+
* 5.0 — unified plugin-style effect registration. Every effect (built-in or
|
|
1582
|
+
* yours) is a plain object registered once and played the same way:
|
|
1583
|
+
* `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
|
|
1584
|
+
* `<usa-fx effect="name" trigger="click">`. Effects get a context that
|
|
1585
|
+
* already applies reduced motion, motion sensitivity, intensity and the
|
|
1586
|
+
* animation budget.
|
|
1587
|
+
*/
|
|
1588
|
+
|
|
1589
|
+
declare const EFFECT_TRIGGERS: readonly ["click", "hover", "enter", "load", "loop", "manual"];
|
|
1590
|
+
type EffectTrigger = (typeof EFFECT_TRIGGERS)[number];
|
|
1591
|
+
|
|
1592
|
+
/**
|
|
1593
|
+
* `motionary/dsl` (= `motionary/components/dsl`, 9.0) — the declarative
|
|
1594
|
+
* motion DSL. Describe motion as one readable string instead of code:
|
|
1595
|
+
*
|
|
1596
|
+
* ```html
|
|
1597
|
+
* <section data-motion="enter: fade-up 600ms ease-out stagger 80ms; hover: pop; click: confetti count=40">
|
|
1598
|
+
* ```
|
|
1599
|
+
*
|
|
1600
|
+
* Grammar — rules separated by `;`, each `trigger: effect [modifiers…]`:
|
|
1601
|
+
* - trigger: `enter` · `click` · `hover` · `load` · `loop` · `manual`
|
|
1602
|
+
* - effect: any registered effect name (timeline presets, packs, plugins)
|
|
1603
|
+
* - modifiers: a duration (`600ms` / `0.6s`), `delay 120ms`,
|
|
1604
|
+
* `stagger 80ms` (children one after another), an easing (`ease-out`,
|
|
1605
|
+
* `linear`, `spring`, `cubic-bezier(…)`, `steps(…)`), `once`, and
|
|
1606
|
+
* `key=value` effect options (numbers / booleans parsed).
|
|
1607
|
+
*
|
|
1608
|
+
* `parseMotion()` → rules + errors, `serializeMotion()` back to a string,
|
|
1609
|
+
* `motion\`…\`` tagged template, `applyMotion(root)` binds every
|
|
1610
|
+
* `[data-motion]` under `root` (and watches for new ones with `observe`),
|
|
1611
|
+
* `bindMotion(el, rules)` for one element, and `createComponent(json)`
|
|
1612
|
+
* builds live markup from the 8.9 `describeComponent()` JSON.
|
|
1613
|
+
*/
|
|
1614
|
+
|
|
1615
|
+
interface MotionRule {
|
|
1616
|
+
trigger: EffectTrigger;
|
|
1617
|
+
effect: string;
|
|
1618
|
+
duration?: number;
|
|
1619
|
+
delay?: number;
|
|
1620
|
+
stagger?: number;
|
|
1621
|
+
easing?: string;
|
|
1622
|
+
once?: boolean;
|
|
1623
|
+
options: Record<string, string | number | boolean>;
|
|
1624
|
+
}
|
|
1625
|
+
|
|
1626
|
+
/**
|
|
1627
|
+
* `<usa-motion rules="enter: fade-up 600ms stagger 80ms; hover: pop">` (9.0)
|
|
1628
|
+
* — the declarative motion DSL as an element: its `rules` (the same string
|
|
1629
|
+
* as `data-motion`) are bound to it, `stagger` runs them over its children.
|
|
1630
|
+
* Changing `rules` re-binds. `rules` / `parsed` properties; `errors` lists
|
|
1631
|
+
* what was skipped (unknown trigger, modifier or effect) and `usa:motion-error`
|
|
1632
|
+
* fires for each. Layout-neutral (`display: contents` unless styled).
|
|
1633
|
+
*/
|
|
1634
|
+
interface UsaMotionElement extends UsaElement {
|
|
1635
|
+
readonly parsed: MotionRule[];
|
|
1636
|
+
readonly errors: string[];
|
|
1637
|
+
}
|
|
1638
|
+
declare function defineMotion(tag?: string): CustomElementConstructor | undefined;
|
|
1639
|
+
|
|
1640
|
+
interface PluginListing {
|
|
1641
|
+
name: string;
|
|
1642
|
+
title: string;
|
|
1643
|
+
description: string;
|
|
1644
|
+
entry: string;
|
|
1645
|
+
register: string;
|
|
1646
|
+
effects: string[];
|
|
1647
|
+
tags: string[];
|
|
1648
|
+
since: string;
|
|
1649
|
+
author?: string;
|
|
1650
|
+
official?: boolean;
|
|
1651
|
+
}
|
|
1652
|
+
|
|
1653
|
+
/**
|
|
1654
|
+
* `<usa-plugin-store>` (9.0) — the plugin marketplace as a component: a
|
|
1655
|
+
* search box over the catalogue (first-party packs by default, or a
|
|
1656
|
+
* `plugins` list you set), result cards with their effects as chips, and
|
|
1657
|
+
* an Install button per plugin that imports and registers it (`loader`
|
|
1658
|
+
* property maps entries to imports for bundlers). Cards fly in staggered,
|
|
1659
|
+
* installs show a progress ring then a check. `usa:install` { name, effects }
|
|
1660
|
+
* / `usa:install-error` { name, message }. A labelled `search` region with
|
|
1661
|
+
* a live result count; reduced motion: no fly-in.
|
|
1662
|
+
*/
|
|
1663
|
+
interface UsaPluginStoreElement extends UsaElement {
|
|
1664
|
+
plugins: PluginListing[];
|
|
1665
|
+
loader: ((entry: string) => Promise<any>) | null;
|
|
1666
|
+
search(q: string): PluginListing[];
|
|
1667
|
+
install(name: string): Promise<string[]>;
|
|
1668
|
+
}
|
|
1669
|
+
declare function definePluginStore(tag?: string): CustomElementConstructor | undefined;
|
|
1670
|
+
|
|
1671
|
+
/**
|
|
1672
|
+
* `<usa-chapter-nav for="#story">` (9.1) — chapter navigation for long-form
|
|
1673
|
+
* stories: one entry per `[data-chapter]` section (title from
|
|
1674
|
+
* `data-chapter`, else its first heading) inside the `for` container (or
|
|
1675
|
+
* the document), each with a progress bar that fills as you read that
|
|
1676
|
+
* chapter; the current chapter gets `aria-current="step"`, clicking one
|
|
1677
|
+
* scrolls smoothly to it. `orientation` horizontal (default) | vertical.
|
|
1678
|
+
* `current` index, `goTo(i)`; `usa:chapter` { index, title } on change.
|
|
1679
|
+
* A labelled `navigation`; reduced motion: instant jumps.
|
|
1680
|
+
*/
|
|
1681
|
+
interface UsaChapterNavElement extends UsaElement {
|
|
1682
|
+
readonly current: number;
|
|
1683
|
+
goTo(i: number): void;
|
|
1684
|
+
}
|
|
1685
|
+
declare function defineChapterNav(tag?: string): CustomElementConstructor | undefined;
|
|
1686
|
+
|
|
1687
|
+
/**
|
|
1688
|
+
* `<usa-scene camera="dolly-in" strength="1">` (9.1) — a scroll-scrubbed
|
|
1689
|
+
* cinematic shot: while the scene crosses the viewport its media (first
|
|
1690
|
+
* `img` / `video` / `[data-shot]` child) follows a camera move —
|
|
1691
|
+
* `dolly-in` · `dolly-out` · `pan-left` · `pan-right` · `tilt-up` ·
|
|
1692
|
+
* `tilt-down` · `zoom-in` · `zoom-out` · `orbit` — and `[data-caption]`
|
|
1693
|
+
* children fade in at their `data-at` progress (0–1). `autoplay` plays the
|
|
1694
|
+
* move on its own (looping back and forth) instead of following the scroll.
|
|
1695
|
+
* `progress` (0–1);
|
|
1696
|
+
* `usa:shot` { progress } while it moves. Reduced motion: a still frame,
|
|
1697
|
+
* captions shown.
|
|
1698
|
+
*/
|
|
1699
|
+
interface UsaSceneElement extends UsaElement {
|
|
1700
|
+
readonly progress: number;
|
|
1701
|
+
setProgress(p: number): void;
|
|
1702
|
+
}
|
|
1703
|
+
declare function defineScene(tag?: string): CustomElementConstructor | undefined;
|
|
1704
|
+
|
|
1580
1705
|
/**
|
|
1581
1706
|
* motionary/components/widgets — the 6.x animated UI widgets, in their own
|
|
1582
1707
|
* entry so `motionary/components` and `components/lite` keep their size
|
|
@@ -1680,8 +1805,12 @@ declare global {
|
|
|
1680
1805
|
'usa-spatial-card': UsaSpatialCardElement;
|
|
1681
1806
|
'usa-code-export': UsaCodeExportElement;
|
|
1682
1807
|
'usa-prop-panel': UsaPropPanelElement;
|
|
1808
|
+
'usa-motion': UsaMotionElement;
|
|
1809
|
+
'usa-plugin-store': UsaPluginStoreElement;
|
|
1810
|
+
'usa-chapter-nav': UsaChapterNavElement;
|
|
1811
|
+
'usa-scene': UsaSceneElement;
|
|
1683
1812
|
}
|
|
1684
1813
|
}
|
|
1685
1814
|
|
|
1686
|
-
export { CAROUSEL_EFFECTS, EQ_PRESETS, FESTIVAL_THEMES, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, RETRO_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineCarousel, defineCartDrawer, defineChatComposer, defineClockControl, defineCodeExport, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGestureSticker, defineGlobe, defineGyroCard, defineHudPanel, defineHydrate, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLiquidNav, defineLocationCard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOrganicCard, defineOtp, definePagination, definePanorama, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePropPanel, definePullCord, defineRadar, defineReactions, defineRedEnvelope, defineRetroButton, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSketchChart, defineSparkline, defineSpatialCard, defineStarRating, defineStepper, defineStickyWall, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTerminal, defineThemeSurface, defineThemeSwitcher, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, describeComponent, exportComponent, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseProps, parseReactions, parseTargets, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
|
|
1687
|
-
export type { BellNotice, CartItem, ChatMessage, ExportFormat, ExportedNode, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, PropSpec, RadarTarget, StackToastOptions, StickerState, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChatComposerElement, UsaClockControlElement, UsaCodeExportElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGestureStickerElement, UsaGlobeElement, UsaGyroCardElement, UsaHudPanelElement, UsaHydrateElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLiquidNavElement, UsaLocationCardElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOrganicCardElement, UsaOtpElement, UsaPaginationElement, UsaPanoramaElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPropPanelElement, UsaPullCordElement, UsaRadarElement, UsaReactionsElement, UsaRedEnvelopeElement, UsaRetroButtonElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSketchChartElement, UsaSparklineElement, UsaSpatialCardElement, UsaStarRatingElement, UsaStepperElement, UsaStickyWallElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTerminalElement, UsaThemeSurfaceElement, UsaThemeSwitcherElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
|
|
1815
|
+
export { CAROUSEL_EFFECTS, EQ_PRESETS, FESTIVAL_THEMES, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, RETRO_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineCarousel, defineCartDrawer, defineChapterNav, defineChatComposer, defineClockControl, defineCodeExport, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGestureSticker, defineGlobe, defineGyroCard, defineHudPanel, defineHydrate, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLiquidNav, defineLocationCard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMotion, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOrganicCard, defineOtp, definePagination, definePanorama, definePluginStore, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePropPanel, definePullCord, defineRadar, defineReactions, defineRedEnvelope, defineRetroButton, defineScene, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSketchChart, defineSparkline, defineSpatialCard, defineStarRating, defineStepper, defineStickyWall, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTerminal, defineThemeSurface, defineThemeSwitcher, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, describeComponent, exportComponent, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseProps, parseReactions, parseTargets, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
|
|
1816
|
+
export type { BellNotice, CartItem, ChatMessage, ExportFormat, ExportedNode, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, PropSpec, RadarTarget, StackToastOptions, StickerState, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChapterNavElement, UsaChatComposerElement, UsaClockControlElement, UsaCodeExportElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGestureStickerElement, UsaGlobeElement, UsaGyroCardElement, UsaHudPanelElement, UsaHydrateElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLiquidNavElement, UsaLocationCardElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMotionElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOrganicCardElement, UsaOtpElement, UsaPaginationElement, UsaPanoramaElement, UsaPluginStoreElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPropPanelElement, UsaPullCordElement, UsaRadarElement, UsaReactionsElement, UsaRedEnvelopeElement, UsaRetroButtonElement, UsaSceneElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSketchChartElement, UsaSparklineElement, UsaSpatialCardElement, UsaStarRatingElement, UsaStepperElement, UsaStickyWallElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTerminalElement, UsaThemeSurfaceElement, UsaThemeSwitcherElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
|
|
@@ -1577,6 +1577,131 @@ interface UsaPropPanelElement extends UsaElement {
|
|
|
1577
1577
|
declare function parseProps(s: string): PropSpec[];
|
|
1578
1578
|
declare function definePropPanel(tag?: string): CustomElementConstructor | undefined;
|
|
1579
1579
|
|
|
1580
|
+
/**
|
|
1581
|
+
* 5.0 — unified plugin-style effect registration. Every effect (built-in or
|
|
1582
|
+
* yours) is a plain object registered once and played the same way:
|
|
1583
|
+
* `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
|
|
1584
|
+
* `<usa-fx effect="name" trigger="click">`. Effects get a context that
|
|
1585
|
+
* already applies reduced motion, motion sensitivity, intensity and the
|
|
1586
|
+
* animation budget.
|
|
1587
|
+
*/
|
|
1588
|
+
|
|
1589
|
+
declare const EFFECT_TRIGGERS: readonly ["click", "hover", "enter", "load", "loop", "manual"];
|
|
1590
|
+
type EffectTrigger = (typeof EFFECT_TRIGGERS)[number];
|
|
1591
|
+
|
|
1592
|
+
/**
|
|
1593
|
+
* `motionary/dsl` (= `motionary/components/dsl`, 9.0) — the declarative
|
|
1594
|
+
* motion DSL. Describe motion as one readable string instead of code:
|
|
1595
|
+
*
|
|
1596
|
+
* ```html
|
|
1597
|
+
* <section data-motion="enter: fade-up 600ms ease-out stagger 80ms; hover: pop; click: confetti count=40">
|
|
1598
|
+
* ```
|
|
1599
|
+
*
|
|
1600
|
+
* Grammar — rules separated by `;`, each `trigger: effect [modifiers…]`:
|
|
1601
|
+
* - trigger: `enter` · `click` · `hover` · `load` · `loop` · `manual`
|
|
1602
|
+
* - effect: any registered effect name (timeline presets, packs, plugins)
|
|
1603
|
+
* - modifiers: a duration (`600ms` / `0.6s`), `delay 120ms`,
|
|
1604
|
+
* `stagger 80ms` (children one after another), an easing (`ease-out`,
|
|
1605
|
+
* `linear`, `spring`, `cubic-bezier(…)`, `steps(…)`), `once`, and
|
|
1606
|
+
* `key=value` effect options (numbers / booleans parsed).
|
|
1607
|
+
*
|
|
1608
|
+
* `parseMotion()` → rules + errors, `serializeMotion()` back to a string,
|
|
1609
|
+
* `motion\`…\`` tagged template, `applyMotion(root)` binds every
|
|
1610
|
+
* `[data-motion]` under `root` (and watches for new ones with `observe`),
|
|
1611
|
+
* `bindMotion(el, rules)` for one element, and `createComponent(json)`
|
|
1612
|
+
* builds live markup from the 8.9 `describeComponent()` JSON.
|
|
1613
|
+
*/
|
|
1614
|
+
|
|
1615
|
+
interface MotionRule {
|
|
1616
|
+
trigger: EffectTrigger;
|
|
1617
|
+
effect: string;
|
|
1618
|
+
duration?: number;
|
|
1619
|
+
delay?: number;
|
|
1620
|
+
stagger?: number;
|
|
1621
|
+
easing?: string;
|
|
1622
|
+
once?: boolean;
|
|
1623
|
+
options: Record<string, string | number | boolean>;
|
|
1624
|
+
}
|
|
1625
|
+
|
|
1626
|
+
/**
|
|
1627
|
+
* `<usa-motion rules="enter: fade-up 600ms stagger 80ms; hover: pop">` (9.0)
|
|
1628
|
+
* — the declarative motion DSL as an element: its `rules` (the same string
|
|
1629
|
+
* as `data-motion`) are bound to it, `stagger` runs them over its children.
|
|
1630
|
+
* Changing `rules` re-binds. `rules` / `parsed` properties; `errors` lists
|
|
1631
|
+
* what was skipped (unknown trigger, modifier or effect) and `usa:motion-error`
|
|
1632
|
+
* fires for each. Layout-neutral (`display: contents` unless styled).
|
|
1633
|
+
*/
|
|
1634
|
+
interface UsaMotionElement extends UsaElement {
|
|
1635
|
+
readonly parsed: MotionRule[];
|
|
1636
|
+
readonly errors: string[];
|
|
1637
|
+
}
|
|
1638
|
+
declare function defineMotion(tag?: string): CustomElementConstructor | undefined;
|
|
1639
|
+
|
|
1640
|
+
interface PluginListing {
|
|
1641
|
+
name: string;
|
|
1642
|
+
title: string;
|
|
1643
|
+
description: string;
|
|
1644
|
+
entry: string;
|
|
1645
|
+
register: string;
|
|
1646
|
+
effects: string[];
|
|
1647
|
+
tags: string[];
|
|
1648
|
+
since: string;
|
|
1649
|
+
author?: string;
|
|
1650
|
+
official?: boolean;
|
|
1651
|
+
}
|
|
1652
|
+
|
|
1653
|
+
/**
|
|
1654
|
+
* `<usa-plugin-store>` (9.0) — the plugin marketplace as a component: a
|
|
1655
|
+
* search box over the catalogue (first-party packs by default, or a
|
|
1656
|
+
* `plugins` list you set), result cards with their effects as chips, and
|
|
1657
|
+
* an Install button per plugin that imports and registers it (`loader`
|
|
1658
|
+
* property maps entries to imports for bundlers). Cards fly in staggered,
|
|
1659
|
+
* installs show a progress ring then a check. `usa:install` { name, effects }
|
|
1660
|
+
* / `usa:install-error` { name, message }. A labelled `search` region with
|
|
1661
|
+
* a live result count; reduced motion: no fly-in.
|
|
1662
|
+
*/
|
|
1663
|
+
interface UsaPluginStoreElement extends UsaElement {
|
|
1664
|
+
plugins: PluginListing[];
|
|
1665
|
+
loader: ((entry: string) => Promise<any>) | null;
|
|
1666
|
+
search(q: string): PluginListing[];
|
|
1667
|
+
install(name: string): Promise<string[]>;
|
|
1668
|
+
}
|
|
1669
|
+
declare function definePluginStore(tag?: string): CustomElementConstructor | undefined;
|
|
1670
|
+
|
|
1671
|
+
/**
|
|
1672
|
+
* `<usa-chapter-nav for="#story">` (9.1) — chapter navigation for long-form
|
|
1673
|
+
* stories: one entry per `[data-chapter]` section (title from
|
|
1674
|
+
* `data-chapter`, else its first heading) inside the `for` container (or
|
|
1675
|
+
* the document), each with a progress bar that fills as you read that
|
|
1676
|
+
* chapter; the current chapter gets `aria-current="step"`, clicking one
|
|
1677
|
+
* scrolls smoothly to it. `orientation` horizontal (default) | vertical.
|
|
1678
|
+
* `current` index, `goTo(i)`; `usa:chapter` { index, title } on change.
|
|
1679
|
+
* A labelled `navigation`; reduced motion: instant jumps.
|
|
1680
|
+
*/
|
|
1681
|
+
interface UsaChapterNavElement extends UsaElement {
|
|
1682
|
+
readonly current: number;
|
|
1683
|
+
goTo(i: number): void;
|
|
1684
|
+
}
|
|
1685
|
+
declare function defineChapterNav(tag?: string): CustomElementConstructor | undefined;
|
|
1686
|
+
|
|
1687
|
+
/**
|
|
1688
|
+
* `<usa-scene camera="dolly-in" strength="1">` (9.1) — a scroll-scrubbed
|
|
1689
|
+
* cinematic shot: while the scene crosses the viewport its media (first
|
|
1690
|
+
* `img` / `video` / `[data-shot]` child) follows a camera move —
|
|
1691
|
+
* `dolly-in` · `dolly-out` · `pan-left` · `pan-right` · `tilt-up` ·
|
|
1692
|
+
* `tilt-down` · `zoom-in` · `zoom-out` · `orbit` — and `[data-caption]`
|
|
1693
|
+
* children fade in at their `data-at` progress (0–1). `autoplay` plays the
|
|
1694
|
+
* move on its own (looping back and forth) instead of following the scroll.
|
|
1695
|
+
* `progress` (0–1);
|
|
1696
|
+
* `usa:shot` { progress } while it moves. Reduced motion: a still frame,
|
|
1697
|
+
* captions shown.
|
|
1698
|
+
*/
|
|
1699
|
+
interface UsaSceneElement extends UsaElement {
|
|
1700
|
+
readonly progress: number;
|
|
1701
|
+
setProgress(p: number): void;
|
|
1702
|
+
}
|
|
1703
|
+
declare function defineScene(tag?: string): CustomElementConstructor | undefined;
|
|
1704
|
+
|
|
1580
1705
|
/**
|
|
1581
1706
|
* motionary/components/widgets — the 6.x animated UI widgets, in their own
|
|
1582
1707
|
* entry so `motionary/components` and `components/lite` keep their size
|
|
@@ -1680,8 +1805,12 @@ declare global {
|
|
|
1680
1805
|
'usa-spatial-card': UsaSpatialCardElement;
|
|
1681
1806
|
'usa-code-export': UsaCodeExportElement;
|
|
1682
1807
|
'usa-prop-panel': UsaPropPanelElement;
|
|
1808
|
+
'usa-motion': UsaMotionElement;
|
|
1809
|
+
'usa-plugin-store': UsaPluginStoreElement;
|
|
1810
|
+
'usa-chapter-nav': UsaChapterNavElement;
|
|
1811
|
+
'usa-scene': UsaSceneElement;
|
|
1683
1812
|
}
|
|
1684
1813
|
}
|
|
1685
1814
|
|
|
1686
|
-
export { CAROUSEL_EFFECTS, EQ_PRESETS, FESTIVAL_THEMES, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, RETRO_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineCarousel, defineCartDrawer, defineChatComposer, defineClockControl, defineCodeExport, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGestureSticker, defineGlobe, defineGyroCard, defineHudPanel, defineHydrate, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLiquidNav, defineLocationCard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOrganicCard, defineOtp, definePagination, definePanorama, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePropPanel, definePullCord, defineRadar, defineReactions, defineRedEnvelope, defineRetroButton, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSketchChart, defineSparkline, defineSpatialCard, defineStarRating, defineStepper, defineStickyWall, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTerminal, defineThemeSurface, defineThemeSwitcher, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, describeComponent, exportComponent, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseProps, parseReactions, parseTargets, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
|
|
1687
|
-
export type { BellNotice, CartItem, ChatMessage, ExportFormat, ExportedNode, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, PropSpec, RadarTarget, StackToastOptions, StickerState, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChatComposerElement, UsaClockControlElement, UsaCodeExportElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGestureStickerElement, UsaGlobeElement, UsaGyroCardElement, UsaHudPanelElement, UsaHydrateElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLiquidNavElement, UsaLocationCardElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOrganicCardElement, UsaOtpElement, UsaPaginationElement, UsaPanoramaElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPropPanelElement, UsaPullCordElement, UsaRadarElement, UsaReactionsElement, UsaRedEnvelopeElement, UsaRetroButtonElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSketchChartElement, UsaSparklineElement, UsaSpatialCardElement, UsaStarRatingElement, UsaStepperElement, UsaStickyWallElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTerminalElement, UsaThemeSurfaceElement, UsaThemeSwitcherElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
|
|
1815
|
+
export { CAROUSEL_EFFECTS, EQ_PRESETS, FESTIVAL_THEMES, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, RETRO_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineCarousel, defineCartDrawer, defineChapterNav, defineChatComposer, defineClockControl, defineCodeExport, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGestureSticker, defineGlobe, defineGyroCard, defineHudPanel, defineHydrate, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLiquidNav, defineLocationCard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMotion, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOrganicCard, defineOtp, definePagination, definePanorama, definePluginStore, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePropPanel, definePullCord, defineRadar, defineReactions, defineRedEnvelope, defineRetroButton, defineScene, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSketchChart, defineSparkline, defineSpatialCard, defineStarRating, defineStepper, defineStickyWall, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTerminal, defineThemeSurface, defineThemeSwitcher, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, describeComponent, exportComponent, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseProps, parseReactions, parseTargets, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
|
|
1816
|
+
export type { BellNotice, CartItem, ChatMessage, ExportFormat, ExportedNode, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, PropSpec, RadarTarget, StackToastOptions, StickerState, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChapterNavElement, UsaChatComposerElement, UsaClockControlElement, UsaCodeExportElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGestureStickerElement, UsaGlobeElement, UsaGyroCardElement, UsaHudPanelElement, UsaHydrateElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLiquidNavElement, UsaLocationCardElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMotionElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOrganicCardElement, UsaOtpElement, UsaPaginationElement, UsaPanoramaElement, UsaPluginStoreElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPropPanelElement, UsaPullCordElement, UsaRadarElement, UsaReactionsElement, UsaRedEnvelopeElement, UsaRetroButtonElement, UsaSceneElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSketchChartElement, UsaSparklineElement, UsaSpatialCardElement, UsaStarRatingElement, UsaStepperElement, UsaStickyWallElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTerminalElement, UsaThemeSurfaceElement, UsaThemeSwitcherElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
|