motionary 7.1.0 → 7.3.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 +32 -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-chart.cjs +158 -0
- package/dist/components/fx-chart.cjs.map +1 -0
- package/dist/components/fx-chart.d.cts +73 -0
- package/dist/components/fx-chart.d.ts +73 -0
- package/dist/components/fx-chart.js +154 -0
- package/dist/components/fx-chart.js.map +1 -0
- 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.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 +56 -1
- package/dist/components/fx2.d.ts +56 -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 +916 -70
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +158 -2
- package/dist/components/widgets.d.ts +158 -2
- package/dist/components/widgets.js +904 -71
- 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$F = "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$F });
|
|
235
238
|
}
|
|
236
239
|
|
|
237
|
-
var css$
|
|
240
|
+
var css$E = "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$E });
|
|
351
354
|
}
|
|
352
355
|
|
|
353
|
-
var css$
|
|
356
|
+
var css$D = "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$D });
|
|
422
425
|
}
|
|
423
426
|
|
|
424
|
-
var css$
|
|
427
|
+
var css$C = "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$C });
|
|
558
561
|
}
|
|
559
562
|
|
|
560
|
-
var css$
|
|
563
|
+
var css$B = "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$B });
|
|
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$A = "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$A });
|
|
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$z = "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$z });
|
|
1131
1134
|
}
|
|
1132
1135
|
|
|
1133
|
-
var css$
|
|
1136
|
+
var css$y = "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$y });
|
|
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$y });
|
|
1384
1387
|
}
|
|
1385
1388
|
|
|
1386
|
-
var css$
|
|
1389
|
+
var css$x = "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$x });
|
|
1502
1505
|
}
|
|
1503
1506
|
|
|
1504
|
-
var css$
|
|
1507
|
+
var css$w = "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$w });
|
|
1629
1632
|
}
|
|
1630
1633
|
|
|
1631
|
-
var css$
|
|
1634
|
+
var css$v = "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$v });
|
|
1720
1723
|
}
|
|
1721
1724
|
|
|
1722
|
-
var css$
|
|
1725
|
+
var css$u = "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$u });
|
|
1844
1847
|
}
|
|
1845
1848
|
|
|
1846
|
-
var css$
|
|
1849
|
+
var css$t = "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$t });
|
|
1971
1974
|
}
|
|
1972
1975
|
|
|
1973
|
-
var css$
|
|
1976
|
+
var css$s = "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$s });
|
|
2107
2110
|
}
|
|
2108
2111
|
|
|
2109
|
-
var css$
|
|
2112
|
+
var css$r = "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$r });
|
|
2178
2181
|
}
|
|
2179
2182
|
|
|
2180
|
-
var css$
|
|
2183
|
+
var css$q = "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$q });
|
|
2285
2288
|
}
|
|
2286
2289
|
|
|
2287
|
-
var css$
|
|
2290
|
+
var css$p = "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$p });
|
|
2361
2364
|
}
|
|
2362
2365
|
|
|
2363
|
-
var css$
|
|
2366
|
+
var css$o = "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$o });
|
|
2496
2499
|
}
|
|
2497
2500
|
|
|
2498
|
-
var css$
|
|
2501
|
+
var css$n = "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$n });
|
|
2596
2599
|
}
|
|
2597
2600
|
|
|
2598
|
-
var css$
|
|
2601
|
+
var css$m = "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$m });
|
|
2721
2724
|
}
|
|
2722
2725
|
|
|
2723
|
-
var css$
|
|
2726
|
+
var css$l = "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$l });
|
|
2818
2821
|
}
|
|
2819
2822
|
|
|
2820
|
-
var css$
|
|
2823
|
+
var css$k = "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$k });
|
|
2909
2912
|
}
|
|
2910
2913
|
|
|
2911
|
-
var css$
|
|
2914
|
+
var css$j = "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$j });
|
|
3117
3120
|
}
|
|
3118
3121
|
|
|
3119
|
-
var css$
|
|
3122
|
+
var css$i = "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$i });
|
|
3262
3265
|
}
|
|
3263
3266
|
|
|
3264
|
-
var css$
|
|
3267
|
+
var css$h = "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$h });
|
|
3346
3349
|
}
|
|
3347
3350
|
|
|
3348
|
-
var css$
|
|
3351
|
+
var css$g = "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$g });
|
|
3478
3481
|
}
|
|
3479
3482
|
|
|
3480
|
-
var css$
|
|
3483
|
+
var css$f = "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$f });
|
|
3630
3633
|
}
|
|
3631
3634
|
|
|
3632
|
-
var css$
|
|
3635
|
+
var css$e = "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$e });
|
|
3753
3756
|
}
|
|
3754
3757
|
|
|
3755
|
-
var css$
|
|
3758
|
+
var css$d = "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$d });
|
|
3857
3860
|
}
|
|
3858
3861
|
|
|
3859
|
-
var css$
|
|
3862
|
+
var css$c = "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$c });
|
|
4034
4037
|
}
|
|
4035
4038
|
|
|
4036
|
-
var css$
|
|
4039
|
+
var css$b = "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$b });
|
|
4198
4201
|
}
|
|
4199
4202
|
|
|
4200
|
-
var css$
|
|
4203
|
+
var css$a = "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$a });
|
|
4292
4295
|
}
|
|
4293
4296
|
|
|
4294
|
-
var css$
|
|
4297
|
+
var css$9 = "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$9 });
|
|
4393
4396
|
}
|
|
4394
4397
|
|
|
4395
|
-
var css = "usa-lyrics{--usa-ly-c:#f472b6;display:block;width:var(--usa-ly-w,320px);max-width:100%;font:700 18px/1.35 system-ui,sans-serif}.usa-ly-list{height:var(--usa-ly-h,180px);margin:0;padding:70px 0;overflow-y:auto;list-style:none;scrollbar-width:none;-webkit-mask:linear-gradient(transparent,#000 25%,#000 75%,transparent);mask:linear-gradient(transparent,#000 25%,#000 75%,transparent)}.usa-ly-list::-webkit-scrollbar{display:none}.usa-ly-line{--usa-ly-k:0;padding:5px 4px;opacity:.38;cursor:pointer;transform-origin:0 50%;transition:opacity .35s,transform .35s cubic-bezier(.3,1.3,.5,1),filter .35s;filter:blur(.4px)}.usa-ly-line[data-past]{opacity:.22}.usa-ly-line[data-active]{opacity:1;filter:none;transform:scale(1.06);color:transparent;background:linear-gradient(90deg,var(--usa-ly-c) calc(var(--usa-ly-k) * 100%),var(--usa-ly-base,#94a3b8) calc(var(--usa-ly-k) * 100%));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 18px rgba(244,114,182,.25)}@media (prefers-reduced-motion:reduce){.usa-ly-line{transition:none;transform:none!important}}";
|
|
4398
|
+
var css$8 = "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,7 +4507,835 @@ function defineLyrics(tag = 'usa-lyrics') {
|
|
|
4504
4507
|
}
|
|
4505
4508
|
}
|
|
4506
4509
|
return UsaLyrics;
|
|
4507
|
-
}, { id: 'lyrics', text: css });
|
|
4510
|
+
}, { id: 'lyrics', text: css$8 });
|
|
4511
|
+
}
|
|
4512
|
+
|
|
4513
|
+
var css$7 = "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}}";
|
|
4514
|
+
|
|
4515
|
+
function defineBarChart(tag = 'usa-bar-chart') {
|
|
4516
|
+
return base.defineElement(tag, (Base) => {
|
|
4517
|
+
class UsaBarChart extends Base {
|
|
4518
|
+
constructor() {
|
|
4519
|
+
super(...arguments);
|
|
4520
|
+
this._data = [];
|
|
4521
|
+
this._seen = false;
|
|
4522
|
+
}
|
|
4523
|
+
static get observedAttributes() {
|
|
4524
|
+
return ['horizontal', 'unit', 'max'];
|
|
4525
|
+
}
|
|
4526
|
+
get data() {
|
|
4527
|
+
return this._data.map((d) => ({ ...d }));
|
|
4528
|
+
}
|
|
4529
|
+
set data(v) {
|
|
4530
|
+
this._data = (v || []).map((d) => ({ label: String(d.label), value: Number(d.value) || 0 }));
|
|
4531
|
+
if (this.isConnected)
|
|
4532
|
+
this.render(true);
|
|
4533
|
+
}
|
|
4534
|
+
mount() {
|
|
4535
|
+
if (!this._data.length) {
|
|
4536
|
+
const kids = Array.from(this.querySelectorAll(':scope > data'));
|
|
4537
|
+
if (kids.length)
|
|
4538
|
+
this._data = kids.map((k) => ({ label: k.textContent?.trim() || '', value: Number(k.getAttribute('value')) || 0 }));
|
|
4539
|
+
else {
|
|
4540
|
+
const vals = this.str('values', '').split(',').map(Number);
|
|
4541
|
+
const labels = this.str('labels', '').split(',');
|
|
4542
|
+
this._data = vals.filter(Number.isFinite).map((v, i) => ({ label: (labels[i] || String(i + 1)).trim(), value: v }));
|
|
4543
|
+
}
|
|
4544
|
+
}
|
|
4545
|
+
this.querySelectorAll(':scope > data').forEach((d) => (d.hidden = true));
|
|
4546
|
+
this.dataset.dir = this.flag('horizontal') ? 'h' : 'v';
|
|
4547
|
+
this.render(false);
|
|
4548
|
+
this.inView((vis) => {
|
|
4549
|
+
if (!vis || this._seen)
|
|
4550
|
+
return;
|
|
4551
|
+
this._seen = true;
|
|
4552
|
+
if (this.reduced)
|
|
4553
|
+
return;
|
|
4554
|
+
this.querySelectorAll('.usa-bc-bar').forEach((b, i) => this.motion(b, [{ transform: this.dataset.dir === 'h' ? 'scaleX(0)' : 'scaleY(0)' }, { transform: 'none' }], { duration: 700, delay: i * 70, easing: 'cubic-bezier(.2,.8,.3,1.1)', fill: 'backwards' }));
|
|
4555
|
+
});
|
|
4556
|
+
}
|
|
4557
|
+
render(glide) {
|
|
4558
|
+
let list = this.querySelector(':scope > .usa-bc-list');
|
|
4559
|
+
if (!list) {
|
|
4560
|
+
list = document.createElement('ul');
|
|
4561
|
+
list.className = 'usa-bc-list';
|
|
4562
|
+
list.setAttribute('data-usa-part', '');
|
|
4563
|
+
this.appendChild(list);
|
|
4564
|
+
}
|
|
4565
|
+
const max = this.num('max', 0) || Math.max(1, ...this._data.map((d) => d.value));
|
|
4566
|
+
const unit = this.str('unit', '');
|
|
4567
|
+
const old = new Map(Array.from(list.children).map((li) => [li.dataset.label, li]));
|
|
4568
|
+
const next = [];
|
|
4569
|
+
for (const d of this._data) {
|
|
4570
|
+
let li = old.get(d.label);
|
|
4571
|
+
const isNew = !li;
|
|
4572
|
+
if (!li) {
|
|
4573
|
+
li = document.createElement('li');
|
|
4574
|
+
li.className = 'usa-bc-item';
|
|
4575
|
+
li.dataset.label = d.label;
|
|
4576
|
+
li.innerHTML = '<span class="usa-bc-track"><span class="usa-bc-bar"></span></span><span class="usa-bc-val"></span><span class="usa-bc-label"></span>';
|
|
4577
|
+
li.querySelector('.usa-bc-label').textContent = d.label;
|
|
4578
|
+
}
|
|
4579
|
+
old.delete(d.label);
|
|
4580
|
+
const k = Math.max(0, Math.min(1, d.value / max));
|
|
4581
|
+
li.style.setProperty('--usa-bc-k', k.toFixed(4));
|
|
4582
|
+
li.querySelector('.usa-bc-val').textContent = `${d.value.toLocaleString()}${unit}`;
|
|
4583
|
+
li.setAttribute('aria-label', `${d.label}: ${d.value.toLocaleString()}${unit}`);
|
|
4584
|
+
li.toggleAttribute('data-glide', glide && !this.reduced);
|
|
4585
|
+
if (isNew && glide && !this.reduced)
|
|
4586
|
+
this.motion(li.querySelector('.usa-bc-bar'), [{ transform: this.dataset.dir === 'h' ? 'scaleX(0)' : 'scaleY(0)' }, { transform: 'none' }], { duration: 500, easing: 'ease-out' });
|
|
4587
|
+
next.push(li);
|
|
4588
|
+
}
|
|
4589
|
+
old.forEach((li) => {
|
|
4590
|
+
if (this.reduced || !glide)
|
|
4591
|
+
return li.remove();
|
|
4592
|
+
const a = this.motion(li, [{ opacity: 1, transform: 'none' }, { opacity: 0, transform: 'scale(.6)' }], { duration: 300, fill: 'forwards' });
|
|
4593
|
+
if (a)
|
|
4594
|
+
a.finished.then(() => li.remove(), () => li.remove());
|
|
4595
|
+
else
|
|
4596
|
+
li.remove();
|
|
4597
|
+
});
|
|
4598
|
+
next.forEach((li) => list.appendChild(li));
|
|
4599
|
+
this.setAttribute('role', 'figure');
|
|
4600
|
+
if (!this.hasAttribute('aria-label'))
|
|
4601
|
+
this.setAttribute('aria-label', this.str('label', 'Bar chart'));
|
|
4602
|
+
list.setAttribute('role', 'list');
|
|
4603
|
+
next.forEach((li) => li.setAttribute('role', 'listitem'));
|
|
4604
|
+
}
|
|
4605
|
+
}
|
|
4606
|
+
return UsaBarChart;
|
|
4607
|
+
}, { id: 'bar-chart', text: css$7 });
|
|
4608
|
+
}
|
|
4609
|
+
|
|
4610
|
+
var css$6 = "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)}";
|
|
4611
|
+
|
|
4612
|
+
function defineGauge(tag = 'usa-gauge') {
|
|
4613
|
+
return base.defineElement(tag, (Base) => {
|
|
4614
|
+
class UsaGauge extends Base {
|
|
4615
|
+
constructor() {
|
|
4616
|
+
super(...arguments);
|
|
4617
|
+
this._v = 0;
|
|
4618
|
+
this._shown = 0;
|
|
4619
|
+
this._vel = 0;
|
|
4620
|
+
this._raf = 0;
|
|
4621
|
+
}
|
|
4622
|
+
static get observedAttributes() {
|
|
4623
|
+
return ['min', 'max', 'zones', 'unit', 'label'];
|
|
4624
|
+
}
|
|
4625
|
+
get value() {
|
|
4626
|
+
return this._v;
|
|
4627
|
+
}
|
|
4628
|
+
set value(v) {
|
|
4629
|
+
this._v = clampN(Number(v) || 0, this.num('min', 0), this.num('max', 100));
|
|
4630
|
+
this.setAttribute('aria-valuenow', String(this._v));
|
|
4631
|
+
this.animateTo();
|
|
4632
|
+
}
|
|
4633
|
+
mount() {
|
|
4634
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
4635
|
+
this.insertAdjacentHTML('afterbegin', '<svg class="usa-gg-svg" data-usa-part aria-hidden="true" viewBox="0 0 200 120"><path class="usa-gg-track" d="M20 100 A80 80 0 0 1 180 100"/><path class="usa-gg-arc" d="M20 100 A80 80 0 0 1 180 100" pathLength="100"/><g class="usa-gg-needle"><path d="M100 100 L96 100 L100 30 L104 100 Z"/><circle cx="100" cy="100" r="7"/></g></svg><div class="usa-gg-read" data-usa-part aria-hidden="true"><b class="usa-gg-num">0</b><span class="usa-gg-label"></span></div>');
|
|
4636
|
+
this.querySelector('.usa-gg-label').textContent = this.str('label', '');
|
|
4637
|
+
this.setAttribute('role', 'meter');
|
|
4638
|
+
this.setAttribute('aria-valuemin', String(this.num('min', 0)));
|
|
4639
|
+
this.setAttribute('aria-valuemax', String(this.num('max', 100)));
|
|
4640
|
+
if (!this.hasAttribute('aria-label'))
|
|
4641
|
+
this.setAttribute('aria-label', this.str('label', 'Gauge'));
|
|
4642
|
+
this._v = clampN(this.num('value', 0), this.num('min', 0), this.num('max', 100));
|
|
4643
|
+
this.setAttribute('aria-valuenow', String(this._v));
|
|
4644
|
+
this._shown = this.reduced ? this._v : this.num('min', 0);
|
|
4645
|
+
this.paint();
|
|
4646
|
+
this.onCleanup(() => cancelAnimationFrame(this._raf));
|
|
4647
|
+
this.inView((v) => v && this.animateTo());
|
|
4648
|
+
}
|
|
4649
|
+
/** Colour of the zone containing `v`. */
|
|
4650
|
+
zoneColor(v) {
|
|
4651
|
+
const zones = this.str('zones', '').split(',').map((z) => z.split(':')).filter((z) => z.length === 2).map(([b, c]) => [Number(b), c.trim()]).sort((a, b) => a[0] - b[0]);
|
|
4652
|
+
for (const [b, c] of zones)
|
|
4653
|
+
if (v <= b)
|
|
4654
|
+
return c;
|
|
4655
|
+
return zones.length ? zones[zones.length - 1][1] : '';
|
|
4656
|
+
}
|
|
4657
|
+
paint() {
|
|
4658
|
+
const lo = this.num('min', 0);
|
|
4659
|
+
const hi = this.num('max', 100);
|
|
4660
|
+
const k = clampN((this._shown - lo) / (hi - lo || 1), -0.05, 1.05);
|
|
4661
|
+
this.style.setProperty('--usa-gg-k', k.toFixed(4));
|
|
4662
|
+
this.style.setProperty('--usa-gg-angle', `${ -90 + k * 180}deg`);
|
|
4663
|
+
const z = this.zoneColor(this._shown);
|
|
4664
|
+
if (z)
|
|
4665
|
+
this.style.setProperty('--usa-gg-c', z);
|
|
4666
|
+
const num = this.querySelector('.usa-gg-num');
|
|
4667
|
+
if (num)
|
|
4668
|
+
num.textContent = `${Math.round(clampN(this._shown, lo, hi))}${this.str('unit', '')}`;
|
|
4669
|
+
this.setAttribute('aria-valuetext', `${Math.round(this._v)}${this.str('unit', '')}`);
|
|
4670
|
+
}
|
|
4671
|
+
animateTo() {
|
|
4672
|
+
if (this.reduced || typeof requestAnimationFrame !== 'function') {
|
|
4673
|
+
this._shown = this._v;
|
|
4674
|
+
return this.paint();
|
|
4675
|
+
}
|
|
4676
|
+
if (this._raf)
|
|
4677
|
+
return;
|
|
4678
|
+
let last = 0;
|
|
4679
|
+
const f = (now) => {
|
|
4680
|
+
const dt = last ? Math.min(0.033, (now - last) / 1000) : 1 / 60;
|
|
4681
|
+
last = now;
|
|
4682
|
+
const span = this.num('max', 100) - this.num('min', 0) || 1;
|
|
4683
|
+
this._vel += (120 * (this._v - this._shown) - 11 * this._vel) * dt;
|
|
4684
|
+
this._shown += this._vel * dt;
|
|
4685
|
+
this.paint();
|
|
4686
|
+
if (Math.abs(this._v - this._shown) / span > 0.0005 || Math.abs(this._vel) / span > 0.002)
|
|
4687
|
+
this._raf = requestAnimationFrame(f);
|
|
4688
|
+
else
|
|
4689
|
+
((this._raf = 0), (this._shown = this._v), (this._vel = 0), this.paint());
|
|
4690
|
+
};
|
|
4691
|
+
this._raf = requestAnimationFrame(f);
|
|
4692
|
+
}
|
|
4693
|
+
}
|
|
4694
|
+
return UsaGauge;
|
|
4695
|
+
}, { id: 'gauge', text: css$6 });
|
|
4696
|
+
}
|
|
4697
|
+
|
|
4698
|
+
var css$5 = "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}}";
|
|
4699
|
+
|
|
4700
|
+
const SPARK_VARIANTS = ['line', 'area', 'bars'];
|
|
4701
|
+
/** Map values to SVG points in a w×h box (with padding). */
|
|
4702
|
+
function sparkPoints(vals, w = 100, h = 30, pad = 3) {
|
|
4703
|
+
if (!vals.length)
|
|
4704
|
+
return [];
|
|
4705
|
+
const lo = Math.min(...vals);
|
|
4706
|
+
const hi = Math.max(...vals);
|
|
4707
|
+
const span = hi - lo || 1;
|
|
4708
|
+
return vals.map((v, i) => [vals.length === 1 ? w / 2 : pad + (i / (vals.length - 1)) * (w - pad * 2), h - pad - ((v - lo) / span) * (h - pad * 2)]);
|
|
4709
|
+
}
|
|
4710
|
+
function defineSparkline(tag = 'usa-sparkline') {
|
|
4711
|
+
return base.defineElement(tag, (Base) => {
|
|
4712
|
+
class UsaSparkline extends Base {
|
|
4713
|
+
constructor() {
|
|
4714
|
+
super(...arguments);
|
|
4715
|
+
this._data = [];
|
|
4716
|
+
this._drawn = false;
|
|
4717
|
+
this._raf = 0;
|
|
4718
|
+
}
|
|
4719
|
+
static get observedAttributes() {
|
|
4720
|
+
return ['variant', 'color'];
|
|
4721
|
+
}
|
|
4722
|
+
get data() {
|
|
4723
|
+
return this._data.slice();
|
|
4724
|
+
}
|
|
4725
|
+
set data(v) {
|
|
4726
|
+
const from = sparkPoints(this._data);
|
|
4727
|
+
this._data = (v || []).map(Number).filter(Number.isFinite);
|
|
4728
|
+
if (this.isConnected)
|
|
4729
|
+
this.render(from);
|
|
4730
|
+
}
|
|
4731
|
+
mount() {
|
|
4732
|
+
if (!this._data.length)
|
|
4733
|
+
this._data = this.str('values', '').split(',').map(Number).filter(Number.isFinite);
|
|
4734
|
+
const v = this.str('variant', 'line');
|
|
4735
|
+
this.dataset.variant = SPARK_VARIANTS.includes(v) ? v : 'line';
|
|
4736
|
+
if (this.str('color', ''))
|
|
4737
|
+
this.style.setProperty('--usa-sl-c', this.str('color', ''));
|
|
4738
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
4739
|
+
this.insertAdjacentHTML('afterbegin', '<svg class="usa-sl-svg" data-usa-part viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true"><path class="usa-sl-area"/><g class="usa-sl-bars"></g><path class="usa-sl-line" pathLength="1"/><circle class="usa-sl-end" r="2.2"/><circle class="usa-sl-hover" r="2.4"/></svg><span class="usa-sl-tip" data-usa-part aria-hidden="true"></span>');
|
|
4740
|
+
this.setAttribute('role', 'img');
|
|
4741
|
+
this.listen(this, 'pointermove', (e) => this.hover(e));
|
|
4742
|
+
this.listen(this, 'pointerleave', () => this.removeAttribute('data-hover'));
|
|
4743
|
+
this.onCleanup(() => cancelAnimationFrame(this._raf));
|
|
4744
|
+
this.render(null);
|
|
4745
|
+
this.inView((vis) => {
|
|
4746
|
+
if (!vis || this._drawn)
|
|
4747
|
+
return;
|
|
4748
|
+
this._drawn = true;
|
|
4749
|
+
const line = this.querySelector('.usa-sl-line');
|
|
4750
|
+
if (line && !this.reduced)
|
|
4751
|
+
this.motion(line, [{ strokeDashoffset: 1 }, { strokeDashoffset: 0 }], { duration: 900, easing: 'cubic-bezier(.6,.05,.3,1)' });
|
|
4752
|
+
});
|
|
4753
|
+
}
|
|
4754
|
+
summary() {
|
|
4755
|
+
const d = this._data;
|
|
4756
|
+
if (!d.length)
|
|
4757
|
+
return 'No data';
|
|
4758
|
+
const a = d[0];
|
|
4759
|
+
const b = d[d.length - 1];
|
|
4760
|
+
const pct = a ? Math.round(((b - a) / Math.abs(a)) * 100) : 0;
|
|
4761
|
+
return `Trend: ${a} to ${b}${a ? `, ${pct >= 0 ? 'up' : 'down'} ${Math.abs(pct)}%` : ''}`;
|
|
4762
|
+
}
|
|
4763
|
+
paths(pts) {
|
|
4764
|
+
if (!pts.length)
|
|
4765
|
+
return { line: '', area: '' };
|
|
4766
|
+
const line = pts.map(([x, y], i) => `${i ? 'L' : 'M'}${x.toFixed(2)} ${y.toFixed(2)}`).join('');
|
|
4767
|
+
return { line, area: `${line}L${pts[pts.length - 1][0].toFixed(2)} 30L${pts[0][0].toFixed(2)} 30Z` };
|
|
4768
|
+
}
|
|
4769
|
+
render(from) {
|
|
4770
|
+
this.setAttribute('aria-label', this.str('label', '') || this.summary());
|
|
4771
|
+
const to = sparkPoints(this._data);
|
|
4772
|
+
const apply = (pts) => {
|
|
4773
|
+
const { line, area } = this.paths(pts);
|
|
4774
|
+
this.querySelector('.usa-sl-line')?.setAttribute('d', line);
|
|
4775
|
+
this.querySelector('.usa-sl-area')?.setAttribute('d', area);
|
|
4776
|
+
const end = pts[pts.length - 1];
|
|
4777
|
+
const c = this.querySelector('.usa-sl-end');
|
|
4778
|
+
if (end && c)
|
|
4779
|
+
(c.setAttribute('cx', end[0].toFixed(2)), c.setAttribute('cy', end[1].toFixed(2)));
|
|
4780
|
+
};
|
|
4781
|
+
const bars = this.querySelector('.usa-sl-bars');
|
|
4782
|
+
if (bars) {
|
|
4783
|
+
const lo = Math.min(0, ...this._data);
|
|
4784
|
+
const hi = Math.max(...this._data, 1);
|
|
4785
|
+
const w = 100 / Math.max(1, this._data.length);
|
|
4786
|
+
bars.innerHTML = this._data.map((v, i) => `<rect x="${(i * w + w * 0.15).toFixed(2)}" width="${(w * 0.7).toFixed(2)}" y="${(30 - ((v - lo) / (hi - lo || 1)) * 28).toFixed(2)}" height="${(((v - lo) / (hi - lo || 1)) * 28).toFixed(2)}" rx="1"/>`).join('');
|
|
4787
|
+
}
|
|
4788
|
+
if (!from || from.length !== to.length || this.reduced || typeof requestAnimationFrame !== 'function')
|
|
4789
|
+
return apply(to);
|
|
4790
|
+
cancelAnimationFrame(this._raf);
|
|
4791
|
+
const t0 = performance.now();
|
|
4792
|
+
const f = (now) => {
|
|
4793
|
+
const k = Math.min(1, (now - t0) / 500);
|
|
4794
|
+
const e = 1 - Math.pow(1 - k, 3);
|
|
4795
|
+
apply(to.map(([x, y], i) => [from[i][0] + (x - from[i][0]) * e, from[i][1] + (y - from[i][1]) * e]));
|
|
4796
|
+
if (k < 1)
|
|
4797
|
+
this._raf = requestAnimationFrame(f);
|
|
4798
|
+
};
|
|
4799
|
+
this._raf = requestAnimationFrame(f);
|
|
4800
|
+
}
|
|
4801
|
+
hover(e) {
|
|
4802
|
+
if (!this._data.length)
|
|
4803
|
+
return;
|
|
4804
|
+
const r = this.getBoundingClientRect();
|
|
4805
|
+
const pts = sparkPoints(this._data);
|
|
4806
|
+
const x = ((e.clientX - r.left) / (r.width || 1)) * 100;
|
|
4807
|
+
let i = 0;
|
|
4808
|
+
pts.forEach(([px], j) => Math.abs(px - x) < Math.abs(pts[i][0] - x) && (i = j));
|
|
4809
|
+
const c = this.querySelector('.usa-sl-hover');
|
|
4810
|
+
c?.setAttribute('cx', pts[i][0].toFixed(2));
|
|
4811
|
+
c?.setAttribute('cy', pts[i][1].toFixed(2));
|
|
4812
|
+
const tip = this.querySelector('.usa-sl-tip');
|
|
4813
|
+
if (tip) {
|
|
4814
|
+
tip.textContent = String(this._data[i]);
|
|
4815
|
+
tip.style.left = `${pts[i][0]}%`;
|
|
4816
|
+
}
|
|
4817
|
+
this.toggleAttribute('data-hover', true);
|
|
4818
|
+
}
|
|
4819
|
+
}
|
|
4820
|
+
return UsaSparkline;
|
|
4821
|
+
}, { id: 'sparkline', text: css$5 });
|
|
4822
|
+
}
|
|
4823
|
+
|
|
4824
|
+
/** Parse a figure like "$12.4k" / "−3.5%" / "1,204" → number + prefix / suffix / decimals (7.2). */
|
|
4825
|
+
function parseFigureText(s) {
|
|
4826
|
+
const m = /^(\D*?)([-−]?[\d,]*\.?\d+)(.*)$/.exec(String(s).trim());
|
|
4827
|
+
if (!m)
|
|
4828
|
+
return null;
|
|
4829
|
+
const raw = m[2].replace(/,/g, '').replace('−', '-');
|
|
4830
|
+
const n = Number(raw);
|
|
4831
|
+
return Number.isFinite(n) ? { n, pre: m[1], post: m[3], dec: (raw.split('.')[1] || '').length } : null;
|
|
4832
|
+
}
|
|
4833
|
+
|
|
4834
|
+
var css$4 = "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}";
|
|
4835
|
+
|
|
4836
|
+
function defineKpi(tag = 'usa-kpi') {
|
|
4837
|
+
return base.defineElement(tag, (Base) => {
|
|
4838
|
+
class UsaKpi extends Base {
|
|
4839
|
+
constructor() {
|
|
4840
|
+
super(...arguments);
|
|
4841
|
+
this._shown = 0;
|
|
4842
|
+
this._raf = 0;
|
|
4843
|
+
this._seen = false;
|
|
4844
|
+
}
|
|
4845
|
+
static get observedAttributes() {
|
|
4846
|
+
return ['label', 'delta', 'caption', 'trend', 'invert'];
|
|
4847
|
+
}
|
|
4848
|
+
get value() {
|
|
4849
|
+
return this.str('value', '0');
|
|
4850
|
+
}
|
|
4851
|
+
set value(v) {
|
|
4852
|
+
const prev = this._shown;
|
|
4853
|
+
this.setAttribute('value', String(v));
|
|
4854
|
+
this.roll(prev, true);
|
|
4855
|
+
}
|
|
4856
|
+
mount() {
|
|
4857
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
4858
|
+
const delta = this.str('delta', '');
|
|
4859
|
+
const neg = /^\s*[-−]/.test(delta);
|
|
4860
|
+
const good = this.flag('invert') ? neg : !neg;
|
|
4861
|
+
this.insertAdjacentHTML('afterbegin', `<span class="usa-kpi-label" data-usa-part></span><b class="usa-kpi-value" data-usa-part></b>${delta ? `<span class="usa-kpi-delta" data-usa-part data-good="${good}"><i aria-hidden="true">${neg ? '▼' : '▲'}</i><span></span></span>` : ''}${this.str('trend', '') ? `<usa-sparkline class="usa-kpi-trend" data-usa-part variant="area" values="${this.str('trend', '')}" aria-hidden="true"></usa-sparkline>` : ''}<span class="usa-kpi-caption" data-usa-part></span>`);
|
|
4862
|
+
this.querySelector('.usa-kpi-label').textContent = this.str('label', '');
|
|
4863
|
+
this.querySelector('.usa-kpi-caption').textContent = this.str('caption', '');
|
|
4864
|
+
const ds = this.querySelector('.usa-kpi-delta span');
|
|
4865
|
+
if (ds)
|
|
4866
|
+
ds.textContent = delta;
|
|
4867
|
+
this.setAttribute('role', 'group');
|
|
4868
|
+
this.setAttribute('aria-label', [this.str('label', ''), this.value, delta && `(${delta})`, this.str('caption', '')].filter(Boolean).join(' '));
|
|
4869
|
+
this.onCleanup(() => cancelAnimationFrame(this._raf));
|
|
4870
|
+
const f = parseFigureText(this.value);
|
|
4871
|
+
this._shown = this.reduced || !f ? (f?.n ?? 0) : 0;
|
|
4872
|
+
this.write(this._shown);
|
|
4873
|
+
this.inView((vis) => {
|
|
4874
|
+
if (!vis || this._seen)
|
|
4875
|
+
return;
|
|
4876
|
+
this._seen = true;
|
|
4877
|
+
this.roll(0, false);
|
|
4878
|
+
const d = this.querySelector('.usa-kpi-delta');
|
|
4879
|
+
if (d && !this.reduced)
|
|
4880
|
+
this.motion(d, [{ transform: 'translateY(8px)', opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: 420, delay: 500, easing: 'cubic-bezier(.2,.9,.3,1.2)', fill: 'backwards' });
|
|
4881
|
+
});
|
|
4882
|
+
}
|
|
4883
|
+
write(n) {
|
|
4884
|
+
const f = parseFigureText(this.value);
|
|
4885
|
+
const el = this.querySelector('.usa-kpi-value');
|
|
4886
|
+
if (!el)
|
|
4887
|
+
return;
|
|
4888
|
+
el.textContent = f ? f.pre + n.toLocaleString(this.str('locale', '') || undefined, { minimumFractionDigits: f.dec, maximumFractionDigits: f.dec }) + f.post : this.value;
|
|
4889
|
+
}
|
|
4890
|
+
roll(from, flash) {
|
|
4891
|
+
const f = parseFigureText(this.value);
|
|
4892
|
+
if (!f)
|
|
4893
|
+
return this.write(0);
|
|
4894
|
+
const to = f.n;
|
|
4895
|
+
if (this.reduced || typeof requestAnimationFrame !== 'function') {
|
|
4896
|
+
this._shown = to;
|
|
4897
|
+
return this.write(to);
|
|
4898
|
+
}
|
|
4899
|
+
cancelAnimationFrame(this._raf);
|
|
4900
|
+
const t0 = performance.now();
|
|
4901
|
+
const step = (now) => {
|
|
4902
|
+
const k = Math.min(1, (now - t0) / 1100);
|
|
4903
|
+
this._shown = from + (to - from) * (1 - Math.pow(1 - k, 3));
|
|
4904
|
+
this.write(this._shown);
|
|
4905
|
+
if (k < 1)
|
|
4906
|
+
this._raf = requestAnimationFrame(step);
|
|
4907
|
+
};
|
|
4908
|
+
this._raf = requestAnimationFrame(step);
|
|
4909
|
+
if (flash)
|
|
4910
|
+
this.motion(this, [{ boxShadow: '0 0 0 0 rgba(124,92,255,.5)' }, { boxShadow: '0 0 0 10px rgba(124,92,255,0)' }], { duration: 700, easing: 'ease-out' });
|
|
4911
|
+
}
|
|
4912
|
+
}
|
|
4913
|
+
return UsaKpi;
|
|
4914
|
+
}, { id: 'kpi', text: css$4 });
|
|
4915
|
+
}
|
|
4916
|
+
|
|
4917
|
+
var css$3 = "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$3 });
|
|
4963
|
+
}
|
|
4964
|
+
|
|
4965
|
+
var css$2 = "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$2 });
|
|
5131
|
+
}
|
|
5132
|
+
|
|
5133
|
+
var css$1 = "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$1 });
|
|
5248
|
+
}
|
|
5249
|
+
|
|
5250
|
+
var css = "usa-countdown{display:inline-block;font:700 12px/1.2 system-ui,sans-serif;color:var(--usa-cd-fg,inherit)}.usa-cd-row{display:flex;gap:var(--usa-cd-gap,10px)}.usa-cd-unit{display:flex;flex-direction:column;align-items:center;gap:4px}.usa-cd-unit small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.6}.usa-cd-digits{display:flex;gap:3px;perspective:300px}.usa-cd-d{display:grid;place-items:center;width:var(--usa-cd-w,28px);height:calc(var(--usa-cd-w,28px) * 1.35);border-radius:6px;background:var(--usa-cd-bg,#111827);color:var(--usa-cd-c,#fff);font:800 calc(var(--usa-cd-w,28px) * .8)/1 ui-monospace,monospace;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),0 4px 10px -4px rgba(0,0,0,.5);background-image:linear-gradient(transparent 49%,rgba(0,0,0,.35) 50%,transparent 51%);transform-origin:50% 50%}usa-countdown[data-done] .usa-cd-d{background-color:var(--usa-cd-done,#ef4444)}";
|
|
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 });
|
|
4508
5339
|
}
|
|
4509
5340
|
|
|
4510
5341
|
/**
|
|
@@ -4530,6 +5361,8 @@ const WIDGETS = {
|
|
|
4530
5361
|
'6.8': { 'usa-kanban': defineKanban, 'usa-swipe-deck': defineSwipeDeck, 'usa-weather-card': defineWeatherCard, 'usa-pull-cord': definePullCord },
|
|
4531
5362
|
'6.9': { 'usa-date-picker': defineDatePicker, 'usa-color-picker': defineColorPicker, 'usa-file-drop': defineFileDrop, 'usa-keyframe-editor': defineKeyframeEditor },
|
|
4532
5363
|
'7.1': { 'usa-music-player': defineMusicPlayer, 'usa-volume-knob': defineVolumeKnob, 'usa-equalizer': defineEqualizer, 'usa-lyrics': defineLyrics },
|
|
5364
|
+
'7.2': { 'usa-bar-chart': defineBarChart, 'usa-gauge': defineGauge, 'usa-sparkline': defineSparkline, 'usa-kpi': defineKpi },
|
|
5365
|
+
'7.3': { 'usa-add-to-cart': defineAddToCart, 'usa-cart-drawer': defineCartDrawer, 'usa-product-gallery': defineProductGallery, 'usa-countdown': defineCountdown },
|
|
4533
5366
|
};
|
|
4534
5367
|
/** Every widget tag, in release order. */
|
|
4535
5368
|
const WIDGET_TAGS = Object.values(WIDGETS).flatMap((g) => Object.keys(g));
|
|
@@ -4550,6 +5383,7 @@ exports.PROGRESS_VARIANTS = PROGRESS_VARIANTS;
|
|
|
4550
5383
|
exports.SEGMENTED_VARIANTS = SEGMENTED_VARIANTS;
|
|
4551
5384
|
exports.SHEET_SIDES = SHEET_SIDES;
|
|
4552
5385
|
exports.SKELETON_VARIANTS = SKELETON_VARIANTS;
|
|
5386
|
+
exports.SPARK_VARIANTS = SPARK_VARIANTS;
|
|
4553
5387
|
exports.SWITCH_VARIANTS = SWITCH_VARIANTS;
|
|
4554
5388
|
exports.TAB_INDICATORS = TAB_INDICATORS;
|
|
4555
5389
|
exports.TIP_PLACEMENTS = TIP_PLACEMENTS;
|
|
@@ -4558,17 +5392,24 @@ exports.TOGGLE_VARIANTS = TOGGLE_VARIANTS;
|
|
|
4558
5392
|
exports.WEATHER_CONDITIONS = WEATHER_CONDITIONS;
|
|
4559
5393
|
exports.WIDGETS = WIDGETS;
|
|
4560
5394
|
exports.WIDGET_TAGS = WIDGET_TAGS;
|
|
5395
|
+
exports.cartTotal = cartTotal;
|
|
5396
|
+
exports.defineAddToCart = defineAddToCart;
|
|
5397
|
+
exports.defineBarChart = defineBarChart;
|
|
4561
5398
|
exports.defineCarousel = defineCarousel;
|
|
5399
|
+
exports.defineCartDrawer = defineCartDrawer;
|
|
4562
5400
|
exports.defineColorPicker = defineColorPicker;
|
|
4563
5401
|
exports.defineCompare = defineCompare;
|
|
5402
|
+
exports.defineCountdown = defineCountdown;
|
|
4564
5403
|
exports.defineCubeGallery = defineCubeGallery;
|
|
4565
5404
|
exports.defineDatePicker = defineDatePicker;
|
|
4566
5405
|
exports.defineDisclosure = defineDisclosure;
|
|
4567
5406
|
exports.defineDock = defineDock;
|
|
4568
5407
|
exports.defineEqualizer = defineEqualizer;
|
|
4569
5408
|
exports.defineFileDrop = defineFileDrop;
|
|
5409
|
+
exports.defineGauge = defineGauge;
|
|
4570
5410
|
exports.defineKanban = defineKanban;
|
|
4571
5411
|
exports.defineKeyframeEditor = defineKeyframeEditor;
|
|
5412
|
+
exports.defineKpi = defineKpi;
|
|
4572
5413
|
exports.defineLyrics = defineLyrics;
|
|
4573
5414
|
exports.defineMasonryFlow = defineMasonryFlow;
|
|
4574
5415
|
exports.defineMenu = defineMenu;
|
|
@@ -4579,11 +5420,13 @@ exports.defineMusicPlayer = defineMusicPlayer;
|
|
|
4579
5420
|
exports.defineNavMorph = defineNavMorph;
|
|
4580
5421
|
exports.defineOdometer = defineOdometer;
|
|
4581
5422
|
exports.definePagination = definePagination;
|
|
5423
|
+
exports.defineProductGallery = defineProductGallery;
|
|
4582
5424
|
exports.defineProgressRing = defineProgressRing;
|
|
4583
5425
|
exports.definePullCord = definePullCord;
|
|
4584
5426
|
exports.defineSegmented = defineSegmented;
|
|
4585
5427
|
exports.defineSheet = defineSheet;
|
|
4586
5428
|
exports.defineSkeletonReveal = defineSkeletonReveal;
|
|
5429
|
+
exports.defineSparkline = defineSparkline;
|
|
4587
5430
|
exports.defineStarRating = defineStarRating;
|
|
4588
5431
|
exports.defineStepper = defineStepper;
|
|
4589
5432
|
exports.defineStories = defineStories;
|
|
@@ -4601,5 +5444,8 @@ exports.monthGrid = monthGrid;
|
|
|
4601
5444
|
exports.pageWindow = pageWindow;
|
|
4602
5445
|
exports.parseISODate = parseISODate;
|
|
4603
5446
|
exports.parseLRC = parseLRC;
|
|
5447
|
+
exports.sparkPoints = sparkPoints;
|
|
5448
|
+
exports.splitTime = splitTime;
|
|
4604
5449
|
exports.stackToast = stackToast;
|
|
5450
|
+
exports.wrapIndex = wrapIndex;
|
|
4605
5451
|
//# sourceMappingURL=widgets.cjs.map
|