motionary 7.0.0 → 7.1.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 +14 -0
- package/dist/chunks/audio-DcPvT2Kh.js +333 -0
- package/dist/chunks/audio-DcPvT2Kh.js.map +1 -0
- package/dist/chunks/audio-EXUoijsG.cjs +342 -0
- package/dist/chunks/audio-EXUoijsG.cjs.map +1 -0
- package/dist/chunks/{base-DchG4q_S.js → base-2-yYc93C.js} +2 -2
- package/dist/chunks/{base-DchG4q_S.js.map → base-2-yYc93C.js.map} +1 -1
- package/dist/chunks/{core-DVyTlo9Q.js → core-D5rU0CV6.js} +2 -2
- package/dist/chunks/{core-DVyTlo9Q.js.map → core-D5rU0CV6.js.map} +1 -1
- package/dist/chunks/{core-D2vF8kZb.js → core-DuO-AVXL.js} +2 -2
- package/dist/chunks/{core-D2vF8kZb.js.map → core-DuO-AVXL.js.map} +1 -1
- package/dist/chunks/{fx-DUMVKSvg.js → fx-CMxWNwH8.js} +2 -2
- package/dist/chunks/{fx-DUMVKSvg.js.map → fx-CMxWNwH8.js.map} +1 -1
- package/dist/chunks/{gpu-Bkw605Ds.js → gpu-DLPghVWr.js} +2 -2
- package/dist/chunks/{gpu-Bkw605Ds.js.map → gpu-DLPghVWr.js.map} +1 -1
- package/dist/chunks/{player-C-TwEEy6.js → player-DxvCYo7Q.js} +4 -4
- package/dist/chunks/{player-C-TwEEy6.js.map → player-DxvCYo7Q.js.map} +1 -1
- package/dist/chunks/{registry-D23neB4M.js → registry-CyKExAmE.js} +2 -2
- package/dist/chunks/{registry-D23neB4M.js.map → registry-CyKExAmE.js.map} +1 -1
- package/dist/chunks/{spring-BhoT09Qb.js → spring-BK8DiezC.js} +2 -2
- package/dist/chunks/{spring-BhoT09Qb.js.map → spring-BK8DiezC.js.map} +1 -1
- package/dist/chunks/{variants-C_hv_s23.js → variants-BQ6bhzn4.js} +2 -2
- package/dist/chunks/{variants-C_hv_s23.js.map → variants-BQ6bhzn4.js.map} +1 -1
- package/dist/components/a11y.js +2 -2
- package/dist/components/angular.js +7 -7
- 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.cjs +11 -336
- package/dist/components/effects.cjs.map +1 -1
- package/dist/components/effects.js +9 -333
- package/dist/components/effects.js.map +1 -1
- package/dist/components/feedback.js +1 -1
- package/dist/components/fx-3d.js +2 -2
- package/dist/components/fx-focus.js +2 -2
- package/dist/components/fx-gpu.js +3 -3
- package/dist/components/fx-light.js +2 -2
- package/dist/components/fx-morph.js +2 -2
- package/dist/components/fx-music.cjs +179 -0
- package/dist/components/fx-music.cjs.map +1 -0
- package/dist/components/fx-music.d.cts +102 -0
- package/dist/components/fx-music.d.ts +102 -0
- package/dist/components/fx-music.js +174 -0
- package/dist/components/fx-music.js.map +1 -0
- package/dist/components/fx-physics.js +2 -2
- package/dist/components/fx-text.js +2 -2
- package/dist/components/fx-transitions.js +3 -3
- package/dist/components/fx-weather.js +2 -2
- package/dist/components/fx.js +5 -5
- package/dist/components/fx2.cjs +8 -0
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +59 -1
- package/dist/components/fx2.d.ts +59 -1
- package/dist/components/fx2.js +10 -5
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/gesture.js +4 -4
- package/dist/components/interaction.js +1 -1
- package/dist/components/layout.js +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.js +2 -2
- package/dist/components/physics.js +3 -3
- package/dist/components/reveal.js +1 -1
- package/dist/components/solid.js +7 -7
- package/dist/components/svelte.js +7 -7
- 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.js +4 -4
- package/dist/components/vue.js +7 -7
- package/dist/components/webgl.js +1 -1
- package/dist/components/widgets.cjs +542 -61
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +79 -2
- package/dist/components/widgets.d.ts +79 -2
- package/dist/components/widgets.js +542 -67
- package/dist/components/widgets.js.map +1 -1
- package/dist/components.js +9 -9
- 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 +1 -1
- package/docs/components.md +25 -0
- package/package.json +21 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
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 { u as defineElement } from '../chunks/base-2-yYc93C.js';
|
|
2
|
+
import { d as springEasing } from '../chunks/spring-BK8DiezC.js';
|
|
3
|
+
import { A as ANIMATION_FORMAT, c as createPlayer } from '../chunks/player-DxvCYo7Q.js';
|
|
4
|
+
import '../chunks/registry-CyKExAmE.js';
|
|
5
|
+
import '../chunks/core-D5rU0CV6.js';
|
|
6
6
|
import './tokens.js';
|
|
7
7
|
|
|
8
8
|
/** Helpers shared by the 6.x widgets (`motionary/components/widgets`). */
|
|
@@ -40,7 +40,7 @@ function arrowIndex(e, i, n, vertical = false) {
|
|
|
40
40
|
return -1;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
var css$
|
|
43
|
+
var css$x = "usa-carousel{display:block;position:relative;--usa-carousel-dur:520ms;--usa-carousel-ease:cubic-bezier(.22,1,.36,1);overflow:hidden;border-radius:var(--usa-radius,14px);touch-action:pan-y}.usa-carousel-viewport{position:relative;overflow:hidden;height:100%;min-height:inherit}.usa-carousel-track{display:flex;height:100%;transition:transform var(--usa-carousel-dur) var(--usa-carousel-ease);will-change:transform}.usa-carousel-track>*{flex:0 0 100%;min-width:0;box-sizing:border-box}usa-carousel:not([data-effect=\"slide\"]) .usa-carousel-track{display:grid}usa-carousel:not([data-effect=\"slide\"]) .usa-carousel-track>*{grid-area:1/1;transition:opacity var(--usa-carousel-dur) ease,transform var(--usa-carousel-dur) var(--usa-carousel-ease),filter var(--usa-carousel-dur) ease}usa-carousel[data-effect=\"cards\"] .usa-carousel-viewport{perspective:900px}usa-carousel[data-dragging] .usa-carousel-track,usa-carousel[data-dragging] .usa-carousel-track>*{transition:none}.usa-carousel-nav{position:absolute;top:50%;translate:0 -50%;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:#111;font:600 18px/1 system-ui;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:transform .2s}.usa-carousel-nav:hover{transform:scale(1.08)}.usa-carousel-nav:focus-visible{outline:2px solid #7c5cff;outline-offset:2px}.usa-carousel-prev{left:10px}.usa-carousel-next{right:10px}.usa-carousel-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;z-index:2}.usa-carousel-dot{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.55);cursor:pointer;transition:width .35s var(--usa-carousel-ease),background .35s}.usa-carousel-dot[aria-current=\"true\"]{width:22px;background:#fff}@media (prefers-reduced-motion:reduce){usa-carousel .usa-carousel-track,usa-carousel .usa-carousel-track>*,.usa-carousel-dot{transition:none!important}}usa-carousel[data-reduced] .usa-carousel-track,usa-carousel[data-reduced] .usa-carousel-track>*{transition:none!important}";
|
|
44
44
|
|
|
45
45
|
const CAROUSEL_EFFECTS = ['slide', 'fade', 'scale', 'cards'];
|
|
46
46
|
function defineCarousel(tag = 'usa-carousel') {
|
|
@@ -229,10 +229,10 @@ function defineCarousel(tag = 'usa-carousel') {
|
|
|
229
229
|
}
|
|
230
230
|
}
|
|
231
231
|
return UsaCarousel;
|
|
232
|
-
}, { id: 'carousel', text: css$
|
|
232
|
+
}, { id: 'carousel', text: css$x });
|
|
233
233
|
}
|
|
234
234
|
|
|
235
|
-
var css$
|
|
235
|
+
var css$w = "usa-tab-bar{display:block;--usa-tab-accent:#7c5cff;--usa-tab-ease:cubic-bezier(.22,1,.36,1)}.usa-tab-bar-list{position:relative;display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(127,127,127,.12);isolation:isolate;overflow-x:auto;scrollbar-width:none}.usa-tab-bar-list::-webkit-scrollbar{display:none}.usa-tab-bar-list>[role=\"tab\"]{position:relative;z-index:1;flex:1 0 auto;border:0;background:none;color:inherit;font:inherit;font-weight:600;padding:8px 14px;border-radius:9px;cursor:pointer;opacity:.7;transition:opacity .25s,color .25s;white-space:nowrap}.usa-tab-bar-list>[role=\"tab\"][aria-selected=\"true\"]{opacity:1}.usa-tab-bar-list>[role=\"tab\"]:focus-visible{outline:2px solid var(--usa-tab-accent);outline-offset:1px}.usa-tab-bar-ink{position:absolute;z-index:0;left:0;top:4px;bottom:4px;width:0;border-radius:9px;background:var(--usa-tab-accent);pointer-events:none}usa-tab-bar[data-indicator=\"pill\"] [aria-selected=\"true\"]{color:#fff}usa-tab-bar[data-indicator=\"underline\"] .usa-tab-bar-list{background:none;border-bottom:1px solid rgba(127,127,127,.25);border-radius:0}usa-tab-bar[data-indicator=\"underline\"] .usa-tab-bar-ink{top:auto;bottom:0;height:3px;border-radius:3px}usa-tab-bar[data-indicator=\"glow\"] .usa-tab-bar-ink{background:transparent;box-shadow:0 0 0 2px var(--usa-tab-accent),0 0 18px var(--usa-tab-accent)}usa-tab-bar[data-indicator=\"gooey\"] .usa-tab-bar-ink{filter:blur(.5px);border-radius:999px}usa-tab-bar[data-indicator=\"gooey\"] [aria-selected=\"true\"]{color:#fff}.usa-tab-bar-panel{padding:14px 2px}.usa-tab-bar-panel[hidden]{display:none}";
|
|
236
236
|
|
|
237
237
|
const TAB_INDICATORS = ['pill', 'underline', 'glow', 'gooey'];
|
|
238
238
|
function defineTabBar(tag = 'usa-tab-bar') {
|
|
@@ -345,10 +345,10 @@ function defineTabBar(tag = 'usa-tab-bar') {
|
|
|
345
345
|
}
|
|
346
346
|
}
|
|
347
347
|
return UsaTabBar;
|
|
348
|
-
}, { id: 'tab-bar', text: css$
|
|
348
|
+
}, { id: 'tab-bar', text: css$w });
|
|
349
349
|
}
|
|
350
350
|
|
|
351
|
-
var css$
|
|
351
|
+
var css$v = "usa-disclosure{display:block;--usa-disclosure-accent:#7c5cff}usa-disclosure>details{border-bottom:1px solid rgba(127,127,127,.25);overflow:hidden}usa-disclosure>details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;font-weight:600}usa-disclosure>details>summary::-webkit-details-marker{display:none}usa-disclosure>details>summary::after{content:\"\";flex:none;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;translate:0 -3px;transition:rotate .35s cubic-bezier(.34,1.56,.64,1),translate .35s}usa-disclosure>details[open]>summary::after{rotate:225deg;translate:0 2px}usa-disclosure>details>summary:focus-visible{outline:2px solid var(--usa-disclosure-accent);outline-offset:2px;border-radius:6px}usa-disclosure>details>:not(summary){padding:0 4px 12px}usa-disclosure[variant=\"cards\"]>details{border:1px solid rgba(127,127,127,.25);border-radius:12px;margin-bottom:8px;padding:0 10px;transition:box-shadow .3s,border-color .3s}usa-disclosure[variant=\"cards\"]>details[open]{border-color:var(--usa-disclosure-accent);box-shadow:0 8px 24px rgba(124,92,255,.16)}@media (prefers-reduced-motion:reduce){usa-disclosure>details>summary::after{transition:none}}";
|
|
352
352
|
|
|
353
353
|
function defineDisclosure(tag = 'usa-disclosure') {
|
|
354
354
|
return defineElement(tag, (Base) => {
|
|
@@ -416,10 +416,10 @@ function defineDisclosure(tag = 'usa-disclosure') {
|
|
|
416
416
|
}
|
|
417
417
|
}
|
|
418
418
|
return UsaDisclosure;
|
|
419
|
-
}, { id: 'disclosure', text: css$
|
|
419
|
+
}, { id: 'disclosure', text: css$v });
|
|
420
420
|
}
|
|
421
421
|
|
|
422
|
-
var css$
|
|
422
|
+
var css$u = "usa-stories{display:block;position:relative;overflow:hidden;border-radius:var(--usa-radius,16px);background:#111;color:#fff;aspect-ratio:9/14;max-height:520px;user-select:none;-webkit-user-select:none;touch-action:manipulation}usa-stories>:not([data-usa-part]){position:absolute;inset:0;opacity:0;transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1);transform:scale(1.04);pointer-events:none;box-sizing:border-box}usa-stories>[data-active]:not([data-usa-part]){opacity:1;transform:none;pointer-events:auto}usa-stories>img:not([data-usa-part]){width:100%;height:100%;object-fit:cover}.usa-stories-bars{position:absolute;z-index:3;top:8px;left:8px;right:48px;display:flex;gap:4px}.usa-stories-bar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}.usa-stories-bar>i{display:block;height:100%;width:100%;background:#fff;transform-origin:left;transform:scaleX(0)}.usa-stories-bar[data-done]>i{transform:scaleX(1)}.usa-stories-toggle{position:absolute;z-index:3;top:2px;right:6px;width:36px;height:30px;border:0;background:none;color:#fff;font:700 14px/1 system-ui;cursor:pointer;border-radius:8px}.usa-stories-toggle:focus-visible{outline:2px solid #fff}@media (prefers-reduced-motion:reduce){usa-stories>*{transition:none!important;transform:none!important}}";
|
|
423
423
|
|
|
424
424
|
function defineStories(tag = 'usa-stories') {
|
|
425
425
|
return defineElement(tag, (Base) => {
|
|
@@ -552,10 +552,10 @@ function defineStories(tag = 'usa-stories') {
|
|
|
552
552
|
}
|
|
553
553
|
}
|
|
554
554
|
return UsaStories;
|
|
555
|
-
}, { id: 'stories', text: css$
|
|
555
|
+
}, { id: 'stories', text: css$u });
|
|
556
556
|
}
|
|
557
557
|
|
|
558
|
-
var css$
|
|
558
|
+
var css$t = "usa-modal,usa-sheet{display:contents}.usa-ov{border:0;padding:0;margin:auto;color:inherit;background:transparent;max-width:min(92vw,520px);max-height:88vh;overflow:visible}.usa-ov::backdrop{background:rgba(10,12,20,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.usa-ov-body{box-sizing:border-box;background:var(--usa-ov-bg,#fff);color:var(--usa-ov-fg,#111827);border-radius:var(--usa-ov-radius,18px);padding:var(--usa-ov-pad,22px);box-shadow:0 30px 80px -20px rgba(0,0,0,.45);max-height:88vh;overflow:auto}.usa-sheet-panel{margin:0;max-width:none;max-height:none}usa-sheet[data-side=\"right\"] .usa-sheet-panel{inset:0 0 0 auto;height:100%;width:min(88vw,var(--usa-sheet-size,380px))}usa-sheet[data-side=\"left\"] .usa-sheet-panel{inset:0 auto 0 0;height:100%;width:min(88vw,var(--usa-sheet-size,380px))}usa-sheet[data-side=\"bottom\"] .usa-sheet-panel{inset:auto 0 0 0;width:100%;max-height:85vh}usa-sheet[data-side=\"top\"] .usa-sheet-panel{inset:0 0 auto 0;width:100%;max-height:85vh}usa-sheet .usa-ov-body{height:100%;max-height:inherit;border-radius:0}usa-sheet[data-side=\"bottom\"] .usa-ov-body{border-radius:var(--usa-ov-radius,18px) var(--usa-ov-radius,18px) 0 0;height:auto;max-height:85vh;touch-action:none}usa-sheet[data-side=\"top\"] .usa-ov-body{border-radius:0 0 var(--usa-ov-radius,18px) var(--usa-ov-radius,18px);height:auto}.usa-ov-grab{width:44px;height:5px;border-radius:3px;background:rgba(127,127,127,.45);margin:-8px auto 14px;cursor:grab}@media (prefers-color-scheme:dark){.usa-ov-body{background:var(--usa-ov-bg,#171a23);color:var(--usa-ov-fg,#e5e7eb)}}";
|
|
559
559
|
|
|
560
560
|
const MODAL_EFFECTS = ['scale', 'slide-up', 'flip', 'origin'];
|
|
561
561
|
const SHEET_SIDES = ['right', 'left', 'bottom', 'top'];
|
|
@@ -782,12 +782,12 @@ function defineOverlay(tag, kind) {
|
|
|
782
782
|
}
|
|
783
783
|
}
|
|
784
784
|
return UsaOverlay;
|
|
785
|
-
}, { id: 'overlay', text: css$
|
|
785
|
+
}, { id: 'overlay', text: css$t });
|
|
786
786
|
}
|
|
787
787
|
const defineModal = (tag = 'usa-modal') => defineOverlay(tag, 'modal');
|
|
788
788
|
const defineSheet = (tag = 'usa-sheet') => defineOverlay(tag, 'sheet');
|
|
789
789
|
|
|
790
|
-
var css$
|
|
790
|
+
var css$s = "usa-toast-stack{position:fixed;z-index:2147482000;width:min(360px,calc(100vw - 24px));pointer-events:none;--usa-tstack-bg:#111827;--usa-tstack-fg:#f9fafb}usa-toast-stack[contained]{position:absolute;width:min(360px,calc(100% - 24px))}usa-toast-stack[data-position^=\"bottom\"]{bottom:12px}usa-toast-stack[data-position^=\"top\"]{top:12px}usa-toast-stack[data-position$=\"right\"]{right:12px}usa-toast-stack[data-position$=\"left\"]{left:12px}usa-toast-stack[data-position$=\"center\"]{left:50%;transform:translateX(-50%)}.usa-tstack-list{position:relative;list-style:none;margin:0;padding:0;min-height:1px;transition:height .3s}.usa-tstack{position:absolute;left:0;right:0;display:flex;align-items:center;gap:10px;box-sizing:border-box;padding:12px 12px 12px 14px;border-radius:14px;background:var(--usa-tstack-bg);color:var(--usa-tstack-fg);box-shadow:0 12px 32px -10px rgba(0,0,0,.45);font:500 14px/1.35 system-ui,sans-serif;pointer-events:auto;touch-action:pan-y;transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .3s;user-select:none}usa-toast-stack[data-position^=\"bottom\"] .usa-tstack{bottom:0;transform-origin:50% 100%}usa-toast-stack[data-position^=\"top\"] .usa-tstack{top:0;transform-origin:50% 0}.usa-tstack-icon{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:13px;font-weight:800;background:#3b82f6;color:#fff}.usa-tstack-success .usa-tstack-icon{background:#22c55e}.usa-tstack-warning .usa-tstack-icon{background:#f59e0b}.usa-tstack-error .usa-tstack-icon{background:#ef4444}.usa-tstack-text{flex:1;min-width:0;display:flex;flex-direction:column}.usa-tstack-text strong{font-weight:700}.usa-tstack-action{border:0;border-radius:8px;padding:6px 10px;background:rgba(255,255,255,.14);color:inherit;font:600 13px system-ui,sans-serif;cursor:pointer}.usa-tstack-close{border:0;background:none;color:inherit;opacity:.6;font-size:18px;line-height:1;cursor:pointer;padding:2px 4px}.usa-tstack-close:hover{opacity:1}@media (prefers-reduced-motion:reduce){.usa-tstack,.usa-tstack-list{transition:none}}";
|
|
791
791
|
|
|
792
792
|
const TOAST_POSITIONS = ['bottom-right', 'bottom-left', 'bottom-center', 'top-right', 'top-left', 'top-center'];
|
|
793
793
|
const ICONS = { info: 'ℹ', success: '✓', warning: '!', error: '✕' };
|
|
@@ -958,7 +958,7 @@ function defineToastStack(tag = 'usa-toast-stack') {
|
|
|
958
958
|
}
|
|
959
959
|
}
|
|
960
960
|
return UsaToastStack;
|
|
961
|
-
}, { id: 'toast', text: css$
|
|
961
|
+
}, { id: 'toast', text: css$s });
|
|
962
962
|
}
|
|
963
963
|
/** Show a toast on the first `<usa-toast-stack>` of the page (one is created when missing). */
|
|
964
964
|
function stackToast(input, stack) {
|
|
@@ -986,7 +986,7 @@ function installToastTriggers() {
|
|
|
986
986
|
});
|
|
987
987
|
}
|
|
988
988
|
|
|
989
|
-
var css$
|
|
989
|
+
var css$r = "usa-menu{position:relative;display:inline-block}.usa-menu-list{position:absolute;z-index:50;min-width:180px;max-width:min(280px,90vw);box-sizing:border-box;padding:6px;border-radius:12px;background:var(--usa-menu-bg,#fff);color:var(--usa-menu-fg,#111827);box-shadow:0 18px 44px -12px rgba(0,0,0,.35),0 0 0 1px rgba(127,127,127,.15);display:flex;flex-direction:column;gap:2px;text-align:left}.usa-menu-list[hidden]{display:none}usa-menu[data-placement^=\"bottom\"] .usa-menu-list{top:calc(100% + 6px)}usa-menu[data-placement^=\"top\"] .usa-menu-list{bottom:calc(100% + 6px)}usa-menu[data-placement$=\"start\"] .usa-menu-list{left:0;transform-origin:0 0}usa-menu[data-placement$=\"end\"] .usa-menu-list{right:0;transform-origin:100% 0}usa-menu[data-placement=\"top-start\"] .usa-menu-list{transform-origin:0 100%}usa-menu[data-placement=\"top-end\"] .usa-menu-list{transform-origin:100% 100%}.usa-menu-list>[role=\"menuitem\"]{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;border:0;background:none;color:inherit;font:500 14px/1.3 system-ui,sans-serif;text-align:left;text-decoration:none;padding:8px 10px;border-radius:8px;cursor:pointer}.usa-menu-list>[role=\"menuitem\"]:hover,.usa-menu-list>[role=\"menuitem\"]:focus-visible{background:var(--usa-menu-hover,rgba(124,92,255,.14));outline:none}.usa-menu-list>hr{border:0;border-top:1px solid rgba(127,127,127,.2);margin:4px 2px}@media (prefers-color-scheme:dark){.usa-menu-list{background:var(--usa-menu-bg,#1d2130);color:var(--usa-menu-fg,#e5e7eb)}}";
|
|
990
990
|
|
|
991
991
|
const MENU_EFFECTS = ['scale', 'fold', 'slide'];
|
|
992
992
|
function defineMenu(tag = 'usa-menu') {
|
|
@@ -1125,10 +1125,10 @@ function defineMenu(tag = 'usa-menu') {
|
|
|
1125
1125
|
}
|
|
1126
1126
|
}
|
|
1127
1127
|
return UsaMenu;
|
|
1128
|
-
}, { id: 'menu', text: css$
|
|
1128
|
+
}, { id: 'menu', text: css$r });
|
|
1129
1129
|
}
|
|
1130
1130
|
|
|
1131
|
-
var css$
|
|
1131
|
+
var css$q = "usa-progress-ring{position:relative;display:inline-block;vertical-align:middle;width:var(--usa-pr-size,120px);aspect-ratio:1;--usa-pr-color:#7c5cff;--usa-pr-track:rgba(127,127,127,.18);--usa-pr-width:9;font:700 calc(var(--usa-pr-size,120px)*.2)/1 system-ui,sans-serif;font-variant-numeric:tabular-nums}usa-progress-ring[data-variant=\"semi\"]{aspect-ratio:100/56}.usa-pr-label{position:absolute;inset:0;display:grid;place-items:center}usa-progress-ring[data-variant=\"semi\"] .usa-pr-label{place-items:end center}usa-progress-ring[data-variant=\"bar\"]{display:inline-flex;width:var(--usa-pr-size,100%);aspect-ratio:auto;gap:10px;align-items:center;font-size:14px}usa-progress-ring[data-variant=\"bar\"]>.usa-pr-track{flex:1 1 auto;min-width:40px}usa-progress-ring[data-variant=\"bar\"] .usa-pr-label{position:static;display:inline}usa-progress-ring .usa-pr-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.usa-pr-svg path{fill:none;stroke-width:var(--usa-pr-width);stroke-linecap:round}.usa-pr-svg .usa-pr-track{stroke:var(--usa-pr-track)}.usa-pr-svg .usa-pr-arc{stroke:var(--usa-pr-color)}usa-progress-ring[data-variant=\"semi\"] .usa-pr-label{padding-bottom:2%}.usa-pr-track:is(div){height:10px;border-radius:999px;background:var(--usa-pr-track);overflow:hidden}.usa-pr-fill{height:100%;border-radius:inherit;background:var(--usa-pr-color);transform-origin:0 50%;transform:scaleX(0)}usa-progress-ring[data-indeterminate] .usa-pr-svg{animation:usa-pr-spin 1.1s linear infinite}usa-progress-ring[data-indeterminate] .usa-pr-fill{width:35%;transform:none!important;animation:usa-pr-slide 1.3s ease-in-out infinite}@keyframes usa-pr-spin{to{transform:rotate(360deg)}}@keyframes usa-pr-slide{from{margin-left:-35%}to{margin-left:100%}}usa-odometer{display:inline-flex;align-items:flex-end;font-variant-numeric:tabular-nums;line-height:1.15}.usa-odo-row{display:inline-flex;align-items:flex-end}.usa-odo-col{display:inline-block;height:1.15em;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}.usa-odo-strip{display:block;white-space:pre;line-height:1.15em;text-align:center}.usa-odo-sym{display:inline-block;height:1.15em}@media (prefers-reduced-motion:reduce){usa-progress-ring[data-indeterminate] .usa-pr-svg,usa-progress-ring[data-indeterminate] .usa-pr-fill{animation-duration:4s}}";
|
|
1132
1132
|
|
|
1133
1133
|
const PROGRESS_VARIANTS = ['ring', 'bar', 'semi'];
|
|
1134
1134
|
const NS = 'http://www.w3.org/2000/svg';
|
|
@@ -1268,7 +1268,7 @@ function defineProgressRing(tag = 'usa-progress-ring') {
|
|
|
1268
1268
|
}
|
|
1269
1269
|
}
|
|
1270
1270
|
return UsaProgressRing;
|
|
1271
|
-
}, { id: 'meters', text: css$
|
|
1271
|
+
}, { id: 'meters', text: css$q });
|
|
1272
1272
|
}
|
|
1273
1273
|
function defineOdometer(tag = 'usa-odometer') {
|
|
1274
1274
|
return defineElement(tag, (Base) => {
|
|
@@ -1378,10 +1378,10 @@ function defineOdometer(tag = 'usa-odometer') {
|
|
|
1378
1378
|
}
|
|
1379
1379
|
}
|
|
1380
1380
|
return UsaOdometer;
|
|
1381
|
-
}, { id: 'meters', text: css$
|
|
1381
|
+
}, { id: 'meters', text: css$q });
|
|
1382
1382
|
}
|
|
1383
1383
|
|
|
1384
|
-
var css$
|
|
1384
|
+
var css$p = "usa-skeleton-reveal{position:relative;display:block;--usa-sk-base:rgba(127,127,127,.16);--usa-sk-hi:rgba(255,255,255,.55)}usa-skeleton-reveal[data-loading]>:not(.usa-sk-layer){visibility:hidden}.usa-sk-layer{position:absolute;inset:0;pointer-events:none}.usa-sk-box{position:absolute;border-radius:6px;background:var(--usa-sk-base);overflow:hidden}usa-skeleton-reveal[data-variant=\"wave\"] .usa-sk-box{background:linear-gradient(100deg,var(--usa-sk-base) 30%,var(--usa-sk-hi) 50%,var(--usa-sk-base) 70%) var(--usa-sk-x,0) 0/var(--usa-sk-w,600px) 100% no-repeat,var(--usa-sk-base);animation:usa-sk-wave 1.4s linear infinite}usa-skeleton-reveal[data-variant=\"pulse\"] .usa-sk-box{animation:usa-sk-pulse 1.2s ease-in-out infinite alternate}usa-skeleton-reveal[data-variant=\"glow\"] .usa-sk-box{animation:usa-sk-glow 1.6s ease-in-out infinite alternate}@keyframes usa-sk-wave{from{background-position:calc(var(--usa-sk-x,0px) - var(--usa-sk-w,600px)) 0,0 0}to{background-position:calc(var(--usa-sk-x,0px) + var(--usa-sk-w,600px)) 0,0 0}}@keyframes usa-sk-pulse{from{opacity:1}to{opacity:.45}}@keyframes usa-sk-glow{from{box-shadow:0 0 0 rgba(124,92,255,0)}to{box-shadow:0 0 14px rgba(124,92,255,.45);background:rgba(124,92,255,.22)}}@media (prefers-color-scheme:dark){usa-skeleton-reveal{--usa-sk-hi:rgba(255,255,255,.16)}}@media (prefers-reduced-motion:reduce){.usa-sk-box{animation:none!important}}";
|
|
1385
1385
|
|
|
1386
1386
|
const SKELETON_VARIANTS = ['wave', 'pulse', 'glow'];
|
|
1387
1387
|
function defineSkeletonReveal(tag = 'usa-skeleton-reveal') {
|
|
@@ -1496,10 +1496,10 @@ function defineSkeletonReveal(tag = 'usa-skeleton-reveal') {
|
|
|
1496
1496
|
}
|
|
1497
1497
|
}
|
|
1498
1498
|
return UsaSkeletonReveal;
|
|
1499
|
-
}, { id: 'skeleton-reveal', text: css$
|
|
1499
|
+
}, { id: 'skeleton-reveal', text: css$p });
|
|
1500
1500
|
}
|
|
1501
1501
|
|
|
1502
|
-
var css$
|
|
1502
|
+
var css$o = "usa-star-rating{display:inline-flex;gap:var(--usa-star-gap,4px);--usa-star-size:28px;--usa-star-on:#fbbf24;--usa-star-off:rgba(127,127,127,.28);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:8px}usa-star-rating[readonly]{cursor:default}usa-star-rating:focus-visible{outline:2px solid var(--usa-star-on);outline-offset:4px}.usa-star{position:relative;display:inline-block;width:var(--usa-star-size);height:var(--usa-star-size);--usa-star-fill:0%}.usa-star svg{display:block;width:100%;height:100%;overflow:visible;stroke:none}.usa-star-bg{fill:var(--usa-star-off)}.usa-star-fg{position:absolute;left:0;top:0;bottom:0;width:var(--usa-star-fill);overflow:hidden;transition:width .18s ease-out}.usa-star-fg svg{width:var(--usa-star-size);height:var(--usa-star-size);fill:var(--usa-star-on);filter:drop-shadow(0 1px 3px rgba(251,191,36,.45))}usa-star-rating[data-preview] .usa-star-fg{opacity:.8}.usa-star-spark{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:var(--usa-star-on);pointer-events:none}@media (prefers-reduced-motion:reduce){.usa-star-fg{transition:none}}";
|
|
1503
1503
|
|
|
1504
1504
|
const PATHS = {
|
|
1505
1505
|
star: 'M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6L2.5 9.4l6.6-.8z',
|
|
@@ -1623,10 +1623,10 @@ function defineStarRating(tag = 'usa-star-rating') {
|
|
|
1623
1623
|
}
|
|
1624
1624
|
}
|
|
1625
1625
|
return UsaStarRating;
|
|
1626
|
-
}, { id: 'star-rating', text: css$
|
|
1626
|
+
}, { id: 'star-rating', text: css$o });
|
|
1627
1627
|
}
|
|
1628
1628
|
|
|
1629
|
-
var css$
|
|
1629
|
+
var css$n = "usa-milestones{position:relative;display:block;--usa-ms-color:#7c5cff;--usa-ms-rail:rgba(127,127,127,.22);--usa-ms-gap:28px;padding:4px 0}.usa-ms-rail{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;border-radius:3px;background:var(--usa-ms-rail);overflow:hidden}.usa-ms-fill{position:absolute;inset:0;background:linear-gradient(var(--usa-ms-color),#22d3ee);transform-origin:50% 0;transform:scaleY(0)}.usa-ms-item{position:relative;box-sizing:border-box;width:50%;padding:0 var(--usa-ms-gap) var(--usa-ms-gap);text-align:left}.usa-ms-item[data-side=\"right\"]{margin-left:50%}.usa-ms-item[data-side=\"left\"]{text-align:right}.usa-ms-dot{position:absolute;top:4px;width:14px;height:14px;border-radius:50%;background:var(--usa-ms-color);box-shadow:0 0 0 4px color-mix(in srgb,var(--usa-ms-color) 22%,transparent);transform:scale(0)}.usa-ms-item[data-reached] .usa-ms-dot{transform:none}.usa-ms-item[data-side=\"right\"] .usa-ms-dot{left:-7px}.usa-ms-item[data-side=\"left\"] .usa-ms-dot{right:-7px}.usa-ms-date{display:block;font-size:.8em;font-weight:700;letter-spacing:.04em;color:var(--usa-ms-color);margin-bottom:2px}.usa-ms-item:not([data-reached])>:not(.usa-ms-dot){opacity:0}usa-milestones[data-layout=\"left\"] .usa-ms-rail{left:7px}usa-milestones[data-layout=\"left\"] .usa-ms-item{width:auto;margin-left:0;padding-left:calc(var(--usa-ms-gap) + 8px);text-align:left}usa-milestones[data-layout=\"left\"] .usa-ms-dot{left:1px;right:auto}@media (max-width:640px){usa-milestones .usa-ms-rail{left:7px}usa-milestones .usa-ms-item{width:auto;margin-left:0;padding-left:calc(var(--usa-ms-gap) + 8px);text-align:left}usa-milestones .usa-ms-item .usa-ms-dot{left:1px;right:auto}}";
|
|
1630
1630
|
|
|
1631
1631
|
function defineMilestones(tag = 'usa-milestones') {
|
|
1632
1632
|
return defineElement(tag, (Base) => {
|
|
@@ -1714,10 +1714,10 @@ function defineMilestones(tag = 'usa-milestones') {
|
|
|
1714
1714
|
}
|
|
1715
1715
|
}
|
|
1716
1716
|
return UsaMilestones;
|
|
1717
|
-
}, { id: 'milestones', text: css$
|
|
1717
|
+
}, { id: 'milestones', text: css$n });
|
|
1718
1718
|
}
|
|
1719
1719
|
|
|
1720
|
-
var css$
|
|
1720
|
+
var css$m = "usa-masonry-flow{position:relative;display:block;width:100%}usa-masonry-flow>*{position:absolute;left:0;top:0;box-sizing:border-box;margin:0;will-change:transform}usa-masonry-flow>[data-hidden]:not([data-leaving]){display:none}usa-masonry-flow>[data-leaving]{pointer-events:none}";
|
|
1721
1721
|
|
|
1722
1722
|
function defineMasonryFlow(tag = 'usa-masonry-flow') {
|
|
1723
1723
|
return defineElement(tag, (Base) => {
|
|
@@ -1838,10 +1838,10 @@ function defineMasonryFlow(tag = 'usa-masonry-flow') {
|
|
|
1838
1838
|
}
|
|
1839
1839
|
}
|
|
1840
1840
|
return UsaMasonryFlow;
|
|
1841
|
-
}, { id: 'masonry-flow', text: css$
|
|
1841
|
+
}, { id: 'masonry-flow', text: css$m });
|
|
1842
1842
|
}
|
|
1843
1843
|
|
|
1844
|
-
var css$
|
|
1844
|
+
var css$l = "usa-compare{position:relative;display:grid;overflow:hidden;border-radius:var(--usa-cmp-radius,14px);user-select:none;touch-action:pan-y;cursor:ew-resize;--usa-cmp-line:#fff;outline-offset:3px}usa-compare[data-orientation=\"vertical\"]{touch-action:pan-x;cursor:ns-resize}usa-compare>.usa-cmp-before,usa-compare>.usa-cmp-after{grid-area:1/1;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.usa-cmp-handle{position:absolute;top:0;bottom:0;left:50%;width:0;z-index:2;pointer-events:none}.usa-cmp-handle::before{content:\"\";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:var(--usa-cmp-line);box-shadow:0 0 8px rgba(0,0,0,.35)}usa-compare[data-orientation=\"vertical\"] .usa-cmp-handle{top:50%;bottom:auto;left:0;right:0;width:auto;height:0}usa-compare[data-orientation=\"vertical\"] .usa-cmp-handle::before{left:0;right:0;top:-1.5px;width:auto;height:3px}.usa-cmp-knob{position:absolute;top:50%;left:0;display:grid;place-items:center;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--usa-cmp-line);color:#111827;box-shadow:0 6px 18px rgba(0,0,0,.35);pointer-events:auto;cursor:grab;transition:transform .2s}usa-compare[data-orientation=\"vertical\"] .usa-cmp-knob{left:50%;top:0;transform:rotate(90deg)}usa-compare:active .usa-cmp-knob{transform:scale(.92)}usa-compare[data-orientation=\"vertical\"]:active .usa-cmp-knob{transform:rotate(90deg) scale(.92)}.usa-cmp-label{position:absolute;top:10px;z-index:1;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:600 12px/1.4 system-ui,sans-serif;pointer-events:none}.usa-cmp-label-b{left:10px}.usa-cmp-label-a{right:10px}";
|
|
1845
1845
|
|
|
1846
1846
|
function defineCompare(tag = 'usa-compare') {
|
|
1847
1847
|
return defineElement(tag, (Base) => {
|
|
@@ -1965,10 +1965,10 @@ function defineCompare(tag = 'usa-compare') {
|
|
|
1965
1965
|
}
|
|
1966
1966
|
}
|
|
1967
1967
|
return UsaCompare;
|
|
1968
|
-
}, { id: 'compare', text: css$
|
|
1968
|
+
}, { id: 'compare', text: css$l });
|
|
1969
1969
|
}
|
|
1970
1970
|
|
|
1971
|
-
var css$
|
|
1971
|
+
var css$k = "usa-cube-gallery{position:relative;display:block;aspect-ratio:4/3;perspective:1100px;outline-offset:4px}.usa-cube-stage{position:absolute;inset:0;transform-style:preserve-3d;touch-action:pan-y}.usa-cube-face{position:absolute;inset:0;box-sizing:border-box;margin:0;backface-visibility:hidden;display:none;overflow:hidden;border-radius:var(--usa-cube-radius,14px)}.usa-cube-face[data-active]{display:block}.usa-cube-face>img{width:100%;height:100%;object-fit:cover;display:block}.usa-cube-btn{position:absolute;top:50%;z-index:2;width:34px;height:34px;margin-top:-17px;border:0;border-radius:50%;background:rgba(255,255,255,.85);color:#111827;font:700 20px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25)}.usa-cube-prev{left:8px}.usa-cube-next{right:8px}.usa-cube-btn:focus-visible{outline:2px solid #7c5cff;outline-offset:2px}";
|
|
1972
1972
|
|
|
1973
1973
|
function defineCubeGallery(tag = 'usa-cube-gallery') {
|
|
1974
1974
|
return defineElement(tag, (Base) => {
|
|
@@ -2101,10 +2101,10 @@ function defineCubeGallery(tag = 'usa-cube-gallery') {
|
|
|
2101
2101
|
}
|
|
2102
2102
|
}
|
|
2103
2103
|
return UsaCubeGallery;
|
|
2104
|
-
}, { id: 'cube-gallery', text: css$
|
|
2104
|
+
}, { id: 'cube-gallery', text: css$k });
|
|
2105
2105
|
}
|
|
2106
2106
|
|
|
2107
|
-
var css$
|
|
2107
|
+
var css$j = "usa-dock{display:inline-flex;align-items:flex-end;gap:var(--usa-dock-gap,8px);padding:8px 10px;border-radius:20px;background:var(--usa-dock-bg,rgba(255,255,255,.55));-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:0 10px 30px -10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.45);--usa-dock-size:44px}usa-dock[data-orientation=\"vertical\"]{flex-direction:column;align-items:flex-start}.usa-dock-item{--usa-dock-s:1;position:relative;display:grid;place-items:center;flex:none;width:calc(var(--usa-dock-size) * var(--usa-dock-s));height:calc(var(--usa-dock-size) * var(--usa-dock-s));border:0;padding:0;border-radius:calc(var(--usa-dock-size) * .26 * var(--usa-dock-s));background:var(--usa-dock-item,linear-gradient(135deg,#7c5cff,#22d3ee));color:#fff;font-size:calc(var(--usa-dock-size) * .5 * var(--usa-dock-s));text-decoration:none;cursor:pointer;transition:width .12s ease-out,height .12s ease-out,font-size .12s ease-out,border-radius .12s;box-shadow:0 4px 10px rgba(0,0,0,.18)}.usa-dock-item:focus-visible{outline:2px solid #7c5cff;outline-offset:3px}.usa-dock-item[data-label]::after{content:attr(data-label);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);padding:3px 8px;border-radius:6px;background:rgba(17,24,39,.9);color:#fff;font:500 12px/1.3 system-ui,sans-serif;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}.usa-dock-item[data-near]::after,.usa-dock-item:focus-visible::after{opacity:1;transform:translateX(-50%)}usa-dock[data-orientation=\"vertical\"] .usa-dock-item[data-label]::after{bottom:auto;left:calc(100% + 8px);top:50%;transform:translateY(-50%)}@media (prefers-reduced-motion:reduce){.usa-dock-item{transition:none}}";
|
|
2108
2108
|
|
|
2109
2109
|
function defineDock(tag = 'usa-dock') {
|
|
2110
2110
|
return defineElement(tag, (Base) => {
|
|
@@ -2172,10 +2172,10 @@ function defineDock(tag = 'usa-dock') {
|
|
|
2172
2172
|
}
|
|
2173
2173
|
}
|
|
2174
2174
|
return UsaDock;
|
|
2175
|
-
}, { id: 'dock', text: css$
|
|
2175
|
+
}, { id: 'dock', text: css$j });
|
|
2176
2176
|
}
|
|
2177
2177
|
|
|
2178
|
-
var css$
|
|
2178
|
+
var css$i = "usa-nav-morph{position:relative;display:flex;gap:4px;align-items:center;isolation:isolate;--usa-nm-color:#7c5cff;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none}usa-nav-morph::-webkit-scrollbar{display:none}usa-nav-morph>:not(.usa-nm-ink){position:relative;z-index:1;flex:none;padding:8px 12px;border-radius:10px;color:inherit;text-decoration:none;font-weight:600;white-space:nowrap;transition:color .25s;outline-offset:2px}.usa-nm-ink{position:absolute;left:0;z-index:0;width:0;pointer-events:none;background:var(--usa-nm-color)}usa-nav-morph[data-indicator=\"underline\"] .usa-nm-ink{bottom:0;height:3px;border-radius:3px}usa-nav-morph[data-indicator=\"pill\"] .usa-nm-ink,usa-nav-morph[data-indicator=\"blob\"] .usa-nm-ink{top:0;bottom:0;border-radius:10px;opacity:.16}usa-nav-morph[data-indicator=\"blob\"] .usa-nm-ink{border-radius:999px;opacity:.2}usa-nav-morph[data-indicator=\"dot\"] .usa-nm-ink{bottom:0;height:6px;background:radial-gradient(circle,var(--usa-nm-color) 3px,transparent 3.5px)}usa-nav-morph>[aria-current=\"page\"]{color:var(--usa-nm-color)}";
|
|
2179
2179
|
|
|
2180
2180
|
const NAV_INDICATORS = ['underline', 'pill', 'blob', 'dot'];
|
|
2181
2181
|
function defineNavMorph(tag = 'usa-nav-morph') {
|
|
@@ -2279,10 +2279,10 @@ function defineNavMorph(tag = 'usa-nav-morph') {
|
|
|
2279
2279
|
}
|
|
2280
2280
|
}
|
|
2281
2281
|
return UsaNavMorph;
|
|
2282
|
-
}, { id: 'nav-morph', text: css$
|
|
2282
|
+
}, { id: 'nav-morph', text: css$i });
|
|
2283
2283
|
}
|
|
2284
2284
|
|
|
2285
|
-
var css$
|
|
2285
|
+
var css$h = "usa-menu-toggle{display:inline-grid;place-items:center;width:var(--usa-mt-size,44px);height:var(--usa-mt-size,44px);border-radius:12px;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent;outline-offset:2px;--usa-mt-ease:cubic-bezier(.65,.05,.36,1)}usa-menu-toggle:hover{background:rgba(127,127,127,.12)}.usa-mt-box{position:relative;width:24px;height:18px}.usa-mt-bar{position:absolute;left:0;width:100%;height:2.5px;border-radius:2px;background:currentColor;transform-origin:50% 50%}.usa-mt-bar:nth-child(1){top:0}.usa-mt-bar:nth-child(2){top:7.75px}.usa-mt-bar:nth-child(3){bottom:0}usa-menu-toggle[data-animate] .usa-mt-bar{transition:transform .38s var(--usa-mt-ease),opacity .2s,top .38s var(--usa-mt-ease),bottom .38s var(--usa-mt-ease),width .38s var(--usa-mt-ease)}usa-menu-toggle[data-animate] .usa-mt-box{transition:transform .38s var(--usa-mt-ease)}usa-menu-toggle[data-variant=\"cross\"][data-open] .usa-mt-bar:nth-child(1),usa-menu-toggle[data-variant=\"plus-x\"][data-open] .usa-mt-bar:nth-child(1){top:7.75px;transform:rotate(45deg)}usa-menu-toggle[data-variant=\"cross\"][data-open] .usa-mt-bar:nth-child(2),usa-menu-toggle[data-variant=\"plus-x\"][data-open] .usa-mt-bar:nth-child(2){opacity:0;transform:scaleX(.2)}usa-menu-toggle[data-variant=\"cross\"][data-open] .usa-mt-bar:nth-child(3),usa-menu-toggle[data-variant=\"plus-x\"][data-open] .usa-mt-bar:nth-child(3){bottom:7.75px;transform:rotate(-45deg)}usa-menu-toggle[data-variant=\"plus-x\"][data-open] .usa-mt-box{transform:rotate(180deg)}usa-menu-toggle[data-variant=\"arrow\"][data-open] .usa-mt-bar:nth-child(1){width:55%;transform:translate(-2px,3.5px) rotate(-40deg)}usa-menu-toggle[data-variant=\"arrow\"][data-open] .usa-mt-bar:nth-child(3){width:55%;transform:translate(-2px,-3.5px) rotate(40deg)}usa-menu-toggle[data-variant=\"arrow\"][data-open] .usa-mt-box{transform:rotate(180deg)}usa-menu-toggle[data-variant=\"minus\"][data-open] .usa-mt-bar:nth-child(1){top:7.75px}usa-menu-toggle[data-variant=\"minus\"][data-open] .usa-mt-bar:nth-child(3){bottom:7.75px}";
|
|
2286
2286
|
|
|
2287
2287
|
const TOGGLE_VARIANTS = ['cross', 'arrow', 'minus', 'plus-x'];
|
|
2288
2288
|
function defineMenuToggle(tag = 'usa-menu-toggle') {
|
|
@@ -2355,10 +2355,10 @@ function defineMenuToggle(tag = 'usa-menu-toggle') {
|
|
|
2355
2355
|
}
|
|
2356
2356
|
}
|
|
2357
2357
|
return UsaMenuToggle;
|
|
2358
|
-
}, { id: 'menu-toggle', text: css$
|
|
2358
|
+
}, { id: 'menu-toggle', text: css$h });
|
|
2359
2359
|
}
|
|
2360
2360
|
|
|
2361
|
-
var css$
|
|
2361
|
+
var css$g = "usa-tip{position:relative;display:inline-block}.usa-tip-bubble{position:absolute;left:0;top:0;z-index:60;box-sizing:border-box;max-width:min(260px,calc(100vw - 16px));width:max-content;padding:7px 11px;border-radius:9px;background:var(--usa-tip-bg,#111827);color:var(--usa-tip-fg,#f9fafb);font:500 13px/1.4 system-ui,sans-serif;box-shadow:0 10px 26px -8px rgba(0,0,0,.4);text-align:left;white-space:normal}.usa-tip-bubble[hidden]{display:none}.usa-tip-bubble[data-placement=\"top\"]{transform-origin:50% 100%}.usa-tip-bubble[data-placement=\"bottom\"]{transform-origin:50% 0}.usa-tip-bubble[data-placement=\"left\"]{transform-origin:100% 50%}.usa-tip-bubble[data-placement=\"right\"]{transform-origin:0 50%}.usa-tip-arrow{position:absolute;width:10px;height:10px;background:inherit;transform:rotate(45deg)}.usa-tip-bubble[data-placement=\"top\"] .usa-tip-arrow{bottom:-4px;left:calc(50% - 5px + var(--usa-tip-shift,0px))}.usa-tip-bubble[data-placement=\"bottom\"] .usa-tip-arrow{top:-4px;left:calc(50% - 5px + var(--usa-tip-shift,0px))}.usa-tip-bubble[data-placement=\"left\"] .usa-tip-arrow{right:-4px;top:calc(50% - 5px)}.usa-tip-bubble[data-placement=\"right\"] .usa-tip-arrow{left:-4px;top:calc(50% - 5px)}";
|
|
2362
2362
|
|
|
2363
2363
|
const TIP_PLACEMENTS = ['top', 'bottom', 'left', 'right'];
|
|
2364
2364
|
const FLIP = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
|
|
@@ -2490,10 +2490,10 @@ function defineTip(tag = 'usa-tip') {
|
|
|
2490
2490
|
}
|
|
2491
2491
|
}
|
|
2492
2492
|
return UsaTip;
|
|
2493
|
-
}, { id: 'tip', text: css$
|
|
2493
|
+
}, { id: 'tip', text: css$g });
|
|
2494
2494
|
}
|
|
2495
2495
|
|
|
2496
|
-
var css$
|
|
2496
|
+
var css$f = "usa-stepper{--usa-st-c:#7c5cff;--usa-st-size:30px;position:relative;display:flex;justify-content:space-between;gap:8px;padding:0;counter-reset:s;max-width:100%}usa-stepper[data-orientation=\"vertical\"]{flex-direction:column;gap:22px}.usa-st-rail{position:absolute;left:calc(var(--usa-st-size)/2);right:calc(var(--usa-st-size)/2);top:calc(var(--usa-st-size)/2 - 2px);height:4px;border-radius:4px;background:rgba(127,127,127,.25);pointer-events:none}usa-stepper[data-orientation=\"vertical\"] .usa-st-rail{left:calc(var(--usa-st-size)/2 - 2px);right:auto;top:calc(var(--usa-st-size)/2);bottom:calc(var(--usa-st-size)/2);width:4px;height:auto}.usa-st-fill{position:absolute;inset:0;border-radius:inherit;background:var(--usa-st-c);transform-origin:0 0;transform:scaleX(calc(var(--usa-st-p,0%) / 100%));transition:transform .55s cubic-bezier(.6,.05,.3,1)}usa-stepper[data-orientation=\"vertical\"] .usa-st-fill{transform:scaleY(calc(var(--usa-st-p,0%) / 100%))}.usa-st-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;font:600 12px/1.25 system-ui,sans-serif;text-align:center;color:rgba(127,127,127,.95)}usa-stepper[data-orientation=\"vertical\"] .usa-st-step{flex-direction:row;text-align:left}.usa-st-step[data-current],.usa-st-step[data-done]{color:inherit}.usa-st-dot{position:relative;display:grid;place-items:center;flex:none;width:var(--usa-st-size);height:var(--usa-st-size);border-radius:50%;background:var(--usa-st-bg,#fff);box-shadow:inset 0 0 0 2px rgba(127,127,127,.4);color:#666;font-weight:700;transition:background .3s,box-shadow .3s,color .3s}.usa-st-step[data-current] .usa-st-dot{box-shadow:inset 0 0 0 2px var(--usa-st-c);color:var(--usa-st-c)}.usa-st-step[data-done] .usa-st-dot{background:var(--usa-st-c);box-shadow:none;color:#fff}.usa-st-check{position:absolute;width:60%;height:60%;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;opacity:0}.usa-st-step[data-done] .usa-st-check{stroke-dashoffset:0;opacity:1}.usa-st-step[data-done] .usa-st-num{opacity:0}.usa-st-step[data-clickable],usa-stepper[clickable] .usa-st-step{cursor:pointer}@media (prefers-reduced-motion:reduce){.usa-st-fill,.usa-st-dot{transition:none}}";
|
|
2497
2497
|
|
|
2498
2498
|
function defineStepper(tag = 'usa-stepper') {
|
|
2499
2499
|
return defineElement(tag, (Base) => {
|
|
@@ -2590,10 +2590,10 @@ function defineStepper(tag = 'usa-stepper') {
|
|
|
2590
2590
|
}
|
|
2591
2591
|
}
|
|
2592
2592
|
return UsaStepper;
|
|
2593
|
-
}, { id: 'stepper', text: css$
|
|
2593
|
+
}, { id: 'stepper', text: css$f });
|
|
2594
2594
|
}
|
|
2595
2595
|
|
|
2596
|
-
var css$
|
|
2596
|
+
var css$e = "usa-pagination{--usa-pg-c:#7c5cff;display:inline-flex;align-items:center;gap:4px;max-width:100%;font:600 14px/1 system-ui,sans-serif}.usa-pg-list{position:relative;display:inline-flex;align-items:center;gap:2px;isolation:isolate}.usa-pg-ink{position:absolute;left:0;top:0;height:100%;width:0;border-radius:10px;background:var(--usa-pg-c);z-index:-1;transition:width .3s}.usa-pg-btn{display:grid;place-items:center;min-width:34px;height:34px;padding:0 6px;border:0;border-radius:10px;background:none;color:inherit;font:inherit;cursor:pointer;transition:color .25s,background .2s}.usa-pg-btn:hover:not(:disabled):not([aria-current]){background:rgba(127,127,127,.14)}.usa-pg-btn[aria-current=\"page\"]{color:#fff}.usa-pg-btn:disabled{opacity:.35;cursor:default}.usa-pg-btn:focus-visible{outline:2px solid var(--usa-pg-c);outline-offset:2px}.usa-pg-gap{min-width:20px;text-align:center;opacity:.6}@media (max-width:420px){.usa-pg-btn{min-width:28px;height:30px;padding:0 3px}}@media (prefers-reduced-motion:reduce){.usa-pg-ink{transition:none}}";
|
|
2597
2597
|
|
|
2598
2598
|
/** The visible page list: numbers and `'…'` gaps (1-based). */
|
|
2599
2599
|
function pageWindow(page, total, siblings = 1) {
|
|
@@ -2715,10 +2715,10 @@ function definePagination(tag = 'usa-pagination') {
|
|
|
2715
2715
|
}
|
|
2716
2716
|
}
|
|
2717
2717
|
return UsaPagination;
|
|
2718
|
-
}, { id: 'pagination', text: css$
|
|
2718
|
+
}, { id: 'pagination', text: css$e });
|
|
2719
2719
|
}
|
|
2720
2720
|
|
|
2721
|
-
var css$
|
|
2721
|
+
var css$d = "usa-segmented{--usa-seg-c:#7c5cff;position:relative;display:inline-flex;align-items:stretch;padding:3px;border-radius:12px;background:rgba(127,127,127,.16);isolation:isolate;max-width:100%;font:600 13px/1 system-ui,sans-serif}.usa-seg-thumb{position:absolute;top:3px;bottom:3px;left:3px;z-index:-1;border-radius:9px;background:var(--usa-seg-thumb,#fff);box-shadow:0 2px 8px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.05);transform-origin:50% 50%}usa-segmented[data-variant=\"pill\"]{border-radius:999px}usa-segmented[data-variant=\"pill\"] .usa-seg-thumb{border-radius:999px;background:var(--usa-seg-c)}usa-segmented[data-variant=\"pill\"] .usa-seg-item[data-selected]{color:#fff}usa-segmented[data-variant=\"outline\"]{background:none;box-shadow:inset 0 0 0 1.5px rgba(127,127,127,.35)}usa-segmented[data-variant=\"outline\"] .usa-seg-thumb{background:none;box-shadow:inset 0 0 0 2px var(--usa-seg-c)}.usa-seg-item{flex:1 1 0;min-width:0;padding:8px 14px;border:0;border-radius:9px;background:none;color:inherit;font:inherit;white-space:nowrap;cursor:pointer;opacity:.7;transition:opacity .2s,transform .25s cubic-bezier(.3,1.4,.5,1),color .2s}.usa-seg-item[data-selected]{opacity:1;transform:scale(1.04)}.usa-seg-item:focus-visible{outline:2px solid var(--usa-seg-c);outline-offset:1px}@media (max-width:420px){.usa-seg-item{padding:8px 9px}}@media (prefers-reduced-motion:reduce){.usa-seg-item{transition:none}}";
|
|
2722
2722
|
|
|
2723
2723
|
const SEGMENTED_VARIANTS = ['ios', 'pill', 'outline'];
|
|
2724
2724
|
function defineSegmented(tag = 'usa-segmented') {
|
|
@@ -2812,10 +2812,10 @@ function defineSegmented(tag = 'usa-segmented') {
|
|
|
2812
2812
|
}
|
|
2813
2813
|
}
|
|
2814
2814
|
return UsaSegmented;
|
|
2815
|
-
}, { id: 'segmented', text: css$
|
|
2815
|
+
}, { id: 'segmented', text: css$d });
|
|
2816
2816
|
}
|
|
2817
2817
|
|
|
2818
|
-
var css$
|
|
2818
|
+
var css$c = "usa-switch{--usa-sw-c:#34c759;--usa-sw-w:52px;--usa-sw-h:30px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;vertical-align:middle;outline-offset:3px;border-radius:999px}usa-switch[disabled]{opacity:.45;cursor:not-allowed}.usa-sw-track{position:relative;flex:none;width:var(--usa-sw-w);height:var(--usa-sw-h);border-radius:999px;background:rgba(127,127,127,.35);overflow:hidden;transition:background .3s}.usa-sw-fill{position:absolute;inset:0;border-radius:999px;background:var(--usa-sw-c);transform:scale(0);transform-origin:calc(var(--usa-sw-h)/2) 50%;transition:transform .35s cubic-bezier(.4,0,.2,1)}usa-switch[data-on] .usa-sw-fill{transform:scale(1)}.usa-sw-thumb{position:absolute;top:3px;left:3px;width:calc(var(--usa-sw-h) - 6px);height:calc(var(--usa-sw-h) - 6px);border-radius:999px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:left .32s cubic-bezier(.3,1.25,.5,1),width .2s ease,background .3s,box-shadow .3s}usa-switch[data-on] .usa-sw-thumb{left:calc(var(--usa-sw-w) - var(--usa-sw-h) + 3px)}usa-switch[data-variant=\"ios\"][data-press] .usa-sw-thumb{width:calc(var(--usa-sw-h) + 2px)}usa-switch[data-variant=\"ios\"][data-press][data-on] .usa-sw-thumb{left:calc(var(--usa-sw-w) - var(--usa-sw-h) - 5px)}usa-switch[data-variant=\"daynight\"]{--usa-sw-w:64px;--usa-sw-h:32px}usa-switch[data-variant=\"daynight\"] .usa-sw-track{background:linear-gradient(#7dd3fc,#38bdf8)}usa-switch[data-variant=\"daynight\"] .usa-sw-fill{background:linear-gradient(#1e1b4b,#312e81);transform:none;opacity:0;transition:opacity .45s}usa-switch[data-variant=\"daynight\"][data-on] .usa-sw-fill{opacity:1}usa-switch[data-variant=\"daynight\"] .usa-sw-thumb{background:radial-gradient(circle at 40% 40%,#fde68a,#f59e0b);box-shadow:0 0 10px #fbbf24}usa-switch[data-variant=\"daynight\"][data-on] .usa-sw-thumb{background:radial-gradient(circle at 65% 35%,transparent 5px,#e5e7eb 5.5px);box-shadow:0 0 8px rgba(255,255,255,.5)}usa-switch[data-variant=\"daynight\"] .usa-sw-deco{position:absolute;inset:0;background:radial-gradient(circle,#fff 1px,transparent 1.5px) 12px 8px/14px 11px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s}usa-switch[data-variant=\"daynight\"][data-on] .usa-sw-deco{opacity:.9;transform:none}usa-switch[data-variant=\"bounce\"] .usa-sw-thumb{transition:left .28s cubic-bezier(.5,0,.75,0)}usa-switch[data-variant=\"liquid\"] .usa-sw-fill{background:linear-gradient(90deg,#22d3ee,#7c5cff)}usa-switch[data-variant=\"liquid\"] .usa-sw-thumb{transition:left .5s cubic-bezier(.68,-.4,.27,1.4)}usa-switch:focus-visible .usa-sw-track{box-shadow:0 0 0 3px rgba(124,92,255,.5)}@media (prefers-reduced-motion:reduce){.usa-sw-thumb,.usa-sw-fill,.usa-sw-deco,.usa-sw-track{transition:none!important}}";
|
|
2819
2819
|
|
|
2820
2820
|
const SWITCH_VARIANTS = ['ios', 'daynight', 'bounce', 'liquid'];
|
|
2821
2821
|
function defineSwitch(tag = 'usa-switch') {
|
|
@@ -2903,10 +2903,10 @@ function defineSwitch(tag = 'usa-switch') {
|
|
|
2903
2903
|
}
|
|
2904
2904
|
}
|
|
2905
2905
|
return UsaSwitch;
|
|
2906
|
-
}, { id: 'switch', text: css$
|
|
2906
|
+
}, { id: 'switch', text: css$c });
|
|
2907
2907
|
}
|
|
2908
2908
|
|
|
2909
|
-
var css$
|
|
2909
|
+
var css$b = "usa-kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(140px,1fr);gap:12px;max-width:100%;overflow-x:auto;padding:4px;font:500 13px/1.35 system-ui,sans-serif}.usa-kb-col{display:flex;flex-direction:column;gap:8px;min-height:80px;padding:10px;border-radius:14px;background:rgba(127,127,127,.12);margin:0;list-style:none}.usa-kb-col>h1,.usa-kb-col>h2,.usa-kb-col>h3,.usa-kb-col>h4{margin:0 0 2px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}.usa-kb-card{padding:10px 12px;border-radius:10px;background:var(--usa-kb-card,#fff);color:#111;box-shadow:0 1px 3px rgba(0,0,0,.14);cursor:grab;touch-action:none;user-select:none;outline-offset:2px}.usa-kb-card:focus-visible{outline:2px solid #7c5cff}.usa-kb-lifted{cursor:grabbing;box-shadow:0 18px 30px -8px rgba(0,0,0,.35);transition:transform .12s}.usa-kb-held{outline:2px dashed #7c5cff;transform:scale(1.03)}.usa-kb-ph{border-radius:10px;border:2px dashed rgba(124,92,255,.5);background:rgba(124,92,255,.08)}.usa-kb-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media (prefers-reduced-motion:reduce){.usa-kb-lifted,.usa-kb-held{transition:none;transform:none!important}}";
|
|
2910
2910
|
|
|
2911
2911
|
function defineKanban(tag = 'usa-kanban') {
|
|
2912
2912
|
return defineElement(tag, (Base) => {
|
|
@@ -3111,10 +3111,10 @@ function defineKanban(tag = 'usa-kanban') {
|
|
|
3111
3111
|
}
|
|
3112
3112
|
}
|
|
3113
3113
|
return UsaKanban;
|
|
3114
|
-
}, { id: 'kanban', text: css$
|
|
3114
|
+
}, { id: 'kanban', text: css$b });
|
|
3115
3115
|
}
|
|
3116
3116
|
|
|
3117
|
-
var css$
|
|
3117
|
+
var css$a = "usa-swipe-deck{position:relative;display:grid;width:var(--usa-sd-w,240px);max-width:100%;height:var(--usa-sd-h,300px);touch-action:pan-y;outline-offset:6px;border-radius:18px}.usa-sd-card{grid-area:1/1;position:relative;display:grid;place-items:center;border-radius:18px;background:var(--usa-sd-bg,linear-gradient(160deg,#7c5cff,#22d3ee));color:#fff;font:800 22px/1.2 system-ui,sans-serif;box-shadow:0 12px 28px -10px rgba(0,0,0,.4);transition:transform .3s cubic-bezier(.3,1.3,.5,1),opacity .3s;user-select:none;cursor:grab;overflow:hidden;touch-action:none}.usa-sd-card.usa-sd-dragging{transition:none;cursor:grabbing}.usa-sd-stamp{position:absolute;top:18px;padding:4px 10px;border:3px solid currentColor;border-radius:8px;font:900 20px/1 system-ui,sans-serif;letter-spacing:.1em;opacity:0;pointer-events:none}.usa-sd-like{left:16px;color:#4ade80;transform:rotate(-14deg)}.usa-sd-nope{right:16px;color:#f87171;transform:rotate(14deg)}@media (prefers-reduced-motion:reduce){.usa-sd-card{transition:none}}";
|
|
3118
3118
|
|
|
3119
3119
|
function defineSwipeDeck(tag = 'usa-swipe-deck') {
|
|
3120
3120
|
return defineElement(tag, (Base) => {
|
|
@@ -3256,10 +3256,10 @@ function defineSwipeDeck(tag = 'usa-swipe-deck') {
|
|
|
3256
3256
|
}
|
|
3257
3257
|
}
|
|
3258
3258
|
return UsaSwipeDeck;
|
|
3259
|
-
}, { id: 'swipe-deck', text: css$
|
|
3259
|
+
}, { id: 'swipe-deck', text: css$a });
|
|
3260
3260
|
}
|
|
3261
3261
|
|
|
3262
|
-
var css$
|
|
3262
|
+
var css$9 = "usa-weather-card{--usa-wc-sky:linear-gradient(160deg,#38bdf8,#0ea5e9);position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;width:var(--usa-wc-w,260px);max-width:100%;padding:16px 18px;border-radius:20px;background:var(--usa-wc-sky);color:#fff;overflow:hidden;font:500 13px/1.3 system-ui,sans-serif;box-shadow:0 12px 30px -12px rgba(2,6,23,.5);transition:background .6s}usa-weather-card[data-condition=\"cloudy\"]{--usa-wc-sky:linear-gradient(160deg,#94a3b8,#64748b)}usa-weather-card[data-condition=\"rain\"]{--usa-wc-sky:linear-gradient(160deg,#475569,#1e3a8a)}usa-weather-card[data-condition=\"snow\"]{--usa-wc-sky:linear-gradient(160deg,#cbd5e1,#60a5fa);color:#0f172a}usa-weather-card[data-condition=\"storm\"]{--usa-wc-sky:linear-gradient(160deg,#1e293b,#312e81)}usa-weather-card[data-condition=\"fog\"]{--usa-wc-sky:linear-gradient(160deg,#9ca3af,#d1d5db);color:#1f2937}usa-weather-card[data-condition=\"night\"]{--usa-wc-sky:linear-gradient(160deg,#0f172a,#1e1b4b)}.usa-wc-scene{position:relative;width:76px;height:64px}.usa-wc-icon{position:absolute;inset:0}.usa-wc-icon *{position:absolute;display:block}.usa-wc-text{display:flex;flex-direction:column;gap:2px;min-width:0}.usa-wc-temp{font:800 34px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums}.usa-wc-place{opacity:.8;font-size:12px}.usa-wc-sun{left:14px;top:8px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle,#fde047 55%,transparent 56%);animation:usa-wc-spin 14s linear infinite}.usa-wc-sun::before{content:\"\";position:absolute;inset:-8px;border-radius:50%;background:repeating-conic-gradient(#fde047 0 8deg,transparent 8deg 30deg);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%,#000 70%,transparent 72%);mask:radial-gradient(circle,transparent 58%,#000 60%,#000 70%,transparent 72%)}.usa-wc-moon{left:18px;top:6px;width:40px;height:40px;border-radius:50%;box-shadow:-10px 6px 0 2px #f1f5f9;transform:rotate(-20deg)}.usa-wc-star{width:3px;height:3px;border-radius:50%;background:#fff;left:calc(8px + var(--i) * 14px);top:calc(40px + (var(--i) * 7px) % 20px);animation:usa-wc-tw 1.8s calc(var(--i) * .35s) ease-in-out infinite alternate}.usa-wc-cloud{left:8px;top:14px;width:56px;height:22px;border-radius:12px;background:#f1f5f9;animation:usa-wc-drift 4s ease-in-out infinite alternate}.usa-wc-cloud::before{content:\"\";position:absolute;left:12px;top:-12px;width:26px;height:26px;border-radius:50%;background:inherit}.usa-wc-c2{left:22px;top:6px;transform:scale(.7);opacity:.75;animation-delay:-2s}.usa-wc-dark{background:#94a3b8}.usa-wc-drop{left:calc(16px + var(--i) * 8px);top:38px;width:2px;height:9px;border-radius:2px;background:#bfdbfe;animation:usa-wc-fall .9s calc(var(--i) * .17s) linear infinite}.usa-wc-flake{left:calc(14px + var(--i) * 9px);top:38px;width:6px;height:6px;border-radius:50%;background:#fff;animation:usa-wc-snow 2.4s calc(var(--i) * .4s) linear infinite}.usa-wc-bolt{left:30px;top:30px;width:14px;height:26px;background:#fde047;clip-path:polygon(40% 0,100% 0,60% 45%,100% 45%,20% 100%,40% 55%,0 55%);animation:usa-wc-bolt 4s ease-in-out infinite}.usa-wc-fogband{left:4px;top:calc(14px + var(--i) * 14px);width:66px;height:6px;border-radius:6px;background:rgba(255,255,255,.85);animation:usa-wc-drift calc(3s + var(--i) * .8s) ease-in-out infinite alternate}@keyframes usa-wc-spin{to{transform:rotate(360deg)}}@keyframes usa-wc-tw{from{opacity:.2}to{opacity:1}}@keyframes usa-wc-drift{from{translate:-4px 0}to{translate:6px 0}}@keyframes usa-wc-fall{from{translate:0 0;opacity:1}to{translate:-3px 22px;opacity:0}}@keyframes usa-wc-snow{from{translate:0 0;opacity:1}50%{translate:4px 12px}to{translate:-2px 24px;opacity:0}}@keyframes usa-wc-bolt{0%,86%,100%{opacity:.35}90%{opacity:1}}@media (prefers-reduced-motion:reduce){usa-weather-card *{animation:none!important}}";
|
|
3263
3263
|
|
|
3264
3264
|
const WEATHER_CONDITIONS = ['clear', 'cloudy', 'rain', 'snow', 'storm', 'fog', 'night'];
|
|
3265
3265
|
const LABEL = { clear: 'Clear', cloudy: 'Cloudy', rain: 'Rain', snow: 'Snow', storm: 'Thunderstorm', fog: 'Fog', night: 'Clear night' };
|
|
@@ -3340,10 +3340,10 @@ function defineWeatherCard(tag = 'usa-weather-card') {
|
|
|
3340
3340
|
}
|
|
3341
3341
|
}
|
|
3342
3342
|
return UsaWeatherCard;
|
|
3343
|
-
}, { id: 'weather-card', text: css$
|
|
3343
|
+
}, { id: 'weather-card', text: css$9 });
|
|
3344
3344
|
}
|
|
3345
3345
|
|
|
3346
|
-
var css$
|
|
3346
|
+
var css$8 = "usa-pull-cord{--usa-pc-color:#cbd5e1;--usa-pc-light:#fde68a;position:relative;display:inline-flex;flex-direction:column;align-items:center;width:90px;height:190px;cursor:pointer;touch-action:none;user-select:none;outline-offset:4px;border-radius:12px}.usa-pc-lamp{position:relative;width:76px;height:38px;border-radius:38px 38px 6px 6px;background:linear-gradient(#475569,#334155);box-shadow:0 0 0 rgba(253,230,138,0);transition:box-shadow .35s,background .35s}.usa-pc-lamp::after{content:\"\";position:absolute;left:50%;bottom:-10px;width:22px;height:12px;margin-left:-11px;border-radius:0 0 12px 12px;background:#64748b;transition:background .35s,box-shadow .35s}usa-pull-cord[data-on] .usa-pc-lamp{background:linear-gradient(#f59e0b,#d97706);box-shadow:0 30px 60px 10px rgba(253,230,138,.55)}usa-pull-cord[data-on] .usa-pc-lamp::after{background:var(--usa-pc-light);box-shadow:0 0 22px 8px var(--usa-pc-light)}.usa-pc-svg{width:80px;height:150px;margin-top:-2px;overflow:visible}.usa-pc-cord{fill:none;stroke:var(--usa-pc-color);stroke-width:2.2;stroke-linecap:round}.usa-pc-knob{fill:#e2e8f0;stroke:#94a3b8;stroke-width:1.5}usa-pull-cord[data-on] .usa-pc-knob{fill:var(--usa-pc-light)}@media (prefers-reduced-motion:reduce){.usa-pc-lamp,.usa-pc-lamp::after{transition:none}}";
|
|
3347
3347
|
|
|
3348
3348
|
function definePullCord(tag = 'usa-pull-cord') {
|
|
3349
3349
|
return defineElement(tag, (Base) => {
|
|
@@ -3472,10 +3472,10 @@ function definePullCord(tag = 'usa-pull-cord') {
|
|
|
3472
3472
|
}
|
|
3473
3473
|
}
|
|
3474
3474
|
return UsaPullCord;
|
|
3475
|
-
}, { id: 'pull-cord', text: css$
|
|
3475
|
+
}, { id: 'pull-cord', text: css$8 });
|
|
3476
3476
|
}
|
|
3477
3477
|
|
|
3478
|
-
var css$
|
|
3478
|
+
var css$7 = "usa-date-picker{--usa-dp-c:#7c5cff;display:inline-block;width:var(--usa-dp-w,280px);max-width:100%;padding:12px;border-radius:16px;background:var(--usa-dp-bg,#fff);color:#111827;box-shadow:0 10px 30px -12px rgba(0,0,0,.3);font:500 13px/1 system-ui,sans-serif;user-select:none}.usa-dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.usa-dp-title{font-weight:700;font-size:14px}.usa-dp-nav{width:30px;height:30px;border:0;border-radius:8px;background:none;color:inherit;font-size:18px;cursor:pointer}.usa-dp-nav:hover{background:rgba(127,127,127,.14)}.usa-dp-viewport{overflow:hidden}.usa-dp-row{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.usa-dp-dow{margin-bottom:4px;font-size:11px;opacity:.55;text-align:center}.usa-dp-day{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;cursor:pointer;font-variant-numeric:tabular-nums;outline:none;transition:background .2s,color .2s}.usa-dp-day:hover{background:rgba(124,92,255,.12)}.usa-dp-day[data-out]{opacity:.35}.usa-dp-day[data-today]{box-shadow:inset 0 0 0 1.5px var(--usa-dp-c)}.usa-dp-day[aria-selected=\"true\"]{background:var(--usa-dp-c);color:#fff}.usa-dp-day[aria-disabled]{opacity:.2;cursor:not-allowed;text-decoration:line-through}.usa-dp-day:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--usa-dp-c)}@media (prefers-reduced-motion:reduce){.usa-dp-day{transition:none}}";
|
|
3479
3479
|
|
|
3480
3480
|
const iso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
|
3481
3481
|
/** Parse `YYYY-MM-DD` as a local date (or null). */
|
|
@@ -3624,10 +3624,10 @@ function defineDatePicker(tag = 'usa-date-picker') {
|
|
|
3624
3624
|
}
|
|
3625
3625
|
}
|
|
3626
3626
|
return UsaDatePicker;
|
|
3627
|
-
}, { id: 'date-picker', text: css$
|
|
3627
|
+
}, { id: 'date-picker', text: css$7 });
|
|
3628
3628
|
}
|
|
3629
3629
|
|
|
3630
|
-
var css$
|
|
3630
|
+
var css$6 = "usa-color-picker{display:inline-flex;flex-direction:column;gap:10px;width:var(--usa-cp-w,240px);max-width:100%;padding:12px;border-radius:16px;background:var(--usa-cp-bg,#fff);box-shadow:0 10px 30px -12px rgba(0,0,0,.3)}.usa-cp-sv{position:relative;height:140px;border-radius:10px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(var(--usa-cp-h) 100% 50%));cursor:crosshair;touch-action:none;outline-offset:2px}.usa-cp-thumb{position:absolute;left:var(--usa-cp-x);top:var(--usa-cp-y);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--usa-cp-color);box-shadow:0 0 0 3px #fff,0 2px 6px rgba(0,0,0,.4);pointer-events:none;transition:left .18s cubic-bezier(.3,1.4,.5,1),top .18s cubic-bezier(.3,1.4,.5,1),transform .2s}[data-drag]>.usa-cp-thumb{transition:none;transform:scale(1.2)}.usa-cp-row{display:flex;align-items:center;gap:10px}.usa-cp-chip{flex:none;width:30px;height:30px;border-radius:50%;background:var(--usa-cp-color);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}.usa-cp-hue{position:relative;flex:1;height:14px;border-radius:7px;background:linear-gradient(90deg,red,#ff0,lime,cyan,blue,#f0f,red);cursor:pointer;touch-action:none;outline-offset:2px}.usa-cp-hue .usa-cp-thumb{left:var(--usa-cp-hx);top:50%;background:hsl(var(--usa-cp-h) 100% 50%)}.usa-cp-swatches{display:flex;flex-wrap:wrap;gap:6px}.usa-cp-sw{width:22px;height:22px;border:0;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}.usa-cp-sv:focus-visible,.usa-cp-hue:focus-visible,.usa-cp-sw:focus-visible{outline:2px solid #7c5cff}@media (prefers-reduced-motion:reduce){.usa-cp-thumb{transition:none}}";
|
|
3631
3631
|
|
|
3632
3632
|
/** HSV (h 0–360, s / v 0–1) → `#rrggbb`. */
|
|
3633
3633
|
function hsvToHex(h, s, v) {
|
|
@@ -3747,10 +3747,10 @@ function defineColorPicker(tag = 'usa-color-picker') {
|
|
|
3747
3747
|
}
|
|
3748
3748
|
}
|
|
3749
3749
|
return UsaColorPicker;
|
|
3750
|
-
}, { id: 'color-picker', text: css$
|
|
3750
|
+
}, { id: 'color-picker', text: css$6 });
|
|
3751
3751
|
}
|
|
3752
3752
|
|
|
3753
|
-
var css$
|
|
3753
|
+
var css$5 = "usa-file-drop{--usa-fd-c:#7c5cff;display:flex;flex-direction:column;gap:10px;width:var(--usa-fd-w,300px);max-width:100%;font:500 13px/1.3 system-ui,sans-serif}.usa-fd-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;padding:16px;border-radius:16px;background:rgba(124,92,255,.06);cursor:pointer;text-align:center;outline-offset:3px;transition:background .25s,transform .25s}.usa-fd-ants{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.usa-fd-ants rect{fill:none;stroke:rgba(124,92,255,.55);stroke-width:2;stroke-dasharray:8 6}usa-file-drop[data-over] .usa-fd-zone{background:rgba(124,92,255,.14);transform:scale(1.02)}usa-file-drop[data-over] .usa-fd-ants rect{stroke:var(--usa-fd-c);animation:usa-fd-march .6s linear infinite}.usa-fd-icon{font-size:30px;color:var(--usa-fd-c);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}usa-file-drop[data-over] .usa-fd-icon{transform:translateY(-8px) scale(1.15)}.usa-fd-zone:focus-visible{outline:2px solid var(--usa-fd-c)}.usa-fd-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}.usa-fd-item{--usa-fd-p:0;position:relative;display:grid;grid-template-columns:1fr auto 18px;align-items:center;gap:4px 8px;padding:8px 10px;border-radius:10px;background:rgba(127,127,127,.1)}.usa-fd-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.usa-fd-size{opacity:.6;font-size:12px}.usa-fd-bar{grid-column:1/3;height:4px;border-radius:4px;background:rgba(127,127,127,.25);overflow:hidden}.usa-fd-fill{display:block;height:100%;background:var(--usa-fd-c);transform-origin:0 50%;transform:scaleX(var(--usa-fd-p));transition:transform .2s}.usa-fd-check{grid-row:1/3;grid-column:3;width:18px;height:18px;fill:none;stroke:#22c55e;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .4s}.usa-fd-item[data-done] .usa-fd-check{stroke-dashoffset:0}@keyframes usa-fd-march{to{stroke-dashoffset:-14}}@media (prefers-reduced-motion:reduce){usa-file-drop *{animation:none!important;transition:none!important}usa-file-drop[data-over] .usa-fd-zone,usa-file-drop[data-over] .usa-fd-icon{transform:none}}";
|
|
3754
3754
|
|
|
3755
3755
|
const size = (n) => (n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(1)} KB` : `${(n / 1048576).toFixed(1)} MB`);
|
|
3756
3756
|
function defineFileDrop(tag = 'usa-file-drop') {
|
|
@@ -3851,10 +3851,10 @@ function defineFileDrop(tag = 'usa-file-drop') {
|
|
|
3851
3851
|
}
|
|
3852
3852
|
}
|
|
3853
3853
|
return UsaFileDrop;
|
|
3854
|
-
}, { id: 'file-drop', text: css$
|
|
3854
|
+
}, { id: 'file-drop', text: css$5 });
|
|
3855
3855
|
}
|
|
3856
3856
|
|
|
3857
|
-
var css = "usa-keyframe-editor{--usa-ke-c:#7c5cff;--usa-ke-head:100%;display:flex;flex-direction:column;gap:8px;width:var(--usa-ke-w,100%);max-width:100%;padding:10px;border-radius:14px;background:var(--usa-ke-bg,#0f172a);color:#e2e8f0;font:500 12px/1.2 system-ui,sans-serif}.usa-ke-bar{display:flex;align-items:center;gap:8px}.usa-ke-play{width:30px;height:30px;border:0;border-radius:50%;background:var(--usa-ke-c);color:#fff;cursor:pointer}.usa-ke-scrub{flex:1;min-width:0;accent-color:var(--usa-ke-c)}.usa-ke-time{min-width:58px;text-align:right;font-variant-numeric:tabular-nums;opacity:.8}.usa-ke-tracks{position:relative;display:flex;flex-direction:column;gap:4px}.usa-ke-tracks::after{content:\"\";position:absolute;top:0;bottom:0;left:calc(64px + (100% - 64px) * var(--usa-ke-head) / 100%);width:2px;background:#f43f5e;pointer-events:none}.usa-ke-row{display:grid;grid-template-columns:64px 1fr;align-items:center}.usa-ke-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:6px;opacity:.85}.usa-ke-lane{position:relative;height:22px;border-radius:6px;background:rgba(148,163,184,.14)}.usa-ke-clip{position:absolute;top:2px;bottom:2px;border-radius:5px;background:linear-gradient(90deg,var(--usa-ke-c),#22d3ee);cursor:grab;touch-action:none;outline-offset:2px;transition:left .2s,width .2s}.usa-ke-clip[data-drag]{cursor:grabbing;transition:none;box-shadow:0 4px 12px rgba(0,0,0,.4)}.usa-ke-clip:focus-visible{outline:2px solid #fff}.usa-ke-grip{position:absolute;right:0;top:0;bottom:0;width:8px;border-radius:0 5px 5px 0;background:rgba(255,255,255,.35);cursor:ew-resize}@media (prefers-reduced-motion:reduce){.usa-ke-clip{transition:none}}";
|
|
3857
|
+
var css$4 = "usa-keyframe-editor{--usa-ke-c:#7c5cff;--usa-ke-head:100%;display:flex;flex-direction:column;gap:8px;width:var(--usa-ke-w,100%);max-width:100%;padding:10px;border-radius:14px;background:var(--usa-ke-bg,#0f172a);color:#e2e8f0;font:500 12px/1.2 system-ui,sans-serif}.usa-ke-bar{display:flex;align-items:center;gap:8px}.usa-ke-play{width:30px;height:30px;border:0;border-radius:50%;background:var(--usa-ke-c);color:#fff;cursor:pointer}.usa-ke-scrub{flex:1;min-width:0;accent-color:var(--usa-ke-c)}.usa-ke-time{min-width:58px;text-align:right;font-variant-numeric:tabular-nums;opacity:.8}.usa-ke-tracks{position:relative;display:flex;flex-direction:column;gap:4px}.usa-ke-tracks::after{content:\"\";position:absolute;top:0;bottom:0;left:calc(64px + (100% - 64px) * var(--usa-ke-head) / 100%);width:2px;background:#f43f5e;pointer-events:none}.usa-ke-row{display:grid;grid-template-columns:64px 1fr;align-items:center}.usa-ke-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:6px;opacity:.85}.usa-ke-lane{position:relative;height:22px;border-radius:6px;background:rgba(148,163,184,.14)}.usa-ke-clip{position:absolute;top:2px;bottom:2px;border-radius:5px;background:linear-gradient(90deg,var(--usa-ke-c),#22d3ee);cursor:grab;touch-action:none;outline-offset:2px;transition:left .2s,width .2s}.usa-ke-clip[data-drag]{cursor:grabbing;transition:none;box-shadow:0 4px 12px rgba(0,0,0,.4)}.usa-ke-clip:focus-visible{outline:2px solid #fff}.usa-ke-grip{position:absolute;right:0;top:0;bottom:0;width:8px;border-radius:0 5px 5px 0;background:rgba(255,255,255,.35);cursor:ew-resize}@media (prefers-reduced-motion:reduce){.usa-ke-clip{transition:none}}";
|
|
3858
3858
|
|
|
3859
3859
|
const DEFAULT = {
|
|
3860
3860
|
format: ANIMATION_FORMAT,
|
|
@@ -4028,7 +4028,481 @@ function defineKeyframeEditor(tag = 'usa-keyframe-editor') {
|
|
|
4028
4028
|
}
|
|
4029
4029
|
}
|
|
4030
4030
|
return UsaKeyframeEditor;
|
|
4031
|
-
}, { id: 'keyframe-editor', text: css });
|
|
4031
|
+
}, { id: 'keyframe-editor', text: css$4 });
|
|
4032
|
+
}
|
|
4033
|
+
|
|
4034
|
+
var css$3 = "usa-music-player{--usa-mp-c:#7c5cff;--usa-mp-p:0;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;width:var(--usa-mp-w,320px);max-width:100%;padding:14px;border-radius:20px;background:var(--usa-mp-bg,linear-gradient(160deg,#111827,#1e1b4b));color:#f8fafc;font:500 13px/1.3 system-ui,sans-serif;box-shadow:0 14px 34px -14px rgba(0,0,0,.55)}.usa-mp-cover{width:84px;height:84px}.usa-mp-disc{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,#0f172a 9%,#e2e8f0 9.5%,#e2e8f0 12%,transparent 12.5%),repeating-radial-gradient(circle,#111 0 2px,#1f2937 2px 4px),#111;background-size:cover;box-shadow:0 6px 18px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.06)}usa-music-player[data-animate] .usa-mp-disc{animation:usa-mp-spin 1.8s linear infinite}.usa-mp-body{display:flex;flex-direction:column;gap:6px;min-width:0}.usa-mp-meta{display:flex;flex-direction:column;min-width:0}.usa-mp-title{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.usa-mp-artist{opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.usa-mp-bars{display:flex;gap:3px;align-items:flex-end;height:14px}.usa-mp-bars i{width:3px;height:30%;border-radius:2px;background:var(--usa-mp-c);transition:height .3s}usa-music-player[data-animate] .usa-mp-bars i{animation:usa-mp-bar .9s ease-in-out infinite alternate}.usa-mp-bars i:nth-child(2){animation-delay:-.3s!important}.usa-mp-bars i:nth-child(3){animation-delay:-.6s!important}.usa-mp-bars i:nth-child(4){animation-delay:-.15s!important}.usa-mp-track{position:relative;height:6px;border-radius:6px;background:rgba(255,255,255,.18);cursor:pointer;touch-action:none;outline-offset:4px}.usa-mp-fill{position:absolute;inset:0;border-radius:inherit;background:var(--usa-mp-c);transform-origin:0 50%;transform:scaleX(var(--usa-mp-p))}.usa-mp-knob{position:absolute;top:50%;left:calc(var(--usa-mp-p) * 100%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);transition:transform .2s}.usa-mp-track:hover .usa-mp-knob,.usa-mp-track:focus-visible .usa-mp-knob{transform:scale(1.3)}.usa-mp-times{display:flex;justify-content:space-between;font-size:11px;opacity:.65;font-variant-numeric:tabular-nums}.usa-mp-ctrls{display:flex;align-items:center;justify-content:center;gap:12px}.usa-mp-btn{border:0;background:none;color:inherit;font-size:16px;cursor:pointer;opacity:.85}.usa-mp-play{position:relative;width:40px;height:40px;border:0;border-radius:50%;background:#fff;cursor:pointer}.usa-mp-icon{position:absolute;left:50%;top:50%;width:14px;height:16px;margin:-8px 0 0 -6px;background:var(--usa-mp-c);clip-path:polygon(0 0,100% 50%,100% 50%,0 100%);transition:clip-path .3s cubic-bezier(.6,.05,.3,1)}usa-music-player[data-playing] .usa-mp-icon{margin-left:-7px;clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}.usa-mp-btn:focus-visible,.usa-mp-play:focus-visible,.usa-mp-track:focus-visible{outline:2px solid #fff}@keyframes usa-mp-spin{to{transform:rotate(360deg)}}@keyframes usa-mp-bar{from{height:20%}to{height:100%}}@media (prefers-reduced-motion:reduce){usa-music-player *{animation:none!important;transition:none!important}}";
|
|
4035
|
+
|
|
4036
|
+
const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`;
|
|
4037
|
+
function defineMusicPlayer(tag = 'usa-music-player') {
|
|
4038
|
+
return defineElement(tag, (Base) => {
|
|
4039
|
+
class UsaMusicPlayer extends Base {
|
|
4040
|
+
constructor() {
|
|
4041
|
+
super(...arguments);
|
|
4042
|
+
this._audio = null;
|
|
4043
|
+
this._playing = false;
|
|
4044
|
+
this._t = 0;
|
|
4045
|
+
this._raf = 0;
|
|
4046
|
+
this._last = 0;
|
|
4047
|
+
this.tick = (now) => {
|
|
4048
|
+
if (!this._playing)
|
|
4049
|
+
return;
|
|
4050
|
+
if (!this._audio) {
|
|
4051
|
+
this._t += this._last ? (now - this._last) / 1000 : 0;
|
|
4052
|
+
this._last = now;
|
|
4053
|
+
if (this._t >= this.duration) {
|
|
4054
|
+
this._t = this.duration;
|
|
4055
|
+
this.sync();
|
|
4056
|
+
return this.pause();
|
|
4057
|
+
}
|
|
4058
|
+
this.sync();
|
|
4059
|
+
}
|
|
4060
|
+
this._raf = requestAnimationFrame(this.tick);
|
|
4061
|
+
};
|
|
4062
|
+
}
|
|
4063
|
+
static get observedAttributes() {
|
|
4064
|
+
return ['title', 'artist', 'cover', 'src'];
|
|
4065
|
+
}
|
|
4066
|
+
get playing() {
|
|
4067
|
+
return this._playing;
|
|
4068
|
+
}
|
|
4069
|
+
get duration() {
|
|
4070
|
+
const d = this._audio?.duration;
|
|
4071
|
+
return d && Number.isFinite(d) ? d : Math.max(1, this.num('duration', 180));
|
|
4072
|
+
}
|
|
4073
|
+
get currentTime() {
|
|
4074
|
+
return this._audio ? this._audio.currentTime : this._t;
|
|
4075
|
+
}
|
|
4076
|
+
set currentTime(v) {
|
|
4077
|
+
this.seek(v);
|
|
4078
|
+
}
|
|
4079
|
+
mount() {
|
|
4080
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
4081
|
+
this._audio = this.querySelector(':scope > audio');
|
|
4082
|
+
if (!this._audio && this.str('src', '')) {
|
|
4083
|
+
this._audio = document.createElement('audio');
|
|
4084
|
+
this._audio.src = this.str('src', '');
|
|
4085
|
+
this._audio.preload = 'metadata';
|
|
4086
|
+
this._audio.setAttribute('data-usa-part', '');
|
|
4087
|
+
this.appendChild(this._audio);
|
|
4088
|
+
}
|
|
4089
|
+
this.setAttribute('role', 'group');
|
|
4090
|
+
this.setAttribute('aria-roledescription', 'music player');
|
|
4091
|
+
const title = this.str('title', 'Untitled');
|
|
4092
|
+
const artist = this.str('artist', '');
|
|
4093
|
+
this.setAttribute('aria-label', artist ? `${title} — ${artist}` : title);
|
|
4094
|
+
const cover = this.str('cover', '');
|
|
4095
|
+
this.insertAdjacentHTML('afterbegin', `<div class="usa-mp-cover" data-usa-part aria-hidden="true"><span class="usa-mp-disc"${cover ? ` style="background-image:url('${cover.replace(/'/g, '%27')}')"` : ''}></span></div><div class="usa-mp-body" data-usa-part><div class="usa-mp-meta"><b class="usa-mp-title"></b><span class="usa-mp-artist"></span></div><div class="usa-mp-bars" aria-hidden="true"><i></i><i></i><i></i><i></i></div><div class="usa-mp-track" role="slider" tabindex="0" aria-label="Seek" aria-valuemin="0"><span class="usa-mp-fill"></span><span class="usa-mp-knob"></span></div><div class="usa-mp-times"><span class="usa-mp-cur">0:00</span><span class="usa-mp-dur"></span></div><div class="usa-mp-ctrls"><button type="button" class="usa-mp-btn" data-act="prev" aria-label="Previous">⏮</button><button type="button" class="usa-mp-play" data-act="play" aria-label="Play"><span class="usa-mp-icon"></span></button><button type="button" class="usa-mp-btn" data-act="next" aria-label="Next">⏭</button></div></div>`);
|
|
4096
|
+
this.querySelector('.usa-mp-title').textContent = title;
|
|
4097
|
+
this.querySelector('.usa-mp-artist').textContent = artist;
|
|
4098
|
+
this.listen(this, 'click', (e) => {
|
|
4099
|
+
const act = e.target.closest?.('[data-act]');
|
|
4100
|
+
if (!act)
|
|
4101
|
+
return;
|
|
4102
|
+
if (act.dataset.act === 'play')
|
|
4103
|
+
this.toggle();
|
|
4104
|
+
else
|
|
4105
|
+
this.emit(act.dataset.act, {});
|
|
4106
|
+
});
|
|
4107
|
+
const track = this.querySelector('.usa-mp-track');
|
|
4108
|
+
this.listen(track, 'pointerdown', (e) => {
|
|
4109
|
+
const at = (ev) => {
|
|
4110
|
+
const r = track.getBoundingClientRect();
|
|
4111
|
+
this.seek(clampN((ev.clientX - r.left) / (r.width || 1), 0, 1) * this.duration);
|
|
4112
|
+
};
|
|
4113
|
+
at(e);
|
|
4114
|
+
track.setPointerCapture?.(e.pointerId);
|
|
4115
|
+
const up = () => (track.removeEventListener('pointermove', at), track.removeEventListener('pointerup', up));
|
|
4116
|
+
track.addEventListener('pointermove', at);
|
|
4117
|
+
track.addEventListener('pointerup', up);
|
|
4118
|
+
});
|
|
4119
|
+
this.listen(track, 'keydown', (e) => {
|
|
4120
|
+
const d = e.key === 'ArrowRight' ? 5 : e.key === 'ArrowLeft' ? -5 : 0;
|
|
4121
|
+
if (!d)
|
|
4122
|
+
return;
|
|
4123
|
+
e.preventDefault();
|
|
4124
|
+
this.seek(this.currentTime + d);
|
|
4125
|
+
});
|
|
4126
|
+
if (this._audio) {
|
|
4127
|
+
this.listen(this._audio, 'timeupdate', () => this.sync());
|
|
4128
|
+
this.listen(this._audio, 'loadedmetadata', () => this.sync());
|
|
4129
|
+
this.listen(this._audio, 'ended', () => this.pause());
|
|
4130
|
+
}
|
|
4131
|
+
this.onCleanup(() => cancelAnimationFrame(this._raf));
|
|
4132
|
+
this.sync();
|
|
4133
|
+
}
|
|
4134
|
+
sync() {
|
|
4135
|
+
const d = this.duration;
|
|
4136
|
+
const t = this.currentTime;
|
|
4137
|
+
this.style.setProperty('--usa-mp-p', String(clampN(t / d, 0, 1)));
|
|
4138
|
+
const cur = this.querySelector('.usa-mp-cur');
|
|
4139
|
+
if (cur)
|
|
4140
|
+
cur.textContent = fmt(t);
|
|
4141
|
+
const dur = this.querySelector('.usa-mp-dur');
|
|
4142
|
+
if (dur)
|
|
4143
|
+
dur.textContent = fmt(d);
|
|
4144
|
+
const tr = this.querySelector('.usa-mp-track');
|
|
4145
|
+
tr?.setAttribute('aria-valuemax', String(Math.round(d)));
|
|
4146
|
+
tr?.setAttribute('aria-valuenow', String(Math.round(t)));
|
|
4147
|
+
tr?.setAttribute('aria-valuetext', `${fmt(t)} of ${fmt(d)}`);
|
|
4148
|
+
this.toggleAttribute('data-playing', this._playing);
|
|
4149
|
+
this.toggleAttribute('data-animate', this._playing && !this.reduced);
|
|
4150
|
+
const b = this.querySelector('.usa-mp-play');
|
|
4151
|
+
b?.setAttribute('aria-label', this._playing ? 'Pause' : 'Play');
|
|
4152
|
+
b?.setAttribute('aria-pressed', String(this._playing));
|
|
4153
|
+
}
|
|
4154
|
+
play() {
|
|
4155
|
+
if (this._playing)
|
|
4156
|
+
return;
|
|
4157
|
+
this._playing = true;
|
|
4158
|
+
if (this._audio)
|
|
4159
|
+
void this._audio.play()?.catch?.(() => undefined);
|
|
4160
|
+
this._last = 0;
|
|
4161
|
+
if (typeof requestAnimationFrame === 'function')
|
|
4162
|
+
this._raf = requestAnimationFrame(this.tick);
|
|
4163
|
+
this.sync();
|
|
4164
|
+
const icon = this.querySelector('.usa-mp-play');
|
|
4165
|
+
if (icon && !this.reduced)
|
|
4166
|
+
this.motion(icon, [{ transform: 'scale(.85)' }, { transform: 'scale(1.08)', offset: 0.6 }, { transform: 'scale(1)' }], { duration: 300, easing: 'ease-out' });
|
|
4167
|
+
this.emit('play', {});
|
|
4168
|
+
}
|
|
4169
|
+
pause() {
|
|
4170
|
+
if (!this._playing)
|
|
4171
|
+
return;
|
|
4172
|
+
this._playing = false;
|
|
4173
|
+
this._audio?.pause();
|
|
4174
|
+
cancelAnimationFrame(this._raf);
|
|
4175
|
+
this.sync();
|
|
4176
|
+
this.emit('pause', {});
|
|
4177
|
+
}
|
|
4178
|
+
toggle() {
|
|
4179
|
+
if (this._playing)
|
|
4180
|
+
this.pause();
|
|
4181
|
+
else
|
|
4182
|
+
this.play();
|
|
4183
|
+
}
|
|
4184
|
+
seek(s) {
|
|
4185
|
+
const t = clampN(s, 0, this.duration);
|
|
4186
|
+
if (this._audio)
|
|
4187
|
+
this._audio.currentTime = t;
|
|
4188
|
+
else
|
|
4189
|
+
this._t = t;
|
|
4190
|
+
this.sync();
|
|
4191
|
+
this.emit('seek', { time: t });
|
|
4192
|
+
}
|
|
4193
|
+
}
|
|
4194
|
+
return UsaMusicPlayer;
|
|
4195
|
+
}, { id: 'music-player', text: css$3 });
|
|
4196
|
+
}
|
|
4197
|
+
|
|
4198
|
+
var css$2 = "usa-volume-knob{--usa-vk-c:#22d3ee;--usa-vk-size:120px;position:relative;display:inline-grid;place-items:center;width:var(--usa-vk-size);height:var(--usa-vk-size);border-radius:50%;cursor:ns-resize;touch-action:none;user-select:none;outline-offset:6px}.usa-vk-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.usa-vk-arc path{fill:none;stroke-width:6;stroke-linecap:round}.usa-vk-bg{stroke:rgba(127,127,127,.25)}.usa-vk-val{stroke:var(--usa-vk-c);filter:drop-shadow(0 0 4px var(--usa-vk-c))}.usa-vk-ticks{position:absolute;inset:0}.usa-vk-ticks i{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:rgba(127,127,127,.4);transform:rotate(var(--a)) translateY(calc(var(--usa-vk-size) * -.5 + 2px));transition:background .2s,box-shadow .2s}.usa-vk-ticks i[data-on]{background:var(--usa-vk-c);box-shadow:0 0 6px var(--usa-vk-c)}.usa-vk-cap{position:relative;width:62%;height:62%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4b5563,#111827 70%);box-shadow:0 8px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.15);transform:rotate(var(--usa-vk-angle));transition:transform .35s cubic-bezier(.3,1.5,.5,1)}usa-volume-knob[data-drag] .usa-vk-cap{transition:none}.usa-vk-dot{position:absolute;left:50%;top:10%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--usa-vk-c);box-shadow:0 0 6px var(--usa-vk-c)}usa-volume-knob:focus-visible{outline:2px solid var(--usa-vk-c)}@media (prefers-reduced-motion:reduce){.usa-vk-cap,.usa-vk-ticks i{transition:none}}";
|
|
4199
|
+
|
|
4200
|
+
const ARC = 270;
|
|
4201
|
+
function defineVolumeKnob(tag = 'usa-volume-knob') {
|
|
4202
|
+
return defineElement(tag, (Base) => {
|
|
4203
|
+
class UsaVolumeKnob extends Base {
|
|
4204
|
+
constructor() {
|
|
4205
|
+
super(...arguments);
|
|
4206
|
+
this._v = 50;
|
|
4207
|
+
}
|
|
4208
|
+
static get observedAttributes() {
|
|
4209
|
+
return ['min', 'max'];
|
|
4210
|
+
}
|
|
4211
|
+
get value() {
|
|
4212
|
+
return this._v;
|
|
4213
|
+
}
|
|
4214
|
+
set value(v) {
|
|
4215
|
+
this.set(v, false);
|
|
4216
|
+
}
|
|
4217
|
+
mount() {
|
|
4218
|
+
this._v = clampN(this.num('value', 50), this.num('min', 0), this.num('max', 100));
|
|
4219
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
4220
|
+
const ticks = Array.from({ length: 21 }, (_, i) => `<i style="--a:${-ARC / 2 + (i / 20) * ARC}deg"></i>`).join('');
|
|
4221
|
+
this.insertAdjacentHTML('afterbegin', `<span class="usa-vk-ticks" data-usa-part aria-hidden="true">${ticks}</span><svg class="usa-vk-arc" data-usa-part aria-hidden="true" viewBox="0 0 100 100"><path class="usa-vk-bg" d="${this.arc(1)}"/><path class="usa-vk-val" d="${this.arc(1)}"/></svg><span class="usa-vk-cap" data-usa-part aria-hidden="true"><span class="usa-vk-dot"></span></span>`);
|
|
4222
|
+
this.setAttribute('role', 'slider');
|
|
4223
|
+
if (!this.hasAttribute('tabindex'))
|
|
4224
|
+
this.tabIndex = 0;
|
|
4225
|
+
if (!this.hasAttribute('aria-label'))
|
|
4226
|
+
this.setAttribute('aria-label', this.str('label', 'Volume'));
|
|
4227
|
+
this.setAttribute('aria-valuemin', String(this.num('min', 0)));
|
|
4228
|
+
this.setAttribute('aria-valuemax', String(this.num('max', 100)));
|
|
4229
|
+
this.listen(this, 'keydown', (e) => {
|
|
4230
|
+
const span = this.num('max', 100) - this.num('min', 0);
|
|
4231
|
+
const d = { ArrowUp: 1, ArrowRight: 1, ArrowDown: -1, ArrowLeft: -1, PageUp: span / 10, PageDown: -span / 10, Home: -Infinity, End: Infinity };
|
|
4232
|
+
if (!(e.key in d))
|
|
4233
|
+
return;
|
|
4234
|
+
e.preventDefault();
|
|
4235
|
+
this.set(this._v + d[e.key], true, true);
|
|
4236
|
+
});
|
|
4237
|
+
this.listen(this, 'wheel', (e) => {
|
|
4238
|
+
e.preventDefault();
|
|
4239
|
+
this.set(this._v - Math.sign(e.deltaY) * 2, true, true);
|
|
4240
|
+
}, { passive: false });
|
|
4241
|
+
this.listen(this, 'pointerdown', (e) => {
|
|
4242
|
+
const y0 = e.clientY;
|
|
4243
|
+
const v0 = this._v;
|
|
4244
|
+
const span = this.num('max', 100) - this.num('min', 0);
|
|
4245
|
+
this.setPointerCapture?.(e.pointerId);
|
|
4246
|
+
this.toggleAttribute('data-drag', true);
|
|
4247
|
+
const move = (ev) => this.set(v0 + ((y0 - ev.clientY) / 150) * span, true);
|
|
4248
|
+
const up = () => {
|
|
4249
|
+
this.removeAttribute('data-drag');
|
|
4250
|
+
this.removeEventListener('pointermove', move);
|
|
4251
|
+
this.removeEventListener('pointerup', up);
|
|
4252
|
+
this.emit('change', { value: this._v });
|
|
4253
|
+
};
|
|
4254
|
+
this.addEventListener('pointermove', move);
|
|
4255
|
+
this.addEventListener('pointerup', up);
|
|
4256
|
+
});
|
|
4257
|
+
this.paint();
|
|
4258
|
+
}
|
|
4259
|
+
/** SVG arc path for fraction `k` (0–1) of the 270° sweep. */
|
|
4260
|
+
arc(k) {
|
|
4261
|
+
const a0 = ((-ARC / 2 - 90) * Math.PI) / 180;
|
|
4262
|
+
const a1 = a0 + ((ARC * Math.max(0.0001, k)) * Math.PI) / 180;
|
|
4263
|
+
const p = (a) => `${(50 + 42 * Math.cos(a)).toFixed(2)} ${(50 + 42 * Math.sin(a)).toFixed(2)}`;
|
|
4264
|
+
return `M${p(a0)} A42 42 0 ${ARC * k > 180 ? 1 : 0} 1 ${p(a1)}`;
|
|
4265
|
+
}
|
|
4266
|
+
paint() {
|
|
4267
|
+
const lo = this.num('min', 0);
|
|
4268
|
+
const hi = this.num('max', 100);
|
|
4269
|
+
const k = (this._v - lo) / (hi - lo || 1);
|
|
4270
|
+
this.style.setProperty('--usa-vk-angle', `${-ARC / 2 + k * ARC}deg`);
|
|
4271
|
+
this.querySelector('.usa-vk-val')?.setAttribute('d', this.arc(k));
|
|
4272
|
+
this.querySelectorAll('.usa-vk-ticks i').forEach((t, i) => t.toggleAttribute('data-on', i / 20 <= k + 1e-6 && k > 0));
|
|
4273
|
+
this.setAttribute('aria-valuenow', String(Math.round(this._v)));
|
|
4274
|
+
this.setAttribute('value', String(Math.round(this._v)));
|
|
4275
|
+
}
|
|
4276
|
+
set(v, user, commit = false) {
|
|
4277
|
+
const n = clampN(Math.round(v), this.num('min', 0), this.num('max', 100));
|
|
4278
|
+
if (n === this._v)
|
|
4279
|
+
return;
|
|
4280
|
+
this._v = n;
|
|
4281
|
+
this.paint();
|
|
4282
|
+
if (user)
|
|
4283
|
+
this.emit('input', { value: n });
|
|
4284
|
+
if (commit)
|
|
4285
|
+
this.emit('change', { value: n });
|
|
4286
|
+
}
|
|
4287
|
+
}
|
|
4288
|
+
return UsaVolumeKnob;
|
|
4289
|
+
}, { id: 'volume-knob', text: css$2 });
|
|
4290
|
+
}
|
|
4291
|
+
|
|
4292
|
+
var css$1 = "usa-equalizer{--usa-eq-c:#7c5cff;position:relative;display:block;width:var(--usa-eq-w,320px);max-width:100%;padding:12px 10px 8px;border-radius:16px;background:var(--usa-eq-bg,#0f172a);color:#cbd5e1;font:600 10px/1 system-ui,sans-serif}.usa-eq-curve{position:absolute;left:10px;right:10px;top:12px;height:120px;width:calc(100% - 20px);pointer-events:none;overflow:visible}.usa-eq-curve path{fill:none;stroke:#22d3ee;stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:.8;transition:d .45s cubic-bezier(.3,1.3,.5,1)}.usa-eq-bands{display:flex;justify-content:space-between;gap:4px}.usa-eq-band{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0}.usa-eq-slot{--usa-eq-k:.5;position:relative;width:8px;height:120px;border-radius:6px;background:rgba(148,163,184,.18);cursor:ns-resize;touch-action:none;outline-offset:4px}.usa-eq-fill{position:absolute;left:0;right:0;top:calc((1 - max(var(--usa-eq-k),.5)) * 100%);bottom:calc(min(var(--usa-eq-k),.5) * 100%);border-radius:6px;background:var(--usa-eq-c)}.usa-eq-cap{position:absolute;left:50%;top:calc((1 - var(--usa-eq-k)) * 100%);width:20px;height:10px;margin:-5px 0 0 -10px;border-radius:4px;background:#f8fafc;box-shadow:0 2px 6px rgba(0,0,0,.5)}usa-equalizer[data-glide] .usa-eq-cap{transition:top .5s cubic-bezier(.3,1.4,.5,1)}usa-equalizer[data-glide] .usa-eq-fill{transition:top .5s cubic-bezier(.3,1.4,.5,1),bottom .5s cubic-bezier(.3,1.4,.5,1)}.usa-eq-slot[data-drag] .usa-eq-cap{transform:scale(1.15)}.usa-eq-slot:focus-visible{outline:2px solid #22d3ee}.usa-eq-label{opacity:.7;white-space:nowrap}@media (prefers-reduced-motion:reduce){.usa-eq-cap,.usa-eq-fill,.usa-eq-curve path{transition:none!important}}";
|
|
4293
|
+
|
|
4294
|
+
const EQ_PRESETS = {
|
|
4295
|
+
flat: [0, 0, 0, 0, 0, 0, 0],
|
|
4296
|
+
bass: [8, 6, 3, 0, -1, -1, 0],
|
|
4297
|
+
vocal: [-3, -1, 2, 5, 4, 1, -1],
|
|
4298
|
+
rock: [5, 3, -1, -2, 1, 4, 6],
|
|
4299
|
+
electronic: [6, 4, 0, -2, 2, 5, 7],
|
|
4300
|
+
};
|
|
4301
|
+
function defineEqualizer(tag = 'usa-equalizer') {
|
|
4302
|
+
return defineElement(tag, (Base) => {
|
|
4303
|
+
class UsaEqualizer extends Base {
|
|
4304
|
+
constructor() {
|
|
4305
|
+
super(...arguments);
|
|
4306
|
+
this._v = [];
|
|
4307
|
+
}
|
|
4308
|
+
static get observedAttributes() {
|
|
4309
|
+
return ['bands'];
|
|
4310
|
+
}
|
|
4311
|
+
get values() {
|
|
4312
|
+
return this._v.slice();
|
|
4313
|
+
}
|
|
4314
|
+
set values(v) {
|
|
4315
|
+
v.forEach((x, i) => (this._v[i] = clampN(Math.round(x), -12, 12)));
|
|
4316
|
+
this.paint(true);
|
|
4317
|
+
}
|
|
4318
|
+
mount() {
|
|
4319
|
+
const labels = this.str('bands', '60,150,400,1k,2.4k,6k,16k').split(',').map((s) => s.trim()).filter(Boolean);
|
|
4320
|
+
const pre = EQ_PRESETS[this.str('preset', 'flat')] || EQ_PRESETS.flat;
|
|
4321
|
+
this._v = labels.map((_, i) => pre[Math.round((i / Math.max(1, labels.length - 1)) * (pre.length - 1))] || 0);
|
|
4322
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
4323
|
+
this.setAttribute('role', 'group');
|
|
4324
|
+
if (!this.hasAttribute('aria-label'))
|
|
4325
|
+
this.setAttribute('aria-label', this.str('label', 'Equalizer'));
|
|
4326
|
+
const bands = labels.map((l, i) => `<div class="usa-eq-band"><div class="usa-eq-slot" role="slider" tabindex="0" aria-orientation="vertical" aria-valuemin="-12" aria-valuemax="12" aria-label="${l} Hz" data-i="${i}"><span class="usa-eq-fill"></span><span class="usa-eq-cap"></span></div><span class="usa-eq-label">${l}</span></div>`).join('');
|
|
4327
|
+
this.insertAdjacentHTML('afterbegin', `<svg class="usa-eq-curve" data-usa-part aria-hidden="true" preserveAspectRatio="none" viewBox="0 0 100 100"><path/></svg><div class="usa-eq-bands" data-usa-part>${bands}</div>`);
|
|
4328
|
+
this.querySelectorAll('.usa-eq-slot').forEach((slot) => {
|
|
4329
|
+
const i = Number(slot.dataset.i);
|
|
4330
|
+
this.listen(slot, 'keydown', (e) => {
|
|
4331
|
+
const d = { ArrowUp: 1, ArrowRight: 1, ArrowDown: -1, ArrowLeft: -1, PageUp: 3, PageDown: -3 };
|
|
4332
|
+
if (!(e.key in d))
|
|
4333
|
+
return;
|
|
4334
|
+
e.preventDefault();
|
|
4335
|
+
this.setBand(i, this._v[i] + d[e.key]);
|
|
4336
|
+
});
|
|
4337
|
+
this.listen(slot, 'pointerdown', (e) => {
|
|
4338
|
+
slot.setPointerCapture?.(e.pointerId);
|
|
4339
|
+
slot.toggleAttribute('data-drag', true);
|
|
4340
|
+
const at = (ev) => {
|
|
4341
|
+
const r = slot.getBoundingClientRect();
|
|
4342
|
+
this.setBand(i, 12 - clampN((ev.clientY - r.top) / (r.height || 1), 0, 1) * 24);
|
|
4343
|
+
};
|
|
4344
|
+
at(e);
|
|
4345
|
+
const up = () => (slot.removeAttribute('data-drag'), slot.removeEventListener('pointermove', at), slot.removeEventListener('pointerup', up));
|
|
4346
|
+
slot.addEventListener('pointermove', at);
|
|
4347
|
+
slot.addEventListener('pointerup', up);
|
|
4348
|
+
});
|
|
4349
|
+
});
|
|
4350
|
+
this.paint(false);
|
|
4351
|
+
}
|
|
4352
|
+
setBand(i, v) {
|
|
4353
|
+
const n = clampN(Math.round(v), -12, 12);
|
|
4354
|
+
if (n === this._v[i])
|
|
4355
|
+
return;
|
|
4356
|
+
this._v[i] = n;
|
|
4357
|
+
this.paint(false);
|
|
4358
|
+
this.emit('change', { values: this.values });
|
|
4359
|
+
}
|
|
4360
|
+
applyPreset(name) {
|
|
4361
|
+
const p = EQ_PRESETS[name];
|
|
4362
|
+
if (!p)
|
|
4363
|
+
return;
|
|
4364
|
+
const n = this._v.length;
|
|
4365
|
+
this._v = this._v.map((_, i) => p[Math.round((i / Math.max(1, n - 1)) * (p.length - 1))] || 0);
|
|
4366
|
+
this.paint(true);
|
|
4367
|
+
this.emit('change', { values: this.values });
|
|
4368
|
+
}
|
|
4369
|
+
paint(glide) {
|
|
4370
|
+
this.toggleAttribute('data-glide', glide && !this.reduced);
|
|
4371
|
+
const slots = this.querySelectorAll('.usa-eq-slot');
|
|
4372
|
+
slots.forEach((s, i) => {
|
|
4373
|
+
const v = this._v[i] ?? 0;
|
|
4374
|
+
s.style.setProperty('--usa-eq-k', ((v + 12) / 24).toFixed(4));
|
|
4375
|
+
s.setAttribute('aria-valuenow', String(v));
|
|
4376
|
+
s.setAttribute('aria-valuetext', `${v > 0 ? '+' : ''}${v} dB`);
|
|
4377
|
+
});
|
|
4378
|
+
const n = this._v.length;
|
|
4379
|
+
const pts = this._v.map((v, i) => [((i + 0.5) / n) * 100, 50 - (v / 12) * 40]);
|
|
4380
|
+
let d = `M0 ${pts[0]?.[1] ?? 50}`;
|
|
4381
|
+
pts.forEach(([x, y], i) => {
|
|
4382
|
+
const [px, py] = i ? pts[i - 1] : [0, pts[0][1]];
|
|
4383
|
+
d += ` C${((px + x) / 2).toFixed(2)} ${py.toFixed(2)} ${((px + x) / 2).toFixed(2)} ${y.toFixed(2)} ${x.toFixed(2)} ${y.toFixed(2)}`;
|
|
4384
|
+
});
|
|
4385
|
+
d += ` L100 ${pts[n - 1]?.[1] ?? 50}`;
|
|
4386
|
+
this.querySelector('.usa-eq-curve path')?.setAttribute('d', d);
|
|
4387
|
+
}
|
|
4388
|
+
}
|
|
4389
|
+
return UsaEqualizer;
|
|
4390
|
+
}, { id: 'equalizer', text: css$1 });
|
|
4391
|
+
}
|
|
4392
|
+
|
|
4393
|
+
var css = "usa-lyrics{--usa-ly-c:#f472b6;display:block;width:var(--usa-ly-w,320px);max-width:100%;font:700 18px/1.35 system-ui,sans-serif}.usa-ly-list{height:var(--usa-ly-h,180px);margin:0;padding:70px 0;overflow-y:auto;list-style:none;scrollbar-width:none;-webkit-mask:linear-gradient(transparent,#000 25%,#000 75%,transparent);mask:linear-gradient(transparent,#000 25%,#000 75%,transparent)}.usa-ly-list::-webkit-scrollbar{display:none}.usa-ly-line{--usa-ly-k:0;padding:5px 4px;opacity:.38;cursor:pointer;transform-origin:0 50%;transition:opacity .35s,transform .35s cubic-bezier(.3,1.3,.5,1),filter .35s;filter:blur(.4px)}.usa-ly-line[data-past]{opacity:.22}.usa-ly-line[data-active]{opacity:1;filter:none;transform:scale(1.06);color:transparent;background:linear-gradient(90deg,var(--usa-ly-c) calc(var(--usa-ly-k) * 100%),var(--usa-ly-base,#94a3b8) calc(var(--usa-ly-k) * 100%));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 18px rgba(244,114,182,.25)}@media (prefers-reduced-motion:reduce){.usa-ly-line{transition:none;transform:none!important}}";
|
|
4394
|
+
|
|
4395
|
+
/** Parse LRC text into sorted `{ t, text }` lines. */
|
|
4396
|
+
function parseLRC(src) {
|
|
4397
|
+
const out = [];
|
|
4398
|
+
for (const raw of src.split(/\r?\n/)) {
|
|
4399
|
+
const stamps = [...raw.matchAll(/\[(\d+):(\d+(?:\.\d+)?)\]/g)];
|
|
4400
|
+
const text = raw.replace(/\[[^\]]*\]/g, '').trim();
|
|
4401
|
+
for (const m of stamps)
|
|
4402
|
+
out.push({ t: Number(m[1]) * 60 + Number(m[2]), text });
|
|
4403
|
+
}
|
|
4404
|
+
return out.sort((a, b) => a.t - b.t);
|
|
4405
|
+
}
|
|
4406
|
+
function defineLyrics(tag = 'usa-lyrics') {
|
|
4407
|
+
return defineElement(tag, (Base) => {
|
|
4408
|
+
class UsaLyrics extends Base {
|
|
4409
|
+
constructor() {
|
|
4410
|
+
super(...arguments);
|
|
4411
|
+
this._lines = [];
|
|
4412
|
+
this._time = 0;
|
|
4413
|
+
this._active = -1;
|
|
4414
|
+
this._raf = 0;
|
|
4415
|
+
}
|
|
4416
|
+
get lines() {
|
|
4417
|
+
return this._lines.slice();
|
|
4418
|
+
}
|
|
4419
|
+
get time() {
|
|
4420
|
+
return this._time;
|
|
4421
|
+
}
|
|
4422
|
+
set time(v) {
|
|
4423
|
+
this._time = Math.max(0, Number(v) || 0);
|
|
4424
|
+
this.update();
|
|
4425
|
+
}
|
|
4426
|
+
mount() {
|
|
4427
|
+
const lrc = this.querySelector(':scope > script[type="text/plain"]');
|
|
4428
|
+
if (lrc?.textContent)
|
|
4429
|
+
this._lines = parseLRC(lrc.textContent);
|
|
4430
|
+
else
|
|
4431
|
+
this._lines = ownChildren(this).filter((c) => c.hasAttribute('data-t')).map((c) => ({ t: Number(c.dataset.t) || 0, text: c.textContent?.trim() || '' }));
|
|
4432
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
4433
|
+
ownChildren(this).forEach((c) => c.localName !== 'script' && (c.hidden = true));
|
|
4434
|
+
const list = document.createElement('ol');
|
|
4435
|
+
list.className = 'usa-ly-list';
|
|
4436
|
+
list.setAttribute('data-usa-part', '');
|
|
4437
|
+
this._lines.forEach((l, i) => {
|
|
4438
|
+
const li = document.createElement('li');
|
|
4439
|
+
li.className = 'usa-ly-line';
|
|
4440
|
+
li.dataset.i = String(i);
|
|
4441
|
+
li.textContent = l.text || '♪';
|
|
4442
|
+
list.appendChild(li);
|
|
4443
|
+
});
|
|
4444
|
+
this.appendChild(list);
|
|
4445
|
+
this.setAttribute('role', 'region');
|
|
4446
|
+
if (!this.hasAttribute('aria-label'))
|
|
4447
|
+
this.setAttribute('aria-label', this.str('label', 'Lyrics'));
|
|
4448
|
+
this.listen(list, 'click', (e) => {
|
|
4449
|
+
const li = e.target.closest?.('.usa-ly-line');
|
|
4450
|
+
if (li)
|
|
4451
|
+
this.emit('seek', { time: this._lines[Number(li.dataset.i)].t });
|
|
4452
|
+
});
|
|
4453
|
+
this._active = -1;
|
|
4454
|
+
const src = this.str('for', '') ? document.getElementById(this.str('for', '')) : null;
|
|
4455
|
+
if (src && typeof requestAnimationFrame === 'function') {
|
|
4456
|
+
const f = () => {
|
|
4457
|
+
const t = src.currentTime;
|
|
4458
|
+
if (typeof t === 'number' && Math.abs(t - this._time) > 0.01)
|
|
4459
|
+
this.time = t;
|
|
4460
|
+
this._raf = requestAnimationFrame(f);
|
|
4461
|
+
};
|
|
4462
|
+
this._raf = requestAnimationFrame(f);
|
|
4463
|
+
this.onCleanup(() => cancelAnimationFrame(this._raf));
|
|
4464
|
+
}
|
|
4465
|
+
this.update();
|
|
4466
|
+
}
|
|
4467
|
+
/** Index of the line playing at `t`. */
|
|
4468
|
+
lineAt(t) {
|
|
4469
|
+
let i = -1;
|
|
4470
|
+
for (let k = 0; k < this._lines.length && this._lines[k].t <= t; k++)
|
|
4471
|
+
i = k;
|
|
4472
|
+
return i;
|
|
4473
|
+
}
|
|
4474
|
+
update() {
|
|
4475
|
+
const i = this.lineAt(this._time);
|
|
4476
|
+
const items = this.querySelectorAll('.usa-ly-line');
|
|
4477
|
+
const cur = this._lines[i];
|
|
4478
|
+
const next = this._lines[i + 1];
|
|
4479
|
+
const k = cur ? Math.min(1, (this._time - cur.t) / Math.max(0.3, (next ? next.t : cur.t + 4) - cur.t)) : 0;
|
|
4480
|
+
if (items[i])
|
|
4481
|
+
items[i].style.setProperty('--usa-ly-k', this.reduced ? '1' : k.toFixed(3));
|
|
4482
|
+
if (i === this._active)
|
|
4483
|
+
return;
|
|
4484
|
+
this._active = i;
|
|
4485
|
+
items.forEach((li, j) => {
|
|
4486
|
+
li.toggleAttribute('data-active', j === i);
|
|
4487
|
+
li.toggleAttribute('data-past', j < i);
|
|
4488
|
+
if (j === i)
|
|
4489
|
+
li.setAttribute('aria-current', 'true');
|
|
4490
|
+
else
|
|
4491
|
+
li.removeAttribute('aria-current');
|
|
4492
|
+
});
|
|
4493
|
+
const list = this.querySelector('.usa-ly-list');
|
|
4494
|
+
const li = items[i];
|
|
4495
|
+
if (list && li) {
|
|
4496
|
+
const top = li.offsetTop - list.clientHeight / 2 + li.offsetHeight / 2;
|
|
4497
|
+
if (typeof list.scrollTo === 'function')
|
|
4498
|
+
list.scrollTo({ top, behavior: this.reduced ? 'auto' : 'smooth' });
|
|
4499
|
+
else
|
|
4500
|
+
list.scrollTop = top;
|
|
4501
|
+
}
|
|
4502
|
+
}
|
|
4503
|
+
}
|
|
4504
|
+
return UsaLyrics;
|
|
4505
|
+
}, { id: 'lyrics', text: css });
|
|
4032
4506
|
}
|
|
4033
4507
|
|
|
4034
4508
|
/**
|
|
@@ -4053,6 +4527,7 @@ const WIDGETS = {
|
|
|
4053
4527
|
'6.7': { 'usa-stepper': defineStepper, 'usa-pagination': definePagination, 'usa-segmented': defineSegmented, 'usa-switch': defineSwitch },
|
|
4054
4528
|
'6.8': { 'usa-kanban': defineKanban, 'usa-swipe-deck': defineSwipeDeck, 'usa-weather-card': defineWeatherCard, 'usa-pull-cord': definePullCord },
|
|
4055
4529
|
'6.9': { 'usa-date-picker': defineDatePicker, 'usa-color-picker': defineColorPicker, 'usa-file-drop': defineFileDrop, 'usa-keyframe-editor': defineKeyframeEditor },
|
|
4530
|
+
'7.1': { 'usa-music-player': defineMusicPlayer, 'usa-volume-knob': defineVolumeKnob, 'usa-equalizer': defineEqualizer, 'usa-lyrics': defineLyrics },
|
|
4056
4531
|
};
|
|
4057
4532
|
/** Every widget tag, in release order. */
|
|
4058
4533
|
const WIDGET_TAGS = Object.values(WIDGETS).flatMap((g) => Object.keys(g));
|
|
@@ -4064,5 +4539,5 @@ function defineWidgets(release) {
|
|
|
4064
4539
|
fn(tag);
|
|
4065
4540
|
}
|
|
4066
4541
|
|
|
4067
|
-
export { CAROUSEL_EFFECTS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, defineCarousel, defineColorPicker, defineCompare, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineFileDrop, defineKanban, defineKeyframeEditor, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineNavMorph, defineOdometer, definePagination, defineProgressRing, definePullCord, defineSegmented, defineSheet, defineSkeletonReveal, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineWeatherCard, defineWidgets, hexToHsv, hsvToHex, monthGrid, pageWindow, parseISODate, stackToast };
|
|
4542
|
+
export { CAROUSEL_EFFECTS, EQ_PRESETS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, defineCarousel, defineColorPicker, defineCompare, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFileDrop, defineKanban, defineKeyframeEditor, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineOdometer, definePagination, defineProgressRing, definePullCord, defineSegmented, defineSheet, defineSkeletonReveal, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineVolumeKnob, defineWeatherCard, defineWidgets, hexToHsv, hsvToHex, monthGrid, pageWindow, parseISODate, parseLRC, stackToast };
|
|
4068
4543
|
//# sourceMappingURL=widgets.js.map
|