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
|
@@ -3,9 +3,12 @@
|
|
|
3
3
|
var base = require('../chunks/base-BaQV-2ha.cjs');
|
|
4
4
|
var spring = require('../chunks/spring-Dgx187Vh.cjs');
|
|
5
5
|
var player = require('../chunks/player-PS6_FzNw.cjs');
|
|
6
|
-
require('../chunks/registry-DehBVRDV.cjs');
|
|
6
|
+
var registry = require('../chunks/registry-DehBVRDV.cjs');
|
|
7
|
+
require('../chunks/builtins-xalxV2d5.cjs');
|
|
8
|
+
var components_fxShop = require('./fx-shop.cjs');
|
|
7
9
|
require('../chunks/core-BGAyaY6L.cjs');
|
|
8
10
|
require('./tokens.cjs');
|
|
11
|
+
require('../chunks/fx-lBGVtQO1.cjs');
|
|
9
12
|
|
|
10
13
|
/** Helpers shared by the 6.x widgets (`motionary/components/widgets`). */
|
|
11
14
|
const clampN = (v, a, b) => Math.min(b, Math.max(a, v));
|
|
@@ -42,7 +45,7 @@ function arrowIndex(e, i, n, vertical = false) {
|
|
|
42
45
|
return -1;
|
|
43
46
|
}
|
|
44
47
|
|
|
45
|
-
var css$
|
|
48
|
+
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}";
|
|
46
49
|
|
|
47
50
|
const CAROUSEL_EFFECTS = ['slide', 'fade', 'scale', 'cards'];
|
|
48
51
|
function defineCarousel(tag = 'usa-carousel') {
|
|
@@ -231,10 +234,10 @@ function defineCarousel(tag = 'usa-carousel') {
|
|
|
231
234
|
}
|
|
232
235
|
}
|
|
233
236
|
return UsaCarousel;
|
|
234
|
-
}, { id: 'carousel', text: css$
|
|
237
|
+
}, { id: 'carousel', text: css$J });
|
|
235
238
|
}
|
|
236
239
|
|
|
237
|
-
var css$
|
|
240
|
+
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}";
|
|
238
241
|
|
|
239
242
|
const TAB_INDICATORS = ['pill', 'underline', 'glow', 'gooey'];
|
|
240
243
|
function defineTabBar(tag = 'usa-tab-bar') {
|
|
@@ -347,10 +350,10 @@ function defineTabBar(tag = 'usa-tab-bar') {
|
|
|
347
350
|
}
|
|
348
351
|
}
|
|
349
352
|
return UsaTabBar;
|
|
350
|
-
}, { id: 'tab-bar', text: css$
|
|
353
|
+
}, { id: 'tab-bar', text: css$I });
|
|
351
354
|
}
|
|
352
355
|
|
|
353
|
-
var css$
|
|
356
|
+
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}}";
|
|
354
357
|
|
|
355
358
|
function defineDisclosure(tag = 'usa-disclosure') {
|
|
356
359
|
return base.defineElement(tag, (Base) => {
|
|
@@ -418,10 +421,10 @@ function defineDisclosure(tag = 'usa-disclosure') {
|
|
|
418
421
|
}
|
|
419
422
|
}
|
|
420
423
|
return UsaDisclosure;
|
|
421
|
-
}, { id: 'disclosure', text: css$
|
|
424
|
+
}, { id: 'disclosure', text: css$H });
|
|
422
425
|
}
|
|
423
426
|
|
|
424
|
-
var css$
|
|
427
|
+
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}}";
|
|
425
428
|
|
|
426
429
|
function defineStories(tag = 'usa-stories') {
|
|
427
430
|
return base.defineElement(tag, (Base) => {
|
|
@@ -554,10 +557,10 @@ function defineStories(tag = 'usa-stories') {
|
|
|
554
557
|
}
|
|
555
558
|
}
|
|
556
559
|
return UsaStories;
|
|
557
|
-
}, { id: 'stories', text: css$
|
|
560
|
+
}, { id: 'stories', text: css$G });
|
|
558
561
|
}
|
|
559
562
|
|
|
560
|
-
var css$
|
|
563
|
+
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)}}";
|
|
561
564
|
|
|
562
565
|
const MODAL_EFFECTS = ['scale', 'slide-up', 'flip', 'origin'];
|
|
563
566
|
const SHEET_SIDES = ['right', 'left', 'bottom', 'top'];
|
|
@@ -784,12 +787,12 @@ function defineOverlay(tag, kind) {
|
|
|
784
787
|
}
|
|
785
788
|
}
|
|
786
789
|
return UsaOverlay;
|
|
787
|
-
}, { id: 'overlay', text: css$
|
|
790
|
+
}, { id: 'overlay', text: css$F });
|
|
788
791
|
}
|
|
789
792
|
const defineModal = (tag = 'usa-modal') => defineOverlay(tag, 'modal');
|
|
790
793
|
const defineSheet = (tag = 'usa-sheet') => defineOverlay(tag, 'sheet');
|
|
791
794
|
|
|
792
|
-
var css$
|
|
795
|
+
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}}";
|
|
793
796
|
|
|
794
797
|
const TOAST_POSITIONS = ['bottom-right', 'bottom-left', 'bottom-center', 'top-right', 'top-left', 'top-center'];
|
|
795
798
|
const ICONS = { info: 'ℹ', success: '✓', warning: '!', error: '✕' };
|
|
@@ -960,7 +963,7 @@ function defineToastStack(tag = 'usa-toast-stack') {
|
|
|
960
963
|
}
|
|
961
964
|
}
|
|
962
965
|
return UsaToastStack;
|
|
963
|
-
}, { id: 'toast', text: css$
|
|
966
|
+
}, { id: 'toast', text: css$E });
|
|
964
967
|
}
|
|
965
968
|
/** Show a toast on the first `<usa-toast-stack>` of the page (one is created when missing). */
|
|
966
969
|
function stackToast(input, stack) {
|
|
@@ -988,7 +991,7 @@ function installToastTriggers() {
|
|
|
988
991
|
});
|
|
989
992
|
}
|
|
990
993
|
|
|
991
|
-
var css$
|
|
994
|
+
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)}}";
|
|
992
995
|
|
|
993
996
|
const MENU_EFFECTS = ['scale', 'fold', 'slide'];
|
|
994
997
|
function defineMenu(tag = 'usa-menu') {
|
|
@@ -1127,10 +1130,10 @@ function defineMenu(tag = 'usa-menu') {
|
|
|
1127
1130
|
}
|
|
1128
1131
|
}
|
|
1129
1132
|
return UsaMenu;
|
|
1130
|
-
}, { id: 'menu', text: css$
|
|
1133
|
+
}, { id: 'menu', text: css$D });
|
|
1131
1134
|
}
|
|
1132
1135
|
|
|
1133
|
-
var css$
|
|
1136
|
+
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}}";
|
|
1134
1137
|
|
|
1135
1138
|
const PROGRESS_VARIANTS = ['ring', 'bar', 'semi'];
|
|
1136
1139
|
const NS = 'http://www.w3.org/2000/svg';
|
|
@@ -1270,7 +1273,7 @@ function defineProgressRing(tag = 'usa-progress-ring') {
|
|
|
1270
1273
|
}
|
|
1271
1274
|
}
|
|
1272
1275
|
return UsaProgressRing;
|
|
1273
|
-
}, { id: 'meters', text: css$
|
|
1276
|
+
}, { id: 'meters', text: css$C });
|
|
1274
1277
|
}
|
|
1275
1278
|
function defineOdometer(tag = 'usa-odometer') {
|
|
1276
1279
|
return base.defineElement(tag, (Base) => {
|
|
@@ -1380,10 +1383,10 @@ function defineOdometer(tag = 'usa-odometer') {
|
|
|
1380
1383
|
}
|
|
1381
1384
|
}
|
|
1382
1385
|
return UsaOdometer;
|
|
1383
|
-
}, { id: 'meters', text: css$
|
|
1386
|
+
}, { id: 'meters', text: css$C });
|
|
1384
1387
|
}
|
|
1385
1388
|
|
|
1386
|
-
var css$
|
|
1389
|
+
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}}";
|
|
1387
1390
|
|
|
1388
1391
|
const SKELETON_VARIANTS = ['wave', 'pulse', 'glow'];
|
|
1389
1392
|
function defineSkeletonReveal(tag = 'usa-skeleton-reveal') {
|
|
@@ -1498,10 +1501,10 @@ function defineSkeletonReveal(tag = 'usa-skeleton-reveal') {
|
|
|
1498
1501
|
}
|
|
1499
1502
|
}
|
|
1500
1503
|
return UsaSkeletonReveal;
|
|
1501
|
-
}, { id: 'skeleton-reveal', text: css$
|
|
1504
|
+
}, { id: 'skeleton-reveal', text: css$B });
|
|
1502
1505
|
}
|
|
1503
1506
|
|
|
1504
|
-
var css$
|
|
1507
|
+
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}}";
|
|
1505
1508
|
|
|
1506
1509
|
const PATHS = {
|
|
1507
1510
|
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',
|
|
@@ -1625,10 +1628,10 @@ function defineStarRating(tag = 'usa-star-rating') {
|
|
|
1625
1628
|
}
|
|
1626
1629
|
}
|
|
1627
1630
|
return UsaStarRating;
|
|
1628
|
-
}, { id: 'star-rating', text: css$
|
|
1631
|
+
}, { id: 'star-rating', text: css$A });
|
|
1629
1632
|
}
|
|
1630
1633
|
|
|
1631
|
-
var css$
|
|
1634
|
+
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}}";
|
|
1632
1635
|
|
|
1633
1636
|
function defineMilestones(tag = 'usa-milestones') {
|
|
1634
1637
|
return base.defineElement(tag, (Base) => {
|
|
@@ -1716,10 +1719,10 @@ function defineMilestones(tag = 'usa-milestones') {
|
|
|
1716
1719
|
}
|
|
1717
1720
|
}
|
|
1718
1721
|
return UsaMilestones;
|
|
1719
|
-
}, { id: 'milestones', text: css$
|
|
1722
|
+
}, { id: 'milestones', text: css$z });
|
|
1720
1723
|
}
|
|
1721
1724
|
|
|
1722
|
-
var css$
|
|
1725
|
+
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}";
|
|
1723
1726
|
|
|
1724
1727
|
function defineMasonryFlow(tag = 'usa-masonry-flow') {
|
|
1725
1728
|
return base.defineElement(tag, (Base) => {
|
|
@@ -1840,10 +1843,10 @@ function defineMasonryFlow(tag = 'usa-masonry-flow') {
|
|
|
1840
1843
|
}
|
|
1841
1844
|
}
|
|
1842
1845
|
return UsaMasonryFlow;
|
|
1843
|
-
}, { id: 'masonry-flow', text: css$
|
|
1846
|
+
}, { id: 'masonry-flow', text: css$y });
|
|
1844
1847
|
}
|
|
1845
1848
|
|
|
1846
|
-
var css$
|
|
1849
|
+
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}";
|
|
1847
1850
|
|
|
1848
1851
|
function defineCompare(tag = 'usa-compare') {
|
|
1849
1852
|
return base.defineElement(tag, (Base) => {
|
|
@@ -1967,10 +1970,10 @@ function defineCompare(tag = 'usa-compare') {
|
|
|
1967
1970
|
}
|
|
1968
1971
|
}
|
|
1969
1972
|
return UsaCompare;
|
|
1970
|
-
}, { id: 'compare', text: css$
|
|
1973
|
+
}, { id: 'compare', text: css$x });
|
|
1971
1974
|
}
|
|
1972
1975
|
|
|
1973
|
-
var css$
|
|
1976
|
+
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}";
|
|
1974
1977
|
|
|
1975
1978
|
function defineCubeGallery(tag = 'usa-cube-gallery') {
|
|
1976
1979
|
return base.defineElement(tag, (Base) => {
|
|
@@ -2103,10 +2106,10 @@ function defineCubeGallery(tag = 'usa-cube-gallery') {
|
|
|
2103
2106
|
}
|
|
2104
2107
|
}
|
|
2105
2108
|
return UsaCubeGallery;
|
|
2106
|
-
}, { id: 'cube-gallery', text: css$
|
|
2109
|
+
}, { id: 'cube-gallery', text: css$w });
|
|
2107
2110
|
}
|
|
2108
2111
|
|
|
2109
|
-
var css$
|
|
2112
|
+
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}}";
|
|
2110
2113
|
|
|
2111
2114
|
function defineDock(tag = 'usa-dock') {
|
|
2112
2115
|
return base.defineElement(tag, (Base) => {
|
|
@@ -2174,10 +2177,10 @@ function defineDock(tag = 'usa-dock') {
|
|
|
2174
2177
|
}
|
|
2175
2178
|
}
|
|
2176
2179
|
return UsaDock;
|
|
2177
|
-
}, { id: 'dock', text: css$
|
|
2180
|
+
}, { id: 'dock', text: css$v });
|
|
2178
2181
|
}
|
|
2179
2182
|
|
|
2180
|
-
var css$
|
|
2183
|
+
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)}";
|
|
2181
2184
|
|
|
2182
2185
|
const NAV_INDICATORS = ['underline', 'pill', 'blob', 'dot'];
|
|
2183
2186
|
function defineNavMorph(tag = 'usa-nav-morph') {
|
|
@@ -2281,10 +2284,10 @@ function defineNavMorph(tag = 'usa-nav-morph') {
|
|
|
2281
2284
|
}
|
|
2282
2285
|
}
|
|
2283
2286
|
return UsaNavMorph;
|
|
2284
|
-
}, { id: 'nav-morph', text: css$
|
|
2287
|
+
}, { id: 'nav-morph', text: css$u });
|
|
2285
2288
|
}
|
|
2286
2289
|
|
|
2287
|
-
var css$
|
|
2290
|
+
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}";
|
|
2288
2291
|
|
|
2289
2292
|
const TOGGLE_VARIANTS = ['cross', 'arrow', 'minus', 'plus-x'];
|
|
2290
2293
|
function defineMenuToggle(tag = 'usa-menu-toggle') {
|
|
@@ -2357,10 +2360,10 @@ function defineMenuToggle(tag = 'usa-menu-toggle') {
|
|
|
2357
2360
|
}
|
|
2358
2361
|
}
|
|
2359
2362
|
return UsaMenuToggle;
|
|
2360
|
-
}, { id: 'menu-toggle', text: css$
|
|
2363
|
+
}, { id: 'menu-toggle', text: css$t });
|
|
2361
2364
|
}
|
|
2362
2365
|
|
|
2363
|
-
var css$
|
|
2366
|
+
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)}";
|
|
2364
2367
|
|
|
2365
2368
|
const TIP_PLACEMENTS = ['top', 'bottom', 'left', 'right'];
|
|
2366
2369
|
const FLIP = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
|
|
@@ -2492,10 +2495,10 @@ function defineTip(tag = 'usa-tip') {
|
|
|
2492
2495
|
}
|
|
2493
2496
|
}
|
|
2494
2497
|
return UsaTip;
|
|
2495
|
-
}, { id: 'tip', text: css$
|
|
2498
|
+
}, { id: 'tip', text: css$s });
|
|
2496
2499
|
}
|
|
2497
2500
|
|
|
2498
|
-
var css$
|
|
2501
|
+
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}}";
|
|
2499
2502
|
|
|
2500
2503
|
function defineStepper(tag = 'usa-stepper') {
|
|
2501
2504
|
return base.defineElement(tag, (Base) => {
|
|
@@ -2592,10 +2595,10 @@ function defineStepper(tag = 'usa-stepper') {
|
|
|
2592
2595
|
}
|
|
2593
2596
|
}
|
|
2594
2597
|
return UsaStepper;
|
|
2595
|
-
}, { id: 'stepper', text: css$
|
|
2598
|
+
}, { id: 'stepper', text: css$r });
|
|
2596
2599
|
}
|
|
2597
2600
|
|
|
2598
|
-
var css$
|
|
2601
|
+
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}}";
|
|
2599
2602
|
|
|
2600
2603
|
/** The visible page list: numbers and `'…'` gaps (1-based). */
|
|
2601
2604
|
function pageWindow(page, total, siblings = 1) {
|
|
@@ -2717,10 +2720,10 @@ function definePagination(tag = 'usa-pagination') {
|
|
|
2717
2720
|
}
|
|
2718
2721
|
}
|
|
2719
2722
|
return UsaPagination;
|
|
2720
|
-
}, { id: 'pagination', text: css$
|
|
2723
|
+
}, { id: 'pagination', text: css$q });
|
|
2721
2724
|
}
|
|
2722
2725
|
|
|
2723
|
-
var css$
|
|
2726
|
+
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}}";
|
|
2724
2727
|
|
|
2725
2728
|
const SEGMENTED_VARIANTS = ['ios', 'pill', 'outline'];
|
|
2726
2729
|
function defineSegmented(tag = 'usa-segmented') {
|
|
@@ -2814,10 +2817,10 @@ function defineSegmented(tag = 'usa-segmented') {
|
|
|
2814
2817
|
}
|
|
2815
2818
|
}
|
|
2816
2819
|
return UsaSegmented;
|
|
2817
|
-
}, { id: 'segmented', text: css$
|
|
2820
|
+
}, { id: 'segmented', text: css$p });
|
|
2818
2821
|
}
|
|
2819
2822
|
|
|
2820
|
-
var css$
|
|
2823
|
+
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}}";
|
|
2821
2824
|
|
|
2822
2825
|
const SWITCH_VARIANTS = ['ios', 'daynight', 'bounce', 'liquid'];
|
|
2823
2826
|
function defineSwitch(tag = 'usa-switch') {
|
|
@@ -2905,10 +2908,10 @@ function defineSwitch(tag = 'usa-switch') {
|
|
|
2905
2908
|
}
|
|
2906
2909
|
}
|
|
2907
2910
|
return UsaSwitch;
|
|
2908
|
-
}, { id: 'switch', text: css$
|
|
2911
|
+
}, { id: 'switch', text: css$o });
|
|
2909
2912
|
}
|
|
2910
2913
|
|
|
2911
|
-
var css$
|
|
2914
|
+
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}}";
|
|
2912
2915
|
|
|
2913
2916
|
function defineKanban(tag = 'usa-kanban') {
|
|
2914
2917
|
return base.defineElement(tag, (Base) => {
|
|
@@ -3113,10 +3116,10 @@ function defineKanban(tag = 'usa-kanban') {
|
|
|
3113
3116
|
}
|
|
3114
3117
|
}
|
|
3115
3118
|
return UsaKanban;
|
|
3116
|
-
}, { id: 'kanban', text: css$
|
|
3119
|
+
}, { id: 'kanban', text: css$n });
|
|
3117
3120
|
}
|
|
3118
3121
|
|
|
3119
|
-
var css$
|
|
3122
|
+
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}}";
|
|
3120
3123
|
|
|
3121
3124
|
function defineSwipeDeck(tag = 'usa-swipe-deck') {
|
|
3122
3125
|
return base.defineElement(tag, (Base) => {
|
|
@@ -3258,10 +3261,10 @@ function defineSwipeDeck(tag = 'usa-swipe-deck') {
|
|
|
3258
3261
|
}
|
|
3259
3262
|
}
|
|
3260
3263
|
return UsaSwipeDeck;
|
|
3261
|
-
}, { id: 'swipe-deck', text: css$
|
|
3264
|
+
}, { id: 'swipe-deck', text: css$m });
|
|
3262
3265
|
}
|
|
3263
3266
|
|
|
3264
|
-
var css$
|
|
3267
|
+
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}}";
|
|
3265
3268
|
|
|
3266
3269
|
const WEATHER_CONDITIONS = ['clear', 'cloudy', 'rain', 'snow', 'storm', 'fog', 'night'];
|
|
3267
3270
|
const LABEL = { clear: 'Clear', cloudy: 'Cloudy', rain: 'Rain', snow: 'Snow', storm: 'Thunderstorm', fog: 'Fog', night: 'Clear night' };
|
|
@@ -3342,10 +3345,10 @@ function defineWeatherCard(tag = 'usa-weather-card') {
|
|
|
3342
3345
|
}
|
|
3343
3346
|
}
|
|
3344
3347
|
return UsaWeatherCard;
|
|
3345
|
-
}, { id: 'weather-card', text: css$
|
|
3348
|
+
}, { id: 'weather-card', text: css$l });
|
|
3346
3349
|
}
|
|
3347
3350
|
|
|
3348
|
-
var css$
|
|
3351
|
+
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}}";
|
|
3349
3352
|
|
|
3350
3353
|
function definePullCord(tag = 'usa-pull-cord') {
|
|
3351
3354
|
return base.defineElement(tag, (Base) => {
|
|
@@ -3474,10 +3477,10 @@ function definePullCord(tag = 'usa-pull-cord') {
|
|
|
3474
3477
|
}
|
|
3475
3478
|
}
|
|
3476
3479
|
return UsaPullCord;
|
|
3477
|
-
}, { id: 'pull-cord', text: css$
|
|
3480
|
+
}, { id: 'pull-cord', text: css$k });
|
|
3478
3481
|
}
|
|
3479
3482
|
|
|
3480
|
-
var css$
|
|
3483
|
+
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}}";
|
|
3481
3484
|
|
|
3482
3485
|
const iso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
|
3483
3486
|
/** Parse `YYYY-MM-DD` as a local date (or null). */
|
|
@@ -3626,10 +3629,10 @@ function defineDatePicker(tag = 'usa-date-picker') {
|
|
|
3626
3629
|
}
|
|
3627
3630
|
}
|
|
3628
3631
|
return UsaDatePicker;
|
|
3629
|
-
}, { id: 'date-picker', text: css$
|
|
3632
|
+
}, { id: 'date-picker', text: css$j });
|
|
3630
3633
|
}
|
|
3631
3634
|
|
|
3632
|
-
var css$
|
|
3635
|
+
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}}";
|
|
3633
3636
|
|
|
3634
3637
|
/** HSV (h 0–360, s / v 0–1) → `#rrggbb`. */
|
|
3635
3638
|
function hsvToHex(h, s, v) {
|
|
@@ -3749,10 +3752,10 @@ function defineColorPicker(tag = 'usa-color-picker') {
|
|
|
3749
3752
|
}
|
|
3750
3753
|
}
|
|
3751
3754
|
return UsaColorPicker;
|
|
3752
|
-
}, { id: 'color-picker', text: css$
|
|
3755
|
+
}, { id: 'color-picker', text: css$i });
|
|
3753
3756
|
}
|
|
3754
3757
|
|
|
3755
|
-
var css$
|
|
3758
|
+
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}}";
|
|
3756
3759
|
|
|
3757
3760
|
const size = (n) => (n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(1)} KB` : `${(n / 1048576).toFixed(1)} MB`);
|
|
3758
3761
|
function defineFileDrop(tag = 'usa-file-drop') {
|
|
@@ -3853,10 +3856,10 @@ function defineFileDrop(tag = 'usa-file-drop') {
|
|
|
3853
3856
|
}
|
|
3854
3857
|
}
|
|
3855
3858
|
return UsaFileDrop;
|
|
3856
|
-
}, { id: 'file-drop', text: css$
|
|
3859
|
+
}, { id: 'file-drop', text: css$h });
|
|
3857
3860
|
}
|
|
3858
3861
|
|
|
3859
|
-
var css$
|
|
3862
|
+
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}}";
|
|
3860
3863
|
|
|
3861
3864
|
const DEFAULT = {
|
|
3862
3865
|
format: player.ANIMATION_FORMAT,
|
|
@@ -4030,10 +4033,10 @@ function defineKeyframeEditor(tag = 'usa-keyframe-editor') {
|
|
|
4030
4033
|
}
|
|
4031
4034
|
}
|
|
4032
4035
|
return UsaKeyframeEditor;
|
|
4033
|
-
}, { id: 'keyframe-editor', text: css$
|
|
4036
|
+
}, { id: 'keyframe-editor', text: css$g });
|
|
4034
4037
|
}
|
|
4035
4038
|
|
|
4036
|
-
var css$
|
|
4039
|
+
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}}";
|
|
4037
4040
|
|
|
4038
4041
|
const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`;
|
|
4039
4042
|
function defineMusicPlayer(tag = 'usa-music-player') {
|
|
@@ -4194,10 +4197,10 @@ function defineMusicPlayer(tag = 'usa-music-player') {
|
|
|
4194
4197
|
}
|
|
4195
4198
|
}
|
|
4196
4199
|
return UsaMusicPlayer;
|
|
4197
|
-
}, { id: 'music-player', text: css$
|
|
4200
|
+
}, { id: 'music-player', text: css$f });
|
|
4198
4201
|
}
|
|
4199
4202
|
|
|
4200
|
-
var css$
|
|
4203
|
+
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}}";
|
|
4201
4204
|
|
|
4202
4205
|
const ARC = 270;
|
|
4203
4206
|
function defineVolumeKnob(tag = 'usa-volume-knob') {
|
|
@@ -4288,10 +4291,10 @@ function defineVolumeKnob(tag = 'usa-volume-knob') {
|
|
|
4288
4291
|
}
|
|
4289
4292
|
}
|
|
4290
4293
|
return UsaVolumeKnob;
|
|
4291
|
-
}, { id: 'volume-knob', text: css$
|
|
4294
|
+
}, { id: 'volume-knob', text: css$e });
|
|
4292
4295
|
}
|
|
4293
4296
|
|
|
4294
|
-
var css$
|
|
4297
|
+
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}}";
|
|
4295
4298
|
|
|
4296
4299
|
const EQ_PRESETS = {
|
|
4297
4300
|
flat: [0, 0, 0, 0, 0, 0, 0],
|
|
@@ -4389,10 +4392,10 @@ function defineEqualizer(tag = 'usa-equalizer') {
|
|
|
4389
4392
|
}
|
|
4390
4393
|
}
|
|
4391
4394
|
return UsaEqualizer;
|
|
4392
|
-
}, { id: 'equalizer', text: css$
|
|
4395
|
+
}, { id: 'equalizer', text: css$d });
|
|
4393
4396
|
}
|
|
4394
4397
|
|
|
4395
|
-
var css$
|
|
4398
|
+
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}}";
|
|
4396
4399
|
|
|
4397
4400
|
/** Parse LRC text into sorted `{ t, text }` lines. */
|
|
4398
4401
|
function parseLRC(src) {
|
|
@@ -4504,10 +4507,10 @@ function defineLyrics(tag = 'usa-lyrics') {
|
|
|
4504
4507
|
}
|
|
4505
4508
|
}
|
|
4506
4509
|
return UsaLyrics;
|
|
4507
|
-
}, { id: 'lyrics', text: css$
|
|
4510
|
+
}, { id: 'lyrics', text: css$c });
|
|
4508
4511
|
}
|
|
4509
4512
|
|
|
4510
|
-
var css$
|
|
4513
|
+
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}}";
|
|
4511
4514
|
|
|
4512
4515
|
function defineBarChart(tag = 'usa-bar-chart') {
|
|
4513
4516
|
return base.defineElement(tag, (Base) => {
|
|
@@ -4601,10 +4604,10 @@ function defineBarChart(tag = 'usa-bar-chart') {
|
|
|
4601
4604
|
}
|
|
4602
4605
|
}
|
|
4603
4606
|
return UsaBarChart;
|
|
4604
|
-
}, { id: 'bar-chart', text: css$
|
|
4607
|
+
}, { id: 'bar-chart', text: css$b });
|
|
4605
4608
|
}
|
|
4606
4609
|
|
|
4607
|
-
var css$
|
|
4610
|
+
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)}";
|
|
4608
4611
|
|
|
4609
4612
|
function defineGauge(tag = 'usa-gauge') {
|
|
4610
4613
|
return base.defineElement(tag, (Base) => {
|
|
@@ -4689,10 +4692,10 @@ function defineGauge(tag = 'usa-gauge') {
|
|
|
4689
4692
|
}
|
|
4690
4693
|
}
|
|
4691
4694
|
return UsaGauge;
|
|
4692
|
-
}, { id: 'gauge', text: css$
|
|
4695
|
+
}, { id: 'gauge', text: css$a });
|
|
4693
4696
|
}
|
|
4694
4697
|
|
|
4695
|
-
var css$
|
|
4698
|
+
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}}";
|
|
4696
4699
|
|
|
4697
4700
|
const SPARK_VARIANTS = ['line', 'area', 'bars'];
|
|
4698
4701
|
/** Map values to SVG points in a w×h box (with padding). */
|
|
@@ -4815,7 +4818,7 @@ function defineSparkline(tag = 'usa-sparkline') {
|
|
|
4815
4818
|
}
|
|
4816
4819
|
}
|
|
4817
4820
|
return UsaSparkline;
|
|
4818
|
-
}, { id: 'sparkline', text: css$
|
|
4821
|
+
}, { id: 'sparkline', text: css$9 });
|
|
4819
4822
|
}
|
|
4820
4823
|
|
|
4821
4824
|
/** Parse a figure like "$12.4k" / "−3.5%" / "1,204" → number + prefix / suffix / decimals (7.2). */
|
|
@@ -4828,7 +4831,7 @@ function parseFigureText(s) {
|
|
|
4828
4831
|
return Number.isFinite(n) ? { n, pre: m[1], post: m[3], dec: (raw.split('.')[1] || '').length } : null;
|
|
4829
4832
|
}
|
|
4830
4833
|
|
|
4831
|
-
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}";
|
|
4834
|
+
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}";
|
|
4832
4835
|
|
|
4833
4836
|
function defineKpi(tag = 'usa-kpi') {
|
|
4834
4837
|
return base.defineElement(tag, (Base) => {
|
|
@@ -4908,7 +4911,797 @@ function defineKpi(tag = 'usa-kpi') {
|
|
|
4908
4911
|
}
|
|
4909
4912
|
}
|
|
4910
4913
|
return UsaKpi;
|
|
4911
|
-
}, { id: 'kpi', text: css });
|
|
4914
|
+
}, { id: 'kpi', text: css$8 });
|
|
4915
|
+
}
|
|
4916
|
+
|
|
4917
|
+
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}}";
|
|
4918
|
+
|
|
4919
|
+
function defineAddToCart(tag = 'usa-add-to-cart') {
|
|
4920
|
+
return base.defineElement(tag, (Base) => {
|
|
4921
|
+
class UsaAddToCart extends Base {
|
|
4922
|
+
constructor() {
|
|
4923
|
+
super(...arguments);
|
|
4924
|
+
this._t = 0;
|
|
4925
|
+
}
|
|
4926
|
+
mount() {
|
|
4927
|
+
components_fxShop.registerShopPack();
|
|
4928
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
4929
|
+
const label = this.textContent?.trim() || this.str('label', 'Add to cart');
|
|
4930
|
+
this.textContent = '';
|
|
4931
|
+
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>');
|
|
4932
|
+
this.querySelector('.usa-atc-label').textContent = label;
|
|
4933
|
+
this.querySelector('.usa-atc-done span').textContent = this.str('added', 'Added');
|
|
4934
|
+
this.listen(this.querySelector('.usa-atc-btn'), 'click', () => this.add());
|
|
4935
|
+
this.onCleanup(() => this._t && clearTimeout(this._t));
|
|
4936
|
+
}
|
|
4937
|
+
add() {
|
|
4938
|
+
let item = {};
|
|
4939
|
+
try {
|
|
4940
|
+
item = JSON.parse(this.str('item', '{}'));
|
|
4941
|
+
}
|
|
4942
|
+
catch {
|
|
4943
|
+
item = { name: this.str('item', '') };
|
|
4944
|
+
}
|
|
4945
|
+
const cartSel = this.str('cart', '[data-cart]');
|
|
4946
|
+
const cart = document.querySelector(cartSel);
|
|
4947
|
+
const from = (this.str('from', '') && document.querySelector(this.str('from', ''))) || this.closest('[data-product]')?.querySelector('img') || this;
|
|
4948
|
+
if (registry.getEffect('fly-to-cart'))
|
|
4949
|
+
void registry.playEffect(from, 'fly-to-cart', { to: cart?.matches('usa-cart-drawer') ? `${cartSel} .usa-cd2-toggle` : cartSel });
|
|
4950
|
+
cart?.add?.(item);
|
|
4951
|
+
this.setAttribute('data-added', '');
|
|
4952
|
+
this.querySelector('.usa-atc-live').textContent = `${this.str('added', 'Added')} to cart`;
|
|
4953
|
+
if (!this.reduced)
|
|
4954
|
+
this.motion(this.querySelector('.usa-atc-btn'), [{ transform: 'scale(1)' }, { transform: 'scale(.92)', offset: 0.3 }, { transform: 'scale(1)' }], { duration: 380, easing: 'ease-out' });
|
|
4955
|
+
if (this._t)
|
|
4956
|
+
clearTimeout(this._t);
|
|
4957
|
+
this._t = setTimeout(() => this.removeAttribute('data-added'), this.num('hold', 1600));
|
|
4958
|
+
this.emit('add', { item });
|
|
4959
|
+
}
|
|
4960
|
+
}
|
|
4961
|
+
return UsaAddToCart;
|
|
4962
|
+
}, { id: 'add-to-cart', text: css$7 });
|
|
4963
|
+
}
|
|
4964
|
+
|
|
4965
|
+
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}";
|
|
4966
|
+
|
|
4967
|
+
/** Cart total (7.3). */
|
|
4968
|
+
const cartTotal = (items) => Math.round(items.reduce((a, i) => a + (Number(i.price) || 0) * (i.qty || 1), 0) * 100) / 100;
|
|
4969
|
+
function defineCartDrawer(tag = 'usa-cart-drawer') {
|
|
4970
|
+
return base.defineElement(tag, (Base) => {
|
|
4971
|
+
class UsaCartDrawer extends Base {
|
|
4972
|
+
constructor() {
|
|
4973
|
+
super(...arguments);
|
|
4974
|
+
this._items = [];
|
|
4975
|
+
this._open = false;
|
|
4976
|
+
this._ret = null;
|
|
4977
|
+
}
|
|
4978
|
+
get items() {
|
|
4979
|
+
return this._items.map((i) => ({ ...i }));
|
|
4980
|
+
}
|
|
4981
|
+
set items(v) {
|
|
4982
|
+
this._items = (v || []).map((i) => ({ ...i, id: i.id || i.name, qty: i.qty || 1 }));
|
|
4983
|
+
if (this.isConnected)
|
|
4984
|
+
this.render(null);
|
|
4985
|
+
}
|
|
4986
|
+
get total() {
|
|
4987
|
+
return cartTotal(this._items);
|
|
4988
|
+
}
|
|
4989
|
+
get count() {
|
|
4990
|
+
return this._items.reduce((a, i) => a + (i.qty || 1), 0);
|
|
4991
|
+
}
|
|
4992
|
+
get open() {
|
|
4993
|
+
return this._open;
|
|
4994
|
+
}
|
|
4995
|
+
set open(v) {
|
|
4996
|
+
this.toggle(!!v);
|
|
4997
|
+
}
|
|
4998
|
+
mount() {
|
|
4999
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
5000
|
+
const label = this.str('label', 'Cart');
|
|
5001
|
+
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>`);
|
|
5002
|
+
this.querySelector('.usa-cd2-panel strong').textContent = label;
|
|
5003
|
+
this.querySelector('.usa-cd2-panel').setAttribute('aria-label', label);
|
|
5004
|
+
this.listen(this.querySelector('.usa-cd2-toggle'), 'click', () => this.toggle());
|
|
5005
|
+
this.listen(this.querySelector('.usa-cd2-close'), 'click', () => this.toggle(false));
|
|
5006
|
+
this.listen(this.querySelector('.usa-cd2-backdrop'), 'click', () => this.toggle(false));
|
|
5007
|
+
this.listen(this, 'keydown', (e) => e.key === 'Escape' && this._open && this.toggle(false));
|
|
5008
|
+
this.listen(this.querySelector('.usa-cd2-list'), 'click', (e) => {
|
|
5009
|
+
const b = e.target.closest('[data-rm]');
|
|
5010
|
+
if (b)
|
|
5011
|
+
this.removeItem(b.dataset.rm);
|
|
5012
|
+
});
|
|
5013
|
+
if (!this._items.length) {
|
|
5014
|
+
try {
|
|
5015
|
+
const init = JSON.parse(this.str('items', '[]'));
|
|
5016
|
+
if (Array.isArray(init))
|
|
5017
|
+
this._items = init.map((i) => ({ ...i, id: i.id || i.name, qty: i.qty || 1 }));
|
|
5018
|
+
}
|
|
5019
|
+
catch {
|
|
5020
|
+
/* ignore bad JSON */
|
|
5021
|
+
}
|
|
5022
|
+
}
|
|
5023
|
+
this.render(null);
|
|
5024
|
+
}
|
|
5025
|
+
toggle(force) {
|
|
5026
|
+
const on = force ?? !this._open;
|
|
5027
|
+
if (on === this._open)
|
|
5028
|
+
return;
|
|
5029
|
+
this._open = on;
|
|
5030
|
+
const panel = this.querySelector('.usa-cd2-panel');
|
|
5031
|
+
const bd = this.querySelector('.usa-cd2-backdrop');
|
|
5032
|
+
this.querySelector('.usa-cd2-toggle').setAttribute('aria-expanded', String(on));
|
|
5033
|
+
this.toggleAttribute('data-open', on);
|
|
5034
|
+
if (on) {
|
|
5035
|
+
this._ret = document.activeElement || null;
|
|
5036
|
+
panel.hidden = bd.hidden = false;
|
|
5037
|
+
if (!this.reduced) {
|
|
5038
|
+
this.motion(panel, [{ transform: 'translateX(105%)' }, { transform: 'none' }], { duration: 380, easing: 'cubic-bezier(.2,.9,.3,1)' });
|
|
5039
|
+
this.motion(bd, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 });
|
|
5040
|
+
}
|
|
5041
|
+
panel.focus();
|
|
5042
|
+
this.emit('open', {});
|
|
5043
|
+
}
|
|
5044
|
+
else {
|
|
5045
|
+
const done = () => {
|
|
5046
|
+
if (!this._open)
|
|
5047
|
+
panel.hidden = bd.hidden = true;
|
|
5048
|
+
};
|
|
5049
|
+
const a = this.reduced ? null : this.motion(panel, [{ transform: 'none' }, { transform: 'translateX(105%)' }], { duration: 260, easing: 'ease-in' });
|
|
5050
|
+
if (a)
|
|
5051
|
+
a.finished.then(done, done);
|
|
5052
|
+
else
|
|
5053
|
+
done();
|
|
5054
|
+
this._ret?.focus?.();
|
|
5055
|
+
this.emit('close', {});
|
|
5056
|
+
}
|
|
5057
|
+
}
|
|
5058
|
+
add(item) {
|
|
5059
|
+
const id = item.id || item.name;
|
|
5060
|
+
const hit = this._items.find((i) => i.id === id);
|
|
5061
|
+
if (hit)
|
|
5062
|
+
hit.qty = (hit.qty || 1) + (item.qty || 1);
|
|
5063
|
+
else
|
|
5064
|
+
this._items.push({ ...item, id, qty: item.qty || 1 });
|
|
5065
|
+
this.render(id);
|
|
5066
|
+
}
|
|
5067
|
+
removeItem(id) {
|
|
5068
|
+
const li = Array.from(this.querySelectorAll('.usa-cd2-item')).find((n) => n.dataset.id === id) || null;
|
|
5069
|
+
this._items = this._items.filter((i) => i.id !== id);
|
|
5070
|
+
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;
|
|
5071
|
+
if (a)
|
|
5072
|
+
a.finished.then(() => this.render(null), () => this.render(null));
|
|
5073
|
+
else
|
|
5074
|
+
this.render(null);
|
|
5075
|
+
}
|
|
5076
|
+
render(changed) {
|
|
5077
|
+
const cur = this.str('currency', '$');
|
|
5078
|
+
const list = this.querySelector('.usa-cd2-list');
|
|
5079
|
+
const old = new Map(Array.from(list.children).map((li) => [li.dataset.id, li]));
|
|
5080
|
+
for (const it of this._items) {
|
|
5081
|
+
let li = old.get(it.id);
|
|
5082
|
+
old.delete(it.id);
|
|
5083
|
+
const isNew = !li;
|
|
5084
|
+
if (!li) {
|
|
5085
|
+
li = document.createElement('li');
|
|
5086
|
+
li.className = 'usa-cd2-item';
|
|
5087
|
+
li.dataset.id = it.id;
|
|
5088
|
+
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>`;
|
|
5089
|
+
if (it.img)
|
|
5090
|
+
li.querySelector('img').setAttribute('src', it.img);
|
|
5091
|
+
}
|
|
5092
|
+
li.querySelector('.usa-cd2-name').textContent = it.name;
|
|
5093
|
+
li.querySelector('.usa-cd2-qty').textContent = `×${it.qty || 1}`;
|
|
5094
|
+
li.querySelector('.usa-cd2-price').textContent = `${cur}${((it.price || 0) * (it.qty || 1)).toFixed(2)}`;
|
|
5095
|
+
const rm = li.querySelector('.usa-cd2-rm');
|
|
5096
|
+
rm.dataset.rm = it.id;
|
|
5097
|
+
rm.setAttribute('aria-label', `Remove ${it.name}`);
|
|
5098
|
+
list.appendChild(li);
|
|
5099
|
+
if (changed === it.id && !this.reduced)
|
|
5100
|
+
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)' });
|
|
5101
|
+
}
|
|
5102
|
+
old.forEach((li) => li.remove());
|
|
5103
|
+
const n = this.count;
|
|
5104
|
+
const badge = this.querySelector('.usa-cd2-badge');
|
|
5105
|
+
badge.textContent = n ? String(n) : '';
|
|
5106
|
+
this.querySelector('.usa-cd2-toggle').setAttribute('aria-label', `${this.str('label', 'Cart')}, ${n} item${n === 1 ? '' : 's'}`);
|
|
5107
|
+
if (changed && !this.reduced)
|
|
5108
|
+
this.motion(badge, [{ transform: 'scale(1)' }, { transform: 'scale(1.5)', offset: 0.4 }, { transform: 'scale(1)' }], { duration: 420, easing: 'ease-out' });
|
|
5109
|
+
this.querySelector('.usa-cd2-empty').hidden = !!this._items.length;
|
|
5110
|
+
const tot = this.querySelector('.usa-cd2-total');
|
|
5111
|
+
const to = this.total;
|
|
5112
|
+
const from = Number(tot.dataset.v || 0);
|
|
5113
|
+
tot.dataset.v = String(to);
|
|
5114
|
+
if (this.reduced || from === to || typeof requestAnimationFrame !== 'function')
|
|
5115
|
+
tot.textContent = `${cur}${to.toFixed(2)}`;
|
|
5116
|
+
else {
|
|
5117
|
+
const t0 = performance.now();
|
|
5118
|
+
const f = (now) => {
|
|
5119
|
+
const k = Math.min(1, (now - t0) / 500);
|
|
5120
|
+
tot.textContent = `${cur}${(from + (to - from) * (1 - Math.pow(1 - k, 3))).toFixed(2)}`;
|
|
5121
|
+
if (k < 1)
|
|
5122
|
+
requestAnimationFrame(f);
|
|
5123
|
+
};
|
|
5124
|
+
requestAnimationFrame(f);
|
|
5125
|
+
}
|
|
5126
|
+
this.emit('change', { items: this.items, total: to });
|
|
5127
|
+
}
|
|
5128
|
+
}
|
|
5129
|
+
return UsaCartDrawer;
|
|
5130
|
+
}, { id: 'cart-drawer', text: css$6 });
|
|
5131
|
+
}
|
|
5132
|
+
|
|
5133
|
+
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}}";
|
|
5134
|
+
|
|
5135
|
+
/** Wrap an index into 0..n-1 (7.3). */
|
|
5136
|
+
const wrapIndex = (i, n) => (n ? ((i % n) + n) % n : 0);
|
|
5137
|
+
function defineProductGallery(tag = 'usa-product-gallery') {
|
|
5138
|
+
return base.defineElement(tag, (Base) => {
|
|
5139
|
+
class UsaProductGallery extends Base {
|
|
5140
|
+
constructor() {
|
|
5141
|
+
super(...arguments);
|
|
5142
|
+
this._i = 0;
|
|
5143
|
+
this._imgs = [];
|
|
5144
|
+
}
|
|
5145
|
+
static get observedAttributes() {
|
|
5146
|
+
return ['index'];
|
|
5147
|
+
}
|
|
5148
|
+
get count() {
|
|
5149
|
+
return this._imgs.length;
|
|
5150
|
+
}
|
|
5151
|
+
get index() {
|
|
5152
|
+
return this._i;
|
|
5153
|
+
}
|
|
5154
|
+
set index(v) {
|
|
5155
|
+
this.go(v);
|
|
5156
|
+
}
|
|
5157
|
+
mount() {
|
|
5158
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
5159
|
+
this._imgs = Array.from(this.querySelectorAll(':scope > img'));
|
|
5160
|
+
this._imgs.forEach((im) => (im.hidden = true));
|
|
5161
|
+
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>');
|
|
5162
|
+
const thumbs = this.querySelector('.usa-pg2-thumbs');
|
|
5163
|
+
this._imgs.forEach((im, i) => {
|
|
5164
|
+
const b = document.createElement('button');
|
|
5165
|
+
b.type = 'button';
|
|
5166
|
+
b.className = 'usa-pg2-thumb';
|
|
5167
|
+
b.setAttribute('role', 'tab');
|
|
5168
|
+
b.setAttribute('aria-label', im.alt || `Image ${i + 1}`);
|
|
5169
|
+
b.innerHTML = `<img alt="" src="${im.getAttribute('src') || ''}">`;
|
|
5170
|
+
this.listen(b, 'click', () => this.go(i));
|
|
5171
|
+
thumbs.appendChild(b);
|
|
5172
|
+
});
|
|
5173
|
+
thumbs.insertAdjacentHTML('beforeend', '<i class="usa-pg2-ring" aria-hidden="true"></i>');
|
|
5174
|
+
const stage = this.querySelector('.usa-pg2-stage');
|
|
5175
|
+
const main = this.querySelector('.usa-pg2-main');
|
|
5176
|
+
this.listen(stage, 'keydown', (e) => {
|
|
5177
|
+
if (e.key === 'ArrowRight')
|
|
5178
|
+
(this.next(), e.preventDefault());
|
|
5179
|
+
if (e.key === 'ArrowLeft')
|
|
5180
|
+
(this.prev(), e.preventDefault());
|
|
5181
|
+
});
|
|
5182
|
+
this.listen(thumbs, 'keydown', (e) => {
|
|
5183
|
+
if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
|
|
5184
|
+
e.key === 'ArrowRight' ? this.next() : this.prev();
|
|
5185
|
+
thumbs.children[this._i]?.focus();
|
|
5186
|
+
e.preventDefault();
|
|
5187
|
+
}
|
|
5188
|
+
});
|
|
5189
|
+
let sx = 0;
|
|
5190
|
+
this.listen(stage, 'pointerdown', (e) => (sx = e.clientX));
|
|
5191
|
+
this.listen(stage, 'pointerup', (e) => {
|
|
5192
|
+
const dx = e.clientX - sx;
|
|
5193
|
+
if (e.pointerType !== 'mouse' && Math.abs(dx) > 40)
|
|
5194
|
+
dx < 0 ? this.next() : this.prev();
|
|
5195
|
+
});
|
|
5196
|
+
this.listen(stage, 'pointermove', (e) => {
|
|
5197
|
+
if (e.pointerType !== 'mouse' || this.reduced || this.flag('nozoom'))
|
|
5198
|
+
return;
|
|
5199
|
+
const r = stage.getBoundingClientRect();
|
|
5200
|
+
main.style.transformOrigin = `${(((e.clientX - r.left) / r.width) * 100).toFixed(1)}% ${(((e.clientY - r.top) / r.height) * 100).toFixed(1)}%`;
|
|
5201
|
+
main.style.transform = `scale(${this.num('zoom', 2)})`;
|
|
5202
|
+
});
|
|
5203
|
+
this.listen(stage, 'pointerleave', () => (main.style.transform = ''));
|
|
5204
|
+
this._i = wrapIndex(this.num('index', 0), this.count);
|
|
5205
|
+
this.paint(0);
|
|
5206
|
+
}
|
|
5207
|
+
changed() {
|
|
5208
|
+
if (this.isConnected && this._imgs.length)
|
|
5209
|
+
this.go(this.num('index', 0));
|
|
5210
|
+
}
|
|
5211
|
+
go(i) {
|
|
5212
|
+
const n = wrapIndex(Math.round(i), this.count);
|
|
5213
|
+
if (n === this._i)
|
|
5214
|
+
return;
|
|
5215
|
+
const dir = n > this._i ? 1 : -1;
|
|
5216
|
+
this._i = n;
|
|
5217
|
+
this.paint(dir);
|
|
5218
|
+
this.emit('change', { index: n });
|
|
5219
|
+
}
|
|
5220
|
+
next() {
|
|
5221
|
+
this.go(wrapIndex(this._i + 1, this.count));
|
|
5222
|
+
}
|
|
5223
|
+
prev() {
|
|
5224
|
+
this.go(wrapIndex(this._i - 1, this.count));
|
|
5225
|
+
}
|
|
5226
|
+
paint(dir) {
|
|
5227
|
+
const im = this._imgs[this._i];
|
|
5228
|
+
const main = this.querySelector('.usa-pg2-main');
|
|
5229
|
+
if (!im || !main)
|
|
5230
|
+
return;
|
|
5231
|
+
main.src = im.getAttribute('src') || '';
|
|
5232
|
+
main.alt = im.alt;
|
|
5233
|
+
this.querySelector('.usa-pg2-stage').setAttribute('aria-label', `Image ${this._i + 1} of ${this.count}${im.alt ? `: ${im.alt}` : ''}`);
|
|
5234
|
+
const thumbs = Array.from(this.querySelectorAll('.usa-pg2-thumb'));
|
|
5235
|
+
thumbs.forEach((t, k) => (t.setAttribute('aria-selected', String(k === this._i)), (t.tabIndex = k === this._i ? 0 : -1)));
|
|
5236
|
+
const t = thumbs[this._i];
|
|
5237
|
+
const ring = this.querySelector('.usa-pg2-ring');
|
|
5238
|
+
if (t && ring) {
|
|
5239
|
+
ring.style.transform = `translateX(${t.offsetLeft}px)`;
|
|
5240
|
+
ring.style.width = `${t.offsetWidth || 56}px`;
|
|
5241
|
+
}
|
|
5242
|
+
if (dir && !this.reduced)
|
|
5243
|
+
this.motion(main, [{ transform: `translateX(${dir * 18}%)`, opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: 380, easing: 'cubic-bezier(.2,.8,.2,1)' });
|
|
5244
|
+
}
|
|
5245
|
+
}
|
|
5246
|
+
return UsaProductGallery;
|
|
5247
|
+
}, { id: 'product-gallery', text: css$5 });
|
|
5248
|
+
}
|
|
5249
|
+
|
|
5250
|
+
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)}";
|
|
5251
|
+
|
|
5252
|
+
/** Split seconds into d/h/m/s (7.3). */
|
|
5253
|
+
function splitTime(sec) {
|
|
5254
|
+
const t = Math.max(0, Math.floor(sec));
|
|
5255
|
+
return { d: Math.floor(t / 86400), h: Math.floor((t % 86400) / 3600), m: Math.floor((t % 3600) / 60), s: t % 60 };
|
|
5256
|
+
}
|
|
5257
|
+
const NAMES = { d: 'days', h: 'hours', m: 'minutes', s: 'seconds' };
|
|
5258
|
+
function defineCountdown(tag = 'usa-countdown') {
|
|
5259
|
+
return base.defineElement(tag, (Base) => {
|
|
5260
|
+
class UsaCountdown extends Base {
|
|
5261
|
+
constructor() {
|
|
5262
|
+
super(...arguments);
|
|
5263
|
+
this._end = 0;
|
|
5264
|
+
this._timer = 0;
|
|
5265
|
+
this._lastMin = -1;
|
|
5266
|
+
}
|
|
5267
|
+
static get observedAttributes() {
|
|
5268
|
+
return ['to', 'seconds'];
|
|
5269
|
+
}
|
|
5270
|
+
get left() {
|
|
5271
|
+
return Math.max(0, Math.round((this._end - Date.now()) / 1000));
|
|
5272
|
+
}
|
|
5273
|
+
mount() {
|
|
5274
|
+
const units = this.str('units', 'd,h,m,s').split(',').map((u) => u.trim()).filter((u) => u in NAMES);
|
|
5275
|
+
const labels = this.str('labels', '').split(',');
|
|
5276
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
5277
|
+
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>`);
|
|
5278
|
+
this.setAttribute('role', 'timer');
|
|
5279
|
+
this.reset();
|
|
5280
|
+
this.onCleanup(() => this.stop());
|
|
5281
|
+
this.start();
|
|
5282
|
+
}
|
|
5283
|
+
changed() {
|
|
5284
|
+
if (this.isConnected)
|
|
5285
|
+
(this.reset(), this.start());
|
|
5286
|
+
}
|
|
5287
|
+
reset() {
|
|
5288
|
+
const to = this.str('to', '');
|
|
5289
|
+
const t = to ? Date.parse(to) : NaN;
|
|
5290
|
+
this._end = Number.isFinite(t) ? t : Date.now() + this.num('seconds', 60) * 1000;
|
|
5291
|
+
this._lastMin = -1;
|
|
5292
|
+
this.removeAttribute('data-done');
|
|
5293
|
+
this.paint(false);
|
|
5294
|
+
}
|
|
5295
|
+
start() {
|
|
5296
|
+
this.stop();
|
|
5297
|
+
this._timer = setInterval(() => this.paint(true), 1000);
|
|
5298
|
+
}
|
|
5299
|
+
stop() {
|
|
5300
|
+
if (this._timer)
|
|
5301
|
+
clearInterval(this._timer);
|
|
5302
|
+
this._timer = 0;
|
|
5303
|
+
}
|
|
5304
|
+
paint(flip) {
|
|
5305
|
+
const left = this.left;
|
|
5306
|
+
const t = splitTime(left);
|
|
5307
|
+
this.querySelectorAll('.usa-cd-unit').forEach((u) => {
|
|
5308
|
+
const key = u.dataset.u;
|
|
5309
|
+
const val = String(key === 'h' && !this.querySelector('[data-u="d"]') ? t.h + t.d * 24 : t[key]).padStart(2, '0');
|
|
5310
|
+
const box = u.querySelector('.usa-cd-digits');
|
|
5311
|
+
while (box.children.length < val.length)
|
|
5312
|
+
box.insertAdjacentHTML('afterbegin', '<b class="usa-cd-d">0</b>');
|
|
5313
|
+
while (box.children.length > val.length)
|
|
5314
|
+
box.firstElementChild.remove();
|
|
5315
|
+
Array.from(box.children).forEach((d, i) => {
|
|
5316
|
+
if (d.textContent === val[i])
|
|
5317
|
+
return;
|
|
5318
|
+
d.textContent = val[i];
|
|
5319
|
+
if (flip && !this.reduced)
|
|
5320
|
+
this.motion(d, [{ transform: 'rotateX(-90deg)', filter: 'brightness(.7)' }, { transform: 'none', filter: 'none' }], { duration: 360, easing: 'cubic-bezier(.3,1.4,.6,1)' });
|
|
5321
|
+
});
|
|
5322
|
+
});
|
|
5323
|
+
const min = Math.floor(left / 60);
|
|
5324
|
+
if (min !== this._lastMin) {
|
|
5325
|
+
this._lastMin = min;
|
|
5326
|
+
this.setAttribute('aria-label', `${this.str('label', 'Time left')}: ${t.d ? `${t.d} days ` : ''}${t.h} hours ${t.m} minutes`);
|
|
5327
|
+
}
|
|
5328
|
+
if (flip)
|
|
5329
|
+
this.emit('tick', { left });
|
|
5330
|
+
if (left <= 0 && !this.hasAttribute('data-done')) {
|
|
5331
|
+
this.setAttribute('data-done', '');
|
|
5332
|
+
this.stop();
|
|
5333
|
+
this.emit('done', {});
|
|
5334
|
+
}
|
|
5335
|
+
}
|
|
5336
|
+
}
|
|
5337
|
+
return UsaCountdown;
|
|
5338
|
+
}, { id: 'countdown', text: css$4 });
|
|
5339
|
+
}
|
|
5340
|
+
|
|
5341
|
+
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}}";
|
|
5342
|
+
|
|
5343
|
+
function defineMessageList(tag = 'usa-message-list') {
|
|
5344
|
+
return base.defineElement(tag, (Base) => {
|
|
5345
|
+
class UsaMessageList extends Base {
|
|
5346
|
+
constructor() {
|
|
5347
|
+
super(...arguments);
|
|
5348
|
+
this._msgs = [];
|
|
5349
|
+
}
|
|
5350
|
+
get messages() {
|
|
5351
|
+
return this._msgs.map((m) => ({ ...m }));
|
|
5352
|
+
}
|
|
5353
|
+
mount() {
|
|
5354
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
5355
|
+
const seed = Array.from(this.querySelectorAll(':scope > p'));
|
|
5356
|
+
this._msgs = [];
|
|
5357
|
+
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>');
|
|
5358
|
+
this.querySelector('.usa-ml-list').setAttribute('aria-label', this.str('label', 'Messages'));
|
|
5359
|
+
seed.forEach((p) => {
|
|
5360
|
+
p.hidden = true;
|
|
5361
|
+
this.add({ text: p.textContent || '', me: p.hasAttribute('data-me'), from: p.dataset.from, time: p.dataset.time }, false);
|
|
5362
|
+
});
|
|
5363
|
+
const list = this.querySelector('.usa-ml-list');
|
|
5364
|
+
const pill = this.querySelector('.usa-ml-new');
|
|
5365
|
+
this.listen(list, 'scroll', () => this.atBottom() && (pill.hidden = true));
|
|
5366
|
+
this.listen(pill, 'click', () => this.toBottom(true));
|
|
5367
|
+
this.toBottom(false);
|
|
5368
|
+
}
|
|
5369
|
+
atBottom() {
|
|
5370
|
+
const l = this.querySelector('.usa-ml-list');
|
|
5371
|
+
return l.scrollHeight - l.scrollTop - l.clientHeight < 24;
|
|
5372
|
+
}
|
|
5373
|
+
toBottom(smooth) {
|
|
5374
|
+
const l = this.querySelector('.usa-ml-list');
|
|
5375
|
+
if (typeof l.scrollTo === 'function')
|
|
5376
|
+
l.scrollTo({ top: l.scrollHeight, behavior: smooth && !this.reduced ? 'smooth' : 'auto' });
|
|
5377
|
+
else
|
|
5378
|
+
l.scrollTop = l.scrollHeight;
|
|
5379
|
+
this.querySelector('.usa-ml-new').hidden = true;
|
|
5380
|
+
}
|
|
5381
|
+
add(m, animate) {
|
|
5382
|
+
const list = this.querySelector('.usa-ml-list');
|
|
5383
|
+
const stick = this.atBottom();
|
|
5384
|
+
this.typing(false);
|
|
5385
|
+
const prev = this._msgs[this._msgs.length - 1];
|
|
5386
|
+
this._msgs.push({ ...m });
|
|
5387
|
+
const li = document.createElement('li');
|
|
5388
|
+
li.className = 'usa-ml-msg';
|
|
5389
|
+
li.dataset.side = m.me ? 'right' : 'left';
|
|
5390
|
+
if (prev && !!prev.me === !!m.me && prev.from === m.from)
|
|
5391
|
+
li.dataset.grouped = '';
|
|
5392
|
+
li.innerHTML = '<span class="usa-ml-from"></span><span class="usa-ml-bubble"></span><time class="usa-ml-time"></time>';
|
|
5393
|
+
li.querySelector('.usa-ml-from').textContent = m.me ? '' : m.from || '';
|
|
5394
|
+
li.querySelector('.usa-ml-bubble').textContent = m.text;
|
|
5395
|
+
li.querySelector('.usa-ml-time').textContent = m.time || '';
|
|
5396
|
+
list.appendChild(li);
|
|
5397
|
+
if (animate && !this.reduced) {
|
|
5398
|
+
li.style.transformOrigin = m.me ? '100% 100%' : '0 100%';
|
|
5399
|
+
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)' });
|
|
5400
|
+
}
|
|
5401
|
+
if (stick || m.me)
|
|
5402
|
+
this.toBottom(animate);
|
|
5403
|
+
else
|
|
5404
|
+
this.querySelector('.usa-ml-new').hidden = false;
|
|
5405
|
+
}
|
|
5406
|
+
push(msg) {
|
|
5407
|
+
this.add(msg, true);
|
|
5408
|
+
this.emit('message', { message: { ...msg } });
|
|
5409
|
+
}
|
|
5410
|
+
typing(who) {
|
|
5411
|
+
const list = this.querySelector('.usa-ml-list');
|
|
5412
|
+
if (!list)
|
|
5413
|
+
return;
|
|
5414
|
+
list.querySelector('.usa-ml-typing')?.remove();
|
|
5415
|
+
if (who === false || who === '')
|
|
5416
|
+
return;
|
|
5417
|
+
const li = document.createElement('li');
|
|
5418
|
+
li.className = 'usa-ml-msg usa-ml-typing';
|
|
5419
|
+
li.dataset.side = 'left';
|
|
5420
|
+
li.innerHTML = '<span class="usa-ml-bubble"><i></i><i></i><i></i></span>';
|
|
5421
|
+
li.setAttribute('aria-label', `${who} is typing`);
|
|
5422
|
+
list.appendChild(li);
|
|
5423
|
+
if (this.atBottom() || list.children.length < 3)
|
|
5424
|
+
this.toBottom(false);
|
|
5425
|
+
}
|
|
5426
|
+
}
|
|
5427
|
+
return UsaMessageList;
|
|
5428
|
+
}, { id: 'message-list', text: css$3 });
|
|
5429
|
+
}
|
|
5430
|
+
|
|
5431
|
+
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}";
|
|
5432
|
+
|
|
5433
|
+
/** Parse "👍,❤️" + "3,1" into ordered [emoji, count] pairs (7.4). */
|
|
5434
|
+
function parseReactions(emojis, counts = '') {
|
|
5435
|
+
const c = counts.split(',').map((n) => Math.max(0, parseInt(n, 10) || 0));
|
|
5436
|
+
return emojis.split(',').map((e) => e.trim()).filter(Boolean).map((e, i) => [e, c[i] || 0]);
|
|
5437
|
+
}
|
|
5438
|
+
function defineReactions(tag = 'usa-reactions') {
|
|
5439
|
+
return base.defineElement(tag, (Base) => {
|
|
5440
|
+
class UsaReactions extends Base {
|
|
5441
|
+
constructor() {
|
|
5442
|
+
super(...arguments);
|
|
5443
|
+
this._c = new Map();
|
|
5444
|
+
this._mine = new Set();
|
|
5445
|
+
}
|
|
5446
|
+
get counts() {
|
|
5447
|
+
return Object.fromEntries(this._c);
|
|
5448
|
+
}
|
|
5449
|
+
get mine() {
|
|
5450
|
+
return Array.from(this._mine);
|
|
5451
|
+
}
|
|
5452
|
+
mount() {
|
|
5453
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
5454
|
+
this.setAttribute('role', 'group');
|
|
5455
|
+
if (!this.hasAttribute('aria-label'))
|
|
5456
|
+
this.setAttribute('aria-label', 'Reactions');
|
|
5457
|
+
this._c = new Map(parseReactions(this.str('emojis', '👍,❤️,😂,🎉'), this.str('counts', '')));
|
|
5458
|
+
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>');
|
|
5459
|
+
const picker = this.querySelector('.usa-rx-picker');
|
|
5460
|
+
for (const e of this.str('picker', '👍,❤️,😂,🎉,😮,😢,🔥,👀').split(',').map((s) => s.trim()).filter(Boolean)) {
|
|
5461
|
+
const b = document.createElement('button');
|
|
5462
|
+
b.type = 'button';
|
|
5463
|
+
b.textContent = e;
|
|
5464
|
+
b.setAttribute('aria-label', `React ${e}`);
|
|
5465
|
+
this.listen(b, 'click', () => (this.toggle(e, true), this.pick(false)));
|
|
5466
|
+
picker.appendChild(b);
|
|
5467
|
+
}
|
|
5468
|
+
this.listen(this.querySelector('.usa-rx-add'), 'click', () => this.pick(picker.hidden === true));
|
|
5469
|
+
this.listen(this, 'keydown', (e) => e.key === 'Escape' && this.pick(false));
|
|
5470
|
+
this.render(null);
|
|
5471
|
+
}
|
|
5472
|
+
pick(open) {
|
|
5473
|
+
const p = this.querySelector('.usa-rx-picker');
|
|
5474
|
+
p.hidden = !open;
|
|
5475
|
+
this.querySelector('.usa-rx-add').setAttribute('aria-expanded', String(open));
|
|
5476
|
+
if (open && !this.reduced)
|
|
5477
|
+
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' });
|
|
5478
|
+
}
|
|
5479
|
+
toggle(emoji, on) {
|
|
5480
|
+
const has = this._mine.has(emoji);
|
|
5481
|
+
const want = on ?? !has;
|
|
5482
|
+
if (want === has)
|
|
5483
|
+
return;
|
|
5484
|
+
const n = Math.max(0, (this._c.get(emoji) || 0) + (want ? 1 : -1));
|
|
5485
|
+
this._c.set(emoji, n);
|
|
5486
|
+
want ? this._mine.add(emoji) : this._mine.delete(emoji);
|
|
5487
|
+
this.render(emoji, want);
|
|
5488
|
+
this.emit('react', { emoji, on: want, count: n });
|
|
5489
|
+
}
|
|
5490
|
+
render(changed, up = true) {
|
|
5491
|
+
const row = this.querySelector('.usa-rx-row');
|
|
5492
|
+
for (const [e, n] of this._c) {
|
|
5493
|
+
let b = Array.from(row.children).find((x) => x.dataset.e === e);
|
|
5494
|
+
if (!b) {
|
|
5495
|
+
b = document.createElement('button');
|
|
5496
|
+
b.setAttribute('type', 'button');
|
|
5497
|
+
b.className = 'usa-rx-pill';
|
|
5498
|
+
b.dataset.e = e;
|
|
5499
|
+
b.innerHTML = '<span class="usa-rx-emo" aria-hidden="true"></span><span class="usa-rx-n" aria-hidden="true"></span>';
|
|
5500
|
+
b.querySelector('.usa-rx-emo').textContent = e;
|
|
5501
|
+
this.listen(b, 'click', () => this.toggle(e));
|
|
5502
|
+
row.appendChild(b);
|
|
5503
|
+
}
|
|
5504
|
+
b.hidden = n === 0 && !this._mine.has(e);
|
|
5505
|
+
b.setAttribute('aria-pressed', String(this._mine.has(e)));
|
|
5506
|
+
b.setAttribute('aria-label', `${e} ${n} reaction${n === 1 ? '' : 's'}`);
|
|
5507
|
+
const num = b.querySelector('.usa-rx-n');
|
|
5508
|
+
num.textContent = String(n);
|
|
5509
|
+
if (changed === e && !this.reduced) {
|
|
5510
|
+
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' });
|
|
5511
|
+
this.motion(num, [{ transform: `translateY(${up ? 10 : -10}px)`, opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: 260, easing: 'ease-out' });
|
|
5512
|
+
if (up)
|
|
5513
|
+
this.float(b, e);
|
|
5514
|
+
}
|
|
5515
|
+
}
|
|
5516
|
+
}
|
|
5517
|
+
float(b, e) {
|
|
5518
|
+
for (let i = 0; i < 3; i++) {
|
|
5519
|
+
const s = document.createElement('span');
|
|
5520
|
+
s.className = 'usa-rx-float';
|
|
5521
|
+
s.setAttribute('aria-hidden', 'true');
|
|
5522
|
+
s.textContent = e;
|
|
5523
|
+
b.appendChild(s);
|
|
5524
|
+
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' });
|
|
5525
|
+
if (a)
|
|
5526
|
+
a.finished.then(() => s.remove(), () => s.remove());
|
|
5527
|
+
else
|
|
5528
|
+
s.remove();
|
|
5529
|
+
}
|
|
5530
|
+
}
|
|
5531
|
+
}
|
|
5532
|
+
return UsaReactions;
|
|
5533
|
+
}, { id: 'reactions', text: css$2 });
|
|
5534
|
+
}
|
|
5535
|
+
|
|
5536
|
+
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}";
|
|
5537
|
+
|
|
5538
|
+
function defineNotificationBell(tag = 'usa-notification-bell') {
|
|
5539
|
+
return base.defineElement(tag, (Base) => {
|
|
5540
|
+
class UsaNotificationBell extends Base {
|
|
5541
|
+
constructor() {
|
|
5542
|
+
super(...arguments);
|
|
5543
|
+
this._n = [];
|
|
5544
|
+
this._open = false;
|
|
5545
|
+
}
|
|
5546
|
+
get unread() {
|
|
5547
|
+
return this._n.filter((n) => !n.read).length;
|
|
5548
|
+
}
|
|
5549
|
+
get notices() {
|
|
5550
|
+
return this._n.map((n) => ({ ...n }));
|
|
5551
|
+
}
|
|
5552
|
+
get open() {
|
|
5553
|
+
return this._open;
|
|
5554
|
+
}
|
|
5555
|
+
set open(v) {
|
|
5556
|
+
this.toggle(!!v);
|
|
5557
|
+
}
|
|
5558
|
+
mount() {
|
|
5559
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
5560
|
+
const seed = Array.from(this.querySelectorAll(':scope > li'));
|
|
5561
|
+
this._n = seed.map((li, i) => ({ id: `n${i}`, text: li.textContent || '', time: li.dataset.time, read: li.hasAttribute('data-read') }));
|
|
5562
|
+
seed.forEach((li) => li.remove());
|
|
5563
|
+
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>');
|
|
5564
|
+
this.querySelector('.usa-nb-panel').setAttribute('aria-label', this.str('label', 'Notifications'));
|
|
5565
|
+
this.listen(this.querySelector('.usa-nb-btn'), 'click', () => this.toggle());
|
|
5566
|
+
this.listen(this.querySelector('.usa-nb-read'), 'click', () => this.markAllRead());
|
|
5567
|
+
this.listen(this, 'keydown', (e) => e.key === 'Escape' && this._open && (this.toggle(false), this.querySelector('.usa-nb-btn').focus()));
|
|
5568
|
+
this.listen(document, 'pointerdown', (e) => this._open && !this.contains(e.target) && this.toggle(false));
|
|
5569
|
+
this.render(null);
|
|
5570
|
+
}
|
|
5571
|
+
toggle(force) {
|
|
5572
|
+
const on = force ?? !this._open;
|
|
5573
|
+
this._open = on;
|
|
5574
|
+
const p = this.querySelector('.usa-nb-panel');
|
|
5575
|
+
if (!p)
|
|
5576
|
+
return;
|
|
5577
|
+
p.hidden = !on;
|
|
5578
|
+
this.querySelector('.usa-nb-btn').setAttribute('aria-expanded', String(on));
|
|
5579
|
+
if (on && !this.reduced)
|
|
5580
|
+
this.motion(p, [{ transform: 'translateY(-8px) scale(.96)', opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: 220, easing: 'ease-out' });
|
|
5581
|
+
}
|
|
5582
|
+
ring() {
|
|
5583
|
+
if (this.reduced)
|
|
5584
|
+
return;
|
|
5585
|
+
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' });
|
|
5586
|
+
}
|
|
5587
|
+
notify(n) {
|
|
5588
|
+
const item = typeof n === 'string' ? { text: n } : { ...n };
|
|
5589
|
+
item.id = item.id || `n${Date.now().toString(36)}${this._n.length}`;
|
|
5590
|
+
item.read = !!item.read;
|
|
5591
|
+
this._n.unshift(item);
|
|
5592
|
+
this.ring();
|
|
5593
|
+
this.render(item.id);
|
|
5594
|
+
this.emit('notify', { notice: { ...item } });
|
|
5595
|
+
}
|
|
5596
|
+
markAllRead() {
|
|
5597
|
+
if (!this.unread)
|
|
5598
|
+
return;
|
|
5599
|
+
this._n.forEach((n) => (n.read = true));
|
|
5600
|
+
this.render(null);
|
|
5601
|
+
this.emit('read', {});
|
|
5602
|
+
}
|
|
5603
|
+
render(added) {
|
|
5604
|
+
const list = this.querySelector('.usa-nb-list');
|
|
5605
|
+
list.textContent = '';
|
|
5606
|
+
for (const n of this._n) {
|
|
5607
|
+
const li = document.createElement('li');
|
|
5608
|
+
li.className = 'usa-nb-item';
|
|
5609
|
+
if (!n.read)
|
|
5610
|
+
li.dataset.unread = '';
|
|
5611
|
+
li.innerHTML = '<span class="usa-nb-text"></span><time></time>';
|
|
5612
|
+
li.querySelector('.usa-nb-text').textContent = n.text;
|
|
5613
|
+
li.querySelector('time').textContent = n.time || '';
|
|
5614
|
+
list.appendChild(li);
|
|
5615
|
+
if (n.id === added && !this.reduced)
|
|
5616
|
+
this.motion(li, [{ transform: 'translateY(-100%)', opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: 320, easing: 'cubic-bezier(.2,.9,.3,1)' });
|
|
5617
|
+
}
|
|
5618
|
+
this.querySelector('.usa-nb-empty').hidden = this._n.length > 0;
|
|
5619
|
+
const u = this.unread;
|
|
5620
|
+
const badge = this.querySelector('.usa-nb-badge');
|
|
5621
|
+
const had = badge.textContent !== '';
|
|
5622
|
+
badge.textContent = u ? (u > 99 ? '99+' : String(u)) : '';
|
|
5623
|
+
this.querySelector('.usa-nb-btn').setAttribute('aria-label', `${this.str('label', 'Notifications')}${u ? `, ${u} unread` : ''}`);
|
|
5624
|
+
if (!this.reduced && added)
|
|
5625
|
+
this.motion(badge, [{ transform: 'scale(.3)' }, { transform: 'scale(1.35)', offset: 0.5 }, { transform: 'scale(1)' }], { duration: 380, easing: 'ease-out' });
|
|
5626
|
+
else if (!this.reduced && had && !u)
|
|
5627
|
+
this.motion(badge, [{ transform: 'scale(1)', opacity: 1 }, { transform: 'scale(0)', opacity: 0 }], { duration: 200 });
|
|
5628
|
+
}
|
|
5629
|
+
}
|
|
5630
|
+
return UsaNotificationBell;
|
|
5631
|
+
}, { id: 'notification-bell', text: css$1 });
|
|
5632
|
+
}
|
|
5633
|
+
|
|
5634
|
+
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}}";
|
|
5635
|
+
|
|
5636
|
+
/** Presence states (7.4). */
|
|
5637
|
+
const PRESENCE_STATES = ['online', 'away', 'busy', 'offline'];
|
|
5638
|
+
/** Initials for a display name (7.4). */
|
|
5639
|
+
const initials = (name) => name
|
|
5640
|
+
.trim()
|
|
5641
|
+
.split(/\s+/)
|
|
5642
|
+
.filter(Boolean)
|
|
5643
|
+
.slice(0, 2)
|
|
5644
|
+
.map((w) => Array.from(w)[0].toUpperCase())
|
|
5645
|
+
.join('');
|
|
5646
|
+
function definePresence(tag = 'usa-presence') {
|
|
5647
|
+
return base.defineElement(tag, (Base) => {
|
|
5648
|
+
class UsaPresence extends Base {
|
|
5649
|
+
constructor() {
|
|
5650
|
+
super(...arguments);
|
|
5651
|
+
this._prev = '';
|
|
5652
|
+
}
|
|
5653
|
+
static get observedAttributes() {
|
|
5654
|
+
return ['status', 'speaking', 'name', 'src'];
|
|
5655
|
+
}
|
|
5656
|
+
get status() {
|
|
5657
|
+
const s = this.str('status', 'offline');
|
|
5658
|
+
return PRESENCE_STATES.includes(s) ? s : 'offline';
|
|
5659
|
+
}
|
|
5660
|
+
set status(v) {
|
|
5661
|
+
this.setAttribute('status', v);
|
|
5662
|
+
}
|
|
5663
|
+
mount() {
|
|
5664
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
5665
|
+
this.insertAdjacentHTML('afterbegin', '<span class="usa-pr2-face" data-usa-part></span><i class="usa-pr2-dot" data-usa-part aria-hidden="true"></i>');
|
|
5666
|
+
this.setAttribute('role', 'img');
|
|
5667
|
+
this._prev = '';
|
|
5668
|
+
this.paint();
|
|
5669
|
+
}
|
|
5670
|
+
changed() {
|
|
5671
|
+
if (this.isConnected && this.querySelector('.usa-pr2-face'))
|
|
5672
|
+
this.paint();
|
|
5673
|
+
}
|
|
5674
|
+
paint() {
|
|
5675
|
+
const face = this.querySelector('.usa-pr2-face');
|
|
5676
|
+
const name = this.str('name', '');
|
|
5677
|
+
const src = this.str('src', '');
|
|
5678
|
+
if (src)
|
|
5679
|
+
face.innerHTML = `<img alt="" src="${src.replace(/"/g, '"')}">`;
|
|
5680
|
+
else
|
|
5681
|
+
face.textContent = initials(name) || '?';
|
|
5682
|
+
const s = this.status;
|
|
5683
|
+
this.dataset.state = s;
|
|
5684
|
+
this.setAttribute('aria-label', `${name || 'User'}, ${s}${this.flag('speaking') ? ', speaking' : ''}`);
|
|
5685
|
+
const dot = this.querySelector('.usa-pr2-dot');
|
|
5686
|
+
if (this._prev && this._prev !== s && !this.reduced) {
|
|
5687
|
+
this.motion(dot, [{ transform: 'scale(.4)' }, { transform: 'scale(1.3)', offset: 0.6 }, { transform: 'scale(1)' }], { duration: 360, easing: 'ease-out' });
|
|
5688
|
+
if (s === 'online') {
|
|
5689
|
+
const r = document.createElement('i');
|
|
5690
|
+
r.className = 'usa-pr2-ripple';
|
|
5691
|
+
r.setAttribute('aria-hidden', 'true');
|
|
5692
|
+
this.appendChild(r);
|
|
5693
|
+
const a = this.motion(r, [{ transform: 'scale(1)', opacity: 0.7 }, { transform: 'scale(3.2)', opacity: 0 }], { duration: 700, easing: 'ease-out' });
|
|
5694
|
+
if (a)
|
|
5695
|
+
a.finished.then(() => r.remove(), () => r.remove());
|
|
5696
|
+
else
|
|
5697
|
+
r.remove();
|
|
5698
|
+
}
|
|
5699
|
+
}
|
|
5700
|
+
this._prev = s;
|
|
5701
|
+
}
|
|
5702
|
+
}
|
|
5703
|
+
return UsaPresence;
|
|
5704
|
+
}, { id: 'presence', text: css });
|
|
4912
5705
|
}
|
|
4913
5706
|
|
|
4914
5707
|
/**
|
|
@@ -4935,6 +5728,8 @@ const WIDGETS = {
|
|
|
4935
5728
|
'6.9': { 'usa-date-picker': defineDatePicker, 'usa-color-picker': defineColorPicker, 'usa-file-drop': defineFileDrop, 'usa-keyframe-editor': defineKeyframeEditor },
|
|
4936
5729
|
'7.1': { 'usa-music-player': defineMusicPlayer, 'usa-volume-knob': defineVolumeKnob, 'usa-equalizer': defineEqualizer, 'usa-lyrics': defineLyrics },
|
|
4937
5730
|
'7.2': { 'usa-bar-chart': defineBarChart, 'usa-gauge': defineGauge, 'usa-sparkline': defineSparkline, 'usa-kpi': defineKpi },
|
|
5731
|
+
'7.3': { 'usa-add-to-cart': defineAddToCart, 'usa-cart-drawer': defineCartDrawer, 'usa-product-gallery': defineProductGallery, 'usa-countdown': defineCountdown },
|
|
5732
|
+
'7.4': { 'usa-message-list': defineMessageList, 'usa-reactions': defineReactions, 'usa-notification-bell': defineNotificationBell, 'usa-presence': definePresence },
|
|
4938
5733
|
};
|
|
4939
5734
|
/** Every widget tag, in release order. */
|
|
4940
5735
|
const WIDGET_TAGS = Object.values(WIDGETS).flatMap((g) => Object.keys(g));
|
|
@@ -4951,6 +5746,7 @@ exports.EQ_PRESETS = EQ_PRESETS;
|
|
|
4951
5746
|
exports.MENU_EFFECTS = MENU_EFFECTS;
|
|
4952
5747
|
exports.MODAL_EFFECTS = MODAL_EFFECTS;
|
|
4953
5748
|
exports.NAV_INDICATORS = NAV_INDICATORS;
|
|
5749
|
+
exports.PRESENCE_STATES = PRESENCE_STATES;
|
|
4954
5750
|
exports.PROGRESS_VARIANTS = PROGRESS_VARIANTS;
|
|
4955
5751
|
exports.SEGMENTED_VARIANTS = SEGMENTED_VARIANTS;
|
|
4956
5752
|
exports.SHEET_SIDES = SHEET_SIDES;
|
|
@@ -4964,10 +5760,14 @@ exports.TOGGLE_VARIANTS = TOGGLE_VARIANTS;
|
|
|
4964
5760
|
exports.WEATHER_CONDITIONS = WEATHER_CONDITIONS;
|
|
4965
5761
|
exports.WIDGETS = WIDGETS;
|
|
4966
5762
|
exports.WIDGET_TAGS = WIDGET_TAGS;
|
|
5763
|
+
exports.cartTotal = cartTotal;
|
|
5764
|
+
exports.defineAddToCart = defineAddToCart;
|
|
4967
5765
|
exports.defineBarChart = defineBarChart;
|
|
4968
5766
|
exports.defineCarousel = defineCarousel;
|
|
5767
|
+
exports.defineCartDrawer = defineCartDrawer;
|
|
4969
5768
|
exports.defineColorPicker = defineColorPicker;
|
|
4970
5769
|
exports.defineCompare = defineCompare;
|
|
5770
|
+
exports.defineCountdown = defineCountdown;
|
|
4971
5771
|
exports.defineCubeGallery = defineCubeGallery;
|
|
4972
5772
|
exports.defineDatePicker = defineDatePicker;
|
|
4973
5773
|
exports.defineDisclosure = defineDisclosure;
|
|
@@ -4982,14 +5782,19 @@ exports.defineLyrics = defineLyrics;
|
|
|
4982
5782
|
exports.defineMasonryFlow = defineMasonryFlow;
|
|
4983
5783
|
exports.defineMenu = defineMenu;
|
|
4984
5784
|
exports.defineMenuToggle = defineMenuToggle;
|
|
5785
|
+
exports.defineMessageList = defineMessageList;
|
|
4985
5786
|
exports.defineMilestones = defineMilestones;
|
|
4986
5787
|
exports.defineModal = defineModal;
|
|
4987
5788
|
exports.defineMusicPlayer = defineMusicPlayer;
|
|
4988
5789
|
exports.defineNavMorph = defineNavMorph;
|
|
5790
|
+
exports.defineNotificationBell = defineNotificationBell;
|
|
4989
5791
|
exports.defineOdometer = defineOdometer;
|
|
4990
5792
|
exports.definePagination = definePagination;
|
|
5793
|
+
exports.definePresence = definePresence;
|
|
5794
|
+
exports.defineProductGallery = defineProductGallery;
|
|
4991
5795
|
exports.defineProgressRing = defineProgressRing;
|
|
4992
5796
|
exports.definePullCord = definePullCord;
|
|
5797
|
+
exports.defineReactions = defineReactions;
|
|
4993
5798
|
exports.defineSegmented = defineSegmented;
|
|
4994
5799
|
exports.defineSheet = defineSheet;
|
|
4995
5800
|
exports.defineSkeletonReveal = defineSkeletonReveal;
|
|
@@ -5007,10 +5812,14 @@ exports.defineWeatherCard = defineWeatherCard;
|
|
|
5007
5812
|
exports.defineWidgets = defineWidgets;
|
|
5008
5813
|
exports.hexToHsv = hexToHsv;
|
|
5009
5814
|
exports.hsvToHex = hsvToHex;
|
|
5815
|
+
exports.initials = initials;
|
|
5010
5816
|
exports.monthGrid = monthGrid;
|
|
5011
5817
|
exports.pageWindow = pageWindow;
|
|
5012
5818
|
exports.parseISODate = parseISODate;
|
|
5013
5819
|
exports.parseLRC = parseLRC;
|
|
5820
|
+
exports.parseReactions = parseReactions;
|
|
5014
5821
|
exports.sparkPoints = sparkPoints;
|
|
5822
|
+
exports.splitTime = splitTime;
|
|
5015
5823
|
exports.stackToast = stackToast;
|
|
5824
|
+
exports.wrapIndex = wrapIndex;
|
|
5016
5825
|
//# sourceMappingURL=widgets.cjs.map
|