motionary 7.1.0 → 7.2.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 +14 -0
- 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/fx2.cjs +6 -0
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +30 -1
- package/dist/components/fx2.d.ts +30 -1
- package/dist/components/fx2.js +5 -1
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/widgets.cjs +480 -69
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +66 -2
- package/dist/components/widgets.d.ts +66 -2
- package/dist/components/widgets.js +475 -70
- package/dist/components/widgets.js.map +1 -1
- package/dist/widgets.umd.js +1 -1
- package/dist/widgets.umd.js.map +1 -1
- package/docs/ROADMAP.md +1 -1
- package/docs/components.md +24 -0
- package/package.json +21 -1
|
@@ -40,7 +40,7 @@ function arrowIndex(e, i, n, vertical = false) {
|
|
|
40
40
|
return -1;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
var css$
|
|
43
|
+
var css$B = "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
44
|
|
|
45
45
|
const CAROUSEL_EFFECTS = ['slide', 'fade', 'scale', 'cards'];
|
|
46
46
|
function defineCarousel(tag = 'usa-carousel') {
|
|
@@ -229,10 +229,10 @@ function defineCarousel(tag = 'usa-carousel') {
|
|
|
229
229
|
}
|
|
230
230
|
}
|
|
231
231
|
return UsaCarousel;
|
|
232
|
-
}, { id: 'carousel', text: css$
|
|
232
|
+
}, { id: 'carousel', text: css$B });
|
|
233
233
|
}
|
|
234
234
|
|
|
235
|
-
var css$
|
|
235
|
+
var css$A = "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
236
|
|
|
237
237
|
const TAB_INDICATORS = ['pill', 'underline', 'glow', 'gooey'];
|
|
238
238
|
function defineTabBar(tag = 'usa-tab-bar') {
|
|
@@ -345,10 +345,10 @@ function defineTabBar(tag = 'usa-tab-bar') {
|
|
|
345
345
|
}
|
|
346
346
|
}
|
|
347
347
|
return UsaTabBar;
|
|
348
|
-
}, { id: 'tab-bar', text: css$
|
|
348
|
+
}, { id: 'tab-bar', text: css$A });
|
|
349
349
|
}
|
|
350
350
|
|
|
351
|
-
var css$
|
|
351
|
+
var css$z = "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
352
|
|
|
353
353
|
function defineDisclosure(tag = 'usa-disclosure') {
|
|
354
354
|
return defineElement(tag, (Base) => {
|
|
@@ -416,10 +416,10 @@ function defineDisclosure(tag = 'usa-disclosure') {
|
|
|
416
416
|
}
|
|
417
417
|
}
|
|
418
418
|
return UsaDisclosure;
|
|
419
|
-
}, { id: 'disclosure', text: css$
|
|
419
|
+
}, { id: 'disclosure', text: css$z });
|
|
420
420
|
}
|
|
421
421
|
|
|
422
|
-
var css$
|
|
422
|
+
var css$y = "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
423
|
|
|
424
424
|
function defineStories(tag = 'usa-stories') {
|
|
425
425
|
return defineElement(tag, (Base) => {
|
|
@@ -552,10 +552,10 @@ function defineStories(tag = 'usa-stories') {
|
|
|
552
552
|
}
|
|
553
553
|
}
|
|
554
554
|
return UsaStories;
|
|
555
|
-
}, { id: 'stories', text: css$
|
|
555
|
+
}, { id: 'stories', text: css$y });
|
|
556
556
|
}
|
|
557
557
|
|
|
558
|
-
var css$
|
|
558
|
+
var css$x = "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
559
|
|
|
560
560
|
const MODAL_EFFECTS = ['scale', 'slide-up', 'flip', 'origin'];
|
|
561
561
|
const SHEET_SIDES = ['right', 'left', 'bottom', 'top'];
|
|
@@ -782,12 +782,12 @@ function defineOverlay(tag, kind) {
|
|
|
782
782
|
}
|
|
783
783
|
}
|
|
784
784
|
return UsaOverlay;
|
|
785
|
-
}, { id: 'overlay', text: css$
|
|
785
|
+
}, { id: 'overlay', text: css$x });
|
|
786
786
|
}
|
|
787
787
|
const defineModal = (tag = 'usa-modal') => defineOverlay(tag, 'modal');
|
|
788
788
|
const defineSheet = (tag = 'usa-sheet') => defineOverlay(tag, 'sheet');
|
|
789
789
|
|
|
790
|
-
var css$
|
|
790
|
+
var css$w = "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
791
|
|
|
792
792
|
const TOAST_POSITIONS = ['bottom-right', 'bottom-left', 'bottom-center', 'top-right', 'top-left', 'top-center'];
|
|
793
793
|
const ICONS = { info: 'ℹ', success: '✓', warning: '!', error: '✕' };
|
|
@@ -958,7 +958,7 @@ function defineToastStack(tag = 'usa-toast-stack') {
|
|
|
958
958
|
}
|
|
959
959
|
}
|
|
960
960
|
return UsaToastStack;
|
|
961
|
-
}, { id: 'toast', text: css$
|
|
961
|
+
}, { id: 'toast', text: css$w });
|
|
962
962
|
}
|
|
963
963
|
/** Show a toast on the first `<usa-toast-stack>` of the page (one is created when missing). */
|
|
964
964
|
function stackToast(input, stack) {
|
|
@@ -986,7 +986,7 @@ function installToastTriggers() {
|
|
|
986
986
|
});
|
|
987
987
|
}
|
|
988
988
|
|
|
989
|
-
var css$
|
|
989
|
+
var css$v = "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
990
|
|
|
991
991
|
const MENU_EFFECTS = ['scale', 'fold', 'slide'];
|
|
992
992
|
function defineMenu(tag = 'usa-menu') {
|
|
@@ -1125,10 +1125,10 @@ function defineMenu(tag = 'usa-menu') {
|
|
|
1125
1125
|
}
|
|
1126
1126
|
}
|
|
1127
1127
|
return UsaMenu;
|
|
1128
|
-
}, { id: 'menu', text: css$
|
|
1128
|
+
}, { id: 'menu', text: css$v });
|
|
1129
1129
|
}
|
|
1130
1130
|
|
|
1131
|
-
var css$
|
|
1131
|
+
var css$u = "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
1132
|
|
|
1133
1133
|
const PROGRESS_VARIANTS = ['ring', 'bar', 'semi'];
|
|
1134
1134
|
const NS = 'http://www.w3.org/2000/svg';
|
|
@@ -1268,7 +1268,7 @@ function defineProgressRing(tag = 'usa-progress-ring') {
|
|
|
1268
1268
|
}
|
|
1269
1269
|
}
|
|
1270
1270
|
return UsaProgressRing;
|
|
1271
|
-
}, { id: 'meters', text: css$
|
|
1271
|
+
}, { id: 'meters', text: css$u });
|
|
1272
1272
|
}
|
|
1273
1273
|
function defineOdometer(tag = 'usa-odometer') {
|
|
1274
1274
|
return defineElement(tag, (Base) => {
|
|
@@ -1378,10 +1378,10 @@ function defineOdometer(tag = 'usa-odometer') {
|
|
|
1378
1378
|
}
|
|
1379
1379
|
}
|
|
1380
1380
|
return UsaOdometer;
|
|
1381
|
-
}, { id: 'meters', text: css$
|
|
1381
|
+
}, { id: 'meters', text: css$u });
|
|
1382
1382
|
}
|
|
1383
1383
|
|
|
1384
|
-
var css$
|
|
1384
|
+
var css$t = "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
1385
|
|
|
1386
1386
|
const SKELETON_VARIANTS = ['wave', 'pulse', 'glow'];
|
|
1387
1387
|
function defineSkeletonReveal(tag = 'usa-skeleton-reveal') {
|
|
@@ -1496,10 +1496,10 @@ function defineSkeletonReveal(tag = 'usa-skeleton-reveal') {
|
|
|
1496
1496
|
}
|
|
1497
1497
|
}
|
|
1498
1498
|
return UsaSkeletonReveal;
|
|
1499
|
-
}, { id: 'skeleton-reveal', text: css$
|
|
1499
|
+
}, { id: 'skeleton-reveal', text: css$t });
|
|
1500
1500
|
}
|
|
1501
1501
|
|
|
1502
|
-
var css$
|
|
1502
|
+
var css$s = "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
1503
|
|
|
1504
1504
|
const PATHS = {
|
|
1505
1505
|
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 +1623,10 @@ function defineStarRating(tag = 'usa-star-rating') {
|
|
|
1623
1623
|
}
|
|
1624
1624
|
}
|
|
1625
1625
|
return UsaStarRating;
|
|
1626
|
-
}, { id: 'star-rating', text: css$
|
|
1626
|
+
}, { id: 'star-rating', text: css$s });
|
|
1627
1627
|
}
|
|
1628
1628
|
|
|
1629
|
-
var css$
|
|
1629
|
+
var css$r = "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
1630
|
|
|
1631
1631
|
function defineMilestones(tag = 'usa-milestones') {
|
|
1632
1632
|
return defineElement(tag, (Base) => {
|
|
@@ -1714,10 +1714,10 @@ function defineMilestones(tag = 'usa-milestones') {
|
|
|
1714
1714
|
}
|
|
1715
1715
|
}
|
|
1716
1716
|
return UsaMilestones;
|
|
1717
|
-
}, { id: 'milestones', text: css$
|
|
1717
|
+
}, { id: 'milestones', text: css$r });
|
|
1718
1718
|
}
|
|
1719
1719
|
|
|
1720
|
-
var css$
|
|
1720
|
+
var css$q = "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
1721
|
|
|
1722
1722
|
function defineMasonryFlow(tag = 'usa-masonry-flow') {
|
|
1723
1723
|
return defineElement(tag, (Base) => {
|
|
@@ -1838,10 +1838,10 @@ function defineMasonryFlow(tag = 'usa-masonry-flow') {
|
|
|
1838
1838
|
}
|
|
1839
1839
|
}
|
|
1840
1840
|
return UsaMasonryFlow;
|
|
1841
|
-
}, { id: 'masonry-flow', text: css$
|
|
1841
|
+
}, { id: 'masonry-flow', text: css$q });
|
|
1842
1842
|
}
|
|
1843
1843
|
|
|
1844
|
-
var css$
|
|
1844
|
+
var css$p = "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
1845
|
|
|
1846
1846
|
function defineCompare(tag = 'usa-compare') {
|
|
1847
1847
|
return defineElement(tag, (Base) => {
|
|
@@ -1965,10 +1965,10 @@ function defineCompare(tag = 'usa-compare') {
|
|
|
1965
1965
|
}
|
|
1966
1966
|
}
|
|
1967
1967
|
return UsaCompare;
|
|
1968
|
-
}, { id: 'compare', text: css$
|
|
1968
|
+
}, { id: 'compare', text: css$p });
|
|
1969
1969
|
}
|
|
1970
1970
|
|
|
1971
|
-
var css$
|
|
1971
|
+
var css$o = "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
1972
|
|
|
1973
1973
|
function defineCubeGallery(tag = 'usa-cube-gallery') {
|
|
1974
1974
|
return defineElement(tag, (Base) => {
|
|
@@ -2101,10 +2101,10 @@ function defineCubeGallery(tag = 'usa-cube-gallery') {
|
|
|
2101
2101
|
}
|
|
2102
2102
|
}
|
|
2103
2103
|
return UsaCubeGallery;
|
|
2104
|
-
}, { id: 'cube-gallery', text: css$
|
|
2104
|
+
}, { id: 'cube-gallery', text: css$o });
|
|
2105
2105
|
}
|
|
2106
2106
|
|
|
2107
|
-
var css$
|
|
2107
|
+
var css$n = "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
2108
|
|
|
2109
2109
|
function defineDock(tag = 'usa-dock') {
|
|
2110
2110
|
return defineElement(tag, (Base) => {
|
|
@@ -2172,10 +2172,10 @@ function defineDock(tag = 'usa-dock') {
|
|
|
2172
2172
|
}
|
|
2173
2173
|
}
|
|
2174
2174
|
return UsaDock;
|
|
2175
|
-
}, { id: 'dock', text: css$
|
|
2175
|
+
}, { id: 'dock', text: css$n });
|
|
2176
2176
|
}
|
|
2177
2177
|
|
|
2178
|
-
var css$
|
|
2178
|
+
var css$m = "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
2179
|
|
|
2180
2180
|
const NAV_INDICATORS = ['underline', 'pill', 'blob', 'dot'];
|
|
2181
2181
|
function defineNavMorph(tag = 'usa-nav-morph') {
|
|
@@ -2279,10 +2279,10 @@ function defineNavMorph(tag = 'usa-nav-morph') {
|
|
|
2279
2279
|
}
|
|
2280
2280
|
}
|
|
2281
2281
|
return UsaNavMorph;
|
|
2282
|
-
}, { id: 'nav-morph', text: css$
|
|
2282
|
+
}, { id: 'nav-morph', text: css$m });
|
|
2283
2283
|
}
|
|
2284
2284
|
|
|
2285
|
-
var css$
|
|
2285
|
+
var css$l = "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
2286
|
|
|
2287
2287
|
const TOGGLE_VARIANTS = ['cross', 'arrow', 'minus', 'plus-x'];
|
|
2288
2288
|
function defineMenuToggle(tag = 'usa-menu-toggle') {
|
|
@@ -2355,10 +2355,10 @@ function defineMenuToggle(tag = 'usa-menu-toggle') {
|
|
|
2355
2355
|
}
|
|
2356
2356
|
}
|
|
2357
2357
|
return UsaMenuToggle;
|
|
2358
|
-
}, { id: 'menu-toggle', text: css$
|
|
2358
|
+
}, { id: 'menu-toggle', text: css$l });
|
|
2359
2359
|
}
|
|
2360
2360
|
|
|
2361
|
-
var css$
|
|
2361
|
+
var css$k = "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
2362
|
|
|
2363
2363
|
const TIP_PLACEMENTS = ['top', 'bottom', 'left', 'right'];
|
|
2364
2364
|
const FLIP = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
|
|
@@ -2490,10 +2490,10 @@ function defineTip(tag = 'usa-tip') {
|
|
|
2490
2490
|
}
|
|
2491
2491
|
}
|
|
2492
2492
|
return UsaTip;
|
|
2493
|
-
}, { id: 'tip', text: css$
|
|
2493
|
+
}, { id: 'tip', text: css$k });
|
|
2494
2494
|
}
|
|
2495
2495
|
|
|
2496
|
-
var css$
|
|
2496
|
+
var css$j = "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
2497
|
|
|
2498
2498
|
function defineStepper(tag = 'usa-stepper') {
|
|
2499
2499
|
return defineElement(tag, (Base) => {
|
|
@@ -2590,10 +2590,10 @@ function defineStepper(tag = 'usa-stepper') {
|
|
|
2590
2590
|
}
|
|
2591
2591
|
}
|
|
2592
2592
|
return UsaStepper;
|
|
2593
|
-
}, { id: 'stepper', text: css$
|
|
2593
|
+
}, { id: 'stepper', text: css$j });
|
|
2594
2594
|
}
|
|
2595
2595
|
|
|
2596
|
-
var css$
|
|
2596
|
+
var css$i = "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
2597
|
|
|
2598
2598
|
/** The visible page list: numbers and `'…'` gaps (1-based). */
|
|
2599
2599
|
function pageWindow(page, total, siblings = 1) {
|
|
@@ -2715,10 +2715,10 @@ function definePagination(tag = 'usa-pagination') {
|
|
|
2715
2715
|
}
|
|
2716
2716
|
}
|
|
2717
2717
|
return UsaPagination;
|
|
2718
|
-
}, { id: 'pagination', text: css$
|
|
2718
|
+
}, { id: 'pagination', text: css$i });
|
|
2719
2719
|
}
|
|
2720
2720
|
|
|
2721
|
-
var css$
|
|
2721
|
+
var css$h = "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
2722
|
|
|
2723
2723
|
const SEGMENTED_VARIANTS = ['ios', 'pill', 'outline'];
|
|
2724
2724
|
function defineSegmented(tag = 'usa-segmented') {
|
|
@@ -2812,10 +2812,10 @@ function defineSegmented(tag = 'usa-segmented') {
|
|
|
2812
2812
|
}
|
|
2813
2813
|
}
|
|
2814
2814
|
return UsaSegmented;
|
|
2815
|
-
}, { id: 'segmented', text: css$
|
|
2815
|
+
}, { id: 'segmented', text: css$h });
|
|
2816
2816
|
}
|
|
2817
2817
|
|
|
2818
|
-
var css$
|
|
2818
|
+
var css$g = "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
2819
|
|
|
2820
2820
|
const SWITCH_VARIANTS = ['ios', 'daynight', 'bounce', 'liquid'];
|
|
2821
2821
|
function defineSwitch(tag = 'usa-switch') {
|
|
@@ -2903,10 +2903,10 @@ function defineSwitch(tag = 'usa-switch') {
|
|
|
2903
2903
|
}
|
|
2904
2904
|
}
|
|
2905
2905
|
return UsaSwitch;
|
|
2906
|
-
}, { id: 'switch', text: css$
|
|
2906
|
+
}, { id: 'switch', text: css$g });
|
|
2907
2907
|
}
|
|
2908
2908
|
|
|
2909
|
-
var css$
|
|
2909
|
+
var css$f = "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
2910
|
|
|
2911
2911
|
function defineKanban(tag = 'usa-kanban') {
|
|
2912
2912
|
return defineElement(tag, (Base) => {
|
|
@@ -3111,10 +3111,10 @@ function defineKanban(tag = 'usa-kanban') {
|
|
|
3111
3111
|
}
|
|
3112
3112
|
}
|
|
3113
3113
|
return UsaKanban;
|
|
3114
|
-
}, { id: 'kanban', text: css$
|
|
3114
|
+
}, { id: 'kanban', text: css$f });
|
|
3115
3115
|
}
|
|
3116
3116
|
|
|
3117
|
-
var css$
|
|
3117
|
+
var css$e = "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
3118
|
|
|
3119
3119
|
function defineSwipeDeck(tag = 'usa-swipe-deck') {
|
|
3120
3120
|
return defineElement(tag, (Base) => {
|
|
@@ -3256,10 +3256,10 @@ function defineSwipeDeck(tag = 'usa-swipe-deck') {
|
|
|
3256
3256
|
}
|
|
3257
3257
|
}
|
|
3258
3258
|
return UsaSwipeDeck;
|
|
3259
|
-
}, { id: 'swipe-deck', text: css$
|
|
3259
|
+
}, { id: 'swipe-deck', text: css$e });
|
|
3260
3260
|
}
|
|
3261
3261
|
|
|
3262
|
-
var css$
|
|
3262
|
+
var css$d = "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
3263
|
|
|
3264
3264
|
const WEATHER_CONDITIONS = ['clear', 'cloudy', 'rain', 'snow', 'storm', 'fog', 'night'];
|
|
3265
3265
|
const LABEL = { clear: 'Clear', cloudy: 'Cloudy', rain: 'Rain', snow: 'Snow', storm: 'Thunderstorm', fog: 'Fog', night: 'Clear night' };
|
|
@@ -3340,10 +3340,10 @@ function defineWeatherCard(tag = 'usa-weather-card') {
|
|
|
3340
3340
|
}
|
|
3341
3341
|
}
|
|
3342
3342
|
return UsaWeatherCard;
|
|
3343
|
-
}, { id: 'weather-card', text: css$
|
|
3343
|
+
}, { id: 'weather-card', text: css$d });
|
|
3344
3344
|
}
|
|
3345
3345
|
|
|
3346
|
-
var css$
|
|
3346
|
+
var css$c = "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
3347
|
|
|
3348
3348
|
function definePullCord(tag = 'usa-pull-cord') {
|
|
3349
3349
|
return defineElement(tag, (Base) => {
|
|
@@ -3472,10 +3472,10 @@ function definePullCord(tag = 'usa-pull-cord') {
|
|
|
3472
3472
|
}
|
|
3473
3473
|
}
|
|
3474
3474
|
return UsaPullCord;
|
|
3475
|
-
}, { id: 'pull-cord', text: css$
|
|
3475
|
+
}, { id: 'pull-cord', text: css$c });
|
|
3476
3476
|
}
|
|
3477
3477
|
|
|
3478
|
-
var css$
|
|
3478
|
+
var css$b = "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
3479
|
|
|
3480
3480
|
const iso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
|
3481
3481
|
/** Parse `YYYY-MM-DD` as a local date (or null). */
|
|
@@ -3624,10 +3624,10 @@ function defineDatePicker(tag = 'usa-date-picker') {
|
|
|
3624
3624
|
}
|
|
3625
3625
|
}
|
|
3626
3626
|
return UsaDatePicker;
|
|
3627
|
-
}, { id: 'date-picker', text: css$
|
|
3627
|
+
}, { id: 'date-picker', text: css$b });
|
|
3628
3628
|
}
|
|
3629
3629
|
|
|
3630
|
-
var css$
|
|
3630
|
+
var css$a = "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
3631
|
|
|
3632
3632
|
/** HSV (h 0–360, s / v 0–1) → `#rrggbb`. */
|
|
3633
3633
|
function hsvToHex(h, s, v) {
|
|
@@ -3747,10 +3747,10 @@ function defineColorPicker(tag = 'usa-color-picker') {
|
|
|
3747
3747
|
}
|
|
3748
3748
|
}
|
|
3749
3749
|
return UsaColorPicker;
|
|
3750
|
-
}, { id: 'color-picker', text: css$
|
|
3750
|
+
}, { id: 'color-picker', text: css$a });
|
|
3751
3751
|
}
|
|
3752
3752
|
|
|
3753
|
-
var css$
|
|
3753
|
+
var css$9 = "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
3754
|
|
|
3755
3755
|
const size = (n) => (n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(1)} KB` : `${(n / 1048576).toFixed(1)} MB`);
|
|
3756
3756
|
function defineFileDrop(tag = 'usa-file-drop') {
|
|
@@ -3851,10 +3851,10 @@ function defineFileDrop(tag = 'usa-file-drop') {
|
|
|
3851
3851
|
}
|
|
3852
3852
|
}
|
|
3853
3853
|
return UsaFileDrop;
|
|
3854
|
-
}, { id: 'file-drop', text: css$
|
|
3854
|
+
}, { id: 'file-drop', text: css$9 });
|
|
3855
3855
|
}
|
|
3856
3856
|
|
|
3857
|
-
var css$
|
|
3857
|
+
var css$8 = "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
3858
|
|
|
3859
3859
|
const DEFAULT = {
|
|
3860
3860
|
format: ANIMATION_FORMAT,
|
|
@@ -4028,10 +4028,10 @@ function defineKeyframeEditor(tag = 'usa-keyframe-editor') {
|
|
|
4028
4028
|
}
|
|
4029
4029
|
}
|
|
4030
4030
|
return UsaKeyframeEditor;
|
|
4031
|
-
}, { id: 'keyframe-editor', text: css$
|
|
4031
|
+
}, { id: 'keyframe-editor', text: css$8 });
|
|
4032
4032
|
}
|
|
4033
4033
|
|
|
4034
|
-
var css$
|
|
4034
|
+
var css$7 = "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
4035
|
|
|
4036
4036
|
const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`;
|
|
4037
4037
|
function defineMusicPlayer(tag = 'usa-music-player') {
|
|
@@ -4192,10 +4192,10 @@ function defineMusicPlayer(tag = 'usa-music-player') {
|
|
|
4192
4192
|
}
|
|
4193
4193
|
}
|
|
4194
4194
|
return UsaMusicPlayer;
|
|
4195
|
-
}, { id: 'music-player', text: css$
|
|
4195
|
+
}, { id: 'music-player', text: css$7 });
|
|
4196
4196
|
}
|
|
4197
4197
|
|
|
4198
|
-
var css$
|
|
4198
|
+
var css$6 = "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
4199
|
|
|
4200
4200
|
const ARC = 270;
|
|
4201
4201
|
function defineVolumeKnob(tag = 'usa-volume-knob') {
|
|
@@ -4286,10 +4286,10 @@ function defineVolumeKnob(tag = 'usa-volume-knob') {
|
|
|
4286
4286
|
}
|
|
4287
4287
|
}
|
|
4288
4288
|
return UsaVolumeKnob;
|
|
4289
|
-
}, { id: 'volume-knob', text: css$
|
|
4289
|
+
}, { id: 'volume-knob', text: css$6 });
|
|
4290
4290
|
}
|
|
4291
4291
|
|
|
4292
|
-
var css$
|
|
4292
|
+
var css$5 = "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
4293
|
|
|
4294
4294
|
const EQ_PRESETS = {
|
|
4295
4295
|
flat: [0, 0, 0, 0, 0, 0, 0],
|
|
@@ -4387,10 +4387,10 @@ function defineEqualizer(tag = 'usa-equalizer') {
|
|
|
4387
4387
|
}
|
|
4388
4388
|
}
|
|
4389
4389
|
return UsaEqualizer;
|
|
4390
|
-
}, { id: 'equalizer', text: css$
|
|
4390
|
+
}, { id: 'equalizer', text: css$5 });
|
|
4391
4391
|
}
|
|
4392
4392
|
|
|
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}}";
|
|
4393
|
+
var css$4 = "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
4394
|
|
|
4395
4395
|
/** Parse LRC text into sorted `{ t, text }` lines. */
|
|
4396
4396
|
function parseLRC(src) {
|
|
@@ -4502,7 +4502,411 @@ function defineLyrics(tag = 'usa-lyrics') {
|
|
|
4502
4502
|
}
|
|
4503
4503
|
}
|
|
4504
4504
|
return UsaLyrics;
|
|
4505
|
-
}, { id: 'lyrics', text: css });
|
|
4505
|
+
}, { id: 'lyrics', text: css$4 });
|
|
4506
|
+
}
|
|
4507
|
+
|
|
4508
|
+
var css$3 = "usa-bar-chart{--usa-bc-c:#7c5cff;display:block;width:var(--usa-bc-w,100%);max-width:100%;font:600 11px/1.2 system-ui,sans-serif}.usa-bc-list{display:flex;align-items:flex-end;gap:8px;height:var(--usa-bc-h,140px);margin:0;padding:0;list-style:none}.usa-bc-item{display:grid;grid-template-rows:auto 1fr auto;justify-items:center;flex:1;min-width:0;height:100%;gap:4px}.usa-bc-track{position:relative;grid-row:2;width:100%;display:flex;align-items:flex-end;justify-content:center}.usa-bc-bar{display:block;width:min(100%,38px);height:calc(var(--usa-bc-k) * 100%);border-radius:6px 6px 2px 2px;background:linear-gradient(var(--usa-bc-c),#22d3ee);transform-origin:50% 100%}.usa-bc-item[data-glide] .usa-bc-bar{transition:height .6s cubic-bezier(.3,1.25,.5,1)}.usa-bc-val{grid-row:1;font-variant-numeric:tabular-nums;opacity:.8}.usa-bc-label{grid-row:3;opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}usa-bar-chart[data-dir=\"h\"] .usa-bc-list{flex-direction:column;align-items:stretch;height:auto}usa-bar-chart[data-dir=\"h\"] .usa-bc-item{grid-template-columns:70px 1fr auto;grid-template-rows:none;align-items:center;height:22px}usa-bar-chart[data-dir=\"h\"] .usa-bc-label{grid-row:auto;grid-column:1;justify-self:start}usa-bar-chart[data-dir=\"h\"] .usa-bc-track{grid-row:auto;grid-column:2;height:100%;justify-content:flex-start;align-items:center}usa-bar-chart[data-dir=\"h\"] .usa-bc-bar{width:calc(var(--usa-bc-k) * 100%);height:14px;border-radius:2px 6px 6px 2px;transform-origin:0 50%;background:linear-gradient(90deg,var(--usa-bc-c),#22d3ee)}usa-bar-chart[data-dir=\"h\"] .usa-bc-item[data-glide] .usa-bc-bar{transition:width .6s cubic-bezier(.3,1.25,.5,1)}usa-bar-chart[data-dir=\"h\"] .usa-bc-val{grid-row:auto;grid-column:3}@media (prefers-reduced-motion:reduce){.usa-bc-bar{transition:none!important}}";
|
|
4509
|
+
|
|
4510
|
+
function defineBarChart(tag = 'usa-bar-chart') {
|
|
4511
|
+
return defineElement(tag, (Base) => {
|
|
4512
|
+
class UsaBarChart extends Base {
|
|
4513
|
+
constructor() {
|
|
4514
|
+
super(...arguments);
|
|
4515
|
+
this._data = [];
|
|
4516
|
+
this._seen = false;
|
|
4517
|
+
}
|
|
4518
|
+
static get observedAttributes() {
|
|
4519
|
+
return ['horizontal', 'unit', 'max'];
|
|
4520
|
+
}
|
|
4521
|
+
get data() {
|
|
4522
|
+
return this._data.map((d) => ({ ...d }));
|
|
4523
|
+
}
|
|
4524
|
+
set data(v) {
|
|
4525
|
+
this._data = (v || []).map((d) => ({ label: String(d.label), value: Number(d.value) || 0 }));
|
|
4526
|
+
if (this.isConnected)
|
|
4527
|
+
this.render(true);
|
|
4528
|
+
}
|
|
4529
|
+
mount() {
|
|
4530
|
+
if (!this._data.length) {
|
|
4531
|
+
const kids = Array.from(this.querySelectorAll(':scope > data'));
|
|
4532
|
+
if (kids.length)
|
|
4533
|
+
this._data = kids.map((k) => ({ label: k.textContent?.trim() || '', value: Number(k.getAttribute('value')) || 0 }));
|
|
4534
|
+
else {
|
|
4535
|
+
const vals = this.str('values', '').split(',').map(Number);
|
|
4536
|
+
const labels = this.str('labels', '').split(',');
|
|
4537
|
+
this._data = vals.filter(Number.isFinite).map((v, i) => ({ label: (labels[i] || String(i + 1)).trim(), value: v }));
|
|
4538
|
+
}
|
|
4539
|
+
}
|
|
4540
|
+
this.querySelectorAll(':scope > data').forEach((d) => (d.hidden = true));
|
|
4541
|
+
this.dataset.dir = this.flag('horizontal') ? 'h' : 'v';
|
|
4542
|
+
this.render(false);
|
|
4543
|
+
this.inView((vis) => {
|
|
4544
|
+
if (!vis || this._seen)
|
|
4545
|
+
return;
|
|
4546
|
+
this._seen = true;
|
|
4547
|
+
if (this.reduced)
|
|
4548
|
+
return;
|
|
4549
|
+
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' }));
|
|
4550
|
+
});
|
|
4551
|
+
}
|
|
4552
|
+
render(glide) {
|
|
4553
|
+
let list = this.querySelector(':scope > .usa-bc-list');
|
|
4554
|
+
if (!list) {
|
|
4555
|
+
list = document.createElement('ul');
|
|
4556
|
+
list.className = 'usa-bc-list';
|
|
4557
|
+
list.setAttribute('data-usa-part', '');
|
|
4558
|
+
this.appendChild(list);
|
|
4559
|
+
}
|
|
4560
|
+
const max = this.num('max', 0) || Math.max(1, ...this._data.map((d) => d.value));
|
|
4561
|
+
const unit = this.str('unit', '');
|
|
4562
|
+
const old = new Map(Array.from(list.children).map((li) => [li.dataset.label, li]));
|
|
4563
|
+
const next = [];
|
|
4564
|
+
for (const d of this._data) {
|
|
4565
|
+
let li = old.get(d.label);
|
|
4566
|
+
const isNew = !li;
|
|
4567
|
+
if (!li) {
|
|
4568
|
+
li = document.createElement('li');
|
|
4569
|
+
li.className = 'usa-bc-item';
|
|
4570
|
+
li.dataset.label = d.label;
|
|
4571
|
+
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>';
|
|
4572
|
+
li.querySelector('.usa-bc-label').textContent = d.label;
|
|
4573
|
+
}
|
|
4574
|
+
old.delete(d.label);
|
|
4575
|
+
const k = Math.max(0, Math.min(1, d.value / max));
|
|
4576
|
+
li.style.setProperty('--usa-bc-k', k.toFixed(4));
|
|
4577
|
+
li.querySelector('.usa-bc-val').textContent = `${d.value.toLocaleString()}${unit}`;
|
|
4578
|
+
li.setAttribute('aria-label', `${d.label}: ${d.value.toLocaleString()}${unit}`);
|
|
4579
|
+
li.toggleAttribute('data-glide', glide && !this.reduced);
|
|
4580
|
+
if (isNew && glide && !this.reduced)
|
|
4581
|
+
this.motion(li.querySelector('.usa-bc-bar'), [{ transform: this.dataset.dir === 'h' ? 'scaleX(0)' : 'scaleY(0)' }, { transform: 'none' }], { duration: 500, easing: 'ease-out' });
|
|
4582
|
+
next.push(li);
|
|
4583
|
+
}
|
|
4584
|
+
old.forEach((li) => {
|
|
4585
|
+
if (this.reduced || !glide)
|
|
4586
|
+
return li.remove();
|
|
4587
|
+
const a = this.motion(li, [{ opacity: 1, transform: 'none' }, { opacity: 0, transform: 'scale(.6)' }], { duration: 300, fill: 'forwards' });
|
|
4588
|
+
if (a)
|
|
4589
|
+
a.finished.then(() => li.remove(), () => li.remove());
|
|
4590
|
+
else
|
|
4591
|
+
li.remove();
|
|
4592
|
+
});
|
|
4593
|
+
next.forEach((li) => list.appendChild(li));
|
|
4594
|
+
this.setAttribute('role', 'figure');
|
|
4595
|
+
if (!this.hasAttribute('aria-label'))
|
|
4596
|
+
this.setAttribute('aria-label', this.str('label', 'Bar chart'));
|
|
4597
|
+
list.setAttribute('role', 'list');
|
|
4598
|
+
next.forEach((li) => li.setAttribute('role', 'listitem'));
|
|
4599
|
+
}
|
|
4600
|
+
}
|
|
4601
|
+
return UsaBarChart;
|
|
4602
|
+
}, { id: 'bar-chart', text: css$3 });
|
|
4603
|
+
}
|
|
4604
|
+
|
|
4605
|
+
var css$2 = "usa-gauge{--usa-gg-c:#7c5cff;--usa-gg-k:0;position:relative;display:inline-block;width:var(--usa-gg-w,220px);max-width:100%;font:600 12px/1.2 system-ui,sans-serif;text-align:center}.usa-gg-svg{display:block;width:100%;height:auto;overflow:visible}.usa-gg-track,.usa-gg-arc{fill:none;stroke-width:16;stroke-linecap:round}.usa-gg-track{stroke:rgba(127,127,127,.2)}.usa-gg-arc{stroke:var(--usa-gg-c);stroke-dasharray:calc(max(var(--usa-gg-k),0) * 100) 100;transition:stroke .3s}.usa-gg-needle{transform-origin:100px 100px;transform:rotate(var(--usa-gg-angle,-90deg));fill:currentColor}.usa-gg-read{position:absolute;left:0;right:0;bottom:2px;display:flex;flex-direction:column;align-items:center;pointer-events:none}.usa-gg-num{font:800 22px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;transform:translateY(-34px)}.usa-gg-label{opacity:.65;transform:translateY(-34px)}";
|
|
4606
|
+
|
|
4607
|
+
function defineGauge(tag = 'usa-gauge') {
|
|
4608
|
+
return defineElement(tag, (Base) => {
|
|
4609
|
+
class UsaGauge extends Base {
|
|
4610
|
+
constructor() {
|
|
4611
|
+
super(...arguments);
|
|
4612
|
+
this._v = 0;
|
|
4613
|
+
this._shown = 0;
|
|
4614
|
+
this._vel = 0;
|
|
4615
|
+
this._raf = 0;
|
|
4616
|
+
}
|
|
4617
|
+
static get observedAttributes() {
|
|
4618
|
+
return ['min', 'max', 'zones', 'unit', 'label'];
|
|
4619
|
+
}
|
|
4620
|
+
get value() {
|
|
4621
|
+
return this._v;
|
|
4622
|
+
}
|
|
4623
|
+
set value(v) {
|
|
4624
|
+
this._v = clampN(Number(v) || 0, this.num('min', 0), this.num('max', 100));
|
|
4625
|
+
this.setAttribute('aria-valuenow', String(this._v));
|
|
4626
|
+
this.animateTo();
|
|
4627
|
+
}
|
|
4628
|
+
mount() {
|
|
4629
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
4630
|
+
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>');
|
|
4631
|
+
this.querySelector('.usa-gg-label').textContent = this.str('label', '');
|
|
4632
|
+
this.setAttribute('role', 'meter');
|
|
4633
|
+
this.setAttribute('aria-valuemin', String(this.num('min', 0)));
|
|
4634
|
+
this.setAttribute('aria-valuemax', String(this.num('max', 100)));
|
|
4635
|
+
if (!this.hasAttribute('aria-label'))
|
|
4636
|
+
this.setAttribute('aria-label', this.str('label', 'Gauge'));
|
|
4637
|
+
this._v = clampN(this.num('value', 0), this.num('min', 0), this.num('max', 100));
|
|
4638
|
+
this.setAttribute('aria-valuenow', String(this._v));
|
|
4639
|
+
this._shown = this.reduced ? this._v : this.num('min', 0);
|
|
4640
|
+
this.paint();
|
|
4641
|
+
this.onCleanup(() => cancelAnimationFrame(this._raf));
|
|
4642
|
+
this.inView((v) => v && this.animateTo());
|
|
4643
|
+
}
|
|
4644
|
+
/** Colour of the zone containing `v`. */
|
|
4645
|
+
zoneColor(v) {
|
|
4646
|
+
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]);
|
|
4647
|
+
for (const [b, c] of zones)
|
|
4648
|
+
if (v <= b)
|
|
4649
|
+
return c;
|
|
4650
|
+
return zones.length ? zones[zones.length - 1][1] : '';
|
|
4651
|
+
}
|
|
4652
|
+
paint() {
|
|
4653
|
+
const lo = this.num('min', 0);
|
|
4654
|
+
const hi = this.num('max', 100);
|
|
4655
|
+
const k = clampN((this._shown - lo) / (hi - lo || 1), -0.05, 1.05);
|
|
4656
|
+
this.style.setProperty('--usa-gg-k', k.toFixed(4));
|
|
4657
|
+
this.style.setProperty('--usa-gg-angle', `${ -90 + k * 180}deg`);
|
|
4658
|
+
const z = this.zoneColor(this._shown);
|
|
4659
|
+
if (z)
|
|
4660
|
+
this.style.setProperty('--usa-gg-c', z);
|
|
4661
|
+
const num = this.querySelector('.usa-gg-num');
|
|
4662
|
+
if (num)
|
|
4663
|
+
num.textContent = `${Math.round(clampN(this._shown, lo, hi))}${this.str('unit', '')}`;
|
|
4664
|
+
this.setAttribute('aria-valuetext', `${Math.round(this._v)}${this.str('unit', '')}`);
|
|
4665
|
+
}
|
|
4666
|
+
animateTo() {
|
|
4667
|
+
if (this.reduced || typeof requestAnimationFrame !== 'function') {
|
|
4668
|
+
this._shown = this._v;
|
|
4669
|
+
return this.paint();
|
|
4670
|
+
}
|
|
4671
|
+
if (this._raf)
|
|
4672
|
+
return;
|
|
4673
|
+
let last = 0;
|
|
4674
|
+
const f = (now) => {
|
|
4675
|
+
const dt = last ? Math.min(0.033, (now - last) / 1000) : 1 / 60;
|
|
4676
|
+
last = now;
|
|
4677
|
+
const span = this.num('max', 100) - this.num('min', 0) || 1;
|
|
4678
|
+
this._vel += (120 * (this._v - this._shown) - 11 * this._vel) * dt;
|
|
4679
|
+
this._shown += this._vel * dt;
|
|
4680
|
+
this.paint();
|
|
4681
|
+
if (Math.abs(this._v - this._shown) / span > 0.0005 || Math.abs(this._vel) / span > 0.002)
|
|
4682
|
+
this._raf = requestAnimationFrame(f);
|
|
4683
|
+
else
|
|
4684
|
+
((this._raf = 0), (this._shown = this._v), (this._vel = 0), this.paint());
|
|
4685
|
+
};
|
|
4686
|
+
this._raf = requestAnimationFrame(f);
|
|
4687
|
+
}
|
|
4688
|
+
}
|
|
4689
|
+
return UsaGauge;
|
|
4690
|
+
}, { id: 'gauge', text: css$2 });
|
|
4691
|
+
}
|
|
4692
|
+
|
|
4693
|
+
var css$1 = "usa-sparkline{--usa-sl-c:#7c5cff;position:relative;display:inline-block;width:var(--usa-sl-w,120px);height:var(--usa-sl-h,32px);vertical-align:middle}.usa-sl-svg{display:block;width:100%;height:100%;overflow:visible}.usa-sl-line{fill:none;stroke:var(--usa-sl-c);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1}.usa-sl-area{fill:var(--usa-sl-c);opacity:0}usa-sparkline[data-variant=\"area\"] .usa-sl-area{opacity:.16;transition:opacity .8s .4s}.usa-sl-bars rect{fill:var(--usa-sl-c);opacity:.75}usa-sparkline:not([data-variant=\"bars\"]) .usa-sl-bars,usa-sparkline[data-variant=\"bars\"] .usa-sl-line,usa-sparkline[data-variant=\"bars\"] .usa-sl-end{display:none}.usa-sl-end{fill:var(--usa-sl-c);vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:usa-sl-pulse 1.8s ease-out infinite}.usa-sl-hover{fill:#fff;stroke:var(--usa-sl-c);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0}usa-sparkline[data-hover] .usa-sl-hover{opacity:1}.usa-sl-tip{position:absolute;bottom:calc(100% + 4px);transform:translateX(-50%);padding:2px 6px;border-radius:5px;background:#111827;color:#fff;font:600 11px/1.3 system-ui,sans-serif;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}usa-sparkline[data-hover] .usa-sl-tip{opacity:1}@keyframes usa-sl-pulse{0%{opacity:1;transform:scale(1)}70%{opacity:.4;transform:scale(1.8)}100%{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.usa-sl-end{animation:none}}";
|
|
4694
|
+
|
|
4695
|
+
const SPARK_VARIANTS = ['line', 'area', 'bars'];
|
|
4696
|
+
/** Map values to SVG points in a w×h box (with padding). */
|
|
4697
|
+
function sparkPoints(vals, w = 100, h = 30, pad = 3) {
|
|
4698
|
+
if (!vals.length)
|
|
4699
|
+
return [];
|
|
4700
|
+
const lo = Math.min(...vals);
|
|
4701
|
+
const hi = Math.max(...vals);
|
|
4702
|
+
const span = hi - lo || 1;
|
|
4703
|
+
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)]);
|
|
4704
|
+
}
|
|
4705
|
+
function defineSparkline(tag = 'usa-sparkline') {
|
|
4706
|
+
return defineElement(tag, (Base) => {
|
|
4707
|
+
class UsaSparkline extends Base {
|
|
4708
|
+
constructor() {
|
|
4709
|
+
super(...arguments);
|
|
4710
|
+
this._data = [];
|
|
4711
|
+
this._drawn = false;
|
|
4712
|
+
this._raf = 0;
|
|
4713
|
+
}
|
|
4714
|
+
static get observedAttributes() {
|
|
4715
|
+
return ['variant', 'color'];
|
|
4716
|
+
}
|
|
4717
|
+
get data() {
|
|
4718
|
+
return this._data.slice();
|
|
4719
|
+
}
|
|
4720
|
+
set data(v) {
|
|
4721
|
+
const from = sparkPoints(this._data);
|
|
4722
|
+
this._data = (v || []).map(Number).filter(Number.isFinite);
|
|
4723
|
+
if (this.isConnected)
|
|
4724
|
+
this.render(from);
|
|
4725
|
+
}
|
|
4726
|
+
mount() {
|
|
4727
|
+
if (!this._data.length)
|
|
4728
|
+
this._data = this.str('values', '').split(',').map(Number).filter(Number.isFinite);
|
|
4729
|
+
const v = this.str('variant', 'line');
|
|
4730
|
+
this.dataset.variant = SPARK_VARIANTS.includes(v) ? v : 'line';
|
|
4731
|
+
if (this.str('color', ''))
|
|
4732
|
+
this.style.setProperty('--usa-sl-c', this.str('color', ''));
|
|
4733
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
4734
|
+
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>');
|
|
4735
|
+
this.setAttribute('role', 'img');
|
|
4736
|
+
this.listen(this, 'pointermove', (e) => this.hover(e));
|
|
4737
|
+
this.listen(this, 'pointerleave', () => this.removeAttribute('data-hover'));
|
|
4738
|
+
this.onCleanup(() => cancelAnimationFrame(this._raf));
|
|
4739
|
+
this.render(null);
|
|
4740
|
+
this.inView((vis) => {
|
|
4741
|
+
if (!vis || this._drawn)
|
|
4742
|
+
return;
|
|
4743
|
+
this._drawn = true;
|
|
4744
|
+
const line = this.querySelector('.usa-sl-line');
|
|
4745
|
+
if (line && !this.reduced)
|
|
4746
|
+
this.motion(line, [{ strokeDashoffset: 1 }, { strokeDashoffset: 0 }], { duration: 900, easing: 'cubic-bezier(.6,.05,.3,1)' });
|
|
4747
|
+
});
|
|
4748
|
+
}
|
|
4749
|
+
summary() {
|
|
4750
|
+
const d = this._data;
|
|
4751
|
+
if (!d.length)
|
|
4752
|
+
return 'No data';
|
|
4753
|
+
const a = d[0];
|
|
4754
|
+
const b = d[d.length - 1];
|
|
4755
|
+
const pct = a ? Math.round(((b - a) / Math.abs(a)) * 100) : 0;
|
|
4756
|
+
return `Trend: ${a} to ${b}${a ? `, ${pct >= 0 ? 'up' : 'down'} ${Math.abs(pct)}%` : ''}`;
|
|
4757
|
+
}
|
|
4758
|
+
paths(pts) {
|
|
4759
|
+
if (!pts.length)
|
|
4760
|
+
return { line: '', area: '' };
|
|
4761
|
+
const line = pts.map(([x, y], i) => `${i ? 'L' : 'M'}${x.toFixed(2)} ${y.toFixed(2)}`).join('');
|
|
4762
|
+
return { line, area: `${line}L${pts[pts.length - 1][0].toFixed(2)} 30L${pts[0][0].toFixed(2)} 30Z` };
|
|
4763
|
+
}
|
|
4764
|
+
render(from) {
|
|
4765
|
+
this.setAttribute('aria-label', this.str('label', '') || this.summary());
|
|
4766
|
+
const to = sparkPoints(this._data);
|
|
4767
|
+
const apply = (pts) => {
|
|
4768
|
+
const { line, area } = this.paths(pts);
|
|
4769
|
+
this.querySelector('.usa-sl-line')?.setAttribute('d', line);
|
|
4770
|
+
this.querySelector('.usa-sl-area')?.setAttribute('d', area);
|
|
4771
|
+
const end = pts[pts.length - 1];
|
|
4772
|
+
const c = this.querySelector('.usa-sl-end');
|
|
4773
|
+
if (end && c)
|
|
4774
|
+
(c.setAttribute('cx', end[0].toFixed(2)), c.setAttribute('cy', end[1].toFixed(2)));
|
|
4775
|
+
};
|
|
4776
|
+
const bars = this.querySelector('.usa-sl-bars');
|
|
4777
|
+
if (bars) {
|
|
4778
|
+
const lo = Math.min(0, ...this._data);
|
|
4779
|
+
const hi = Math.max(...this._data, 1);
|
|
4780
|
+
const w = 100 / Math.max(1, this._data.length);
|
|
4781
|
+
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('');
|
|
4782
|
+
}
|
|
4783
|
+
if (!from || from.length !== to.length || this.reduced || typeof requestAnimationFrame !== 'function')
|
|
4784
|
+
return apply(to);
|
|
4785
|
+
cancelAnimationFrame(this._raf);
|
|
4786
|
+
const t0 = performance.now();
|
|
4787
|
+
const f = (now) => {
|
|
4788
|
+
const k = Math.min(1, (now - t0) / 500);
|
|
4789
|
+
const e = 1 - Math.pow(1 - k, 3);
|
|
4790
|
+
apply(to.map(([x, y], i) => [from[i][0] + (x - from[i][0]) * e, from[i][1] + (y - from[i][1]) * e]));
|
|
4791
|
+
if (k < 1)
|
|
4792
|
+
this._raf = requestAnimationFrame(f);
|
|
4793
|
+
};
|
|
4794
|
+
this._raf = requestAnimationFrame(f);
|
|
4795
|
+
}
|
|
4796
|
+
hover(e) {
|
|
4797
|
+
if (!this._data.length)
|
|
4798
|
+
return;
|
|
4799
|
+
const r = this.getBoundingClientRect();
|
|
4800
|
+
const pts = sparkPoints(this._data);
|
|
4801
|
+
const x = ((e.clientX - r.left) / (r.width || 1)) * 100;
|
|
4802
|
+
let i = 0;
|
|
4803
|
+
pts.forEach(([px], j) => Math.abs(px - x) < Math.abs(pts[i][0] - x) && (i = j));
|
|
4804
|
+
const c = this.querySelector('.usa-sl-hover');
|
|
4805
|
+
c?.setAttribute('cx', pts[i][0].toFixed(2));
|
|
4806
|
+
c?.setAttribute('cy', pts[i][1].toFixed(2));
|
|
4807
|
+
const tip = this.querySelector('.usa-sl-tip');
|
|
4808
|
+
if (tip) {
|
|
4809
|
+
tip.textContent = String(this._data[i]);
|
|
4810
|
+
tip.style.left = `${pts[i][0]}%`;
|
|
4811
|
+
}
|
|
4812
|
+
this.toggleAttribute('data-hover', true);
|
|
4813
|
+
}
|
|
4814
|
+
}
|
|
4815
|
+
return UsaSparkline;
|
|
4816
|
+
}, { id: 'sparkline', text: css$1 });
|
|
4817
|
+
}
|
|
4818
|
+
|
|
4819
|
+
/** Parse a figure like "$12.4k" / "−3.5%" / "1,204" → number + prefix / suffix / decimals (7.2). */
|
|
4820
|
+
function parseFigureText(s) {
|
|
4821
|
+
const m = /^(\D*?)([-−]?[\d,]*\.?\d+)(.*)$/.exec(String(s).trim());
|
|
4822
|
+
if (!m)
|
|
4823
|
+
return null;
|
|
4824
|
+
const raw = m[2].replace(/,/g, '').replace('−', '-');
|
|
4825
|
+
const n = Number(raw);
|
|
4826
|
+
return Number.isFinite(n) ? { n, pre: m[1], post: m[3], dec: (raw.split('.')[1] || '').length } : null;
|
|
4827
|
+
}
|
|
4828
|
+
|
|
4829
|
+
var css = "usa-kpi{display:inline-grid;grid-template-columns:1fr auto;grid-template-areas:\"label label\" \"value delta\" \"trend trend\" \"caption caption\";align-items:end;gap:4px 10px;width:var(--usa-kpi-w,220px);max-width:100%;padding:14px 16px;border-radius:16px;background:var(--usa-kpi-bg,#fff);color:#0f172a;box-shadow:0 8px 24px -12px rgba(15,23,42,.35);font:500 12px/1.3 system-ui,sans-serif}.usa-kpi-label{grid-area:label;opacity:.6;text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:700}.usa-kpi-value{grid-area:value;font:800 28px/1.05 system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}.usa-kpi-delta{grid-area:delta;display:inline-flex;align-items:center;gap:3px;padding:3px 7px;border-radius:999px;font-weight:700;font-size:12px;margin-bottom:4px}.usa-kpi-delta[data-good=\"true\"]{background:rgba(34,197,94,.14);color:#15803d}.usa-kpi-delta[data-good=\"false\"]{background:rgba(239,68,68,.14);color:#b91c1c}.usa-kpi-delta i{font-style:normal;font-size:9px}.usa-kpi-trend{grid-area:trend;--usa-sl-w:100%;--usa-sl-h:34px;margin-top:4px}.usa-kpi-caption{grid-area:caption;opacity:.55;font-size:11px}.usa-kpi-caption:empty{display:none}";
|
|
4830
|
+
|
|
4831
|
+
function defineKpi(tag = 'usa-kpi') {
|
|
4832
|
+
return defineElement(tag, (Base) => {
|
|
4833
|
+
class UsaKpi extends Base {
|
|
4834
|
+
constructor() {
|
|
4835
|
+
super(...arguments);
|
|
4836
|
+
this._shown = 0;
|
|
4837
|
+
this._raf = 0;
|
|
4838
|
+
this._seen = false;
|
|
4839
|
+
}
|
|
4840
|
+
static get observedAttributes() {
|
|
4841
|
+
return ['label', 'delta', 'caption', 'trend', 'invert'];
|
|
4842
|
+
}
|
|
4843
|
+
get value() {
|
|
4844
|
+
return this.str('value', '0');
|
|
4845
|
+
}
|
|
4846
|
+
set value(v) {
|
|
4847
|
+
const prev = this._shown;
|
|
4848
|
+
this.setAttribute('value', String(v));
|
|
4849
|
+
this.roll(prev, true);
|
|
4850
|
+
}
|
|
4851
|
+
mount() {
|
|
4852
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
4853
|
+
const delta = this.str('delta', '');
|
|
4854
|
+
const neg = /^\s*[-−]/.test(delta);
|
|
4855
|
+
const good = this.flag('invert') ? neg : !neg;
|
|
4856
|
+
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>`);
|
|
4857
|
+
this.querySelector('.usa-kpi-label').textContent = this.str('label', '');
|
|
4858
|
+
this.querySelector('.usa-kpi-caption').textContent = this.str('caption', '');
|
|
4859
|
+
const ds = this.querySelector('.usa-kpi-delta span');
|
|
4860
|
+
if (ds)
|
|
4861
|
+
ds.textContent = delta;
|
|
4862
|
+
this.setAttribute('role', 'group');
|
|
4863
|
+
this.setAttribute('aria-label', [this.str('label', ''), this.value, delta && `(${delta})`, this.str('caption', '')].filter(Boolean).join(' '));
|
|
4864
|
+
this.onCleanup(() => cancelAnimationFrame(this._raf));
|
|
4865
|
+
const f = parseFigureText(this.value);
|
|
4866
|
+
this._shown = this.reduced || !f ? (f?.n ?? 0) : 0;
|
|
4867
|
+
this.write(this._shown);
|
|
4868
|
+
this.inView((vis) => {
|
|
4869
|
+
if (!vis || this._seen)
|
|
4870
|
+
return;
|
|
4871
|
+
this._seen = true;
|
|
4872
|
+
this.roll(0, false);
|
|
4873
|
+
const d = this.querySelector('.usa-kpi-delta');
|
|
4874
|
+
if (d && !this.reduced)
|
|
4875
|
+
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' });
|
|
4876
|
+
});
|
|
4877
|
+
}
|
|
4878
|
+
write(n) {
|
|
4879
|
+
const f = parseFigureText(this.value);
|
|
4880
|
+
const el = this.querySelector('.usa-kpi-value');
|
|
4881
|
+
if (!el)
|
|
4882
|
+
return;
|
|
4883
|
+
el.textContent = f ? f.pre + n.toLocaleString(this.str('locale', '') || undefined, { minimumFractionDigits: f.dec, maximumFractionDigits: f.dec }) + f.post : this.value;
|
|
4884
|
+
}
|
|
4885
|
+
roll(from, flash) {
|
|
4886
|
+
const f = parseFigureText(this.value);
|
|
4887
|
+
if (!f)
|
|
4888
|
+
return this.write(0);
|
|
4889
|
+
const to = f.n;
|
|
4890
|
+
if (this.reduced || typeof requestAnimationFrame !== 'function') {
|
|
4891
|
+
this._shown = to;
|
|
4892
|
+
return this.write(to);
|
|
4893
|
+
}
|
|
4894
|
+
cancelAnimationFrame(this._raf);
|
|
4895
|
+
const t0 = performance.now();
|
|
4896
|
+
const step = (now) => {
|
|
4897
|
+
const k = Math.min(1, (now - t0) / 1100);
|
|
4898
|
+
this._shown = from + (to - from) * (1 - Math.pow(1 - k, 3));
|
|
4899
|
+
this.write(this._shown);
|
|
4900
|
+
if (k < 1)
|
|
4901
|
+
this._raf = requestAnimationFrame(step);
|
|
4902
|
+
};
|
|
4903
|
+
this._raf = requestAnimationFrame(step);
|
|
4904
|
+
if (flash)
|
|
4905
|
+
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' });
|
|
4906
|
+
}
|
|
4907
|
+
}
|
|
4908
|
+
return UsaKpi;
|
|
4909
|
+
}, { id: 'kpi', text: css });
|
|
4506
4910
|
}
|
|
4507
4911
|
|
|
4508
4912
|
/**
|
|
@@ -4528,6 +4932,7 @@ const WIDGETS = {
|
|
|
4528
4932
|
'6.8': { 'usa-kanban': defineKanban, 'usa-swipe-deck': defineSwipeDeck, 'usa-weather-card': defineWeatherCard, 'usa-pull-cord': definePullCord },
|
|
4529
4933
|
'6.9': { 'usa-date-picker': defineDatePicker, 'usa-color-picker': defineColorPicker, 'usa-file-drop': defineFileDrop, 'usa-keyframe-editor': defineKeyframeEditor },
|
|
4530
4934
|
'7.1': { 'usa-music-player': defineMusicPlayer, 'usa-volume-knob': defineVolumeKnob, 'usa-equalizer': defineEqualizer, 'usa-lyrics': defineLyrics },
|
|
4935
|
+
'7.2': { 'usa-bar-chart': defineBarChart, 'usa-gauge': defineGauge, 'usa-sparkline': defineSparkline, 'usa-kpi': defineKpi },
|
|
4531
4936
|
};
|
|
4532
4937
|
/** Every widget tag, in release order. */
|
|
4533
4938
|
const WIDGET_TAGS = Object.values(WIDGETS).flatMap((g) => Object.keys(g));
|
|
@@ -4539,5 +4944,5 @@ function defineWidgets(release) {
|
|
|
4539
4944
|
fn(tag);
|
|
4540
4945
|
}
|
|
4541
4946
|
|
|
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 };
|
|
4947
|
+
export { CAROUSEL_EFFECTS, EQ_PRESETS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, defineBarChart, defineCarousel, defineColorPicker, defineCompare, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFileDrop, defineGauge, defineKanban, defineKeyframeEditor, defineKpi, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineMusicPlayer, defineNavMorph, defineOdometer, definePagination, defineProgressRing, definePullCord, defineSegmented, defineSheet, defineSkeletonReveal, defineSparkline, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineVolumeKnob, defineWeatherCard, defineWidgets, hexToHsv, hsvToHex, monthGrid, pageWindow, parseISODate, parseLRC, sparkPoints, stackToast };
|
|
4543
4948
|
//# sourceMappingURL=widgets.js.map
|