motionary 7.2.0 → 7.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +36 -0
- package/dist/chunks/builtins-HlqAkK0f.js +99 -0
- package/dist/chunks/builtins-HlqAkK0f.js.map +1 -0
- package/dist/chunks/builtins-xalxV2d5.cjs +101 -0
- package/dist/chunks/builtins-xalxV2d5.cjs.map +1 -0
- package/dist/components/angular.cjs +1 -0
- package/dist/components/angular.cjs.map +1 -1
- package/dist/components/angular.js +1 -0
- package/dist/components/angular.js.map +1 -1
- package/dist/components/effects.cjs +1 -0
- package/dist/components/effects.cjs.map +1 -1
- package/dist/components/effects.js +1 -0
- package/dist/components/effects.js.map +1 -1
- package/dist/components/fx-shop.cjs +133 -0
- package/dist/components/fx-shop.cjs.map +1 -0
- package/dist/components/fx-shop.d.cts +70 -0
- package/dist/components/fx-shop.d.ts +70 -0
- package/dist/components/fx-shop.js +129 -0
- package/dist/components/fx-shop.js.map +1 -0
- package/dist/components/fx-social.cjs +121 -0
- package/dist/components/fx-social.cjs.map +1 -0
- package/dist/components/fx-social.d.cts +66 -0
- package/dist/components/fx-social.d.ts +66 -0
- package/dist/components/fx-social.js +117 -0
- package/dist/components/fx-social.js.map +1 -0
- package/dist/components/fx.cjs +5 -98
- package/dist/components/fx.cjs.map +1 -1
- package/dist/components/fx.js +3 -96
- package/dist/components/fx.js.map +1 -1
- package/dist/components/fx2.cjs +12 -0
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +49 -1
- package/dist/components/fx2.d.ts +49 -1
- package/dist/components/fx2.js +9 -1
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/solid.cjs +1 -0
- package/dist/components/solid.cjs.map +1 -1
- package/dist/components/solid.js +1 -0
- package/dist/components/solid.js.map +1 -1
- package/dist/components/svelte.cjs +1 -0
- package/dist/components/svelte.cjs.map +1 -1
- package/dist/components/svelte.js +1 -0
- package/dist/components/svelte.js.map +1 -1
- package/dist/components/vue.cjs +1 -0
- package/dist/components/vue.cjs.map +1 -1
- package/dist/components/vue.js +1 -0
- package/dist/components/vue.js.map +1 -1
- package/dist/components/widgets.cjs +887 -78
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +184 -2
- package/dist/components/widgets.d.ts +184 -2
- package/dist/components/widgets.js +874 -79
- package/dist/components/widgets.js.map +1 -1
- package/dist/components.cjs +2 -1
- package/dist/components.cjs.map +1 -1
- package/dist/components.js +2 -1
- package/dist/components.js.map +1 -1
- package/dist/widgets.umd.js +1 -1
- package/dist/widgets.umd.js.map +1 -1
- package/docs/ROADMAP.md +2 -2
- package/docs/components.md +50 -0
- package/package.json +41 -1
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { u as defineElement } from '../chunks/base-2-yYc93C.js';
|
|
2
2
|
import { d as springEasing } from '../chunks/spring-BK8DiezC.js';
|
|
3
3
|
import { A as ANIMATION_FORMAT, c as createPlayer } from '../chunks/player-DxvCYo7Q.js';
|
|
4
|
-
import '../chunks/registry-CyKExAmE.js';
|
|
4
|
+
import { getEffect, playEffect } from '../chunks/registry-CyKExAmE.js';
|
|
5
|
+
import '../chunks/builtins-HlqAkK0f.js';
|
|
6
|
+
import { registerShopPack } from './fx-shop.js';
|
|
5
7
|
import '../chunks/core-D5rU0CV6.js';
|
|
6
8
|
import './tokens.js';
|
|
9
|
+
import '../chunks/fx-CMxWNwH8.js';
|
|
7
10
|
|
|
8
11
|
/** Helpers shared by the 6.x widgets (`motionary/components/widgets`). */
|
|
9
12
|
const clampN = (v, a, b) => Math.min(b, Math.max(a, v));
|
|
@@ -40,7 +43,7 @@ function arrowIndex(e, i, n, vertical = false) {
|
|
|
40
43
|
return -1;
|
|
41
44
|
}
|
|
42
45
|
|
|
43
|
-
var css$
|
|
46
|
+
var css$J = "usa-carousel{display:block;position:relative;--usa-carousel-dur:520ms;--usa-carousel-ease:cubic-bezier(.22,1,.36,1);overflow:hidden;border-radius:var(--usa-radius,14px);touch-action:pan-y}.usa-carousel-viewport{position:relative;overflow:hidden;height:100%;min-height:inherit}.usa-carousel-track{display:flex;height:100%;transition:transform var(--usa-carousel-dur) var(--usa-carousel-ease);will-change:transform}.usa-carousel-track>*{flex:0 0 100%;min-width:0;box-sizing:border-box}usa-carousel:not([data-effect=\"slide\"]) .usa-carousel-track{display:grid}usa-carousel:not([data-effect=\"slide\"]) .usa-carousel-track>*{grid-area:1/1;transition:opacity var(--usa-carousel-dur) ease,transform var(--usa-carousel-dur) var(--usa-carousel-ease),filter var(--usa-carousel-dur) ease}usa-carousel[data-effect=\"cards\"] .usa-carousel-viewport{perspective:900px}usa-carousel[data-dragging] .usa-carousel-track,usa-carousel[data-dragging] .usa-carousel-track>*{transition:none}.usa-carousel-nav{position:absolute;top:50%;translate:0 -50%;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:#111;font:600 18px/1 system-ui;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:transform .2s}.usa-carousel-nav:hover{transform:scale(1.08)}.usa-carousel-nav:focus-visible{outline:2px solid #7c5cff;outline-offset:2px}.usa-carousel-prev{left:10px}.usa-carousel-next{right:10px}.usa-carousel-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;z-index:2}.usa-carousel-dot{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.55);cursor:pointer;transition:width .35s var(--usa-carousel-ease),background .35s}.usa-carousel-dot[aria-current=\"true\"]{width:22px;background:#fff}@media (prefers-reduced-motion:reduce){usa-carousel .usa-carousel-track,usa-carousel .usa-carousel-track>*,.usa-carousel-dot{transition:none!important}}usa-carousel[data-reduced] .usa-carousel-track,usa-carousel[data-reduced] .usa-carousel-track>*{transition:none!important}";
|
|
44
47
|
|
|
45
48
|
const CAROUSEL_EFFECTS = ['slide', 'fade', 'scale', 'cards'];
|
|
46
49
|
function defineCarousel(tag = 'usa-carousel') {
|
|
@@ -229,10 +232,10 @@ function defineCarousel(tag = 'usa-carousel') {
|
|
|
229
232
|
}
|
|
230
233
|
}
|
|
231
234
|
return UsaCarousel;
|
|
232
|
-
}, { id: 'carousel', text: css$
|
|
235
|
+
}, { id: 'carousel', text: css$J });
|
|
233
236
|
}
|
|
234
237
|
|
|
235
|
-
var css$
|
|
238
|
+
var css$I = "usa-tab-bar{display:block;--usa-tab-accent:#7c5cff;--usa-tab-ease:cubic-bezier(.22,1,.36,1)}.usa-tab-bar-list{position:relative;display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(127,127,127,.12);isolation:isolate;overflow-x:auto;scrollbar-width:none}.usa-tab-bar-list::-webkit-scrollbar{display:none}.usa-tab-bar-list>[role=\"tab\"]{position:relative;z-index:1;flex:1 0 auto;border:0;background:none;color:inherit;font:inherit;font-weight:600;padding:8px 14px;border-radius:9px;cursor:pointer;opacity:.7;transition:opacity .25s,color .25s;white-space:nowrap}.usa-tab-bar-list>[role=\"tab\"][aria-selected=\"true\"]{opacity:1}.usa-tab-bar-list>[role=\"tab\"]:focus-visible{outline:2px solid var(--usa-tab-accent);outline-offset:1px}.usa-tab-bar-ink{position:absolute;z-index:0;left:0;top:4px;bottom:4px;width:0;border-radius:9px;background:var(--usa-tab-accent);pointer-events:none}usa-tab-bar[data-indicator=\"pill\"] [aria-selected=\"true\"]{color:#fff}usa-tab-bar[data-indicator=\"underline\"] .usa-tab-bar-list{background:none;border-bottom:1px solid rgba(127,127,127,.25);border-radius:0}usa-tab-bar[data-indicator=\"underline\"] .usa-tab-bar-ink{top:auto;bottom:0;height:3px;border-radius:3px}usa-tab-bar[data-indicator=\"glow\"] .usa-tab-bar-ink{background:transparent;box-shadow:0 0 0 2px var(--usa-tab-accent),0 0 18px var(--usa-tab-accent)}usa-tab-bar[data-indicator=\"gooey\"] .usa-tab-bar-ink{filter:blur(.5px);border-radius:999px}usa-tab-bar[data-indicator=\"gooey\"] [aria-selected=\"true\"]{color:#fff}.usa-tab-bar-panel{padding:14px 2px}.usa-tab-bar-panel[hidden]{display:none}";
|
|
236
239
|
|
|
237
240
|
const TAB_INDICATORS = ['pill', 'underline', 'glow', 'gooey'];
|
|
238
241
|
function defineTabBar(tag = 'usa-tab-bar') {
|
|
@@ -345,10 +348,10 @@ function defineTabBar(tag = 'usa-tab-bar') {
|
|
|
345
348
|
}
|
|
346
349
|
}
|
|
347
350
|
return UsaTabBar;
|
|
348
|
-
}, { id: 'tab-bar', text: css$
|
|
351
|
+
}, { id: 'tab-bar', text: css$I });
|
|
349
352
|
}
|
|
350
353
|
|
|
351
|
-
var css$
|
|
354
|
+
var css$H = "usa-disclosure{display:block;--usa-disclosure-accent:#7c5cff}usa-disclosure>details{border-bottom:1px solid rgba(127,127,127,.25);overflow:hidden}usa-disclosure>details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;font-weight:600}usa-disclosure>details>summary::-webkit-details-marker{display:none}usa-disclosure>details>summary::after{content:\"\";flex:none;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;translate:0 -3px;transition:rotate .35s cubic-bezier(.34,1.56,.64,1),translate .35s}usa-disclosure>details[open]>summary::after{rotate:225deg;translate:0 2px}usa-disclosure>details>summary:focus-visible{outline:2px solid var(--usa-disclosure-accent);outline-offset:2px;border-radius:6px}usa-disclosure>details>:not(summary){padding:0 4px 12px}usa-disclosure[variant=\"cards\"]>details{border:1px solid rgba(127,127,127,.25);border-radius:12px;margin-bottom:8px;padding:0 10px;transition:box-shadow .3s,border-color .3s}usa-disclosure[variant=\"cards\"]>details[open]{border-color:var(--usa-disclosure-accent);box-shadow:0 8px 24px rgba(124,92,255,.16)}@media (prefers-reduced-motion:reduce){usa-disclosure>details>summary::after{transition:none}}";
|
|
352
355
|
|
|
353
356
|
function defineDisclosure(tag = 'usa-disclosure') {
|
|
354
357
|
return defineElement(tag, (Base) => {
|
|
@@ -416,10 +419,10 @@ function defineDisclosure(tag = 'usa-disclosure') {
|
|
|
416
419
|
}
|
|
417
420
|
}
|
|
418
421
|
return UsaDisclosure;
|
|
419
|
-
}, { id: 'disclosure', text: css$
|
|
422
|
+
}, { id: 'disclosure', text: css$H });
|
|
420
423
|
}
|
|
421
424
|
|
|
422
|
-
var css$
|
|
425
|
+
var css$G = "usa-stories{display:block;position:relative;overflow:hidden;border-radius:var(--usa-radius,16px);background:#111;color:#fff;aspect-ratio:9/14;max-height:520px;user-select:none;-webkit-user-select:none;touch-action:manipulation}usa-stories>:not([data-usa-part]){position:absolute;inset:0;opacity:0;transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1);transform:scale(1.04);pointer-events:none;box-sizing:border-box}usa-stories>[data-active]:not([data-usa-part]){opacity:1;transform:none;pointer-events:auto}usa-stories>img:not([data-usa-part]){width:100%;height:100%;object-fit:cover}.usa-stories-bars{position:absolute;z-index:3;top:8px;left:8px;right:48px;display:flex;gap:4px}.usa-stories-bar{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}.usa-stories-bar>i{display:block;height:100%;width:100%;background:#fff;transform-origin:left;transform:scaleX(0)}.usa-stories-bar[data-done]>i{transform:scaleX(1)}.usa-stories-toggle{position:absolute;z-index:3;top:2px;right:6px;width:36px;height:30px;border:0;background:none;color:#fff;font:700 14px/1 system-ui;cursor:pointer;border-radius:8px}.usa-stories-toggle:focus-visible{outline:2px solid #fff}@media (prefers-reduced-motion:reduce){usa-stories>*{transition:none!important;transform:none!important}}";
|
|
423
426
|
|
|
424
427
|
function defineStories(tag = 'usa-stories') {
|
|
425
428
|
return defineElement(tag, (Base) => {
|
|
@@ -552,10 +555,10 @@ function defineStories(tag = 'usa-stories') {
|
|
|
552
555
|
}
|
|
553
556
|
}
|
|
554
557
|
return UsaStories;
|
|
555
|
-
}, { id: 'stories', text: css$
|
|
558
|
+
}, { id: 'stories', text: css$G });
|
|
556
559
|
}
|
|
557
560
|
|
|
558
|
-
var css$
|
|
561
|
+
var css$F = "usa-modal,usa-sheet{display:contents}.usa-ov{border:0;padding:0;margin:auto;color:inherit;background:transparent;max-width:min(92vw,520px);max-height:88vh;overflow:visible}.usa-ov::backdrop{background:rgba(10,12,20,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.usa-ov-body{box-sizing:border-box;background:var(--usa-ov-bg,#fff);color:var(--usa-ov-fg,#111827);border-radius:var(--usa-ov-radius,18px);padding:var(--usa-ov-pad,22px);box-shadow:0 30px 80px -20px rgba(0,0,0,.45);max-height:88vh;overflow:auto}.usa-sheet-panel{margin:0;max-width:none;max-height:none}usa-sheet[data-side=\"right\"] .usa-sheet-panel{inset:0 0 0 auto;height:100%;width:min(88vw,var(--usa-sheet-size,380px))}usa-sheet[data-side=\"left\"] .usa-sheet-panel{inset:0 auto 0 0;height:100%;width:min(88vw,var(--usa-sheet-size,380px))}usa-sheet[data-side=\"bottom\"] .usa-sheet-panel{inset:auto 0 0 0;width:100%;max-height:85vh}usa-sheet[data-side=\"top\"] .usa-sheet-panel{inset:0 0 auto 0;width:100%;max-height:85vh}usa-sheet .usa-ov-body{height:100%;max-height:inherit;border-radius:0}usa-sheet[data-side=\"bottom\"] .usa-ov-body{border-radius:var(--usa-ov-radius,18px) var(--usa-ov-radius,18px) 0 0;height:auto;max-height:85vh;touch-action:none}usa-sheet[data-side=\"top\"] .usa-ov-body{border-radius:0 0 var(--usa-ov-radius,18px) var(--usa-ov-radius,18px);height:auto}.usa-ov-grab{width:44px;height:5px;border-radius:3px;background:rgba(127,127,127,.45);margin:-8px auto 14px;cursor:grab}@media (prefers-color-scheme:dark){.usa-ov-body{background:var(--usa-ov-bg,#171a23);color:var(--usa-ov-fg,#e5e7eb)}}";
|
|
559
562
|
|
|
560
563
|
const MODAL_EFFECTS = ['scale', 'slide-up', 'flip', 'origin'];
|
|
561
564
|
const SHEET_SIDES = ['right', 'left', 'bottom', 'top'];
|
|
@@ -782,12 +785,12 @@ function defineOverlay(tag, kind) {
|
|
|
782
785
|
}
|
|
783
786
|
}
|
|
784
787
|
return UsaOverlay;
|
|
785
|
-
}, { id: 'overlay', text: css$
|
|
788
|
+
}, { id: 'overlay', text: css$F });
|
|
786
789
|
}
|
|
787
790
|
const defineModal = (tag = 'usa-modal') => defineOverlay(tag, 'modal');
|
|
788
791
|
const defineSheet = (tag = 'usa-sheet') => defineOverlay(tag, 'sheet');
|
|
789
792
|
|
|
790
|
-
var css$
|
|
793
|
+
var css$E = "usa-toast-stack{position:fixed;z-index:2147482000;width:min(360px,calc(100vw - 24px));pointer-events:none;--usa-tstack-bg:#111827;--usa-tstack-fg:#f9fafb}usa-toast-stack[contained]{position:absolute;width:min(360px,calc(100% - 24px))}usa-toast-stack[data-position^=\"bottom\"]{bottom:12px}usa-toast-stack[data-position^=\"top\"]{top:12px}usa-toast-stack[data-position$=\"right\"]{right:12px}usa-toast-stack[data-position$=\"left\"]{left:12px}usa-toast-stack[data-position$=\"center\"]{left:50%;transform:translateX(-50%)}.usa-tstack-list{position:relative;list-style:none;margin:0;padding:0;min-height:1px;transition:height .3s}.usa-tstack{position:absolute;left:0;right:0;display:flex;align-items:center;gap:10px;box-sizing:border-box;padding:12px 12px 12px 14px;border-radius:14px;background:var(--usa-tstack-bg);color:var(--usa-tstack-fg);box-shadow:0 12px 32px -10px rgba(0,0,0,.45);font:500 14px/1.35 system-ui,sans-serif;pointer-events:auto;touch-action:pan-y;transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .3s;user-select:none}usa-toast-stack[data-position^=\"bottom\"] .usa-tstack{bottom:0;transform-origin:50% 100%}usa-toast-stack[data-position^=\"top\"] .usa-tstack{top:0;transform-origin:50% 0}.usa-tstack-icon{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:13px;font-weight:800;background:#3b82f6;color:#fff}.usa-tstack-success .usa-tstack-icon{background:#22c55e}.usa-tstack-warning .usa-tstack-icon{background:#f59e0b}.usa-tstack-error .usa-tstack-icon{background:#ef4444}.usa-tstack-text{flex:1;min-width:0;display:flex;flex-direction:column}.usa-tstack-text strong{font-weight:700}.usa-tstack-action{border:0;border-radius:8px;padding:6px 10px;background:rgba(255,255,255,.14);color:inherit;font:600 13px system-ui,sans-serif;cursor:pointer}.usa-tstack-close{border:0;background:none;color:inherit;opacity:.6;font-size:18px;line-height:1;cursor:pointer;padding:2px 4px}.usa-tstack-close:hover{opacity:1}@media (prefers-reduced-motion:reduce){.usa-tstack,.usa-tstack-list{transition:none}}";
|
|
791
794
|
|
|
792
795
|
const TOAST_POSITIONS = ['bottom-right', 'bottom-left', 'bottom-center', 'top-right', 'top-left', 'top-center'];
|
|
793
796
|
const ICONS = { info: 'ℹ', success: '✓', warning: '!', error: '✕' };
|
|
@@ -958,7 +961,7 @@ function defineToastStack(tag = 'usa-toast-stack') {
|
|
|
958
961
|
}
|
|
959
962
|
}
|
|
960
963
|
return UsaToastStack;
|
|
961
|
-
}, { id: 'toast', text: css$
|
|
964
|
+
}, { id: 'toast', text: css$E });
|
|
962
965
|
}
|
|
963
966
|
/** Show a toast on the first `<usa-toast-stack>` of the page (one is created when missing). */
|
|
964
967
|
function stackToast(input, stack) {
|
|
@@ -986,7 +989,7 @@ function installToastTriggers() {
|
|
|
986
989
|
});
|
|
987
990
|
}
|
|
988
991
|
|
|
989
|
-
var css$
|
|
992
|
+
var css$D = "usa-menu{position:relative;display:inline-block}.usa-menu-list{position:absolute;z-index:50;min-width:180px;max-width:min(280px,90vw);box-sizing:border-box;padding:6px;border-radius:12px;background:var(--usa-menu-bg,#fff);color:var(--usa-menu-fg,#111827);box-shadow:0 18px 44px -12px rgba(0,0,0,.35),0 0 0 1px rgba(127,127,127,.15);display:flex;flex-direction:column;gap:2px;text-align:left}.usa-menu-list[hidden]{display:none}usa-menu[data-placement^=\"bottom\"] .usa-menu-list{top:calc(100% + 6px)}usa-menu[data-placement^=\"top\"] .usa-menu-list{bottom:calc(100% + 6px)}usa-menu[data-placement$=\"start\"] .usa-menu-list{left:0;transform-origin:0 0}usa-menu[data-placement$=\"end\"] .usa-menu-list{right:0;transform-origin:100% 0}usa-menu[data-placement=\"top-start\"] .usa-menu-list{transform-origin:0 100%}usa-menu[data-placement=\"top-end\"] .usa-menu-list{transform-origin:100% 100%}.usa-menu-list>[role=\"menuitem\"]{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;border:0;background:none;color:inherit;font:500 14px/1.3 system-ui,sans-serif;text-align:left;text-decoration:none;padding:8px 10px;border-radius:8px;cursor:pointer}.usa-menu-list>[role=\"menuitem\"]:hover,.usa-menu-list>[role=\"menuitem\"]:focus-visible{background:var(--usa-menu-hover,rgba(124,92,255,.14));outline:none}.usa-menu-list>hr{border:0;border-top:1px solid rgba(127,127,127,.2);margin:4px 2px}@media (prefers-color-scheme:dark){.usa-menu-list{background:var(--usa-menu-bg,#1d2130);color:var(--usa-menu-fg,#e5e7eb)}}";
|
|
990
993
|
|
|
991
994
|
const MENU_EFFECTS = ['scale', 'fold', 'slide'];
|
|
992
995
|
function defineMenu(tag = 'usa-menu') {
|
|
@@ -1125,10 +1128,10 @@ function defineMenu(tag = 'usa-menu') {
|
|
|
1125
1128
|
}
|
|
1126
1129
|
}
|
|
1127
1130
|
return UsaMenu;
|
|
1128
|
-
}, { id: 'menu', text: css$
|
|
1131
|
+
}, { id: 'menu', text: css$D });
|
|
1129
1132
|
}
|
|
1130
1133
|
|
|
1131
|
-
var css$
|
|
1134
|
+
var css$C = "usa-progress-ring{position:relative;display:inline-block;vertical-align:middle;width:var(--usa-pr-size,120px);aspect-ratio:1;--usa-pr-color:#7c5cff;--usa-pr-track:rgba(127,127,127,.18);--usa-pr-width:9;font:700 calc(var(--usa-pr-size,120px)*.2)/1 system-ui,sans-serif;font-variant-numeric:tabular-nums}usa-progress-ring[data-variant=\"semi\"]{aspect-ratio:100/56}.usa-pr-label{position:absolute;inset:0;display:grid;place-items:center}usa-progress-ring[data-variant=\"semi\"] .usa-pr-label{place-items:end center}usa-progress-ring[data-variant=\"bar\"]{display:inline-flex;width:var(--usa-pr-size,100%);aspect-ratio:auto;gap:10px;align-items:center;font-size:14px}usa-progress-ring[data-variant=\"bar\"]>.usa-pr-track{flex:1 1 auto;min-width:40px}usa-progress-ring[data-variant=\"bar\"] .usa-pr-label{position:static;display:inline}usa-progress-ring .usa-pr-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.usa-pr-svg path{fill:none;stroke-width:var(--usa-pr-width);stroke-linecap:round}.usa-pr-svg .usa-pr-track{stroke:var(--usa-pr-track)}.usa-pr-svg .usa-pr-arc{stroke:var(--usa-pr-color)}usa-progress-ring[data-variant=\"semi\"] .usa-pr-label{padding-bottom:2%}.usa-pr-track:is(div){height:10px;border-radius:999px;background:var(--usa-pr-track);overflow:hidden}.usa-pr-fill{height:100%;border-radius:inherit;background:var(--usa-pr-color);transform-origin:0 50%;transform:scaleX(0)}usa-progress-ring[data-indeterminate] .usa-pr-svg{animation:usa-pr-spin 1.1s linear infinite}usa-progress-ring[data-indeterminate] .usa-pr-fill{width:35%;transform:none!important;animation:usa-pr-slide 1.3s ease-in-out infinite}@keyframes usa-pr-spin{to{transform:rotate(360deg)}}@keyframes usa-pr-slide{from{margin-left:-35%}to{margin-left:100%}}usa-odometer{display:inline-flex;align-items:flex-end;font-variant-numeric:tabular-nums;line-height:1.15}.usa-odo-row{display:inline-flex;align-items:flex-end}.usa-odo-col{display:inline-block;height:1.15em;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}.usa-odo-strip{display:block;white-space:pre;line-height:1.15em;text-align:center}.usa-odo-sym{display:inline-block;height:1.15em}@media (prefers-reduced-motion:reduce){usa-progress-ring[data-indeterminate] .usa-pr-svg,usa-progress-ring[data-indeterminate] .usa-pr-fill{animation-duration:4s}}";
|
|
1132
1135
|
|
|
1133
1136
|
const PROGRESS_VARIANTS = ['ring', 'bar', 'semi'];
|
|
1134
1137
|
const NS = 'http://www.w3.org/2000/svg';
|
|
@@ -1268,7 +1271,7 @@ function defineProgressRing(tag = 'usa-progress-ring') {
|
|
|
1268
1271
|
}
|
|
1269
1272
|
}
|
|
1270
1273
|
return UsaProgressRing;
|
|
1271
|
-
}, { id: 'meters', text: css$
|
|
1274
|
+
}, { id: 'meters', text: css$C });
|
|
1272
1275
|
}
|
|
1273
1276
|
function defineOdometer(tag = 'usa-odometer') {
|
|
1274
1277
|
return defineElement(tag, (Base) => {
|
|
@@ -1378,10 +1381,10 @@ function defineOdometer(tag = 'usa-odometer') {
|
|
|
1378
1381
|
}
|
|
1379
1382
|
}
|
|
1380
1383
|
return UsaOdometer;
|
|
1381
|
-
}, { id: 'meters', text: css$
|
|
1384
|
+
}, { id: 'meters', text: css$C });
|
|
1382
1385
|
}
|
|
1383
1386
|
|
|
1384
|
-
var css$
|
|
1387
|
+
var css$B = "usa-skeleton-reveal{position:relative;display:block;--usa-sk-base:rgba(127,127,127,.16);--usa-sk-hi:rgba(255,255,255,.55)}usa-skeleton-reveal[data-loading]>:not(.usa-sk-layer){visibility:hidden}.usa-sk-layer{position:absolute;inset:0;pointer-events:none}.usa-sk-box{position:absolute;border-radius:6px;background:var(--usa-sk-base);overflow:hidden}usa-skeleton-reveal[data-variant=\"wave\"] .usa-sk-box{background:linear-gradient(100deg,var(--usa-sk-base) 30%,var(--usa-sk-hi) 50%,var(--usa-sk-base) 70%) var(--usa-sk-x,0) 0/var(--usa-sk-w,600px) 100% no-repeat,var(--usa-sk-base);animation:usa-sk-wave 1.4s linear infinite}usa-skeleton-reveal[data-variant=\"pulse\"] .usa-sk-box{animation:usa-sk-pulse 1.2s ease-in-out infinite alternate}usa-skeleton-reveal[data-variant=\"glow\"] .usa-sk-box{animation:usa-sk-glow 1.6s ease-in-out infinite alternate}@keyframes usa-sk-wave{from{background-position:calc(var(--usa-sk-x,0px) - var(--usa-sk-w,600px)) 0,0 0}to{background-position:calc(var(--usa-sk-x,0px) + var(--usa-sk-w,600px)) 0,0 0}}@keyframes usa-sk-pulse{from{opacity:1}to{opacity:.45}}@keyframes usa-sk-glow{from{box-shadow:0 0 0 rgba(124,92,255,0)}to{box-shadow:0 0 14px rgba(124,92,255,.45);background:rgba(124,92,255,.22)}}@media (prefers-color-scheme:dark){usa-skeleton-reveal{--usa-sk-hi:rgba(255,255,255,.16)}}@media (prefers-reduced-motion:reduce){.usa-sk-box{animation:none!important}}";
|
|
1385
1388
|
|
|
1386
1389
|
const SKELETON_VARIANTS = ['wave', 'pulse', 'glow'];
|
|
1387
1390
|
function defineSkeletonReveal(tag = 'usa-skeleton-reveal') {
|
|
@@ -1496,10 +1499,10 @@ function defineSkeletonReveal(tag = 'usa-skeleton-reveal') {
|
|
|
1496
1499
|
}
|
|
1497
1500
|
}
|
|
1498
1501
|
return UsaSkeletonReveal;
|
|
1499
|
-
}, { id: 'skeleton-reveal', text: css$
|
|
1502
|
+
}, { id: 'skeleton-reveal', text: css$B });
|
|
1500
1503
|
}
|
|
1501
1504
|
|
|
1502
|
-
var css$
|
|
1505
|
+
var css$A = "usa-star-rating{display:inline-flex;gap:var(--usa-star-gap,4px);--usa-star-size:28px;--usa-star-on:#fbbf24;--usa-star-off:rgba(127,127,127,.28);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:8px}usa-star-rating[readonly]{cursor:default}usa-star-rating:focus-visible{outline:2px solid var(--usa-star-on);outline-offset:4px}.usa-star{position:relative;display:inline-block;width:var(--usa-star-size);height:var(--usa-star-size);--usa-star-fill:0%}.usa-star svg{display:block;width:100%;height:100%;overflow:visible;stroke:none}.usa-star-bg{fill:var(--usa-star-off)}.usa-star-fg{position:absolute;left:0;top:0;bottom:0;width:var(--usa-star-fill);overflow:hidden;transition:width .18s ease-out}.usa-star-fg svg{width:var(--usa-star-size);height:var(--usa-star-size);fill:var(--usa-star-on);filter:drop-shadow(0 1px 3px rgba(251,191,36,.45))}usa-star-rating[data-preview] .usa-star-fg{opacity:.8}.usa-star-spark{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:var(--usa-star-on);pointer-events:none}@media (prefers-reduced-motion:reduce){.usa-star-fg{transition:none}}";
|
|
1503
1506
|
|
|
1504
1507
|
const PATHS = {
|
|
1505
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',
|
|
@@ -1623,10 +1626,10 @@ function defineStarRating(tag = 'usa-star-rating') {
|
|
|
1623
1626
|
}
|
|
1624
1627
|
}
|
|
1625
1628
|
return UsaStarRating;
|
|
1626
|
-
}, { id: 'star-rating', text: css$
|
|
1629
|
+
}, { id: 'star-rating', text: css$A });
|
|
1627
1630
|
}
|
|
1628
1631
|
|
|
1629
|
-
var css$
|
|
1632
|
+
var css$z = "usa-milestones{position:relative;display:block;--usa-ms-color:#7c5cff;--usa-ms-rail:rgba(127,127,127,.22);--usa-ms-gap:28px;padding:4px 0}.usa-ms-rail{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;border-radius:3px;background:var(--usa-ms-rail);overflow:hidden}.usa-ms-fill{position:absolute;inset:0;background:linear-gradient(var(--usa-ms-color),#22d3ee);transform-origin:50% 0;transform:scaleY(0)}.usa-ms-item{position:relative;box-sizing:border-box;width:50%;padding:0 var(--usa-ms-gap) var(--usa-ms-gap);text-align:left}.usa-ms-item[data-side=\"right\"]{margin-left:50%}.usa-ms-item[data-side=\"left\"]{text-align:right}.usa-ms-dot{position:absolute;top:4px;width:14px;height:14px;border-radius:50%;background:var(--usa-ms-color);box-shadow:0 0 0 4px color-mix(in srgb,var(--usa-ms-color) 22%,transparent);transform:scale(0)}.usa-ms-item[data-reached] .usa-ms-dot{transform:none}.usa-ms-item[data-side=\"right\"] .usa-ms-dot{left:-7px}.usa-ms-item[data-side=\"left\"] .usa-ms-dot{right:-7px}.usa-ms-date{display:block;font-size:.8em;font-weight:700;letter-spacing:.04em;color:var(--usa-ms-color);margin-bottom:2px}.usa-ms-item:not([data-reached])>:not(.usa-ms-dot){opacity:0}usa-milestones[data-layout=\"left\"] .usa-ms-rail{left:7px}usa-milestones[data-layout=\"left\"] .usa-ms-item{width:auto;margin-left:0;padding-left:calc(var(--usa-ms-gap) + 8px);text-align:left}usa-milestones[data-layout=\"left\"] .usa-ms-dot{left:1px;right:auto}@media (max-width:640px){usa-milestones .usa-ms-rail{left:7px}usa-milestones .usa-ms-item{width:auto;margin-left:0;padding-left:calc(var(--usa-ms-gap) + 8px);text-align:left}usa-milestones .usa-ms-item .usa-ms-dot{left:1px;right:auto}}";
|
|
1630
1633
|
|
|
1631
1634
|
function defineMilestones(tag = 'usa-milestones') {
|
|
1632
1635
|
return defineElement(tag, (Base) => {
|
|
@@ -1714,10 +1717,10 @@ function defineMilestones(tag = 'usa-milestones') {
|
|
|
1714
1717
|
}
|
|
1715
1718
|
}
|
|
1716
1719
|
return UsaMilestones;
|
|
1717
|
-
}, { id: 'milestones', text: css$
|
|
1720
|
+
}, { id: 'milestones', text: css$z });
|
|
1718
1721
|
}
|
|
1719
1722
|
|
|
1720
|
-
var css$
|
|
1723
|
+
var css$y = "usa-masonry-flow{position:relative;display:block;width:100%}usa-masonry-flow>*{position:absolute;left:0;top:0;box-sizing:border-box;margin:0;will-change:transform}usa-masonry-flow>[data-hidden]:not([data-leaving]){display:none}usa-masonry-flow>[data-leaving]{pointer-events:none}";
|
|
1721
1724
|
|
|
1722
1725
|
function defineMasonryFlow(tag = 'usa-masonry-flow') {
|
|
1723
1726
|
return defineElement(tag, (Base) => {
|
|
@@ -1838,10 +1841,10 @@ function defineMasonryFlow(tag = 'usa-masonry-flow') {
|
|
|
1838
1841
|
}
|
|
1839
1842
|
}
|
|
1840
1843
|
return UsaMasonryFlow;
|
|
1841
|
-
}, { id: 'masonry-flow', text: css$
|
|
1844
|
+
}, { id: 'masonry-flow', text: css$y });
|
|
1842
1845
|
}
|
|
1843
1846
|
|
|
1844
|
-
var css$
|
|
1847
|
+
var css$x = "usa-compare{position:relative;display:grid;overflow:hidden;border-radius:var(--usa-cmp-radius,14px);user-select:none;touch-action:pan-y;cursor:ew-resize;--usa-cmp-line:#fff;outline-offset:3px}usa-compare[data-orientation=\"vertical\"]{touch-action:pan-x;cursor:ns-resize}usa-compare>.usa-cmp-before,usa-compare>.usa-cmp-after{grid-area:1/1;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.usa-cmp-handle{position:absolute;top:0;bottom:0;left:50%;width:0;z-index:2;pointer-events:none}.usa-cmp-handle::before{content:\"\";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:var(--usa-cmp-line);box-shadow:0 0 8px rgba(0,0,0,.35)}usa-compare[data-orientation=\"vertical\"] .usa-cmp-handle{top:50%;bottom:auto;left:0;right:0;width:auto;height:0}usa-compare[data-orientation=\"vertical\"] .usa-cmp-handle::before{left:0;right:0;top:-1.5px;width:auto;height:3px}.usa-cmp-knob{position:absolute;top:50%;left:0;display:grid;place-items:center;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--usa-cmp-line);color:#111827;box-shadow:0 6px 18px rgba(0,0,0,.35);pointer-events:auto;cursor:grab;transition:transform .2s}usa-compare[data-orientation=\"vertical\"] .usa-cmp-knob{left:50%;top:0;transform:rotate(90deg)}usa-compare:active .usa-cmp-knob{transform:scale(.92)}usa-compare[data-orientation=\"vertical\"]:active .usa-cmp-knob{transform:rotate(90deg) scale(.92)}.usa-cmp-label{position:absolute;top:10px;z-index:1;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:600 12px/1.4 system-ui,sans-serif;pointer-events:none}.usa-cmp-label-b{left:10px}.usa-cmp-label-a{right:10px}";
|
|
1845
1848
|
|
|
1846
1849
|
function defineCompare(tag = 'usa-compare') {
|
|
1847
1850
|
return defineElement(tag, (Base) => {
|
|
@@ -1965,10 +1968,10 @@ function defineCompare(tag = 'usa-compare') {
|
|
|
1965
1968
|
}
|
|
1966
1969
|
}
|
|
1967
1970
|
return UsaCompare;
|
|
1968
|
-
}, { id: 'compare', text: css$
|
|
1971
|
+
}, { id: 'compare', text: css$x });
|
|
1969
1972
|
}
|
|
1970
1973
|
|
|
1971
|
-
var css$
|
|
1974
|
+
var css$w = "usa-cube-gallery{position:relative;display:block;aspect-ratio:4/3;perspective:1100px;outline-offset:4px}.usa-cube-stage{position:absolute;inset:0;transform-style:preserve-3d;touch-action:pan-y}.usa-cube-face{position:absolute;inset:0;box-sizing:border-box;margin:0;backface-visibility:hidden;display:none;overflow:hidden;border-radius:var(--usa-cube-radius,14px)}.usa-cube-face[data-active]{display:block}.usa-cube-face>img{width:100%;height:100%;object-fit:cover;display:block}.usa-cube-btn{position:absolute;top:50%;z-index:2;width:34px;height:34px;margin-top:-17px;border:0;border-radius:50%;background:rgba(255,255,255,.85);color:#111827;font:700 20px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.25)}.usa-cube-prev{left:8px}.usa-cube-next{right:8px}.usa-cube-btn:focus-visible{outline:2px solid #7c5cff;outline-offset:2px}";
|
|
1972
1975
|
|
|
1973
1976
|
function defineCubeGallery(tag = 'usa-cube-gallery') {
|
|
1974
1977
|
return defineElement(tag, (Base) => {
|
|
@@ -2101,10 +2104,10 @@ function defineCubeGallery(tag = 'usa-cube-gallery') {
|
|
|
2101
2104
|
}
|
|
2102
2105
|
}
|
|
2103
2106
|
return UsaCubeGallery;
|
|
2104
|
-
}, { id: 'cube-gallery', text: css$
|
|
2107
|
+
}, { id: 'cube-gallery', text: css$w });
|
|
2105
2108
|
}
|
|
2106
2109
|
|
|
2107
|
-
var css$
|
|
2110
|
+
var css$v = "usa-dock{display:inline-flex;align-items:flex-end;gap:var(--usa-dock-gap,8px);padding:8px 10px;border-radius:20px;background:var(--usa-dock-bg,rgba(255,255,255,.55));-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:0 10px 30px -10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.45);--usa-dock-size:44px}usa-dock[data-orientation=\"vertical\"]{flex-direction:column;align-items:flex-start}.usa-dock-item{--usa-dock-s:1;position:relative;display:grid;place-items:center;flex:none;width:calc(var(--usa-dock-size) * var(--usa-dock-s));height:calc(var(--usa-dock-size) * var(--usa-dock-s));border:0;padding:0;border-radius:calc(var(--usa-dock-size) * .26 * var(--usa-dock-s));background:var(--usa-dock-item,linear-gradient(135deg,#7c5cff,#22d3ee));color:#fff;font-size:calc(var(--usa-dock-size) * .5 * var(--usa-dock-s));text-decoration:none;cursor:pointer;transition:width .12s ease-out,height .12s ease-out,font-size .12s ease-out,border-radius .12s;box-shadow:0 4px 10px rgba(0,0,0,.18)}.usa-dock-item:focus-visible{outline:2px solid #7c5cff;outline-offset:3px}.usa-dock-item[data-label]::after{content:attr(data-label);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);padding:3px 8px;border-radius:6px;background:rgba(17,24,39,.9);color:#fff;font:500 12px/1.3 system-ui,sans-serif;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}.usa-dock-item[data-near]::after,.usa-dock-item:focus-visible::after{opacity:1;transform:translateX(-50%)}usa-dock[data-orientation=\"vertical\"] .usa-dock-item[data-label]::after{bottom:auto;left:calc(100% + 8px);top:50%;transform:translateY(-50%)}@media (prefers-reduced-motion:reduce){.usa-dock-item{transition:none}}";
|
|
2108
2111
|
|
|
2109
2112
|
function defineDock(tag = 'usa-dock') {
|
|
2110
2113
|
return defineElement(tag, (Base) => {
|
|
@@ -2172,10 +2175,10 @@ function defineDock(tag = 'usa-dock') {
|
|
|
2172
2175
|
}
|
|
2173
2176
|
}
|
|
2174
2177
|
return UsaDock;
|
|
2175
|
-
}, { id: 'dock', text: css$
|
|
2178
|
+
}, { id: 'dock', text: css$v });
|
|
2176
2179
|
}
|
|
2177
2180
|
|
|
2178
|
-
var css$
|
|
2181
|
+
var css$u = "usa-nav-morph{position:relative;display:flex;gap:4px;align-items:center;isolation:isolate;--usa-nm-color:#7c5cff;flex-wrap:nowrap;max-width:100%;overflow-x:auto;scrollbar-width:none}usa-nav-morph::-webkit-scrollbar{display:none}usa-nav-morph>:not(.usa-nm-ink){position:relative;z-index:1;flex:none;padding:8px 12px;border-radius:10px;color:inherit;text-decoration:none;font-weight:600;white-space:nowrap;transition:color .25s;outline-offset:2px}.usa-nm-ink{position:absolute;left:0;z-index:0;width:0;pointer-events:none;background:var(--usa-nm-color)}usa-nav-morph[data-indicator=\"underline\"] .usa-nm-ink{bottom:0;height:3px;border-radius:3px}usa-nav-morph[data-indicator=\"pill\"] .usa-nm-ink,usa-nav-morph[data-indicator=\"blob\"] .usa-nm-ink{top:0;bottom:0;border-radius:10px;opacity:.16}usa-nav-morph[data-indicator=\"blob\"] .usa-nm-ink{border-radius:999px;opacity:.2}usa-nav-morph[data-indicator=\"dot\"] .usa-nm-ink{bottom:0;height:6px;background:radial-gradient(circle,var(--usa-nm-color) 3px,transparent 3.5px)}usa-nav-morph>[aria-current=\"page\"]{color:var(--usa-nm-color)}";
|
|
2179
2182
|
|
|
2180
2183
|
const NAV_INDICATORS = ['underline', 'pill', 'blob', 'dot'];
|
|
2181
2184
|
function defineNavMorph(tag = 'usa-nav-morph') {
|
|
@@ -2279,10 +2282,10 @@ function defineNavMorph(tag = 'usa-nav-morph') {
|
|
|
2279
2282
|
}
|
|
2280
2283
|
}
|
|
2281
2284
|
return UsaNavMorph;
|
|
2282
|
-
}, { id: 'nav-morph', text: css$
|
|
2285
|
+
}, { id: 'nav-morph', text: css$u });
|
|
2283
2286
|
}
|
|
2284
2287
|
|
|
2285
|
-
var css$
|
|
2288
|
+
var css$t = "usa-menu-toggle{display:inline-grid;place-items:center;width:var(--usa-mt-size,44px);height:var(--usa-mt-size,44px);border-radius:12px;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent;outline-offset:2px;--usa-mt-ease:cubic-bezier(.65,.05,.36,1)}usa-menu-toggle:hover{background:rgba(127,127,127,.12)}.usa-mt-box{position:relative;width:24px;height:18px}.usa-mt-bar{position:absolute;left:0;width:100%;height:2.5px;border-radius:2px;background:currentColor;transform-origin:50% 50%}.usa-mt-bar:nth-child(1){top:0}.usa-mt-bar:nth-child(2){top:7.75px}.usa-mt-bar:nth-child(3){bottom:0}usa-menu-toggle[data-animate] .usa-mt-bar{transition:transform .38s var(--usa-mt-ease),opacity .2s,top .38s var(--usa-mt-ease),bottom .38s var(--usa-mt-ease),width .38s var(--usa-mt-ease)}usa-menu-toggle[data-animate] .usa-mt-box{transition:transform .38s var(--usa-mt-ease)}usa-menu-toggle[data-variant=\"cross\"][data-open] .usa-mt-bar:nth-child(1),usa-menu-toggle[data-variant=\"plus-x\"][data-open] .usa-mt-bar:nth-child(1){top:7.75px;transform:rotate(45deg)}usa-menu-toggle[data-variant=\"cross\"][data-open] .usa-mt-bar:nth-child(2),usa-menu-toggle[data-variant=\"plus-x\"][data-open] .usa-mt-bar:nth-child(2){opacity:0;transform:scaleX(.2)}usa-menu-toggle[data-variant=\"cross\"][data-open] .usa-mt-bar:nth-child(3),usa-menu-toggle[data-variant=\"plus-x\"][data-open] .usa-mt-bar:nth-child(3){bottom:7.75px;transform:rotate(-45deg)}usa-menu-toggle[data-variant=\"plus-x\"][data-open] .usa-mt-box{transform:rotate(180deg)}usa-menu-toggle[data-variant=\"arrow\"][data-open] .usa-mt-bar:nth-child(1){width:55%;transform:translate(-2px,3.5px) rotate(-40deg)}usa-menu-toggle[data-variant=\"arrow\"][data-open] .usa-mt-bar:nth-child(3){width:55%;transform:translate(-2px,-3.5px) rotate(40deg)}usa-menu-toggle[data-variant=\"arrow\"][data-open] .usa-mt-box{transform:rotate(180deg)}usa-menu-toggle[data-variant=\"minus\"][data-open] .usa-mt-bar:nth-child(1){top:7.75px}usa-menu-toggle[data-variant=\"minus\"][data-open] .usa-mt-bar:nth-child(3){bottom:7.75px}";
|
|
2286
2289
|
|
|
2287
2290
|
const TOGGLE_VARIANTS = ['cross', 'arrow', 'minus', 'plus-x'];
|
|
2288
2291
|
function defineMenuToggle(tag = 'usa-menu-toggle') {
|
|
@@ -2355,10 +2358,10 @@ function defineMenuToggle(tag = 'usa-menu-toggle') {
|
|
|
2355
2358
|
}
|
|
2356
2359
|
}
|
|
2357
2360
|
return UsaMenuToggle;
|
|
2358
|
-
}, { id: 'menu-toggle', text: css$
|
|
2361
|
+
}, { id: 'menu-toggle', text: css$t });
|
|
2359
2362
|
}
|
|
2360
2363
|
|
|
2361
|
-
var css$
|
|
2364
|
+
var css$s = "usa-tip{position:relative;display:inline-block}.usa-tip-bubble{position:absolute;left:0;top:0;z-index:60;box-sizing:border-box;max-width:min(260px,calc(100vw - 16px));width:max-content;padding:7px 11px;border-radius:9px;background:var(--usa-tip-bg,#111827);color:var(--usa-tip-fg,#f9fafb);font:500 13px/1.4 system-ui,sans-serif;box-shadow:0 10px 26px -8px rgba(0,0,0,.4);text-align:left;white-space:normal}.usa-tip-bubble[hidden]{display:none}.usa-tip-bubble[data-placement=\"top\"]{transform-origin:50% 100%}.usa-tip-bubble[data-placement=\"bottom\"]{transform-origin:50% 0}.usa-tip-bubble[data-placement=\"left\"]{transform-origin:100% 50%}.usa-tip-bubble[data-placement=\"right\"]{transform-origin:0 50%}.usa-tip-arrow{position:absolute;width:10px;height:10px;background:inherit;transform:rotate(45deg)}.usa-tip-bubble[data-placement=\"top\"] .usa-tip-arrow{bottom:-4px;left:calc(50% - 5px + var(--usa-tip-shift,0px))}.usa-tip-bubble[data-placement=\"bottom\"] .usa-tip-arrow{top:-4px;left:calc(50% - 5px + var(--usa-tip-shift,0px))}.usa-tip-bubble[data-placement=\"left\"] .usa-tip-arrow{right:-4px;top:calc(50% - 5px)}.usa-tip-bubble[data-placement=\"right\"] .usa-tip-arrow{left:-4px;top:calc(50% - 5px)}";
|
|
2362
2365
|
|
|
2363
2366
|
const TIP_PLACEMENTS = ['top', 'bottom', 'left', 'right'];
|
|
2364
2367
|
const FLIP = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
|
|
@@ -2490,10 +2493,10 @@ function defineTip(tag = 'usa-tip') {
|
|
|
2490
2493
|
}
|
|
2491
2494
|
}
|
|
2492
2495
|
return UsaTip;
|
|
2493
|
-
}, { id: 'tip', text: css$
|
|
2496
|
+
}, { id: 'tip', text: css$s });
|
|
2494
2497
|
}
|
|
2495
2498
|
|
|
2496
|
-
var css$
|
|
2499
|
+
var css$r = "usa-stepper{--usa-st-c:#7c5cff;--usa-st-size:30px;position:relative;display:flex;justify-content:space-between;gap:8px;padding:0;counter-reset:s;max-width:100%}usa-stepper[data-orientation=\"vertical\"]{flex-direction:column;gap:22px}.usa-st-rail{position:absolute;left:calc(var(--usa-st-size)/2);right:calc(var(--usa-st-size)/2);top:calc(var(--usa-st-size)/2 - 2px);height:4px;border-radius:4px;background:rgba(127,127,127,.25);pointer-events:none}usa-stepper[data-orientation=\"vertical\"] .usa-st-rail{left:calc(var(--usa-st-size)/2 - 2px);right:auto;top:calc(var(--usa-st-size)/2);bottom:calc(var(--usa-st-size)/2);width:4px;height:auto}.usa-st-fill{position:absolute;inset:0;border-radius:inherit;background:var(--usa-st-c);transform-origin:0 0;transform:scaleX(calc(var(--usa-st-p,0%) / 100%));transition:transform .55s cubic-bezier(.6,.05,.3,1)}usa-stepper[data-orientation=\"vertical\"] .usa-st-fill{transform:scaleY(calc(var(--usa-st-p,0%) / 100%))}.usa-st-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;font:600 12px/1.25 system-ui,sans-serif;text-align:center;color:rgba(127,127,127,.95)}usa-stepper[data-orientation=\"vertical\"] .usa-st-step{flex-direction:row;text-align:left}.usa-st-step[data-current],.usa-st-step[data-done]{color:inherit}.usa-st-dot{position:relative;display:grid;place-items:center;flex:none;width:var(--usa-st-size);height:var(--usa-st-size);border-radius:50%;background:var(--usa-st-bg,#fff);box-shadow:inset 0 0 0 2px rgba(127,127,127,.4);color:#666;font-weight:700;transition:background .3s,box-shadow .3s,color .3s}.usa-st-step[data-current] .usa-st-dot{box-shadow:inset 0 0 0 2px var(--usa-st-c);color:var(--usa-st-c)}.usa-st-step[data-done] .usa-st-dot{background:var(--usa-st-c);box-shadow:none;color:#fff}.usa-st-check{position:absolute;width:60%;height:60%;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;opacity:0}.usa-st-step[data-done] .usa-st-check{stroke-dashoffset:0;opacity:1}.usa-st-step[data-done] .usa-st-num{opacity:0}.usa-st-step[data-clickable],usa-stepper[clickable] .usa-st-step{cursor:pointer}@media (prefers-reduced-motion:reduce){.usa-st-fill,.usa-st-dot{transition:none}}";
|
|
2497
2500
|
|
|
2498
2501
|
function defineStepper(tag = 'usa-stepper') {
|
|
2499
2502
|
return defineElement(tag, (Base) => {
|
|
@@ -2590,10 +2593,10 @@ function defineStepper(tag = 'usa-stepper') {
|
|
|
2590
2593
|
}
|
|
2591
2594
|
}
|
|
2592
2595
|
return UsaStepper;
|
|
2593
|
-
}, { id: 'stepper', text: css$
|
|
2596
|
+
}, { id: 'stepper', text: css$r });
|
|
2594
2597
|
}
|
|
2595
2598
|
|
|
2596
|
-
var css$
|
|
2599
|
+
var css$q = "usa-pagination{--usa-pg-c:#7c5cff;display:inline-flex;align-items:center;gap:4px;max-width:100%;font:600 14px/1 system-ui,sans-serif}.usa-pg-list{position:relative;display:inline-flex;align-items:center;gap:2px;isolation:isolate}.usa-pg-ink{position:absolute;left:0;top:0;height:100%;width:0;border-radius:10px;background:var(--usa-pg-c);z-index:-1;transition:width .3s}.usa-pg-btn{display:grid;place-items:center;min-width:34px;height:34px;padding:0 6px;border:0;border-radius:10px;background:none;color:inherit;font:inherit;cursor:pointer;transition:color .25s,background .2s}.usa-pg-btn:hover:not(:disabled):not([aria-current]){background:rgba(127,127,127,.14)}.usa-pg-btn[aria-current=\"page\"]{color:#fff}.usa-pg-btn:disabled{opacity:.35;cursor:default}.usa-pg-btn:focus-visible{outline:2px solid var(--usa-pg-c);outline-offset:2px}.usa-pg-gap{min-width:20px;text-align:center;opacity:.6}@media (max-width:420px){.usa-pg-btn{min-width:28px;height:30px;padding:0 3px}}@media (prefers-reduced-motion:reduce){.usa-pg-ink{transition:none}}";
|
|
2597
2600
|
|
|
2598
2601
|
/** The visible page list: numbers and `'…'` gaps (1-based). */
|
|
2599
2602
|
function pageWindow(page, total, siblings = 1) {
|
|
@@ -2715,10 +2718,10 @@ function definePagination(tag = 'usa-pagination') {
|
|
|
2715
2718
|
}
|
|
2716
2719
|
}
|
|
2717
2720
|
return UsaPagination;
|
|
2718
|
-
}, { id: 'pagination', text: css$
|
|
2721
|
+
}, { id: 'pagination', text: css$q });
|
|
2719
2722
|
}
|
|
2720
2723
|
|
|
2721
|
-
var css$
|
|
2724
|
+
var css$p = "usa-segmented{--usa-seg-c:#7c5cff;position:relative;display:inline-flex;align-items:stretch;padding:3px;border-radius:12px;background:rgba(127,127,127,.16);isolation:isolate;max-width:100%;font:600 13px/1 system-ui,sans-serif}.usa-seg-thumb{position:absolute;top:3px;bottom:3px;left:3px;z-index:-1;border-radius:9px;background:var(--usa-seg-thumb,#fff);box-shadow:0 2px 8px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.05);transform-origin:50% 50%}usa-segmented[data-variant=\"pill\"]{border-radius:999px}usa-segmented[data-variant=\"pill\"] .usa-seg-thumb{border-radius:999px;background:var(--usa-seg-c)}usa-segmented[data-variant=\"pill\"] .usa-seg-item[data-selected]{color:#fff}usa-segmented[data-variant=\"outline\"]{background:none;box-shadow:inset 0 0 0 1.5px rgba(127,127,127,.35)}usa-segmented[data-variant=\"outline\"] .usa-seg-thumb{background:none;box-shadow:inset 0 0 0 2px var(--usa-seg-c)}.usa-seg-item{flex:1 1 0;min-width:0;padding:8px 14px;border:0;border-radius:9px;background:none;color:inherit;font:inherit;white-space:nowrap;cursor:pointer;opacity:.7;transition:opacity .2s,transform .25s cubic-bezier(.3,1.4,.5,1),color .2s}.usa-seg-item[data-selected]{opacity:1;transform:scale(1.04)}.usa-seg-item:focus-visible{outline:2px solid var(--usa-seg-c);outline-offset:1px}@media (max-width:420px){.usa-seg-item{padding:8px 9px}}@media (prefers-reduced-motion:reduce){.usa-seg-item{transition:none}}";
|
|
2722
2725
|
|
|
2723
2726
|
const SEGMENTED_VARIANTS = ['ios', 'pill', 'outline'];
|
|
2724
2727
|
function defineSegmented(tag = 'usa-segmented') {
|
|
@@ -2812,10 +2815,10 @@ function defineSegmented(tag = 'usa-segmented') {
|
|
|
2812
2815
|
}
|
|
2813
2816
|
}
|
|
2814
2817
|
return UsaSegmented;
|
|
2815
|
-
}, { id: 'segmented', text: css$
|
|
2818
|
+
}, { id: 'segmented', text: css$p });
|
|
2816
2819
|
}
|
|
2817
2820
|
|
|
2818
|
-
var css$
|
|
2821
|
+
var css$o = "usa-switch{--usa-sw-c:#34c759;--usa-sw-w:52px;--usa-sw-h:30px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;vertical-align:middle;outline-offset:3px;border-radius:999px}usa-switch[disabled]{opacity:.45;cursor:not-allowed}.usa-sw-track{position:relative;flex:none;width:var(--usa-sw-w);height:var(--usa-sw-h);border-radius:999px;background:rgba(127,127,127,.35);overflow:hidden;transition:background .3s}.usa-sw-fill{position:absolute;inset:0;border-radius:999px;background:var(--usa-sw-c);transform:scale(0);transform-origin:calc(var(--usa-sw-h)/2) 50%;transition:transform .35s cubic-bezier(.4,0,.2,1)}usa-switch[data-on] .usa-sw-fill{transform:scale(1)}.usa-sw-thumb{position:absolute;top:3px;left:3px;width:calc(var(--usa-sw-h) - 6px);height:calc(var(--usa-sw-h) - 6px);border-radius:999px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:left .32s cubic-bezier(.3,1.25,.5,1),width .2s ease,background .3s,box-shadow .3s}usa-switch[data-on] .usa-sw-thumb{left:calc(var(--usa-sw-w) - var(--usa-sw-h) + 3px)}usa-switch[data-variant=\"ios\"][data-press] .usa-sw-thumb{width:calc(var(--usa-sw-h) + 2px)}usa-switch[data-variant=\"ios\"][data-press][data-on] .usa-sw-thumb{left:calc(var(--usa-sw-w) - var(--usa-sw-h) - 5px)}usa-switch[data-variant=\"daynight\"]{--usa-sw-w:64px;--usa-sw-h:32px}usa-switch[data-variant=\"daynight\"] .usa-sw-track{background:linear-gradient(#7dd3fc,#38bdf8)}usa-switch[data-variant=\"daynight\"] .usa-sw-fill{background:linear-gradient(#1e1b4b,#312e81);transform:none;opacity:0;transition:opacity .45s}usa-switch[data-variant=\"daynight\"][data-on] .usa-sw-fill{opacity:1}usa-switch[data-variant=\"daynight\"] .usa-sw-thumb{background:radial-gradient(circle at 40% 40%,#fde68a,#f59e0b);box-shadow:0 0 10px #fbbf24}usa-switch[data-variant=\"daynight\"][data-on] .usa-sw-thumb{background:radial-gradient(circle at 65% 35%,transparent 5px,#e5e7eb 5.5px);box-shadow:0 0 8px rgba(255,255,255,.5)}usa-switch[data-variant=\"daynight\"] .usa-sw-deco{position:absolute;inset:0;background:radial-gradient(circle,#fff 1px,transparent 1.5px) 12px 8px/14px 11px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s}usa-switch[data-variant=\"daynight\"][data-on] .usa-sw-deco{opacity:.9;transform:none}usa-switch[data-variant=\"bounce\"] .usa-sw-thumb{transition:left .28s cubic-bezier(.5,0,.75,0)}usa-switch[data-variant=\"liquid\"] .usa-sw-fill{background:linear-gradient(90deg,#22d3ee,#7c5cff)}usa-switch[data-variant=\"liquid\"] .usa-sw-thumb{transition:left .5s cubic-bezier(.68,-.4,.27,1.4)}usa-switch:focus-visible .usa-sw-track{box-shadow:0 0 0 3px rgba(124,92,255,.5)}@media (prefers-reduced-motion:reduce){.usa-sw-thumb,.usa-sw-fill,.usa-sw-deco,.usa-sw-track{transition:none!important}}";
|
|
2819
2822
|
|
|
2820
2823
|
const SWITCH_VARIANTS = ['ios', 'daynight', 'bounce', 'liquid'];
|
|
2821
2824
|
function defineSwitch(tag = 'usa-switch') {
|
|
@@ -2903,10 +2906,10 @@ function defineSwitch(tag = 'usa-switch') {
|
|
|
2903
2906
|
}
|
|
2904
2907
|
}
|
|
2905
2908
|
return UsaSwitch;
|
|
2906
|
-
}, { id: 'switch', text: css$
|
|
2909
|
+
}, { id: 'switch', text: css$o });
|
|
2907
2910
|
}
|
|
2908
2911
|
|
|
2909
|
-
var css$
|
|
2912
|
+
var css$n = "usa-kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(140px,1fr);gap:12px;max-width:100%;overflow-x:auto;padding:4px;font:500 13px/1.35 system-ui,sans-serif}.usa-kb-col{display:flex;flex-direction:column;gap:8px;min-height:80px;padding:10px;border-radius:14px;background:rgba(127,127,127,.12);margin:0;list-style:none}.usa-kb-col>h1,.usa-kb-col>h2,.usa-kb-col>h3,.usa-kb-col>h4{margin:0 0 2px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}.usa-kb-card{padding:10px 12px;border-radius:10px;background:var(--usa-kb-card,#fff);color:#111;box-shadow:0 1px 3px rgba(0,0,0,.14);cursor:grab;touch-action:none;user-select:none;outline-offset:2px}.usa-kb-card:focus-visible{outline:2px solid #7c5cff}.usa-kb-lifted{cursor:grabbing;box-shadow:0 18px 30px -8px rgba(0,0,0,.35);transition:transform .12s}.usa-kb-held{outline:2px dashed #7c5cff;transform:scale(1.03)}.usa-kb-ph{border-radius:10px;border:2px dashed rgba(124,92,255,.5);background:rgba(124,92,255,.08)}.usa-kb-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media (prefers-reduced-motion:reduce){.usa-kb-lifted,.usa-kb-held{transition:none;transform:none!important}}";
|
|
2910
2913
|
|
|
2911
2914
|
function defineKanban(tag = 'usa-kanban') {
|
|
2912
2915
|
return defineElement(tag, (Base) => {
|
|
@@ -3111,10 +3114,10 @@ function defineKanban(tag = 'usa-kanban') {
|
|
|
3111
3114
|
}
|
|
3112
3115
|
}
|
|
3113
3116
|
return UsaKanban;
|
|
3114
|
-
}, { id: 'kanban', text: css$
|
|
3117
|
+
}, { id: 'kanban', text: css$n });
|
|
3115
3118
|
}
|
|
3116
3119
|
|
|
3117
|
-
var css$
|
|
3120
|
+
var css$m = "usa-swipe-deck{position:relative;display:grid;width:var(--usa-sd-w,240px);max-width:100%;height:var(--usa-sd-h,300px);touch-action:pan-y;outline-offset:6px;border-radius:18px}.usa-sd-card{grid-area:1/1;position:relative;display:grid;place-items:center;border-radius:18px;background:var(--usa-sd-bg,linear-gradient(160deg,#7c5cff,#22d3ee));color:#fff;font:800 22px/1.2 system-ui,sans-serif;box-shadow:0 12px 28px -10px rgba(0,0,0,.4);transition:transform .3s cubic-bezier(.3,1.3,.5,1),opacity .3s;user-select:none;cursor:grab;overflow:hidden;touch-action:none}.usa-sd-card.usa-sd-dragging{transition:none;cursor:grabbing}.usa-sd-stamp{position:absolute;top:18px;padding:4px 10px;border:3px solid currentColor;border-radius:8px;font:900 20px/1 system-ui,sans-serif;letter-spacing:.1em;opacity:0;pointer-events:none}.usa-sd-like{left:16px;color:#4ade80;transform:rotate(-14deg)}.usa-sd-nope{right:16px;color:#f87171;transform:rotate(14deg)}@media (prefers-reduced-motion:reduce){.usa-sd-card{transition:none}}";
|
|
3118
3121
|
|
|
3119
3122
|
function defineSwipeDeck(tag = 'usa-swipe-deck') {
|
|
3120
3123
|
return defineElement(tag, (Base) => {
|
|
@@ -3256,10 +3259,10 @@ function defineSwipeDeck(tag = 'usa-swipe-deck') {
|
|
|
3256
3259
|
}
|
|
3257
3260
|
}
|
|
3258
3261
|
return UsaSwipeDeck;
|
|
3259
|
-
}, { id: 'swipe-deck', text: css$
|
|
3262
|
+
}, { id: 'swipe-deck', text: css$m });
|
|
3260
3263
|
}
|
|
3261
3264
|
|
|
3262
|
-
var css$
|
|
3265
|
+
var css$l = "usa-weather-card{--usa-wc-sky:linear-gradient(160deg,#38bdf8,#0ea5e9);position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;width:var(--usa-wc-w,260px);max-width:100%;padding:16px 18px;border-radius:20px;background:var(--usa-wc-sky);color:#fff;overflow:hidden;font:500 13px/1.3 system-ui,sans-serif;box-shadow:0 12px 30px -12px rgba(2,6,23,.5);transition:background .6s}usa-weather-card[data-condition=\"cloudy\"]{--usa-wc-sky:linear-gradient(160deg,#94a3b8,#64748b)}usa-weather-card[data-condition=\"rain\"]{--usa-wc-sky:linear-gradient(160deg,#475569,#1e3a8a)}usa-weather-card[data-condition=\"snow\"]{--usa-wc-sky:linear-gradient(160deg,#cbd5e1,#60a5fa);color:#0f172a}usa-weather-card[data-condition=\"storm\"]{--usa-wc-sky:linear-gradient(160deg,#1e293b,#312e81)}usa-weather-card[data-condition=\"fog\"]{--usa-wc-sky:linear-gradient(160deg,#9ca3af,#d1d5db);color:#1f2937}usa-weather-card[data-condition=\"night\"]{--usa-wc-sky:linear-gradient(160deg,#0f172a,#1e1b4b)}.usa-wc-scene{position:relative;width:76px;height:64px}.usa-wc-icon{position:absolute;inset:0}.usa-wc-icon *{position:absolute;display:block}.usa-wc-text{display:flex;flex-direction:column;gap:2px;min-width:0}.usa-wc-temp{font:800 34px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums}.usa-wc-place{opacity:.8;font-size:12px}.usa-wc-sun{left:14px;top:8px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle,#fde047 55%,transparent 56%);animation:usa-wc-spin 14s linear infinite}.usa-wc-sun::before{content:\"\";position:absolute;inset:-8px;border-radius:50%;background:repeating-conic-gradient(#fde047 0 8deg,transparent 8deg 30deg);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%,#000 70%,transparent 72%);mask:radial-gradient(circle,transparent 58%,#000 60%,#000 70%,transparent 72%)}.usa-wc-moon{left:18px;top:6px;width:40px;height:40px;border-radius:50%;box-shadow:-10px 6px 0 2px #f1f5f9;transform:rotate(-20deg)}.usa-wc-star{width:3px;height:3px;border-radius:50%;background:#fff;left:calc(8px + var(--i) * 14px);top:calc(40px + (var(--i) * 7px) % 20px);animation:usa-wc-tw 1.8s calc(var(--i) * .35s) ease-in-out infinite alternate}.usa-wc-cloud{left:8px;top:14px;width:56px;height:22px;border-radius:12px;background:#f1f5f9;animation:usa-wc-drift 4s ease-in-out infinite alternate}.usa-wc-cloud::before{content:\"\";position:absolute;left:12px;top:-12px;width:26px;height:26px;border-radius:50%;background:inherit}.usa-wc-c2{left:22px;top:6px;transform:scale(.7);opacity:.75;animation-delay:-2s}.usa-wc-dark{background:#94a3b8}.usa-wc-drop{left:calc(16px + var(--i) * 8px);top:38px;width:2px;height:9px;border-radius:2px;background:#bfdbfe;animation:usa-wc-fall .9s calc(var(--i) * .17s) linear infinite}.usa-wc-flake{left:calc(14px + var(--i) * 9px);top:38px;width:6px;height:6px;border-radius:50%;background:#fff;animation:usa-wc-snow 2.4s calc(var(--i) * .4s) linear infinite}.usa-wc-bolt{left:30px;top:30px;width:14px;height:26px;background:#fde047;clip-path:polygon(40% 0,100% 0,60% 45%,100% 45%,20% 100%,40% 55%,0 55%);animation:usa-wc-bolt 4s ease-in-out infinite}.usa-wc-fogband{left:4px;top:calc(14px + var(--i) * 14px);width:66px;height:6px;border-radius:6px;background:rgba(255,255,255,.85);animation:usa-wc-drift calc(3s + var(--i) * .8s) ease-in-out infinite alternate}@keyframes usa-wc-spin{to{transform:rotate(360deg)}}@keyframes usa-wc-tw{from{opacity:.2}to{opacity:1}}@keyframes usa-wc-drift{from{translate:-4px 0}to{translate:6px 0}}@keyframes usa-wc-fall{from{translate:0 0;opacity:1}to{translate:-3px 22px;opacity:0}}@keyframes usa-wc-snow{from{translate:0 0;opacity:1}50%{translate:4px 12px}to{translate:-2px 24px;opacity:0}}@keyframes usa-wc-bolt{0%,86%,100%{opacity:.35}90%{opacity:1}}@media (prefers-reduced-motion:reduce){usa-weather-card *{animation:none!important}}";
|
|
3263
3266
|
|
|
3264
3267
|
const WEATHER_CONDITIONS = ['clear', 'cloudy', 'rain', 'snow', 'storm', 'fog', 'night'];
|
|
3265
3268
|
const LABEL = { clear: 'Clear', cloudy: 'Cloudy', rain: 'Rain', snow: 'Snow', storm: 'Thunderstorm', fog: 'Fog', night: 'Clear night' };
|
|
@@ -3340,10 +3343,10 @@ function defineWeatherCard(tag = 'usa-weather-card') {
|
|
|
3340
3343
|
}
|
|
3341
3344
|
}
|
|
3342
3345
|
return UsaWeatherCard;
|
|
3343
|
-
}, { id: 'weather-card', text: css$
|
|
3346
|
+
}, { id: 'weather-card', text: css$l });
|
|
3344
3347
|
}
|
|
3345
3348
|
|
|
3346
|
-
var css$
|
|
3349
|
+
var css$k = "usa-pull-cord{--usa-pc-color:#cbd5e1;--usa-pc-light:#fde68a;position:relative;display:inline-flex;flex-direction:column;align-items:center;width:90px;height:190px;cursor:pointer;touch-action:none;user-select:none;outline-offset:4px;border-radius:12px}.usa-pc-lamp{position:relative;width:76px;height:38px;border-radius:38px 38px 6px 6px;background:linear-gradient(#475569,#334155);box-shadow:0 0 0 rgba(253,230,138,0);transition:box-shadow .35s,background .35s}.usa-pc-lamp::after{content:\"\";position:absolute;left:50%;bottom:-10px;width:22px;height:12px;margin-left:-11px;border-radius:0 0 12px 12px;background:#64748b;transition:background .35s,box-shadow .35s}usa-pull-cord[data-on] .usa-pc-lamp{background:linear-gradient(#f59e0b,#d97706);box-shadow:0 30px 60px 10px rgba(253,230,138,.55)}usa-pull-cord[data-on] .usa-pc-lamp::after{background:var(--usa-pc-light);box-shadow:0 0 22px 8px var(--usa-pc-light)}.usa-pc-svg{width:80px;height:150px;margin-top:-2px;overflow:visible}.usa-pc-cord{fill:none;stroke:var(--usa-pc-color);stroke-width:2.2;stroke-linecap:round}.usa-pc-knob{fill:#e2e8f0;stroke:#94a3b8;stroke-width:1.5}usa-pull-cord[data-on] .usa-pc-knob{fill:var(--usa-pc-light)}@media (prefers-reduced-motion:reduce){.usa-pc-lamp,.usa-pc-lamp::after{transition:none}}";
|
|
3347
3350
|
|
|
3348
3351
|
function definePullCord(tag = 'usa-pull-cord') {
|
|
3349
3352
|
return defineElement(tag, (Base) => {
|
|
@@ -3472,10 +3475,10 @@ function definePullCord(tag = 'usa-pull-cord') {
|
|
|
3472
3475
|
}
|
|
3473
3476
|
}
|
|
3474
3477
|
return UsaPullCord;
|
|
3475
|
-
}, { id: 'pull-cord', text: css$
|
|
3478
|
+
}, { id: 'pull-cord', text: css$k });
|
|
3476
3479
|
}
|
|
3477
3480
|
|
|
3478
|
-
var css$
|
|
3481
|
+
var css$j = "usa-date-picker{--usa-dp-c:#7c5cff;display:inline-block;width:var(--usa-dp-w,280px);max-width:100%;padding:12px;border-radius:16px;background:var(--usa-dp-bg,#fff);color:#111827;box-shadow:0 10px 30px -12px rgba(0,0,0,.3);font:500 13px/1 system-ui,sans-serif;user-select:none}.usa-dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.usa-dp-title{font-weight:700;font-size:14px}.usa-dp-nav{width:30px;height:30px;border:0;border-radius:8px;background:none;color:inherit;font-size:18px;cursor:pointer}.usa-dp-nav:hover{background:rgba(127,127,127,.14)}.usa-dp-viewport{overflow:hidden}.usa-dp-row{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.usa-dp-dow{margin-bottom:4px;font-size:11px;opacity:.55;text-align:center}.usa-dp-day{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;cursor:pointer;font-variant-numeric:tabular-nums;outline:none;transition:background .2s,color .2s}.usa-dp-day:hover{background:rgba(124,92,255,.12)}.usa-dp-day[data-out]{opacity:.35}.usa-dp-day[data-today]{box-shadow:inset 0 0 0 1.5px var(--usa-dp-c)}.usa-dp-day[aria-selected=\"true\"]{background:var(--usa-dp-c);color:#fff}.usa-dp-day[aria-disabled]{opacity:.2;cursor:not-allowed;text-decoration:line-through}.usa-dp-day:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--usa-dp-c)}@media (prefers-reduced-motion:reduce){.usa-dp-day{transition:none}}";
|
|
3479
3482
|
|
|
3480
3483
|
const iso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
|
3481
3484
|
/** Parse `YYYY-MM-DD` as a local date (or null). */
|
|
@@ -3624,10 +3627,10 @@ function defineDatePicker(tag = 'usa-date-picker') {
|
|
|
3624
3627
|
}
|
|
3625
3628
|
}
|
|
3626
3629
|
return UsaDatePicker;
|
|
3627
|
-
}, { id: 'date-picker', text: css$
|
|
3630
|
+
}, { id: 'date-picker', text: css$j });
|
|
3628
3631
|
}
|
|
3629
3632
|
|
|
3630
|
-
var css$
|
|
3633
|
+
var css$i = "usa-color-picker{display:inline-flex;flex-direction:column;gap:10px;width:var(--usa-cp-w,240px);max-width:100%;padding:12px;border-radius:16px;background:var(--usa-cp-bg,#fff);box-shadow:0 10px 30px -12px rgba(0,0,0,.3)}.usa-cp-sv{position:relative;height:140px;border-radius:10px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(var(--usa-cp-h) 100% 50%));cursor:crosshair;touch-action:none;outline-offset:2px}.usa-cp-thumb{position:absolute;left:var(--usa-cp-x);top:var(--usa-cp-y);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--usa-cp-color);box-shadow:0 0 0 3px #fff,0 2px 6px rgba(0,0,0,.4);pointer-events:none;transition:left .18s cubic-bezier(.3,1.4,.5,1),top .18s cubic-bezier(.3,1.4,.5,1),transform .2s}[data-drag]>.usa-cp-thumb{transition:none;transform:scale(1.2)}.usa-cp-row{display:flex;align-items:center;gap:10px}.usa-cp-chip{flex:none;width:30px;height:30px;border-radius:50%;background:var(--usa-cp-color);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}.usa-cp-hue{position:relative;flex:1;height:14px;border-radius:7px;background:linear-gradient(90deg,red,#ff0,lime,cyan,blue,#f0f,red);cursor:pointer;touch-action:none;outline-offset:2px}.usa-cp-hue .usa-cp-thumb{left:var(--usa-cp-hx);top:50%;background:hsl(var(--usa-cp-h) 100% 50%)}.usa-cp-swatches{display:flex;flex-wrap:wrap;gap:6px}.usa-cp-sw{width:22px;height:22px;border:0;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}.usa-cp-sv:focus-visible,.usa-cp-hue:focus-visible,.usa-cp-sw:focus-visible{outline:2px solid #7c5cff}@media (prefers-reduced-motion:reduce){.usa-cp-thumb{transition:none}}";
|
|
3631
3634
|
|
|
3632
3635
|
/** HSV (h 0–360, s / v 0–1) → `#rrggbb`. */
|
|
3633
3636
|
function hsvToHex(h, s, v) {
|
|
@@ -3747,10 +3750,10 @@ function defineColorPicker(tag = 'usa-color-picker') {
|
|
|
3747
3750
|
}
|
|
3748
3751
|
}
|
|
3749
3752
|
return UsaColorPicker;
|
|
3750
|
-
}, { id: 'color-picker', text: css$
|
|
3753
|
+
}, { id: 'color-picker', text: css$i });
|
|
3751
3754
|
}
|
|
3752
3755
|
|
|
3753
|
-
var css$
|
|
3756
|
+
var css$h = "usa-file-drop{--usa-fd-c:#7c5cff;display:flex;flex-direction:column;gap:10px;width:var(--usa-fd-w,300px);max-width:100%;font:500 13px/1.3 system-ui,sans-serif}.usa-fd-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px;padding:16px;border-radius:16px;background:rgba(124,92,255,.06);cursor:pointer;text-align:center;outline-offset:3px;transition:background .25s,transform .25s}.usa-fd-ants{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.usa-fd-ants rect{fill:none;stroke:rgba(124,92,255,.55);stroke-width:2;stroke-dasharray:8 6}usa-file-drop[data-over] .usa-fd-zone{background:rgba(124,92,255,.14);transform:scale(1.02)}usa-file-drop[data-over] .usa-fd-ants rect{stroke:var(--usa-fd-c);animation:usa-fd-march .6s linear infinite}.usa-fd-icon{font-size:30px;color:var(--usa-fd-c);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}usa-file-drop[data-over] .usa-fd-icon{transform:translateY(-8px) scale(1.15)}.usa-fd-zone:focus-visible{outline:2px solid var(--usa-fd-c)}.usa-fd-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}.usa-fd-item{--usa-fd-p:0;position:relative;display:grid;grid-template-columns:1fr auto 18px;align-items:center;gap:4px 8px;padding:8px 10px;border-radius:10px;background:rgba(127,127,127,.1)}.usa-fd-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.usa-fd-size{opacity:.6;font-size:12px}.usa-fd-bar{grid-column:1/3;height:4px;border-radius:4px;background:rgba(127,127,127,.25);overflow:hidden}.usa-fd-fill{display:block;height:100%;background:var(--usa-fd-c);transform-origin:0 50%;transform:scaleX(var(--usa-fd-p));transition:transform .2s}.usa-fd-check{grid-row:1/3;grid-column:3;width:18px;height:18px;fill:none;stroke:#22c55e;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .4s}.usa-fd-item[data-done] .usa-fd-check{stroke-dashoffset:0}@keyframes usa-fd-march{to{stroke-dashoffset:-14}}@media (prefers-reduced-motion:reduce){usa-file-drop *{animation:none!important;transition:none!important}usa-file-drop[data-over] .usa-fd-zone,usa-file-drop[data-over] .usa-fd-icon{transform:none}}";
|
|
3754
3757
|
|
|
3755
3758
|
const size = (n) => (n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(1)} KB` : `${(n / 1048576).toFixed(1)} MB`);
|
|
3756
3759
|
function defineFileDrop(tag = 'usa-file-drop') {
|
|
@@ -3851,10 +3854,10 @@ function defineFileDrop(tag = 'usa-file-drop') {
|
|
|
3851
3854
|
}
|
|
3852
3855
|
}
|
|
3853
3856
|
return UsaFileDrop;
|
|
3854
|
-
}, { id: 'file-drop', text: css$
|
|
3857
|
+
}, { id: 'file-drop', text: css$h });
|
|
3855
3858
|
}
|
|
3856
3859
|
|
|
3857
|
-
var css$
|
|
3860
|
+
var css$g = "usa-keyframe-editor{--usa-ke-c:#7c5cff;--usa-ke-head:100%;display:flex;flex-direction:column;gap:8px;width:var(--usa-ke-w,100%);max-width:100%;padding:10px;border-radius:14px;background:var(--usa-ke-bg,#0f172a);color:#e2e8f0;font:500 12px/1.2 system-ui,sans-serif}.usa-ke-bar{display:flex;align-items:center;gap:8px}.usa-ke-play{width:30px;height:30px;border:0;border-radius:50%;background:var(--usa-ke-c);color:#fff;cursor:pointer}.usa-ke-scrub{flex:1;min-width:0;accent-color:var(--usa-ke-c)}.usa-ke-time{min-width:58px;text-align:right;font-variant-numeric:tabular-nums;opacity:.8}.usa-ke-tracks{position:relative;display:flex;flex-direction:column;gap:4px}.usa-ke-tracks::after{content:\"\";position:absolute;top:0;bottom:0;left:calc(64px + (100% - 64px) * var(--usa-ke-head) / 100%);width:2px;background:#f43f5e;pointer-events:none}.usa-ke-row{display:grid;grid-template-columns:64px 1fr;align-items:center}.usa-ke-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:6px;opacity:.85}.usa-ke-lane{position:relative;height:22px;border-radius:6px;background:rgba(148,163,184,.14)}.usa-ke-clip{position:absolute;top:2px;bottom:2px;border-radius:5px;background:linear-gradient(90deg,var(--usa-ke-c),#22d3ee);cursor:grab;touch-action:none;outline-offset:2px;transition:left .2s,width .2s}.usa-ke-clip[data-drag]{cursor:grabbing;transition:none;box-shadow:0 4px 12px rgba(0,0,0,.4)}.usa-ke-clip:focus-visible{outline:2px solid #fff}.usa-ke-grip{position:absolute;right:0;top:0;bottom:0;width:8px;border-radius:0 5px 5px 0;background:rgba(255,255,255,.35);cursor:ew-resize}@media (prefers-reduced-motion:reduce){.usa-ke-clip{transition:none}}";
|
|
3858
3861
|
|
|
3859
3862
|
const DEFAULT = {
|
|
3860
3863
|
format: ANIMATION_FORMAT,
|
|
@@ -4028,10 +4031,10 @@ function defineKeyframeEditor(tag = 'usa-keyframe-editor') {
|
|
|
4028
4031
|
}
|
|
4029
4032
|
}
|
|
4030
4033
|
return UsaKeyframeEditor;
|
|
4031
|
-
}, { id: 'keyframe-editor', text: css$
|
|
4034
|
+
}, { id: 'keyframe-editor', text: css$g });
|
|
4032
4035
|
}
|
|
4033
4036
|
|
|
4034
|
-
var css$
|
|
4037
|
+
var css$f = "usa-music-player{--usa-mp-c:#7c5cff;--usa-mp-p:0;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;width:var(--usa-mp-w,320px);max-width:100%;padding:14px;border-radius:20px;background:var(--usa-mp-bg,linear-gradient(160deg,#111827,#1e1b4b));color:#f8fafc;font:500 13px/1.3 system-ui,sans-serif;box-shadow:0 14px 34px -14px rgba(0,0,0,.55)}.usa-mp-cover{width:84px;height:84px}.usa-mp-disc{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,#0f172a 9%,#e2e8f0 9.5%,#e2e8f0 12%,transparent 12.5%),repeating-radial-gradient(circle,#111 0 2px,#1f2937 2px 4px),#111;background-size:cover;box-shadow:0 6px 18px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.06)}usa-music-player[data-animate] .usa-mp-disc{animation:usa-mp-spin 1.8s linear infinite}.usa-mp-body{display:flex;flex-direction:column;gap:6px;min-width:0}.usa-mp-meta{display:flex;flex-direction:column;min-width:0}.usa-mp-title{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.usa-mp-artist{opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.usa-mp-bars{display:flex;gap:3px;align-items:flex-end;height:14px}.usa-mp-bars i{width:3px;height:30%;border-radius:2px;background:var(--usa-mp-c);transition:height .3s}usa-music-player[data-animate] .usa-mp-bars i{animation:usa-mp-bar .9s ease-in-out infinite alternate}.usa-mp-bars i:nth-child(2){animation-delay:-.3s!important}.usa-mp-bars i:nth-child(3){animation-delay:-.6s!important}.usa-mp-bars i:nth-child(4){animation-delay:-.15s!important}.usa-mp-track{position:relative;height:6px;border-radius:6px;background:rgba(255,255,255,.18);cursor:pointer;touch-action:none;outline-offset:4px}.usa-mp-fill{position:absolute;inset:0;border-radius:inherit;background:var(--usa-mp-c);transform-origin:0 50%;transform:scaleX(var(--usa-mp-p))}.usa-mp-knob{position:absolute;top:50%;left:calc(var(--usa-mp-p) * 100%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);transition:transform .2s}.usa-mp-track:hover .usa-mp-knob,.usa-mp-track:focus-visible .usa-mp-knob{transform:scale(1.3)}.usa-mp-times{display:flex;justify-content:space-between;font-size:11px;opacity:.65;font-variant-numeric:tabular-nums}.usa-mp-ctrls{display:flex;align-items:center;justify-content:center;gap:12px}.usa-mp-btn{border:0;background:none;color:inherit;font-size:16px;cursor:pointer;opacity:.85}.usa-mp-play{position:relative;width:40px;height:40px;border:0;border-radius:50%;background:#fff;cursor:pointer}.usa-mp-icon{position:absolute;left:50%;top:50%;width:14px;height:16px;margin:-8px 0 0 -6px;background:var(--usa-mp-c);clip-path:polygon(0 0,100% 50%,100% 50%,0 100%);transition:clip-path .3s cubic-bezier(.6,.05,.3,1)}usa-music-player[data-playing] .usa-mp-icon{margin-left:-7px;clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}.usa-mp-btn:focus-visible,.usa-mp-play:focus-visible,.usa-mp-track:focus-visible{outline:2px solid #fff}@keyframes usa-mp-spin{to{transform:rotate(360deg)}}@keyframes usa-mp-bar{from{height:20%}to{height:100%}}@media (prefers-reduced-motion:reduce){usa-music-player *{animation:none!important;transition:none!important}}";
|
|
4035
4038
|
|
|
4036
4039
|
const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`;
|
|
4037
4040
|
function defineMusicPlayer(tag = 'usa-music-player') {
|
|
@@ -4192,10 +4195,10 @@ function defineMusicPlayer(tag = 'usa-music-player') {
|
|
|
4192
4195
|
}
|
|
4193
4196
|
}
|
|
4194
4197
|
return UsaMusicPlayer;
|
|
4195
|
-
}, { id: 'music-player', text: css$
|
|
4198
|
+
}, { id: 'music-player', text: css$f });
|
|
4196
4199
|
}
|
|
4197
4200
|
|
|
4198
|
-
var css$
|
|
4201
|
+
var css$e = "usa-volume-knob{--usa-vk-c:#22d3ee;--usa-vk-size:120px;position:relative;display:inline-grid;place-items:center;width:var(--usa-vk-size);height:var(--usa-vk-size);border-radius:50%;cursor:ns-resize;touch-action:none;user-select:none;outline-offset:6px}.usa-vk-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.usa-vk-arc path{fill:none;stroke-width:6;stroke-linecap:round}.usa-vk-bg{stroke:rgba(127,127,127,.25)}.usa-vk-val{stroke:var(--usa-vk-c);filter:drop-shadow(0 0 4px var(--usa-vk-c))}.usa-vk-ticks{position:absolute;inset:0}.usa-vk-ticks i{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:rgba(127,127,127,.4);transform:rotate(var(--a)) translateY(calc(var(--usa-vk-size) * -.5 + 2px));transition:background .2s,box-shadow .2s}.usa-vk-ticks i[data-on]{background:var(--usa-vk-c);box-shadow:0 0 6px var(--usa-vk-c)}.usa-vk-cap{position:relative;width:62%;height:62%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4b5563,#111827 70%);box-shadow:0 8px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.15);transform:rotate(var(--usa-vk-angle));transition:transform .35s cubic-bezier(.3,1.5,.5,1)}usa-volume-knob[data-drag] .usa-vk-cap{transition:none}.usa-vk-dot{position:absolute;left:50%;top:10%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--usa-vk-c);box-shadow:0 0 6px var(--usa-vk-c)}usa-volume-knob:focus-visible{outline:2px solid var(--usa-vk-c)}@media (prefers-reduced-motion:reduce){.usa-vk-cap,.usa-vk-ticks i{transition:none}}";
|
|
4199
4202
|
|
|
4200
4203
|
const ARC = 270;
|
|
4201
4204
|
function defineVolumeKnob(tag = 'usa-volume-knob') {
|
|
@@ -4286,10 +4289,10 @@ function defineVolumeKnob(tag = 'usa-volume-knob') {
|
|
|
4286
4289
|
}
|
|
4287
4290
|
}
|
|
4288
4291
|
return UsaVolumeKnob;
|
|
4289
|
-
}, { id: 'volume-knob', text: css$
|
|
4292
|
+
}, { id: 'volume-knob', text: css$e });
|
|
4290
4293
|
}
|
|
4291
4294
|
|
|
4292
|
-
var css$
|
|
4295
|
+
var css$d = "usa-equalizer{--usa-eq-c:#7c5cff;position:relative;display:block;width:var(--usa-eq-w,320px);max-width:100%;padding:12px 10px 8px;border-radius:16px;background:var(--usa-eq-bg,#0f172a);color:#cbd5e1;font:600 10px/1 system-ui,sans-serif}.usa-eq-curve{position:absolute;left:10px;right:10px;top:12px;height:120px;width:calc(100% - 20px);pointer-events:none;overflow:visible}.usa-eq-curve path{fill:none;stroke:#22d3ee;stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:.8;transition:d .45s cubic-bezier(.3,1.3,.5,1)}.usa-eq-bands{display:flex;justify-content:space-between;gap:4px}.usa-eq-band{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0}.usa-eq-slot{--usa-eq-k:.5;position:relative;width:8px;height:120px;border-radius:6px;background:rgba(148,163,184,.18);cursor:ns-resize;touch-action:none;outline-offset:4px}.usa-eq-fill{position:absolute;left:0;right:0;top:calc((1 - max(var(--usa-eq-k),.5)) * 100%);bottom:calc(min(var(--usa-eq-k),.5) * 100%);border-radius:6px;background:var(--usa-eq-c)}.usa-eq-cap{position:absolute;left:50%;top:calc((1 - var(--usa-eq-k)) * 100%);width:20px;height:10px;margin:-5px 0 0 -10px;border-radius:4px;background:#f8fafc;box-shadow:0 2px 6px rgba(0,0,0,.5)}usa-equalizer[data-glide] .usa-eq-cap{transition:top .5s cubic-bezier(.3,1.4,.5,1)}usa-equalizer[data-glide] .usa-eq-fill{transition:top .5s cubic-bezier(.3,1.4,.5,1),bottom .5s cubic-bezier(.3,1.4,.5,1)}.usa-eq-slot[data-drag] .usa-eq-cap{transform:scale(1.15)}.usa-eq-slot:focus-visible{outline:2px solid #22d3ee}.usa-eq-label{opacity:.7;white-space:nowrap}@media (prefers-reduced-motion:reduce){.usa-eq-cap,.usa-eq-fill,.usa-eq-curve path{transition:none!important}}";
|
|
4293
4296
|
|
|
4294
4297
|
const EQ_PRESETS = {
|
|
4295
4298
|
flat: [0, 0, 0, 0, 0, 0, 0],
|
|
@@ -4387,10 +4390,10 @@ function defineEqualizer(tag = 'usa-equalizer') {
|
|
|
4387
4390
|
}
|
|
4388
4391
|
}
|
|
4389
4392
|
return UsaEqualizer;
|
|
4390
|
-
}, { id: 'equalizer', text: css$
|
|
4393
|
+
}, { id: 'equalizer', text: css$d });
|
|
4391
4394
|
}
|
|
4392
4395
|
|
|
4393
|
-
var css$
|
|
4396
|
+
var css$c = "usa-lyrics{--usa-ly-c:#f472b6;display:block;width:var(--usa-ly-w,320px);max-width:100%;font:700 18px/1.35 system-ui,sans-serif}.usa-ly-list{height:var(--usa-ly-h,180px);margin:0;padding:70px 0;overflow-y:auto;list-style:none;scrollbar-width:none;-webkit-mask:linear-gradient(transparent,#000 25%,#000 75%,transparent);mask:linear-gradient(transparent,#000 25%,#000 75%,transparent)}.usa-ly-list::-webkit-scrollbar{display:none}.usa-ly-line{--usa-ly-k:0;padding:5px 4px;opacity:.38;cursor:pointer;transform-origin:0 50%;transition:opacity .35s,transform .35s cubic-bezier(.3,1.3,.5,1),filter .35s;filter:blur(.4px)}.usa-ly-line[data-past]{opacity:.22}.usa-ly-line[data-active]{opacity:1;filter:none;transform:scale(1.06);color:transparent;background:linear-gradient(90deg,var(--usa-ly-c) calc(var(--usa-ly-k) * 100%),var(--usa-ly-base,#94a3b8) calc(var(--usa-ly-k) * 100%));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 18px rgba(244,114,182,.25)}@media (prefers-reduced-motion:reduce){.usa-ly-line{transition:none;transform:none!important}}";
|
|
4394
4397
|
|
|
4395
4398
|
/** Parse LRC text into sorted `{ t, text }` lines. */
|
|
4396
4399
|
function parseLRC(src) {
|
|
@@ -4502,10 +4505,10 @@ function defineLyrics(tag = 'usa-lyrics') {
|
|
|
4502
4505
|
}
|
|
4503
4506
|
}
|
|
4504
4507
|
return UsaLyrics;
|
|
4505
|
-
}, { id: 'lyrics', text: css$
|
|
4508
|
+
}, { id: 'lyrics', text: css$c });
|
|
4506
4509
|
}
|
|
4507
4510
|
|
|
4508
|
-
var css$
|
|
4511
|
+
var css$b = "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}}";
|
|
4509
4512
|
|
|
4510
4513
|
function defineBarChart(tag = 'usa-bar-chart') {
|
|
4511
4514
|
return defineElement(tag, (Base) => {
|
|
@@ -4599,10 +4602,10 @@ function defineBarChart(tag = 'usa-bar-chart') {
|
|
|
4599
4602
|
}
|
|
4600
4603
|
}
|
|
4601
4604
|
return UsaBarChart;
|
|
4602
|
-
}, { id: 'bar-chart', text: css$
|
|
4605
|
+
}, { id: 'bar-chart', text: css$b });
|
|
4603
4606
|
}
|
|
4604
4607
|
|
|
4605
|
-
var css$
|
|
4608
|
+
var css$a = "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)}";
|
|
4606
4609
|
|
|
4607
4610
|
function defineGauge(tag = 'usa-gauge') {
|
|
4608
4611
|
return defineElement(tag, (Base) => {
|
|
@@ -4687,10 +4690,10 @@ function defineGauge(tag = 'usa-gauge') {
|
|
|
4687
4690
|
}
|
|
4688
4691
|
}
|
|
4689
4692
|
return UsaGauge;
|
|
4690
|
-
}, { id: 'gauge', text: css$
|
|
4693
|
+
}, { id: 'gauge', text: css$a });
|
|
4691
4694
|
}
|
|
4692
4695
|
|
|
4693
|
-
var css$
|
|
4696
|
+
var css$9 = "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}}";
|
|
4694
4697
|
|
|
4695
4698
|
const SPARK_VARIANTS = ['line', 'area', 'bars'];
|
|
4696
4699
|
/** Map values to SVG points in a w×h box (with padding). */
|
|
@@ -4813,7 +4816,7 @@ function defineSparkline(tag = 'usa-sparkline') {
|
|
|
4813
4816
|
}
|
|
4814
4817
|
}
|
|
4815
4818
|
return UsaSparkline;
|
|
4816
|
-
}, { id: 'sparkline', text: css$
|
|
4819
|
+
}, { id: 'sparkline', text: css$9 });
|
|
4817
4820
|
}
|
|
4818
4821
|
|
|
4819
4822
|
/** Parse a figure like "$12.4k" / "−3.5%" / "1,204" → number + prefix / suffix / decimals (7.2). */
|
|
@@ -4826,7 +4829,7 @@ function parseFigureText(s) {
|
|
|
4826
4829
|
return Number.isFinite(n) ? { n, pre: m[1], post: m[3], dec: (raw.split('.')[1] || '').length } : null;
|
|
4827
4830
|
}
|
|
4828
4831
|
|
|
4829
|
-
var css = "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}";
|
|
4832
|
+
var css$8 = "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}";
|
|
4830
4833
|
|
|
4831
4834
|
function defineKpi(tag = 'usa-kpi') {
|
|
4832
4835
|
return defineElement(tag, (Base) => {
|
|
@@ -4906,7 +4909,797 @@ function defineKpi(tag = 'usa-kpi') {
|
|
|
4906
4909
|
}
|
|
4907
4910
|
}
|
|
4908
4911
|
return UsaKpi;
|
|
4909
|
-
}, { id: 'kpi', text: css });
|
|
4912
|
+
}, { id: 'kpi', text: css$8 });
|
|
4913
|
+
}
|
|
4914
|
+
|
|
4915
|
+
var css$7 = "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
|
+
|
|
4917
|
+
function defineAddToCart(tag = 'usa-add-to-cart') {
|
|
4918
|
+
return defineElement(tag, (Base) => {
|
|
4919
|
+
class UsaAddToCart extends Base {
|
|
4920
|
+
constructor() {
|
|
4921
|
+
super(...arguments);
|
|
4922
|
+
this._t = 0;
|
|
4923
|
+
}
|
|
4924
|
+
mount() {
|
|
4925
|
+
registerShopPack();
|
|
4926
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
4927
|
+
const label = this.textContent?.trim() || this.str('label', 'Add to cart');
|
|
4928
|
+
this.textContent = '';
|
|
4929
|
+
this.insertAdjacentHTML('afterbegin', '<button type="button" class="usa-atc-btn" data-usa-part><span class="usa-atc-label"></span><span class="usa-atc-done" aria-hidden="true">✓ <span></span></span></button><span class="usa-atc-live" data-usa-part aria-live="polite"></span>');
|
|
4930
|
+
this.querySelector('.usa-atc-label').textContent = label;
|
|
4931
|
+
this.querySelector('.usa-atc-done span').textContent = this.str('added', 'Added');
|
|
4932
|
+
this.listen(this.querySelector('.usa-atc-btn'), 'click', () => this.add());
|
|
4933
|
+
this.onCleanup(() => this._t && clearTimeout(this._t));
|
|
4934
|
+
}
|
|
4935
|
+
add() {
|
|
4936
|
+
let item = {};
|
|
4937
|
+
try {
|
|
4938
|
+
item = JSON.parse(this.str('item', '{}'));
|
|
4939
|
+
}
|
|
4940
|
+
catch {
|
|
4941
|
+
item = { name: this.str('item', '') };
|
|
4942
|
+
}
|
|
4943
|
+
const cartSel = this.str('cart', '[data-cart]');
|
|
4944
|
+
const cart = document.querySelector(cartSel);
|
|
4945
|
+
const from = (this.str('from', '') && document.querySelector(this.str('from', ''))) || this.closest('[data-product]')?.querySelector('img') || this;
|
|
4946
|
+
if (getEffect('fly-to-cart'))
|
|
4947
|
+
void playEffect(from, 'fly-to-cart', { to: cart?.matches('usa-cart-drawer') ? `${cartSel} .usa-cd2-toggle` : cartSel });
|
|
4948
|
+
cart?.add?.(item);
|
|
4949
|
+
this.setAttribute('data-added', '');
|
|
4950
|
+
this.querySelector('.usa-atc-live').textContent = `${this.str('added', 'Added')} to cart`;
|
|
4951
|
+
if (!this.reduced)
|
|
4952
|
+
this.motion(this.querySelector('.usa-atc-btn'), [{ transform: 'scale(1)' }, { transform: 'scale(.92)', offset: 0.3 }, { transform: 'scale(1)' }], { duration: 380, easing: 'ease-out' });
|
|
4953
|
+
if (this._t)
|
|
4954
|
+
clearTimeout(this._t);
|
|
4955
|
+
this._t = setTimeout(() => this.removeAttribute('data-added'), this.num('hold', 1600));
|
|
4956
|
+
this.emit('add', { item });
|
|
4957
|
+
}
|
|
4958
|
+
}
|
|
4959
|
+
return UsaAddToCart;
|
|
4960
|
+
}, { id: 'add-to-cart', text: css$7 });
|
|
4961
|
+
}
|
|
4962
|
+
|
|
4963
|
+
var css$6 = "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
|
+
|
|
4965
|
+
/** Cart total (7.3). */
|
|
4966
|
+
const cartTotal = (items) => Math.round(items.reduce((a, i) => a + (Number(i.price) || 0) * (i.qty || 1), 0) * 100) / 100;
|
|
4967
|
+
function defineCartDrawer(tag = 'usa-cart-drawer') {
|
|
4968
|
+
return defineElement(tag, (Base) => {
|
|
4969
|
+
class UsaCartDrawer extends Base {
|
|
4970
|
+
constructor() {
|
|
4971
|
+
super(...arguments);
|
|
4972
|
+
this._items = [];
|
|
4973
|
+
this._open = false;
|
|
4974
|
+
this._ret = null;
|
|
4975
|
+
}
|
|
4976
|
+
get items() {
|
|
4977
|
+
return this._items.map((i) => ({ ...i }));
|
|
4978
|
+
}
|
|
4979
|
+
set items(v) {
|
|
4980
|
+
this._items = (v || []).map((i) => ({ ...i, id: i.id || i.name, qty: i.qty || 1 }));
|
|
4981
|
+
if (this.isConnected)
|
|
4982
|
+
this.render(null);
|
|
4983
|
+
}
|
|
4984
|
+
get total() {
|
|
4985
|
+
return cartTotal(this._items);
|
|
4986
|
+
}
|
|
4987
|
+
get count() {
|
|
4988
|
+
return this._items.reduce((a, i) => a + (i.qty || 1), 0);
|
|
4989
|
+
}
|
|
4990
|
+
get open() {
|
|
4991
|
+
return this._open;
|
|
4992
|
+
}
|
|
4993
|
+
set open(v) {
|
|
4994
|
+
this.toggle(!!v);
|
|
4995
|
+
}
|
|
4996
|
+
mount() {
|
|
4997
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
4998
|
+
const label = this.str('label', 'Cart');
|
|
4999
|
+
this.insertAdjacentHTML('afterbegin', `<button type="button" class="usa-cd2-toggle" data-usa-part aria-haspopup="dialog" aria-expanded="false"><span aria-hidden="true">🛒</span><b class="usa-cd2-badge" aria-live="polite"></b></button><div class="usa-cd2-backdrop" data-usa-part hidden></div><div class="usa-cd2-panel" data-usa-part role="dialog" aria-modal="true" hidden tabindex="-1"><header><strong></strong><button type="button" class="usa-cd2-close" aria-label="Close">×</button></header><ul class="usa-cd2-list"></ul><p class="usa-cd2-empty">Your cart is empty</p><footer><span>Total</span><b class="usa-cd2-total"></b></footer></div>`);
|
|
5000
|
+
this.querySelector('.usa-cd2-panel strong').textContent = label;
|
|
5001
|
+
this.querySelector('.usa-cd2-panel').setAttribute('aria-label', label);
|
|
5002
|
+
this.listen(this.querySelector('.usa-cd2-toggle'), 'click', () => this.toggle());
|
|
5003
|
+
this.listen(this.querySelector('.usa-cd2-close'), 'click', () => this.toggle(false));
|
|
5004
|
+
this.listen(this.querySelector('.usa-cd2-backdrop'), 'click', () => this.toggle(false));
|
|
5005
|
+
this.listen(this, 'keydown', (e) => e.key === 'Escape' && this._open && this.toggle(false));
|
|
5006
|
+
this.listen(this.querySelector('.usa-cd2-list'), 'click', (e) => {
|
|
5007
|
+
const b = e.target.closest('[data-rm]');
|
|
5008
|
+
if (b)
|
|
5009
|
+
this.removeItem(b.dataset.rm);
|
|
5010
|
+
});
|
|
5011
|
+
if (!this._items.length) {
|
|
5012
|
+
try {
|
|
5013
|
+
const init = JSON.parse(this.str('items', '[]'));
|
|
5014
|
+
if (Array.isArray(init))
|
|
5015
|
+
this._items = init.map((i) => ({ ...i, id: i.id || i.name, qty: i.qty || 1 }));
|
|
5016
|
+
}
|
|
5017
|
+
catch {
|
|
5018
|
+
/* ignore bad JSON */
|
|
5019
|
+
}
|
|
5020
|
+
}
|
|
5021
|
+
this.render(null);
|
|
5022
|
+
}
|
|
5023
|
+
toggle(force) {
|
|
5024
|
+
const on = force ?? !this._open;
|
|
5025
|
+
if (on === this._open)
|
|
5026
|
+
return;
|
|
5027
|
+
this._open = on;
|
|
5028
|
+
const panel = this.querySelector('.usa-cd2-panel');
|
|
5029
|
+
const bd = this.querySelector('.usa-cd2-backdrop');
|
|
5030
|
+
this.querySelector('.usa-cd2-toggle').setAttribute('aria-expanded', String(on));
|
|
5031
|
+
this.toggleAttribute('data-open', on);
|
|
5032
|
+
if (on) {
|
|
5033
|
+
this._ret = document.activeElement || null;
|
|
5034
|
+
panel.hidden = bd.hidden = false;
|
|
5035
|
+
if (!this.reduced) {
|
|
5036
|
+
this.motion(panel, [{ transform: 'translateX(105%)' }, { transform: 'none' }], { duration: 380, easing: 'cubic-bezier(.2,.9,.3,1)' });
|
|
5037
|
+
this.motion(bd, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 });
|
|
5038
|
+
}
|
|
5039
|
+
panel.focus();
|
|
5040
|
+
this.emit('open', {});
|
|
5041
|
+
}
|
|
5042
|
+
else {
|
|
5043
|
+
const done = () => {
|
|
5044
|
+
if (!this._open)
|
|
5045
|
+
panel.hidden = bd.hidden = true;
|
|
5046
|
+
};
|
|
5047
|
+
const a = this.reduced ? null : this.motion(panel, [{ transform: 'none' }, { transform: 'translateX(105%)' }], { duration: 260, easing: 'ease-in' });
|
|
5048
|
+
if (a)
|
|
5049
|
+
a.finished.then(done, done);
|
|
5050
|
+
else
|
|
5051
|
+
done();
|
|
5052
|
+
this._ret?.focus?.();
|
|
5053
|
+
this.emit('close', {});
|
|
5054
|
+
}
|
|
5055
|
+
}
|
|
5056
|
+
add(item) {
|
|
5057
|
+
const id = item.id || item.name;
|
|
5058
|
+
const hit = this._items.find((i) => i.id === id);
|
|
5059
|
+
if (hit)
|
|
5060
|
+
hit.qty = (hit.qty || 1) + (item.qty || 1);
|
|
5061
|
+
else
|
|
5062
|
+
this._items.push({ ...item, id, qty: item.qty || 1 });
|
|
5063
|
+
this.render(id);
|
|
5064
|
+
}
|
|
5065
|
+
removeItem(id) {
|
|
5066
|
+
const li = Array.from(this.querySelectorAll('.usa-cd2-item')).find((n) => n.dataset.id === id) || null;
|
|
5067
|
+
this._items = this._items.filter((i) => i.id !== id);
|
|
5068
|
+
const a = li && !this.reduced ? this.motion(li, [{ opacity: 1, maxHeight: `${li.offsetHeight}px` }, { opacity: 0, maxHeight: '0px', paddingTop: '0', paddingBottom: '0' }], { duration: 260, fill: 'forwards' }) : null;
|
|
5069
|
+
if (a)
|
|
5070
|
+
a.finished.then(() => this.render(null), () => this.render(null));
|
|
5071
|
+
else
|
|
5072
|
+
this.render(null);
|
|
5073
|
+
}
|
|
5074
|
+
render(changed) {
|
|
5075
|
+
const cur = this.str('currency', '$');
|
|
5076
|
+
const list = this.querySelector('.usa-cd2-list');
|
|
5077
|
+
const old = new Map(Array.from(list.children).map((li) => [li.dataset.id, li]));
|
|
5078
|
+
for (const it of this._items) {
|
|
5079
|
+
let li = old.get(it.id);
|
|
5080
|
+
old.delete(it.id);
|
|
5081
|
+
const isNew = !li;
|
|
5082
|
+
if (!li) {
|
|
5083
|
+
li = document.createElement('li');
|
|
5084
|
+
li.className = 'usa-cd2-item';
|
|
5085
|
+
li.dataset.id = it.id;
|
|
5086
|
+
li.innerHTML = `${it.img ? '<img alt="">' : '<i aria-hidden="true"></i>'}<span class="usa-cd2-name"></span><span class="usa-cd2-qty"></span><span class="usa-cd2-price"></span><button type="button" class="usa-cd2-rm">×</button>`;
|
|
5087
|
+
if (it.img)
|
|
5088
|
+
li.querySelector('img').setAttribute('src', it.img);
|
|
5089
|
+
}
|
|
5090
|
+
li.querySelector('.usa-cd2-name').textContent = it.name;
|
|
5091
|
+
li.querySelector('.usa-cd2-qty').textContent = `×${it.qty || 1}`;
|
|
5092
|
+
li.querySelector('.usa-cd2-price').textContent = `${cur}${((it.price || 0) * (it.qty || 1)).toFixed(2)}`;
|
|
5093
|
+
const rm = li.querySelector('.usa-cd2-rm');
|
|
5094
|
+
rm.dataset.rm = it.id;
|
|
5095
|
+
rm.setAttribute('aria-label', `Remove ${it.name}`);
|
|
5096
|
+
list.appendChild(li);
|
|
5097
|
+
if (changed === it.id && !this.reduced)
|
|
5098
|
+
this.motion(li, isNew ? [{ transform: 'translateX(40px)', opacity: 0 }, { transform: 'none', opacity: 1 }] : [{ background: 'rgba(124,92,255,.18)' }, { background: 'transparent' }], { duration: 420, easing: 'cubic-bezier(.2,.9,.3,1.2)' });
|
|
5099
|
+
}
|
|
5100
|
+
old.forEach((li) => li.remove());
|
|
5101
|
+
const n = this.count;
|
|
5102
|
+
const badge = this.querySelector('.usa-cd2-badge');
|
|
5103
|
+
badge.textContent = n ? String(n) : '';
|
|
5104
|
+
this.querySelector('.usa-cd2-toggle').setAttribute('aria-label', `${this.str('label', 'Cart')}, ${n} item${n === 1 ? '' : 's'}`);
|
|
5105
|
+
if (changed && !this.reduced)
|
|
5106
|
+
this.motion(badge, [{ transform: 'scale(1)' }, { transform: 'scale(1.5)', offset: 0.4 }, { transform: 'scale(1)' }], { duration: 420, easing: 'ease-out' });
|
|
5107
|
+
this.querySelector('.usa-cd2-empty').hidden = !!this._items.length;
|
|
5108
|
+
const tot = this.querySelector('.usa-cd2-total');
|
|
5109
|
+
const to = this.total;
|
|
5110
|
+
const from = Number(tot.dataset.v || 0);
|
|
5111
|
+
tot.dataset.v = String(to);
|
|
5112
|
+
if (this.reduced || from === to || typeof requestAnimationFrame !== 'function')
|
|
5113
|
+
tot.textContent = `${cur}${to.toFixed(2)}`;
|
|
5114
|
+
else {
|
|
5115
|
+
const t0 = performance.now();
|
|
5116
|
+
const f = (now) => {
|
|
5117
|
+
const k = Math.min(1, (now - t0) / 500);
|
|
5118
|
+
tot.textContent = `${cur}${(from + (to - from) * (1 - Math.pow(1 - k, 3))).toFixed(2)}`;
|
|
5119
|
+
if (k < 1)
|
|
5120
|
+
requestAnimationFrame(f);
|
|
5121
|
+
};
|
|
5122
|
+
requestAnimationFrame(f);
|
|
5123
|
+
}
|
|
5124
|
+
this.emit('change', { items: this.items, total: to });
|
|
5125
|
+
}
|
|
5126
|
+
}
|
|
5127
|
+
return UsaCartDrawer;
|
|
5128
|
+
}, { id: 'cart-drawer', text: css$6 });
|
|
5129
|
+
}
|
|
5130
|
+
|
|
5131
|
+
var css$5 = "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
|
+
|
|
5133
|
+
/** Wrap an index into 0..n-1 (7.3). */
|
|
5134
|
+
const wrapIndex = (i, n) => (n ? ((i % n) + n) % n : 0);
|
|
5135
|
+
function defineProductGallery(tag = 'usa-product-gallery') {
|
|
5136
|
+
return defineElement(tag, (Base) => {
|
|
5137
|
+
class UsaProductGallery extends Base {
|
|
5138
|
+
constructor() {
|
|
5139
|
+
super(...arguments);
|
|
5140
|
+
this._i = 0;
|
|
5141
|
+
this._imgs = [];
|
|
5142
|
+
}
|
|
5143
|
+
static get observedAttributes() {
|
|
5144
|
+
return ['index'];
|
|
5145
|
+
}
|
|
5146
|
+
get count() {
|
|
5147
|
+
return this._imgs.length;
|
|
5148
|
+
}
|
|
5149
|
+
get index() {
|
|
5150
|
+
return this._i;
|
|
5151
|
+
}
|
|
5152
|
+
set index(v) {
|
|
5153
|
+
this.go(v);
|
|
5154
|
+
}
|
|
5155
|
+
mount() {
|
|
5156
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
5157
|
+
this._imgs = Array.from(this.querySelectorAll(':scope > img'));
|
|
5158
|
+
this._imgs.forEach((im) => (im.hidden = true));
|
|
5159
|
+
this.insertAdjacentHTML('beforeend', '<div class="usa-pg2-stage" data-usa-part role="group" tabindex="0"><img class="usa-pg2-main" alt=""></div><div class="usa-pg2-thumbs" data-usa-part role="tablist" aria-label="Product images"></div>');
|
|
5160
|
+
const thumbs = this.querySelector('.usa-pg2-thumbs');
|
|
5161
|
+
this._imgs.forEach((im, i) => {
|
|
5162
|
+
const b = document.createElement('button');
|
|
5163
|
+
b.type = 'button';
|
|
5164
|
+
b.className = 'usa-pg2-thumb';
|
|
5165
|
+
b.setAttribute('role', 'tab');
|
|
5166
|
+
b.setAttribute('aria-label', im.alt || `Image ${i + 1}`);
|
|
5167
|
+
b.innerHTML = `<img alt="" src="${im.getAttribute('src') || ''}">`;
|
|
5168
|
+
this.listen(b, 'click', () => this.go(i));
|
|
5169
|
+
thumbs.appendChild(b);
|
|
5170
|
+
});
|
|
5171
|
+
thumbs.insertAdjacentHTML('beforeend', '<i class="usa-pg2-ring" aria-hidden="true"></i>');
|
|
5172
|
+
const stage = this.querySelector('.usa-pg2-stage');
|
|
5173
|
+
const main = this.querySelector('.usa-pg2-main');
|
|
5174
|
+
this.listen(stage, 'keydown', (e) => {
|
|
5175
|
+
if (e.key === 'ArrowRight')
|
|
5176
|
+
(this.next(), e.preventDefault());
|
|
5177
|
+
if (e.key === 'ArrowLeft')
|
|
5178
|
+
(this.prev(), e.preventDefault());
|
|
5179
|
+
});
|
|
5180
|
+
this.listen(thumbs, 'keydown', (e) => {
|
|
5181
|
+
if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
|
|
5182
|
+
e.key === 'ArrowRight' ? this.next() : this.prev();
|
|
5183
|
+
thumbs.children[this._i]?.focus();
|
|
5184
|
+
e.preventDefault();
|
|
5185
|
+
}
|
|
5186
|
+
});
|
|
5187
|
+
let sx = 0;
|
|
5188
|
+
this.listen(stage, 'pointerdown', (e) => (sx = e.clientX));
|
|
5189
|
+
this.listen(stage, 'pointerup', (e) => {
|
|
5190
|
+
const dx = e.clientX - sx;
|
|
5191
|
+
if (e.pointerType !== 'mouse' && Math.abs(dx) > 40)
|
|
5192
|
+
dx < 0 ? this.next() : this.prev();
|
|
5193
|
+
});
|
|
5194
|
+
this.listen(stage, 'pointermove', (e) => {
|
|
5195
|
+
if (e.pointerType !== 'mouse' || this.reduced || this.flag('nozoom'))
|
|
5196
|
+
return;
|
|
5197
|
+
const r = stage.getBoundingClientRect();
|
|
5198
|
+
main.style.transformOrigin = `${(((e.clientX - r.left) / r.width) * 100).toFixed(1)}% ${(((e.clientY - r.top) / r.height) * 100).toFixed(1)}%`;
|
|
5199
|
+
main.style.transform = `scale(${this.num('zoom', 2)})`;
|
|
5200
|
+
});
|
|
5201
|
+
this.listen(stage, 'pointerleave', () => (main.style.transform = ''));
|
|
5202
|
+
this._i = wrapIndex(this.num('index', 0), this.count);
|
|
5203
|
+
this.paint(0);
|
|
5204
|
+
}
|
|
5205
|
+
changed() {
|
|
5206
|
+
if (this.isConnected && this._imgs.length)
|
|
5207
|
+
this.go(this.num('index', 0));
|
|
5208
|
+
}
|
|
5209
|
+
go(i) {
|
|
5210
|
+
const n = wrapIndex(Math.round(i), this.count);
|
|
5211
|
+
if (n === this._i)
|
|
5212
|
+
return;
|
|
5213
|
+
const dir = n > this._i ? 1 : -1;
|
|
5214
|
+
this._i = n;
|
|
5215
|
+
this.paint(dir);
|
|
5216
|
+
this.emit('change', { index: n });
|
|
5217
|
+
}
|
|
5218
|
+
next() {
|
|
5219
|
+
this.go(wrapIndex(this._i + 1, this.count));
|
|
5220
|
+
}
|
|
5221
|
+
prev() {
|
|
5222
|
+
this.go(wrapIndex(this._i - 1, this.count));
|
|
5223
|
+
}
|
|
5224
|
+
paint(dir) {
|
|
5225
|
+
const im = this._imgs[this._i];
|
|
5226
|
+
const main = this.querySelector('.usa-pg2-main');
|
|
5227
|
+
if (!im || !main)
|
|
5228
|
+
return;
|
|
5229
|
+
main.src = im.getAttribute('src') || '';
|
|
5230
|
+
main.alt = im.alt;
|
|
5231
|
+
this.querySelector('.usa-pg2-stage').setAttribute('aria-label', `Image ${this._i + 1} of ${this.count}${im.alt ? `: ${im.alt}` : ''}`);
|
|
5232
|
+
const thumbs = Array.from(this.querySelectorAll('.usa-pg2-thumb'));
|
|
5233
|
+
thumbs.forEach((t, k) => (t.setAttribute('aria-selected', String(k === this._i)), (t.tabIndex = k === this._i ? 0 : -1)));
|
|
5234
|
+
const t = thumbs[this._i];
|
|
5235
|
+
const ring = this.querySelector('.usa-pg2-ring');
|
|
5236
|
+
if (t && ring) {
|
|
5237
|
+
ring.style.transform = `translateX(${t.offsetLeft}px)`;
|
|
5238
|
+
ring.style.width = `${t.offsetWidth || 56}px`;
|
|
5239
|
+
}
|
|
5240
|
+
if (dir && !this.reduced)
|
|
5241
|
+
this.motion(main, [{ transform: `translateX(${dir * 18}%)`, opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: 380, easing: 'cubic-bezier(.2,.8,.2,1)' });
|
|
5242
|
+
}
|
|
5243
|
+
}
|
|
5244
|
+
return UsaProductGallery;
|
|
5245
|
+
}, { id: 'product-gallery', text: css$5 });
|
|
5246
|
+
}
|
|
5247
|
+
|
|
5248
|
+
var css$4 = "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
|
+
|
|
5250
|
+
/** Split seconds into d/h/m/s (7.3). */
|
|
5251
|
+
function splitTime(sec) {
|
|
5252
|
+
const t = Math.max(0, Math.floor(sec));
|
|
5253
|
+
return { d: Math.floor(t / 86400), h: Math.floor((t % 86400) / 3600), m: Math.floor((t % 3600) / 60), s: t % 60 };
|
|
5254
|
+
}
|
|
5255
|
+
const NAMES = { d: 'days', h: 'hours', m: 'minutes', s: 'seconds' };
|
|
5256
|
+
function defineCountdown(tag = 'usa-countdown') {
|
|
5257
|
+
return defineElement(tag, (Base) => {
|
|
5258
|
+
class UsaCountdown extends Base {
|
|
5259
|
+
constructor() {
|
|
5260
|
+
super(...arguments);
|
|
5261
|
+
this._end = 0;
|
|
5262
|
+
this._timer = 0;
|
|
5263
|
+
this._lastMin = -1;
|
|
5264
|
+
}
|
|
5265
|
+
static get observedAttributes() {
|
|
5266
|
+
return ['to', 'seconds'];
|
|
5267
|
+
}
|
|
5268
|
+
get left() {
|
|
5269
|
+
return Math.max(0, Math.round((this._end - Date.now()) / 1000));
|
|
5270
|
+
}
|
|
5271
|
+
mount() {
|
|
5272
|
+
const units = this.str('units', 'd,h,m,s').split(',').map((u) => u.trim()).filter((u) => u in NAMES);
|
|
5273
|
+
const labels = this.str('labels', '').split(',');
|
|
5274
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
5275
|
+
this.insertAdjacentHTML('afterbegin', `<span class="usa-cd-row" data-usa-part aria-hidden="true">${units.map((u, i) => `<span class="usa-cd-unit" data-u="${u}"><span class="usa-cd-digits"></span><small>${labels[i]?.trim() || NAMES[u]}</small></span>`).join('')}</span>`);
|
|
5276
|
+
this.setAttribute('role', 'timer');
|
|
5277
|
+
this.reset();
|
|
5278
|
+
this.onCleanup(() => this.stop());
|
|
5279
|
+
this.start();
|
|
5280
|
+
}
|
|
5281
|
+
changed() {
|
|
5282
|
+
if (this.isConnected)
|
|
5283
|
+
(this.reset(), this.start());
|
|
5284
|
+
}
|
|
5285
|
+
reset() {
|
|
5286
|
+
const to = this.str('to', '');
|
|
5287
|
+
const t = to ? Date.parse(to) : NaN;
|
|
5288
|
+
this._end = Number.isFinite(t) ? t : Date.now() + this.num('seconds', 60) * 1000;
|
|
5289
|
+
this._lastMin = -1;
|
|
5290
|
+
this.removeAttribute('data-done');
|
|
5291
|
+
this.paint(false);
|
|
5292
|
+
}
|
|
5293
|
+
start() {
|
|
5294
|
+
this.stop();
|
|
5295
|
+
this._timer = setInterval(() => this.paint(true), 1000);
|
|
5296
|
+
}
|
|
5297
|
+
stop() {
|
|
5298
|
+
if (this._timer)
|
|
5299
|
+
clearInterval(this._timer);
|
|
5300
|
+
this._timer = 0;
|
|
5301
|
+
}
|
|
5302
|
+
paint(flip) {
|
|
5303
|
+
const left = this.left;
|
|
5304
|
+
const t = splitTime(left);
|
|
5305
|
+
this.querySelectorAll('.usa-cd-unit').forEach((u) => {
|
|
5306
|
+
const key = u.dataset.u;
|
|
5307
|
+
const val = String(key === 'h' && !this.querySelector('[data-u="d"]') ? t.h + t.d * 24 : t[key]).padStart(2, '0');
|
|
5308
|
+
const box = u.querySelector('.usa-cd-digits');
|
|
5309
|
+
while (box.children.length < val.length)
|
|
5310
|
+
box.insertAdjacentHTML('afterbegin', '<b class="usa-cd-d">0</b>');
|
|
5311
|
+
while (box.children.length > val.length)
|
|
5312
|
+
box.firstElementChild.remove();
|
|
5313
|
+
Array.from(box.children).forEach((d, i) => {
|
|
5314
|
+
if (d.textContent === val[i])
|
|
5315
|
+
return;
|
|
5316
|
+
d.textContent = val[i];
|
|
5317
|
+
if (flip && !this.reduced)
|
|
5318
|
+
this.motion(d, [{ transform: 'rotateX(-90deg)', filter: 'brightness(.7)' }, { transform: 'none', filter: 'none' }], { duration: 360, easing: 'cubic-bezier(.3,1.4,.6,1)' });
|
|
5319
|
+
});
|
|
5320
|
+
});
|
|
5321
|
+
const min = Math.floor(left / 60);
|
|
5322
|
+
if (min !== this._lastMin) {
|
|
5323
|
+
this._lastMin = min;
|
|
5324
|
+
this.setAttribute('aria-label', `${this.str('label', 'Time left')}: ${t.d ? `${t.d} days ` : ''}${t.h} hours ${t.m} minutes`);
|
|
5325
|
+
}
|
|
5326
|
+
if (flip)
|
|
5327
|
+
this.emit('tick', { left });
|
|
5328
|
+
if (left <= 0 && !this.hasAttribute('data-done')) {
|
|
5329
|
+
this.setAttribute('data-done', '');
|
|
5330
|
+
this.stop();
|
|
5331
|
+
this.emit('done', {});
|
|
5332
|
+
}
|
|
5333
|
+
}
|
|
5334
|
+
}
|
|
5335
|
+
return UsaCountdown;
|
|
5336
|
+
}, { id: 'countdown', text: css$4 });
|
|
5337
|
+
}
|
|
5338
|
+
|
|
5339
|
+
var css$3 = "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$3 });
|
|
5427
|
+
}
|
|
5428
|
+
|
|
5429
|
+
var css$2 = "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$2 });
|
|
5532
|
+
}
|
|
5533
|
+
|
|
5534
|
+
var css$1 = "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$1 });
|
|
5630
|
+
}
|
|
5631
|
+
|
|
5632
|
+
var css = "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 });
|
|
4910
5703
|
}
|
|
4911
5704
|
|
|
4912
5705
|
/**
|
|
@@ -4933,6 +5726,8 @@ const WIDGETS = {
|
|
|
4933
5726
|
'6.9': { 'usa-date-picker': defineDatePicker, 'usa-color-picker': defineColorPicker, 'usa-file-drop': defineFileDrop, 'usa-keyframe-editor': defineKeyframeEditor },
|
|
4934
5727
|
'7.1': { 'usa-music-player': defineMusicPlayer, 'usa-volume-knob': defineVolumeKnob, 'usa-equalizer': defineEqualizer, 'usa-lyrics': defineLyrics },
|
|
4935
5728
|
'7.2': { 'usa-bar-chart': defineBarChart, 'usa-gauge': defineGauge, 'usa-sparkline': defineSparkline, 'usa-kpi': defineKpi },
|
|
5729
|
+
'7.3': { 'usa-add-to-cart': defineAddToCart, 'usa-cart-drawer': defineCartDrawer, 'usa-product-gallery': defineProductGallery, 'usa-countdown': defineCountdown },
|
|
5730
|
+
'7.4': { 'usa-message-list': defineMessageList, 'usa-reactions': defineReactions, 'usa-notification-bell': defineNotificationBell, 'usa-presence': definePresence },
|
|
4936
5731
|
};
|
|
4937
5732
|
/** Every widget tag, in release order. */
|
|
4938
5733
|
const WIDGET_TAGS = Object.values(WIDGETS).flatMap((g) => Object.keys(g));
|
|
@@ -4944,5 +5739,5 @@ function defineWidgets(release) {
|
|
|
4944
5739
|
fn(tag);
|
|
4945
5740
|
}
|
|
4946
5741
|
|
|
4947
|
-
export { CAROUSEL_EFFECTS, EQ_PRESETS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, defineBarChart, defineCarousel, defineColorPicker, defineCompare, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFileDrop, defineGauge, defineKanban, defineKeyframeEditor, defineKpi, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineOdometer, definePagination, defineProgressRing, definePullCord, defineSegmented, defineSheet, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineVolumeKnob, defineWeatherCard, defineWidgets, hexToHsv, hsvToHex, monthGrid, pageWindow, parseISODate, parseLRC, sparkPoints, stackToast };
|
|
5742
|
+
export { CAROUSEL_EFFECTS, EQ_PRESETS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, cartTotal, defineAddToCart, defineBarChart, defineCarousel, defineCartDrawer, defineColorPicker, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFileDrop, defineGauge, defineKanban, defineKeyframeEditor, defineKpi, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, definePagination, definePresence, defineProductGallery, defineProgressRing, definePullCord, defineReactions, defineSegmented, defineSheet, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineVolumeKnob, defineWeatherCard, defineWidgets, hexToHsv, hsvToHex, initials, monthGrid, pageWindow, parseISODate, parseLRC, parseReactions, sparkPoints, splitTime, stackToast, wrapIndex };
|
|
4948
5743
|
//# sourceMappingURL=widgets.js.map
|