motionary 7.3.0 → 7.5.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 +38 -0
- package/dist/components/fx-game.cjs +127 -0
- package/dist/components/fx-game.cjs.map +1 -0
- package/dist/components/fx-game.d.cts +70 -0
- package/dist/components/fx-game.d.ts +70 -0
- package/dist/components/fx-game.js +123 -0
- package/dist/components/fx-game.js.map +1 -0
- package/dist/components/fx-social.cjs +121 -0
- package/dist/components/fx-social.cjs.map +1 -0
- package/dist/components/fx-social.d.cts +66 -0
- package/dist/components/fx-social.d.ts +66 -0
- package/dist/components/fx-social.js +117 -0
- package/dist/components/fx-social.js.map +1 -0
- package/dist/components/fx2.cjs +12 -0
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +49 -1
- package/dist/components/fx2.d.ts +49 -1
- package/dist/components/fx2.js +9 -1
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/widgets.cjs +833 -85
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +182 -2
- package/dist/components/widgets.d.ts +182 -2
- package/dist/components/widgets.js +819 -86
- package/dist/components/widgets.js.map +1 -1
- package/dist/widgets.umd.js +1 -1
- package/dist/widgets.umd.js.map +1 -1
- package/docs/ROADMAP.md +2 -2
- package/docs/components.md +48 -0
- package/package.json +41 -1
|
@@ -43,7 +43,7 @@ function arrowIndex(e, i, n, vertical = false) {
|
|
|
43
43
|
return -1;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
var css$
|
|
46
|
+
var css$N = "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}";
|
|
47
47
|
|
|
48
48
|
const CAROUSEL_EFFECTS = ['slide', 'fade', 'scale', 'cards'];
|
|
49
49
|
function defineCarousel(tag = 'usa-carousel') {
|
|
@@ -232,10 +232,10 @@ function defineCarousel(tag = 'usa-carousel') {
|
|
|
232
232
|
}
|
|
233
233
|
}
|
|
234
234
|
return UsaCarousel;
|
|
235
|
-
}, { id: 'carousel', text: css$
|
|
235
|
+
}, { id: 'carousel', text: css$N });
|
|
236
236
|
}
|
|
237
237
|
|
|
238
|
-
var css$
|
|
238
|
+
var css$M = "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}";
|
|
239
239
|
|
|
240
240
|
const TAB_INDICATORS = ['pill', 'underline', 'glow', 'gooey'];
|
|
241
241
|
function defineTabBar(tag = 'usa-tab-bar') {
|
|
@@ -348,10 +348,10 @@ function defineTabBar(tag = 'usa-tab-bar') {
|
|
|
348
348
|
}
|
|
349
349
|
}
|
|
350
350
|
return UsaTabBar;
|
|
351
|
-
}, { id: 'tab-bar', text: css$
|
|
351
|
+
}, { id: 'tab-bar', text: css$M });
|
|
352
352
|
}
|
|
353
353
|
|
|
354
|
-
var css$
|
|
354
|
+
var css$L = "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}}";
|
|
355
355
|
|
|
356
356
|
function defineDisclosure(tag = 'usa-disclosure') {
|
|
357
357
|
return defineElement(tag, (Base) => {
|
|
@@ -419,10 +419,10 @@ function defineDisclosure(tag = 'usa-disclosure') {
|
|
|
419
419
|
}
|
|
420
420
|
}
|
|
421
421
|
return UsaDisclosure;
|
|
422
|
-
}, { id: 'disclosure', text: css$
|
|
422
|
+
}, { id: 'disclosure', text: css$L });
|
|
423
423
|
}
|
|
424
424
|
|
|
425
|
-
var css$
|
|
425
|
+
var css$K = "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}}";
|
|
426
426
|
|
|
427
427
|
function defineStories(tag = 'usa-stories') {
|
|
428
428
|
return defineElement(tag, (Base) => {
|
|
@@ -555,10 +555,10 @@ function defineStories(tag = 'usa-stories') {
|
|
|
555
555
|
}
|
|
556
556
|
}
|
|
557
557
|
return UsaStories;
|
|
558
|
-
}, { id: 'stories', text: css$
|
|
558
|
+
}, { id: 'stories', text: css$K });
|
|
559
559
|
}
|
|
560
560
|
|
|
561
|
-
var css$
|
|
561
|
+
var css$J = "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)}}";
|
|
562
562
|
|
|
563
563
|
const MODAL_EFFECTS = ['scale', 'slide-up', 'flip', 'origin'];
|
|
564
564
|
const SHEET_SIDES = ['right', 'left', 'bottom', 'top'];
|
|
@@ -785,12 +785,12 @@ function defineOverlay(tag, kind) {
|
|
|
785
785
|
}
|
|
786
786
|
}
|
|
787
787
|
return UsaOverlay;
|
|
788
|
-
}, { id: 'overlay', text: css$
|
|
788
|
+
}, { id: 'overlay', text: css$J });
|
|
789
789
|
}
|
|
790
790
|
const defineModal = (tag = 'usa-modal') => defineOverlay(tag, 'modal');
|
|
791
791
|
const defineSheet = (tag = 'usa-sheet') => defineOverlay(tag, 'sheet');
|
|
792
792
|
|
|
793
|
-
var css$
|
|
793
|
+
var css$I = "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}}";
|
|
794
794
|
|
|
795
795
|
const TOAST_POSITIONS = ['bottom-right', 'bottom-left', 'bottom-center', 'top-right', 'top-left', 'top-center'];
|
|
796
796
|
const ICONS = { info: 'ℹ', success: '✓', warning: '!', error: '✕' };
|
|
@@ -961,7 +961,7 @@ function defineToastStack(tag = 'usa-toast-stack') {
|
|
|
961
961
|
}
|
|
962
962
|
}
|
|
963
963
|
return UsaToastStack;
|
|
964
|
-
}, { id: 'toast', text: css$
|
|
964
|
+
}, { id: 'toast', text: css$I });
|
|
965
965
|
}
|
|
966
966
|
/** Show a toast on the first `<usa-toast-stack>` of the page (one is created when missing). */
|
|
967
967
|
function stackToast(input, stack) {
|
|
@@ -989,7 +989,7 @@ function installToastTriggers() {
|
|
|
989
989
|
});
|
|
990
990
|
}
|
|
991
991
|
|
|
992
|
-
var css$
|
|
992
|
+
var css$H = "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)}}";
|
|
993
993
|
|
|
994
994
|
const MENU_EFFECTS = ['scale', 'fold', 'slide'];
|
|
995
995
|
function defineMenu(tag = 'usa-menu') {
|
|
@@ -1128,10 +1128,10 @@ function defineMenu(tag = 'usa-menu') {
|
|
|
1128
1128
|
}
|
|
1129
1129
|
}
|
|
1130
1130
|
return UsaMenu;
|
|
1131
|
-
}, { id: 'menu', text: css$
|
|
1131
|
+
}, { id: 'menu', text: css$H });
|
|
1132
1132
|
}
|
|
1133
1133
|
|
|
1134
|
-
var css$
|
|
1134
|
+
var css$G = "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}}";
|
|
1135
1135
|
|
|
1136
1136
|
const PROGRESS_VARIANTS = ['ring', 'bar', 'semi'];
|
|
1137
1137
|
const NS = 'http://www.w3.org/2000/svg';
|
|
@@ -1271,7 +1271,7 @@ function defineProgressRing(tag = 'usa-progress-ring') {
|
|
|
1271
1271
|
}
|
|
1272
1272
|
}
|
|
1273
1273
|
return UsaProgressRing;
|
|
1274
|
-
}, { id: 'meters', text: css$
|
|
1274
|
+
}, { id: 'meters', text: css$G });
|
|
1275
1275
|
}
|
|
1276
1276
|
function defineOdometer(tag = 'usa-odometer') {
|
|
1277
1277
|
return defineElement(tag, (Base) => {
|
|
@@ -1381,10 +1381,10 @@ function defineOdometer(tag = 'usa-odometer') {
|
|
|
1381
1381
|
}
|
|
1382
1382
|
}
|
|
1383
1383
|
return UsaOdometer;
|
|
1384
|
-
}, { id: 'meters', text: css$
|
|
1384
|
+
}, { id: 'meters', text: css$G });
|
|
1385
1385
|
}
|
|
1386
1386
|
|
|
1387
|
-
var css$
|
|
1387
|
+
var css$F = "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}}";
|
|
1388
1388
|
|
|
1389
1389
|
const SKELETON_VARIANTS = ['wave', 'pulse', 'glow'];
|
|
1390
1390
|
function defineSkeletonReveal(tag = 'usa-skeleton-reveal') {
|
|
@@ -1499,10 +1499,10 @@ function defineSkeletonReveal(tag = 'usa-skeleton-reveal') {
|
|
|
1499
1499
|
}
|
|
1500
1500
|
}
|
|
1501
1501
|
return UsaSkeletonReveal;
|
|
1502
|
-
}, { id: 'skeleton-reveal', text: css$
|
|
1502
|
+
}, { id: 'skeleton-reveal', text: css$F });
|
|
1503
1503
|
}
|
|
1504
1504
|
|
|
1505
|
-
var css$
|
|
1505
|
+
var css$E = "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}}";
|
|
1506
1506
|
|
|
1507
1507
|
const PATHS = {
|
|
1508
1508
|
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',
|
|
@@ -1626,10 +1626,10 @@ function defineStarRating(tag = 'usa-star-rating') {
|
|
|
1626
1626
|
}
|
|
1627
1627
|
}
|
|
1628
1628
|
return UsaStarRating;
|
|
1629
|
-
}, { id: 'star-rating', text: css$
|
|
1629
|
+
}, { id: 'star-rating', text: css$E });
|
|
1630
1630
|
}
|
|
1631
1631
|
|
|
1632
|
-
var css$
|
|
1632
|
+
var css$D = "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}}";
|
|
1633
1633
|
|
|
1634
1634
|
function defineMilestones(tag = 'usa-milestones') {
|
|
1635
1635
|
return defineElement(tag, (Base) => {
|
|
@@ -1717,10 +1717,10 @@ function defineMilestones(tag = 'usa-milestones') {
|
|
|
1717
1717
|
}
|
|
1718
1718
|
}
|
|
1719
1719
|
return UsaMilestones;
|
|
1720
|
-
}, { id: 'milestones', text: css$
|
|
1720
|
+
}, { id: 'milestones', text: css$D });
|
|
1721
1721
|
}
|
|
1722
1722
|
|
|
1723
|
-
var css$
|
|
1723
|
+
var css$C = "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}";
|
|
1724
1724
|
|
|
1725
1725
|
function defineMasonryFlow(tag = 'usa-masonry-flow') {
|
|
1726
1726
|
return defineElement(tag, (Base) => {
|
|
@@ -1841,10 +1841,10 @@ function defineMasonryFlow(tag = 'usa-masonry-flow') {
|
|
|
1841
1841
|
}
|
|
1842
1842
|
}
|
|
1843
1843
|
return UsaMasonryFlow;
|
|
1844
|
-
}, { id: 'masonry-flow', text: css$
|
|
1844
|
+
}, { id: 'masonry-flow', text: css$C });
|
|
1845
1845
|
}
|
|
1846
1846
|
|
|
1847
|
-
var css$
|
|
1847
|
+
var css$B = "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}";
|
|
1848
1848
|
|
|
1849
1849
|
function defineCompare(tag = 'usa-compare') {
|
|
1850
1850
|
return defineElement(tag, (Base) => {
|
|
@@ -1968,10 +1968,10 @@ function defineCompare(tag = 'usa-compare') {
|
|
|
1968
1968
|
}
|
|
1969
1969
|
}
|
|
1970
1970
|
return UsaCompare;
|
|
1971
|
-
}, { id: 'compare', text: css$
|
|
1971
|
+
}, { id: 'compare', text: css$B });
|
|
1972
1972
|
}
|
|
1973
1973
|
|
|
1974
|
-
var css$
|
|
1974
|
+
var css$A = "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}";
|
|
1975
1975
|
|
|
1976
1976
|
function defineCubeGallery(tag = 'usa-cube-gallery') {
|
|
1977
1977
|
return defineElement(tag, (Base) => {
|
|
@@ -2104,10 +2104,10 @@ function defineCubeGallery(tag = 'usa-cube-gallery') {
|
|
|
2104
2104
|
}
|
|
2105
2105
|
}
|
|
2106
2106
|
return UsaCubeGallery;
|
|
2107
|
-
}, { id: 'cube-gallery', text: css$
|
|
2107
|
+
}, { id: 'cube-gallery', text: css$A });
|
|
2108
2108
|
}
|
|
2109
2109
|
|
|
2110
|
-
var css$
|
|
2110
|
+
var css$z = "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}}";
|
|
2111
2111
|
|
|
2112
2112
|
function defineDock(tag = 'usa-dock') {
|
|
2113
2113
|
return defineElement(tag, (Base) => {
|
|
@@ -2175,10 +2175,10 @@ function defineDock(tag = 'usa-dock') {
|
|
|
2175
2175
|
}
|
|
2176
2176
|
}
|
|
2177
2177
|
return UsaDock;
|
|
2178
|
-
}, { id: 'dock', text: css$
|
|
2178
|
+
}, { id: 'dock', text: css$z });
|
|
2179
2179
|
}
|
|
2180
2180
|
|
|
2181
|
-
var css$
|
|
2181
|
+
var css$y = "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)}";
|
|
2182
2182
|
|
|
2183
2183
|
const NAV_INDICATORS = ['underline', 'pill', 'blob', 'dot'];
|
|
2184
2184
|
function defineNavMorph(tag = 'usa-nav-morph') {
|
|
@@ -2282,10 +2282,10 @@ function defineNavMorph(tag = 'usa-nav-morph') {
|
|
|
2282
2282
|
}
|
|
2283
2283
|
}
|
|
2284
2284
|
return UsaNavMorph;
|
|
2285
|
-
}, { id: 'nav-morph', text: css$
|
|
2285
|
+
}, { id: 'nav-morph', text: css$y });
|
|
2286
2286
|
}
|
|
2287
2287
|
|
|
2288
|
-
var css$
|
|
2288
|
+
var css$x = "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}";
|
|
2289
2289
|
|
|
2290
2290
|
const TOGGLE_VARIANTS = ['cross', 'arrow', 'minus', 'plus-x'];
|
|
2291
2291
|
function defineMenuToggle(tag = 'usa-menu-toggle') {
|
|
@@ -2358,10 +2358,10 @@ function defineMenuToggle(tag = 'usa-menu-toggle') {
|
|
|
2358
2358
|
}
|
|
2359
2359
|
}
|
|
2360
2360
|
return UsaMenuToggle;
|
|
2361
|
-
}, { id: 'menu-toggle', text: css$
|
|
2361
|
+
}, { id: 'menu-toggle', text: css$x });
|
|
2362
2362
|
}
|
|
2363
2363
|
|
|
2364
|
-
var css$
|
|
2364
|
+
var css$w = "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)}";
|
|
2365
2365
|
|
|
2366
2366
|
const TIP_PLACEMENTS = ['top', 'bottom', 'left', 'right'];
|
|
2367
2367
|
const FLIP = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
|
|
@@ -2493,10 +2493,10 @@ function defineTip(tag = 'usa-tip') {
|
|
|
2493
2493
|
}
|
|
2494
2494
|
}
|
|
2495
2495
|
return UsaTip;
|
|
2496
|
-
}, { id: 'tip', text: css$
|
|
2496
|
+
}, { id: 'tip', text: css$w });
|
|
2497
2497
|
}
|
|
2498
2498
|
|
|
2499
|
-
var css$
|
|
2499
|
+
var css$v = "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}}";
|
|
2500
2500
|
|
|
2501
2501
|
function defineStepper(tag = 'usa-stepper') {
|
|
2502
2502
|
return defineElement(tag, (Base) => {
|
|
@@ -2593,10 +2593,10 @@ function defineStepper(tag = 'usa-stepper') {
|
|
|
2593
2593
|
}
|
|
2594
2594
|
}
|
|
2595
2595
|
return UsaStepper;
|
|
2596
|
-
}, { id: 'stepper', text: css$
|
|
2596
|
+
}, { id: 'stepper', text: css$v });
|
|
2597
2597
|
}
|
|
2598
2598
|
|
|
2599
|
-
var css$
|
|
2599
|
+
var css$u = "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}}";
|
|
2600
2600
|
|
|
2601
2601
|
/** The visible page list: numbers and `'…'` gaps (1-based). */
|
|
2602
2602
|
function pageWindow(page, total, siblings = 1) {
|
|
@@ -2718,10 +2718,10 @@ function definePagination(tag = 'usa-pagination') {
|
|
|
2718
2718
|
}
|
|
2719
2719
|
}
|
|
2720
2720
|
return UsaPagination;
|
|
2721
|
-
}, { id: 'pagination', text: css$
|
|
2721
|
+
}, { id: 'pagination', text: css$u });
|
|
2722
2722
|
}
|
|
2723
2723
|
|
|
2724
|
-
var css$
|
|
2724
|
+
var css$t = "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}}";
|
|
2725
2725
|
|
|
2726
2726
|
const SEGMENTED_VARIANTS = ['ios', 'pill', 'outline'];
|
|
2727
2727
|
function defineSegmented(tag = 'usa-segmented') {
|
|
@@ -2815,10 +2815,10 @@ function defineSegmented(tag = 'usa-segmented') {
|
|
|
2815
2815
|
}
|
|
2816
2816
|
}
|
|
2817
2817
|
return UsaSegmented;
|
|
2818
|
-
}, { id: 'segmented', text: css$
|
|
2818
|
+
}, { id: 'segmented', text: css$t });
|
|
2819
2819
|
}
|
|
2820
2820
|
|
|
2821
|
-
var css$
|
|
2821
|
+
var css$s = "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}}";
|
|
2822
2822
|
|
|
2823
2823
|
const SWITCH_VARIANTS = ['ios', 'daynight', 'bounce', 'liquid'];
|
|
2824
2824
|
function defineSwitch(tag = 'usa-switch') {
|
|
@@ -2906,10 +2906,10 @@ function defineSwitch(tag = 'usa-switch') {
|
|
|
2906
2906
|
}
|
|
2907
2907
|
}
|
|
2908
2908
|
return UsaSwitch;
|
|
2909
|
-
}, { id: 'switch', text: css$
|
|
2909
|
+
}, { id: 'switch', text: css$s });
|
|
2910
2910
|
}
|
|
2911
2911
|
|
|
2912
|
-
var css$
|
|
2912
|
+
var css$r = "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}}";
|
|
2913
2913
|
|
|
2914
2914
|
function defineKanban(tag = 'usa-kanban') {
|
|
2915
2915
|
return defineElement(tag, (Base) => {
|
|
@@ -3114,10 +3114,10 @@ function defineKanban(tag = 'usa-kanban') {
|
|
|
3114
3114
|
}
|
|
3115
3115
|
}
|
|
3116
3116
|
return UsaKanban;
|
|
3117
|
-
}, { id: 'kanban', text: css$
|
|
3117
|
+
}, { id: 'kanban', text: css$r });
|
|
3118
3118
|
}
|
|
3119
3119
|
|
|
3120
|
-
var css$
|
|
3120
|
+
var css$q = "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}}";
|
|
3121
3121
|
|
|
3122
3122
|
function defineSwipeDeck(tag = 'usa-swipe-deck') {
|
|
3123
3123
|
return defineElement(tag, (Base) => {
|
|
@@ -3259,10 +3259,10 @@ function defineSwipeDeck(tag = 'usa-swipe-deck') {
|
|
|
3259
3259
|
}
|
|
3260
3260
|
}
|
|
3261
3261
|
return UsaSwipeDeck;
|
|
3262
|
-
}, { id: 'swipe-deck', text: css$
|
|
3262
|
+
}, { id: 'swipe-deck', text: css$q });
|
|
3263
3263
|
}
|
|
3264
3264
|
|
|
3265
|
-
var css$
|
|
3265
|
+
var css$p = "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}}";
|
|
3266
3266
|
|
|
3267
3267
|
const WEATHER_CONDITIONS = ['clear', 'cloudy', 'rain', 'snow', 'storm', 'fog', 'night'];
|
|
3268
3268
|
const LABEL = { clear: 'Clear', cloudy: 'Cloudy', rain: 'Rain', snow: 'Snow', storm: 'Thunderstorm', fog: 'Fog', night: 'Clear night' };
|
|
@@ -3343,10 +3343,10 @@ function defineWeatherCard(tag = 'usa-weather-card') {
|
|
|
3343
3343
|
}
|
|
3344
3344
|
}
|
|
3345
3345
|
return UsaWeatherCard;
|
|
3346
|
-
}, { id: 'weather-card', text: css$
|
|
3346
|
+
}, { id: 'weather-card', text: css$p });
|
|
3347
3347
|
}
|
|
3348
3348
|
|
|
3349
|
-
var css$
|
|
3349
|
+
var css$o = "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}}";
|
|
3350
3350
|
|
|
3351
3351
|
function definePullCord(tag = 'usa-pull-cord') {
|
|
3352
3352
|
return defineElement(tag, (Base) => {
|
|
@@ -3475,10 +3475,10 @@ function definePullCord(tag = 'usa-pull-cord') {
|
|
|
3475
3475
|
}
|
|
3476
3476
|
}
|
|
3477
3477
|
return UsaPullCord;
|
|
3478
|
-
}, { id: 'pull-cord', text: css$
|
|
3478
|
+
}, { id: 'pull-cord', text: css$o });
|
|
3479
3479
|
}
|
|
3480
3480
|
|
|
3481
|
-
var css$
|
|
3481
|
+
var css$n = "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}}";
|
|
3482
3482
|
|
|
3483
3483
|
const iso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
|
3484
3484
|
/** Parse `YYYY-MM-DD` as a local date (or null). */
|
|
@@ -3627,10 +3627,10 @@ function defineDatePicker(tag = 'usa-date-picker') {
|
|
|
3627
3627
|
}
|
|
3628
3628
|
}
|
|
3629
3629
|
return UsaDatePicker;
|
|
3630
|
-
}, { id: 'date-picker', text: css$
|
|
3630
|
+
}, { id: 'date-picker', text: css$n });
|
|
3631
3631
|
}
|
|
3632
3632
|
|
|
3633
|
-
var css$
|
|
3633
|
+
var css$m = "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}}";
|
|
3634
3634
|
|
|
3635
3635
|
/** HSV (h 0–360, s / v 0–1) → `#rrggbb`. */
|
|
3636
3636
|
function hsvToHex(h, s, v) {
|
|
@@ -3750,10 +3750,10 @@ function defineColorPicker(tag = 'usa-color-picker') {
|
|
|
3750
3750
|
}
|
|
3751
3751
|
}
|
|
3752
3752
|
return UsaColorPicker;
|
|
3753
|
-
}, { id: 'color-picker', text: css$
|
|
3753
|
+
}, { id: 'color-picker', text: css$m });
|
|
3754
3754
|
}
|
|
3755
3755
|
|
|
3756
|
-
var css$
|
|
3756
|
+
var css$l = "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}}";
|
|
3757
3757
|
|
|
3758
3758
|
const size = (n) => (n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(1)} KB` : `${(n / 1048576).toFixed(1)} MB`);
|
|
3759
3759
|
function defineFileDrop(tag = 'usa-file-drop') {
|
|
@@ -3854,10 +3854,10 @@ function defineFileDrop(tag = 'usa-file-drop') {
|
|
|
3854
3854
|
}
|
|
3855
3855
|
}
|
|
3856
3856
|
return UsaFileDrop;
|
|
3857
|
-
}, { id: 'file-drop', text: css$
|
|
3857
|
+
}, { id: 'file-drop', text: css$l });
|
|
3858
3858
|
}
|
|
3859
3859
|
|
|
3860
|
-
var css$
|
|
3860
|
+
var css$k = "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}}";
|
|
3861
3861
|
|
|
3862
3862
|
const DEFAULT = {
|
|
3863
3863
|
format: ANIMATION_FORMAT,
|
|
@@ -4031,10 +4031,10 @@ function defineKeyframeEditor(tag = 'usa-keyframe-editor') {
|
|
|
4031
4031
|
}
|
|
4032
4032
|
}
|
|
4033
4033
|
return UsaKeyframeEditor;
|
|
4034
|
-
}, { id: 'keyframe-editor', text: css$
|
|
4034
|
+
}, { id: 'keyframe-editor', text: css$k });
|
|
4035
4035
|
}
|
|
4036
4036
|
|
|
4037
|
-
var css$
|
|
4037
|
+
var css$j = "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}}";
|
|
4038
4038
|
|
|
4039
4039
|
const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`;
|
|
4040
4040
|
function defineMusicPlayer(tag = 'usa-music-player') {
|
|
@@ -4195,10 +4195,10 @@ function defineMusicPlayer(tag = 'usa-music-player') {
|
|
|
4195
4195
|
}
|
|
4196
4196
|
}
|
|
4197
4197
|
return UsaMusicPlayer;
|
|
4198
|
-
}, { id: 'music-player', text: css$
|
|
4198
|
+
}, { id: 'music-player', text: css$j });
|
|
4199
4199
|
}
|
|
4200
4200
|
|
|
4201
|
-
var css$
|
|
4201
|
+
var css$i = "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}}";
|
|
4202
4202
|
|
|
4203
4203
|
const ARC = 270;
|
|
4204
4204
|
function defineVolumeKnob(tag = 'usa-volume-knob') {
|
|
@@ -4289,10 +4289,10 @@ function defineVolumeKnob(tag = 'usa-volume-knob') {
|
|
|
4289
4289
|
}
|
|
4290
4290
|
}
|
|
4291
4291
|
return UsaVolumeKnob;
|
|
4292
|
-
}, { id: 'volume-knob', text: css$
|
|
4292
|
+
}, { id: 'volume-knob', text: css$i });
|
|
4293
4293
|
}
|
|
4294
4294
|
|
|
4295
|
-
var css$
|
|
4295
|
+
var css$h = "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}}";
|
|
4296
4296
|
|
|
4297
4297
|
const EQ_PRESETS = {
|
|
4298
4298
|
flat: [0, 0, 0, 0, 0, 0, 0],
|
|
@@ -4390,10 +4390,10 @@ function defineEqualizer(tag = 'usa-equalizer') {
|
|
|
4390
4390
|
}
|
|
4391
4391
|
}
|
|
4392
4392
|
return UsaEqualizer;
|
|
4393
|
-
}, { id: 'equalizer', text: css$
|
|
4393
|
+
}, { id: 'equalizer', text: css$h });
|
|
4394
4394
|
}
|
|
4395
4395
|
|
|
4396
|
-
var css$
|
|
4396
|
+
var css$g = "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}}";
|
|
4397
4397
|
|
|
4398
4398
|
/** Parse LRC text into sorted `{ t, text }` lines. */
|
|
4399
4399
|
function parseLRC(src) {
|
|
@@ -4505,10 +4505,10 @@ function defineLyrics(tag = 'usa-lyrics') {
|
|
|
4505
4505
|
}
|
|
4506
4506
|
}
|
|
4507
4507
|
return UsaLyrics;
|
|
4508
|
-
}, { id: 'lyrics', text: css$
|
|
4508
|
+
}, { id: 'lyrics', text: css$g });
|
|
4509
4509
|
}
|
|
4510
4510
|
|
|
4511
|
-
var css$
|
|
4511
|
+
var css$f = "usa-bar-chart{--usa-bc-c:#7c5cff;display:block;width:var(--usa-bc-w,100%);max-width:100%;font:600 11px/1.2 system-ui,sans-serif}.usa-bc-list{display:flex;align-items:flex-end;gap:8px;height:var(--usa-bc-h,140px);margin:0;padding:0;list-style:none}.usa-bc-item{display:grid;grid-template-rows:auto 1fr auto;justify-items:center;flex:1;min-width:0;height:100%;gap:4px}.usa-bc-track{position:relative;grid-row:2;width:100%;display:flex;align-items:flex-end;justify-content:center}.usa-bc-bar{display:block;width:min(100%,38px);height:calc(var(--usa-bc-k) * 100%);border-radius:6px 6px 2px 2px;background:linear-gradient(var(--usa-bc-c),#22d3ee);transform-origin:50% 100%}.usa-bc-item[data-glide] .usa-bc-bar{transition:height .6s cubic-bezier(.3,1.25,.5,1)}.usa-bc-val{grid-row:1;font-variant-numeric:tabular-nums;opacity:.8}.usa-bc-label{grid-row:3;opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}usa-bar-chart[data-dir=\"h\"] .usa-bc-list{flex-direction:column;align-items:stretch;height:auto}usa-bar-chart[data-dir=\"h\"] .usa-bc-item{grid-template-columns:70px 1fr auto;grid-template-rows:none;align-items:center;height:22px}usa-bar-chart[data-dir=\"h\"] .usa-bc-label{grid-row:auto;grid-column:1;justify-self:start}usa-bar-chart[data-dir=\"h\"] .usa-bc-track{grid-row:auto;grid-column:2;height:100%;justify-content:flex-start;align-items:center}usa-bar-chart[data-dir=\"h\"] .usa-bc-bar{width:calc(var(--usa-bc-k) * 100%);height:14px;border-radius:2px 6px 6px 2px;transform-origin:0 50%;background:linear-gradient(90deg,var(--usa-bc-c),#22d3ee)}usa-bar-chart[data-dir=\"h\"] .usa-bc-item[data-glide] .usa-bc-bar{transition:width .6s cubic-bezier(.3,1.25,.5,1)}usa-bar-chart[data-dir=\"h\"] .usa-bc-val{grid-row:auto;grid-column:3}@media (prefers-reduced-motion:reduce){.usa-bc-bar{transition:none!important}}";
|
|
4512
4512
|
|
|
4513
4513
|
function defineBarChart(tag = 'usa-bar-chart') {
|
|
4514
4514
|
return defineElement(tag, (Base) => {
|
|
@@ -4602,10 +4602,10 @@ function defineBarChart(tag = 'usa-bar-chart') {
|
|
|
4602
4602
|
}
|
|
4603
4603
|
}
|
|
4604
4604
|
return UsaBarChart;
|
|
4605
|
-
}, { id: 'bar-chart', text: css$
|
|
4605
|
+
}, { id: 'bar-chart', text: css$f });
|
|
4606
4606
|
}
|
|
4607
4607
|
|
|
4608
|
-
var css$
|
|
4608
|
+
var css$e = "usa-gauge{--usa-gg-c:#7c5cff;--usa-gg-k:0;position:relative;display:inline-block;width:var(--usa-gg-w,220px);max-width:100%;font:600 12px/1.2 system-ui,sans-serif;text-align:center}.usa-gg-svg{display:block;width:100%;height:auto;overflow:visible}.usa-gg-track,.usa-gg-arc{fill:none;stroke-width:16;stroke-linecap:round}.usa-gg-track{stroke:rgba(127,127,127,.2)}.usa-gg-arc{stroke:var(--usa-gg-c);stroke-dasharray:calc(max(var(--usa-gg-k),0) * 100) 100;transition:stroke .3s}.usa-gg-needle{transform-origin:100px 100px;transform:rotate(var(--usa-gg-angle,-90deg));fill:currentColor}.usa-gg-read{position:absolute;left:0;right:0;bottom:2px;display:flex;flex-direction:column;align-items:center;pointer-events:none}.usa-gg-num{font:800 22px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;transform:translateY(-34px)}.usa-gg-label{opacity:.65;transform:translateY(-34px)}";
|
|
4609
4609
|
|
|
4610
4610
|
function defineGauge(tag = 'usa-gauge') {
|
|
4611
4611
|
return defineElement(tag, (Base) => {
|
|
@@ -4690,10 +4690,10 @@ function defineGauge(tag = 'usa-gauge') {
|
|
|
4690
4690
|
}
|
|
4691
4691
|
}
|
|
4692
4692
|
return UsaGauge;
|
|
4693
|
-
}, { id: 'gauge', text: css$
|
|
4693
|
+
}, { id: 'gauge', text: css$e });
|
|
4694
4694
|
}
|
|
4695
4695
|
|
|
4696
|
-
var css$
|
|
4696
|
+
var css$d = "usa-sparkline{--usa-sl-c:#7c5cff;position:relative;display:inline-block;width:var(--usa-sl-w,120px);height:var(--usa-sl-h,32px);vertical-align:middle}.usa-sl-svg{display:block;width:100%;height:100%;overflow:visible}.usa-sl-line{fill:none;stroke:var(--usa-sl-c);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1}.usa-sl-area{fill:var(--usa-sl-c);opacity:0}usa-sparkline[data-variant=\"area\"] .usa-sl-area{opacity:.16;transition:opacity .8s .4s}.usa-sl-bars rect{fill:var(--usa-sl-c);opacity:.75}usa-sparkline:not([data-variant=\"bars\"]) .usa-sl-bars,usa-sparkline[data-variant=\"bars\"] .usa-sl-line,usa-sparkline[data-variant=\"bars\"] .usa-sl-end{display:none}.usa-sl-end{fill:var(--usa-sl-c);vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:usa-sl-pulse 1.8s ease-out infinite}.usa-sl-hover{fill:#fff;stroke:var(--usa-sl-c);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0}usa-sparkline[data-hover] .usa-sl-hover{opacity:1}.usa-sl-tip{position:absolute;bottom:calc(100% + 4px);transform:translateX(-50%);padding:2px 6px;border-radius:5px;background:#111827;color:#fff;font:600 11px/1.3 system-ui,sans-serif;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}usa-sparkline[data-hover] .usa-sl-tip{opacity:1}@keyframes usa-sl-pulse{0%{opacity:1;transform:scale(1)}70%{opacity:.4;transform:scale(1.8)}100%{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.usa-sl-end{animation:none}}";
|
|
4697
4697
|
|
|
4698
4698
|
const SPARK_VARIANTS = ['line', 'area', 'bars'];
|
|
4699
4699
|
/** Map values to SVG points in a w×h box (with padding). */
|
|
@@ -4816,7 +4816,7 @@ function defineSparkline(tag = 'usa-sparkline') {
|
|
|
4816
4816
|
}
|
|
4817
4817
|
}
|
|
4818
4818
|
return UsaSparkline;
|
|
4819
|
-
}, { id: 'sparkline', text: css$
|
|
4819
|
+
}, { id: 'sparkline', text: css$d });
|
|
4820
4820
|
}
|
|
4821
4821
|
|
|
4822
4822
|
/** Parse a figure like "$12.4k" / "−3.5%" / "1,204" → number + prefix / suffix / decimals (7.2). */
|
|
@@ -4829,7 +4829,7 @@ function parseFigureText(s) {
|
|
|
4829
4829
|
return Number.isFinite(n) ? { n, pre: m[1], post: m[3], dec: (raw.split('.')[1] || '').length } : null;
|
|
4830
4830
|
}
|
|
4831
4831
|
|
|
4832
|
-
var css$
|
|
4832
|
+
var css$c = "usa-kpi{display:inline-grid;grid-template-columns:1fr auto;grid-template-areas:\"label label\" \"value delta\" \"trend trend\" \"caption caption\";align-items:end;gap:4px 10px;width:var(--usa-kpi-w,220px);max-width:100%;padding:14px 16px;border-radius:16px;background:var(--usa-kpi-bg,#fff);color:#0f172a;box-shadow:0 8px 24px -12px rgba(15,23,42,.35);font:500 12px/1.3 system-ui,sans-serif}.usa-kpi-label{grid-area:label;opacity:.6;text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:700}.usa-kpi-value{grid-area:value;font:800 28px/1.05 system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}.usa-kpi-delta{grid-area:delta;display:inline-flex;align-items:center;gap:3px;padding:3px 7px;border-radius:999px;font-weight:700;font-size:12px;margin-bottom:4px}.usa-kpi-delta[data-good=\"true\"]{background:rgba(34,197,94,.14);color:#15803d}.usa-kpi-delta[data-good=\"false\"]{background:rgba(239,68,68,.14);color:#b91c1c}.usa-kpi-delta i{font-style:normal;font-size:9px}.usa-kpi-trend{grid-area:trend;--usa-sl-w:100%;--usa-sl-h:34px;margin-top:4px}.usa-kpi-caption{grid-area:caption;opacity:.55;font-size:11px}.usa-kpi-caption:empty{display:none}";
|
|
4833
4833
|
|
|
4834
4834
|
function defineKpi(tag = 'usa-kpi') {
|
|
4835
4835
|
return defineElement(tag, (Base) => {
|
|
@@ -4909,10 +4909,10 @@ function defineKpi(tag = 'usa-kpi') {
|
|
|
4909
4909
|
}
|
|
4910
4910
|
}
|
|
4911
4911
|
return UsaKpi;
|
|
4912
|
-
}, { id: 'kpi', text: css$
|
|
4912
|
+
}, { id: 'kpi', text: css$c });
|
|
4913
4913
|
}
|
|
4914
4914
|
|
|
4915
|
-
var css$
|
|
4915
|
+
var css$b = "usa-add-to-cart{display:inline-block}.usa-atc-btn{position:relative;display:inline-grid;place-items:center;min-width:var(--usa-atc-w,150px);padding:11px 18px;border:0;border-radius:999px;background:var(--usa-atc-bg,#7c5cff);color:#fff;font:700 14px/1 system-ui,sans-serif;cursor:pointer;overflow:hidden;transition:background .3s}.usa-atc-btn>span{grid-area:1/1;transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .25s}.usa-atc-done{transform:translateY(120%);opacity:0}usa-add-to-cart[data-added] .usa-atc-btn{background:var(--usa-atc-ok,#16a34a)}usa-add-to-cart[data-added] .usa-atc-label{transform:translateY(-120%);opacity:0}usa-add-to-cart[data-added] .usa-atc-done{transform:none;opacity:1}.usa-atc-btn:focus-visible{outline:3px solid #a78bfa;outline-offset:2px}.usa-atc-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}@media (prefers-reduced-motion:reduce){.usa-atc-btn>span{transition:none}}";
|
|
4916
4916
|
|
|
4917
4917
|
function defineAddToCart(tag = 'usa-add-to-cart') {
|
|
4918
4918
|
return defineElement(tag, (Base) => {
|
|
@@ -4957,10 +4957,10 @@ function defineAddToCart(tag = 'usa-add-to-cart') {
|
|
|
4957
4957
|
}
|
|
4958
4958
|
}
|
|
4959
4959
|
return UsaAddToCart;
|
|
4960
|
-
}, { id: 'add-to-cart', text: css$
|
|
4960
|
+
}, { id: 'add-to-cart', text: css$b });
|
|
4961
4961
|
}
|
|
4962
4962
|
|
|
4963
|
-
var css$
|
|
4963
|
+
var css$a = "usa-cart-drawer{position:relative;display:inline-block;font:500 13px/1.3 system-ui,sans-serif}.usa-cd2-toggle{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--usa-cd2-btn,#f1f5f9);font-size:20px;cursor:pointer}.usa-cd2-badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;font:800 11px/18px system-ui,sans-serif;text-align:center}.usa-cd2-badge:empty{display:none}.usa-cd2-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:2147482000}.usa-cd2-panel{position:fixed;top:0;right:0;bottom:0;width:min(var(--usa-cd2-w,340px),92vw);display:flex;flex-direction:column;background:var(--usa-cd2-bg,#fff);color:#0f172a;box-shadow:-12px 0 40px -12px rgba(15,23,42,.4);z-index:2147482001;outline:none}.usa-cd2-panel header,.usa-cd2-panel footer{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(15,23,42,.08)}.usa-cd2-panel footer{border:0;border-top:1px solid rgba(15,23,42,.08);margin-top:auto;font-size:15px}.usa-cd2-close,.usa-cd2-rm{border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:inherit;opacity:.6}.usa-cd2-list{margin:0;padding:6px 8px;list-style:none;overflow:auto}.usa-cd2-item{display:grid;grid-template-columns:36px 1fr auto auto auto;align-items:center;gap:8px;padding:8px;border-radius:10px;overflow:hidden}.usa-cd2-item img,.usa-cd2-item i{width:36px;height:36px;border-radius:8px;object-fit:cover;background:linear-gradient(135deg,#a78bfa,#22d3ee)}.usa-cd2-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.usa-cd2-qty{opacity:.6}.usa-cd2-price,.usa-cd2-total{font-variant-numeric:tabular-nums;font-weight:700}.usa-cd2-empty{margin:24px;text-align:center;opacity:.55}.usa-cd2-panel[hidden],.usa-cd2-backdrop[hidden]{display:none}";
|
|
4964
4964
|
|
|
4965
4965
|
/** Cart total (7.3). */
|
|
4966
4966
|
const cartTotal = (items) => Math.round(items.reduce((a, i) => a + (Number(i.price) || 0) * (i.qty || 1), 0) * 100) / 100;
|
|
@@ -5125,10 +5125,10 @@ function defineCartDrawer(tag = 'usa-cart-drawer') {
|
|
|
5125
5125
|
}
|
|
5126
5126
|
}
|
|
5127
5127
|
return UsaCartDrawer;
|
|
5128
|
-
}, { id: 'cart-drawer', text: css$
|
|
5128
|
+
}, { id: 'cart-drawer', text: css$a });
|
|
5129
5129
|
}
|
|
5130
5130
|
|
|
5131
|
-
var css$
|
|
5131
|
+
var css$9 = "usa-product-gallery{display:grid;gap:10px;width:var(--usa-pg2-w,320px);max-width:100%}.usa-pg2-stage{position:relative;aspect-ratio:var(--usa-pg2-ratio,1);border-radius:14px;overflow:hidden;background:#f1f5f9;cursor:zoom-in;outline:none}.usa-pg2-stage:focus-visible{box-shadow:0 0 0 3px #a78bfa}.usa-pg2-main{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease-out}.usa-pg2-thumbs{position:relative;display:flex;gap:8px;overflow-x:auto;padding:3px}.usa-pg2-thumb{flex:0 0 auto;width:var(--usa-pg2-t,56px);height:var(--usa-pg2-t,56px);padding:0;border:0;border-radius:10px;overflow:hidden;background:#e2e8f0;cursor:pointer;opacity:.65;transition:opacity .2s}.usa-pg2-thumb[aria-selected=true]{opacity:1}.usa-pg2-thumb img{width:100%;height:100%;object-fit:cover;display:block}.usa-pg2-thumb:focus-visible{outline:2px solid #7c5cff;outline-offset:2px}.usa-pg2-ring{position:absolute;left:0;top:3px;height:var(--usa-pg2-t,56px);border-radius:10px;box-shadow:0 0 0 2px var(--usa-pg2-accent,#7c5cff);pointer-events:none;transition:transform .35s cubic-bezier(.3,1.3,.5,1),width .35s}@media (prefers-reduced-motion:reduce){.usa-pg2-ring,.usa-pg2-main{transition:none}}";
|
|
5132
5132
|
|
|
5133
5133
|
/** Wrap an index into 0..n-1 (7.3). */
|
|
5134
5134
|
const wrapIndex = (i, n) => (n ? ((i % n) + n) % n : 0);
|
|
@@ -5242,10 +5242,10 @@ function defineProductGallery(tag = 'usa-product-gallery') {
|
|
|
5242
5242
|
}
|
|
5243
5243
|
}
|
|
5244
5244
|
return UsaProductGallery;
|
|
5245
|
-
}, { id: 'product-gallery', text: css$
|
|
5245
|
+
}, { id: 'product-gallery', text: css$9 });
|
|
5246
5246
|
}
|
|
5247
5247
|
|
|
5248
|
-
var css = "usa-countdown{display:inline-block;font:700 12px/1.2 system-ui,sans-serif;color:var(--usa-cd-fg,inherit)}.usa-cd-row{display:flex;gap:var(--usa-cd-gap,10px)}.usa-cd-unit{display:flex;flex-direction:column;align-items:center;gap:4px}.usa-cd-unit small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.6}.usa-cd-digits{display:flex;gap:3px;perspective:300px}.usa-cd-d{display:grid;place-items:center;width:var(--usa-cd-w,28px);height:calc(var(--usa-cd-w,28px) * 1.35);border-radius:6px;background:var(--usa-cd-bg,#111827);color:var(--usa-cd-c,#fff);font:800 calc(var(--usa-cd-w,28px) * .8)/1 ui-monospace,monospace;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),0 4px 10px -4px rgba(0,0,0,.5);background-image:linear-gradient(transparent 49%,rgba(0,0,0,.35) 50%,transparent 51%);transform-origin:50% 50%}usa-countdown[data-done] .usa-cd-d{background-color:var(--usa-cd-done,#ef4444)}";
|
|
5248
|
+
var css$8 = "usa-countdown{display:inline-block;font:700 12px/1.2 system-ui,sans-serif;color:var(--usa-cd-fg,inherit)}.usa-cd-row{display:flex;gap:var(--usa-cd-gap,10px)}.usa-cd-unit{display:flex;flex-direction:column;align-items:center;gap:4px}.usa-cd-unit small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.6}.usa-cd-digits{display:flex;gap:3px;perspective:300px}.usa-cd-d{display:grid;place-items:center;width:var(--usa-cd-w,28px);height:calc(var(--usa-cd-w,28px) * 1.35);border-radius:6px;background:var(--usa-cd-bg,#111827);color:var(--usa-cd-c,#fff);font:800 calc(var(--usa-cd-w,28px) * .8)/1 ui-monospace,monospace;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),0 4px 10px -4px rgba(0,0,0,.5);background-image:linear-gradient(transparent 49%,rgba(0,0,0,.35) 50%,transparent 51%);transform-origin:50% 50%}usa-countdown[data-done] .usa-cd-d{background-color:var(--usa-cd-done,#ef4444)}";
|
|
5249
5249
|
|
|
5250
5250
|
/** Split seconds into d/h/m/s (7.3). */
|
|
5251
5251
|
function splitTime(sec) {
|
|
@@ -5333,7 +5333,738 @@ function defineCountdown(tag = 'usa-countdown') {
|
|
|
5333
5333
|
}
|
|
5334
5334
|
}
|
|
5335
5335
|
return UsaCountdown;
|
|
5336
|
-
}, { id: 'countdown', text: css });
|
|
5336
|
+
}, { id: 'countdown', text: css$8 });
|
|
5337
|
+
}
|
|
5338
|
+
|
|
5339
|
+
var css$7 = "usa-message-list{position:relative;display:block;width:var(--usa-ml-w,320px);max-width:100%;font:400 14px/1.35 system-ui,sans-serif}.usa-ml-list{display:flex;flex-direction:column;gap:6px;height:var(--usa-ml-h,260px);margin:0;padding:10px;list-style:none;overflow-y:auto;overscroll-behavior:contain;border-radius:14px;background:var(--usa-ml-bg,#f8fafc)}.usa-ml-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:80%}.usa-ml-msg[data-side=right]{align-self:flex-end;align-items:flex-end}.usa-ml-msg[data-grouped] .usa-ml-from{display:none}.usa-ml-from{font-size:11px;font-weight:600;opacity:.6;margin:2px 8px}.usa-ml-from:empty,.usa-ml-time:empty{display:none}.usa-ml-bubble{padding:8px 12px;border-radius:16px 16px 16px 4px;background:var(--usa-ml-them,#e2e8f0);color:#0f172a;overflow-wrap:anywhere}.usa-ml-msg[data-side=right] .usa-ml-bubble{border-radius:16px 16px 4px 16px;background:var(--usa-ml-me,#7c5cff);color:#fff}.usa-ml-time{font-size:10px;opacity:.5;margin:2px 8px}.usa-ml-typing .usa-ml-bubble{display:inline-flex;gap:4px;padding:11px 12px}.usa-ml-typing i{width:7px;height:7px;border-radius:50%;background:#64748b;animation:usa-ml-dot 1.1s infinite}.usa-ml-typing i:nth-child(2){animation-delay:.18s}.usa-ml-typing i:nth-child(3){animation-delay:.36s}@keyframes usa-ml-dot{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-5px);opacity:1}}.usa-ml-new{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);border:0;border-radius:999px;padding:6px 12px;background:#0f172a;color:#fff;font:600 12px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}.usa-ml-new[hidden]{display:none}@media (prefers-reduced-motion:reduce){.usa-ml-typing i{animation:none}}";
|
|
5340
|
+
|
|
5341
|
+
function defineMessageList(tag = 'usa-message-list') {
|
|
5342
|
+
return defineElement(tag, (Base) => {
|
|
5343
|
+
class UsaMessageList extends Base {
|
|
5344
|
+
constructor() {
|
|
5345
|
+
super(...arguments);
|
|
5346
|
+
this._msgs = [];
|
|
5347
|
+
}
|
|
5348
|
+
get messages() {
|
|
5349
|
+
return this._msgs.map((m) => ({ ...m }));
|
|
5350
|
+
}
|
|
5351
|
+
mount() {
|
|
5352
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
5353
|
+
const seed = Array.from(this.querySelectorAll(':scope > p'));
|
|
5354
|
+
this._msgs = [];
|
|
5355
|
+
this.insertAdjacentHTML('beforeend', '<ol class="usa-ml-list" data-usa-part role="log" aria-live="polite"></ol><button type="button" class="usa-ml-new" data-usa-part hidden>↓ New messages</button>');
|
|
5356
|
+
this.querySelector('.usa-ml-list').setAttribute('aria-label', this.str('label', 'Messages'));
|
|
5357
|
+
seed.forEach((p) => {
|
|
5358
|
+
p.hidden = true;
|
|
5359
|
+
this.add({ text: p.textContent || '', me: p.hasAttribute('data-me'), from: p.dataset.from, time: p.dataset.time }, false);
|
|
5360
|
+
});
|
|
5361
|
+
const list = this.querySelector('.usa-ml-list');
|
|
5362
|
+
const pill = this.querySelector('.usa-ml-new');
|
|
5363
|
+
this.listen(list, 'scroll', () => this.atBottom() && (pill.hidden = true));
|
|
5364
|
+
this.listen(pill, 'click', () => this.toBottom(true));
|
|
5365
|
+
this.toBottom(false);
|
|
5366
|
+
}
|
|
5367
|
+
atBottom() {
|
|
5368
|
+
const l = this.querySelector('.usa-ml-list');
|
|
5369
|
+
return l.scrollHeight - l.scrollTop - l.clientHeight < 24;
|
|
5370
|
+
}
|
|
5371
|
+
toBottom(smooth) {
|
|
5372
|
+
const l = this.querySelector('.usa-ml-list');
|
|
5373
|
+
if (typeof l.scrollTo === 'function')
|
|
5374
|
+
l.scrollTo({ top: l.scrollHeight, behavior: smooth && !this.reduced ? 'smooth' : 'auto' });
|
|
5375
|
+
else
|
|
5376
|
+
l.scrollTop = l.scrollHeight;
|
|
5377
|
+
this.querySelector('.usa-ml-new').hidden = true;
|
|
5378
|
+
}
|
|
5379
|
+
add(m, animate) {
|
|
5380
|
+
const list = this.querySelector('.usa-ml-list');
|
|
5381
|
+
const stick = this.atBottom();
|
|
5382
|
+
this.typing(false);
|
|
5383
|
+
const prev = this._msgs[this._msgs.length - 1];
|
|
5384
|
+
this._msgs.push({ ...m });
|
|
5385
|
+
const li = document.createElement('li');
|
|
5386
|
+
li.className = 'usa-ml-msg';
|
|
5387
|
+
li.dataset.side = m.me ? 'right' : 'left';
|
|
5388
|
+
if (prev && !!prev.me === !!m.me && prev.from === m.from)
|
|
5389
|
+
li.dataset.grouped = '';
|
|
5390
|
+
li.innerHTML = '<span class="usa-ml-from"></span><span class="usa-ml-bubble"></span><time class="usa-ml-time"></time>';
|
|
5391
|
+
li.querySelector('.usa-ml-from').textContent = m.me ? '' : m.from || '';
|
|
5392
|
+
li.querySelector('.usa-ml-bubble').textContent = m.text;
|
|
5393
|
+
li.querySelector('.usa-ml-time').textContent = m.time || '';
|
|
5394
|
+
list.appendChild(li);
|
|
5395
|
+
if (animate && !this.reduced) {
|
|
5396
|
+
li.style.transformOrigin = m.me ? '100% 100%' : '0 100%';
|
|
5397
|
+
this.motion(li, [{ transform: `translateX(${m.me ? 20 : -20}px) scale(.7)`, opacity: 0 }, { transform: 'scale(1.03)', opacity: 1, offset: 0.65 }, { transform: 'none', opacity: 1 }], { duration: 380, easing: 'cubic-bezier(.2,.9,.3,1)' });
|
|
5398
|
+
}
|
|
5399
|
+
if (stick || m.me)
|
|
5400
|
+
this.toBottom(animate);
|
|
5401
|
+
else
|
|
5402
|
+
this.querySelector('.usa-ml-new').hidden = false;
|
|
5403
|
+
}
|
|
5404
|
+
push(msg) {
|
|
5405
|
+
this.add(msg, true);
|
|
5406
|
+
this.emit('message', { message: { ...msg } });
|
|
5407
|
+
}
|
|
5408
|
+
typing(who) {
|
|
5409
|
+
const list = this.querySelector('.usa-ml-list');
|
|
5410
|
+
if (!list)
|
|
5411
|
+
return;
|
|
5412
|
+
list.querySelector('.usa-ml-typing')?.remove();
|
|
5413
|
+
if (who === false || who === '')
|
|
5414
|
+
return;
|
|
5415
|
+
const li = document.createElement('li');
|
|
5416
|
+
li.className = 'usa-ml-msg usa-ml-typing';
|
|
5417
|
+
li.dataset.side = 'left';
|
|
5418
|
+
li.innerHTML = '<span class="usa-ml-bubble"><i></i><i></i><i></i></span>';
|
|
5419
|
+
li.setAttribute('aria-label', `${who} is typing`);
|
|
5420
|
+
list.appendChild(li);
|
|
5421
|
+
if (this.atBottom() || list.children.length < 3)
|
|
5422
|
+
this.toBottom(false);
|
|
5423
|
+
}
|
|
5424
|
+
}
|
|
5425
|
+
return UsaMessageList;
|
|
5426
|
+
}, { id: 'message-list', text: css$7 });
|
|
5427
|
+
}
|
|
5428
|
+
|
|
5429
|
+
var css$6 = "usa-reactions{position:relative;display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font:600 13px/1 system-ui,sans-serif}.usa-rx-row{display:inline-flex;flex-wrap:wrap;gap:6px}.usa-rx-pill,.usa-rx-add{position:relative;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:1px solid rgba(15,23,42,.12);border-radius:999px;background:var(--usa-rx-bg,#fff);color:inherit;font:inherit;cursor:pointer}.usa-rx-pill[hidden]{display:none}.usa-rx-pill[aria-pressed=true]{border-color:var(--usa-rx-accent,#7c5cff);background:color-mix(in srgb,var(--usa-rx-accent,#7c5cff) 14%,#fff)}.usa-rx-emo{display:inline-block;font-size:15px}.usa-rx-n{display:inline-block;min-width:1ch;font-variant-numeric:tabular-nums}.usa-rx-float{position:absolute;left:50%;top:0;font-size:16px;pointer-events:none}.usa-rx-picker{position:absolute;bottom:calc(100% + 6px);left:0;display:flex;gap:2px;padding:4px;border-radius:999px;background:#fff;box-shadow:0 10px 30px -10px rgba(15,23,42,.45);transform-origin:20% 100%;z-index:5}.usa-rx-picker[hidden]{display:none}.usa-rx-picker button{border:0;background:none;font-size:20px;width:32px;height:32px;border-radius:50%;cursor:pointer}.usa-rx-picker button:hover,.usa-rx-picker button:focus-visible{background:#f1f5f9}.usa-rx-pill:focus-visible,.usa-rx-add:focus-visible{outline:2px solid #7c5cff;outline-offset:2px}";
|
|
5430
|
+
|
|
5431
|
+
/** Parse "👍,❤️" + "3,1" into ordered [emoji, count] pairs (7.4). */
|
|
5432
|
+
function parseReactions(emojis, counts = '') {
|
|
5433
|
+
const c = counts.split(',').map((n) => Math.max(0, parseInt(n, 10) || 0));
|
|
5434
|
+
return emojis.split(',').map((e) => e.trim()).filter(Boolean).map((e, i) => [e, c[i] || 0]);
|
|
5435
|
+
}
|
|
5436
|
+
function defineReactions(tag = 'usa-reactions') {
|
|
5437
|
+
return defineElement(tag, (Base) => {
|
|
5438
|
+
class UsaReactions extends Base {
|
|
5439
|
+
constructor() {
|
|
5440
|
+
super(...arguments);
|
|
5441
|
+
this._c = new Map();
|
|
5442
|
+
this._mine = new Set();
|
|
5443
|
+
}
|
|
5444
|
+
get counts() {
|
|
5445
|
+
return Object.fromEntries(this._c);
|
|
5446
|
+
}
|
|
5447
|
+
get mine() {
|
|
5448
|
+
return Array.from(this._mine);
|
|
5449
|
+
}
|
|
5450
|
+
mount() {
|
|
5451
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
5452
|
+
this.setAttribute('role', 'group');
|
|
5453
|
+
if (!this.hasAttribute('aria-label'))
|
|
5454
|
+
this.setAttribute('aria-label', 'Reactions');
|
|
5455
|
+
this._c = new Map(parseReactions(this.str('emojis', '👍,❤️,😂,🎉'), this.str('counts', '')));
|
|
5456
|
+
this.insertAdjacentHTML('beforeend', '<span class="usa-rx-row" data-usa-part></span><button type="button" class="usa-rx-add" data-usa-part aria-label="Add reaction" aria-expanded="false">＋</button><span class="usa-rx-picker" data-usa-part hidden></span>');
|
|
5457
|
+
const picker = this.querySelector('.usa-rx-picker');
|
|
5458
|
+
for (const e of this.str('picker', '👍,❤️,😂,🎉,😮,😢,🔥,👀').split(',').map((s) => s.trim()).filter(Boolean)) {
|
|
5459
|
+
const b = document.createElement('button');
|
|
5460
|
+
b.type = 'button';
|
|
5461
|
+
b.textContent = e;
|
|
5462
|
+
b.setAttribute('aria-label', `React ${e}`);
|
|
5463
|
+
this.listen(b, 'click', () => (this.toggle(e, true), this.pick(false)));
|
|
5464
|
+
picker.appendChild(b);
|
|
5465
|
+
}
|
|
5466
|
+
this.listen(this.querySelector('.usa-rx-add'), 'click', () => this.pick(picker.hidden === true));
|
|
5467
|
+
this.listen(this, 'keydown', (e) => e.key === 'Escape' && this.pick(false));
|
|
5468
|
+
this.render(null);
|
|
5469
|
+
}
|
|
5470
|
+
pick(open) {
|
|
5471
|
+
const p = this.querySelector('.usa-rx-picker');
|
|
5472
|
+
p.hidden = !open;
|
|
5473
|
+
this.querySelector('.usa-rx-add').setAttribute('aria-expanded', String(open));
|
|
5474
|
+
if (open && !this.reduced)
|
|
5475
|
+
this.motion(p, [{ transform: 'scale(.4) translateY(8px)', opacity: 0 }, { transform: 'scale(1.05)', opacity: 1, offset: 0.7 }, { transform: 'none', opacity: 1 }], { duration: 300, easing: 'ease-out' });
|
|
5476
|
+
}
|
|
5477
|
+
toggle(emoji, on) {
|
|
5478
|
+
const has = this._mine.has(emoji);
|
|
5479
|
+
const want = on ?? !has;
|
|
5480
|
+
if (want === has)
|
|
5481
|
+
return;
|
|
5482
|
+
const n = Math.max(0, (this._c.get(emoji) || 0) + (want ? 1 : -1));
|
|
5483
|
+
this._c.set(emoji, n);
|
|
5484
|
+
want ? this._mine.add(emoji) : this._mine.delete(emoji);
|
|
5485
|
+
this.render(emoji, want);
|
|
5486
|
+
this.emit('react', { emoji, on: want, count: n });
|
|
5487
|
+
}
|
|
5488
|
+
render(changed, up = true) {
|
|
5489
|
+
const row = this.querySelector('.usa-rx-row');
|
|
5490
|
+
for (const [e, n] of this._c) {
|
|
5491
|
+
let b = Array.from(row.children).find((x) => x.dataset.e === e);
|
|
5492
|
+
if (!b) {
|
|
5493
|
+
b = document.createElement('button');
|
|
5494
|
+
b.setAttribute('type', 'button');
|
|
5495
|
+
b.className = 'usa-rx-pill';
|
|
5496
|
+
b.dataset.e = e;
|
|
5497
|
+
b.innerHTML = '<span class="usa-rx-emo" aria-hidden="true"></span><span class="usa-rx-n" aria-hidden="true"></span>';
|
|
5498
|
+
b.querySelector('.usa-rx-emo').textContent = e;
|
|
5499
|
+
this.listen(b, 'click', () => this.toggle(e));
|
|
5500
|
+
row.appendChild(b);
|
|
5501
|
+
}
|
|
5502
|
+
b.hidden = n === 0 && !this._mine.has(e);
|
|
5503
|
+
b.setAttribute('aria-pressed', String(this._mine.has(e)));
|
|
5504
|
+
b.setAttribute('aria-label', `${e} ${n} reaction${n === 1 ? '' : 's'}`);
|
|
5505
|
+
const num = b.querySelector('.usa-rx-n');
|
|
5506
|
+
num.textContent = String(n);
|
|
5507
|
+
if (changed === e && !this.reduced) {
|
|
5508
|
+
this.motion(b.querySelector('.usa-rx-emo'), [{ transform: 'scale(1)' }, { transform: 'scale(1.6) rotate(-12deg)', offset: 0.35 }, { transform: 'scale(1)' }], { duration: 420, easing: 'ease-out' });
|
|
5509
|
+
this.motion(num, [{ transform: `translateY(${up ? 10 : -10}px)`, opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: 260, easing: 'ease-out' });
|
|
5510
|
+
if (up)
|
|
5511
|
+
this.float(b, e);
|
|
5512
|
+
}
|
|
5513
|
+
}
|
|
5514
|
+
}
|
|
5515
|
+
float(b, e) {
|
|
5516
|
+
for (let i = 0; i < 3; i++) {
|
|
5517
|
+
const s = document.createElement('span');
|
|
5518
|
+
s.className = 'usa-rx-float';
|
|
5519
|
+
s.setAttribute('aria-hidden', 'true');
|
|
5520
|
+
s.textContent = e;
|
|
5521
|
+
b.appendChild(s);
|
|
5522
|
+
const a = this.motion(s, [{ transform: 'translate(-50%,0) scale(.5)', opacity: 1 }, { transform: `translate(${ -50 + (i - 1) * 60}%,-42px) scale(1)`, opacity: 0 }], { duration: 700, delay: i * 70, easing: 'ease-out' });
|
|
5523
|
+
if (a)
|
|
5524
|
+
a.finished.then(() => s.remove(), () => s.remove());
|
|
5525
|
+
else
|
|
5526
|
+
s.remove();
|
|
5527
|
+
}
|
|
5528
|
+
}
|
|
5529
|
+
}
|
|
5530
|
+
return UsaReactions;
|
|
5531
|
+
}, { id: 'reactions', text: css$6 });
|
|
5532
|
+
}
|
|
5533
|
+
|
|
5534
|
+
var css$5 = "usa-notification-bell{position:relative;display:inline-block;font:400 13px/1.35 system-ui,sans-serif}.usa-nb-btn{position:relative;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:var(--usa-nb-bg,#f1f5f9);color:var(--usa-nb-fg,#0f172a);cursor:pointer}.usa-nb-bell{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 12%}.usa-nb-badge{position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#ef4444;color:#fff;font:800 10px/17px system-ui,sans-serif;text-align:center}.usa-nb-badge:empty{display:none}.usa-nb-panel{position:absolute;top:calc(100% + 8px);right:0;width:min(280px,86vw);border-radius:14px;background:#fff;color:#0f172a;box-shadow:0 18px 40px -14px rgba(15,23,42,.45);overflow:hidden;z-index:20;transform-origin:90% 0}.usa-nb-panel[hidden]{display:none}.usa-nb-panel header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(15,23,42,.08)}.usa-nb-read{border:0;background:none;color:#7c5cff;font:600 12px/1 system-ui,sans-serif;cursor:pointer}.usa-nb-list{max-height:220px;margin:0;padding:4px;list-style:none;overflow:auto}.usa-nb-item{display:flex;justify-content:space-between;gap:8px;padding:8px;border-radius:8px}.usa-nb-item[data-unread]{background:#f5f3ff;font-weight:600}.usa-nb-item[data-unread]::before{content:\"\";flex:0 0 7px;height:7px;margin-top:6px;border-radius:50%;background:#7c5cff}.usa-nb-item time{opacity:.5;font-size:11px;white-space:nowrap}.usa-nb-text{flex:1;min-width:0}.usa-nb-empty{margin:16px;text-align:center;opacity:.55}.usa-nb-btn:focus-visible,.usa-nb-read:focus-visible{outline:2px solid #7c5cff;outline-offset:2px}";
|
|
5535
|
+
|
|
5536
|
+
function defineNotificationBell(tag = 'usa-notification-bell') {
|
|
5537
|
+
return defineElement(tag, (Base) => {
|
|
5538
|
+
class UsaNotificationBell extends Base {
|
|
5539
|
+
constructor() {
|
|
5540
|
+
super(...arguments);
|
|
5541
|
+
this._n = [];
|
|
5542
|
+
this._open = false;
|
|
5543
|
+
}
|
|
5544
|
+
get unread() {
|
|
5545
|
+
return this._n.filter((n) => !n.read).length;
|
|
5546
|
+
}
|
|
5547
|
+
get notices() {
|
|
5548
|
+
return this._n.map((n) => ({ ...n }));
|
|
5549
|
+
}
|
|
5550
|
+
get open() {
|
|
5551
|
+
return this._open;
|
|
5552
|
+
}
|
|
5553
|
+
set open(v) {
|
|
5554
|
+
this.toggle(!!v);
|
|
5555
|
+
}
|
|
5556
|
+
mount() {
|
|
5557
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
5558
|
+
const seed = Array.from(this.querySelectorAll(':scope > li'));
|
|
5559
|
+
this._n = seed.map((li, i) => ({ id: `n${i}`, text: li.textContent || '', time: li.dataset.time, read: li.hasAttribute('data-read') }));
|
|
5560
|
+
seed.forEach((li) => li.remove());
|
|
5561
|
+
this.insertAdjacentHTML('beforeend', '<button type="button" class="usa-nb-btn" data-usa-part aria-expanded="false"><svg class="usa-nb-bell" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a6 6 0 0 0-6 6v4l-2 3h16l-2-3V9a6 6 0 0 0-6-6zm-2 15a2 2 0 0 0 4 0"/></svg><b class="usa-nb-badge"></b></button><div class="usa-nb-panel" data-usa-part role="region" hidden><header><strong>Notifications</strong><button type="button" class="usa-nb-read">Mark all read</button></header><ul class="usa-nb-list"></ul><p class="usa-nb-empty">You’re all caught up</p></div>');
|
|
5562
|
+
this.querySelector('.usa-nb-panel').setAttribute('aria-label', this.str('label', 'Notifications'));
|
|
5563
|
+
this.listen(this.querySelector('.usa-nb-btn'), 'click', () => this.toggle());
|
|
5564
|
+
this.listen(this.querySelector('.usa-nb-read'), 'click', () => this.markAllRead());
|
|
5565
|
+
this.listen(this, 'keydown', (e) => e.key === 'Escape' && this._open && (this.toggle(false), this.querySelector('.usa-nb-btn').focus()));
|
|
5566
|
+
this.listen(document, 'pointerdown', (e) => this._open && !this.contains(e.target) && this.toggle(false));
|
|
5567
|
+
this.render(null);
|
|
5568
|
+
}
|
|
5569
|
+
toggle(force) {
|
|
5570
|
+
const on = force ?? !this._open;
|
|
5571
|
+
this._open = on;
|
|
5572
|
+
const p = this.querySelector('.usa-nb-panel');
|
|
5573
|
+
if (!p)
|
|
5574
|
+
return;
|
|
5575
|
+
p.hidden = !on;
|
|
5576
|
+
this.querySelector('.usa-nb-btn').setAttribute('aria-expanded', String(on));
|
|
5577
|
+
if (on && !this.reduced)
|
|
5578
|
+
this.motion(p, [{ transform: 'translateY(-8px) scale(.96)', opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: 220, easing: 'ease-out' });
|
|
5579
|
+
}
|
|
5580
|
+
ring() {
|
|
5581
|
+
if (this.reduced)
|
|
5582
|
+
return;
|
|
5583
|
+
this.motion(this.querySelector('.usa-nb-bell'), [0, 18, -16, 12, -8, 4, 0].map((d) => ({ transform: `rotate(${d}deg)` })), { duration: 800, easing: 'ease-out' });
|
|
5584
|
+
}
|
|
5585
|
+
notify(n) {
|
|
5586
|
+
const item = typeof n === 'string' ? { text: n } : { ...n };
|
|
5587
|
+
item.id = item.id || `n${Date.now().toString(36)}${this._n.length}`;
|
|
5588
|
+
item.read = !!item.read;
|
|
5589
|
+
this._n.unshift(item);
|
|
5590
|
+
this.ring();
|
|
5591
|
+
this.render(item.id);
|
|
5592
|
+
this.emit('notify', { notice: { ...item } });
|
|
5593
|
+
}
|
|
5594
|
+
markAllRead() {
|
|
5595
|
+
if (!this.unread)
|
|
5596
|
+
return;
|
|
5597
|
+
this._n.forEach((n) => (n.read = true));
|
|
5598
|
+
this.render(null);
|
|
5599
|
+
this.emit('read', {});
|
|
5600
|
+
}
|
|
5601
|
+
render(added) {
|
|
5602
|
+
const list = this.querySelector('.usa-nb-list');
|
|
5603
|
+
list.textContent = '';
|
|
5604
|
+
for (const n of this._n) {
|
|
5605
|
+
const li = document.createElement('li');
|
|
5606
|
+
li.className = 'usa-nb-item';
|
|
5607
|
+
if (!n.read)
|
|
5608
|
+
li.dataset.unread = '';
|
|
5609
|
+
li.innerHTML = '<span class="usa-nb-text"></span><time></time>';
|
|
5610
|
+
li.querySelector('.usa-nb-text').textContent = n.text;
|
|
5611
|
+
li.querySelector('time').textContent = n.time || '';
|
|
5612
|
+
list.appendChild(li);
|
|
5613
|
+
if (n.id === added && !this.reduced)
|
|
5614
|
+
this.motion(li, [{ transform: 'translateY(-100%)', opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: 320, easing: 'cubic-bezier(.2,.9,.3,1)' });
|
|
5615
|
+
}
|
|
5616
|
+
this.querySelector('.usa-nb-empty').hidden = this._n.length > 0;
|
|
5617
|
+
const u = this.unread;
|
|
5618
|
+
const badge = this.querySelector('.usa-nb-badge');
|
|
5619
|
+
const had = badge.textContent !== '';
|
|
5620
|
+
badge.textContent = u ? (u > 99 ? '99+' : String(u)) : '';
|
|
5621
|
+
this.querySelector('.usa-nb-btn').setAttribute('aria-label', `${this.str('label', 'Notifications')}${u ? `, ${u} unread` : ''}`);
|
|
5622
|
+
if (!this.reduced && added)
|
|
5623
|
+
this.motion(badge, [{ transform: 'scale(.3)' }, { transform: 'scale(1.35)', offset: 0.5 }, { transform: 'scale(1)' }], { duration: 380, easing: 'ease-out' });
|
|
5624
|
+
else if (!this.reduced && had && !u)
|
|
5625
|
+
this.motion(badge, [{ transform: 'scale(1)', opacity: 1 }, { transform: 'scale(0)', opacity: 0 }], { duration: 200 });
|
|
5626
|
+
}
|
|
5627
|
+
}
|
|
5628
|
+
return UsaNotificationBell;
|
|
5629
|
+
}, { id: 'notification-bell', text: css$5 });
|
|
5630
|
+
}
|
|
5631
|
+
|
|
5632
|
+
var css$4 = "usa-presence{--s:var(--usa-pr2-size,48px);position:relative;display:inline-grid;place-items:center;width:var(--s);height:var(--s);vertical-align:middle}.usa-pr2-face{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#a78bfa,#22d3ee);color:#fff;font:700 calc(var(--s) * .36)/1 system-ui,sans-serif}.usa-pr2-face img{width:100%;height:100%;object-fit:cover}.usa-pr2-dot,.usa-pr2-ripple{position:absolute;right:0;bottom:0;width:calc(var(--s) * .28);height:calc(var(--s) * .28);border-radius:50%;box-sizing:border-box}.usa-pr2-dot{border:2px solid var(--usa-pr2-ring,#fff);background:#94a3b8;transition:background-color .3s}.usa-pr2-ripple{background:#22c55e;pointer-events:none}usa-presence[data-state=online] .usa-pr2-dot{background:#22c55e}usa-presence[data-state=away] .usa-pr2-dot{background:#f59e0b}usa-presence[data-state=busy] .usa-pr2-dot{background:#ef4444}usa-presence[speaking] .usa-pr2-face{box-shadow:0 0 0 3px #22c55e;animation:usa-pr2-speak 1.2s ease-in-out infinite}@keyframes usa-pr2-speak{50%{box-shadow:0 0 0 6px rgba(34,197,94,.35)}}usa-presence[story]::before{content:\"\";position:absolute;inset:-4px;border-radius:50%;background:conic-gradient(#f59e0b,#ef4444,#d946ef,#7c3aed,#f59e0b);animation:usa-pr2-spin 3s linear infinite;z-index:-1}usa-presence[story] .usa-pr2-face{box-shadow:0 0 0 2px var(--usa-pr2-ring,#fff)}@keyframes usa-pr2-spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){usa-presence[speaking] .usa-pr2-face,usa-presence[story]::before{animation:none}.usa-pr2-dot{transition:none}}";
|
|
5633
|
+
|
|
5634
|
+
/** Presence states (7.4). */
|
|
5635
|
+
const PRESENCE_STATES = ['online', 'away', 'busy', 'offline'];
|
|
5636
|
+
/** Initials for a display name (7.4). */
|
|
5637
|
+
const initials = (name) => name
|
|
5638
|
+
.trim()
|
|
5639
|
+
.split(/\s+/)
|
|
5640
|
+
.filter(Boolean)
|
|
5641
|
+
.slice(0, 2)
|
|
5642
|
+
.map((w) => Array.from(w)[0].toUpperCase())
|
|
5643
|
+
.join('');
|
|
5644
|
+
function definePresence(tag = 'usa-presence') {
|
|
5645
|
+
return defineElement(tag, (Base) => {
|
|
5646
|
+
class UsaPresence extends Base {
|
|
5647
|
+
constructor() {
|
|
5648
|
+
super(...arguments);
|
|
5649
|
+
this._prev = '';
|
|
5650
|
+
}
|
|
5651
|
+
static get observedAttributes() {
|
|
5652
|
+
return ['status', 'speaking', 'name', 'src'];
|
|
5653
|
+
}
|
|
5654
|
+
get status() {
|
|
5655
|
+
const s = this.str('status', 'offline');
|
|
5656
|
+
return PRESENCE_STATES.includes(s) ? s : 'offline';
|
|
5657
|
+
}
|
|
5658
|
+
set status(v) {
|
|
5659
|
+
this.setAttribute('status', v);
|
|
5660
|
+
}
|
|
5661
|
+
mount() {
|
|
5662
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
5663
|
+
this.insertAdjacentHTML('afterbegin', '<span class="usa-pr2-face" data-usa-part></span><i class="usa-pr2-dot" data-usa-part aria-hidden="true"></i>');
|
|
5664
|
+
this.setAttribute('role', 'img');
|
|
5665
|
+
this._prev = '';
|
|
5666
|
+
this.paint();
|
|
5667
|
+
}
|
|
5668
|
+
changed() {
|
|
5669
|
+
if (this.isConnected && this.querySelector('.usa-pr2-face'))
|
|
5670
|
+
this.paint();
|
|
5671
|
+
}
|
|
5672
|
+
paint() {
|
|
5673
|
+
const face = this.querySelector('.usa-pr2-face');
|
|
5674
|
+
const name = this.str('name', '');
|
|
5675
|
+
const src = this.str('src', '');
|
|
5676
|
+
if (src)
|
|
5677
|
+
face.innerHTML = `<img alt="" src="${src.replace(/"/g, '"')}">`;
|
|
5678
|
+
else
|
|
5679
|
+
face.textContent = initials(name) || '?';
|
|
5680
|
+
const s = this.status;
|
|
5681
|
+
this.dataset.state = s;
|
|
5682
|
+
this.setAttribute('aria-label', `${name || 'User'}, ${s}${this.flag('speaking') ? ', speaking' : ''}`);
|
|
5683
|
+
const dot = this.querySelector('.usa-pr2-dot');
|
|
5684
|
+
if (this._prev && this._prev !== s && !this.reduced) {
|
|
5685
|
+
this.motion(dot, [{ transform: 'scale(.4)' }, { transform: 'scale(1.3)', offset: 0.6 }, { transform: 'scale(1)' }], { duration: 360, easing: 'ease-out' });
|
|
5686
|
+
if (s === 'online') {
|
|
5687
|
+
const r = document.createElement('i');
|
|
5688
|
+
r.className = 'usa-pr2-ripple';
|
|
5689
|
+
r.setAttribute('aria-hidden', 'true');
|
|
5690
|
+
this.appendChild(r);
|
|
5691
|
+
const a = this.motion(r, [{ transform: 'scale(1)', opacity: 0.7 }, { transform: 'scale(3.2)', opacity: 0 }], { duration: 700, easing: 'ease-out' });
|
|
5692
|
+
if (a)
|
|
5693
|
+
a.finished.then(() => r.remove(), () => r.remove());
|
|
5694
|
+
else
|
|
5695
|
+
r.remove();
|
|
5696
|
+
}
|
|
5697
|
+
}
|
|
5698
|
+
this._prev = s;
|
|
5699
|
+
}
|
|
5700
|
+
}
|
|
5701
|
+
return UsaPresence;
|
|
5702
|
+
}, { id: 'presence', text: css$4 });
|
|
5703
|
+
}
|
|
5704
|
+
|
|
5705
|
+
var css$3 = "usa-leaderboard{display:block;width:var(--usa-lb-w,320px);max-width:100%;font:500 14px/1.2 system-ui,sans-serif}.usa-lb-list{margin:0;padding:0;list-style:none;display:grid;gap:4px}.usa-lb-row{display:grid;grid-template-columns:28px 30px 1fr auto auto;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:var(--usa-lb-bg,rgba(15,23,42,.04));position:relative}.usa-lb-row[data-me]{box-shadow:inset 0 0 0 2px var(--usa-lb-accent,#7c5cff)}.usa-lb-rank{text-align:center;font-weight:800;font-size:15px}.usa-lb-av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#a78bfa,#22d3ee) center/cover;color:#fff;font-weight:700;font-size:13px}.usa-lb-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.usa-lb-delta{font:700 11px/1 system-ui,sans-serif;font-style:normal}.usa-lb-row[data-move=up] .usa-lb-delta{color:#16a34a}.usa-lb-row[data-move=down] .usa-lb-delta{color:#dc2626}.usa-lb-score{font-variant-numeric:tabular-nums;font-weight:800}.usa-lb-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}";
|
|
5706
|
+
|
|
5707
|
+
/** Sort rows by score desc, then name (7.5). */
|
|
5708
|
+
const rankRows = (rows) => [...rows].sort((a, b) => b.score - a.score || a.name.localeCompare(b.name));
|
|
5709
|
+
const MEDAL = ['🥇', '🥈', '🥉'];
|
|
5710
|
+
function defineLeaderboard(tag = 'usa-leaderboard') {
|
|
5711
|
+
return defineElement(tag, (Base) => {
|
|
5712
|
+
class UsaLeaderboard extends Base {
|
|
5713
|
+
constructor() {
|
|
5714
|
+
super(...arguments);
|
|
5715
|
+
this._rows = [];
|
|
5716
|
+
}
|
|
5717
|
+
get rows() {
|
|
5718
|
+
return rankRows(this._rows).map((r) => ({ ...r }));
|
|
5719
|
+
}
|
|
5720
|
+
set rows(v) {
|
|
5721
|
+
this._rows = (v || []).map((r) => ({ ...r, score: Number(r.score) || 0 }));
|
|
5722
|
+
if (this.isConnected)
|
|
5723
|
+
this.render();
|
|
5724
|
+
}
|
|
5725
|
+
mount() {
|
|
5726
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
5727
|
+
const seed = Array.from(this.querySelectorAll(':scope > li'));
|
|
5728
|
+
if (seed.length)
|
|
5729
|
+
this._rows = seed.map((li) => ({ name: (li.textContent || '').trim(), score: Number(li.dataset.score) || 0, avatar: li.dataset.avatar }));
|
|
5730
|
+
seed.forEach((li) => li.remove());
|
|
5731
|
+
this.insertAdjacentHTML('beforeend', '<ol class="usa-lb-list" data-usa-part></ol><span class="usa-lb-live" data-usa-part aria-live="polite"></span>');
|
|
5732
|
+
this.querySelector('.usa-lb-list').setAttribute('aria-label', this.str('label', 'Leaderboard'));
|
|
5733
|
+
this.render();
|
|
5734
|
+
}
|
|
5735
|
+
setScore(name, score) {
|
|
5736
|
+
const r = this._rows.find((x) => x.name === name);
|
|
5737
|
+
if (r)
|
|
5738
|
+
r.score = score;
|
|
5739
|
+
else
|
|
5740
|
+
this._rows.push({ name, score });
|
|
5741
|
+
this.render();
|
|
5742
|
+
}
|
|
5743
|
+
render() {
|
|
5744
|
+
const list = this.querySelector('.usa-lb-list');
|
|
5745
|
+
if (!list)
|
|
5746
|
+
return;
|
|
5747
|
+
const ranked = rankRows(this._rows).slice(0, this.num('limit', 10));
|
|
5748
|
+
const old = new Map();
|
|
5749
|
+
Array.from(list.children).forEach((li) => {
|
|
5750
|
+
const h = li;
|
|
5751
|
+
old.set(h.dataset.name, { li: h, top: h.getBoundingClientRect().top, rank: Number(h.dataset.rank), score: Number(h.dataset.score) });
|
|
5752
|
+
});
|
|
5753
|
+
const me = this.str('me', '');
|
|
5754
|
+
const moves = [];
|
|
5755
|
+
ranked.forEach((r, i) => {
|
|
5756
|
+
const prev = old.get(r.name);
|
|
5757
|
+
old.delete(r.name);
|
|
5758
|
+
const li = prev?.li || document.createElement('li');
|
|
5759
|
+
if (!prev) {
|
|
5760
|
+
li.className = 'usa-lb-row';
|
|
5761
|
+
li.innerHTML = '<b class="usa-lb-rank" aria-hidden="true"></b><span class="usa-lb-av" aria-hidden="true"></span><span class="usa-lb-name"></span><i class="usa-lb-delta" aria-hidden="true"></i><span class="usa-lb-score"></span>';
|
|
5762
|
+
}
|
|
5763
|
+
li.dataset.name = r.name;
|
|
5764
|
+
li.dataset.rank = String(i + 1);
|
|
5765
|
+
li.dataset.score = String(r.score);
|
|
5766
|
+
li.toggleAttribute('data-me', r.name === me);
|
|
5767
|
+
li.querySelector('.usa-lb-rank').textContent = MEDAL[i] || String(i + 1);
|
|
5768
|
+
const av = li.querySelector('.usa-lb-av');
|
|
5769
|
+
av.textContent = r.avatar ? '' : Array.from(r.name)[0] || '?';
|
|
5770
|
+
av.style.backgroundImage = r.avatar ? `url("${r.avatar}")` : '';
|
|
5771
|
+
li.querySelector('.usa-lb-name').textContent = r.name;
|
|
5772
|
+
li.setAttribute('aria-label', `${i + 1}. ${r.name}, ${r.score} points`);
|
|
5773
|
+
const sc = li.querySelector('.usa-lb-score');
|
|
5774
|
+
const delta = li.querySelector('.usa-lb-delta');
|
|
5775
|
+
list.appendChild(li);
|
|
5776
|
+
if (prev && prev.rank !== i + 1) {
|
|
5777
|
+
const d = prev.rank - (i + 1);
|
|
5778
|
+
delta.textContent = d > 0 ? `▲${d}` : `▼${-d}`;
|
|
5779
|
+
li.dataset.move = d > 0 ? 'up' : 'down';
|
|
5780
|
+
moves.push(`${r.name} ${d > 0 ? 'up' : 'down'} to ${i + 1}`);
|
|
5781
|
+
this.emit('rank', { name: r.name, from: prev.rank, to: i + 1 });
|
|
5782
|
+
}
|
|
5783
|
+
else if (prev) {
|
|
5784
|
+
delete li.dataset.move;
|
|
5785
|
+
delta.textContent = '';
|
|
5786
|
+
}
|
|
5787
|
+
if (!this.reduced && prev) {
|
|
5788
|
+
const dy = prev.top - li.getBoundingClientRect().top;
|
|
5789
|
+
if (dy)
|
|
5790
|
+
this.motion(li, [{ transform: `translateY(${dy}px)` }, { transform: 'none' }], { duration: 520, easing: 'cubic-bezier(.2,.9,.3,1)' });
|
|
5791
|
+
if (li.dataset.move)
|
|
5792
|
+
this.motion(li, [{ backgroundColor: li.dataset.move === 'up' ? 'rgba(34,197,94,.25)' : 'rgba(239,68,68,.2)' }, { backgroundColor: 'transparent' }], { duration: 1200, composite: 'add' });
|
|
5793
|
+
}
|
|
5794
|
+
this.roll(sc, prev ? prev.score : r.score, r.score);
|
|
5795
|
+
});
|
|
5796
|
+
old.forEach(({ li }) => li.remove());
|
|
5797
|
+
if (moves.length)
|
|
5798
|
+
this.querySelector('.usa-lb-live').textContent = moves.join('; ');
|
|
5799
|
+
}
|
|
5800
|
+
roll(el, from, to) {
|
|
5801
|
+
if (this.reduced || from === to || typeof requestAnimationFrame !== 'function')
|
|
5802
|
+
return void (el.textContent = to.toLocaleString());
|
|
5803
|
+
const t0 = performance.now();
|
|
5804
|
+
const f = (now) => {
|
|
5805
|
+
const k = Math.min(1, (now - t0) / 600);
|
|
5806
|
+
el.textContent = Math.round(from + (to - from) * (1 - Math.pow(1 - k, 3))).toLocaleString();
|
|
5807
|
+
if (k < 1)
|
|
5808
|
+
requestAnimationFrame(f);
|
|
5809
|
+
};
|
|
5810
|
+
requestAnimationFrame(f);
|
|
5811
|
+
}
|
|
5812
|
+
}
|
|
5813
|
+
return UsaLeaderboard;
|
|
5814
|
+
}, { id: 'leaderboard', text: css$3 });
|
|
5815
|
+
}
|
|
5816
|
+
|
|
5817
|
+
var css$2 = "usa-xp-bar{display:flex;align-items:center;gap:10px;width:var(--usa-xp-w,300px);max-width:100%;font:600 13px/1 system-ui,sans-serif}.usa-xp-lvl{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--usa-xp-accent,#7c5cff);color:#fff;font-size:15px;font-weight:800;box-shadow:0 0 0 3px rgba(124,92,255,.25)}.usa-xp-track{flex:1;min-width:0;height:12px;border-radius:99px;background:var(--usa-xp-track,rgba(15,23,42,.1));overflow:hidden}.usa-xp-fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--usa-xp-accent,#7c5cff),#22d3ee);transform-origin:0 50%;transform:scaleX(0)}.usa-xp-num{flex:none;font-variant-numeric:tabular-nums;opacity:.75}usa-xp-bar[data-levelup] .usa-xp-lvl{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.35)}.usa-xp-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}";
|
|
5818
|
+
|
|
5819
|
+
/** Apply `gain` XP to (level, xp) with `per` XP per level (7.5). */
|
|
5820
|
+
function levelFor(level, xp, gain, per = 100) {
|
|
5821
|
+
const p = Math.max(1, per);
|
|
5822
|
+
let total = Math.max(0, xp + gain);
|
|
5823
|
+
let ups = 0;
|
|
5824
|
+
while (total >= p) {
|
|
5825
|
+
total -= p;
|
|
5826
|
+
ups++;
|
|
5827
|
+
}
|
|
5828
|
+
return { level: level + ups, xp: total, ups };
|
|
5829
|
+
}
|
|
5830
|
+
function defineXpBar(tag = 'usa-xp-bar') {
|
|
5831
|
+
return defineElement(tag, (Base) => {
|
|
5832
|
+
class UsaXpBar extends Base {
|
|
5833
|
+
constructor() {
|
|
5834
|
+
super(...arguments);
|
|
5835
|
+
this._busy = false;
|
|
5836
|
+
}
|
|
5837
|
+
static get observedAttributes() {
|
|
5838
|
+
return ['level', 'xp', 'per'];
|
|
5839
|
+
}
|
|
5840
|
+
get level() {
|
|
5841
|
+
return Math.max(1, Math.floor(this.num('level', 1)));
|
|
5842
|
+
}
|
|
5843
|
+
set level(v) {
|
|
5844
|
+
this.setAttribute('level', String(v));
|
|
5845
|
+
}
|
|
5846
|
+
get xp() {
|
|
5847
|
+
return Math.max(0, this.num('xp', 0));
|
|
5848
|
+
}
|
|
5849
|
+
set xp(v) {
|
|
5850
|
+
this.setAttribute('xp', String(v));
|
|
5851
|
+
}
|
|
5852
|
+
get per() {
|
|
5853
|
+
return Math.max(1, this.num('per', 100));
|
|
5854
|
+
}
|
|
5855
|
+
mount() {
|
|
5856
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
5857
|
+
this.insertAdjacentHTML('beforeend', '<b class="usa-xp-lvl" data-usa-part aria-hidden="true"></b><span class="usa-xp-track" data-usa-part><i class="usa-xp-fill"></i></span><span class="usa-xp-num" data-usa-part aria-hidden="true"></span><span class="usa-xp-live" data-usa-part aria-live="polite"></span>');
|
|
5858
|
+
this.setAttribute('role', 'progressbar');
|
|
5859
|
+
this.setAttribute('aria-valuemin', '0');
|
|
5860
|
+
this.paint(false);
|
|
5861
|
+
}
|
|
5862
|
+
changed() {
|
|
5863
|
+
if (!this._busy && this.querySelector('.usa-xp-fill'))
|
|
5864
|
+
this.paint(false);
|
|
5865
|
+
}
|
|
5866
|
+
paint(animate, from) {
|
|
5867
|
+
const per = this.per;
|
|
5868
|
+
const xp = Math.min(this.xp, per);
|
|
5869
|
+
this.querySelector('.usa-xp-lvl').textContent = String(this.level);
|
|
5870
|
+
this.querySelector('.usa-xp-num').textContent = `${Math.round(xp)} / ${per} XP`;
|
|
5871
|
+
this.setAttribute('aria-valuemax', String(per));
|
|
5872
|
+
this.setAttribute('aria-valuenow', String(Math.round(xp)));
|
|
5873
|
+
this.setAttribute('aria-label', `Level ${this.level}, ${Math.round(xp)} of ${per} XP`);
|
|
5874
|
+
const fill = this.querySelector('.usa-xp-fill');
|
|
5875
|
+
const to = `scaleX(${(xp / per).toFixed(4)})`;
|
|
5876
|
+
if (animate && !this.reduced && from !== undefined)
|
|
5877
|
+
this.motion(fill, [{ transform: `scaleX(${from.toFixed(4)})` }, { transform: to }], { duration: 500, easing: 'cubic-bezier(.2,.8,.3,1)' });
|
|
5878
|
+
fill.style.transform = to;
|
|
5879
|
+
}
|
|
5880
|
+
add(n) {
|
|
5881
|
+
const per = this.per;
|
|
5882
|
+
const start = this.level;
|
|
5883
|
+
const r = levelFor(start, Math.min(this.xp, per), Number(n) || 0, per);
|
|
5884
|
+
const fill = this.querySelector('.usa-xp-fill');
|
|
5885
|
+
const fromK = Math.min(this.xp, per) / per;
|
|
5886
|
+
this._busy = true;
|
|
5887
|
+
this.level = r.level;
|
|
5888
|
+
this.xp = r.xp;
|
|
5889
|
+
this._busy = false;
|
|
5890
|
+
if (!fill)
|
|
5891
|
+
return;
|
|
5892
|
+
if (r.ups && !this.reduced) {
|
|
5893
|
+
this.motion(fill, [{ transform: `scaleX(${fromK.toFixed(4)})` }, { transform: 'scaleX(1)' }], { duration: 380, easing: 'ease-in' });
|
|
5894
|
+
const lvl = this.querySelector('.usa-xp-lvl');
|
|
5895
|
+
this.motion(lvl, [{ transform: 'scale(1)' }, { transform: 'scale(1.6) rotate(-8deg)', offset: 0.5 }, { transform: 'scale(1)' }], { duration: 600, delay: 340, easing: 'ease-out' });
|
|
5896
|
+
this.dataset.levelup = '';
|
|
5897
|
+
setTimeout(() => {
|
|
5898
|
+
delete this.dataset.levelup;
|
|
5899
|
+
}, 1200);
|
|
5900
|
+
setTimeout(() => this.isConnected && this.paint(true, 0), 380);
|
|
5901
|
+
this.paint(false);
|
|
5902
|
+
fill.style.transform = 'scaleX(1)';
|
|
5903
|
+
}
|
|
5904
|
+
else
|
|
5905
|
+
this.paint(true, fromK);
|
|
5906
|
+
if (r.ups) {
|
|
5907
|
+
this.querySelector('.usa-xp-live').textContent = `Level up! Level ${r.level}`;
|
|
5908
|
+
this.emit('levelup', { level: r.level });
|
|
5909
|
+
}
|
|
5910
|
+
this.emit('xp', { level: r.level, xp: r.xp, gained: n });
|
|
5911
|
+
}
|
|
5912
|
+
}
|
|
5913
|
+
return UsaXpBar;
|
|
5914
|
+
}, { id: 'xp-bar', text: css$2 });
|
|
5915
|
+
}
|
|
5916
|
+
|
|
5917
|
+
var css$1 = "usa-badge-wall{display:block;width:var(--usa-bw-w,320px);max-width:100%;font:600 12px/1.2 system-ui,sans-serif}.usa-bw-count{margin:0 0 8px;font-size:13px;opacity:.75;font-variant-numeric:tabular-nums}.usa-bw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;margin:0;padding:0;list-style:none}.usa-bw-badge{position:relative;display:grid;justify-items:center;gap:4px;padding:8px 4px;border-radius:12px;background:linear-gradient(160deg,#fde68a,#f59e0b);color:#422006;text-align:center;overflow:hidden}.usa-bw-icon{font-size:24px;line-height:1}.usa-bw-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.usa-bw-badge[data-locked]{background:var(--usa-bw-locked,#e2e8f0);color:#64748b}.usa-bw-badge[data-locked] .usa-bw-icon{filter:grayscale(1);opacity:.45}.usa-bw-badge[data-locked]::after{content:\"🔒\";position:absolute;top:3px;right:4px;font-size:11px}.usa-bw-badge[data-shine]::before{content:\"\";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%) 120% 0/250% 100%;animation:usa-bw-shine 1s ease-in-out .3s both;pointer-events:none}@keyframes usa-bw-shine{to{background-position:-20% 0}}.usa-bw-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}@media (prefers-reduced-motion:reduce){.usa-bw-badge[data-shine]::before{animation:none;display:none}}";
|
|
5918
|
+
|
|
5919
|
+
/** Unlocked / total counts for a badge list (7.5). */
|
|
5920
|
+
const badgeProgress = (b) => ({ unlocked: b.filter((x) => !x.locked).length, total: b.length });
|
|
5921
|
+
function defineBadgeWall(tag = 'usa-badge-wall') {
|
|
5922
|
+
return defineElement(tag, (Base) => {
|
|
5923
|
+
class UsaBadgeWall extends Base {
|
|
5924
|
+
constructor() {
|
|
5925
|
+
super(...arguments);
|
|
5926
|
+
this._b = [];
|
|
5927
|
+
}
|
|
5928
|
+
get badges() {
|
|
5929
|
+
return this._b.map((b) => ({ ...b }));
|
|
5930
|
+
}
|
|
5931
|
+
mount() {
|
|
5932
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
5933
|
+
const seed = Array.from(this.querySelectorAll(':scope > li'));
|
|
5934
|
+
if (seed.length)
|
|
5935
|
+
this._b = seed.map((li) => ({ name: (li.textContent || '').trim(), icon: li.dataset.icon || '🏅', locked: li.hasAttribute('data-locked') }));
|
|
5936
|
+
seed.forEach((li) => li.remove());
|
|
5937
|
+
this.insertAdjacentHTML('beforeend', '<p class="usa-bw-count" data-usa-part></p><ul class="usa-bw-grid" data-usa-part></ul><span class="usa-bw-live" data-usa-part aria-live="polite"></span>');
|
|
5938
|
+
const grid = this.querySelector('.usa-bw-grid');
|
|
5939
|
+
grid.setAttribute('aria-label', this.str('label', 'Achievements'));
|
|
5940
|
+
for (const b of this._b) {
|
|
5941
|
+
const li = document.createElement('li');
|
|
5942
|
+
li.className = 'usa-bw-badge';
|
|
5943
|
+
li.innerHTML = '<span class="usa-bw-icon" aria-hidden="true"></span><span class="usa-bw-name"></span>';
|
|
5944
|
+
li.querySelector('.usa-bw-icon').textContent = b.icon;
|
|
5945
|
+
li.querySelector('.usa-bw-name').textContent = b.name;
|
|
5946
|
+
li.dataset.name = b.name;
|
|
5947
|
+
grid.appendChild(li);
|
|
5948
|
+
this.paintBadge(li, b);
|
|
5949
|
+
}
|
|
5950
|
+
this.count();
|
|
5951
|
+
}
|
|
5952
|
+
paintBadge(li, b) {
|
|
5953
|
+
li.toggleAttribute('data-locked', b.locked);
|
|
5954
|
+
li.setAttribute('aria-label', `${b.name}, ${b.locked ? 'locked' : 'unlocked'}`);
|
|
5955
|
+
}
|
|
5956
|
+
count() {
|
|
5957
|
+
const p = badgeProgress(this._b);
|
|
5958
|
+
this.querySelector('.usa-bw-count').textContent = `${p.unlocked} / ${p.total} unlocked`;
|
|
5959
|
+
}
|
|
5960
|
+
unlock(name) {
|
|
5961
|
+
const b = this._b.find((x) => x.name === name && x.locked);
|
|
5962
|
+
if (!b)
|
|
5963
|
+
return false;
|
|
5964
|
+
b.locked = false;
|
|
5965
|
+
const li = Array.from(this.querySelectorAll('.usa-bw-badge')).find((x) => x.dataset.name === name);
|
|
5966
|
+
if (li) {
|
|
5967
|
+
if (!this.reduced) {
|
|
5968
|
+
this.motion(li, [{ transform: 'perspective(400px) rotateY(0)' }, { transform: 'perspective(400px) rotateY(90deg)', offset: 0.45 }, { transform: 'perspective(400px) rotateY(0) scale(1.12)', offset: 0.8 }, { transform: 'none' }], { duration: 700, easing: 'ease-out' });
|
|
5969
|
+
setTimeout(() => this.paintBadge(li, b), 300);
|
|
5970
|
+
li.dataset.shine = '';
|
|
5971
|
+
setTimeout(() => delete li.dataset.shine, 1100);
|
|
5972
|
+
}
|
|
5973
|
+
else
|
|
5974
|
+
this.paintBadge(li, b);
|
|
5975
|
+
li.setAttribute('aria-label', `${b.name}, unlocked`);
|
|
5976
|
+
}
|
|
5977
|
+
this.count();
|
|
5978
|
+
this.querySelector('.usa-bw-live').textContent = `Unlocked: ${name}`;
|
|
5979
|
+
this.emit('unlock', { name });
|
|
5980
|
+
return true;
|
|
5981
|
+
}
|
|
5982
|
+
}
|
|
5983
|
+
return UsaBadgeWall;
|
|
5984
|
+
}, { id: 'badge-wall', text: css$1 });
|
|
5985
|
+
}
|
|
5986
|
+
|
|
5987
|
+
var css = "usa-prize-wheel{display:inline-block;--s:var(--usa-pw-size,200px);font:700 11px/1 system-ui,sans-serif}.usa-pw-box{position:relative;display:grid;place-items:center;width:var(--s);height:var(--s)}.usa-pw-wheel{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 4px #fff,0 0 0 6px rgba(15,23,42,.15),0 8px 24px rgba(15,23,42,.2);will-change:transform}.usa-pw-label{position:absolute;left:50%;top:0;width:0;height:50%;display:flex;justify-content:center;padding-top:10px;transform-origin:0 100%;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);white-space:nowrap}.usa-pw-pointer{position:absolute;top:-10px;left:50%;margin-left:-9px;width:0;height:0;border:9px solid transparent;border-top:16px solid var(--usa-pw-pointer,#0f172a);border-bottom:0;z-index:2;transform-origin:50% 0}.usa-pw-btn{position:relative;z-index:1;width:30%;aspect-ratio:1;border:0;border-radius:50%;background:#fff;color:#0f172a;font:800 13px/1 system-ui,sans-serif;box-shadow:0 2px 8px rgba(15,23,42,.25);cursor:pointer}.usa-pw-btn:disabled{cursor:progress;opacity:.85}usa-prize-wheel[data-done] .usa-pw-wheel{box-shadow:0 0 0 4px #fff,0 0 0 6px #facc15,0 0 28px rgba(250,204,21,.6)}.usa-pw-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}";
|
|
5988
|
+
|
|
5989
|
+
/** Final wheel rotation (deg) that puts segment `index` of `count` under the top pointer after `turns` full turns (7.5). */
|
|
5990
|
+
function wheelAngle(index, count, turns = 5) {
|
|
5991
|
+
const seg = 360 / Math.max(1, count);
|
|
5992
|
+
return turns * 360 + (360 - (index * seg + seg / 2));
|
|
5993
|
+
}
|
|
5994
|
+
const COLORS = ['#7c5cff', '#22d3ee', '#f59e0b', '#ef4444', '#22c55e', '#ec4899', '#3b82f6', '#a3e635'];
|
|
5995
|
+
function definePrizeWheel(tag = 'usa-prize-wheel') {
|
|
5996
|
+
return defineElement(tag, (Base) => {
|
|
5997
|
+
class UsaPrizeWheel extends Base {
|
|
5998
|
+
constructor() {
|
|
5999
|
+
super(...arguments);
|
|
6000
|
+
this._r = -1;
|
|
6001
|
+
this._spin = false;
|
|
6002
|
+
this._rot = 0;
|
|
6003
|
+
}
|
|
6004
|
+
get segments() {
|
|
6005
|
+
return this.str('segments', '10% off,Free ship,Try again,🎁 Gift,5% off,Jackpot').split(',').map((s) => s.trim()).filter(Boolean);
|
|
6006
|
+
}
|
|
6007
|
+
get result() {
|
|
6008
|
+
return this._r;
|
|
6009
|
+
}
|
|
6010
|
+
get spinning() {
|
|
6011
|
+
return this._spin;
|
|
6012
|
+
}
|
|
6013
|
+
mount() {
|
|
6014
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
6015
|
+
const s = this.segments;
|
|
6016
|
+
const seg = 360 / s.length;
|
|
6017
|
+
const grad = s.map((_, i) => `${COLORS[i % COLORS.length]} ${(i * seg).toFixed(2)}deg ${((i + 1) * seg).toFixed(2)}deg`).join(',');
|
|
6018
|
+
this.insertAdjacentHTML('beforeend', '<span class="usa-pw-box" data-usa-part><i class="usa-pw-pointer" aria-hidden="true"></i><span class="usa-pw-wheel" aria-hidden="true"></span><button type="button" class="usa-pw-btn"></button></span><span class="usa-pw-live" data-usa-part aria-live="polite"></span>');
|
|
6019
|
+
const wheel = this.querySelector('.usa-pw-wheel');
|
|
6020
|
+
wheel.style.background = `conic-gradient(${grad})`;
|
|
6021
|
+
s.forEach((label, i) => {
|
|
6022
|
+
const l = document.createElement('span');
|
|
6023
|
+
l.className = 'usa-pw-label';
|
|
6024
|
+
l.textContent = label;
|
|
6025
|
+
l.style.transform = `rotate(${(i * seg + seg / 2).toFixed(2)}deg)`;
|
|
6026
|
+
wheel.appendChild(l);
|
|
6027
|
+
});
|
|
6028
|
+
this._rot = 0;
|
|
6029
|
+
const btn = this.querySelector('.usa-pw-btn');
|
|
6030
|
+
btn.textContent = this.str('label', 'Spin');
|
|
6031
|
+
btn.setAttribute('aria-label', `${this.str('label', 'Spin')} the prize wheel`);
|
|
6032
|
+
this.listen(btn, 'click', () => void this.spin());
|
|
6033
|
+
}
|
|
6034
|
+
async spin(index) {
|
|
6035
|
+
if (this._spin)
|
|
6036
|
+
return this._r;
|
|
6037
|
+
const s = this.segments;
|
|
6038
|
+
const i = index !== undefined && index >= 0 && index < s.length ? Math.floor(index) : Math.floor(Math.random() * s.length);
|
|
6039
|
+
const wheel = this.querySelector('.usa-pw-wheel');
|
|
6040
|
+
const btn = this.querySelector('.usa-pw-btn');
|
|
6041
|
+
if (!wheel || !btn)
|
|
6042
|
+
return -1;
|
|
6043
|
+
this._spin = true;
|
|
6044
|
+
btn.disabled = true;
|
|
6045
|
+
this.removeAttribute('data-done');
|
|
6046
|
+
const base = this._rot - (this._rot % 360);
|
|
6047
|
+
const to = base + wheelAngle(i, s.length, this.reduced ? 0 : this.num('turns', 5));
|
|
6048
|
+
const from = this._rot;
|
|
6049
|
+
this._rot = to;
|
|
6050
|
+
const a = this.reduced ? null : this.motion(wheel, [{ transform: `rotate(${from}deg)` }, { transform: `rotate(${to}deg)` }], { duration: this.num('duration', 4000), easing: 'cubic-bezier(.12,.6,.1,1)' });
|
|
6051
|
+
wheel.style.transform = `rotate(${to}deg)`;
|
|
6052
|
+
if (a) {
|
|
6053
|
+
const ptr = this.querySelector('.usa-pw-pointer');
|
|
6054
|
+
this.motion(ptr, [{ transform: 'rotate(0)' }, { transform: 'rotate(-18deg)' }, { transform: 'rotate(0)' }], { duration: 160, iterations: 18, easing: 'ease-out' });
|
|
6055
|
+
await a.finished.catch(() => undefined);
|
|
6056
|
+
}
|
|
6057
|
+
this._spin = false;
|
|
6058
|
+
btn.disabled = false;
|
|
6059
|
+
this._r = i;
|
|
6060
|
+
this.setAttribute('data-done', '');
|
|
6061
|
+
this.querySelector('.usa-pw-live').textContent = `Result: ${s[i]}`;
|
|
6062
|
+
this.emit('result', { index: i, label: s[i] });
|
|
6063
|
+
return i;
|
|
6064
|
+
}
|
|
6065
|
+
}
|
|
6066
|
+
return UsaPrizeWheel;
|
|
6067
|
+
}, { id: 'prize-wheel', text: css });
|
|
5337
6068
|
}
|
|
5338
6069
|
|
|
5339
6070
|
/**
|
|
@@ -5361,6 +6092,8 @@ const WIDGETS = {
|
|
|
5361
6092
|
'7.1': { 'usa-music-player': defineMusicPlayer, 'usa-volume-knob': defineVolumeKnob, 'usa-equalizer': defineEqualizer, 'usa-lyrics': defineLyrics },
|
|
5362
6093
|
'7.2': { 'usa-bar-chart': defineBarChart, 'usa-gauge': defineGauge, 'usa-sparkline': defineSparkline, 'usa-kpi': defineKpi },
|
|
5363
6094
|
'7.3': { 'usa-add-to-cart': defineAddToCart, 'usa-cart-drawer': defineCartDrawer, 'usa-product-gallery': defineProductGallery, 'usa-countdown': defineCountdown },
|
|
6095
|
+
'7.4': { 'usa-message-list': defineMessageList, 'usa-reactions': defineReactions, 'usa-notification-bell': defineNotificationBell, 'usa-presence': definePresence },
|
|
6096
|
+
'7.5': { 'usa-leaderboard': defineLeaderboard, 'usa-xp-bar': defineXpBar, 'usa-badge-wall': defineBadgeWall, 'usa-prize-wheel': definePrizeWheel },
|
|
5364
6097
|
};
|
|
5365
6098
|
/** Every widget tag, in release order. */
|
|
5366
6099
|
const WIDGET_TAGS = Object.values(WIDGETS).flatMap((g) => Object.keys(g));
|
|
@@ -5372,5 +6105,5 @@ function defineWidgets(release) {
|
|
|
5372
6105
|
fn(tag);
|
|
5373
6106
|
}
|
|
5374
6107
|
|
|
5375
|
-
export { CAROUSEL_EFFECTS, EQ_PRESETS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, cartTotal, defineAddToCart, defineBarChart, defineCarousel, defineCartDrawer, defineColorPicker, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFileDrop, defineGauge, defineKanban, defineKeyframeEditor, defineKpi, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineOdometer, definePagination, defineProductGallery, defineProgressRing, definePullCord, defineSegmented, defineSheet, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineVolumeKnob, defineWeatherCard, defineWidgets, hexToHsv, hsvToHex, monthGrid, pageWindow, parseISODate, parseLRC, sparkPoints, splitTime, stackToast, wrapIndex };
|
|
6108
|
+
export { CAROUSEL_EFFECTS, EQ_PRESETS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineCarousel, defineCartDrawer, defineColorPicker, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFileDrop, defineGauge, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, definePagination, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePullCord, defineReactions, defineSegmented, defineSheet, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, hexToHsv, hsvToHex, initials, levelFor, monthGrid, pageWindow, parseISODate, parseLRC, parseReactions, rankRows, sparkPoints, splitTime, stackToast, wheelAngle, wrapIndex };
|
|
5376
6109
|
//# sourceMappingURL=widgets.js.map
|