use-scroll-animate 7.4.0 → 7.6.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 +33 -0
- package/dist/components/fx-game.cjs +127 -0
- package/dist/components/fx-game.cjs.map +1 -0
- package/dist/components/fx-game.d.cts +70 -0
- package/dist/components/fx-game.d.ts +70 -0
- package/dist/components/fx-game.js +123 -0
- package/dist/components/fx-game.js.map +1 -0
- package/dist/components/fx-geo.cjs +125 -0
- package/dist/components/fx-geo.cjs.map +1 -0
- package/dist/components/fx-geo.d.cts +70 -0
- package/dist/components/fx-geo.d.ts +70 -0
- package/dist/components/fx-geo.js +121 -0
- package/dist/components/fx-geo.js.map +1 -0
- package/dist/components/fx2.cjs +12 -0
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +53 -1
- package/dist/components/fx2.d.ts +53 -1
- package/dist/components/fx2.js +9 -1
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/widgets.cjs +711 -93
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +143 -2
- package/dist/components/widgets.d.ts +143 -2
- package/dist/components/widgets.js +698 -94
- package/dist/components/widgets.js.map +1 -1
- 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 +45 -0
- package/package.json +41 -1
|
@@ -896,6 +896,141 @@ interface UsaPresenceElement extends UsaElement {
|
|
|
896
896
|
declare const initials: (name: string) => string;
|
|
897
897
|
declare function definePresence(tag?: string): CustomElementConstructor | undefined;
|
|
898
898
|
|
|
899
|
+
interface LeaderRow {
|
|
900
|
+
name: string;
|
|
901
|
+
score: number;
|
|
902
|
+
avatar?: string;
|
|
903
|
+
}
|
|
904
|
+
/**
|
|
905
|
+
* `<usa-leaderboard>` (7.5) — a ranked list from `<li data-score>` children or
|
|
906
|
+
* the `rows` property. When scores change, rows glide to their new rank
|
|
907
|
+
* (FLIP), climbers flash green with ▲n, fallers red with ▼n, and scores roll.
|
|
908
|
+
* Top three get 🥇🥈🥉. `limit`, `me` (name to highlight). An ordered list
|
|
909
|
+
* whose items read "1. Ada, 980 points"; rank changes are announced politely.
|
|
910
|
+
* `usa:rank` (`{ name, from, to }`). Reduced motion: rows jump, no flash or roll.
|
|
911
|
+
*/
|
|
912
|
+
interface UsaLeaderboardElement extends UsaElement {
|
|
913
|
+
rows: LeaderRow[];
|
|
914
|
+
setScore(name: string, score: number): void;
|
|
915
|
+
}
|
|
916
|
+
/** Sort rows by score desc, then name (7.5). */
|
|
917
|
+
declare const rankRows: (rows: LeaderRow[]) => LeaderRow[];
|
|
918
|
+
declare function defineLeaderboard(tag?: string): CustomElementConstructor | undefined;
|
|
919
|
+
|
|
920
|
+
/**
|
|
921
|
+
* `<usa-xp-bar>` (7.5) — an experience bar: `level`, `xp`, `per` (XP per
|
|
922
|
+
* level, default 100). `add(n)` fills the bar smoothly; when it overflows the
|
|
923
|
+
* bar fills to the end, the level badge pops (“Level up!”) and the bar restarts
|
|
924
|
+
* with the remainder — several levels in a row if needed. A `progressbar`
|
|
925
|
+
* labelled "Level 3, 40 of 100 XP"; level-ups are announced politely.
|
|
926
|
+
* `usa:xp` (`{ level, xp, gained }`), `usa:levelup` (`{ level }`).
|
|
927
|
+
* Reduced motion: the bar and level change at once, no pop.
|
|
928
|
+
*/
|
|
929
|
+
interface UsaXpBarElement extends UsaElement {
|
|
930
|
+
level: number;
|
|
931
|
+
xp: number;
|
|
932
|
+
add(n: number): void;
|
|
933
|
+
}
|
|
934
|
+
/** Apply `gain` XP to (level, xp) with `per` XP per level (7.5). */
|
|
935
|
+
declare function levelFor(level: number, xp: number, gain: number, per?: number): {
|
|
936
|
+
level: number;
|
|
937
|
+
xp: number;
|
|
938
|
+
ups: number;
|
|
939
|
+
};
|
|
940
|
+
declare function defineXpBar(tag?: string): CustomElementConstructor | undefined;
|
|
941
|
+
|
|
942
|
+
interface WallBadge {
|
|
943
|
+
name: string;
|
|
944
|
+
icon: string;
|
|
945
|
+
locked: boolean;
|
|
946
|
+
}
|
|
947
|
+
/**
|
|
948
|
+
* `<usa-badge-wall>` (7.5) — an achievement grid from `<li data-icon
|
|
949
|
+
* data-locked>` children: locked badges are grey with a 🔒; `unlock(name)`
|
|
950
|
+
* flips the badge over to its colour side with a shine, and the
|
|
951
|
+
* “3 / 8 unlocked” counter rolls. Each badge is a labelled list item
|
|
952
|
+
* ("First win, unlocked"); unlocks are announced politely. `badges`,
|
|
953
|
+
* `usa:unlock` (`{ name }`). Reduced motion: the badge just changes, no flip.
|
|
954
|
+
*/
|
|
955
|
+
interface UsaBadgeWallElement extends UsaElement {
|
|
956
|
+
readonly badges: WallBadge[];
|
|
957
|
+
unlock(name: string): boolean;
|
|
958
|
+
}
|
|
959
|
+
/** Unlocked / total counts for a badge list (7.5). */
|
|
960
|
+
declare const badgeProgress: (b: WallBadge[]) => {
|
|
961
|
+
unlocked: number;
|
|
962
|
+
total: number;
|
|
963
|
+
};
|
|
964
|
+
declare function defineBadgeWall(tag?: string): CustomElementConstructor | undefined;
|
|
965
|
+
|
|
966
|
+
/**
|
|
967
|
+
* `<usa-prize-wheel>` (7.5) — a lottery wheel from `segments`
|
|
968
|
+
* ("10%,Free ship,Try again,…"): the Spin button whirls the wheel and it eases
|
|
969
|
+
* out on the result (random, or `spin(index)`), the pointer ticks and the
|
|
970
|
+
* winning segment glows. `duration`, `turns`; `result`, `spinning`;
|
|
971
|
+
* `usa:result` (`{ index, label }`). The button is disabled while spinning and
|
|
972
|
+
* the result is announced politely. Reduced motion: the wheel jumps to the
|
|
973
|
+
* result.
|
|
974
|
+
*/
|
|
975
|
+
interface UsaPrizeWheelElement extends UsaElement {
|
|
976
|
+
readonly segments: string[];
|
|
977
|
+
readonly result: number;
|
|
978
|
+
readonly spinning: boolean;
|
|
979
|
+
spin(index?: number): Promise<number>;
|
|
980
|
+
}
|
|
981
|
+
/** Final wheel rotation (deg) that puts segment `index` of `count` under the top pointer after `turns` full turns (7.5). */
|
|
982
|
+
declare function wheelAngle(index: number, count: number, turns?: number): number;
|
|
983
|
+
declare function definePrizeWheel(tag?: string): CustomElementConstructor | undefined;
|
|
984
|
+
|
|
985
|
+
/**
|
|
986
|
+
* `<usa-globe>` (7.6) — a spinning SVG globe (orthographic projection, no
|
|
987
|
+
* WebGL, no map tiles): graticule, an optional `markers` list
|
|
988
|
+
* ("Shanghai:31.2,121.5; London:51.5,-0.1") with pulsing dots, `speed`
|
|
989
|
+
* (degrees per second, default 12; 0 = still), `tilt` (default 18°) and `lon`
|
|
990
|
+
* (start longitude). Spins only while on screen; drag to turn it. `flyTo(name)`
|
|
991
|
+
* rotates a marker to the front (`usa:focus`). The globe is `role="img"`
|
|
992
|
+
* labelled with the marker names; reduced motion: no spin, flyTo jumps.
|
|
993
|
+
*/
|
|
994
|
+
interface GlobeMarker {
|
|
995
|
+
name: string;
|
|
996
|
+
lat: number;
|
|
997
|
+
lon: number;
|
|
998
|
+
}
|
|
999
|
+
interface UsaGlobeElement extends UsaElement {
|
|
1000
|
+
readonly markers: GlobeMarker[];
|
|
1001
|
+
lon: number;
|
|
1002
|
+
flyTo(name: string): Promise<void>;
|
|
1003
|
+
}
|
|
1004
|
+
/** Orthographic projection on a unit sphere seen from longitude `lon0`, tilted by `tilt` degrees (7.6). */
|
|
1005
|
+
declare function project(lat: number, lon: number, lon0?: number, tilt?: number): {
|
|
1006
|
+
x: number;
|
|
1007
|
+
y: number;
|
|
1008
|
+
visible: boolean;
|
|
1009
|
+
};
|
|
1010
|
+
/** Parse "Name:lat,lon; Name2:lat,lon" (7.6). */
|
|
1011
|
+
declare function parseMarkers(s: string): GlobeMarker[];
|
|
1012
|
+
declare function defineGlobe(tag?: string): CustomElementConstructor | undefined;
|
|
1013
|
+
|
|
1014
|
+
/**
|
|
1015
|
+
* `<usa-location-card>` (7.6) — a place card with a stylised mini map (SVG
|
|
1016
|
+
* streets, no tiles, no network): `name`, `address`, `lat`/`lon`, an optional
|
|
1017
|
+
* origin `from-lat`/`from-lon` (the distance is computed with the haversine
|
|
1018
|
+
* formula, or set it with `distance`), `href` for a “Directions” link and
|
|
1019
|
+
* `unit` (`km` | `mi`). When it scrolls into view the pin drops in with a
|
|
1020
|
+
* bounce and a ring pulses under it; with an origin, the route from it draws
|
|
1021
|
+
* itself. `usa:arrive` fires when the pin lands. An `<article>` with a heading;
|
|
1022
|
+
* reduced motion: pin and route are shown at once.
|
|
1023
|
+
*/
|
|
1024
|
+
interface UsaLocationCardElement extends UsaElement {
|
|
1025
|
+
readonly km: number | null;
|
|
1026
|
+
replay(): void;
|
|
1027
|
+
}
|
|
1028
|
+
/** Great-circle distance in km between two lat/lon points (7.6). */
|
|
1029
|
+
declare function haversine(lat1: number, lon1: number, lat2: number, lon2: number): number;
|
|
1030
|
+
/** "850 m", "4.2 km", "12 km" — or miles with `unit = 'mi'` (7.6). */
|
|
1031
|
+
declare function formatDistance(km: number, unit?: 'km' | 'mi'): string;
|
|
1032
|
+
declare function defineLocationCard(tag?: string): CustomElementConstructor | undefined;
|
|
1033
|
+
|
|
899
1034
|
/**
|
|
900
1035
|
* motionary/components/widgets — the 6.x animated UI widgets, in their own
|
|
901
1036
|
* entry so `motionary/components` and `components/lite` keep their size
|
|
@@ -965,8 +1100,14 @@ declare global {
|
|
|
965
1100
|
'usa-reactions': UsaReactionsElement;
|
|
966
1101
|
'usa-notification-bell': UsaNotificationBellElement;
|
|
967
1102
|
'usa-presence': UsaPresenceElement;
|
|
1103
|
+
'usa-leaderboard': UsaLeaderboardElement;
|
|
1104
|
+
'usa-xp-bar': UsaXpBarElement;
|
|
1105
|
+
'usa-badge-wall': UsaBadgeWallElement;
|
|
1106
|
+
'usa-prize-wheel': UsaPrizeWheelElement;
|
|
1107
|
+
'usa-globe': UsaGlobeElement;
|
|
1108
|
+
'usa-location-card': UsaLocationCardElement;
|
|
968
1109
|
}
|
|
969
1110
|
}
|
|
970
1111
|
|
|
971
|
-
export { CAROUSEL_EFFECTS, EQ_PRESETS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, cartTotal, defineAddToCart, defineBarChart, defineCarousel, defineCartDrawer, defineColorPicker, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFileDrop, defineGauge, defineKanban, defineKeyframeEditor, defineKpi, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, definePagination, definePresence, defineProductGallery, defineProgressRing, definePullCord, defineReactions, defineSegmented, defineSheet, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineVolumeKnob, defineWeatherCard, defineWidgets, hexToHsv, hsvToHex, initials, monthGrid, pageWindow, parseISODate, parseLRC, parseReactions, sparkPoints, splitTime, stackToast, wrapIndex };
|
|
972
|
-
export type { BellNotice, CartItem, ChatMessage, PresenceState, StackToastOptions, UsaAddToCartElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaColorPickerElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFileDropElement, UsaGaugeElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaPaginationElement, UsaPresenceElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPullCordElement, UsaReactionsElement, UsaSegmentedElement, UsaSheetElement, UsaSkeletonRevealElement, UsaSparklineElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaVolumeKnobElement, UsaWeatherCardElement };
|
|
1112
|
+
export { CAROUSEL_EFFECTS, EQ_PRESETS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_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, defineColorPicker, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFileDrop, defineGauge, defineGlobe, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLocationCard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, definePagination, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePullCord, defineReactions, defineSegmented, defineSheet, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, formatDistance, haversine, hexToHsv, hsvToHex, initials, levelFor, monthGrid, pageWindow, parseISODate, parseLRC, parseMarkers, parseReactions, project, rankRows, sparkPoints, splitTime, stackToast, wheelAngle, wrapIndex };
|
|
1113
|
+
export type { BellNotice, CartItem, ChatMessage, GlobeMarker, LeaderRow, PresenceState, StackToastOptions, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaColorPickerElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFileDropElement, UsaGaugeElement, UsaGlobeElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLocationCardElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaPaginationElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPullCordElement, UsaReactionsElement, UsaSegmentedElement, UsaSheetElement, UsaSkeletonRevealElement, UsaSparklineElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
|
|
@@ -896,6 +896,141 @@ interface UsaPresenceElement extends UsaElement {
|
|
|
896
896
|
declare const initials: (name: string) => string;
|
|
897
897
|
declare function definePresence(tag?: string): CustomElementConstructor | undefined;
|
|
898
898
|
|
|
899
|
+
interface LeaderRow {
|
|
900
|
+
name: string;
|
|
901
|
+
score: number;
|
|
902
|
+
avatar?: string;
|
|
903
|
+
}
|
|
904
|
+
/**
|
|
905
|
+
* `<usa-leaderboard>` (7.5) — a ranked list from `<li data-score>` children or
|
|
906
|
+
* the `rows` property. When scores change, rows glide to their new rank
|
|
907
|
+
* (FLIP), climbers flash green with ▲n, fallers red with ▼n, and scores roll.
|
|
908
|
+
* Top three get 🥇🥈🥉. `limit`, `me` (name to highlight). An ordered list
|
|
909
|
+
* whose items read "1. Ada, 980 points"; rank changes are announced politely.
|
|
910
|
+
* `usa:rank` (`{ name, from, to }`). Reduced motion: rows jump, no flash or roll.
|
|
911
|
+
*/
|
|
912
|
+
interface UsaLeaderboardElement extends UsaElement {
|
|
913
|
+
rows: LeaderRow[];
|
|
914
|
+
setScore(name: string, score: number): void;
|
|
915
|
+
}
|
|
916
|
+
/** Sort rows by score desc, then name (7.5). */
|
|
917
|
+
declare const rankRows: (rows: LeaderRow[]) => LeaderRow[];
|
|
918
|
+
declare function defineLeaderboard(tag?: string): CustomElementConstructor | undefined;
|
|
919
|
+
|
|
920
|
+
/**
|
|
921
|
+
* `<usa-xp-bar>` (7.5) — an experience bar: `level`, `xp`, `per` (XP per
|
|
922
|
+
* level, default 100). `add(n)` fills the bar smoothly; when it overflows the
|
|
923
|
+
* bar fills to the end, the level badge pops (“Level up!”) and the bar restarts
|
|
924
|
+
* with the remainder — several levels in a row if needed. A `progressbar`
|
|
925
|
+
* labelled "Level 3, 40 of 100 XP"; level-ups are announced politely.
|
|
926
|
+
* `usa:xp` (`{ level, xp, gained }`), `usa:levelup` (`{ level }`).
|
|
927
|
+
* Reduced motion: the bar and level change at once, no pop.
|
|
928
|
+
*/
|
|
929
|
+
interface UsaXpBarElement extends UsaElement {
|
|
930
|
+
level: number;
|
|
931
|
+
xp: number;
|
|
932
|
+
add(n: number): void;
|
|
933
|
+
}
|
|
934
|
+
/** Apply `gain` XP to (level, xp) with `per` XP per level (7.5). */
|
|
935
|
+
declare function levelFor(level: number, xp: number, gain: number, per?: number): {
|
|
936
|
+
level: number;
|
|
937
|
+
xp: number;
|
|
938
|
+
ups: number;
|
|
939
|
+
};
|
|
940
|
+
declare function defineXpBar(tag?: string): CustomElementConstructor | undefined;
|
|
941
|
+
|
|
942
|
+
interface WallBadge {
|
|
943
|
+
name: string;
|
|
944
|
+
icon: string;
|
|
945
|
+
locked: boolean;
|
|
946
|
+
}
|
|
947
|
+
/**
|
|
948
|
+
* `<usa-badge-wall>` (7.5) — an achievement grid from `<li data-icon
|
|
949
|
+
* data-locked>` children: locked badges are grey with a 🔒; `unlock(name)`
|
|
950
|
+
* flips the badge over to its colour side with a shine, and the
|
|
951
|
+
* “3 / 8 unlocked” counter rolls. Each badge is a labelled list item
|
|
952
|
+
* ("First win, unlocked"); unlocks are announced politely. `badges`,
|
|
953
|
+
* `usa:unlock` (`{ name }`). Reduced motion: the badge just changes, no flip.
|
|
954
|
+
*/
|
|
955
|
+
interface UsaBadgeWallElement extends UsaElement {
|
|
956
|
+
readonly badges: WallBadge[];
|
|
957
|
+
unlock(name: string): boolean;
|
|
958
|
+
}
|
|
959
|
+
/** Unlocked / total counts for a badge list (7.5). */
|
|
960
|
+
declare const badgeProgress: (b: WallBadge[]) => {
|
|
961
|
+
unlocked: number;
|
|
962
|
+
total: number;
|
|
963
|
+
};
|
|
964
|
+
declare function defineBadgeWall(tag?: string): CustomElementConstructor | undefined;
|
|
965
|
+
|
|
966
|
+
/**
|
|
967
|
+
* `<usa-prize-wheel>` (7.5) — a lottery wheel from `segments`
|
|
968
|
+
* ("10%,Free ship,Try again,…"): the Spin button whirls the wheel and it eases
|
|
969
|
+
* out on the result (random, or `spin(index)`), the pointer ticks and the
|
|
970
|
+
* winning segment glows. `duration`, `turns`; `result`, `spinning`;
|
|
971
|
+
* `usa:result` (`{ index, label }`). The button is disabled while spinning and
|
|
972
|
+
* the result is announced politely. Reduced motion: the wheel jumps to the
|
|
973
|
+
* result.
|
|
974
|
+
*/
|
|
975
|
+
interface UsaPrizeWheelElement extends UsaElement {
|
|
976
|
+
readonly segments: string[];
|
|
977
|
+
readonly result: number;
|
|
978
|
+
readonly spinning: boolean;
|
|
979
|
+
spin(index?: number): Promise<number>;
|
|
980
|
+
}
|
|
981
|
+
/** Final wheel rotation (deg) that puts segment `index` of `count` under the top pointer after `turns` full turns (7.5). */
|
|
982
|
+
declare function wheelAngle(index: number, count: number, turns?: number): number;
|
|
983
|
+
declare function definePrizeWheel(tag?: string): CustomElementConstructor | undefined;
|
|
984
|
+
|
|
985
|
+
/**
|
|
986
|
+
* `<usa-globe>` (7.6) — a spinning SVG globe (orthographic projection, no
|
|
987
|
+
* WebGL, no map tiles): graticule, an optional `markers` list
|
|
988
|
+
* ("Shanghai:31.2,121.5; London:51.5,-0.1") with pulsing dots, `speed`
|
|
989
|
+
* (degrees per second, default 12; 0 = still), `tilt` (default 18°) and `lon`
|
|
990
|
+
* (start longitude). Spins only while on screen; drag to turn it. `flyTo(name)`
|
|
991
|
+
* rotates a marker to the front (`usa:focus`). The globe is `role="img"`
|
|
992
|
+
* labelled with the marker names; reduced motion: no spin, flyTo jumps.
|
|
993
|
+
*/
|
|
994
|
+
interface GlobeMarker {
|
|
995
|
+
name: string;
|
|
996
|
+
lat: number;
|
|
997
|
+
lon: number;
|
|
998
|
+
}
|
|
999
|
+
interface UsaGlobeElement extends UsaElement {
|
|
1000
|
+
readonly markers: GlobeMarker[];
|
|
1001
|
+
lon: number;
|
|
1002
|
+
flyTo(name: string): Promise<void>;
|
|
1003
|
+
}
|
|
1004
|
+
/** Orthographic projection on a unit sphere seen from longitude `lon0`, tilted by `tilt` degrees (7.6). */
|
|
1005
|
+
declare function project(lat: number, lon: number, lon0?: number, tilt?: number): {
|
|
1006
|
+
x: number;
|
|
1007
|
+
y: number;
|
|
1008
|
+
visible: boolean;
|
|
1009
|
+
};
|
|
1010
|
+
/** Parse "Name:lat,lon; Name2:lat,lon" (7.6). */
|
|
1011
|
+
declare function parseMarkers(s: string): GlobeMarker[];
|
|
1012
|
+
declare function defineGlobe(tag?: string): CustomElementConstructor | undefined;
|
|
1013
|
+
|
|
1014
|
+
/**
|
|
1015
|
+
* `<usa-location-card>` (7.6) — a place card with a stylised mini map (SVG
|
|
1016
|
+
* streets, no tiles, no network): `name`, `address`, `lat`/`lon`, an optional
|
|
1017
|
+
* origin `from-lat`/`from-lon` (the distance is computed with the haversine
|
|
1018
|
+
* formula, or set it with `distance`), `href` for a “Directions” link and
|
|
1019
|
+
* `unit` (`km` | `mi`). When it scrolls into view the pin drops in with a
|
|
1020
|
+
* bounce and a ring pulses under it; with an origin, the route from it draws
|
|
1021
|
+
* itself. `usa:arrive` fires when the pin lands. An `<article>` with a heading;
|
|
1022
|
+
* reduced motion: pin and route are shown at once.
|
|
1023
|
+
*/
|
|
1024
|
+
interface UsaLocationCardElement extends UsaElement {
|
|
1025
|
+
readonly km: number | null;
|
|
1026
|
+
replay(): void;
|
|
1027
|
+
}
|
|
1028
|
+
/** Great-circle distance in km between two lat/lon points (7.6). */
|
|
1029
|
+
declare function haversine(lat1: number, lon1: number, lat2: number, lon2: number): number;
|
|
1030
|
+
/** "850 m", "4.2 km", "12 km" — or miles with `unit = 'mi'` (7.6). */
|
|
1031
|
+
declare function formatDistance(km: number, unit?: 'km' | 'mi'): string;
|
|
1032
|
+
declare function defineLocationCard(tag?: string): CustomElementConstructor | undefined;
|
|
1033
|
+
|
|
899
1034
|
/**
|
|
900
1035
|
* motionary/components/widgets — the 6.x animated UI widgets, in their own
|
|
901
1036
|
* entry so `motionary/components` and `components/lite` keep their size
|
|
@@ -965,8 +1100,14 @@ declare global {
|
|
|
965
1100
|
'usa-reactions': UsaReactionsElement;
|
|
966
1101
|
'usa-notification-bell': UsaNotificationBellElement;
|
|
967
1102
|
'usa-presence': UsaPresenceElement;
|
|
1103
|
+
'usa-leaderboard': UsaLeaderboardElement;
|
|
1104
|
+
'usa-xp-bar': UsaXpBarElement;
|
|
1105
|
+
'usa-badge-wall': UsaBadgeWallElement;
|
|
1106
|
+
'usa-prize-wheel': UsaPrizeWheelElement;
|
|
1107
|
+
'usa-globe': UsaGlobeElement;
|
|
1108
|
+
'usa-location-card': UsaLocationCardElement;
|
|
968
1109
|
}
|
|
969
1110
|
}
|
|
970
1111
|
|
|
971
|
-
export { CAROUSEL_EFFECTS, EQ_PRESETS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, cartTotal, defineAddToCart, defineBarChart, defineCarousel, defineCartDrawer, defineColorPicker, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFileDrop, defineGauge, defineKanban, defineKeyframeEditor, defineKpi, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, definePagination, definePresence, defineProductGallery, defineProgressRing, definePullCord, defineReactions, defineSegmented, defineSheet, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineVolumeKnob, defineWeatherCard, defineWidgets, hexToHsv, hsvToHex, initials, monthGrid, pageWindow, parseISODate, parseLRC, parseReactions, sparkPoints, splitTime, stackToast, wrapIndex };
|
|
972
|
-
export type { BellNotice, CartItem, ChatMessage, PresenceState, StackToastOptions, UsaAddToCartElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaColorPickerElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFileDropElement, UsaGaugeElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaPaginationElement, UsaPresenceElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPullCordElement, UsaReactionsElement, UsaSegmentedElement, UsaSheetElement, UsaSkeletonRevealElement, UsaSparklineElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaVolumeKnobElement, UsaWeatherCardElement };
|
|
1112
|
+
export { CAROUSEL_EFFECTS, EQ_PRESETS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_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, defineColorPicker, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFileDrop, defineGauge, defineGlobe, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLocationCard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, definePagination, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePullCord, defineReactions, defineSegmented, defineSheet, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, formatDistance, haversine, hexToHsv, hsvToHex, initials, levelFor, monthGrid, pageWindow, parseISODate, parseLRC, parseMarkers, parseReactions, project, rankRows, sparkPoints, splitTime, stackToast, wheelAngle, wrapIndex };
|
|
1113
|
+
export type { BellNotice, CartItem, ChatMessage, GlobeMarker, LeaderRow, PresenceState, StackToastOptions, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaColorPickerElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFileDropElement, UsaGaugeElement, UsaGlobeElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLocationCardElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaPaginationElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPullCordElement, UsaReactionsElement, UsaSegmentedElement, UsaSheetElement, UsaSkeletonRevealElement, UsaSparklineElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
|