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