motionary 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.
Files changed (62) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/dist/chunks/builtins-HlqAkK0f.js +99 -0
  3. package/dist/chunks/builtins-HlqAkK0f.js.map +1 -0
  4. package/dist/chunks/builtins-xalxV2d5.cjs +101 -0
  5. package/dist/chunks/builtins-xalxV2d5.cjs.map +1 -0
  6. package/dist/components/angular.cjs +1 -0
  7. package/dist/components/angular.cjs.map +1 -1
  8. package/dist/components/angular.js +1 -0
  9. package/dist/components/angular.js.map +1 -1
  10. package/dist/components/effects.cjs +1 -0
  11. package/dist/components/effects.cjs.map +1 -1
  12. package/dist/components/effects.js +1 -0
  13. package/dist/components/effects.js.map +1 -1
  14. package/dist/components/fx-shop.cjs +133 -0
  15. package/dist/components/fx-shop.cjs.map +1 -0
  16. package/dist/components/fx-shop.d.cts +70 -0
  17. package/dist/components/fx-shop.d.ts +70 -0
  18. package/dist/components/fx-shop.js +129 -0
  19. package/dist/components/fx-shop.js.map +1 -0
  20. package/dist/components/fx-social.cjs +121 -0
  21. package/dist/components/fx-social.cjs.map +1 -0
  22. package/dist/components/fx-social.d.cts +66 -0
  23. package/dist/components/fx-social.d.ts +66 -0
  24. package/dist/components/fx-social.js +117 -0
  25. package/dist/components/fx-social.js.map +1 -0
  26. package/dist/components/fx.cjs +5 -98
  27. package/dist/components/fx.cjs.map +1 -1
  28. package/dist/components/fx.js +3 -96
  29. package/dist/components/fx.js.map +1 -1
  30. package/dist/components/fx2.cjs +12 -0
  31. package/dist/components/fx2.cjs.map +1 -1
  32. package/dist/components/fx2.d.cts +49 -1
  33. package/dist/components/fx2.d.ts +49 -1
  34. package/dist/components/fx2.js +9 -1
  35. package/dist/components/fx2.js.map +1 -1
  36. package/dist/components/solid.cjs +1 -0
  37. package/dist/components/solid.cjs.map +1 -1
  38. package/dist/components/solid.js +1 -0
  39. package/dist/components/solid.js.map +1 -1
  40. package/dist/components/svelte.cjs +1 -0
  41. package/dist/components/svelte.cjs.map +1 -1
  42. package/dist/components/svelte.js +1 -0
  43. package/dist/components/svelte.js.map +1 -1
  44. package/dist/components/vue.cjs +1 -0
  45. package/dist/components/vue.cjs.map +1 -1
  46. package/dist/components/vue.js +1 -0
  47. package/dist/components/vue.js.map +1 -1
  48. package/dist/components/widgets.cjs +887 -78
  49. package/dist/components/widgets.cjs.map +1 -1
  50. package/dist/components/widgets.d.cts +184 -2
  51. package/dist/components/widgets.d.ts +184 -2
  52. package/dist/components/widgets.js +874 -79
  53. package/dist/components/widgets.js.map +1 -1
  54. package/dist/components.cjs +2 -1
  55. package/dist/components.cjs.map +1 -1
  56. package/dist/components.js +2 -1
  57. package/dist/components.js.map +1 -1
  58. package/dist/widgets.umd.js +1 -1
  59. package/dist/widgets.umd.js.map +1 -1
  60. package/docs/ROADMAP.md +2 -2
  61. package/docs/components.md +50 -0
  62. 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 };