use-scroll-animate 7.3.0 → 7.5.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/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-social.cjs +121 -0
- package/dist/components/fx-social.cjs.map +1 -0
- package/dist/components/fx-social.d.cts +66 -0
- package/dist/components/fx-social.d.ts +66 -0
- package/dist/components/fx-social.js +117 -0
- package/dist/components/fx-social.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 +49 -1
- package/dist/components/fx2.d.ts +49 -1
- package/dist/components/fx2.js +9 -1
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/widgets.cjs +833 -85
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +182 -2
- package/dist/components/widgets.d.ts +182 -2
- package/dist/components/widgets.js +819 -86
- 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 +48 -0
- package/package.json +41 -1
|
@@ -810,6 +810,178 @@ declare function splitTime(sec: number): {
|
|
|
810
810
|
};
|
|
811
811
|
declare function defineCountdown(tag?: string): CustomElementConstructor | undefined;
|
|
812
812
|
|
|
813
|
+
interface ChatMessage {
|
|
814
|
+
text: string;
|
|
815
|
+
from?: string;
|
|
816
|
+
me?: boolean;
|
|
817
|
+
time?: string;
|
|
818
|
+
}
|
|
819
|
+
/**
|
|
820
|
+
* `<usa-message-list>` (7.4) — a chat thread. Messages come from `<p>`
|
|
821
|
+
* children (`data-me`, `data-from`, `data-time`) or `push(msg)`: each new
|
|
822
|
+
* bubble pops in from its side, consecutive bubbles from the same sender are
|
|
823
|
+
* grouped, and the list sticks to the bottom (smooth scroll) unless the
|
|
824
|
+
* reader scrolled up — then a “↓ New messages” pill appears. `typing(name)`
|
|
825
|
+
* shows an animated “… is typing” bubble until the next message (or
|
|
826
|
+
* `typing(false)`). A `log` with `aria-live="polite"`. Reduced motion: no pop
|
|
827
|
+
* or smooth scroll, the typing dots are static.
|
|
828
|
+
*/
|
|
829
|
+
interface UsaMessageListElement extends UsaElement {
|
|
830
|
+
readonly messages: ChatMessage[];
|
|
831
|
+
push(msg: ChatMessage): void;
|
|
832
|
+
typing(who: string | false): void;
|
|
833
|
+
}
|
|
834
|
+
declare function defineMessageList(tag?: string): CustomElementConstructor | undefined;
|
|
835
|
+
|
|
836
|
+
/**
|
|
837
|
+
* `<usa-reactions>` (7.4) — an emoji reaction bar (Slack / iMessage style).
|
|
838
|
+
* `emojis` ("👍,❤️,😂,🎉") with optional `counts` ("3,1,0,0"). Clicking a pill
|
|
839
|
+
* toggles your reaction: the count rolls up / down, the emoji pops and a few
|
|
840
|
+
* copies float up. A + button opens a small picker that springs open. Each
|
|
841
|
+
* pill is a `button` with `aria-pressed` and a label ("❤️ 2 reactions").
|
|
842
|
+
* `usa:react` (`{ emoji, on, count }`). Reduced motion: no pop, roll or float.
|
|
843
|
+
*/
|
|
844
|
+
interface UsaReactionsElement extends UsaElement {
|
|
845
|
+
/** emoji → count */
|
|
846
|
+
readonly counts: Record<string, number>;
|
|
847
|
+
/** Your active reactions. */
|
|
848
|
+
readonly mine: string[];
|
|
849
|
+
toggle(emoji: string, on?: boolean): void;
|
|
850
|
+
}
|
|
851
|
+
/** Parse "👍,❤️" + "3,1" into ordered [emoji, count] pairs (7.4). */
|
|
852
|
+
declare function parseReactions(emojis: string, counts?: string): [string, number][];
|
|
853
|
+
declare function defineReactions(tag?: string): CustomElementConstructor | undefined;
|
|
854
|
+
|
|
855
|
+
interface BellNotice {
|
|
856
|
+
id?: string;
|
|
857
|
+
text: string;
|
|
858
|
+
time?: string;
|
|
859
|
+
read?: boolean;
|
|
860
|
+
}
|
|
861
|
+
/**
|
|
862
|
+
* `<usa-notification-bell>` (7.4) — a bell button with an unread badge and a
|
|
863
|
+
* dropdown list. `notify(n)` rings the bell (a pendulum swing), bumps the
|
|
864
|
+
* badge and slides the notice in at the top of the list; opening the list and
|
|
865
|
+
* “Mark all read” clears the badge (it shrinks away). Notices from `<li>`
|
|
866
|
+
* children too. Esc / outside click close it. The bell is a `button` with
|
|
867
|
+
* `aria-expanded` and a label including the unread count; the list is a
|
|
868
|
+
* labelled region. `usa:notify`, `usa:read`. Reduced motion: no swing, bump
|
|
869
|
+
* or slide.
|
|
870
|
+
*/
|
|
871
|
+
interface UsaNotificationBellElement extends UsaElement {
|
|
872
|
+
readonly unread: number;
|
|
873
|
+
readonly notices: BellNotice[];
|
|
874
|
+
open: boolean;
|
|
875
|
+
notify(n: BellNotice | string): void;
|
|
876
|
+
markAllRead(): void;
|
|
877
|
+
ring(): void;
|
|
878
|
+
}
|
|
879
|
+
declare function defineNotificationBell(tag?: string): CustomElementConstructor | undefined;
|
|
880
|
+
|
|
881
|
+
/** Presence states (7.4). */
|
|
882
|
+
declare const PRESENCE_STATES: readonly ["online", "away", "busy", "offline"];
|
|
883
|
+
type PresenceState = (typeof PRESENCE_STATES)[number];
|
|
884
|
+
/**
|
|
885
|
+
* `<usa-presence>` (7.4) — an avatar with a live status dot: `status`
|
|
886
|
+
* online | away | busy | offline. Going online sends a ripple from the dot;
|
|
887
|
+
* every change cross-fades the dot colour; `speaking` adds a pulsing ring
|
|
888
|
+
* (voice chat), `story` an animated gradient ring (unseen story). Initials from
|
|
889
|
+
* `name` when there is no `src`. Labelled `img` ("Ada Lovelace, online").
|
|
890
|
+
* Reduced motion: no ripple, pulse or ring spin.
|
|
891
|
+
*/
|
|
892
|
+
interface UsaPresenceElement extends UsaElement {
|
|
893
|
+
status: PresenceState;
|
|
894
|
+
}
|
|
895
|
+
/** Initials for a display name (7.4). */
|
|
896
|
+
declare const initials: (name: string) => string;
|
|
897
|
+
declare function definePresence(tag?: string): CustomElementConstructor | undefined;
|
|
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
|
+
|
|
813
985
|
/**
|
|
814
986
|
* motionary/components/widgets — the 6.x animated UI widgets, in their own
|
|
815
987
|
* entry so `motionary/components` and `components/lite` keep their size
|
|
@@ -875,8 +1047,16 @@ declare global {
|
|
|
875
1047
|
'usa-cart-drawer': UsaCartDrawerElement;
|
|
876
1048
|
'usa-product-gallery': UsaProductGalleryElement;
|
|
877
1049
|
'usa-countdown': UsaCountdownElement;
|
|
1050
|
+
'usa-message-list': UsaMessageListElement;
|
|
1051
|
+
'usa-reactions': UsaReactionsElement;
|
|
1052
|
+
'usa-notification-bell': UsaNotificationBellElement;
|
|
1053
|
+
'usa-presence': UsaPresenceElement;
|
|
1054
|
+
'usa-leaderboard': UsaLeaderboardElement;
|
|
1055
|
+
'usa-xp-bar': UsaXpBarElement;
|
|
1056
|
+
'usa-badge-wall': UsaBadgeWallElement;
|
|
1057
|
+
'usa-prize-wheel': UsaPrizeWheelElement;
|
|
878
1058
|
}
|
|
879
1059
|
}
|
|
880
1060
|
|
|
881
|
-
export { CAROUSEL_EFFECTS, EQ_PRESETS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, 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, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineOdometer, definePagination, defineProductGallery, defineProgressRing, definePullCord, defineSegmented, defineSheet, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineVolumeKnob, defineWeatherCard, defineWidgets, hexToHsv, hsvToHex, monthGrid, pageWindow, parseISODate, parseLRC, sparkPoints, splitTime, stackToast, wrapIndex };
|
|
882
|
-
export type { CartItem, StackToastOptions, UsaAddToCartElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaColorPickerElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFileDropElement, UsaGaugeElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMilestonesElement, UsaModalElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaOdometerElement, UsaPaginationElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPullCordElement, UsaSegmentedElement, UsaSheetElement, UsaSkeletonRevealElement, UsaSparklineElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaVolumeKnobElement, UsaWeatherCardElement };
|
|
1061
|
+
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, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, 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, hexToHsv, hsvToHex, initials, levelFor, monthGrid, pageWindow, parseISODate, parseLRC, parseReactions, rankRows, sparkPoints, splitTime, stackToast, wheelAngle, wrapIndex };
|
|
1062
|
+
export type { BellNotice, CartItem, ChatMessage, LeaderRow, PresenceState, StackToastOptions, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaColorPickerElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFileDropElement, UsaGaugeElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, 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 };
|
|
@@ -810,6 +810,178 @@ declare function splitTime(sec: number): {
|
|
|
810
810
|
};
|
|
811
811
|
declare function defineCountdown(tag?: string): CustomElementConstructor | undefined;
|
|
812
812
|
|
|
813
|
+
interface ChatMessage {
|
|
814
|
+
text: string;
|
|
815
|
+
from?: string;
|
|
816
|
+
me?: boolean;
|
|
817
|
+
time?: string;
|
|
818
|
+
}
|
|
819
|
+
/**
|
|
820
|
+
* `<usa-message-list>` (7.4) — a chat thread. Messages come from `<p>`
|
|
821
|
+
* children (`data-me`, `data-from`, `data-time`) or `push(msg)`: each new
|
|
822
|
+
* bubble pops in from its side, consecutive bubbles from the same sender are
|
|
823
|
+
* grouped, and the list sticks to the bottom (smooth scroll) unless the
|
|
824
|
+
* reader scrolled up — then a “↓ New messages” pill appears. `typing(name)`
|
|
825
|
+
* shows an animated “… is typing” bubble until the next message (or
|
|
826
|
+
* `typing(false)`). A `log` with `aria-live="polite"`. Reduced motion: no pop
|
|
827
|
+
* or smooth scroll, the typing dots are static.
|
|
828
|
+
*/
|
|
829
|
+
interface UsaMessageListElement extends UsaElement {
|
|
830
|
+
readonly messages: ChatMessage[];
|
|
831
|
+
push(msg: ChatMessage): void;
|
|
832
|
+
typing(who: string | false): void;
|
|
833
|
+
}
|
|
834
|
+
declare function defineMessageList(tag?: string): CustomElementConstructor | undefined;
|
|
835
|
+
|
|
836
|
+
/**
|
|
837
|
+
* `<usa-reactions>` (7.4) — an emoji reaction bar (Slack / iMessage style).
|
|
838
|
+
* `emojis` ("👍,❤️,😂,🎉") with optional `counts` ("3,1,0,0"). Clicking a pill
|
|
839
|
+
* toggles your reaction: the count rolls up / down, the emoji pops and a few
|
|
840
|
+
* copies float up. A + button opens a small picker that springs open. Each
|
|
841
|
+
* pill is a `button` with `aria-pressed` and a label ("❤️ 2 reactions").
|
|
842
|
+
* `usa:react` (`{ emoji, on, count }`). Reduced motion: no pop, roll or float.
|
|
843
|
+
*/
|
|
844
|
+
interface UsaReactionsElement extends UsaElement {
|
|
845
|
+
/** emoji → count */
|
|
846
|
+
readonly counts: Record<string, number>;
|
|
847
|
+
/** Your active reactions. */
|
|
848
|
+
readonly mine: string[];
|
|
849
|
+
toggle(emoji: string, on?: boolean): void;
|
|
850
|
+
}
|
|
851
|
+
/** Parse "👍,❤️" + "3,1" into ordered [emoji, count] pairs (7.4). */
|
|
852
|
+
declare function parseReactions(emojis: string, counts?: string): [string, number][];
|
|
853
|
+
declare function defineReactions(tag?: string): CustomElementConstructor | undefined;
|
|
854
|
+
|
|
855
|
+
interface BellNotice {
|
|
856
|
+
id?: string;
|
|
857
|
+
text: string;
|
|
858
|
+
time?: string;
|
|
859
|
+
read?: boolean;
|
|
860
|
+
}
|
|
861
|
+
/**
|
|
862
|
+
* `<usa-notification-bell>` (7.4) — a bell button with an unread badge and a
|
|
863
|
+
* dropdown list. `notify(n)` rings the bell (a pendulum swing), bumps the
|
|
864
|
+
* badge and slides the notice in at the top of the list; opening the list and
|
|
865
|
+
* “Mark all read” clears the badge (it shrinks away). Notices from `<li>`
|
|
866
|
+
* children too. Esc / outside click close it. The bell is a `button` with
|
|
867
|
+
* `aria-expanded` and a label including the unread count; the list is a
|
|
868
|
+
* labelled region. `usa:notify`, `usa:read`. Reduced motion: no swing, bump
|
|
869
|
+
* or slide.
|
|
870
|
+
*/
|
|
871
|
+
interface UsaNotificationBellElement extends UsaElement {
|
|
872
|
+
readonly unread: number;
|
|
873
|
+
readonly notices: BellNotice[];
|
|
874
|
+
open: boolean;
|
|
875
|
+
notify(n: BellNotice | string): void;
|
|
876
|
+
markAllRead(): void;
|
|
877
|
+
ring(): void;
|
|
878
|
+
}
|
|
879
|
+
declare function defineNotificationBell(tag?: string): CustomElementConstructor | undefined;
|
|
880
|
+
|
|
881
|
+
/** Presence states (7.4). */
|
|
882
|
+
declare const PRESENCE_STATES: readonly ["online", "away", "busy", "offline"];
|
|
883
|
+
type PresenceState = (typeof PRESENCE_STATES)[number];
|
|
884
|
+
/**
|
|
885
|
+
* `<usa-presence>` (7.4) — an avatar with a live status dot: `status`
|
|
886
|
+
* online | away | busy | offline. Going online sends a ripple from the dot;
|
|
887
|
+
* every change cross-fades the dot colour; `speaking` adds a pulsing ring
|
|
888
|
+
* (voice chat), `story` an animated gradient ring (unseen story). Initials from
|
|
889
|
+
* `name` when there is no `src`. Labelled `img` ("Ada Lovelace, online").
|
|
890
|
+
* Reduced motion: no ripple, pulse or ring spin.
|
|
891
|
+
*/
|
|
892
|
+
interface UsaPresenceElement extends UsaElement {
|
|
893
|
+
status: PresenceState;
|
|
894
|
+
}
|
|
895
|
+
/** Initials for a display name (7.4). */
|
|
896
|
+
declare const initials: (name: string) => string;
|
|
897
|
+
declare function definePresence(tag?: string): CustomElementConstructor | undefined;
|
|
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
|
+
|
|
813
985
|
/**
|
|
814
986
|
* motionary/components/widgets — the 6.x animated UI widgets, in their own
|
|
815
987
|
* entry so `motionary/components` and `components/lite` keep their size
|
|
@@ -875,8 +1047,16 @@ declare global {
|
|
|
875
1047
|
'usa-cart-drawer': UsaCartDrawerElement;
|
|
876
1048
|
'usa-product-gallery': UsaProductGalleryElement;
|
|
877
1049
|
'usa-countdown': UsaCountdownElement;
|
|
1050
|
+
'usa-message-list': UsaMessageListElement;
|
|
1051
|
+
'usa-reactions': UsaReactionsElement;
|
|
1052
|
+
'usa-notification-bell': UsaNotificationBellElement;
|
|
1053
|
+
'usa-presence': UsaPresenceElement;
|
|
1054
|
+
'usa-leaderboard': UsaLeaderboardElement;
|
|
1055
|
+
'usa-xp-bar': UsaXpBarElement;
|
|
1056
|
+
'usa-badge-wall': UsaBadgeWallElement;
|
|
1057
|
+
'usa-prize-wheel': UsaPrizeWheelElement;
|
|
878
1058
|
}
|
|
879
1059
|
}
|
|
880
1060
|
|
|
881
|
-
export { CAROUSEL_EFFECTS, EQ_PRESETS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, 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, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineOdometer, definePagination, defineProductGallery, defineProgressRing, definePullCord, defineSegmented, defineSheet, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineVolumeKnob, defineWeatherCard, defineWidgets, hexToHsv, hsvToHex, monthGrid, pageWindow, parseISODate, parseLRC, sparkPoints, splitTime, stackToast, wrapIndex };
|
|
882
|
-
export type { CartItem, StackToastOptions, UsaAddToCartElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaColorPickerElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFileDropElement, UsaGaugeElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMilestonesElement, UsaModalElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaOdometerElement, UsaPaginationElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPullCordElement, UsaSegmentedElement, UsaSheetElement, UsaSkeletonRevealElement, UsaSparklineElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaVolumeKnobElement, UsaWeatherCardElement };
|
|
1061
|
+
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, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, 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, hexToHsv, hsvToHex, initials, levelFor, monthGrid, pageWindow, parseISODate, parseLRC, parseReactions, rankRows, sparkPoints, splitTime, stackToast, wheelAngle, wrapIndex };
|
|
1062
|
+
export type { BellNotice, CartItem, ChatMessage, LeaderRow, PresenceState, StackToastOptions, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaColorPickerElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFileDropElement, UsaGaugeElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, 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 };
|