use-scroll-animate 7.6.0 → 7.8.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-ai.cjs +130 -0
- package/dist/components/fx-ai.cjs.map +1 -0
- package/dist/components/fx-ai.d.cts +66 -0
- package/dist/components/fx-ai.d.ts +66 -0
- package/dist/components/fx-ai.js +126 -0
- package/dist/components/fx-ai.js.map +1 -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/fx2.cjs +12 -0
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +45 -1
- package/dist/components/fx2.d.ts +45 -1
- package/dist/components/fx2.js +9 -1
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/widgets.cjs +735 -109
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +120 -2
- package/dist/components/widgets.d.ts +120 -2
- package/dist/components/widgets.js +726 -111
- 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 +46 -0
- package/package.json +41 -1
|
@@ -1031,6 +1031,118 @@ declare function haversine(lat1: number, lon1: number, lat2: number, lon2: numbe
|
|
|
1031
1031
|
declare function formatDistance(km: number, unit?: 'km' | 'mi'): string;
|
|
1032
1032
|
declare function defineLocationCard(tag?: string): CustomElementConstructor | undefined;
|
|
1033
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
|
+
|
|
1094
|
+
/**
|
|
1095
|
+
* `<usa-chat-composer>` (7.8) — an AI chat input: the textarea grows with its
|
|
1096
|
+
* text (up to `rows` lines, default 6), Enter sends (Shift+Enter = new line),
|
|
1097
|
+
* the send button pops when there is text and morphs into a Stop button while
|
|
1098
|
+
* `busy` — then a soft "thinking" glow runs round the composer. Sending emits
|
|
1099
|
+
* `usa:send` { text } (cancelable — call `preventDefault()` to keep the text)
|
|
1100
|
+
* and clears it; Stop emits `usa:stop`. `placeholder`, `label`, `send()`,
|
|
1101
|
+
* `clear()`, `value`. Reduced motion: no glow, no pop.
|
|
1102
|
+
*/
|
|
1103
|
+
interface UsaChatComposerElement extends UsaElement {
|
|
1104
|
+
value: string;
|
|
1105
|
+
busy: boolean;
|
|
1106
|
+
send(): boolean;
|
|
1107
|
+
clear(): void;
|
|
1108
|
+
}
|
|
1109
|
+
declare function defineChatComposer(tag?: string): CustomElementConstructor | undefined;
|
|
1110
|
+
|
|
1111
|
+
/**
|
|
1112
|
+
* `<usa-suggestion-chips>` (7.8) — follow-up prompt chips for AI chats:
|
|
1113
|
+
* `items="Summarise|Translate|Explain like I'm 5"` (or child `<button>`s /
|
|
1114
|
+
* text lines). The chips slide in one after another when they appear (and
|
|
1115
|
+
* again after `setItems()`); picking one pulses it, emits `usa:pick`
|
|
1116
|
+
* { text, index } and, with `dismiss`, the others fade away. A labelled list
|
|
1117
|
+
* of real buttons, arrow keys move between them; reduced motion: no slide or
|
|
1118
|
+
* pulse.
|
|
1119
|
+
*/
|
|
1120
|
+
interface UsaSuggestionChipsElement extends UsaElement {
|
|
1121
|
+
items: string[];
|
|
1122
|
+
setItems(items: string[]): void;
|
|
1123
|
+
}
|
|
1124
|
+
/** "a | b|c" → ["a", "b", "c"] (7.8). */
|
|
1125
|
+
declare function parseChips(s: string): string[];
|
|
1126
|
+
declare function defineSuggestionChips(tag?: string): CustomElementConstructor | undefined;
|
|
1127
|
+
|
|
1128
|
+
/**
|
|
1129
|
+
* `<usa-voice-button>` (7.8) — a push-to-talk mic button: click (or Space /
|
|
1130
|
+
* Enter) toggles `listening`; while listening a halo breathes round the
|
|
1131
|
+
* button and `bars` (default 5) wave beside it. Feed it the live input level
|
|
1132
|
+
* with `level` (0–1, e.g. from an `AnalyserNode` or a speech API) and the
|
|
1133
|
+
* bars and halo follow it; without levels they run an idle wave. `usa:start`
|
|
1134
|
+
* / `usa:stop`. A real `<button aria-pressed>`; `label`. Reduced motion: no
|
|
1135
|
+
* halo or wave — the pressed state shows by colour.
|
|
1136
|
+
*/
|
|
1137
|
+
interface UsaVoiceButtonElement extends UsaElement {
|
|
1138
|
+
listening: boolean;
|
|
1139
|
+
level: number;
|
|
1140
|
+
toggle(force?: boolean): void;
|
|
1141
|
+
}
|
|
1142
|
+
/** Bar heights (0–1) for a level and a phase, centre bars tallest (7.8). */
|
|
1143
|
+
declare function waveBars(level: number, n?: number, phase?: number): number[];
|
|
1144
|
+
declare function defineVoiceButton(tag?: string): CustomElementConstructor | undefined;
|
|
1145
|
+
|
|
1034
1146
|
/**
|
|
1035
1147
|
* motionary/components/widgets — the 6.x animated UI widgets, in their own
|
|
1036
1148
|
* entry so `motionary/components` and `components/lite` keep their size
|
|
@@ -1106,8 +1218,14 @@ declare global {
|
|
|
1106
1218
|
'usa-prize-wheel': UsaPrizeWheelElement;
|
|
1107
1219
|
'usa-globe': UsaGlobeElement;
|
|
1108
1220
|
'usa-location-card': UsaLocationCardElement;
|
|
1221
|
+
'usa-field': UsaFieldElement;
|
|
1222
|
+
'usa-otp': UsaOtpElement;
|
|
1223
|
+
'usa-upload-progress': UsaUploadProgressElement;
|
|
1224
|
+
'usa-chat-composer': UsaChatComposerElement;
|
|
1225
|
+
'usa-suggestion-chips': UsaSuggestionChipsElement;
|
|
1226
|
+
'usa-voice-button': UsaVoiceButtonElement;
|
|
1109
1227
|
}
|
|
1110
1228
|
}
|
|
1111
1229
|
|
|
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 };
|
|
1230
|
+
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, defineChatComposer, 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, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, formatBytes, formatDistance, haversine, hexToHsv, hsvToHex, initials, levelFor, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseReactions, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
|
|
1231
|
+
export type { BellNotice, CartItem, ChatMessage, GlobeMarker, LeaderRow, PresenceState, StackToastOptions, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChatComposerElement, 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, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
|
|
@@ -1031,6 +1031,118 @@ declare function haversine(lat1: number, lon1: number, lat2: number, lon2: numbe
|
|
|
1031
1031
|
declare function formatDistance(km: number, unit?: 'km' | 'mi'): string;
|
|
1032
1032
|
declare function defineLocationCard(tag?: string): CustomElementConstructor | undefined;
|
|
1033
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
|
+
|
|
1094
|
+
/**
|
|
1095
|
+
* `<usa-chat-composer>` (7.8) — an AI chat input: the textarea grows with its
|
|
1096
|
+
* text (up to `rows` lines, default 6), Enter sends (Shift+Enter = new line),
|
|
1097
|
+
* the send button pops when there is text and morphs into a Stop button while
|
|
1098
|
+
* `busy` — then a soft "thinking" glow runs round the composer. Sending emits
|
|
1099
|
+
* `usa:send` { text } (cancelable — call `preventDefault()` to keep the text)
|
|
1100
|
+
* and clears it; Stop emits `usa:stop`. `placeholder`, `label`, `send()`,
|
|
1101
|
+
* `clear()`, `value`. Reduced motion: no glow, no pop.
|
|
1102
|
+
*/
|
|
1103
|
+
interface UsaChatComposerElement extends UsaElement {
|
|
1104
|
+
value: string;
|
|
1105
|
+
busy: boolean;
|
|
1106
|
+
send(): boolean;
|
|
1107
|
+
clear(): void;
|
|
1108
|
+
}
|
|
1109
|
+
declare function defineChatComposer(tag?: string): CustomElementConstructor | undefined;
|
|
1110
|
+
|
|
1111
|
+
/**
|
|
1112
|
+
* `<usa-suggestion-chips>` (7.8) — follow-up prompt chips for AI chats:
|
|
1113
|
+
* `items="Summarise|Translate|Explain like I'm 5"` (or child `<button>`s /
|
|
1114
|
+
* text lines). The chips slide in one after another when they appear (and
|
|
1115
|
+
* again after `setItems()`); picking one pulses it, emits `usa:pick`
|
|
1116
|
+
* { text, index } and, with `dismiss`, the others fade away. A labelled list
|
|
1117
|
+
* of real buttons, arrow keys move between them; reduced motion: no slide or
|
|
1118
|
+
* pulse.
|
|
1119
|
+
*/
|
|
1120
|
+
interface UsaSuggestionChipsElement extends UsaElement {
|
|
1121
|
+
items: string[];
|
|
1122
|
+
setItems(items: string[]): void;
|
|
1123
|
+
}
|
|
1124
|
+
/** "a | b|c" → ["a", "b", "c"] (7.8). */
|
|
1125
|
+
declare function parseChips(s: string): string[];
|
|
1126
|
+
declare function defineSuggestionChips(tag?: string): CustomElementConstructor | undefined;
|
|
1127
|
+
|
|
1128
|
+
/**
|
|
1129
|
+
* `<usa-voice-button>` (7.8) — a push-to-talk mic button: click (or Space /
|
|
1130
|
+
* Enter) toggles `listening`; while listening a halo breathes round the
|
|
1131
|
+
* button and `bars` (default 5) wave beside it. Feed it the live input level
|
|
1132
|
+
* with `level` (0–1, e.g. from an `AnalyserNode` or a speech API) and the
|
|
1133
|
+
* bars and halo follow it; without levels they run an idle wave. `usa:start`
|
|
1134
|
+
* / `usa:stop`. A real `<button aria-pressed>`; `label`. Reduced motion: no
|
|
1135
|
+
* halo or wave — the pressed state shows by colour.
|
|
1136
|
+
*/
|
|
1137
|
+
interface UsaVoiceButtonElement extends UsaElement {
|
|
1138
|
+
listening: boolean;
|
|
1139
|
+
level: number;
|
|
1140
|
+
toggle(force?: boolean): void;
|
|
1141
|
+
}
|
|
1142
|
+
/** Bar heights (0–1) for a level and a phase, centre bars tallest (7.8). */
|
|
1143
|
+
declare function waveBars(level: number, n?: number, phase?: number): number[];
|
|
1144
|
+
declare function defineVoiceButton(tag?: string): CustomElementConstructor | undefined;
|
|
1145
|
+
|
|
1034
1146
|
/**
|
|
1035
1147
|
* motionary/components/widgets — the 6.x animated UI widgets, in their own
|
|
1036
1148
|
* entry so `motionary/components` and `components/lite` keep their size
|
|
@@ -1106,8 +1218,14 @@ declare global {
|
|
|
1106
1218
|
'usa-prize-wheel': UsaPrizeWheelElement;
|
|
1107
1219
|
'usa-globe': UsaGlobeElement;
|
|
1108
1220
|
'usa-location-card': UsaLocationCardElement;
|
|
1221
|
+
'usa-field': UsaFieldElement;
|
|
1222
|
+
'usa-otp': UsaOtpElement;
|
|
1223
|
+
'usa-upload-progress': UsaUploadProgressElement;
|
|
1224
|
+
'usa-chat-composer': UsaChatComposerElement;
|
|
1225
|
+
'usa-suggestion-chips': UsaSuggestionChipsElement;
|
|
1226
|
+
'usa-voice-button': UsaVoiceButtonElement;
|
|
1109
1227
|
}
|
|
1110
1228
|
}
|
|
1111
1229
|
|
|
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 };
|
|
1230
|
+
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, defineChatComposer, 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, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, formatBytes, formatDistance, haversine, hexToHsv, hsvToHex, initials, levelFor, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseReactions, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
|
|
1231
|
+
export type { BellNotice, CartItem, ChatMessage, GlobeMarker, LeaderRow, PresenceState, StackToastOptions, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChatComposerElement, 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, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
|