motionary 6.9.0 → 7.0.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 +16 -0
- package/README.md +2 -2
- package/README_ja.md +2 -2
- package/README_zh.md +2 -2
- package/dist/chunks/{base-D5MHqeDd.js → base-DchG4q_S.js} +2 -2
- package/dist/chunks/{base-D5MHqeDd.js.map → base-DchG4q_S.js.map} +1 -1
- package/dist/chunks/{core-ZGo4hOEk.js → core-D2vF8kZb.js} +2 -2
- package/dist/chunks/{core-ZGo4hOEk.js.map → core-D2vF8kZb.js.map} +1 -1
- package/dist/chunks/{core-DyJu5r5a.js → core-DVyTlo9Q.js} +2 -2
- package/dist/chunks/{core-DyJu5r5a.js.map → core-DVyTlo9Q.js.map} +1 -1
- package/dist/chunks/{fx-DlGRMJ-Z.js → fx-DUMVKSvg.js} +2 -2
- package/dist/chunks/{fx-DlGRMJ-Z.js.map → fx-DUMVKSvg.js.map} +1 -1
- package/dist/chunks/{gpu-DPhMkJq6.js → gpu-Bkw605Ds.js} +183 -11
- package/dist/chunks/gpu-Bkw605Ds.js.map +1 -0
- package/dist/chunks/{gpu-C2D4T9Q-.cjs → gpu-Dx0H875w.cjs} +185 -9
- package/dist/chunks/gpu-Dx0H875w.cjs.map +1 -0
- package/dist/chunks/{index-tags-wv0R_vkO.cjs → index-tags-BTMwrfgV.cjs} +3 -3
- package/dist/chunks/index-tags-BTMwrfgV.cjs.map +1 -0
- package/dist/chunks/{index-tags-DucKMQr_.js → index-tags-C04JP8g4.js} +3 -3
- package/dist/chunks/index-tags-C04JP8g4.js.map +1 -0
- package/dist/chunks/{player-DH3TIz-t.js → player-C-TwEEy6.js} +4 -4
- package/dist/chunks/{player-DH3TIz-t.js.map → player-C-TwEEy6.js.map} +1 -1
- package/dist/chunks/{registry-CTLWeg-J.js → registry-D23neB4M.js} +2 -2
- package/dist/chunks/{registry-CTLWeg-J.js.map → registry-D23neB4M.js.map} +1 -1
- package/dist/chunks/{spring-B-9MZOrW.js → spring-BhoT09Qb.js} +2 -2
- package/dist/chunks/{spring-B-9MZOrW.js.map → spring-BhoT09Qb.js.map} +1 -1
- package/dist/chunks/{variants-CoZn3k_5.js → variants-C_hv_s23.js} +2 -2
- package/dist/chunks/{variants-CoZn3k_5.js.map → variants-C_hv_s23.js.map} +1 -1
- package/dist/components/a11y.cjs +1 -1
- package/dist/components/a11y.d.cts +2 -2
- package/dist/components/a11y.d.ts +2 -2
- package/dist/components/a11y.js +3 -3
- package/dist/components/angular.cjs +2 -2
- package/dist/components/angular.cjs.map +1 -1
- package/dist/components/angular.d.cts +5 -36
- package/dist/components/angular.d.ts +5 -36
- package/dist/components/angular.js +9 -9
- package/dist/components/angular.js.map +1 -1
- package/dist/components/background.js +2 -2
- package/dist/components/bridge.js +1 -1
- package/dist/components/cards.js +2 -2
- package/dist/components/click.js +3 -3
- package/dist/components/depth.js +3 -3
- package/dist/components/effects.js +6 -6
- package/dist/components/feedback.js +1 -1
- package/dist/components/fx-3d.cjs +1 -7
- package/dist/components/fx-3d.cjs.map +1 -1
- package/dist/components/fx-3d.d.cts +1 -3
- package/dist/components/fx-3d.d.ts +1 -3
- package/dist/components/fx-3d.js +3 -8
- package/dist/components/fx-3d.js.map +1 -1
- package/dist/components/fx-focus.js +2 -2
- package/dist/components/fx-gpu.cjs +2 -3
- package/dist/components/fx-gpu.cjs.map +1 -1
- package/dist/components/fx-gpu.d.cts +1 -3
- package/dist/components/fx-gpu.d.ts +1 -3
- package/dist/components/fx-gpu.js +3 -3
- package/dist/components/fx-light.cjs +1 -7
- package/dist/components/fx-light.cjs.map +1 -1
- package/dist/components/fx-light.d.cts +1 -3
- package/dist/components/fx-light.d.ts +1 -3
- package/dist/components/fx-light.js +3 -8
- package/dist/components/fx-light.js.map +1 -1
- package/dist/components/fx-morph.cjs +1 -7
- package/dist/components/fx-morph.cjs.map +1 -1
- package/dist/components/fx-morph.d.cts +1 -3
- package/dist/components/fx-morph.d.ts +1 -3
- package/dist/components/fx-morph.js +3 -8
- package/dist/components/fx-morph.js.map +1 -1
- package/dist/components/fx-physics.cjs +1 -7
- package/dist/components/fx-physics.cjs.map +1 -1
- package/dist/components/fx-physics.d.cts +1 -3
- package/dist/components/fx-physics.d.ts +1 -3
- package/dist/components/fx-physics.js +3 -8
- package/dist/components/fx-physics.js.map +1 -1
- package/dist/components/fx-text.cjs +1 -7
- package/dist/components/fx-text.cjs.map +1 -1
- package/dist/components/fx-text.d.cts +1 -3
- package/dist/components/fx-text.d.ts +1 -3
- package/dist/components/fx-text.js +3 -8
- package/dist/components/fx-text.js.map +1 -1
- package/dist/components/fx-transitions.cjs +1 -7
- package/dist/components/fx-transitions.cjs.map +1 -1
- package/dist/components/fx-transitions.d.cts +1 -3
- package/dist/components/fx-transitions.d.ts +1 -3
- package/dist/components/fx-transitions.js +4 -9
- package/dist/components/fx-transitions.js.map +1 -1
- package/dist/components/fx-weather.cjs +1 -7
- package/dist/components/fx-weather.cjs.map +1 -1
- package/dist/components/fx-weather.d.cts +1 -3
- package/dist/components/fx-weather.d.ts +1 -3
- package/dist/components/fx-weather.js +3 -8
- package/dist/components/fx-weather.js.map +1 -1
- package/dist/components/fx.js +5 -5
- package/dist/components/fx2.cjs +7 -19
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +39 -22
- package/dist/components/fx2.d.ts +39 -22
- package/dist/components/fx2.js +11 -19
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/gesture.js +4 -4
- package/dist/components/interaction.cjs +11 -95
- package/dist/components/interaction.cjs.map +1 -1
- package/dist/components/interaction.css +0 -1
- package/dist/components/interaction.d.cts +3 -21
- package/dist/components/interaction.d.ts +3 -21
- package/dist/components/interaction.js +13 -96
- package/dist/components/interaction.js.map +1 -1
- package/dist/components/jsx.d.cts +2 -2
- package/dist/components/jsx.d.ts +2 -2
- package/dist/components/layout.js +1 -1
- package/dist/components/lazy.cjs +1 -1
- package/dist/components/lazy.d.cts +2 -2
- package/dist/components/lazy.d.ts +2 -2
- package/dist/components/lazy.js +1 -1
- package/dist/components/lite.cjs +115 -258
- package/dist/components/lite.cjs.map +1 -1
- package/dist/components/lite.js +116 -257
- package/dist/components/lite.js.map +1 -1
- package/dist/components/marketplace.js +2 -2
- package/dist/components/packs.js +1 -1
- package/dist/components/page.js +3 -3
- package/dist/components/perf.cjs +1 -1
- package/dist/components/perf.d.cts +2 -2
- package/dist/components/perf.d.ts +2 -2
- package/dist/components/perf.js +3 -3
- package/dist/components/physics.js +3 -3
- package/dist/components/react.cjs +2 -2
- package/dist/components/react.cjs.map +1 -1
- package/dist/components/react.js +2 -2
- package/dist/components/react.js.map +1 -1
- package/dist/components/reveal.js +1 -1
- package/dist/components/solid.cjs +2 -2
- package/dist/components/solid.cjs.map +1 -1
- package/dist/components/solid.d.cts +4 -35
- package/dist/components/solid.d.ts +4 -35
- package/dist/components/solid.js +9 -9
- package/dist/components/solid.js.map +1 -1
- package/dist/components/svelte.cjs +2 -2
- package/dist/components/svelte.cjs.map +1 -1
- package/dist/components/svelte.d.cts +5 -36
- package/dist/components/svelte.d.ts +5 -36
- package/dist/components/svelte.js +9 -9
- package/dist/components/svelte.js.map +1 -1
- package/dist/components/svg.js +1 -1
- package/dist/components/text.js +2 -2
- package/dist/components/timeline.js +3 -3
- package/dist/components/transitions.js +1 -1
- package/dist/components/ui.cjs +16 -75
- package/dist/components/ui.cjs.map +1 -1
- package/dist/components/ui.css +0 -1
- package/dist/components/ui.d.cts +3 -18
- package/dist/components/ui.d.ts +3 -18
- package/dist/components/ui.js +21 -79
- package/dist/components/ui.js.map +1 -1
- package/dist/components/vue.cjs +2 -2
- package/dist/components/vue.cjs.map +1 -1
- package/dist/components/vue.d.cts +5 -36
- package/dist/components/vue.d.ts +5 -36
- package/dist/components/vue.js +9 -9
- package/dist/components/vue.js.map +1 -1
- package/dist/components/webgl.js +1 -1
- package/dist/components/widgets.js +5 -5
- package/dist/components.cjs +1 -3
- package/dist/components.cjs.map +1 -1
- package/dist/components.css +0 -2
- package/dist/components.d.cts +6 -39
- package/dist/components.d.ts +6 -39
- package/dist/components.js +12 -12
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/widgets.umd.js +1 -1
- package/dist/widgets.umd.js.map +1 -1
- package/docs/ROADMAP.md +12 -12
- package/docs/accessibility.md +2 -2
- package/docs/components.md +13 -2
- package/docs/frameworks-ssr.md +4 -4
- package/docs/hybrid-apps.md +2 -2
- package/docs/upgrading-7.md +11 -1
- package/docs/windows-apps.md +1 -1
- package/package.json +111 -1
- package/dist/chunks/gpu-C2D4T9Q-.cjs.map +0 -1
- package/dist/chunks/gpu-DPhMkJq6.js.map +0 -1
- package/dist/chunks/index-tags-DucKMQr_.js.map +0 -1
- package/dist/chunks/index-tags-wv0R_vkO.cjs.map +0 -1
|
@@ -393,26 +393,10 @@ interface UsaPressElement extends UsaElement {
|
|
|
393
393
|
readonly pressed: boolean;
|
|
394
394
|
}
|
|
395
395
|
|
|
396
|
-
/**
|
|
397
|
-
* `<usa-toggle>` — an accessible switch whose knob stretches while pressed
|
|
398
|
-
* and glides across (the Windows 11 / iOS toggle). `role="switch"`,
|
|
399
|
-
* keyboard (Space / Enter), and form-associated where `ElementInternals`
|
|
400
|
-
* exists (submits `value`, default `"on"`, under `name` when checked).
|
|
401
|
-
*
|
|
402
|
-
* Attributes: `checked`, `disabled`, `name`, `value`, `label`
|
|
403
|
-
* (accessible name if there is no `aria-label` / `<label>`). Events:
|
|
404
|
-
* `change` and `usa:change` (`detail.checked`). Reduced motion: no glide.
|
|
405
|
-
*/
|
|
406
|
-
interface UsaToggleElement extends UsaElement {
|
|
407
|
-
checked: boolean;
|
|
408
|
-
disabled: boolean;
|
|
409
|
-
toggle(force?: boolean): void;
|
|
410
|
-
}
|
|
411
|
-
|
|
412
396
|
/**
|
|
413
397
|
* motionary/components/interaction — micro-interactions.
|
|
414
398
|
* `<usa-ripple>`, `<usa-magnetic>`, `<usa-tilt>`, `<usa-spotlight>`,
|
|
415
|
-
* `<usa-press
|
|
399
|
+
* `<usa-press>`.
|
|
416
400
|
*/
|
|
417
401
|
|
|
418
402
|
declare global {
|
|
@@ -422,7 +406,6 @@ declare global {
|
|
|
422
406
|
'usa-tilt': UsaTiltElement;
|
|
423
407
|
'usa-spotlight': UsaSpotlightElement;
|
|
424
408
|
'usa-press': UsaPressElement;
|
|
425
|
-
'usa-toggle': UsaToggleElement;
|
|
426
409
|
}
|
|
427
410
|
}
|
|
428
411
|
|
|
@@ -1152,19 +1135,6 @@ interface UsaRatingElement extends UsaElement {
|
|
|
1152
1135
|
value: number;
|
|
1153
1136
|
}
|
|
1154
1137
|
|
|
1155
|
-
/**
|
|
1156
|
-
* `<usa-tooltip text="…">` — a tooltip for the element it wraps, shown on
|
|
1157
|
-
* hover (after `delay` ms, 300) and on keyboard focus, hidden on Esc / blur.
|
|
1158
|
-
* It springs in from its placement side and flips to stay on screen; the
|
|
1159
|
-
* trigger gets `aria-describedby`.
|
|
1160
|
-
* Attributes: `text`, `placement` (`top` default, `bottom`, `left`, `right`),
|
|
1161
|
-
* `delay`, `variant`. Reduced motion: fades only.
|
|
1162
|
-
*/
|
|
1163
|
-
interface UsaTooltipElement extends UsaElement {
|
|
1164
|
-
show(): void;
|
|
1165
|
-
hide(): void;
|
|
1166
|
-
}
|
|
1167
|
-
|
|
1168
1138
|
/**
|
|
1169
1139
|
* `<usa-popover>` — a click-to-open popover: the first element child is the
|
|
1170
1140
|
* trigger, `[data-popover]` is the content. Springs open from the trigger,
|
|
@@ -1203,7 +1173,7 @@ interface UsaAvatarStackElement extends UsaElement {
|
|
|
1203
1173
|
* motionary/components/ui — animated UI components + style variants (v2.6).
|
|
1204
1174
|
* `<usa-tabs>`, `<usa-drawer>`, `<usa-bottom-sheet>`, `<usa-pull-refresh>`,
|
|
1205
1175
|
* `<usa-fab>`, `<usa-navbar>`, `<usa-slider>`, `<usa-rating>`,
|
|
1206
|
-
* `<usa-
|
|
1176
|
+
* `<usa-popover>`, `<usa-badge>`, `<usa-avatar-stack>`,
|
|
1207
1177
|
* and `variant="minimal | neon | glass | brutalist | fluent | material"`
|
|
1208
1178
|
* design tokens (`setVariant()`, `VARIANTS`).
|
|
1209
1179
|
*/
|
|
@@ -1218,7 +1188,6 @@ declare global {
|
|
|
1218
1188
|
'usa-navbar': UsaNavbarElement;
|
|
1219
1189
|
'usa-slider': UsaSliderElement;
|
|
1220
1190
|
'usa-rating': UsaRatingElement;
|
|
1221
|
-
'usa-tooltip': UsaTooltipElement;
|
|
1222
1191
|
'usa-popover': UsaPopoverElement;
|
|
1223
1192
|
'usa-badge': UsaBadgeElement;
|
|
1224
1193
|
'usa-avatar-stack': UsaAvatarStackElement;
|
|
@@ -1638,14 +1607,14 @@ declare global {
|
|
|
1638
1607
|
declare const COMPONENT_CATEGORIES: {
|
|
1639
1608
|
readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
|
|
1640
1609
|
readonly text: readonly ["usa-typewriter", "usa-split-text", "usa-scramble", "usa-counter", "usa-shimmer-text", "usa-text-rotate", "usa-wave-text", "usa-glitch", "usa-gradient-text", "usa-handwriting", "usa-scroll-highlight"];
|
|
1641
|
-
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press"
|
|
1610
|
+
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press"];
|
|
1642
1611
|
readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
|
|
1643
1612
|
readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
|
|
1644
1613
|
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
|
|
1645
1614
|
readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
|
|
1646
1615
|
readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
|
|
1647
1616
|
readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
|
|
1648
|
-
readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-
|
|
1617
|
+
readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-popover", "usa-badge", "usa-avatar-stack"];
|
|
1649
1618
|
readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
|
|
1650
1619
|
readonly timeline: readonly ["usa-timeline"];
|
|
1651
1620
|
readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
|
|
@@ -1698,7 +1667,7 @@ declare global {
|
|
|
1698
1667
|
* app.use(UsaPlugin, { categories: ['click', 'cards'] });
|
|
1699
1668
|
* ```
|
|
1700
1669
|
* In templates, listen with `@usa:change="…"` and bind properties with
|
|
1701
|
-
* `.prop`: `<usa-
|
|
1670
|
+
* `.prop`: `<usa-switch :checked.prop="on" @usa:change="on = $event.detail.checked">`.
|
|
1702
1671
|
*/
|
|
1703
1672
|
|
|
1704
1673
|
/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */
|
package/dist/components/vue.d.ts
CHANGED
|
@@ -393,26 +393,10 @@ interface UsaPressElement extends UsaElement {
|
|
|
393
393
|
readonly pressed: boolean;
|
|
394
394
|
}
|
|
395
395
|
|
|
396
|
-
/**
|
|
397
|
-
* `<usa-toggle>` — an accessible switch whose knob stretches while pressed
|
|
398
|
-
* and glides across (the Windows 11 / iOS toggle). `role="switch"`,
|
|
399
|
-
* keyboard (Space / Enter), and form-associated where `ElementInternals`
|
|
400
|
-
* exists (submits `value`, default `"on"`, under `name` when checked).
|
|
401
|
-
*
|
|
402
|
-
* Attributes: `checked`, `disabled`, `name`, `value`, `label`
|
|
403
|
-
* (accessible name if there is no `aria-label` / `<label>`). Events:
|
|
404
|
-
* `change` and `usa:change` (`detail.checked`). Reduced motion: no glide.
|
|
405
|
-
*/
|
|
406
|
-
interface UsaToggleElement extends UsaElement {
|
|
407
|
-
checked: boolean;
|
|
408
|
-
disabled: boolean;
|
|
409
|
-
toggle(force?: boolean): void;
|
|
410
|
-
}
|
|
411
|
-
|
|
412
396
|
/**
|
|
413
397
|
* motionary/components/interaction — micro-interactions.
|
|
414
398
|
* `<usa-ripple>`, `<usa-magnetic>`, `<usa-tilt>`, `<usa-spotlight>`,
|
|
415
|
-
* `<usa-press
|
|
399
|
+
* `<usa-press>`.
|
|
416
400
|
*/
|
|
417
401
|
|
|
418
402
|
declare global {
|
|
@@ -422,7 +406,6 @@ declare global {
|
|
|
422
406
|
'usa-tilt': UsaTiltElement;
|
|
423
407
|
'usa-spotlight': UsaSpotlightElement;
|
|
424
408
|
'usa-press': UsaPressElement;
|
|
425
|
-
'usa-toggle': UsaToggleElement;
|
|
426
409
|
}
|
|
427
410
|
}
|
|
428
411
|
|
|
@@ -1152,19 +1135,6 @@ interface UsaRatingElement extends UsaElement {
|
|
|
1152
1135
|
value: number;
|
|
1153
1136
|
}
|
|
1154
1137
|
|
|
1155
|
-
/**
|
|
1156
|
-
* `<usa-tooltip text="…">` — a tooltip for the element it wraps, shown on
|
|
1157
|
-
* hover (after `delay` ms, 300) and on keyboard focus, hidden on Esc / blur.
|
|
1158
|
-
* It springs in from its placement side and flips to stay on screen; the
|
|
1159
|
-
* trigger gets `aria-describedby`.
|
|
1160
|
-
* Attributes: `text`, `placement` (`top` default, `bottom`, `left`, `right`),
|
|
1161
|
-
* `delay`, `variant`. Reduced motion: fades only.
|
|
1162
|
-
*/
|
|
1163
|
-
interface UsaTooltipElement extends UsaElement {
|
|
1164
|
-
show(): void;
|
|
1165
|
-
hide(): void;
|
|
1166
|
-
}
|
|
1167
|
-
|
|
1168
1138
|
/**
|
|
1169
1139
|
* `<usa-popover>` — a click-to-open popover: the first element child is the
|
|
1170
1140
|
* trigger, `[data-popover]` is the content. Springs open from the trigger,
|
|
@@ -1203,7 +1173,7 @@ interface UsaAvatarStackElement extends UsaElement {
|
|
|
1203
1173
|
* motionary/components/ui — animated UI components + style variants (v2.6).
|
|
1204
1174
|
* `<usa-tabs>`, `<usa-drawer>`, `<usa-bottom-sheet>`, `<usa-pull-refresh>`,
|
|
1205
1175
|
* `<usa-fab>`, `<usa-navbar>`, `<usa-slider>`, `<usa-rating>`,
|
|
1206
|
-
* `<usa-
|
|
1176
|
+
* `<usa-popover>`, `<usa-badge>`, `<usa-avatar-stack>`,
|
|
1207
1177
|
* and `variant="minimal | neon | glass | brutalist | fluent | material"`
|
|
1208
1178
|
* design tokens (`setVariant()`, `VARIANTS`).
|
|
1209
1179
|
*/
|
|
@@ -1218,7 +1188,6 @@ declare global {
|
|
|
1218
1188
|
'usa-navbar': UsaNavbarElement;
|
|
1219
1189
|
'usa-slider': UsaSliderElement;
|
|
1220
1190
|
'usa-rating': UsaRatingElement;
|
|
1221
|
-
'usa-tooltip': UsaTooltipElement;
|
|
1222
1191
|
'usa-popover': UsaPopoverElement;
|
|
1223
1192
|
'usa-badge': UsaBadgeElement;
|
|
1224
1193
|
'usa-avatar-stack': UsaAvatarStackElement;
|
|
@@ -1638,14 +1607,14 @@ declare global {
|
|
|
1638
1607
|
declare const COMPONENT_CATEGORIES: {
|
|
1639
1608
|
readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
|
|
1640
1609
|
readonly text: readonly ["usa-typewriter", "usa-split-text", "usa-scramble", "usa-counter", "usa-shimmer-text", "usa-text-rotate", "usa-wave-text", "usa-glitch", "usa-gradient-text", "usa-handwriting", "usa-scroll-highlight"];
|
|
1641
|
-
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press"
|
|
1610
|
+
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press"];
|
|
1642
1611
|
readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
|
|
1643
1612
|
readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
|
|
1644
1613
|
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
|
|
1645
1614
|
readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
|
|
1646
1615
|
readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
|
|
1647
1616
|
readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
|
|
1648
|
-
readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-
|
|
1617
|
+
readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-popover", "usa-badge", "usa-avatar-stack"];
|
|
1649
1618
|
readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
|
|
1650
1619
|
readonly timeline: readonly ["usa-timeline"];
|
|
1651
1620
|
readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
|
|
@@ -1698,7 +1667,7 @@ declare global {
|
|
|
1698
1667
|
* app.use(UsaPlugin, { categories: ['click', 'cards'] });
|
|
1699
1668
|
* ```
|
|
1700
1669
|
* In templates, listen with `@usa:change="…"` and bind properties with
|
|
1701
|
-
* `.prop`: `<usa-
|
|
1670
|
+
* `.prop`: `<usa-switch :checked.prop="on" @usa:change="on = $event.detail.checked">`.
|
|
1702
1671
|
*/
|
|
1703
1672
|
|
|
1704
1673
|
/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */
|
package/dist/components/vue.js
CHANGED
|
@@ -1,33 +1,33 @@
|
|
|
1
1
|
import { defineComponents } from '../components.js';
|
|
2
2
|
import './reveal.js';
|
|
3
|
-
import '../chunks/base-
|
|
3
|
+
import '../chunks/base-DchG4q_S.js';
|
|
4
4
|
import './text.js';
|
|
5
|
-
import '../chunks/core-
|
|
5
|
+
import '../chunks/core-DVyTlo9Q.js';
|
|
6
6
|
import './tokens.js';
|
|
7
7
|
import './interaction.js';
|
|
8
8
|
import './feedback.js';
|
|
9
9
|
import './background.js';
|
|
10
|
-
import '../chunks/variants-
|
|
10
|
+
import '../chunks/variants-C_hv_s23.js';
|
|
11
11
|
import './transitions.js';
|
|
12
12
|
import './physics.js';
|
|
13
|
-
import '../chunks/spring-
|
|
13
|
+
import '../chunks/spring-BhoT09Qb.js';
|
|
14
14
|
import './cards.js';
|
|
15
15
|
import './click.js';
|
|
16
|
-
import '../chunks/fx-
|
|
16
|
+
import '../chunks/fx-DUMVKSvg.js';
|
|
17
17
|
import './ui.js';
|
|
18
18
|
import './page.js';
|
|
19
19
|
import './timeline.js';
|
|
20
20
|
import './gesture.js';
|
|
21
|
-
import '../chunks/core-
|
|
21
|
+
import '../chunks/core-D2vF8kZb.js';
|
|
22
22
|
import './svg.js';
|
|
23
23
|
import './webgl.js';
|
|
24
24
|
import './depth.js';
|
|
25
25
|
import './layout.js';
|
|
26
26
|
import './packs.js';
|
|
27
27
|
import './fx.js';
|
|
28
|
-
import '../chunks/registry-
|
|
28
|
+
import '../chunks/registry-D23neB4M.js';
|
|
29
29
|
import './a11y.js';
|
|
30
|
-
import '../chunks/index-tags-
|
|
30
|
+
import '../chunks/index-tags-C04JP8g4.js';
|
|
31
31
|
import './perf.js';
|
|
32
32
|
import './bridge.js';
|
|
33
33
|
|
|
@@ -45,7 +45,7 @@ import './bridge.js';
|
|
|
45
45
|
* app.use(UsaPlugin, { categories: ['click', 'cards'] });
|
|
46
46
|
* ```
|
|
47
47
|
* In templates, listen with `@usa:change="…"` and bind properties with
|
|
48
|
-
* `.prop`: `<usa-
|
|
48
|
+
* `.prop`: `<usa-switch :checked.prop="on" @usa:change="on = $event.detail.checked">`.
|
|
49
49
|
*/
|
|
50
50
|
/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */
|
|
51
51
|
const isUsaElement = (tag) => tag.startsWith('usa-');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vue.js","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * motionary/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'motionary/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'motionary/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-
|
|
1
|
+
{"version":3,"file":"vue.js","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * motionary/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'motionary/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'motionary/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-switch :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n /** Only register these categories (default: all). */\n categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n const co = (app.config.compilerOptions ||= {});\n const prev = co.isCustomElement;\n co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n defineComponents(options.categories);\n },\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAA,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;"}
|
package/dist/components/webgl.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { y as defineElement, q as now, k as clamp, l as caf, r as raf } from '../chunks/base-
|
|
1
|
+
import { y as defineElement, q as now, k as clamp, l as caf, r as raf } from '../chunks/base-DchG4q_S.js';
|
|
2
2
|
|
|
3
3
|
/** Minimal WebGL runner: one full-canvas quad, one fragment shader, optional image texture. */
|
|
4
4
|
const VERTEX = 'attribute vec2 p;varying vec2 v_uv;void main(){v_uv=p*.5+.5;gl_Position=vec4(p,0.,1.);}';
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { y as defineElement } from '../chunks/base-
|
|
2
|
-
import { d as springEasing } from '../chunks/spring-
|
|
3
|
-
import { A as ANIMATION_FORMAT, c as createPlayer } from '../chunks/player-
|
|
4
|
-
import '../chunks/registry-
|
|
5
|
-
import '../chunks/core-
|
|
1
|
+
import { y as defineElement } from '../chunks/base-DchG4q_S.js';
|
|
2
|
+
import { d as springEasing } from '../chunks/spring-BhoT09Qb.js';
|
|
3
|
+
import { A as ANIMATION_FORMAT, c as createPlayer } from '../chunks/player-C-TwEEy6.js';
|
|
4
|
+
import '../chunks/registry-D23neB4M.js';
|
|
5
|
+
import '../chunks/core-DVyTlo9Q.js';
|
|
6
6
|
import './tokens.js';
|
|
7
7
|
|
|
8
8
|
/** Helpers shared by the 6.x widgets (`motionary/components/widgets`). */
|
package/dist/components.cjs
CHANGED
|
@@ -25,7 +25,7 @@ var components_tokens = require('./components/tokens.cjs');
|
|
|
25
25
|
var components_a11y = require('./components/a11y.cjs');
|
|
26
26
|
var components_perf = require('./components/perf.cjs');
|
|
27
27
|
var components_bridge = require('./components/bridge.cjs');
|
|
28
|
-
var indexTags = require('./chunks/index-tags-
|
|
28
|
+
var indexTags = require('./chunks/index-tags-BTMwrfgV.cjs');
|
|
29
29
|
var registry = require('./chunks/registry-DehBVRDV.cjs');
|
|
30
30
|
var spring = require('./chunks/spring-Dgx187Vh.cjs');
|
|
31
31
|
var core = require('./chunks/core-BGAyaY6L.cjs');
|
|
@@ -117,7 +117,6 @@ exports.definePress = components_interaction.definePress;
|
|
|
117
117
|
exports.defineRipple = components_interaction.defineRipple;
|
|
118
118
|
exports.defineSpotlight = components_interaction.defineSpotlight;
|
|
119
119
|
exports.defineTilt = components_interaction.defineTilt;
|
|
120
|
-
exports.defineToggle = components_interaction.defineToggle;
|
|
121
120
|
exports.SPINNER_VARIANTS = components_feedback.SPINNER_VARIANTS;
|
|
122
121
|
exports.defineCheck = components_feedback.defineCheck;
|
|
123
122
|
exports.defineFeedbackComponents = components_feedback.defineFeedbackComponents;
|
|
@@ -178,7 +177,6 @@ exports.definePullRefresh = components_ui.definePullRefresh;
|
|
|
178
177
|
exports.defineRating = components_ui.defineRating;
|
|
179
178
|
exports.defineSlider = components_ui.defineSlider;
|
|
180
179
|
exports.defineTabs = components_ui.defineTabs;
|
|
181
|
-
exports.defineTooltip = components_ui.defineTooltip;
|
|
182
180
|
exports.defineUiComponents = components_ui.defineUiComponents;
|
|
183
181
|
exports.AMBIENT_EFFECTS = components_page.AMBIENT_EFFECTS;
|
|
184
182
|
exports.CURSOR_MODES = components_page.CURSOR_MODES;
|
package/dist/components.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.cjs","sources":["../src/components/index.ts"],"sourcesContent":["/**\n * motionary/components\n *\n * Framework-agnostic, dependency-free animated UI components built on\n * Custom Elements + CSS + the Web Animations API. They run in any browser\n * and in Windows desktop apps that render with a web view: Electron, Tauri\n * (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.\n *\n * ```js\n * import { defineComponents } from 'motionary/components';\n * defineComponents(); // registers every <usa-*> element\n * // or only what you use (tree-shakable):\n * import { defineTypewriter } from 'motionary/components/text';\n * ```\n *\n * Importing has no side effects and is SSR-safe; nothing is registered\n * until a `define*()` function runs in a browser.\n *\n * @license MIT\n */\nimport { defineRevealComponents } from './reveal/index';\nimport { defineTextComponents } from './text/index';\nimport { defineInteractionComponents } from './interaction/index';\nimport { defineFeedbackComponents } from './feedback/index';\nimport { defineBackgroundComponents } from './background/index';\nimport { defineTransitionComponents } from './transitions/index';\nimport { definePhysicsComponents } from './physics/index';\nimport { defineCardComponents } from './cards/index';\nimport { defineClickComponents } from './click/index';\nimport { defineUiComponents } from './ui/index';\nimport { definePageComponents } from './page/index';\nimport { defineTimelineComponents } from './timeline/index';\nimport { defineGestureComponents } from './gesture/index';\nimport { defineSvgComponents } from './svg/index';\nimport { defineWebglComponents } from './webgl/index';\nimport { defineDepthComponents } from './depth/index';\nimport { defineLayoutComponents } from './layout/index';\nimport { definePacksComponents } from './packs/index';\nimport { defineFxComponents } from './fx/index';\nimport { adoptVariants } from './ui/variants';\nimport { canDefine } from './base';\nexport { configureComponents, prefersReducedMotion, getMotionIntensity, motionScale, animateWithMotion, withoutDeprecations, MOTION_SCALE } from './base';\nexport type { ComponentsConfig, UsaElement, MotionIntensity, MotionSensitivity } from './base';\n\nexport * from './reveal/index';\nexport * from './text/index';\nexport * from './interaction/index';\nexport * from './feedback/index';\nexport * from './background/index';\nexport * from './transitions/index';\nexport * from './physics/index';\nexport * from './cards/index';\nexport * from './click/index';\nexport * from './ui/index';\nexport * from './page/index';\nexport * from './timeline/index';\nexport * from './gesture/index';\nexport * from './svg/index';\nexport * from './webgl/index';\nexport * from './depth/index';\nexport * from './layout/index';\nexport * from './packs/index';\nexport * from './tokens/index';\nexport * from './a11y/index';\nexport * from './perf/index';\nexport * from './bridge/index';\nexport * from './fx/index';\n\nexport { COMPONENT_CATEGORIES } from './index-tags';\nexport type { ComponentCategory } from './index-tags';\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst BY_CATEGORY: Record<ComponentCategory, () => void> = {\n reveal: defineRevealComponents,\n text: defineTextComponents,\n interaction: defineInteractionComponents,\n feedback: defineFeedbackComponents,\n background: defineBackgroundComponents,\n transitions: defineTransitionComponents,\n physics: definePhysicsComponents,\n cards: defineCardComponents,\n click: defineClickComponents,\n ui: defineUiComponents,\n page: definePageComponents,\n timeline: defineTimelineComponents,\n gesture: defineGestureComponents,\n svg: defineSvgComponents,\n webgl: defineWebglComponents,\n depth: defineDepthComponents,\n layout: defineLayoutComponents,\n packs: definePacksComponents,\n fx: defineFxComponents,\n};\n\n/**\n * Register every `<usa-*>` component (or only the given categories).\n * Safe to call more than once and on the server (no-op without DOM).\n */\nexport function defineComponents(categories?: ComponentCategory[]): void {\n if (canDefine()) adoptVariants();\n (categories || (Object.keys(BY_CATEGORY) as ComponentCategory[])).forEach((c) => BY_CATEGORY[c]?.());\n}\n"],"names":["defineRevealComponents","defineTextComponents","defineInteractionComponents","defineFeedbackComponents","defineBackgroundComponents","defineTransitionComponents","definePhysicsComponents","defineCardComponents","defineClickComponents","defineUiComponents","definePageComponents","defineTimelineComponents","defineGestureComponents","defineSvgComponents","defineWebglComponents","defineDepthComponents","defineLayoutComponents","definePacksComponents","defineFxComponents","canDefine","adoptVariants"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AAqDH,MAAM,WAAW,GAA0C;AACzD,IAAA,MAAM,EAAEA,wCAAsB;AAC9B,IAAA,IAAI,EAAEC,oCAAoB;AAC1B,IAAA,WAAW,EAAEC,kDAA2B;AACxC,IAAA,QAAQ,EAAEC,4CAAwB;AAClC,IAAA,UAAU,EAAEC,gDAA0B;AACtC,IAAA,WAAW,EAAEC,iDAA0B;AACvC,IAAA,OAAO,EAAEC,0CAAuB;AAChC,IAAA,KAAK,EAAEC,qCAAoB;AAC3B,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,EAAE,EAAEC,gCAAkB;AACtB,IAAA,IAAI,EAAEC,oCAAoB;AAC1B,IAAA,QAAQ,EAAEC,4CAAwB;AAClC,IAAA,OAAO,EAAEC,0CAAuB;AAChC,IAAA,GAAG,EAAEC,kCAAmB;AACxB,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,MAAM,EAAEC,wCAAsB;AAC9B,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,EAAE,EAAEC,gCAAkB;CACvB;AAED;;;AAGG;AACG,SAAU,gBAAgB,CAAC,UAAgC,EAAA;AAC/D,IAAA,IAAIC,cAAS,EAAE;AAAE,QAAAC,sBAAa,EAAE;IAChC,CAAC,UAAU,IAAK,MAAM,CAAC,IAAI,CAAC,WAAW,CAAyB,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;AACtG
|
|
1
|
+
{"version":3,"file":"components.cjs","sources":["../src/components/index.ts"],"sourcesContent":["/**\n * motionary/components\n *\n * Framework-agnostic, dependency-free animated UI components built on\n * Custom Elements + CSS + the Web Animations API. They run in any browser\n * and in Windows desktop apps that render with a web view: Electron, Tauri\n * (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.\n *\n * ```js\n * import { defineComponents } from 'motionary/components';\n * defineComponents(); // registers every <usa-*> element\n * // or only what you use (tree-shakable):\n * import { defineTypewriter } from 'motionary/components/text';\n * ```\n *\n * Importing has no side effects and is SSR-safe; nothing is registered\n * until a `define*()` function runs in a browser.\n *\n * @license MIT\n */\nimport { defineRevealComponents } from './reveal/index';\nimport { defineTextComponents } from './text/index';\nimport { defineInteractionComponents } from './interaction/index';\nimport { defineFeedbackComponents } from './feedback/index';\nimport { defineBackgroundComponents } from './background/index';\nimport { defineTransitionComponents } from './transitions/index';\nimport { definePhysicsComponents } from './physics/index';\nimport { defineCardComponents } from './cards/index';\nimport { defineClickComponents } from './click/index';\nimport { defineUiComponents } from './ui/index';\nimport { definePageComponents } from './page/index';\nimport { defineTimelineComponents } from './timeline/index';\nimport { defineGestureComponents } from './gesture/index';\nimport { defineSvgComponents } from './svg/index';\nimport { defineWebglComponents } from './webgl/index';\nimport { defineDepthComponents } from './depth/index';\nimport { defineLayoutComponents } from './layout/index';\nimport { definePacksComponents } from './packs/index';\nimport { defineFxComponents } from './fx/index';\nimport { adoptVariants } from './ui/variants';\nimport { canDefine } from './base';\nexport { configureComponents, prefersReducedMotion, getMotionIntensity, motionScale, animateWithMotion, withoutDeprecations, MOTION_SCALE } from './base';\nexport type { ComponentsConfig, UsaElement, MotionIntensity, MotionSensitivity } from './base';\n\nexport * from './reveal/index';\nexport * from './text/index';\nexport * from './interaction/index';\nexport * from './feedback/index';\nexport * from './background/index';\nexport * from './transitions/index';\nexport * from './physics/index';\nexport * from './cards/index';\nexport * from './click/index';\nexport * from './ui/index';\nexport * from './page/index';\nexport * from './timeline/index';\nexport * from './gesture/index';\nexport * from './svg/index';\nexport * from './webgl/index';\nexport * from './depth/index';\nexport * from './layout/index';\nexport * from './packs/index';\nexport * from './tokens/index';\nexport * from './a11y/index';\nexport * from './perf/index';\nexport * from './bridge/index';\nexport * from './fx/index';\n\nexport { COMPONENT_CATEGORIES } from './index-tags';\nexport type { ComponentCategory } from './index-tags';\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst BY_CATEGORY: Record<ComponentCategory, () => void> = {\n reveal: defineRevealComponents,\n text: defineTextComponents,\n interaction: defineInteractionComponents,\n feedback: defineFeedbackComponents,\n background: defineBackgroundComponents,\n transitions: defineTransitionComponents,\n physics: definePhysicsComponents,\n cards: defineCardComponents,\n click: defineClickComponents,\n ui: defineUiComponents,\n page: definePageComponents,\n timeline: defineTimelineComponents,\n gesture: defineGestureComponents,\n svg: defineSvgComponents,\n webgl: defineWebglComponents,\n depth: defineDepthComponents,\n layout: defineLayoutComponents,\n packs: definePacksComponents,\n fx: defineFxComponents,\n};\n\n/**\n * Register every `<usa-*>` component (or only the given categories).\n * Safe to call more than once and on the server (no-op without DOM).\n */\nexport function defineComponents(categories?: ComponentCategory[]): void {\n if (canDefine()) adoptVariants();\n (categories || (Object.keys(BY_CATEGORY) as ComponentCategory[])).forEach((c) => BY_CATEGORY[c]?.());\n}\n"],"names":["defineRevealComponents","defineTextComponents","defineInteractionComponents","defineFeedbackComponents","defineBackgroundComponents","defineTransitionComponents","definePhysicsComponents","defineCardComponents","defineClickComponents","defineUiComponents","definePageComponents","defineTimelineComponents","defineGestureComponents","defineSvgComponents","defineWebglComponents","defineDepthComponents","defineLayoutComponents","definePacksComponents","defineFxComponents","canDefine","adoptVariants"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AAqDH,MAAM,WAAW,GAA0C;AACzD,IAAA,MAAM,EAAEA,wCAAsB;AAC9B,IAAA,IAAI,EAAEC,oCAAoB;AAC1B,IAAA,WAAW,EAAEC,kDAA2B;AACxC,IAAA,QAAQ,EAAEC,4CAAwB;AAClC,IAAA,UAAU,EAAEC,gDAA0B;AACtC,IAAA,WAAW,EAAEC,iDAA0B;AACvC,IAAA,OAAO,EAAEC,0CAAuB;AAChC,IAAA,KAAK,EAAEC,qCAAoB;AAC3B,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,EAAE,EAAEC,gCAAkB;AACtB,IAAA,IAAI,EAAEC,oCAAoB;AAC1B,IAAA,QAAQ,EAAEC,4CAAwB;AAClC,IAAA,OAAO,EAAEC,0CAAuB;AAChC,IAAA,GAAG,EAAEC,kCAAmB;AACxB,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,MAAM,EAAEC,wCAAsB;AAC9B,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,EAAE,EAAEC,gCAAkB;CACvB;AAED;;;AAGG;AACG,SAAU,gBAAgB,CAAC,UAAgC,EAAA;AAC/D,IAAA,IAAIC,cAAS,EAAE;AAAE,QAAAC,sBAAa,EAAE;IAChC,CAAC,UAAU,IAAK,MAAM,CAAC,IAAI,CAAC,WAAW,CAAyB,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;AACtG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/components.css
CHANGED
|
@@ -14,7 +14,6 @@ usa-press{display:inline-block;touch-action:manipulation;-webkit-tap-highlight-c
|
|
|
14
14
|
usa-ripple{position:relative;display:inline-block;overflow:hidden;isolation:isolate;border-radius:inherit;-webkit-tap-highlight-color:transparent}usa-ripple[block]{display:block}usa-ripple .usa-ripple-wave{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);z-index:-1;will-change:transform,opacity}
|
|
15
15
|
usa-spotlight{display:block;--usa-spot-size:160px;--usa-spot-color:rgb(255 255 255 / 0.55);--usa-spot-border:1px}usa-spotlight .usa-spotlight-item{position:relative;isolation:isolate}usa-spotlight .usa-spotlight-item::before,usa-spotlight .usa-spotlight-item::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 0.25s ease}usa-spotlight .usa-spotlight-item::before{padding:var(--usa-spot-border);background:radial-gradient(var(--usa-spot-size) circle at var(--usa-spot-x,-999px) var(--usa-spot-y,-999px),var(--usa-spot-color),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}usa-spotlight .usa-spotlight-item::after{z-index:-1;background:radial-gradient(calc(var(--usa-spot-size) * 0.9) circle at var(--usa-spot-x,-999px) var(--usa-spot-y,-999px),color-mix(in srgb,var(--usa-spot-color) 30%,transparent),transparent 70%)}usa-spotlight[data-lit] .usa-spotlight-item::before{opacity:1}usa-spotlight[data-lit] .usa-spotlight-item:hover::after{opacity:1}usa-spotlight[no-fill] .usa-spotlight-item::after{display:none}
|
|
16
16
|
usa-tilt{display:block;position:relative;transform-style:preserve-3d;transition:transform 0.5s cubic-bezier(0.22,1,0.36,1);will-change:transform}usa-tilt[data-active]{transition-duration:0.12s}usa-tilt .usa-tilt-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 0.3s ease;background:radial-gradient(circle at var(--usa-glare-x,50%) var(--usa-glare-y,50%),rgb(255 255 255 / 0.35),transparent 55%);mix-blend-mode:soft-light}usa-tilt[data-active] .usa-tilt-glare{opacity:1}
|
|
17
|
-
usa-toggle{--usa-toggle-w:40px;--usa-toggle-h:20px;--usa-toggle-on:var(--usa-accent,#7c5cff);--usa-toggle-off:transparent;--usa-toggle-line:currentColor;display:inline-flex;align-items:center;gap:0.6em;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;vertical-align:middle}usa-toggle[disabled]{cursor:not-allowed;opacity:0.45}usa-toggle .usa-toggle-track{position:relative;flex:none;width:var(--usa-toggle-w);height:var(--usa-toggle-h);border-radius:999px;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--usa-toggle-line) 60%,transparent);background:var(--usa-toggle-off);transition:background-color 0.2s ease,border-color 0.2s ease}usa-toggle .usa-toggle-knob{position:absolute;top:50%;left:3px;width:calc(var(--usa-toggle-h) - 8px);height:calc(var(--usa-toggle-h) - 8px);margin-top:calc((var(--usa-toggle-h) - 8px) / -2);border-radius:999px;background:color-mix(in srgb,var(--usa-toggle-line) 75%,transparent);transform-origin:left center;transition:transform 0.28s cubic-bezier(0.34,1.4,0.64,1),background-color 0.2s ease}usa-toggle:hover .usa-toggle-knob{transform:scale(1.15)}usa-toggle[data-pressed] .usa-toggle-knob{transform:scaleX(1.45)}usa-toggle[checked] .usa-toggle-track{background:var(--usa-toggle-on);border-color:var(--usa-toggle-on)}usa-toggle[checked] .usa-toggle-knob{background:#fff;transform:translateX(calc(var(--usa-toggle-w) - var(--usa-toggle-h)));transform-origin:right center}usa-toggle[checked]:hover .usa-toggle-knob{transform:translateX(calc(var(--usa-toggle-w) - var(--usa-toggle-h))) scale(1.15)}usa-toggle[checked][data-pressed] .usa-toggle-knob{transform:translateX(calc(var(--usa-toggle-w) - var(--usa-toggle-h) - 4px)) scaleX(1.45)}usa-toggle:focus-visible{outline:none}usa-toggle:focus-visible .usa-toggle-track{outline:2px solid var(--usa-toggle-on);outline-offset:2px}
|
|
18
17
|
usa-check{--usa-check-size:56px;--usa-check-color:#0f9d58;display:inline-block;width:var(--usa-check-size);height:var(--usa-check-size);vertical-align:middle}usa-check[data-kind="error"]{--usa-check-color:#d13438}usa-check[data-kind="warning"]{--usa-check-color:#c19c00}usa-check svg{width:100%;height:100%;overflow:visible}usa-check circle,usa-check path{fill:none;stroke:var(--usa-check-color);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1}usa-check[data-state="idle"] circle,usa-check[data-state="idle"] path{stroke-dashoffset:1}usa-check[data-state="done"] circle,usa-check[data-state="done"] path{stroke-dashoffset:0}
|
|
19
18
|
usa-progress{--usa-progress-color:var(--usa-accent,#7c5cff);--usa-progress-track:color-mix(in srgb,currentColor 14%,transparent);position:relative;display:block;height:var(--usa-progress-height,4px);border-radius:999px;overflow:hidden;background:var(--usa-progress-track);contain:paint}usa-progress .usa-progress-bar{position:absolute;inset:0;border-radius:inherit;background:var(--usa-progress-color);transform:scaleX(0);transform-origin:0 50%;transition:transform 0.45s cubic-bezier(0.22,1,0.36,1)}usa-progress .usa-progress-bar2{display:none}usa-progress[data-indeterminate] .usa-progress-bar{right:auto;width:40%;transform:translateX(-100%);transition:none;animation:usa-indet 2s cubic-bezier(0.4,0,0.6,1) infinite}usa-progress[data-indeterminate] .usa-progress-bar2{display:block;width:60%;animation:usa-indet2 2s cubic-bezier(0.4,0,0.6,1) 1s infinite}usa-progress[state="paused"]{--usa-progress-color:#c19c00}usa-progress[state="error"]{--usa-progress-color:#d13438}usa-progress[state="paused"] .usa-progress-bar,usa-progress[state="error"] .usa-progress-bar{animation-play-state:paused}@keyframes usa-indet{from{transform:translateX(-100%)}to{transform:translateX(250%)}}@keyframes usa-indet2{from{transform:translateX(-100%)}to{transform:translateX(167%)}}@media (prefers-reduced-motion:reduce){usa-progress .usa-progress-bar{transition:none}usa-progress[data-indeterminate] .usa-progress-bar{width:100%;transform:none;animation:usa-calm-bar 2.4s ease-in-out infinite}usa-progress[data-indeterminate] .usa-progress-bar2{display:none}}@keyframes usa-calm-bar{0%,100%{opacity:1}50%{opacity:0.4}}
|
|
20
19
|
usa-skeleton{display:block;--usa-skeleton-base:color-mix(in srgb,currentColor 10%,transparent);--usa-skeleton-shine:color-mix(in srgb,currentColor 9%,transparent);--usa-skeleton-radius:8px}usa-skeleton[loading]>:not(.usa-skeleton-ph){display:none !important}usa-skeleton .usa-skeleton-ph{display:flex;gap:14px;align-items:flex-start}usa-skeleton .usa-bone-lines{flex:1;display:grid;gap:10px;min-width:0}usa-skeleton .usa-bone{position:relative;display:block;overflow:hidden;height:0.9em;border-radius:var(--usa-skeleton-radius);background:var(--usa-skeleton-base)}usa-skeleton .usa-bone-last{width:62%}usa-skeleton .usa-bone-block{height:120px}usa-skeleton .usa-bone-circle{border-radius:50%;flex:none}usa-skeleton .usa-bone-avatar{width:44px;height:44px}usa-skeleton .usa-bone::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--usa-skeleton-shine),transparent);animation:usa-skeleton 1.5s ease-in-out infinite}@keyframes usa-skeleton{to{transform:translateX(100%)}}@media (prefers-reduced-motion:reduce){usa-skeleton .usa-bone::after{animation:none}}
|
|
@@ -54,7 +53,6 @@ usa-rating{--usa-rating-on:#f5b301;display:inline-flex;gap:2px;font-size:1.5em;l
|
|
|
54
53
|
usa-drawer,usa-bottom-sheet{position:fixed;z-index:1001;box-sizing:border-box;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;will-change:transform;outline:none}usa-drawer{top:0;bottom:0;left:0;width:min(86vw,360px);border-radius:0 var(--usa-radius,14px) var(--usa-radius,14px) 0;padding:20px}usa-drawer[side="right"]{left:auto;right:0;border-radius:var(--usa-radius,14px) 0 0 var(--usa-radius,14px)}usa-drawer[side="top"],usa-drawer[side="bottom"]{left:0;right:0;width:auto;bottom:auto;max-height:80vh;border-radius:0 0 var(--usa-radius,14px) var(--usa-radius,14px);touch-action:pan-x}usa-drawer[side="bottom"]{top:auto;bottom:0;border-radius:var(--usa-radius,14px) var(--usa-radius,14px) 0 0}usa-bottom-sheet{left:0;right:0;bottom:0;margin:0 auto;max-width:640px;border-radius:22px 22px 0 0;padding:8px 20px 24px;touch-action:none}usa-bottom-sheet .usa-sheet-handle{width:40px;height:5px;border-radius:3px;margin:4px auto 14px;background:color-mix(in srgb,currentColor 35%,transparent);cursor:grab}usa-drawer[hidden],usa-bottom-sheet[hidden]{display:none}.usa-panel-backdrop{position:fixed;inset:0;z-index:1000;background:rgb(0 0 0 / 0.45)}
|
|
55
54
|
usa-slider{--usa-slider:0;position:relative;display:block;height:28px;min-width:120px;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent}usa-slider .usa-slider-track{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:color-mix(in srgb,currentColor 16%,transparent);overflow:hidden}usa-slider .usa-slider-fill{position:absolute;inset:0;background:var(--usa-accent,#7c5cff);transform-origin:0 50%;transform:scaleX(var(--usa-slider))}usa-slider .usa-slider-thumb{position:absolute;top:50%;left:calc(var(--usa-slider) * 100%);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgb(0 0 0 / 0.35),0 0 0 4px color-mix(in srgb,var(--usa-accent,#7c5cff) 0%,transparent);transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.2s ease}usa-slider:hover .usa-slider-thumb,usa-slider:focus-visible .usa-slider-thumb{box-shadow:0 1px 4px rgb(0 0 0 / 0.35),0 0 0 6px color-mix(in srgb,var(--usa-accent,#7c5cff) 25%,transparent)}usa-slider[data-dragging] .usa-slider-thumb{transform:scale(1.25)}usa-slider .usa-slider-bubble{position:absolute;bottom:150%;left:50%;transform:translateX(-50%) scale(0.6);opacity:0;padding:2px 8px;border-radius:8px;font:600 12px/1.6 system-ui,sans-serif;color:var(--usa-accent-text,#fff);background:var(--usa-accent,#7c5cff);white-space:nowrap;pointer-events:none;transition:opacity 0.15s ease,transform 0.25s cubic-bezier(0.34,1.56,0.64,1)}usa-slider[bubble][data-dragging] .usa-slider-bubble,usa-slider[bubble]:focus-visible .usa-slider-bubble{opacity:1;transform:translateX(-50%) scale(1)}usa-slider:focus-visible{outline:none}usa-slider[disabled]{opacity:0.45;cursor:not-allowed}@media (prefers-reduced-motion:reduce){usa-slider .usa-slider-thumb,usa-slider .usa-slider-bubble{transition:none}}
|
|
56
55
|
usa-tabs{display:block;font-family:var(--usa-font)}usa-tabs .usa-tabs-list{position:relative;display:flex;gap:4px;border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}usa-tabs [role="tab"]{position:relative;z-index:1;padding:10px 14px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;opacity:0.7;transition:opacity 0.2s ease,color 0.2s ease;border-radius:calc(var(--usa-radius,14px) / 2)}usa-tabs [role="tab"][aria-selected="true"]{opacity:1;color:var(--usa-accent,#7c5cff)}usa-tabs [role="tab"]:focus-visible{outline:2px solid var(--usa-accent,#7c5cff);outline-offset:-2px}usa-tabs .usa-tabs-indicator{position:absolute;left:0;bottom:-1px;height:3px;width:0;border-radius:3px;background:var(--usa-accent,#7c5cff);pointer-events:none}usa-tabs[indicator="pill"] .usa-tabs-list{border-bottom:0;padding:4px;border-radius:999px;background:color-mix(in srgb,currentColor 8%,transparent)}usa-tabs[indicator="pill"] .usa-tabs-indicator{top:4px;bottom:4px;height:auto;border-radius:999px;opacity:0.18}usa-tabs [role="tabpanel"]{padding:14px 2px}usa-tabs [role="tabpanel"]:focus-visible{outline:2px solid var(--usa-accent,#7c5cff);outline-offset:2px;border-radius:6px}
|
|
57
|
-
usa-tooltip{display:inline-block}usa-tooltip .usa-tooltip-bubble{position:fixed;z-index:2000;max-width:260px;padding:6px 10px;font-size:0.85rem;line-height:1.4;pointer-events:none;--usa-radius:8px;white-space:normal}usa-tooltip .usa-tooltip-bubble[hidden]{display:none}
|
|
58
56
|
:root{--usa-accent:#7c5cff;--usa-accent-text:#fff;--usa-surface:#1b1e27;--usa-text:inherit;--usa-radius:14px;--usa-border:1px solid rgb(127 127 127 / 0.25);--usa-shadow:0 10px 30px -12px rgb(0 0 0 / 0.45);--usa-blur:0px;--usa-font:inherit}:where([variant="minimal"],[data-usa-variant="minimal"]){--usa-accent:currentColor;--usa-accent-text:Canvas;--usa-surface:transparent;--usa-radius:6px;--usa-border:1px solid color-mix(in srgb,currentColor 22%,transparent);--usa-shadow:none;--usa-blur:0px}:where([variant="neon"],[data-usa-variant="neon"]){--usa-accent:#00f0ff;--usa-accent-text:#04121a;--usa-surface:#0a0b14;--usa-text:#e6fbff;--usa-radius:10px;--usa-border:1px solid #00f0ff;--usa-shadow:0 0 6px #00f0ff,0 0 22px rgb(0 240 255 / 0.45);--usa-blur:0px}:where([variant="glass"],[data-usa-variant="glass"]){--usa-accent:#a78bfa;--usa-accent-text:#fff;--usa-surface:rgb(255 255 255 / 0.12);--usa-radius:18px;--usa-border:1px solid rgb(255 255 255 / 0.28);--usa-shadow:0 12px 40px -12px rgb(0 0 0 / 0.35);--usa-blur:16px}:where([variant="brutalist"],[data-usa-variant="brutalist"]){--usa-accent:#ff3d00;--usa-accent-text:#000;--usa-surface:#fff;--usa-text:#000;--usa-radius:0px;--usa-border:3px solid #000;--usa-shadow:5px 5px 0 #000;--usa-blur:0px;--usa-font:ui-monospace,"SFMono-Regular",Menlo,monospace}:where([variant="fluent"],[data-usa-variant="fluent"]){--usa-accent:#0067c0;--usa-accent-text:#fff;--usa-surface:rgb(249 249 249 / 0.82);--usa-text:#1a1a1a;--usa-radius:8px;--usa-border:1px solid rgb(0 0 0 / 0.08);--usa-shadow:0 2px 4px rgb(0 0 0 / 0.14),0 0 2px rgb(0 0 0 / 0.12);--usa-blur:30px;--usa-font:"Segoe UI Variable","Segoe UI",system-ui,sans-serif}:where([variant="material"],[data-usa-variant="material"]){--usa-accent:#6750a4;--usa-accent-text:#fff;--usa-surface:#fffbfe;--usa-text:#1c1b1f;--usa-radius:20px;--usa-border:0 solid transparent;--usa-shadow:0 1px 3px rgb(0 0 0 / 0.3),0 4px 8px 3px rgb(0 0 0 / 0.15);--usa-blur:0px;--usa-font:Roboto,system-ui,sans-serif}@media (prefers-color-scheme:dark){:where([variant="fluent"],[data-usa-variant="fluent"]){--usa-accent:#4cc2ff;--usa-accent-text:#000;--usa-surface:rgb(44 44 44 / 0.8);--usa-text:#fff;--usa-border:1px solid rgb(255 255 255 / 0.08)}:where([variant="material"],[data-usa-variant="material"]){--usa-accent:#d0bcff;--usa-accent-text:#381e72;--usa-surface:#1c1b1f;--usa-text:#e6e1e5}}.usa-surface{background:var(--usa-surface);color:var(--usa-text);border:var(--usa-border);border-radius:var(--usa-radius);box-shadow:var(--usa-shadow);font-family:var(--usa-font);-webkit-backdrop-filter:blur(var(--usa-blur));backdrop-filter:blur(var(--usa-blur))}@media (prefers-reduced-transparency:reduce){.usa-surface{-webkit-backdrop-filter:none;backdrop-filter:none}}
|
|
59
57
|
usa-ambient{--usa-ambient-opacity:0.6;--usa-ambient-p:0;position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--usa-ambient-opacity);contain:strict}usa-ambient[layer="front"]{z-index:2147483000}usa-ambient canvas{display:block}usa-ambient[effect="noise"]{opacity:calc(var(--usa-ambient-opacity) * 0.25);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:usa-ambient-grain 0.6s steps(4) infinite;mix-blend-mode:overlay}@keyframes usa-ambient-grain{25%{background-position:-40px 20px}50%{background-position:30px -50px}75%{background-position:-20px -30px}}usa-ambient[effect="gradient"]{background:linear-gradient(135deg,hsl(calc(250 + var(--usa-ambient-p) * 140) 85% 60%),hsl(calc(190 + var(--usa-ambient-p) * 160) 85% 55%) 50%,hsl(calc(320 + var(--usa-ambient-p) * 90) 85% 62%))}@media (prefers-reduced-motion:reduce){usa-ambient[effect="noise"]{animation:none}}
|
|
60
58
|
usa-auto-skeleton{display:block;--usa-skel-base:color-mix(in srgb,currentColor 10%,transparent);--usa-skel-shine:color-mix(in srgb,currentColor 18%,transparent)}usa-auto-skeleton[loading] :is(h1,h2,h3,h4,h5,h6,p,li,span,a,button,label,img,svg,video,input,select,textarea,td,th,figcaption,blockquote,[data-skeleton]):not([data-no-skeleton]):not(:has(:is(h1,h2,h3,h4,h5,h6,p,li,img,button,input))){color:transparent !important;border-color:transparent !important;box-shadow:none !important;user-select:none;pointer-events:none;background:linear-gradient(90deg,var(--usa-skel-base) 25%,var(--usa-skel-shine) 50%,var(--usa-skel-base) 75%) 0 0 / 300% 100% !important;border-radius:6px;animation:usa-skel-shimmer 1.4s ease-in-out infinite}usa-auto-skeleton[loading] :is(img,svg,video){opacity:0}usa-auto-skeleton[loading] :is(img,svg,video):not([data-no-skeleton]){opacity:1;object-position:-9999px}@keyframes usa-skel-shimmer{from{background-position:100% 0}to{background-position:0 0}}@media (prefers-reduced-motion:reduce){usa-auto-skeleton[loading] *{animation:none !important}}
|
package/dist/components.d.cts
CHANGED
|
@@ -613,27 +613,10 @@ interface UsaPressElement extends UsaElement {
|
|
|
613
613
|
}
|
|
614
614
|
declare function definePress(tag?: string): CustomElementConstructor | undefined;
|
|
615
615
|
|
|
616
|
-
/**
|
|
617
|
-
* `<usa-toggle>` — an accessible switch whose knob stretches while pressed
|
|
618
|
-
* and glides across (the Windows 11 / iOS toggle). `role="switch"`,
|
|
619
|
-
* keyboard (Space / Enter), and form-associated where `ElementInternals`
|
|
620
|
-
* exists (submits `value`, default `"on"`, under `name` when checked).
|
|
621
|
-
*
|
|
622
|
-
* Attributes: `checked`, `disabled`, `name`, `value`, `label`
|
|
623
|
-
* (accessible name if there is no `aria-label` / `<label>`). Events:
|
|
624
|
-
* `change` and `usa:change` (`detail.checked`). Reduced motion: no glide.
|
|
625
|
-
*/
|
|
626
|
-
interface UsaToggleElement extends UsaElement {
|
|
627
|
-
checked: boolean;
|
|
628
|
-
disabled: boolean;
|
|
629
|
-
toggle(force?: boolean): void;
|
|
630
|
-
}
|
|
631
|
-
declare function defineToggle(tag?: string): CustomElementConstructor | undefined;
|
|
632
|
-
|
|
633
616
|
/**
|
|
634
617
|
* motionary/components/interaction — micro-interactions.
|
|
635
618
|
* `<usa-ripple>`, `<usa-magnetic>`, `<usa-tilt>`, `<usa-spotlight>`,
|
|
636
|
-
* `<usa-press
|
|
619
|
+
* `<usa-press>`.
|
|
637
620
|
*/
|
|
638
621
|
|
|
639
622
|
/** Register every component of this category under its default tag. */
|
|
@@ -645,7 +628,6 @@ declare global {
|
|
|
645
628
|
'usa-tilt': UsaTiltElement;
|
|
646
629
|
'usa-spotlight': UsaSpotlightElement;
|
|
647
630
|
'usa-press': UsaPressElement;
|
|
648
|
-
'usa-toggle': UsaToggleElement;
|
|
649
631
|
}
|
|
650
632
|
}
|
|
651
633
|
|
|
@@ -1646,20 +1628,6 @@ interface UsaRatingElement extends UsaElement {
|
|
|
1646
1628
|
}
|
|
1647
1629
|
declare function defineRating(tag?: string): CustomElementConstructor | undefined;
|
|
1648
1630
|
|
|
1649
|
-
/**
|
|
1650
|
-
* `<usa-tooltip text="…">` — a tooltip for the element it wraps, shown on
|
|
1651
|
-
* hover (after `delay` ms, 300) and on keyboard focus, hidden on Esc / blur.
|
|
1652
|
-
* It springs in from its placement side and flips to stay on screen; the
|
|
1653
|
-
* trigger gets `aria-describedby`.
|
|
1654
|
-
* Attributes: `text`, `placement` (`top` default, `bottom`, `left`, `right`),
|
|
1655
|
-
* `delay`, `variant`. Reduced motion: fades only.
|
|
1656
|
-
*/
|
|
1657
|
-
interface UsaTooltipElement extends UsaElement {
|
|
1658
|
-
show(): void;
|
|
1659
|
-
hide(): void;
|
|
1660
|
-
}
|
|
1661
|
-
declare function defineTooltip(tag?: string): CustomElementConstructor | undefined;
|
|
1662
|
-
|
|
1663
1631
|
/**
|
|
1664
1632
|
* `<usa-popover>` — a click-to-open popover: the first element child is the
|
|
1665
1633
|
* trigger, `[data-popover]` is the content. Springs open from the trigger,
|
|
@@ -1723,7 +1691,7 @@ type Placement = 'top' | 'bottom' | 'left' | 'right';
|
|
|
1723
1691
|
* motionary/components/ui — animated UI components + style variants (v2.6).
|
|
1724
1692
|
* `<usa-tabs>`, `<usa-drawer>`, `<usa-bottom-sheet>`, `<usa-pull-refresh>`,
|
|
1725
1693
|
* `<usa-fab>`, `<usa-navbar>`, `<usa-slider>`, `<usa-rating>`,
|
|
1726
|
-
* `<usa-
|
|
1694
|
+
* `<usa-popover>`, `<usa-badge>`, `<usa-avatar-stack>`,
|
|
1727
1695
|
* and `variant="minimal | neon | glass | brutalist | fluent | material"`
|
|
1728
1696
|
* design tokens (`setVariant()`, `VARIANTS`).
|
|
1729
1697
|
*/
|
|
@@ -1740,7 +1708,6 @@ declare global {
|
|
|
1740
1708
|
'usa-navbar': UsaNavbarElement;
|
|
1741
1709
|
'usa-slider': UsaSliderElement;
|
|
1742
1710
|
'usa-rating': UsaRatingElement;
|
|
1743
|
-
'usa-tooltip': UsaTooltipElement;
|
|
1744
1711
|
'usa-popover': UsaPopoverElement;
|
|
1745
1712
|
'usa-badge': UsaBadgeElement;
|
|
1746
1713
|
'usa-avatar-stack': UsaAvatarStackElement;
|
|
@@ -2659,14 +2626,14 @@ declare function resolveEasingToken(v: string | undefined, fallback: string): st
|
|
|
2659
2626
|
declare const COMPONENT_CATEGORIES: {
|
|
2660
2627
|
readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
|
|
2661
2628
|
readonly text: readonly ["usa-typewriter", "usa-split-text", "usa-scramble", "usa-counter", "usa-shimmer-text", "usa-text-rotate", "usa-wave-text", "usa-glitch", "usa-gradient-text", "usa-handwriting", "usa-scroll-highlight"];
|
|
2662
|
-
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press"
|
|
2629
|
+
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press"];
|
|
2663
2630
|
readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
|
|
2664
2631
|
readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
|
|
2665
2632
|
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
|
|
2666
2633
|
readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
|
|
2667
2634
|
readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
|
|
2668
2635
|
readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
|
|
2669
|
-
readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-
|
|
2636
|
+
readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-popover", "usa-badge", "usa-avatar-stack"];
|
|
2670
2637
|
readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
|
|
2671
2638
|
readonly timeline: readonly ["usa-timeline"];
|
|
2672
2639
|
readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
|
|
@@ -2993,5 +2960,5 @@ declare global {
|
|
|
2993
2960
|
*/
|
|
2994
2961
|
declare function defineComponents(categories?: ComponentCategory[]): void;
|
|
2995
2962
|
|
|
2996
|
-
export { ALL_TAGS, AMBIENT_EFFECTS, ANIM_ICONS, BRIDGE_PROTOCOL_VERSION, BUILTIN_EFFECTS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, EFFECT_KINDS, EFFECT_TRIGGERS, GL_FALLBACKS, JOINING_SCRIPT, LIVE_REGION_IDS, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, MOTION_SENSITIVITY, MOTION_SENSITIVITY_LEVELS, MOTION_TOKENS, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, PARTICLE_PRESETS, POST_EFFECTS, REVEAL_EFFECTS, SENSITIVITY_CSS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, STATIC_ALTERNATIVES, TIMELINE_PRESETS, VARIANTS, activeAnimations, adaptKeyframes, adoptVariants, animateWithMotion, animationBudget, announce, applyMotionTokens, applyNativeSettings, applyPack, auditMotionA11y, autoAnimate, autoDegrade, baselineReport, bindEffect, categoryOf, configureComponents, connectNativeShell, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineFx, defineFxComponents, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePostFx, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster,
|
|
2997
|
-
export type { A11yIssue, AmbientEffect, AutoAnimateOptions, AutoDegradeOptions, BaselineFeature, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DeepPartialTokens, DegradeState, DialogVariant, EffectContext, EffectDefinition, EffectKind, EffectTrigger, FlipOptions, FluentPresetOptions, GLGovernor, GLGovernorOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, MotionSensitivity, MotionSwitchLevel, MotionTokenGroup, MotionTokens, NativeHost, NativeSettings, NativeShellOptions, NativeTheme, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, ParticlePreset, PinchState, Placement, Politeness, PostEffect, PressState, RevealEffect, ScrubHandle, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SplitBy, SplitFrom, SplitResult, SplitTextOptions, SplitTimelineOptions, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringToken, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaFxElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement,
|
|
2963
|
+
export { ALL_TAGS, AMBIENT_EFFECTS, ANIM_ICONS, BRIDGE_PROTOCOL_VERSION, BUILTIN_EFFECTS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, EFFECT_KINDS, EFFECT_TRIGGERS, GL_FALLBACKS, JOINING_SCRIPT, LIVE_REGION_IDS, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, MOTION_SENSITIVITY, MOTION_SENSITIVITY_LEVELS, MOTION_TOKENS, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, PARTICLE_PRESETS, POST_EFFECTS, REVEAL_EFFECTS, SENSITIVITY_CSS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, STATIC_ALTERNATIVES, TIMELINE_PRESETS, VARIANTS, activeAnimations, adaptKeyframes, adoptVariants, animateWithMotion, animationBudget, announce, applyMotionTokens, applyNativeSettings, applyPack, auditMotionA11y, autoAnimate, autoDegrade, baselineReport, bindEffect, categoryOf, configureComponents, connectNativeShell, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineFx, defineFxComponents, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePostFx, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, defineWebglComponents, detectNativeHost, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getEffect, getMotionIntensity, getMotionLevel, getMotionSensitivity, getMotionTokens, glFallbackCss, glGovernor, glQuad, graphemes, haptic, hasEffect, importMotionTokens, interpolatePath, linearEasing, listEffects, liveRegion, loadCategoryStyles, loadedStyles, loadingBar, masonryLayout, mergeMotionTokens, morphPath, morphTo, motionAllowed, motionScale, motionToken, motionTokensToCss, motionTokensToJSON, motionTokensToVars, motionVar, onDemandStyles, onFrame, orientationToTilt, pageTransition, parseDuration, parseEasing, parseNativeSettings, pathsCompatible, pinchScale, playEffect, postFxShader, postToNative, prefersReducedMotion, projectInertia, readScrollProgress, registerBuiltinEffects, registerEffect, registerEffects, requestOrientationPermission, resolveDurationToken, resolveEasingToken, resolvePosition, resolveSpring, restoreMotionIntensity, restoreMotionSensitivity, revealKeyframes, rubberBand, schedulerStats, scrambleFrame, scrollToTarget, setAnimationBudget, setMotionIntensity, setMotionLevel, setMotionSensitivity, setVariant, sharedTransition, smoothScroll, snapTo, splitOrder, splitText, splitTimeline, words as splitWords, spring, springEasing, springEffectKeyframes, springSamples, staticAlternative, stepSpring, supportsLinearEasing, supportsNativeScrub, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition, warnBaseline, watchPowerSaver, withoutDeprecations };
|
|
2964
|
+
export type { A11yIssue, AmbientEffect, AutoAnimateOptions, AutoDegradeOptions, BaselineFeature, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, CursorMode, DeepPartialTokens, DegradeState, DialogVariant, EffectContext, EffectDefinition, EffectKind, EffectTrigger, FlipOptions, FluentPresetOptions, GLGovernor, GLGovernorOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, MotionSensitivity, MotionSwitchLevel, MotionTokenGroup, MotionTokens, NativeHost, NativeSettings, NativeShellOptions, NativeTheme, PackContext, PackName, PageEffect, PageTransitionOptions, PanState, ParticlePreset, PinchState, Placement, Politeness, PostEffect, PressState, RevealEffect, ScrubHandle, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SplitBy, SplitFrom, SplitResult, SplitTextOptions, SplitTimelineOptions, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringToken, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFullpageElement, UsaFxElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaPackElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };
|