use-scroll-animate 7.2.0 → 7.4.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 +36 -0
- package/dist/chunks/builtins-HlqAkK0f.js +99 -0
- package/dist/chunks/builtins-HlqAkK0f.js.map +1 -0
- package/dist/chunks/builtins-xalxV2d5.cjs +101 -0
- package/dist/chunks/builtins-xalxV2d5.cjs.map +1 -0
- package/dist/components/angular.cjs +1 -0
- package/dist/components/angular.cjs.map +1 -1
- package/dist/components/angular.js +1 -0
- package/dist/components/angular.js.map +1 -1
- package/dist/components/effects.cjs +1 -0
- package/dist/components/effects.cjs.map +1 -1
- package/dist/components/effects.js +1 -0
- package/dist/components/effects.js.map +1 -1
- package/dist/components/fx-shop.cjs +133 -0
- package/dist/components/fx-shop.cjs.map +1 -0
- package/dist/components/fx-shop.d.cts +70 -0
- package/dist/components/fx-shop.d.ts +70 -0
- package/dist/components/fx-shop.js +129 -0
- package/dist/components/fx-shop.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/fx.cjs +5 -98
- package/dist/components/fx.cjs.map +1 -1
- package/dist/components/fx.js +3 -96
- package/dist/components/fx.js.map +1 -1
- 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/solid.cjs +1 -0
- package/dist/components/solid.cjs.map +1 -1
- package/dist/components/solid.js +1 -0
- package/dist/components/solid.js.map +1 -1
- package/dist/components/svelte.cjs +1 -0
- package/dist/components/svelte.cjs.map +1 -1
- package/dist/components/svelte.js +1 -0
- package/dist/components/svelte.js.map +1 -1
- package/dist/components/vue.cjs +1 -0
- package/dist/components/vue.cjs.map +1 -1
- package/dist/components/vue.js +1 -0
- package/dist/components/vue.js.map +1 -1
- package/dist/components/widgets.cjs +887 -78
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +184 -2
- package/dist/components/widgets.d.ts +184 -2
- package/dist/components/widgets.js +874 -79
- package/dist/components/widgets.js.map +1 -1
- package/dist/components.cjs +2 -1
- package/dist/components.cjs.map +1 -1
- package/dist/components.js +2 -1
- package/dist/components.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 +50 -0
- package/package.json +41 -1
|
@@ -722,6 +722,180 @@ interface UsaKpiElement extends UsaElement {
|
|
|
722
722
|
}
|
|
723
723
|
declare function defineKpi(tag?: string): CustomElementConstructor | undefined;
|
|
724
724
|
|
|
725
|
+
/**
|
|
726
|
+
* `<usa-add-to-cart>` (7.3) — a buy button: on click a ghost of the product
|
|
727
|
+
* (`from` selector, default the closest `[data-product]` image) flies into
|
|
728
|
+
* the cart (`cart` selector, default `[data-cart]`, or a `<usa-cart-drawer>`
|
|
729
|
+
* whose `add()` is called with `item` JSON), then the button morphs into a
|
|
730
|
+
* ✓ "Added" state for `hold` ms. `usa:add` (`{ item }`). A real `<button>`
|
|
731
|
+
* inside; `aria-live` announces "Added to cart". Reduced motion: no flight
|
|
732
|
+
* or morph — the cart just bumps.
|
|
733
|
+
*/
|
|
734
|
+
interface UsaAddToCartElement extends UsaElement {
|
|
735
|
+
add(): void;
|
|
736
|
+
}
|
|
737
|
+
declare function defineAddToCart(tag?: string): CustomElementConstructor | undefined;
|
|
738
|
+
|
|
739
|
+
interface CartItem {
|
|
740
|
+
id?: string;
|
|
741
|
+
name: string;
|
|
742
|
+
price: number;
|
|
743
|
+
qty?: number;
|
|
744
|
+
img?: string;
|
|
745
|
+
}
|
|
746
|
+
/**
|
|
747
|
+
* `<usa-cart-drawer>` (7.3) — a cart button with a count badge plus a drawer
|
|
748
|
+
* that slides in from the side. `add(item)` slides the line in (or bumps its
|
|
749
|
+
* quantity), the badge bumps and the total rolls; lines remove with a collapse.
|
|
750
|
+
* `open` / `close()` / `toggle()`; Esc and the backdrop close it; focus moves
|
|
751
|
+
* into the panel and back. `currency` (default "$"), `label`. Events
|
|
752
|
+
* `usa:change` (`{ items, total }`), `usa:open`, `usa:close`. The panel is a
|
|
753
|
+
* labelled `dialog`; the badge count is announced. Reduced motion: no slide,
|
|
754
|
+
* bump or roll.
|
|
755
|
+
*/
|
|
756
|
+
interface UsaCartDrawerElement extends UsaElement {
|
|
757
|
+
items: CartItem[];
|
|
758
|
+
readonly total: number;
|
|
759
|
+
readonly count: number;
|
|
760
|
+
open: boolean;
|
|
761
|
+
add(item: CartItem): void;
|
|
762
|
+
removeItem(id: string): void;
|
|
763
|
+
toggle(force?: boolean): void;
|
|
764
|
+
}
|
|
765
|
+
/** Cart total (7.3). */
|
|
766
|
+
declare const cartTotal: (items: CartItem[]) => number;
|
|
767
|
+
declare function defineCartDrawer(tag?: string): CustomElementConstructor | undefined;
|
|
768
|
+
|
|
769
|
+
/**
|
|
770
|
+
* `<usa-product-gallery>` (7.3) — a product image gallery from its `<img>`
|
|
771
|
+
* children: a large stage plus a thumbnail strip. Picking a thumbnail (click,
|
|
772
|
+
* ←/→, swipe on touch) cross-slides the stage in the direction of travel; the
|
|
773
|
+
* active thumbnail's ring glides to it. Hovering the stage zooms the photo
|
|
774
|
+
* under the pointer (`zoom`, default 2; `nozoom` turns it off). `index`
|
|
775
|
+
* property / attribute; `usa:change` (`{ index }`). The stage is a labelled
|
|
776
|
+
* `group` whose label says "Image 2 of 4: alt". Reduced motion: images swap
|
|
777
|
+
* instantly and the hover zoom is off.
|
|
778
|
+
*/
|
|
779
|
+
interface UsaProductGalleryElement extends UsaElement {
|
|
780
|
+
index: number;
|
|
781
|
+
readonly count: number;
|
|
782
|
+
go(i: number): void;
|
|
783
|
+
next(): void;
|
|
784
|
+
prev(): void;
|
|
785
|
+
}
|
|
786
|
+
/** Wrap an index into 0..n-1 (7.3). */
|
|
787
|
+
declare const wrapIndex: (i: number, n: number) => number;
|
|
788
|
+
declare function defineProductGallery(tag?: string): CustomElementConstructor | undefined;
|
|
789
|
+
|
|
790
|
+
/**
|
|
791
|
+
* `<usa-countdown>` (7.3) — a flip-card countdown to `to` (ISO date / time)
|
|
792
|
+
* or for `seconds`: days · hours · minutes · seconds, each digit flips like a
|
|
793
|
+
* split-flap card when it changes. `units` ("d,h,m,s"), `labels`. Fires
|
|
794
|
+
* `usa:tick` (`{ left }`) and `usa:done`; adds `data-done`. A `timer` with an
|
|
795
|
+
* `aria-label` that updates once a minute (not every second). Reduced motion:
|
|
796
|
+
* digits change without the flip.
|
|
797
|
+
*/
|
|
798
|
+
interface UsaCountdownElement extends UsaElement {
|
|
799
|
+
/** Seconds left. */
|
|
800
|
+
readonly left: number;
|
|
801
|
+
start(): void;
|
|
802
|
+
stop(): void;
|
|
803
|
+
}
|
|
804
|
+
/** Split seconds into d/h/m/s (7.3). */
|
|
805
|
+
declare function splitTime(sec: number): {
|
|
806
|
+
d: number;
|
|
807
|
+
h: number;
|
|
808
|
+
m: number;
|
|
809
|
+
s: number;
|
|
810
|
+
};
|
|
811
|
+
declare function defineCountdown(tag?: string): CustomElementConstructor | undefined;
|
|
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
|
+
|
|
725
899
|
/**
|
|
726
900
|
* motionary/components/widgets — the 6.x animated UI widgets, in their own
|
|
727
901
|
* entry so `motionary/components` and `components/lite` keep their size
|
|
@@ -783,8 +957,16 @@ declare global {
|
|
|
783
957
|
'usa-gauge': UsaGaugeElement;
|
|
784
958
|
'usa-sparkline': UsaSparklineElement;
|
|
785
959
|
'usa-kpi': UsaKpiElement;
|
|
960
|
+
'usa-add-to-cart': UsaAddToCartElement;
|
|
961
|
+
'usa-cart-drawer': UsaCartDrawerElement;
|
|
962
|
+
'usa-product-gallery': UsaProductGalleryElement;
|
|
963
|
+
'usa-countdown': UsaCountdownElement;
|
|
964
|
+
'usa-message-list': UsaMessageListElement;
|
|
965
|
+
'usa-reactions': UsaReactionsElement;
|
|
966
|
+
'usa-notification-bell': UsaNotificationBellElement;
|
|
967
|
+
'usa-presence': UsaPresenceElement;
|
|
786
968
|
}
|
|
787
969
|
}
|
|
788
970
|
|
|
789
|
-
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, defineBarChart, defineCarousel, defineColorPicker, defineCompare, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFileDrop, defineGauge, defineKanban, defineKeyframeEditor, defineKpi, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineOdometer, definePagination, defineProgressRing, definePullCord, defineSegmented, defineSheet, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineVolumeKnob, defineWeatherCard, defineWidgets, hexToHsv, hsvToHex, monthGrid, pageWindow, parseISODate, parseLRC, sparkPoints, stackToast };
|
|
790
|
-
export type { StackToastOptions, UsaBarChartElement, UsaCarouselElement, UsaColorPickerElement, UsaCompareElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFileDropElement, UsaGaugeElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMilestonesElement, UsaModalElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaOdometerElement, UsaPaginationElement, UsaProgressRingElement, UsaPullCordElement, UsaSegmentedElement, UsaSheetElement, UsaSkeletonRevealElement, UsaSparklineElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaVolumeKnobElement, UsaWeatherCardElement };
|
|
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 };
|
|
@@ -722,6 +722,180 @@ interface UsaKpiElement extends UsaElement {
|
|
|
722
722
|
}
|
|
723
723
|
declare function defineKpi(tag?: string): CustomElementConstructor | undefined;
|
|
724
724
|
|
|
725
|
+
/**
|
|
726
|
+
* `<usa-add-to-cart>` (7.3) — a buy button: on click a ghost of the product
|
|
727
|
+
* (`from` selector, default the closest `[data-product]` image) flies into
|
|
728
|
+
* the cart (`cart` selector, default `[data-cart]`, or a `<usa-cart-drawer>`
|
|
729
|
+
* whose `add()` is called with `item` JSON), then the button morphs into a
|
|
730
|
+
* ✓ "Added" state for `hold` ms. `usa:add` (`{ item }`). A real `<button>`
|
|
731
|
+
* inside; `aria-live` announces "Added to cart". Reduced motion: no flight
|
|
732
|
+
* or morph — the cart just bumps.
|
|
733
|
+
*/
|
|
734
|
+
interface UsaAddToCartElement extends UsaElement {
|
|
735
|
+
add(): void;
|
|
736
|
+
}
|
|
737
|
+
declare function defineAddToCart(tag?: string): CustomElementConstructor | undefined;
|
|
738
|
+
|
|
739
|
+
interface CartItem {
|
|
740
|
+
id?: string;
|
|
741
|
+
name: string;
|
|
742
|
+
price: number;
|
|
743
|
+
qty?: number;
|
|
744
|
+
img?: string;
|
|
745
|
+
}
|
|
746
|
+
/**
|
|
747
|
+
* `<usa-cart-drawer>` (7.3) — a cart button with a count badge plus a drawer
|
|
748
|
+
* that slides in from the side. `add(item)` slides the line in (or bumps its
|
|
749
|
+
* quantity), the badge bumps and the total rolls; lines remove with a collapse.
|
|
750
|
+
* `open` / `close()` / `toggle()`; Esc and the backdrop close it; focus moves
|
|
751
|
+
* into the panel and back. `currency` (default "$"), `label`. Events
|
|
752
|
+
* `usa:change` (`{ items, total }`), `usa:open`, `usa:close`. The panel is a
|
|
753
|
+
* labelled `dialog`; the badge count is announced. Reduced motion: no slide,
|
|
754
|
+
* bump or roll.
|
|
755
|
+
*/
|
|
756
|
+
interface UsaCartDrawerElement extends UsaElement {
|
|
757
|
+
items: CartItem[];
|
|
758
|
+
readonly total: number;
|
|
759
|
+
readonly count: number;
|
|
760
|
+
open: boolean;
|
|
761
|
+
add(item: CartItem): void;
|
|
762
|
+
removeItem(id: string): void;
|
|
763
|
+
toggle(force?: boolean): void;
|
|
764
|
+
}
|
|
765
|
+
/** Cart total (7.3). */
|
|
766
|
+
declare const cartTotal: (items: CartItem[]) => number;
|
|
767
|
+
declare function defineCartDrawer(tag?: string): CustomElementConstructor | undefined;
|
|
768
|
+
|
|
769
|
+
/**
|
|
770
|
+
* `<usa-product-gallery>` (7.3) — a product image gallery from its `<img>`
|
|
771
|
+
* children: a large stage plus a thumbnail strip. Picking a thumbnail (click,
|
|
772
|
+
* ←/→, swipe on touch) cross-slides the stage in the direction of travel; the
|
|
773
|
+
* active thumbnail's ring glides to it. Hovering the stage zooms the photo
|
|
774
|
+
* under the pointer (`zoom`, default 2; `nozoom` turns it off). `index`
|
|
775
|
+
* property / attribute; `usa:change` (`{ index }`). The stage is a labelled
|
|
776
|
+
* `group` whose label says "Image 2 of 4: alt". Reduced motion: images swap
|
|
777
|
+
* instantly and the hover zoom is off.
|
|
778
|
+
*/
|
|
779
|
+
interface UsaProductGalleryElement extends UsaElement {
|
|
780
|
+
index: number;
|
|
781
|
+
readonly count: number;
|
|
782
|
+
go(i: number): void;
|
|
783
|
+
next(): void;
|
|
784
|
+
prev(): void;
|
|
785
|
+
}
|
|
786
|
+
/** Wrap an index into 0..n-1 (7.3). */
|
|
787
|
+
declare const wrapIndex: (i: number, n: number) => number;
|
|
788
|
+
declare function defineProductGallery(tag?: string): CustomElementConstructor | undefined;
|
|
789
|
+
|
|
790
|
+
/**
|
|
791
|
+
* `<usa-countdown>` (7.3) — a flip-card countdown to `to` (ISO date / time)
|
|
792
|
+
* or for `seconds`: days · hours · minutes · seconds, each digit flips like a
|
|
793
|
+
* split-flap card when it changes. `units` ("d,h,m,s"), `labels`. Fires
|
|
794
|
+
* `usa:tick` (`{ left }`) and `usa:done`; adds `data-done`. A `timer` with an
|
|
795
|
+
* `aria-label` that updates once a minute (not every second). Reduced motion:
|
|
796
|
+
* digits change without the flip.
|
|
797
|
+
*/
|
|
798
|
+
interface UsaCountdownElement extends UsaElement {
|
|
799
|
+
/** Seconds left. */
|
|
800
|
+
readonly left: number;
|
|
801
|
+
start(): void;
|
|
802
|
+
stop(): void;
|
|
803
|
+
}
|
|
804
|
+
/** Split seconds into d/h/m/s (7.3). */
|
|
805
|
+
declare function splitTime(sec: number): {
|
|
806
|
+
d: number;
|
|
807
|
+
h: number;
|
|
808
|
+
m: number;
|
|
809
|
+
s: number;
|
|
810
|
+
};
|
|
811
|
+
declare function defineCountdown(tag?: string): CustomElementConstructor | undefined;
|
|
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
|
+
|
|
725
899
|
/**
|
|
726
900
|
* motionary/components/widgets — the 6.x animated UI widgets, in their own
|
|
727
901
|
* entry so `motionary/components` and `components/lite` keep their size
|
|
@@ -783,8 +957,16 @@ declare global {
|
|
|
783
957
|
'usa-gauge': UsaGaugeElement;
|
|
784
958
|
'usa-sparkline': UsaSparklineElement;
|
|
785
959
|
'usa-kpi': UsaKpiElement;
|
|
960
|
+
'usa-add-to-cart': UsaAddToCartElement;
|
|
961
|
+
'usa-cart-drawer': UsaCartDrawerElement;
|
|
962
|
+
'usa-product-gallery': UsaProductGalleryElement;
|
|
963
|
+
'usa-countdown': UsaCountdownElement;
|
|
964
|
+
'usa-message-list': UsaMessageListElement;
|
|
965
|
+
'usa-reactions': UsaReactionsElement;
|
|
966
|
+
'usa-notification-bell': UsaNotificationBellElement;
|
|
967
|
+
'usa-presence': UsaPresenceElement;
|
|
786
968
|
}
|
|
787
969
|
}
|
|
788
970
|
|
|
789
|
-
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, defineBarChart, defineCarousel, defineColorPicker, defineCompare, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFileDrop, defineGauge, defineKanban, defineKeyframeEditor, defineKpi, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineOdometer, definePagination, defineProgressRing, definePullCord, defineSegmented, defineSheet, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineVolumeKnob, defineWeatherCard, defineWidgets, hexToHsv, hsvToHex, monthGrid, pageWindow, parseISODate, parseLRC, sparkPoints, stackToast };
|
|
790
|
-
export type { StackToastOptions, UsaBarChartElement, UsaCarouselElement, UsaColorPickerElement, UsaCompareElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFileDropElement, UsaGaugeElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMilestonesElement, UsaModalElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaOdometerElement, UsaPaginationElement, UsaProgressRingElement, UsaPullCordElement, UsaSegmentedElement, UsaSheetElement, UsaSkeletonRevealElement, UsaSparklineElement, UsaStarRatingElement, UsaStepperElement, UsaStoriesElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTipElement, UsaToastStackElement, UsaVolumeKnobElement, UsaWeatherCardElement };
|
|
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 };
|