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
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { u as defineElement } from '../chunks/base-2-yYc93C.js';
|
|
2
2
|
import { d as springEasing } from '../chunks/spring-BK8DiezC.js';
|
|
3
3
|
import { A as ANIMATION_FORMAT, c as createPlayer } from '../chunks/player-DxvCYo7Q.js';
|
|
4
|
-
import '../chunks/registry-CyKExAmE.js';
|
|
4
|
+
import { getEffect, playEffect } from '../chunks/registry-CyKExAmE.js';
|
|
5
|
+
import '../chunks/builtins-HlqAkK0f.js';
|
|
6
|
+
import { registerShopPack } from './fx-shop.js';
|
|
5
7
|
import '../chunks/core-D5rU0CV6.js';
|
|
6
8
|
import './tokens.js';
|
|
9
|
+
import '../chunks/fx-CMxWNwH8.js';
|
|
7
10
|
|
|
8
11
|
/** Helpers shared by the 6.x widgets (`motionary/components/widgets`). */
|
|
9
12
|
const clampN = (v, a, b) => Math.min(b, Math.max(a, v));
|
|
@@ -40,7 +43,7 @@ function arrowIndex(e, i, n, vertical = false) {
|
|
|
40
43
|
return -1;
|
|
41
44
|
}
|
|
42
45
|
|
|
43
|
-
var css$
|
|
46
|
+
var css$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}";
|
|
44
47
|
|
|
45
48
|
const CAROUSEL_EFFECTS = ['slide', 'fade', 'scale', 'cards'];
|
|
46
49
|
function defineCarousel(tag = 'usa-carousel') {
|
|
@@ -229,10 +232,10 @@ function defineCarousel(tag = 'usa-carousel') {
|
|
|
229
232
|
}
|
|
230
233
|
}
|
|
231
234
|
return UsaCarousel;
|
|
232
|
-
}, { id: 'carousel', text: css$
|
|
235
|
+
}, { id: 'carousel', text: css$F });
|
|
233
236
|
}
|
|
234
237
|
|
|
235
|
-
var css$
|
|
238
|
+
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}";
|
|
236
239
|
|
|
237
240
|
const TAB_INDICATORS = ['pill', 'underline', 'glow', 'gooey'];
|
|
238
241
|
function defineTabBar(tag = 'usa-tab-bar') {
|
|
@@ -345,10 +348,10 @@ function defineTabBar(tag = 'usa-tab-bar') {
|
|
|
345
348
|
}
|
|
346
349
|
}
|
|
347
350
|
return UsaTabBar;
|
|
348
|
-
}, { id: 'tab-bar', text: css$
|
|
351
|
+
}, { id: 'tab-bar', text: css$E });
|
|
349
352
|
}
|
|
350
353
|
|
|
351
|
-
var css$
|
|
354
|
+
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}}";
|
|
352
355
|
|
|
353
356
|
function defineDisclosure(tag = 'usa-disclosure') {
|
|
354
357
|
return defineElement(tag, (Base) => {
|
|
@@ -416,10 +419,10 @@ function defineDisclosure(tag = 'usa-disclosure') {
|
|
|
416
419
|
}
|
|
417
420
|
}
|
|
418
421
|
return UsaDisclosure;
|
|
419
|
-
}, { id: 'disclosure', text: css$
|
|
422
|
+
}, { id: 'disclosure', text: css$D });
|
|
420
423
|
}
|
|
421
424
|
|
|
422
|
-
var css$
|
|
425
|
+
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}}";
|
|
423
426
|
|
|
424
427
|
function defineStories(tag = 'usa-stories') {
|
|
425
428
|
return defineElement(tag, (Base) => {
|
|
@@ -552,10 +555,10 @@ function defineStories(tag = 'usa-stories') {
|
|
|
552
555
|
}
|
|
553
556
|
}
|
|
554
557
|
return UsaStories;
|
|
555
|
-
}, { id: 'stories', text: css$
|
|
558
|
+
}, { id: 'stories', text: css$C });
|
|
556
559
|
}
|
|
557
560
|
|
|
558
|
-
var css$
|
|
561
|
+
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)}}";
|
|
559
562
|
|
|
560
563
|
const MODAL_EFFECTS = ['scale', 'slide-up', 'flip', 'origin'];
|
|
561
564
|
const SHEET_SIDES = ['right', 'left', 'bottom', 'top'];
|
|
@@ -782,12 +785,12 @@ function defineOverlay(tag, kind) {
|
|
|
782
785
|
}
|
|
783
786
|
}
|
|
784
787
|
return UsaOverlay;
|
|
785
|
-
}, { id: 'overlay', text: css$
|
|
788
|
+
}, { id: 'overlay', text: css$B });
|
|
786
789
|
}
|
|
787
790
|
const defineModal = (tag = 'usa-modal') => defineOverlay(tag, 'modal');
|
|
788
791
|
const defineSheet = (tag = 'usa-sheet') => defineOverlay(tag, 'sheet');
|
|
789
792
|
|
|
790
|
-
var css$
|
|
793
|
+
var css$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}}";
|
|
791
794
|
|
|
792
795
|
const TOAST_POSITIONS = ['bottom-right', 'bottom-left', 'bottom-center', 'top-right', 'top-left', 'top-center'];
|
|
793
796
|
const ICONS = { info: 'ℹ', success: '✓', warning: '!', error: '✕' };
|
|
@@ -958,7 +961,7 @@ function defineToastStack(tag = 'usa-toast-stack') {
|
|
|
958
961
|
}
|
|
959
962
|
}
|
|
960
963
|
return UsaToastStack;
|
|
961
|
-
}, { id: 'toast', text: css$
|
|
964
|
+
}, { id: 'toast', text: css$A });
|
|
962
965
|
}
|
|
963
966
|
/** Show a toast on the first `<usa-toast-stack>` of the page (one is created when missing). */
|
|
964
967
|
function stackToast(input, stack) {
|
|
@@ -986,7 +989,7 @@ function installToastTriggers() {
|
|
|
986
989
|
});
|
|
987
990
|
}
|
|
988
991
|
|
|
989
|
-
var css$
|
|
992
|
+
var css$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)}}";
|
|
990
993
|
|
|
991
994
|
const MENU_EFFECTS = ['scale', 'fold', 'slide'];
|
|
992
995
|
function defineMenu(tag = 'usa-menu') {
|
|
@@ -1125,10 +1128,10 @@ function defineMenu(tag = 'usa-menu') {
|
|
|
1125
1128
|
}
|
|
1126
1129
|
}
|
|
1127
1130
|
return UsaMenu;
|
|
1128
|
-
}, { id: 'menu', text: css$
|
|
1131
|
+
}, { id: 'menu', text: css$z });
|
|
1129
1132
|
}
|
|
1130
1133
|
|
|
1131
|
-
var css$
|
|
1134
|
+
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}}";
|
|
1132
1135
|
|
|
1133
1136
|
const PROGRESS_VARIANTS = ['ring', 'bar', 'semi'];
|
|
1134
1137
|
const NS = 'http://www.w3.org/2000/svg';
|
|
@@ -1268,7 +1271,7 @@ function defineProgressRing(tag = 'usa-progress-ring') {
|
|
|
1268
1271
|
}
|
|
1269
1272
|
}
|
|
1270
1273
|
return UsaProgressRing;
|
|
1271
|
-
}, { id: 'meters', text: css$
|
|
1274
|
+
}, { id: 'meters', text: css$y });
|
|
1272
1275
|
}
|
|
1273
1276
|
function defineOdometer(tag = 'usa-odometer') {
|
|
1274
1277
|
return defineElement(tag, (Base) => {
|
|
@@ -1378,10 +1381,10 @@ function defineOdometer(tag = 'usa-odometer') {
|
|
|
1378
1381
|
}
|
|
1379
1382
|
}
|
|
1380
1383
|
return UsaOdometer;
|
|
1381
|
-
}, { id: 'meters', text: css$
|
|
1384
|
+
}, { id: 'meters', text: css$y });
|
|
1382
1385
|
}
|
|
1383
1386
|
|
|
1384
|
-
var css$
|
|
1387
|
+
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}}";
|
|
1385
1388
|
|
|
1386
1389
|
const SKELETON_VARIANTS = ['wave', 'pulse', 'glow'];
|
|
1387
1390
|
function defineSkeletonReveal(tag = 'usa-skeleton-reveal') {
|
|
@@ -1496,10 +1499,10 @@ function defineSkeletonReveal(tag = 'usa-skeleton-reveal') {
|
|
|
1496
1499
|
}
|
|
1497
1500
|
}
|
|
1498
1501
|
return UsaSkeletonReveal;
|
|
1499
|
-
}, { id: 'skeleton-reveal', text: css$
|
|
1502
|
+
}, { id: 'skeleton-reveal', text: css$x });
|
|
1500
1503
|
}
|
|
1501
1504
|
|
|
1502
|
-
var css$
|
|
1505
|
+
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}}";
|
|
1503
1506
|
|
|
1504
1507
|
const PATHS = {
|
|
1505
1508
|
star: 'M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6L2.5 9.4l6.6-.8z',
|
|
@@ -1623,10 +1626,10 @@ function defineStarRating(tag = 'usa-star-rating') {
|
|
|
1623
1626
|
}
|
|
1624
1627
|
}
|
|
1625
1628
|
return UsaStarRating;
|
|
1626
|
-
}, { id: 'star-rating', text: css$
|
|
1629
|
+
}, { id: 'star-rating', text: css$w });
|
|
1627
1630
|
}
|
|
1628
1631
|
|
|
1629
|
-
var css$
|
|
1632
|
+
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}}";
|
|
1630
1633
|
|
|
1631
1634
|
function defineMilestones(tag = 'usa-milestones') {
|
|
1632
1635
|
return defineElement(tag, (Base) => {
|
|
@@ -1714,10 +1717,10 @@ function defineMilestones(tag = 'usa-milestones') {
|
|
|
1714
1717
|
}
|
|
1715
1718
|
}
|
|
1716
1719
|
return UsaMilestones;
|
|
1717
|
-
}, { id: 'milestones', text: css$
|
|
1720
|
+
}, { id: 'milestones', text: css$v });
|
|
1718
1721
|
}
|
|
1719
1722
|
|
|
1720
|
-
var css$
|
|
1723
|
+
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}";
|
|
1721
1724
|
|
|
1722
1725
|
function defineMasonryFlow(tag = 'usa-masonry-flow') {
|
|
1723
1726
|
return defineElement(tag, (Base) => {
|
|
@@ -1838,10 +1841,10 @@ function defineMasonryFlow(tag = 'usa-masonry-flow') {
|
|
|
1838
1841
|
}
|
|
1839
1842
|
}
|
|
1840
1843
|
return UsaMasonryFlow;
|
|
1841
|
-
}, { id: 'masonry-flow', text: css$
|
|
1844
|
+
}, { id: 'masonry-flow', text: css$u });
|
|
1842
1845
|
}
|
|
1843
1846
|
|
|
1844
|
-
var css$
|
|
1847
|
+
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}";
|
|
1845
1848
|
|
|
1846
1849
|
function defineCompare(tag = 'usa-compare') {
|
|
1847
1850
|
return defineElement(tag, (Base) => {
|
|
@@ -1965,10 +1968,10 @@ function defineCompare(tag = 'usa-compare') {
|
|
|
1965
1968
|
}
|
|
1966
1969
|
}
|
|
1967
1970
|
return UsaCompare;
|
|
1968
|
-
}, { id: 'compare', text: css$
|
|
1971
|
+
}, { id: 'compare', text: css$t });
|
|
1969
1972
|
}
|
|
1970
1973
|
|
|
1971
|
-
var css$
|
|
1974
|
+
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}";
|
|
1972
1975
|
|
|
1973
1976
|
function defineCubeGallery(tag = 'usa-cube-gallery') {
|
|
1974
1977
|
return defineElement(tag, (Base) => {
|
|
@@ -2101,10 +2104,10 @@ function defineCubeGallery(tag = 'usa-cube-gallery') {
|
|
|
2101
2104
|
}
|
|
2102
2105
|
}
|
|
2103
2106
|
return UsaCubeGallery;
|
|
2104
|
-
}, { id: 'cube-gallery', text: css$
|
|
2107
|
+
}, { id: 'cube-gallery', text: css$s });
|
|
2105
2108
|
}
|
|
2106
2109
|
|
|
2107
|
-
var css$
|
|
2110
|
+
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}}";
|
|
2108
2111
|
|
|
2109
2112
|
function defineDock(tag = 'usa-dock') {
|
|
2110
2113
|
return defineElement(tag, (Base) => {
|
|
@@ -2172,10 +2175,10 @@ function defineDock(tag = 'usa-dock') {
|
|
|
2172
2175
|
}
|
|
2173
2176
|
}
|
|
2174
2177
|
return UsaDock;
|
|
2175
|
-
}, { id: 'dock', text: css$
|
|
2178
|
+
}, { id: 'dock', text: css$r });
|
|
2176
2179
|
}
|
|
2177
2180
|
|
|
2178
|
-
var css$
|
|
2181
|
+
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)}";
|
|
2179
2182
|
|
|
2180
2183
|
const NAV_INDICATORS = ['underline', 'pill', 'blob', 'dot'];
|
|
2181
2184
|
function defineNavMorph(tag = 'usa-nav-morph') {
|
|
@@ -2279,10 +2282,10 @@ function defineNavMorph(tag = 'usa-nav-morph') {
|
|
|
2279
2282
|
}
|
|
2280
2283
|
}
|
|
2281
2284
|
return UsaNavMorph;
|
|
2282
|
-
}, { id: 'nav-morph', text: css$
|
|
2285
|
+
}, { id: 'nav-morph', text: css$q });
|
|
2283
2286
|
}
|
|
2284
2287
|
|
|
2285
|
-
var css$
|
|
2288
|
+
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}";
|
|
2286
2289
|
|
|
2287
2290
|
const TOGGLE_VARIANTS = ['cross', 'arrow', 'minus', 'plus-x'];
|
|
2288
2291
|
function defineMenuToggle(tag = 'usa-menu-toggle') {
|
|
@@ -2355,10 +2358,10 @@ function defineMenuToggle(tag = 'usa-menu-toggle') {
|
|
|
2355
2358
|
}
|
|
2356
2359
|
}
|
|
2357
2360
|
return UsaMenuToggle;
|
|
2358
|
-
}, { id: 'menu-toggle', text: css$
|
|
2361
|
+
}, { id: 'menu-toggle', text: css$p });
|
|
2359
2362
|
}
|
|
2360
2363
|
|
|
2361
|
-
var css$
|
|
2364
|
+
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)}";
|
|
2362
2365
|
|
|
2363
2366
|
const TIP_PLACEMENTS = ['top', 'bottom', 'left', 'right'];
|
|
2364
2367
|
const FLIP = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
|
|
@@ -2490,10 +2493,10 @@ function defineTip(tag = 'usa-tip') {
|
|
|
2490
2493
|
}
|
|
2491
2494
|
}
|
|
2492
2495
|
return UsaTip;
|
|
2493
|
-
}, { id: 'tip', text: css$
|
|
2496
|
+
}, { id: 'tip', text: css$o });
|
|
2494
2497
|
}
|
|
2495
2498
|
|
|
2496
|
-
var css$
|
|
2499
|
+
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}}";
|
|
2497
2500
|
|
|
2498
2501
|
function defineStepper(tag = 'usa-stepper') {
|
|
2499
2502
|
return defineElement(tag, (Base) => {
|
|
@@ -2590,10 +2593,10 @@ function defineStepper(tag = 'usa-stepper') {
|
|
|
2590
2593
|
}
|
|
2591
2594
|
}
|
|
2592
2595
|
return UsaStepper;
|
|
2593
|
-
}, { id: 'stepper', text: css$
|
|
2596
|
+
}, { id: 'stepper', text: css$n });
|
|
2594
2597
|
}
|
|
2595
2598
|
|
|
2596
|
-
var css$
|
|
2599
|
+
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}}";
|
|
2597
2600
|
|
|
2598
2601
|
/** The visible page list: numbers and `'…'` gaps (1-based). */
|
|
2599
2602
|
function pageWindow(page, total, siblings = 1) {
|
|
@@ -2715,10 +2718,10 @@ function definePagination(tag = 'usa-pagination') {
|
|
|
2715
2718
|
}
|
|
2716
2719
|
}
|
|
2717
2720
|
return UsaPagination;
|
|
2718
|
-
}, { id: 'pagination', text: css$
|
|
2721
|
+
}, { id: 'pagination', text: css$m });
|
|
2719
2722
|
}
|
|
2720
2723
|
|
|
2721
|
-
var css$
|
|
2724
|
+
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}}";
|
|
2722
2725
|
|
|
2723
2726
|
const SEGMENTED_VARIANTS = ['ios', 'pill', 'outline'];
|
|
2724
2727
|
function defineSegmented(tag = 'usa-segmented') {
|
|
@@ -2812,10 +2815,10 @@ function defineSegmented(tag = 'usa-segmented') {
|
|
|
2812
2815
|
}
|
|
2813
2816
|
}
|
|
2814
2817
|
return UsaSegmented;
|
|
2815
|
-
}, { id: 'segmented', text: css$
|
|
2818
|
+
}, { id: 'segmented', text: css$l });
|
|
2816
2819
|
}
|
|
2817
2820
|
|
|
2818
|
-
var css$
|
|
2821
|
+
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}}";
|
|
2819
2822
|
|
|
2820
2823
|
const SWITCH_VARIANTS = ['ios', 'daynight', 'bounce', 'liquid'];
|
|
2821
2824
|
function defineSwitch(tag = 'usa-switch') {
|
|
@@ -2903,10 +2906,10 @@ function defineSwitch(tag = 'usa-switch') {
|
|
|
2903
2906
|
}
|
|
2904
2907
|
}
|
|
2905
2908
|
return UsaSwitch;
|
|
2906
|
-
}, { id: 'switch', text: css$
|
|
2909
|
+
}, { id: 'switch', text: css$k });
|
|
2907
2910
|
}
|
|
2908
2911
|
|
|
2909
|
-
var css$
|
|
2912
|
+
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}}";
|
|
2910
2913
|
|
|
2911
2914
|
function defineKanban(tag = 'usa-kanban') {
|
|
2912
2915
|
return defineElement(tag, (Base) => {
|
|
@@ -3111,10 +3114,10 @@ function defineKanban(tag = 'usa-kanban') {
|
|
|
3111
3114
|
}
|
|
3112
3115
|
}
|
|
3113
3116
|
return UsaKanban;
|
|
3114
|
-
}, { id: 'kanban', text: css$
|
|
3117
|
+
}, { id: 'kanban', text: css$j });
|
|
3115
3118
|
}
|
|
3116
3119
|
|
|
3117
|
-
var css$
|
|
3120
|
+
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}}";
|
|
3118
3121
|
|
|
3119
3122
|
function defineSwipeDeck(tag = 'usa-swipe-deck') {
|
|
3120
3123
|
return defineElement(tag, (Base) => {
|
|
@@ -3256,10 +3259,10 @@ function defineSwipeDeck(tag = 'usa-swipe-deck') {
|
|
|
3256
3259
|
}
|
|
3257
3260
|
}
|
|
3258
3261
|
return UsaSwipeDeck;
|
|
3259
|
-
}, { id: 'swipe-deck', text: css$
|
|
3262
|
+
}, { id: 'swipe-deck', text: css$i });
|
|
3260
3263
|
}
|
|
3261
3264
|
|
|
3262
|
-
var css$
|
|
3265
|
+
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}}";
|
|
3263
3266
|
|
|
3264
3267
|
const WEATHER_CONDITIONS = ['clear', 'cloudy', 'rain', 'snow', 'storm', 'fog', 'night'];
|
|
3265
3268
|
const LABEL = { clear: 'Clear', cloudy: 'Cloudy', rain: 'Rain', snow: 'Snow', storm: 'Thunderstorm', fog: 'Fog', night: 'Clear night' };
|
|
@@ -3340,10 +3343,10 @@ function defineWeatherCard(tag = 'usa-weather-card') {
|
|
|
3340
3343
|
}
|
|
3341
3344
|
}
|
|
3342
3345
|
return UsaWeatherCard;
|
|
3343
|
-
}, { id: 'weather-card', text: css$
|
|
3346
|
+
}, { id: 'weather-card', text: css$h });
|
|
3344
3347
|
}
|
|
3345
3348
|
|
|
3346
|
-
var css$
|
|
3349
|
+
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}}";
|
|
3347
3350
|
|
|
3348
3351
|
function definePullCord(tag = 'usa-pull-cord') {
|
|
3349
3352
|
return defineElement(tag, (Base) => {
|
|
@@ -3472,10 +3475,10 @@ function definePullCord(tag = 'usa-pull-cord') {
|
|
|
3472
3475
|
}
|
|
3473
3476
|
}
|
|
3474
3477
|
return UsaPullCord;
|
|
3475
|
-
}, { id: 'pull-cord', text: css$
|
|
3478
|
+
}, { id: 'pull-cord', text: css$g });
|
|
3476
3479
|
}
|
|
3477
3480
|
|
|
3478
|
-
var css$
|
|
3481
|
+
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}}";
|
|
3479
3482
|
|
|
3480
3483
|
const iso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
|
3481
3484
|
/** Parse `YYYY-MM-DD` as a local date (or null). */
|
|
@@ -3624,10 +3627,10 @@ function defineDatePicker(tag = 'usa-date-picker') {
|
|
|
3624
3627
|
}
|
|
3625
3628
|
}
|
|
3626
3629
|
return UsaDatePicker;
|
|
3627
|
-
}, { id: 'date-picker', text: css$
|
|
3630
|
+
}, { id: 'date-picker', text: css$f });
|
|
3628
3631
|
}
|
|
3629
3632
|
|
|
3630
|
-
var css$
|
|
3633
|
+
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}}";
|
|
3631
3634
|
|
|
3632
3635
|
/** HSV (h 0–360, s / v 0–1) → `#rrggbb`. */
|
|
3633
3636
|
function hsvToHex(h, s, v) {
|
|
@@ -3747,10 +3750,10 @@ function defineColorPicker(tag = 'usa-color-picker') {
|
|
|
3747
3750
|
}
|
|
3748
3751
|
}
|
|
3749
3752
|
return UsaColorPicker;
|
|
3750
|
-
}, { id: 'color-picker', text: css$
|
|
3753
|
+
}, { id: 'color-picker', text: css$e });
|
|
3751
3754
|
}
|
|
3752
3755
|
|
|
3753
|
-
var css$
|
|
3756
|
+
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}}";
|
|
3754
3757
|
|
|
3755
3758
|
const size = (n) => (n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(1)} KB` : `${(n / 1048576).toFixed(1)} MB`);
|
|
3756
3759
|
function defineFileDrop(tag = 'usa-file-drop') {
|
|
@@ -3851,10 +3854,10 @@ function defineFileDrop(tag = 'usa-file-drop') {
|
|
|
3851
3854
|
}
|
|
3852
3855
|
}
|
|
3853
3856
|
return UsaFileDrop;
|
|
3854
|
-
}, { id: 'file-drop', text: css$
|
|
3857
|
+
}, { id: 'file-drop', text: css$d });
|
|
3855
3858
|
}
|
|
3856
3859
|
|
|
3857
|
-
var css$
|
|
3860
|
+
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}}";
|
|
3858
3861
|
|
|
3859
3862
|
const DEFAULT = {
|
|
3860
3863
|
format: ANIMATION_FORMAT,
|
|
@@ -4028,10 +4031,10 @@ function defineKeyframeEditor(tag = 'usa-keyframe-editor') {
|
|
|
4028
4031
|
}
|
|
4029
4032
|
}
|
|
4030
4033
|
return UsaKeyframeEditor;
|
|
4031
|
-
}, { id: 'keyframe-editor', text: css$
|
|
4034
|
+
}, { id: 'keyframe-editor', text: css$c });
|
|
4032
4035
|
}
|
|
4033
4036
|
|
|
4034
|
-
var css$
|
|
4037
|
+
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}}";
|
|
4035
4038
|
|
|
4036
4039
|
const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`;
|
|
4037
4040
|
function defineMusicPlayer(tag = 'usa-music-player') {
|
|
@@ -4192,10 +4195,10 @@ function defineMusicPlayer(tag = 'usa-music-player') {
|
|
|
4192
4195
|
}
|
|
4193
4196
|
}
|
|
4194
4197
|
return UsaMusicPlayer;
|
|
4195
|
-
}, { id: 'music-player', text: css$
|
|
4198
|
+
}, { id: 'music-player', text: css$b });
|
|
4196
4199
|
}
|
|
4197
4200
|
|
|
4198
|
-
var css$
|
|
4201
|
+
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}}";
|
|
4199
4202
|
|
|
4200
4203
|
const ARC = 270;
|
|
4201
4204
|
function defineVolumeKnob(tag = 'usa-volume-knob') {
|
|
@@ -4286,10 +4289,10 @@ function defineVolumeKnob(tag = 'usa-volume-knob') {
|
|
|
4286
4289
|
}
|
|
4287
4290
|
}
|
|
4288
4291
|
return UsaVolumeKnob;
|
|
4289
|
-
}, { id: 'volume-knob', text: css$
|
|
4292
|
+
}, { id: 'volume-knob', text: css$a });
|
|
4290
4293
|
}
|
|
4291
4294
|
|
|
4292
|
-
var css$
|
|
4295
|
+
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}}";
|
|
4293
4296
|
|
|
4294
4297
|
const EQ_PRESETS = {
|
|
4295
4298
|
flat: [0, 0, 0, 0, 0, 0, 0],
|
|
@@ -4387,10 +4390,10 @@ function defineEqualizer(tag = 'usa-equalizer') {
|
|
|
4387
4390
|
}
|
|
4388
4391
|
}
|
|
4389
4392
|
return UsaEqualizer;
|
|
4390
|
-
}, { id: 'equalizer', text: css$
|
|
4393
|
+
}, { id: 'equalizer', text: css$9 });
|
|
4391
4394
|
}
|
|
4392
4395
|
|
|
4393
|
-
var css = "usa-lyrics{--usa-ly-c:#f472b6;display:block;width:var(--usa-ly-w,320px);max-width:100%;font:700 18px/1.35 system-ui,sans-serif}.usa-ly-list{height:var(--usa-ly-h,180px);margin:0;padding:70px 0;overflow-y:auto;list-style:none;scrollbar-width:none;-webkit-mask:linear-gradient(transparent,#000 25%,#000 75%,transparent);mask:linear-gradient(transparent,#000 25%,#000 75%,transparent)}.usa-ly-list::-webkit-scrollbar{display:none}.usa-ly-line{--usa-ly-k:0;padding:5px 4px;opacity:.38;cursor:pointer;transform-origin:0 50%;transition:opacity .35s,transform .35s cubic-bezier(.3,1.3,.5,1),filter .35s;filter:blur(.4px)}.usa-ly-line[data-past]{opacity:.22}.usa-ly-line[data-active]{opacity:1;filter:none;transform:scale(1.06);color:transparent;background:linear-gradient(90deg,var(--usa-ly-c) calc(var(--usa-ly-k) * 100%),var(--usa-ly-base,#94a3b8) calc(var(--usa-ly-k) * 100%));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 18px rgba(244,114,182,.25)}@media (prefers-reduced-motion:reduce){.usa-ly-line{transition:none;transform:none!important}}";
|
|
4396
|
+
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}}";
|
|
4394
4397
|
|
|
4395
4398
|
/** Parse LRC text into sorted `{ t, text }` lines. */
|
|
4396
4399
|
function parseLRC(src) {
|
|
@@ -4502,7 +4505,835 @@ function defineLyrics(tag = 'usa-lyrics') {
|
|
|
4502
4505
|
}
|
|
4503
4506
|
}
|
|
4504
4507
|
return UsaLyrics;
|
|
4505
|
-
}, { id: 'lyrics', text: css });
|
|
4508
|
+
}, { id: 'lyrics', text: css$8 });
|
|
4509
|
+
}
|
|
4510
|
+
|
|
4511
|
+
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}}";
|
|
4512
|
+
|
|
4513
|
+
function defineBarChart(tag = 'usa-bar-chart') {
|
|
4514
|
+
return defineElement(tag, (Base) => {
|
|
4515
|
+
class UsaBarChart extends Base {
|
|
4516
|
+
constructor() {
|
|
4517
|
+
super(...arguments);
|
|
4518
|
+
this._data = [];
|
|
4519
|
+
this._seen = false;
|
|
4520
|
+
}
|
|
4521
|
+
static get observedAttributes() {
|
|
4522
|
+
return ['horizontal', 'unit', 'max'];
|
|
4523
|
+
}
|
|
4524
|
+
get data() {
|
|
4525
|
+
return this._data.map((d) => ({ ...d }));
|
|
4526
|
+
}
|
|
4527
|
+
set data(v) {
|
|
4528
|
+
this._data = (v || []).map((d) => ({ label: String(d.label), value: Number(d.value) || 0 }));
|
|
4529
|
+
if (this.isConnected)
|
|
4530
|
+
this.render(true);
|
|
4531
|
+
}
|
|
4532
|
+
mount() {
|
|
4533
|
+
if (!this._data.length) {
|
|
4534
|
+
const kids = Array.from(this.querySelectorAll(':scope > data'));
|
|
4535
|
+
if (kids.length)
|
|
4536
|
+
this._data = kids.map((k) => ({ label: k.textContent?.trim() || '', value: Number(k.getAttribute('value')) || 0 }));
|
|
4537
|
+
else {
|
|
4538
|
+
const vals = this.str('values', '').split(',').map(Number);
|
|
4539
|
+
const labels = this.str('labels', '').split(',');
|
|
4540
|
+
this._data = vals.filter(Number.isFinite).map((v, i) => ({ label: (labels[i] || String(i + 1)).trim(), value: v }));
|
|
4541
|
+
}
|
|
4542
|
+
}
|
|
4543
|
+
this.querySelectorAll(':scope > data').forEach((d) => (d.hidden = true));
|
|
4544
|
+
this.dataset.dir = this.flag('horizontal') ? 'h' : 'v';
|
|
4545
|
+
this.render(false);
|
|
4546
|
+
this.inView((vis) => {
|
|
4547
|
+
if (!vis || this._seen)
|
|
4548
|
+
return;
|
|
4549
|
+
this._seen = true;
|
|
4550
|
+
if (this.reduced)
|
|
4551
|
+
return;
|
|
4552
|
+
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' }));
|
|
4553
|
+
});
|
|
4554
|
+
}
|
|
4555
|
+
render(glide) {
|
|
4556
|
+
let list = this.querySelector(':scope > .usa-bc-list');
|
|
4557
|
+
if (!list) {
|
|
4558
|
+
list = document.createElement('ul');
|
|
4559
|
+
list.className = 'usa-bc-list';
|
|
4560
|
+
list.setAttribute('data-usa-part', '');
|
|
4561
|
+
this.appendChild(list);
|
|
4562
|
+
}
|
|
4563
|
+
const max = this.num('max', 0) || Math.max(1, ...this._data.map((d) => d.value));
|
|
4564
|
+
const unit = this.str('unit', '');
|
|
4565
|
+
const old = new Map(Array.from(list.children).map((li) => [li.dataset.label, li]));
|
|
4566
|
+
const next = [];
|
|
4567
|
+
for (const d of this._data) {
|
|
4568
|
+
let li = old.get(d.label);
|
|
4569
|
+
const isNew = !li;
|
|
4570
|
+
if (!li) {
|
|
4571
|
+
li = document.createElement('li');
|
|
4572
|
+
li.className = 'usa-bc-item';
|
|
4573
|
+
li.dataset.label = d.label;
|
|
4574
|
+
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>';
|
|
4575
|
+
li.querySelector('.usa-bc-label').textContent = d.label;
|
|
4576
|
+
}
|
|
4577
|
+
old.delete(d.label);
|
|
4578
|
+
const k = Math.max(0, Math.min(1, d.value / max));
|
|
4579
|
+
li.style.setProperty('--usa-bc-k', k.toFixed(4));
|
|
4580
|
+
li.querySelector('.usa-bc-val').textContent = `${d.value.toLocaleString()}${unit}`;
|
|
4581
|
+
li.setAttribute('aria-label', `${d.label}: ${d.value.toLocaleString()}${unit}`);
|
|
4582
|
+
li.toggleAttribute('data-glide', glide && !this.reduced);
|
|
4583
|
+
if (isNew && glide && !this.reduced)
|
|
4584
|
+
this.motion(li.querySelector('.usa-bc-bar'), [{ transform: this.dataset.dir === 'h' ? 'scaleX(0)' : 'scaleY(0)' }, { transform: 'none' }], { duration: 500, easing: 'ease-out' });
|
|
4585
|
+
next.push(li);
|
|
4586
|
+
}
|
|
4587
|
+
old.forEach((li) => {
|
|
4588
|
+
if (this.reduced || !glide)
|
|
4589
|
+
return li.remove();
|
|
4590
|
+
const a = this.motion(li, [{ opacity: 1, transform: 'none' }, { opacity: 0, transform: 'scale(.6)' }], { duration: 300, fill: 'forwards' });
|
|
4591
|
+
if (a)
|
|
4592
|
+
a.finished.then(() => li.remove(), () => li.remove());
|
|
4593
|
+
else
|
|
4594
|
+
li.remove();
|
|
4595
|
+
});
|
|
4596
|
+
next.forEach((li) => list.appendChild(li));
|
|
4597
|
+
this.setAttribute('role', 'figure');
|
|
4598
|
+
if (!this.hasAttribute('aria-label'))
|
|
4599
|
+
this.setAttribute('aria-label', this.str('label', 'Bar chart'));
|
|
4600
|
+
list.setAttribute('role', 'list');
|
|
4601
|
+
next.forEach((li) => li.setAttribute('role', 'listitem'));
|
|
4602
|
+
}
|
|
4603
|
+
}
|
|
4604
|
+
return UsaBarChart;
|
|
4605
|
+
}, { id: 'bar-chart', text: css$7 });
|
|
4606
|
+
}
|
|
4607
|
+
|
|
4608
|
+
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)}";
|
|
4609
|
+
|
|
4610
|
+
function defineGauge(tag = 'usa-gauge') {
|
|
4611
|
+
return defineElement(tag, (Base) => {
|
|
4612
|
+
class UsaGauge extends Base {
|
|
4613
|
+
constructor() {
|
|
4614
|
+
super(...arguments);
|
|
4615
|
+
this._v = 0;
|
|
4616
|
+
this._shown = 0;
|
|
4617
|
+
this._vel = 0;
|
|
4618
|
+
this._raf = 0;
|
|
4619
|
+
}
|
|
4620
|
+
static get observedAttributes() {
|
|
4621
|
+
return ['min', 'max', 'zones', 'unit', 'label'];
|
|
4622
|
+
}
|
|
4623
|
+
get value() {
|
|
4624
|
+
return this._v;
|
|
4625
|
+
}
|
|
4626
|
+
set value(v) {
|
|
4627
|
+
this._v = clampN(Number(v) || 0, this.num('min', 0), this.num('max', 100));
|
|
4628
|
+
this.setAttribute('aria-valuenow', String(this._v));
|
|
4629
|
+
this.animateTo();
|
|
4630
|
+
}
|
|
4631
|
+
mount() {
|
|
4632
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
4633
|
+
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>');
|
|
4634
|
+
this.querySelector('.usa-gg-label').textContent = this.str('label', '');
|
|
4635
|
+
this.setAttribute('role', 'meter');
|
|
4636
|
+
this.setAttribute('aria-valuemin', String(this.num('min', 0)));
|
|
4637
|
+
this.setAttribute('aria-valuemax', String(this.num('max', 100)));
|
|
4638
|
+
if (!this.hasAttribute('aria-label'))
|
|
4639
|
+
this.setAttribute('aria-label', this.str('label', 'Gauge'));
|
|
4640
|
+
this._v = clampN(this.num('value', 0), this.num('min', 0), this.num('max', 100));
|
|
4641
|
+
this.setAttribute('aria-valuenow', String(this._v));
|
|
4642
|
+
this._shown = this.reduced ? this._v : this.num('min', 0);
|
|
4643
|
+
this.paint();
|
|
4644
|
+
this.onCleanup(() => cancelAnimationFrame(this._raf));
|
|
4645
|
+
this.inView((v) => v && this.animateTo());
|
|
4646
|
+
}
|
|
4647
|
+
/** Colour of the zone containing `v`. */
|
|
4648
|
+
zoneColor(v) {
|
|
4649
|
+
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]);
|
|
4650
|
+
for (const [b, c] of zones)
|
|
4651
|
+
if (v <= b)
|
|
4652
|
+
return c;
|
|
4653
|
+
return zones.length ? zones[zones.length - 1][1] : '';
|
|
4654
|
+
}
|
|
4655
|
+
paint() {
|
|
4656
|
+
const lo = this.num('min', 0);
|
|
4657
|
+
const hi = this.num('max', 100);
|
|
4658
|
+
const k = clampN((this._shown - lo) / (hi - lo || 1), -0.05, 1.05);
|
|
4659
|
+
this.style.setProperty('--usa-gg-k', k.toFixed(4));
|
|
4660
|
+
this.style.setProperty('--usa-gg-angle', `${ -90 + k * 180}deg`);
|
|
4661
|
+
const z = this.zoneColor(this._shown);
|
|
4662
|
+
if (z)
|
|
4663
|
+
this.style.setProperty('--usa-gg-c', z);
|
|
4664
|
+
const num = this.querySelector('.usa-gg-num');
|
|
4665
|
+
if (num)
|
|
4666
|
+
num.textContent = `${Math.round(clampN(this._shown, lo, hi))}${this.str('unit', '')}`;
|
|
4667
|
+
this.setAttribute('aria-valuetext', `${Math.round(this._v)}${this.str('unit', '')}`);
|
|
4668
|
+
}
|
|
4669
|
+
animateTo() {
|
|
4670
|
+
if (this.reduced || typeof requestAnimationFrame !== 'function') {
|
|
4671
|
+
this._shown = this._v;
|
|
4672
|
+
return this.paint();
|
|
4673
|
+
}
|
|
4674
|
+
if (this._raf)
|
|
4675
|
+
return;
|
|
4676
|
+
let last = 0;
|
|
4677
|
+
const f = (now) => {
|
|
4678
|
+
const dt = last ? Math.min(0.033, (now - last) / 1000) : 1 / 60;
|
|
4679
|
+
last = now;
|
|
4680
|
+
const span = this.num('max', 100) - this.num('min', 0) || 1;
|
|
4681
|
+
this._vel += (120 * (this._v - this._shown) - 11 * this._vel) * dt;
|
|
4682
|
+
this._shown += this._vel * dt;
|
|
4683
|
+
this.paint();
|
|
4684
|
+
if (Math.abs(this._v - this._shown) / span > 0.0005 || Math.abs(this._vel) / span > 0.002)
|
|
4685
|
+
this._raf = requestAnimationFrame(f);
|
|
4686
|
+
else
|
|
4687
|
+
((this._raf = 0), (this._shown = this._v), (this._vel = 0), this.paint());
|
|
4688
|
+
};
|
|
4689
|
+
this._raf = requestAnimationFrame(f);
|
|
4690
|
+
}
|
|
4691
|
+
}
|
|
4692
|
+
return UsaGauge;
|
|
4693
|
+
}, { id: 'gauge', text: css$6 });
|
|
4694
|
+
}
|
|
4695
|
+
|
|
4696
|
+
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}}";
|
|
4697
|
+
|
|
4698
|
+
const SPARK_VARIANTS = ['line', 'area', 'bars'];
|
|
4699
|
+
/** Map values to SVG points in a w×h box (with padding). */
|
|
4700
|
+
function sparkPoints(vals, w = 100, h = 30, pad = 3) {
|
|
4701
|
+
if (!vals.length)
|
|
4702
|
+
return [];
|
|
4703
|
+
const lo = Math.min(...vals);
|
|
4704
|
+
const hi = Math.max(...vals);
|
|
4705
|
+
const span = hi - lo || 1;
|
|
4706
|
+
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)]);
|
|
4707
|
+
}
|
|
4708
|
+
function defineSparkline(tag = 'usa-sparkline') {
|
|
4709
|
+
return defineElement(tag, (Base) => {
|
|
4710
|
+
class UsaSparkline extends Base {
|
|
4711
|
+
constructor() {
|
|
4712
|
+
super(...arguments);
|
|
4713
|
+
this._data = [];
|
|
4714
|
+
this._drawn = false;
|
|
4715
|
+
this._raf = 0;
|
|
4716
|
+
}
|
|
4717
|
+
static get observedAttributes() {
|
|
4718
|
+
return ['variant', 'color'];
|
|
4719
|
+
}
|
|
4720
|
+
get data() {
|
|
4721
|
+
return this._data.slice();
|
|
4722
|
+
}
|
|
4723
|
+
set data(v) {
|
|
4724
|
+
const from = sparkPoints(this._data);
|
|
4725
|
+
this._data = (v || []).map(Number).filter(Number.isFinite);
|
|
4726
|
+
if (this.isConnected)
|
|
4727
|
+
this.render(from);
|
|
4728
|
+
}
|
|
4729
|
+
mount() {
|
|
4730
|
+
if (!this._data.length)
|
|
4731
|
+
this._data = this.str('values', '').split(',').map(Number).filter(Number.isFinite);
|
|
4732
|
+
const v = this.str('variant', 'line');
|
|
4733
|
+
this.dataset.variant = SPARK_VARIANTS.includes(v) ? v : 'line';
|
|
4734
|
+
if (this.str('color', ''))
|
|
4735
|
+
this.style.setProperty('--usa-sl-c', this.str('color', ''));
|
|
4736
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
4737
|
+
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>');
|
|
4738
|
+
this.setAttribute('role', 'img');
|
|
4739
|
+
this.listen(this, 'pointermove', (e) => this.hover(e));
|
|
4740
|
+
this.listen(this, 'pointerleave', () => this.removeAttribute('data-hover'));
|
|
4741
|
+
this.onCleanup(() => cancelAnimationFrame(this._raf));
|
|
4742
|
+
this.render(null);
|
|
4743
|
+
this.inView((vis) => {
|
|
4744
|
+
if (!vis || this._drawn)
|
|
4745
|
+
return;
|
|
4746
|
+
this._drawn = true;
|
|
4747
|
+
const line = this.querySelector('.usa-sl-line');
|
|
4748
|
+
if (line && !this.reduced)
|
|
4749
|
+
this.motion(line, [{ strokeDashoffset: 1 }, { strokeDashoffset: 0 }], { duration: 900, easing: 'cubic-bezier(.6,.05,.3,1)' });
|
|
4750
|
+
});
|
|
4751
|
+
}
|
|
4752
|
+
summary() {
|
|
4753
|
+
const d = this._data;
|
|
4754
|
+
if (!d.length)
|
|
4755
|
+
return 'No data';
|
|
4756
|
+
const a = d[0];
|
|
4757
|
+
const b = d[d.length - 1];
|
|
4758
|
+
const pct = a ? Math.round(((b - a) / Math.abs(a)) * 100) : 0;
|
|
4759
|
+
return `Trend: ${a} to ${b}${a ? `, ${pct >= 0 ? 'up' : 'down'} ${Math.abs(pct)}%` : ''}`;
|
|
4760
|
+
}
|
|
4761
|
+
paths(pts) {
|
|
4762
|
+
if (!pts.length)
|
|
4763
|
+
return { line: '', area: '' };
|
|
4764
|
+
const line = pts.map(([x, y], i) => `${i ? 'L' : 'M'}${x.toFixed(2)} ${y.toFixed(2)}`).join('');
|
|
4765
|
+
return { line, area: `${line}L${pts[pts.length - 1][0].toFixed(2)} 30L${pts[0][0].toFixed(2)} 30Z` };
|
|
4766
|
+
}
|
|
4767
|
+
render(from) {
|
|
4768
|
+
this.setAttribute('aria-label', this.str('label', '') || this.summary());
|
|
4769
|
+
const to = sparkPoints(this._data);
|
|
4770
|
+
const apply = (pts) => {
|
|
4771
|
+
const { line, area } = this.paths(pts);
|
|
4772
|
+
this.querySelector('.usa-sl-line')?.setAttribute('d', line);
|
|
4773
|
+
this.querySelector('.usa-sl-area')?.setAttribute('d', area);
|
|
4774
|
+
const end = pts[pts.length - 1];
|
|
4775
|
+
const c = this.querySelector('.usa-sl-end');
|
|
4776
|
+
if (end && c)
|
|
4777
|
+
(c.setAttribute('cx', end[0].toFixed(2)), c.setAttribute('cy', end[1].toFixed(2)));
|
|
4778
|
+
};
|
|
4779
|
+
const bars = this.querySelector('.usa-sl-bars');
|
|
4780
|
+
if (bars) {
|
|
4781
|
+
const lo = Math.min(0, ...this._data);
|
|
4782
|
+
const hi = Math.max(...this._data, 1);
|
|
4783
|
+
const w = 100 / Math.max(1, this._data.length);
|
|
4784
|
+
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('');
|
|
4785
|
+
}
|
|
4786
|
+
if (!from || from.length !== to.length || this.reduced || typeof requestAnimationFrame !== 'function')
|
|
4787
|
+
return apply(to);
|
|
4788
|
+
cancelAnimationFrame(this._raf);
|
|
4789
|
+
const t0 = performance.now();
|
|
4790
|
+
const f = (now) => {
|
|
4791
|
+
const k = Math.min(1, (now - t0) / 500);
|
|
4792
|
+
const e = 1 - Math.pow(1 - k, 3);
|
|
4793
|
+
apply(to.map(([x, y], i) => [from[i][0] + (x - from[i][0]) * e, from[i][1] + (y - from[i][1]) * e]));
|
|
4794
|
+
if (k < 1)
|
|
4795
|
+
this._raf = requestAnimationFrame(f);
|
|
4796
|
+
};
|
|
4797
|
+
this._raf = requestAnimationFrame(f);
|
|
4798
|
+
}
|
|
4799
|
+
hover(e) {
|
|
4800
|
+
if (!this._data.length)
|
|
4801
|
+
return;
|
|
4802
|
+
const r = this.getBoundingClientRect();
|
|
4803
|
+
const pts = sparkPoints(this._data);
|
|
4804
|
+
const x = ((e.clientX - r.left) / (r.width || 1)) * 100;
|
|
4805
|
+
let i = 0;
|
|
4806
|
+
pts.forEach(([px], j) => Math.abs(px - x) < Math.abs(pts[i][0] - x) && (i = j));
|
|
4807
|
+
const c = this.querySelector('.usa-sl-hover');
|
|
4808
|
+
c?.setAttribute('cx', pts[i][0].toFixed(2));
|
|
4809
|
+
c?.setAttribute('cy', pts[i][1].toFixed(2));
|
|
4810
|
+
const tip = this.querySelector('.usa-sl-tip');
|
|
4811
|
+
if (tip) {
|
|
4812
|
+
tip.textContent = String(this._data[i]);
|
|
4813
|
+
tip.style.left = `${pts[i][0]}%`;
|
|
4814
|
+
}
|
|
4815
|
+
this.toggleAttribute('data-hover', true);
|
|
4816
|
+
}
|
|
4817
|
+
}
|
|
4818
|
+
return UsaSparkline;
|
|
4819
|
+
}, { id: 'sparkline', text: css$5 });
|
|
4820
|
+
}
|
|
4821
|
+
|
|
4822
|
+
/** Parse a figure like "$12.4k" / "−3.5%" / "1,204" → number + prefix / suffix / decimals (7.2). */
|
|
4823
|
+
function parseFigureText(s) {
|
|
4824
|
+
const m = /^(\D*?)([-−]?[\d,]*\.?\d+)(.*)$/.exec(String(s).trim());
|
|
4825
|
+
if (!m)
|
|
4826
|
+
return null;
|
|
4827
|
+
const raw = m[2].replace(/,/g, '').replace('−', '-');
|
|
4828
|
+
const n = Number(raw);
|
|
4829
|
+
return Number.isFinite(n) ? { n, pre: m[1], post: m[3], dec: (raw.split('.')[1] || '').length } : null;
|
|
4830
|
+
}
|
|
4831
|
+
|
|
4832
|
+
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}";
|
|
4833
|
+
|
|
4834
|
+
function defineKpi(tag = 'usa-kpi') {
|
|
4835
|
+
return defineElement(tag, (Base) => {
|
|
4836
|
+
class UsaKpi extends Base {
|
|
4837
|
+
constructor() {
|
|
4838
|
+
super(...arguments);
|
|
4839
|
+
this._shown = 0;
|
|
4840
|
+
this._raf = 0;
|
|
4841
|
+
this._seen = false;
|
|
4842
|
+
}
|
|
4843
|
+
static get observedAttributes() {
|
|
4844
|
+
return ['label', 'delta', 'caption', 'trend', 'invert'];
|
|
4845
|
+
}
|
|
4846
|
+
get value() {
|
|
4847
|
+
return this.str('value', '0');
|
|
4848
|
+
}
|
|
4849
|
+
set value(v) {
|
|
4850
|
+
const prev = this._shown;
|
|
4851
|
+
this.setAttribute('value', String(v));
|
|
4852
|
+
this.roll(prev, true);
|
|
4853
|
+
}
|
|
4854
|
+
mount() {
|
|
4855
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
4856
|
+
const delta = this.str('delta', '');
|
|
4857
|
+
const neg = /^\s*[-−]/.test(delta);
|
|
4858
|
+
const good = this.flag('invert') ? neg : !neg;
|
|
4859
|
+
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>`);
|
|
4860
|
+
this.querySelector('.usa-kpi-label').textContent = this.str('label', '');
|
|
4861
|
+
this.querySelector('.usa-kpi-caption').textContent = this.str('caption', '');
|
|
4862
|
+
const ds = this.querySelector('.usa-kpi-delta span');
|
|
4863
|
+
if (ds)
|
|
4864
|
+
ds.textContent = delta;
|
|
4865
|
+
this.setAttribute('role', 'group');
|
|
4866
|
+
this.setAttribute('aria-label', [this.str('label', ''), this.value, delta && `(${delta})`, this.str('caption', '')].filter(Boolean).join(' '));
|
|
4867
|
+
this.onCleanup(() => cancelAnimationFrame(this._raf));
|
|
4868
|
+
const f = parseFigureText(this.value);
|
|
4869
|
+
this._shown = this.reduced || !f ? (f?.n ?? 0) : 0;
|
|
4870
|
+
this.write(this._shown);
|
|
4871
|
+
this.inView((vis) => {
|
|
4872
|
+
if (!vis || this._seen)
|
|
4873
|
+
return;
|
|
4874
|
+
this._seen = true;
|
|
4875
|
+
this.roll(0, false);
|
|
4876
|
+
const d = this.querySelector('.usa-kpi-delta');
|
|
4877
|
+
if (d && !this.reduced)
|
|
4878
|
+
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' });
|
|
4879
|
+
});
|
|
4880
|
+
}
|
|
4881
|
+
write(n) {
|
|
4882
|
+
const f = parseFigureText(this.value);
|
|
4883
|
+
const el = this.querySelector('.usa-kpi-value');
|
|
4884
|
+
if (!el)
|
|
4885
|
+
return;
|
|
4886
|
+
el.textContent = f ? f.pre + n.toLocaleString(this.str('locale', '') || undefined, { minimumFractionDigits: f.dec, maximumFractionDigits: f.dec }) + f.post : this.value;
|
|
4887
|
+
}
|
|
4888
|
+
roll(from, flash) {
|
|
4889
|
+
const f = parseFigureText(this.value);
|
|
4890
|
+
if (!f)
|
|
4891
|
+
return this.write(0);
|
|
4892
|
+
const to = f.n;
|
|
4893
|
+
if (this.reduced || typeof requestAnimationFrame !== 'function') {
|
|
4894
|
+
this._shown = to;
|
|
4895
|
+
return this.write(to);
|
|
4896
|
+
}
|
|
4897
|
+
cancelAnimationFrame(this._raf);
|
|
4898
|
+
const t0 = performance.now();
|
|
4899
|
+
const step = (now) => {
|
|
4900
|
+
const k = Math.min(1, (now - t0) / 1100);
|
|
4901
|
+
this._shown = from + (to - from) * (1 - Math.pow(1 - k, 3));
|
|
4902
|
+
this.write(this._shown);
|
|
4903
|
+
if (k < 1)
|
|
4904
|
+
this._raf = requestAnimationFrame(step);
|
|
4905
|
+
};
|
|
4906
|
+
this._raf = requestAnimationFrame(step);
|
|
4907
|
+
if (flash)
|
|
4908
|
+
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' });
|
|
4909
|
+
}
|
|
4910
|
+
}
|
|
4911
|
+
return UsaKpi;
|
|
4912
|
+
}, { id: 'kpi', text: css$4 });
|
|
4913
|
+
}
|
|
4914
|
+
|
|
4915
|
+
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}}";
|
|
4916
|
+
|
|
4917
|
+
function defineAddToCart(tag = 'usa-add-to-cart') {
|
|
4918
|
+
return defineElement(tag, (Base) => {
|
|
4919
|
+
class UsaAddToCart extends Base {
|
|
4920
|
+
constructor() {
|
|
4921
|
+
super(...arguments);
|
|
4922
|
+
this._t = 0;
|
|
4923
|
+
}
|
|
4924
|
+
mount() {
|
|
4925
|
+
registerShopPack();
|
|
4926
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
4927
|
+
const label = this.textContent?.trim() || this.str('label', 'Add to cart');
|
|
4928
|
+
this.textContent = '';
|
|
4929
|
+
this.insertAdjacentHTML('afterbegin', '<button type="button" class="usa-atc-btn" data-usa-part><span class="usa-atc-label"></span><span class="usa-atc-done" aria-hidden="true">✓ <span></span></span></button><span class="usa-atc-live" data-usa-part aria-live="polite"></span>');
|
|
4930
|
+
this.querySelector('.usa-atc-label').textContent = label;
|
|
4931
|
+
this.querySelector('.usa-atc-done span').textContent = this.str('added', 'Added');
|
|
4932
|
+
this.listen(this.querySelector('.usa-atc-btn'), 'click', () => this.add());
|
|
4933
|
+
this.onCleanup(() => this._t && clearTimeout(this._t));
|
|
4934
|
+
}
|
|
4935
|
+
add() {
|
|
4936
|
+
let item = {};
|
|
4937
|
+
try {
|
|
4938
|
+
item = JSON.parse(this.str('item', '{}'));
|
|
4939
|
+
}
|
|
4940
|
+
catch {
|
|
4941
|
+
item = { name: this.str('item', '') };
|
|
4942
|
+
}
|
|
4943
|
+
const cartSel = this.str('cart', '[data-cart]');
|
|
4944
|
+
const cart = document.querySelector(cartSel);
|
|
4945
|
+
const from = (this.str('from', '') && document.querySelector(this.str('from', ''))) || this.closest('[data-product]')?.querySelector('img') || this;
|
|
4946
|
+
if (getEffect('fly-to-cart'))
|
|
4947
|
+
void playEffect(from, 'fly-to-cart', { to: cart?.matches('usa-cart-drawer') ? `${cartSel} .usa-cd2-toggle` : cartSel });
|
|
4948
|
+
cart?.add?.(item);
|
|
4949
|
+
this.setAttribute('data-added', '');
|
|
4950
|
+
this.querySelector('.usa-atc-live').textContent = `${this.str('added', 'Added')} to cart`;
|
|
4951
|
+
if (!this.reduced)
|
|
4952
|
+
this.motion(this.querySelector('.usa-atc-btn'), [{ transform: 'scale(1)' }, { transform: 'scale(.92)', offset: 0.3 }, { transform: 'scale(1)' }], { duration: 380, easing: 'ease-out' });
|
|
4953
|
+
if (this._t)
|
|
4954
|
+
clearTimeout(this._t);
|
|
4955
|
+
this._t = setTimeout(() => this.removeAttribute('data-added'), this.num('hold', 1600));
|
|
4956
|
+
this.emit('add', { item });
|
|
4957
|
+
}
|
|
4958
|
+
}
|
|
4959
|
+
return UsaAddToCart;
|
|
4960
|
+
}, { id: 'add-to-cart', text: css$3 });
|
|
4961
|
+
}
|
|
4962
|
+
|
|
4963
|
+
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}";
|
|
4964
|
+
|
|
4965
|
+
/** Cart total (7.3). */
|
|
4966
|
+
const cartTotal = (items) => Math.round(items.reduce((a, i) => a + (Number(i.price) || 0) * (i.qty || 1), 0) * 100) / 100;
|
|
4967
|
+
function defineCartDrawer(tag = 'usa-cart-drawer') {
|
|
4968
|
+
return defineElement(tag, (Base) => {
|
|
4969
|
+
class UsaCartDrawer extends Base {
|
|
4970
|
+
constructor() {
|
|
4971
|
+
super(...arguments);
|
|
4972
|
+
this._items = [];
|
|
4973
|
+
this._open = false;
|
|
4974
|
+
this._ret = null;
|
|
4975
|
+
}
|
|
4976
|
+
get items() {
|
|
4977
|
+
return this._items.map((i) => ({ ...i }));
|
|
4978
|
+
}
|
|
4979
|
+
set items(v) {
|
|
4980
|
+
this._items = (v || []).map((i) => ({ ...i, id: i.id || i.name, qty: i.qty || 1 }));
|
|
4981
|
+
if (this.isConnected)
|
|
4982
|
+
this.render(null);
|
|
4983
|
+
}
|
|
4984
|
+
get total() {
|
|
4985
|
+
return cartTotal(this._items);
|
|
4986
|
+
}
|
|
4987
|
+
get count() {
|
|
4988
|
+
return this._items.reduce((a, i) => a + (i.qty || 1), 0);
|
|
4989
|
+
}
|
|
4990
|
+
get open() {
|
|
4991
|
+
return this._open;
|
|
4992
|
+
}
|
|
4993
|
+
set open(v) {
|
|
4994
|
+
this.toggle(!!v);
|
|
4995
|
+
}
|
|
4996
|
+
mount() {
|
|
4997
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
4998
|
+
const label = this.str('label', 'Cart');
|
|
4999
|
+
this.insertAdjacentHTML('afterbegin', `<button type="button" class="usa-cd2-toggle" data-usa-part aria-haspopup="dialog" aria-expanded="false"><span aria-hidden="true">🛒</span><b class="usa-cd2-badge" aria-live="polite"></b></button><div class="usa-cd2-backdrop" data-usa-part hidden></div><div class="usa-cd2-panel" data-usa-part role="dialog" aria-modal="true" hidden tabindex="-1"><header><strong></strong><button type="button" class="usa-cd2-close" aria-label="Close">×</button></header><ul class="usa-cd2-list"></ul><p class="usa-cd2-empty">Your cart is empty</p><footer><span>Total</span><b class="usa-cd2-total"></b></footer></div>`);
|
|
5000
|
+
this.querySelector('.usa-cd2-panel strong').textContent = label;
|
|
5001
|
+
this.querySelector('.usa-cd2-panel').setAttribute('aria-label', label);
|
|
5002
|
+
this.listen(this.querySelector('.usa-cd2-toggle'), 'click', () => this.toggle());
|
|
5003
|
+
this.listen(this.querySelector('.usa-cd2-close'), 'click', () => this.toggle(false));
|
|
5004
|
+
this.listen(this.querySelector('.usa-cd2-backdrop'), 'click', () => this.toggle(false));
|
|
5005
|
+
this.listen(this, 'keydown', (e) => e.key === 'Escape' && this._open && this.toggle(false));
|
|
5006
|
+
this.listen(this.querySelector('.usa-cd2-list'), 'click', (e) => {
|
|
5007
|
+
const b = e.target.closest('[data-rm]');
|
|
5008
|
+
if (b)
|
|
5009
|
+
this.removeItem(b.dataset.rm);
|
|
5010
|
+
});
|
|
5011
|
+
if (!this._items.length) {
|
|
5012
|
+
try {
|
|
5013
|
+
const init = JSON.parse(this.str('items', '[]'));
|
|
5014
|
+
if (Array.isArray(init))
|
|
5015
|
+
this._items = init.map((i) => ({ ...i, id: i.id || i.name, qty: i.qty || 1 }));
|
|
5016
|
+
}
|
|
5017
|
+
catch {
|
|
5018
|
+
/* ignore bad JSON */
|
|
5019
|
+
}
|
|
5020
|
+
}
|
|
5021
|
+
this.render(null);
|
|
5022
|
+
}
|
|
5023
|
+
toggle(force) {
|
|
5024
|
+
const on = force ?? !this._open;
|
|
5025
|
+
if (on === this._open)
|
|
5026
|
+
return;
|
|
5027
|
+
this._open = on;
|
|
5028
|
+
const panel = this.querySelector('.usa-cd2-panel');
|
|
5029
|
+
const bd = this.querySelector('.usa-cd2-backdrop');
|
|
5030
|
+
this.querySelector('.usa-cd2-toggle').setAttribute('aria-expanded', String(on));
|
|
5031
|
+
this.toggleAttribute('data-open', on);
|
|
5032
|
+
if (on) {
|
|
5033
|
+
this._ret = document.activeElement || null;
|
|
5034
|
+
panel.hidden = bd.hidden = false;
|
|
5035
|
+
if (!this.reduced) {
|
|
5036
|
+
this.motion(panel, [{ transform: 'translateX(105%)' }, { transform: 'none' }], { duration: 380, easing: 'cubic-bezier(.2,.9,.3,1)' });
|
|
5037
|
+
this.motion(bd, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 });
|
|
5038
|
+
}
|
|
5039
|
+
panel.focus();
|
|
5040
|
+
this.emit('open', {});
|
|
5041
|
+
}
|
|
5042
|
+
else {
|
|
5043
|
+
const done = () => {
|
|
5044
|
+
if (!this._open)
|
|
5045
|
+
panel.hidden = bd.hidden = true;
|
|
5046
|
+
};
|
|
5047
|
+
const a = this.reduced ? null : this.motion(panel, [{ transform: 'none' }, { transform: 'translateX(105%)' }], { duration: 260, easing: 'ease-in' });
|
|
5048
|
+
if (a)
|
|
5049
|
+
a.finished.then(done, done);
|
|
5050
|
+
else
|
|
5051
|
+
done();
|
|
5052
|
+
this._ret?.focus?.();
|
|
5053
|
+
this.emit('close', {});
|
|
5054
|
+
}
|
|
5055
|
+
}
|
|
5056
|
+
add(item) {
|
|
5057
|
+
const id = item.id || item.name;
|
|
5058
|
+
const hit = this._items.find((i) => i.id === id);
|
|
5059
|
+
if (hit)
|
|
5060
|
+
hit.qty = (hit.qty || 1) + (item.qty || 1);
|
|
5061
|
+
else
|
|
5062
|
+
this._items.push({ ...item, id, qty: item.qty || 1 });
|
|
5063
|
+
this.render(id);
|
|
5064
|
+
}
|
|
5065
|
+
removeItem(id) {
|
|
5066
|
+
const li = Array.from(this.querySelectorAll('.usa-cd2-item')).find((n) => n.dataset.id === id) || null;
|
|
5067
|
+
this._items = this._items.filter((i) => i.id !== id);
|
|
5068
|
+
const a = li && !this.reduced ? this.motion(li, [{ opacity: 1, maxHeight: `${li.offsetHeight}px` }, { opacity: 0, maxHeight: '0px', paddingTop: '0', paddingBottom: '0' }], { duration: 260, fill: 'forwards' }) : null;
|
|
5069
|
+
if (a)
|
|
5070
|
+
a.finished.then(() => this.render(null), () => this.render(null));
|
|
5071
|
+
else
|
|
5072
|
+
this.render(null);
|
|
5073
|
+
}
|
|
5074
|
+
render(changed) {
|
|
5075
|
+
const cur = this.str('currency', '$');
|
|
5076
|
+
const list = this.querySelector('.usa-cd2-list');
|
|
5077
|
+
const old = new Map(Array.from(list.children).map((li) => [li.dataset.id, li]));
|
|
5078
|
+
for (const it of this._items) {
|
|
5079
|
+
let li = old.get(it.id);
|
|
5080
|
+
old.delete(it.id);
|
|
5081
|
+
const isNew = !li;
|
|
5082
|
+
if (!li) {
|
|
5083
|
+
li = document.createElement('li');
|
|
5084
|
+
li.className = 'usa-cd2-item';
|
|
5085
|
+
li.dataset.id = it.id;
|
|
5086
|
+
li.innerHTML = `${it.img ? '<img alt="">' : '<i aria-hidden="true"></i>'}<span class="usa-cd2-name"></span><span class="usa-cd2-qty"></span><span class="usa-cd2-price"></span><button type="button" class="usa-cd2-rm">×</button>`;
|
|
5087
|
+
if (it.img)
|
|
5088
|
+
li.querySelector('img').setAttribute('src', it.img);
|
|
5089
|
+
}
|
|
5090
|
+
li.querySelector('.usa-cd2-name').textContent = it.name;
|
|
5091
|
+
li.querySelector('.usa-cd2-qty').textContent = `×${it.qty || 1}`;
|
|
5092
|
+
li.querySelector('.usa-cd2-price').textContent = `${cur}${((it.price || 0) * (it.qty || 1)).toFixed(2)}`;
|
|
5093
|
+
const rm = li.querySelector('.usa-cd2-rm');
|
|
5094
|
+
rm.dataset.rm = it.id;
|
|
5095
|
+
rm.setAttribute('aria-label', `Remove ${it.name}`);
|
|
5096
|
+
list.appendChild(li);
|
|
5097
|
+
if (changed === it.id && !this.reduced)
|
|
5098
|
+
this.motion(li, isNew ? [{ transform: 'translateX(40px)', opacity: 0 }, { transform: 'none', opacity: 1 }] : [{ background: 'rgba(124,92,255,.18)' }, { background: 'transparent' }], { duration: 420, easing: 'cubic-bezier(.2,.9,.3,1.2)' });
|
|
5099
|
+
}
|
|
5100
|
+
old.forEach((li) => li.remove());
|
|
5101
|
+
const n = this.count;
|
|
5102
|
+
const badge = this.querySelector('.usa-cd2-badge');
|
|
5103
|
+
badge.textContent = n ? String(n) : '';
|
|
5104
|
+
this.querySelector('.usa-cd2-toggle').setAttribute('aria-label', `${this.str('label', 'Cart')}, ${n} item${n === 1 ? '' : 's'}`);
|
|
5105
|
+
if (changed && !this.reduced)
|
|
5106
|
+
this.motion(badge, [{ transform: 'scale(1)' }, { transform: 'scale(1.5)', offset: 0.4 }, { transform: 'scale(1)' }], { duration: 420, easing: 'ease-out' });
|
|
5107
|
+
this.querySelector('.usa-cd2-empty').hidden = !!this._items.length;
|
|
5108
|
+
const tot = this.querySelector('.usa-cd2-total');
|
|
5109
|
+
const to = this.total;
|
|
5110
|
+
const from = Number(tot.dataset.v || 0);
|
|
5111
|
+
tot.dataset.v = String(to);
|
|
5112
|
+
if (this.reduced || from === to || typeof requestAnimationFrame !== 'function')
|
|
5113
|
+
tot.textContent = `${cur}${to.toFixed(2)}`;
|
|
5114
|
+
else {
|
|
5115
|
+
const t0 = performance.now();
|
|
5116
|
+
const f = (now) => {
|
|
5117
|
+
const k = Math.min(1, (now - t0) / 500);
|
|
5118
|
+
tot.textContent = `${cur}${(from + (to - from) * (1 - Math.pow(1 - k, 3))).toFixed(2)}`;
|
|
5119
|
+
if (k < 1)
|
|
5120
|
+
requestAnimationFrame(f);
|
|
5121
|
+
};
|
|
5122
|
+
requestAnimationFrame(f);
|
|
5123
|
+
}
|
|
5124
|
+
this.emit('change', { items: this.items, total: to });
|
|
5125
|
+
}
|
|
5126
|
+
}
|
|
5127
|
+
return UsaCartDrawer;
|
|
5128
|
+
}, { id: 'cart-drawer', text: css$2 });
|
|
5129
|
+
}
|
|
5130
|
+
|
|
5131
|
+
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}}";
|
|
5132
|
+
|
|
5133
|
+
/** Wrap an index into 0..n-1 (7.3). */
|
|
5134
|
+
const wrapIndex = (i, n) => (n ? ((i % n) + n) % n : 0);
|
|
5135
|
+
function defineProductGallery(tag = 'usa-product-gallery') {
|
|
5136
|
+
return defineElement(tag, (Base) => {
|
|
5137
|
+
class UsaProductGallery extends Base {
|
|
5138
|
+
constructor() {
|
|
5139
|
+
super(...arguments);
|
|
5140
|
+
this._i = 0;
|
|
5141
|
+
this._imgs = [];
|
|
5142
|
+
}
|
|
5143
|
+
static get observedAttributes() {
|
|
5144
|
+
return ['index'];
|
|
5145
|
+
}
|
|
5146
|
+
get count() {
|
|
5147
|
+
return this._imgs.length;
|
|
5148
|
+
}
|
|
5149
|
+
get index() {
|
|
5150
|
+
return this._i;
|
|
5151
|
+
}
|
|
5152
|
+
set index(v) {
|
|
5153
|
+
this.go(v);
|
|
5154
|
+
}
|
|
5155
|
+
mount() {
|
|
5156
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
5157
|
+
this._imgs = Array.from(this.querySelectorAll(':scope > img'));
|
|
5158
|
+
this._imgs.forEach((im) => (im.hidden = true));
|
|
5159
|
+
this.insertAdjacentHTML('beforeend', '<div class="usa-pg2-stage" data-usa-part role="group" tabindex="0"><img class="usa-pg2-main" alt=""></div><div class="usa-pg2-thumbs" data-usa-part role="tablist" aria-label="Product images"></div>');
|
|
5160
|
+
const thumbs = this.querySelector('.usa-pg2-thumbs');
|
|
5161
|
+
this._imgs.forEach((im, i) => {
|
|
5162
|
+
const b = document.createElement('button');
|
|
5163
|
+
b.type = 'button';
|
|
5164
|
+
b.className = 'usa-pg2-thumb';
|
|
5165
|
+
b.setAttribute('role', 'tab');
|
|
5166
|
+
b.setAttribute('aria-label', im.alt || `Image ${i + 1}`);
|
|
5167
|
+
b.innerHTML = `<img alt="" src="${im.getAttribute('src') || ''}">`;
|
|
5168
|
+
this.listen(b, 'click', () => this.go(i));
|
|
5169
|
+
thumbs.appendChild(b);
|
|
5170
|
+
});
|
|
5171
|
+
thumbs.insertAdjacentHTML('beforeend', '<i class="usa-pg2-ring" aria-hidden="true"></i>');
|
|
5172
|
+
const stage = this.querySelector('.usa-pg2-stage');
|
|
5173
|
+
const main = this.querySelector('.usa-pg2-main');
|
|
5174
|
+
this.listen(stage, 'keydown', (e) => {
|
|
5175
|
+
if (e.key === 'ArrowRight')
|
|
5176
|
+
(this.next(), e.preventDefault());
|
|
5177
|
+
if (e.key === 'ArrowLeft')
|
|
5178
|
+
(this.prev(), e.preventDefault());
|
|
5179
|
+
});
|
|
5180
|
+
this.listen(thumbs, 'keydown', (e) => {
|
|
5181
|
+
if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
|
|
5182
|
+
e.key === 'ArrowRight' ? this.next() : this.prev();
|
|
5183
|
+
thumbs.children[this._i]?.focus();
|
|
5184
|
+
e.preventDefault();
|
|
5185
|
+
}
|
|
5186
|
+
});
|
|
5187
|
+
let sx = 0;
|
|
5188
|
+
this.listen(stage, 'pointerdown', (e) => (sx = e.clientX));
|
|
5189
|
+
this.listen(stage, 'pointerup', (e) => {
|
|
5190
|
+
const dx = e.clientX - sx;
|
|
5191
|
+
if (e.pointerType !== 'mouse' && Math.abs(dx) > 40)
|
|
5192
|
+
dx < 0 ? this.next() : this.prev();
|
|
5193
|
+
});
|
|
5194
|
+
this.listen(stage, 'pointermove', (e) => {
|
|
5195
|
+
if (e.pointerType !== 'mouse' || this.reduced || this.flag('nozoom'))
|
|
5196
|
+
return;
|
|
5197
|
+
const r = stage.getBoundingClientRect();
|
|
5198
|
+
main.style.transformOrigin = `${(((e.clientX - r.left) / r.width) * 100).toFixed(1)}% ${(((e.clientY - r.top) / r.height) * 100).toFixed(1)}%`;
|
|
5199
|
+
main.style.transform = `scale(${this.num('zoom', 2)})`;
|
|
5200
|
+
});
|
|
5201
|
+
this.listen(stage, 'pointerleave', () => (main.style.transform = ''));
|
|
5202
|
+
this._i = wrapIndex(this.num('index', 0), this.count);
|
|
5203
|
+
this.paint(0);
|
|
5204
|
+
}
|
|
5205
|
+
changed() {
|
|
5206
|
+
if (this.isConnected && this._imgs.length)
|
|
5207
|
+
this.go(this.num('index', 0));
|
|
5208
|
+
}
|
|
5209
|
+
go(i) {
|
|
5210
|
+
const n = wrapIndex(Math.round(i), this.count);
|
|
5211
|
+
if (n === this._i)
|
|
5212
|
+
return;
|
|
5213
|
+
const dir = n > this._i ? 1 : -1;
|
|
5214
|
+
this._i = n;
|
|
5215
|
+
this.paint(dir);
|
|
5216
|
+
this.emit('change', { index: n });
|
|
5217
|
+
}
|
|
5218
|
+
next() {
|
|
5219
|
+
this.go(wrapIndex(this._i + 1, this.count));
|
|
5220
|
+
}
|
|
5221
|
+
prev() {
|
|
5222
|
+
this.go(wrapIndex(this._i - 1, this.count));
|
|
5223
|
+
}
|
|
5224
|
+
paint(dir) {
|
|
5225
|
+
const im = this._imgs[this._i];
|
|
5226
|
+
const main = this.querySelector('.usa-pg2-main');
|
|
5227
|
+
if (!im || !main)
|
|
5228
|
+
return;
|
|
5229
|
+
main.src = im.getAttribute('src') || '';
|
|
5230
|
+
main.alt = im.alt;
|
|
5231
|
+
this.querySelector('.usa-pg2-stage').setAttribute('aria-label', `Image ${this._i + 1} of ${this.count}${im.alt ? `: ${im.alt}` : ''}`);
|
|
5232
|
+
const thumbs = Array.from(this.querySelectorAll('.usa-pg2-thumb'));
|
|
5233
|
+
thumbs.forEach((t, k) => (t.setAttribute('aria-selected', String(k === this._i)), (t.tabIndex = k === this._i ? 0 : -1)));
|
|
5234
|
+
const t = thumbs[this._i];
|
|
5235
|
+
const ring = this.querySelector('.usa-pg2-ring');
|
|
5236
|
+
if (t && ring) {
|
|
5237
|
+
ring.style.transform = `translateX(${t.offsetLeft}px)`;
|
|
5238
|
+
ring.style.width = `${t.offsetWidth || 56}px`;
|
|
5239
|
+
}
|
|
5240
|
+
if (dir && !this.reduced)
|
|
5241
|
+
this.motion(main, [{ transform: `translateX(${dir * 18}%)`, opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: 380, easing: 'cubic-bezier(.2,.8,.2,1)' });
|
|
5242
|
+
}
|
|
5243
|
+
}
|
|
5244
|
+
return UsaProductGallery;
|
|
5245
|
+
}, { id: 'product-gallery', text: css$1 });
|
|
5246
|
+
}
|
|
5247
|
+
|
|
5248
|
+
var css = "usa-countdown{display:inline-block;font:700 12px/1.2 system-ui,sans-serif;color:var(--usa-cd-fg,inherit)}.usa-cd-row{display:flex;gap:var(--usa-cd-gap,10px)}.usa-cd-unit{display:flex;flex-direction:column;align-items:center;gap:4px}.usa-cd-unit small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.6}.usa-cd-digits{display:flex;gap:3px;perspective:300px}.usa-cd-d{display:grid;place-items:center;width:var(--usa-cd-w,28px);height:calc(var(--usa-cd-w,28px) * 1.35);border-radius:6px;background:var(--usa-cd-bg,#111827);color:var(--usa-cd-c,#fff);font:800 calc(var(--usa-cd-w,28px) * .8)/1 ui-monospace,monospace;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),0 4px 10px -4px rgba(0,0,0,.5);background-image:linear-gradient(transparent 49%,rgba(0,0,0,.35) 50%,transparent 51%);transform-origin:50% 50%}usa-countdown[data-done] .usa-cd-d{background-color:var(--usa-cd-done,#ef4444)}";
|
|
5249
|
+
|
|
5250
|
+
/** Split seconds into d/h/m/s (7.3). */
|
|
5251
|
+
function splitTime(sec) {
|
|
5252
|
+
const t = Math.max(0, Math.floor(sec));
|
|
5253
|
+
return { d: Math.floor(t / 86400), h: Math.floor((t % 86400) / 3600), m: Math.floor((t % 3600) / 60), s: t % 60 };
|
|
5254
|
+
}
|
|
5255
|
+
const NAMES = { d: 'days', h: 'hours', m: 'minutes', s: 'seconds' };
|
|
5256
|
+
function defineCountdown(tag = 'usa-countdown') {
|
|
5257
|
+
return defineElement(tag, (Base) => {
|
|
5258
|
+
class UsaCountdown extends Base {
|
|
5259
|
+
constructor() {
|
|
5260
|
+
super(...arguments);
|
|
5261
|
+
this._end = 0;
|
|
5262
|
+
this._timer = 0;
|
|
5263
|
+
this._lastMin = -1;
|
|
5264
|
+
}
|
|
5265
|
+
static get observedAttributes() {
|
|
5266
|
+
return ['to', 'seconds'];
|
|
5267
|
+
}
|
|
5268
|
+
get left() {
|
|
5269
|
+
return Math.max(0, Math.round((this._end - Date.now()) / 1000));
|
|
5270
|
+
}
|
|
5271
|
+
mount() {
|
|
5272
|
+
const units = this.str('units', 'd,h,m,s').split(',').map((u) => u.trim()).filter((u) => u in NAMES);
|
|
5273
|
+
const labels = this.str('labels', '').split(',');
|
|
5274
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
5275
|
+
this.insertAdjacentHTML('afterbegin', `<span class="usa-cd-row" data-usa-part aria-hidden="true">${units.map((u, i) => `<span class="usa-cd-unit" data-u="${u}"><span class="usa-cd-digits"></span><small>${labels[i]?.trim() || NAMES[u]}</small></span>`).join('')}</span>`);
|
|
5276
|
+
this.setAttribute('role', 'timer');
|
|
5277
|
+
this.reset();
|
|
5278
|
+
this.onCleanup(() => this.stop());
|
|
5279
|
+
this.start();
|
|
5280
|
+
}
|
|
5281
|
+
changed() {
|
|
5282
|
+
if (this.isConnected)
|
|
5283
|
+
(this.reset(), this.start());
|
|
5284
|
+
}
|
|
5285
|
+
reset() {
|
|
5286
|
+
const to = this.str('to', '');
|
|
5287
|
+
const t = to ? Date.parse(to) : NaN;
|
|
5288
|
+
this._end = Number.isFinite(t) ? t : Date.now() + this.num('seconds', 60) * 1000;
|
|
5289
|
+
this._lastMin = -1;
|
|
5290
|
+
this.removeAttribute('data-done');
|
|
5291
|
+
this.paint(false);
|
|
5292
|
+
}
|
|
5293
|
+
start() {
|
|
5294
|
+
this.stop();
|
|
5295
|
+
this._timer = setInterval(() => this.paint(true), 1000);
|
|
5296
|
+
}
|
|
5297
|
+
stop() {
|
|
5298
|
+
if (this._timer)
|
|
5299
|
+
clearInterval(this._timer);
|
|
5300
|
+
this._timer = 0;
|
|
5301
|
+
}
|
|
5302
|
+
paint(flip) {
|
|
5303
|
+
const left = this.left;
|
|
5304
|
+
const t = splitTime(left);
|
|
5305
|
+
this.querySelectorAll('.usa-cd-unit').forEach((u) => {
|
|
5306
|
+
const key = u.dataset.u;
|
|
5307
|
+
const val = String(key === 'h' && !this.querySelector('[data-u="d"]') ? t.h + t.d * 24 : t[key]).padStart(2, '0');
|
|
5308
|
+
const box = u.querySelector('.usa-cd-digits');
|
|
5309
|
+
while (box.children.length < val.length)
|
|
5310
|
+
box.insertAdjacentHTML('afterbegin', '<b class="usa-cd-d">0</b>');
|
|
5311
|
+
while (box.children.length > val.length)
|
|
5312
|
+
box.firstElementChild.remove();
|
|
5313
|
+
Array.from(box.children).forEach((d, i) => {
|
|
5314
|
+
if (d.textContent === val[i])
|
|
5315
|
+
return;
|
|
5316
|
+
d.textContent = val[i];
|
|
5317
|
+
if (flip && !this.reduced)
|
|
5318
|
+
this.motion(d, [{ transform: 'rotateX(-90deg)', filter: 'brightness(.7)' }, { transform: 'none', filter: 'none' }], { duration: 360, easing: 'cubic-bezier(.3,1.4,.6,1)' });
|
|
5319
|
+
});
|
|
5320
|
+
});
|
|
5321
|
+
const min = Math.floor(left / 60);
|
|
5322
|
+
if (min !== this._lastMin) {
|
|
5323
|
+
this._lastMin = min;
|
|
5324
|
+
this.setAttribute('aria-label', `${this.str('label', 'Time left')}: ${t.d ? `${t.d} days ` : ''}${t.h} hours ${t.m} minutes`);
|
|
5325
|
+
}
|
|
5326
|
+
if (flip)
|
|
5327
|
+
this.emit('tick', { left });
|
|
5328
|
+
if (left <= 0 && !this.hasAttribute('data-done')) {
|
|
5329
|
+
this.setAttribute('data-done', '');
|
|
5330
|
+
this.stop();
|
|
5331
|
+
this.emit('done', {});
|
|
5332
|
+
}
|
|
5333
|
+
}
|
|
5334
|
+
}
|
|
5335
|
+
return UsaCountdown;
|
|
5336
|
+
}, { id: 'countdown', text: css });
|
|
4506
5337
|
}
|
|
4507
5338
|
|
|
4508
5339
|
/**
|
|
@@ -4528,6 +5359,8 @@ const WIDGETS = {
|
|
|
4528
5359
|
'6.8': { 'usa-kanban': defineKanban, 'usa-swipe-deck': defineSwipeDeck, 'usa-weather-card': defineWeatherCard, 'usa-pull-cord': definePullCord },
|
|
4529
5360
|
'6.9': { 'usa-date-picker': defineDatePicker, 'usa-color-picker': defineColorPicker, 'usa-file-drop': defineFileDrop, 'usa-keyframe-editor': defineKeyframeEditor },
|
|
4530
5361
|
'7.1': { 'usa-music-player': defineMusicPlayer, 'usa-volume-knob': defineVolumeKnob, 'usa-equalizer': defineEqualizer, 'usa-lyrics': defineLyrics },
|
|
5362
|
+
'7.2': { 'usa-bar-chart': defineBarChart, 'usa-gauge': defineGauge, 'usa-sparkline': defineSparkline, 'usa-kpi': defineKpi },
|
|
5363
|
+
'7.3': { 'usa-add-to-cart': defineAddToCart, 'usa-cart-drawer': defineCartDrawer, 'usa-product-gallery': defineProductGallery, 'usa-countdown': defineCountdown },
|
|
4531
5364
|
};
|
|
4532
5365
|
/** Every widget tag, in release order. */
|
|
4533
5366
|
const WIDGET_TAGS = Object.values(WIDGETS).flatMap((g) => Object.keys(g));
|
|
@@ -4539,5 +5372,5 @@ function defineWidgets(release) {
|
|
|
4539
5372
|
fn(tag);
|
|
4540
5373
|
}
|
|
4541
5374
|
|
|
4542
|
-
export { CAROUSEL_EFFECTS, EQ_PRESETS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, defineCarousel, defineColorPicker, defineCompare, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFileDrop, defineKanban, defineKeyframeEditor, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineOdometer, definePagination, defineProgressRing, definePullCord, defineSegmented, defineSheet, defineSkeletonReveal, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineVolumeKnob, defineWeatherCard, defineWidgets, hexToHsv, hsvToHex, monthGrid, pageWindow, parseISODate, parseLRC, stackToast };
|
|
5375
|
+
export { CAROUSEL_EFFECTS, EQ_PRESETS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, cartTotal, defineAddToCart, defineBarChart, defineCarousel, defineCartDrawer, defineColorPicker, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFileDrop, defineGauge, defineKanban, defineKeyframeEditor, defineKpi, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineOdometer, definePagination, defineProductGallery, defineProgressRing, definePullCord, defineSegmented, defineSheet, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineVolumeKnob, defineWeatherCard, defineWidgets, hexToHsv, hsvToHex, monthGrid, pageWindow, parseISODate, parseLRC, sparkPoints, splitTime, stackToast, wrapIndex };
|
|
4543
5376
|
//# sourceMappingURL=widgets.js.map
|