use-scroll-animate 7.5.0 → 7.7.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 +27 -0
- package/dist/components/fx-form.cjs +92 -0
- package/dist/components/fx-form.cjs.map +1 -0
- package/dist/components/fx-form.d.cts +66 -0
- package/dist/components/fx-form.d.ts +66 -0
- package/dist/components/fx-form.js +88 -0
- package/dist/components/fx-form.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 +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 +703 -103
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +116 -2
- package/dist/components/widgets.d.ts +116 -2
- package/dist/components/widgets.js +693 -105
- 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 +44 -0
- package/package.json +41 -1
|
@@ -982,6 +982,115 @@ interface UsaPrizeWheelElement extends UsaElement {
|
|
|
982
982
|
declare function wheelAngle(index: number, count: number, turns?: number): number;
|
|
983
983
|
declare function definePrizeWheel(tag?: string): CustomElementConstructor | undefined;
|
|
984
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
|
+
|
|
1034
|
+
/**
|
|
1035
|
+
* `<usa-field>` (7.7) — an animated text input: the `label` floats up when
|
|
1036
|
+
* the field is focused or filled, the underline grows from the caret, and the
|
|
1037
|
+
* field validates on blur (native constraint validation: `type`, `required`,
|
|
1038
|
+
* `pattern`, `minlength`, `maxlength`). Invalid → the field shakes and the
|
|
1039
|
+
* message slides in (`usa:invalid`); valid → a check draws itself
|
|
1040
|
+
* (`usa:valid`). With `strength` (on `type="password"`) a 4-step strength
|
|
1041
|
+
* meter fills as you type (`passwordStrength()`). The `<input>` lives in the
|
|
1042
|
+
* light DOM, so a surrounding `<form>` submits it by its `name`. Reduced
|
|
1043
|
+
* motion: no shake, no slide — states switch at once.
|
|
1044
|
+
*/
|
|
1045
|
+
interface UsaFieldElement extends UsaElement {
|
|
1046
|
+
value: string;
|
|
1047
|
+
readonly input: HTMLInputElement | null;
|
|
1048
|
+
validate(): boolean;
|
|
1049
|
+
}
|
|
1050
|
+
/** 0–4 password strength score with a label (7.7). */
|
|
1051
|
+
declare function passwordStrength(pw: string): {
|
|
1052
|
+
score: 0 | 1 | 2 | 3 | 4;
|
|
1053
|
+
label: string;
|
|
1054
|
+
};
|
|
1055
|
+
declare function defineField(tag?: string): CustomElementConstructor | undefined;
|
|
1056
|
+
|
|
1057
|
+
/**
|
|
1058
|
+
* `<usa-otp>` (7.7) — a one-time-code input: `length` boxes (default 6; an initial `value` is typed in) that
|
|
1059
|
+
* auto-advance as you type, step back on Backspace, move with the arrow keys
|
|
1060
|
+
* and take a pasted code in one go (`autocomplete="one-time-code"` on the
|
|
1061
|
+
* first box for SMS autofill). Each digit pops in; when all boxes are filled
|
|
1062
|
+
* `usa:complete` fires with the code. `error()` shakes the row red and clears
|
|
1063
|
+
* it, `success()` turns it green with a wave; `fillCode(code)`, `clear()`. `mode="alnum"` allows
|
|
1064
|
+
* letters. A labelled `role="group"`; reduced motion: no pop, shake or wave.
|
|
1065
|
+
*/
|
|
1066
|
+
interface UsaOtpElement extends UsaElement {
|
|
1067
|
+
readonly value: string;
|
|
1068
|
+
fillCode(code: string): void;
|
|
1069
|
+
clear(): void;
|
|
1070
|
+
error(message?: string): void;
|
|
1071
|
+
success(): void;
|
|
1072
|
+
}
|
|
1073
|
+
/** Keep only the characters an OTP accepts (7.7). */
|
|
1074
|
+
declare function sanitizeCode(s: string, mode?: 'numeric' | 'alnum'): string;
|
|
1075
|
+
declare function defineOtp(tag?: string): CustomElementConstructor | undefined;
|
|
1076
|
+
|
|
1077
|
+
/**
|
|
1078
|
+
* `<usa-upload-progress>` (7.7) — a file row with an animated progress bar:
|
|
1079
|
+
* `name`, `size` (bytes → "2.4 MB"), `value` 0–100 (the bar eases to it and a
|
|
1080
|
+
* shine runs over it while uploading), `status` (`uploading` | `done` |
|
|
1081
|
+
* `error`; reaching 100 sets `done`). Done → the bar turns into a check that
|
|
1082
|
+
* draws itself (`usa:done`); error → the row shakes and shows `message`
|
|
1083
|
+
* (`usa:error`) with a Retry button (`usa:retry`). A `role="progressbar"` with
|
|
1084
|
+
* value text; reduced motion: no shine, no easing, no shake.
|
|
1085
|
+
*/
|
|
1086
|
+
interface UsaUploadProgressElement extends UsaElement {
|
|
1087
|
+
value: number;
|
|
1088
|
+
status: 'uploading' | 'done' | 'error';
|
|
1089
|
+
}
|
|
1090
|
+
/** 1536 → "1.5 KB", 2_400_000 → "2.3 MB" (7.7). */
|
|
1091
|
+
declare function formatBytes(n: number): string;
|
|
1092
|
+
declare function defineUploadProgress(tag?: string): CustomElementConstructor | undefined;
|
|
1093
|
+
|
|
985
1094
|
/**
|
|
986
1095
|
* motionary/components/widgets — the 6.x animated UI widgets, in their own
|
|
987
1096
|
* entry so `motionary/components` and `components/lite` keep their size
|
|
@@ -1055,8 +1164,13 @@ declare global {
|
|
|
1055
1164
|
'usa-xp-bar': UsaXpBarElement;
|
|
1056
1165
|
'usa-badge-wall': UsaBadgeWallElement;
|
|
1057
1166
|
'usa-prize-wheel': UsaPrizeWheelElement;
|
|
1167
|
+
'usa-globe': UsaGlobeElement;
|
|
1168
|
+
'usa-location-card': UsaLocationCardElement;
|
|
1169
|
+
'usa-field': UsaFieldElement;
|
|
1170
|
+
'usa-otp': UsaOtpElement;
|
|
1171
|
+
'usa-upload-progress': UsaUploadProgressElement;
|
|
1058
1172
|
}
|
|
1059
1173
|
}
|
|
1060
1174
|
|
|
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 };
|
|
1175
|
+
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, defineField, defineFileDrop, defineGauge, defineGlobe, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLocationCard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOtp, definePagination, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePullCord, defineReactions, defineSegmented, defineSheet, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineUploadProgress, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, formatBytes, formatDistance, haversine, hexToHsv, hsvToHex, initials, levelFor, monthGrid, pageWindow, parseISODate, parseLRC, parseMarkers, parseReactions, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, wheelAngle, wrapIndex };
|
|
1176
|
+
export type { BellNotice, CartItem, ChatMessage, GlobeMarker, LeaderRow, PresenceState, StackToastOptions, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaColorPickerElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGlobeElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLocationCardElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOtpElement, UsaPaginationElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPullCordElement, UsaReactionsElement, UsaSegmentedElement, UsaSheetElement, UsaSkeletonRevealElement, UsaSparklineElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
|
|
@@ -982,6 +982,115 @@ interface UsaPrizeWheelElement extends UsaElement {
|
|
|
982
982
|
declare function wheelAngle(index: number, count: number, turns?: number): number;
|
|
983
983
|
declare function definePrizeWheel(tag?: string): CustomElementConstructor | undefined;
|
|
984
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
|
+
|
|
1034
|
+
/**
|
|
1035
|
+
* `<usa-field>` (7.7) — an animated text input: the `label` floats up when
|
|
1036
|
+
* the field is focused or filled, the underline grows from the caret, and the
|
|
1037
|
+
* field validates on blur (native constraint validation: `type`, `required`,
|
|
1038
|
+
* `pattern`, `minlength`, `maxlength`). Invalid → the field shakes and the
|
|
1039
|
+
* message slides in (`usa:invalid`); valid → a check draws itself
|
|
1040
|
+
* (`usa:valid`). With `strength` (on `type="password"`) a 4-step strength
|
|
1041
|
+
* meter fills as you type (`passwordStrength()`). The `<input>` lives in the
|
|
1042
|
+
* light DOM, so a surrounding `<form>` submits it by its `name`. Reduced
|
|
1043
|
+
* motion: no shake, no slide — states switch at once.
|
|
1044
|
+
*/
|
|
1045
|
+
interface UsaFieldElement extends UsaElement {
|
|
1046
|
+
value: string;
|
|
1047
|
+
readonly input: HTMLInputElement | null;
|
|
1048
|
+
validate(): boolean;
|
|
1049
|
+
}
|
|
1050
|
+
/** 0–4 password strength score with a label (7.7). */
|
|
1051
|
+
declare function passwordStrength(pw: string): {
|
|
1052
|
+
score: 0 | 1 | 2 | 3 | 4;
|
|
1053
|
+
label: string;
|
|
1054
|
+
};
|
|
1055
|
+
declare function defineField(tag?: string): CustomElementConstructor | undefined;
|
|
1056
|
+
|
|
1057
|
+
/**
|
|
1058
|
+
* `<usa-otp>` (7.7) — a one-time-code input: `length` boxes (default 6; an initial `value` is typed in) that
|
|
1059
|
+
* auto-advance as you type, step back on Backspace, move with the arrow keys
|
|
1060
|
+
* and take a pasted code in one go (`autocomplete="one-time-code"` on the
|
|
1061
|
+
* first box for SMS autofill). Each digit pops in; when all boxes are filled
|
|
1062
|
+
* `usa:complete` fires with the code. `error()` shakes the row red and clears
|
|
1063
|
+
* it, `success()` turns it green with a wave; `fillCode(code)`, `clear()`. `mode="alnum"` allows
|
|
1064
|
+
* letters. A labelled `role="group"`; reduced motion: no pop, shake or wave.
|
|
1065
|
+
*/
|
|
1066
|
+
interface UsaOtpElement extends UsaElement {
|
|
1067
|
+
readonly value: string;
|
|
1068
|
+
fillCode(code: string): void;
|
|
1069
|
+
clear(): void;
|
|
1070
|
+
error(message?: string): void;
|
|
1071
|
+
success(): void;
|
|
1072
|
+
}
|
|
1073
|
+
/** Keep only the characters an OTP accepts (7.7). */
|
|
1074
|
+
declare function sanitizeCode(s: string, mode?: 'numeric' | 'alnum'): string;
|
|
1075
|
+
declare function defineOtp(tag?: string): CustomElementConstructor | undefined;
|
|
1076
|
+
|
|
1077
|
+
/**
|
|
1078
|
+
* `<usa-upload-progress>` (7.7) — a file row with an animated progress bar:
|
|
1079
|
+
* `name`, `size` (bytes → "2.4 MB"), `value` 0–100 (the bar eases to it and a
|
|
1080
|
+
* shine runs over it while uploading), `status` (`uploading` | `done` |
|
|
1081
|
+
* `error`; reaching 100 sets `done`). Done → the bar turns into a check that
|
|
1082
|
+
* draws itself (`usa:done`); error → the row shakes and shows `message`
|
|
1083
|
+
* (`usa:error`) with a Retry button (`usa:retry`). A `role="progressbar"` with
|
|
1084
|
+
* value text; reduced motion: no shine, no easing, no shake.
|
|
1085
|
+
*/
|
|
1086
|
+
interface UsaUploadProgressElement extends UsaElement {
|
|
1087
|
+
value: number;
|
|
1088
|
+
status: 'uploading' | 'done' | 'error';
|
|
1089
|
+
}
|
|
1090
|
+
/** 1536 → "1.5 KB", 2_400_000 → "2.3 MB" (7.7). */
|
|
1091
|
+
declare function formatBytes(n: number): string;
|
|
1092
|
+
declare function defineUploadProgress(tag?: string): CustomElementConstructor | undefined;
|
|
1093
|
+
|
|
985
1094
|
/**
|
|
986
1095
|
* motionary/components/widgets — the 6.x animated UI widgets, in their own
|
|
987
1096
|
* entry so `motionary/components` and `components/lite` keep their size
|
|
@@ -1055,8 +1164,13 @@ declare global {
|
|
|
1055
1164
|
'usa-xp-bar': UsaXpBarElement;
|
|
1056
1165
|
'usa-badge-wall': UsaBadgeWallElement;
|
|
1057
1166
|
'usa-prize-wheel': UsaPrizeWheelElement;
|
|
1167
|
+
'usa-globe': UsaGlobeElement;
|
|
1168
|
+
'usa-location-card': UsaLocationCardElement;
|
|
1169
|
+
'usa-field': UsaFieldElement;
|
|
1170
|
+
'usa-otp': UsaOtpElement;
|
|
1171
|
+
'usa-upload-progress': UsaUploadProgressElement;
|
|
1058
1172
|
}
|
|
1059
1173
|
}
|
|
1060
1174
|
|
|
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 };
|
|
1175
|
+
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, defineField, defineFileDrop, defineGauge, defineGlobe, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLocationCard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOtp, definePagination, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePullCord, defineReactions, defineSegmented, defineSheet, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineUploadProgress, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, formatBytes, formatDistance, haversine, hexToHsv, hsvToHex, initials, levelFor, monthGrid, pageWindow, parseISODate, parseLRC, parseMarkers, parseReactions, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, wheelAngle, wrapIndex };
|
|
1176
|
+
export type { BellNotice, CartItem, ChatMessage, GlobeMarker, LeaderRow, PresenceState, StackToastOptions, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaColorPickerElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGlobeElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLocationCardElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOtpElement, UsaPaginationElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPullCordElement, UsaReactionsElement, UsaSegmentedElement, UsaSheetElement, UsaSkeletonRevealElement, UsaSparklineElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
|