motionary 6.8.0 → 6.9.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 +23 -0
- package/bin/usa-codemod-7.mjs +91 -0
- package/dist/chunks/{base-DchG4q_S.js → base-D5MHqeDd.js} +2 -2
- package/dist/chunks/{base-DchG4q_S.js.map → base-D5MHqeDd.js.map} +1 -1
- package/dist/chunks/{core-DVyTlo9Q.js → core-DyJu5r5a.js} +2 -2
- package/dist/chunks/{core-DVyTlo9Q.js.map → core-DyJu5r5a.js.map} +1 -1
- package/dist/chunks/{core-D2vF8kZb.js → core-ZGo4hOEk.js} +2 -2
- package/dist/chunks/{core-D2vF8kZb.js.map → core-ZGo4hOEk.js.map} +1 -1
- package/dist/chunks/{fx-DUMVKSvg.js → fx-DlGRMJ-Z.js} +2 -2
- package/dist/chunks/{fx-DUMVKSvg.js.map → fx-DlGRMJ-Z.js.map} +1 -1
- package/dist/chunks/{gpu-BBRLgEzM.cjs → gpu-C2D4T9Q-.cjs} +9 -2
- package/dist/chunks/gpu-C2D4T9Q-.cjs.map +1 -0
- package/dist/chunks/{gpu-CsP2ZB3x.js → gpu-DPhMkJq6.js} +10 -4
- package/dist/chunks/gpu-DPhMkJq6.js.map +1 -0
- package/dist/chunks/player-DH3TIz-t.js +516 -0
- package/dist/chunks/player-DH3TIz-t.js.map +1 -0
- package/dist/chunks/player-PS6_FzNw.cjs +525 -0
- package/dist/chunks/player-PS6_FzNw.cjs.map +1 -0
- package/dist/chunks/{registry-D23neB4M.js → registry-CTLWeg-J.js} +2 -2
- package/dist/chunks/{registry-D23neB4M.js.map → registry-CTLWeg-J.js.map} +1 -1
- package/dist/chunks/{spring-BhoT09Qb.js → spring-B-9MZOrW.js} +2 -2
- package/dist/chunks/{spring-BhoT09Qb.js.map → spring-B-9MZOrW.js.map} +1 -1
- package/dist/chunks/{variants-C_hv_s23.js → variants-CoZn3k_5.js} +2 -2
- package/dist/chunks/{variants-C_hv_s23.js.map → variants-CoZn3k_5.js.map} +1 -1
- package/dist/components/a11y.js +2 -2
- package/dist/components/angular.js +7 -7
- package/dist/components/background.js +2 -2
- package/dist/components/bridge.js +1 -1
- package/dist/components/cards.js +2 -2
- package/dist/components/click.js +3 -3
- package/dist/components/depth.js +3 -3
- package/dist/components/effects.cjs +13 -522
- package/dist/components/effects.cjs.map +1 -1
- package/dist/components/effects.js +7 -515
- package/dist/components/effects.js.map +1 -1
- package/dist/components/feedback.js +1 -1
- package/dist/components/fx-3d.cjs +8 -2
- package/dist/components/fx-3d.cjs.map +1 -1
- package/dist/components/fx-3d.d.cts +3 -1
- package/dist/components/fx-3d.d.ts +3 -1
- package/dist/components/fx-3d.js +9 -4
- package/dist/components/fx-3d.js.map +1 -1
- package/dist/components/fx-focus.cjs +125 -0
- package/dist/components/fx-focus.cjs.map +1 -0
- package/dist/components/fx-focus.d.cts +65 -0
- package/dist/components/fx-focus.d.ts +65 -0
- package/dist/components/fx-focus.js +122 -0
- package/dist/components/fx-focus.js.map +1 -0
- package/dist/components/fx-gpu.cjs +3 -2
- package/dist/components/fx-gpu.cjs.map +1 -1
- package/dist/components/fx-gpu.d.cts +3 -1
- package/dist/components/fx-gpu.d.ts +3 -1
- package/dist/components/fx-gpu.js +3 -3
- package/dist/components/fx-light.cjs +8 -2
- package/dist/components/fx-light.cjs.map +1 -1
- package/dist/components/fx-light.d.cts +3 -1
- package/dist/components/fx-light.d.ts +3 -1
- package/dist/components/fx-light.js +9 -4
- package/dist/components/fx-light.js.map +1 -1
- package/dist/components/fx-morph.cjs +8 -2
- package/dist/components/fx-morph.cjs.map +1 -1
- package/dist/components/fx-morph.d.cts +3 -1
- package/dist/components/fx-morph.d.ts +3 -1
- package/dist/components/fx-morph.js +9 -4
- package/dist/components/fx-morph.js.map +1 -1
- package/dist/components/fx-physics.cjs +8 -2
- package/dist/components/fx-physics.cjs.map +1 -1
- package/dist/components/fx-physics.d.cts +3 -1
- package/dist/components/fx-physics.d.ts +3 -1
- package/dist/components/fx-physics.js +9 -4
- package/dist/components/fx-physics.js.map +1 -1
- package/dist/components/fx-text.cjs +8 -2
- package/dist/components/fx-text.cjs.map +1 -1
- package/dist/components/fx-text.d.cts +3 -1
- package/dist/components/fx-text.d.ts +3 -1
- package/dist/components/fx-text.js +9 -4
- package/dist/components/fx-text.js.map +1 -1
- package/dist/components/fx-transitions.cjs +8 -2
- package/dist/components/fx-transitions.cjs.map +1 -1
- package/dist/components/fx-transitions.d.cts +3 -1
- package/dist/components/fx-transitions.d.ts +3 -1
- package/dist/components/fx-transitions.js +10 -5
- package/dist/components/fx-transitions.js.map +1 -1
- package/dist/components/fx-weather.cjs +8 -2
- package/dist/components/fx-weather.cjs.map +1 -1
- package/dist/components/fx-weather.d.cts +3 -1
- package/dist/components/fx-weather.d.ts +3 -1
- package/dist/components/fx-weather.js +9 -4
- package/dist/components/fx-weather.js.map +1 -1
- package/dist/components/fx.js +5 -5
- package/dist/components/fx2.cjs +39 -12
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +108 -4
- package/dist/components/fx2.d.ts +108 -4
- package/dist/components/fx2.js +40 -28
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/gesture.js +4 -4
- package/dist/components/interaction.cjs +1 -0
- package/dist/components/interaction.cjs.map +1 -1
- package/dist/components/interaction.js +2 -1
- package/dist/components/interaction.js.map +1 -1
- package/dist/components/layout.js +1 -1
- package/dist/components/lite.cjs +2 -0
- package/dist/components/lite.cjs.map +1 -1
- package/dist/components/lite.js +2 -0
- package/dist/components/lite.js.map +1 -1
- package/dist/components/marketplace.cjs +82 -0
- package/dist/components/marketplace.cjs.map +1 -0
- package/dist/components/marketplace.d.cts +108 -0
- package/dist/components/marketplace.d.ts +108 -0
- package/dist/components/marketplace.js +77 -0
- package/dist/components/marketplace.js.map +1 -0
- package/dist/components/packs.js +1 -1
- package/dist/components/page.js +3 -3
- package/dist/components/perf.js +2 -2
- package/dist/components/physics.js +3 -3
- package/dist/components/reveal.js +1 -1
- package/dist/components/solid.js +7 -7
- package/dist/components/svelte.js +7 -7
- package/dist/components/svg.js +1 -1
- package/dist/components/text.js +2 -2
- package/dist/components/timeline.js +3 -3
- package/dist/components/transitions.js +1 -1
- package/dist/components/ui.cjs +1 -0
- package/dist/components/ui.cjs.map +1 -1
- package/dist/components/ui.js +5 -4
- package/dist/components/ui.js.map +1 -1
- package/dist/components/vue.js +7 -7
- package/dist/components/webgl.js +1 -1
- package/dist/components/widgets.cjs +622 -53
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +106 -2
- package/dist/components/widgets.d.ts +106 -2
- package/dist/components/widgets.js +617 -56
- package/dist/components/widgets.js.map +1 -1
- package/dist/components.js +9 -9
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/dist/index.js +2 -2
- 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 +28 -0
- package/docs/deprecations.md +4 -0
- package/docs/upgrading-7.md +33 -0
- package/package.json +23 -2
- package/dist/chunks/gpu-BBRLgEzM.cjs.map +0 -1
- package/dist/chunks/gpu-CsP2ZB3x.js.map +0 -1
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
var base = require('../chunks/base-BaQV-2ha.cjs');
|
|
4
4
|
var spring = require('../chunks/spring-Dgx187Vh.cjs');
|
|
5
|
+
var player = require('../chunks/player-PS6_FzNw.cjs');
|
|
6
|
+
require('../chunks/registry-DehBVRDV.cjs');
|
|
7
|
+
require('../chunks/core-BGAyaY6L.cjs');
|
|
8
|
+
require('./tokens.cjs');
|
|
5
9
|
|
|
6
10
|
/** Helpers shared by the 6.x widgets (`motionary/components/widgets`). */
|
|
7
11
|
const clampN = (v, a, b) => Math.min(b, Math.max(a, v));
|
|
@@ -38,7 +42,7 @@ function arrowIndex(e, i, n, vertical = false) {
|
|
|
38
42
|
return -1;
|
|
39
43
|
}
|
|
40
44
|
|
|
41
|
-
var css$
|
|
45
|
+
var css$t = "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}";
|
|
42
46
|
|
|
43
47
|
const CAROUSEL_EFFECTS = ['slide', 'fade', 'scale', 'cards'];
|
|
44
48
|
function defineCarousel(tag = 'usa-carousel') {
|
|
@@ -227,10 +231,10 @@ function defineCarousel(tag = 'usa-carousel') {
|
|
|
227
231
|
}
|
|
228
232
|
}
|
|
229
233
|
return UsaCarousel;
|
|
230
|
-
}, { id: 'carousel', text: css$
|
|
234
|
+
}, { id: 'carousel', text: css$t });
|
|
231
235
|
}
|
|
232
236
|
|
|
233
|
-
var css$
|
|
237
|
+
var css$s = "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}";
|
|
234
238
|
|
|
235
239
|
const TAB_INDICATORS = ['pill', 'underline', 'glow', 'gooey'];
|
|
236
240
|
function defineTabBar(tag = 'usa-tab-bar') {
|
|
@@ -343,10 +347,10 @@ function defineTabBar(tag = 'usa-tab-bar') {
|
|
|
343
347
|
}
|
|
344
348
|
}
|
|
345
349
|
return UsaTabBar;
|
|
346
|
-
}, { id: 'tab-bar', text: css$
|
|
350
|
+
}, { id: 'tab-bar', text: css$s });
|
|
347
351
|
}
|
|
348
352
|
|
|
349
|
-
var css$
|
|
353
|
+
var css$r = "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}}";
|
|
350
354
|
|
|
351
355
|
function defineDisclosure(tag = 'usa-disclosure') {
|
|
352
356
|
return base.defineElement(tag, (Base) => {
|
|
@@ -414,10 +418,10 @@ function defineDisclosure(tag = 'usa-disclosure') {
|
|
|
414
418
|
}
|
|
415
419
|
}
|
|
416
420
|
return UsaDisclosure;
|
|
417
|
-
}, { id: 'disclosure', text: css$
|
|
421
|
+
}, { id: 'disclosure', text: css$r });
|
|
418
422
|
}
|
|
419
423
|
|
|
420
|
-
var css$
|
|
424
|
+
var css$q = "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}}";
|
|
421
425
|
|
|
422
426
|
function defineStories(tag = 'usa-stories') {
|
|
423
427
|
return base.defineElement(tag, (Base) => {
|
|
@@ -550,10 +554,10 @@ function defineStories(tag = 'usa-stories') {
|
|
|
550
554
|
}
|
|
551
555
|
}
|
|
552
556
|
return UsaStories;
|
|
553
|
-
}, { id: 'stories', text: css$
|
|
557
|
+
}, { id: 'stories', text: css$q });
|
|
554
558
|
}
|
|
555
559
|
|
|
556
|
-
var css$
|
|
560
|
+
var css$p = "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)}}";
|
|
557
561
|
|
|
558
562
|
const MODAL_EFFECTS = ['scale', 'slide-up', 'flip', 'origin'];
|
|
559
563
|
const SHEET_SIDES = ['right', 'left', 'bottom', 'top'];
|
|
@@ -780,12 +784,12 @@ function defineOverlay(tag, kind) {
|
|
|
780
784
|
}
|
|
781
785
|
}
|
|
782
786
|
return UsaOverlay;
|
|
783
|
-
}, { id: 'overlay', text: css$
|
|
787
|
+
}, { id: 'overlay', text: css$p });
|
|
784
788
|
}
|
|
785
789
|
const defineModal = (tag = 'usa-modal') => defineOverlay(tag, 'modal');
|
|
786
790
|
const defineSheet = (tag = 'usa-sheet') => defineOverlay(tag, 'sheet');
|
|
787
791
|
|
|
788
|
-
var css$
|
|
792
|
+
var css$o = "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}}";
|
|
789
793
|
|
|
790
794
|
const TOAST_POSITIONS = ['bottom-right', 'bottom-left', 'bottom-center', 'top-right', 'top-left', 'top-center'];
|
|
791
795
|
const ICONS = { info: 'ℹ', success: '✓', warning: '!', error: '✕' };
|
|
@@ -956,7 +960,7 @@ function defineToastStack(tag = 'usa-toast-stack') {
|
|
|
956
960
|
}
|
|
957
961
|
}
|
|
958
962
|
return UsaToastStack;
|
|
959
|
-
}, { id: 'toast', text: css$
|
|
963
|
+
}, { id: 'toast', text: css$o });
|
|
960
964
|
}
|
|
961
965
|
/** Show a toast on the first `<usa-toast-stack>` of the page (one is created when missing). */
|
|
962
966
|
function stackToast(input, stack) {
|
|
@@ -984,7 +988,7 @@ function installToastTriggers() {
|
|
|
984
988
|
});
|
|
985
989
|
}
|
|
986
990
|
|
|
987
|
-
var css$
|
|
991
|
+
var css$n = "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)}}";
|
|
988
992
|
|
|
989
993
|
const MENU_EFFECTS = ['scale', 'fold', 'slide'];
|
|
990
994
|
function defineMenu(tag = 'usa-menu') {
|
|
@@ -1123,10 +1127,10 @@ function defineMenu(tag = 'usa-menu') {
|
|
|
1123
1127
|
}
|
|
1124
1128
|
}
|
|
1125
1129
|
return UsaMenu;
|
|
1126
|
-
}, { id: 'menu', text: css$
|
|
1130
|
+
}, { id: 'menu', text: css$n });
|
|
1127
1131
|
}
|
|
1128
1132
|
|
|
1129
|
-
var css$
|
|
1133
|
+
var css$m = "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}}";
|
|
1130
1134
|
|
|
1131
1135
|
const PROGRESS_VARIANTS = ['ring', 'bar', 'semi'];
|
|
1132
1136
|
const NS = 'http://www.w3.org/2000/svg';
|
|
@@ -1266,7 +1270,7 @@ function defineProgressRing(tag = 'usa-progress-ring') {
|
|
|
1266
1270
|
}
|
|
1267
1271
|
}
|
|
1268
1272
|
return UsaProgressRing;
|
|
1269
|
-
}, { id: 'meters', text: css$
|
|
1273
|
+
}, { id: 'meters', text: css$m });
|
|
1270
1274
|
}
|
|
1271
1275
|
function defineOdometer(tag = 'usa-odometer') {
|
|
1272
1276
|
return base.defineElement(tag, (Base) => {
|
|
@@ -1376,10 +1380,10 @@ function defineOdometer(tag = 'usa-odometer') {
|
|
|
1376
1380
|
}
|
|
1377
1381
|
}
|
|
1378
1382
|
return UsaOdometer;
|
|
1379
|
-
}, { id: 'meters', text: css$
|
|
1383
|
+
}, { id: 'meters', text: css$m });
|
|
1380
1384
|
}
|
|
1381
1385
|
|
|
1382
|
-
var css$
|
|
1386
|
+
var css$l = "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}}";
|
|
1383
1387
|
|
|
1384
1388
|
const SKELETON_VARIANTS = ['wave', 'pulse', 'glow'];
|
|
1385
1389
|
function defineSkeletonReveal(tag = 'usa-skeleton-reveal') {
|
|
@@ -1494,10 +1498,10 @@ function defineSkeletonReveal(tag = 'usa-skeleton-reveal') {
|
|
|
1494
1498
|
}
|
|
1495
1499
|
}
|
|
1496
1500
|
return UsaSkeletonReveal;
|
|
1497
|
-
}, { id: 'skeleton-reveal', text: css$
|
|
1501
|
+
}, { id: 'skeleton-reveal', text: css$l });
|
|
1498
1502
|
}
|
|
1499
1503
|
|
|
1500
|
-
var css$
|
|
1504
|
+
var css$k = "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}}";
|
|
1501
1505
|
|
|
1502
1506
|
const PATHS = {
|
|
1503
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',
|
|
@@ -1621,10 +1625,10 @@ function defineStarRating(tag = 'usa-star-rating') {
|
|
|
1621
1625
|
}
|
|
1622
1626
|
}
|
|
1623
1627
|
return UsaStarRating;
|
|
1624
|
-
}, { id: 'star-rating', text: css$
|
|
1628
|
+
}, { id: 'star-rating', text: css$k });
|
|
1625
1629
|
}
|
|
1626
1630
|
|
|
1627
|
-
var css$
|
|
1631
|
+
var css$j = "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}}";
|
|
1628
1632
|
|
|
1629
1633
|
function defineMilestones(tag = 'usa-milestones') {
|
|
1630
1634
|
return base.defineElement(tag, (Base) => {
|
|
@@ -1712,10 +1716,10 @@ function defineMilestones(tag = 'usa-milestones') {
|
|
|
1712
1716
|
}
|
|
1713
1717
|
}
|
|
1714
1718
|
return UsaMilestones;
|
|
1715
|
-
}, { id: 'milestones', text: css$
|
|
1719
|
+
}, { id: 'milestones', text: css$j });
|
|
1716
1720
|
}
|
|
1717
1721
|
|
|
1718
|
-
var css$
|
|
1722
|
+
var css$i = "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}";
|
|
1719
1723
|
|
|
1720
1724
|
function defineMasonryFlow(tag = 'usa-masonry-flow') {
|
|
1721
1725
|
return base.defineElement(tag, (Base) => {
|
|
@@ -1836,10 +1840,10 @@ function defineMasonryFlow(tag = 'usa-masonry-flow') {
|
|
|
1836
1840
|
}
|
|
1837
1841
|
}
|
|
1838
1842
|
return UsaMasonryFlow;
|
|
1839
|
-
}, { id: 'masonry-flow', text: css$
|
|
1843
|
+
}, { id: 'masonry-flow', text: css$i });
|
|
1840
1844
|
}
|
|
1841
1845
|
|
|
1842
|
-
var css$
|
|
1846
|
+
var css$h = "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}";
|
|
1843
1847
|
|
|
1844
1848
|
function defineCompare(tag = 'usa-compare') {
|
|
1845
1849
|
return base.defineElement(tag, (Base) => {
|
|
@@ -1963,10 +1967,10 @@ function defineCompare(tag = 'usa-compare') {
|
|
|
1963
1967
|
}
|
|
1964
1968
|
}
|
|
1965
1969
|
return UsaCompare;
|
|
1966
|
-
}, { id: 'compare', text: css$
|
|
1970
|
+
}, { id: 'compare', text: css$h });
|
|
1967
1971
|
}
|
|
1968
1972
|
|
|
1969
|
-
var css$
|
|
1973
|
+
var css$g = "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}";
|
|
1970
1974
|
|
|
1971
1975
|
function defineCubeGallery(tag = 'usa-cube-gallery') {
|
|
1972
1976
|
return base.defineElement(tag, (Base) => {
|
|
@@ -2099,10 +2103,10 @@ function defineCubeGallery(tag = 'usa-cube-gallery') {
|
|
|
2099
2103
|
}
|
|
2100
2104
|
}
|
|
2101
2105
|
return UsaCubeGallery;
|
|
2102
|
-
}, { id: 'cube-gallery', text: css$
|
|
2106
|
+
}, { id: 'cube-gallery', text: css$g });
|
|
2103
2107
|
}
|
|
2104
2108
|
|
|
2105
|
-
var css$
|
|
2109
|
+
var css$f = "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}}";
|
|
2106
2110
|
|
|
2107
2111
|
function defineDock(tag = 'usa-dock') {
|
|
2108
2112
|
return base.defineElement(tag, (Base) => {
|
|
@@ -2170,10 +2174,10 @@ function defineDock(tag = 'usa-dock') {
|
|
|
2170
2174
|
}
|
|
2171
2175
|
}
|
|
2172
2176
|
return UsaDock;
|
|
2173
|
-
}, { id: 'dock', text: css$
|
|
2177
|
+
}, { id: 'dock', text: css$f });
|
|
2174
2178
|
}
|
|
2175
2179
|
|
|
2176
|
-
var css$
|
|
2180
|
+
var css$e = "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)}";
|
|
2177
2181
|
|
|
2178
2182
|
const NAV_INDICATORS = ['underline', 'pill', 'blob', 'dot'];
|
|
2179
2183
|
function defineNavMorph(tag = 'usa-nav-morph') {
|
|
@@ -2277,10 +2281,10 @@ function defineNavMorph(tag = 'usa-nav-morph') {
|
|
|
2277
2281
|
}
|
|
2278
2282
|
}
|
|
2279
2283
|
return UsaNavMorph;
|
|
2280
|
-
}, { id: 'nav-morph', text: css$
|
|
2284
|
+
}, { id: 'nav-morph', text: css$e });
|
|
2281
2285
|
}
|
|
2282
2286
|
|
|
2283
|
-
var css$
|
|
2287
|
+
var css$d = "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}";
|
|
2284
2288
|
|
|
2285
2289
|
const TOGGLE_VARIANTS = ['cross', 'arrow', 'minus', 'plus-x'];
|
|
2286
2290
|
function defineMenuToggle(tag = 'usa-menu-toggle') {
|
|
@@ -2353,10 +2357,10 @@ function defineMenuToggle(tag = 'usa-menu-toggle') {
|
|
|
2353
2357
|
}
|
|
2354
2358
|
}
|
|
2355
2359
|
return UsaMenuToggle;
|
|
2356
|
-
}, { id: 'menu-toggle', text: css$
|
|
2360
|
+
}, { id: 'menu-toggle', text: css$d });
|
|
2357
2361
|
}
|
|
2358
2362
|
|
|
2359
|
-
var css$
|
|
2363
|
+
var css$c = "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)}";
|
|
2360
2364
|
|
|
2361
2365
|
const TIP_PLACEMENTS = ['top', 'bottom', 'left', 'right'];
|
|
2362
2366
|
const FLIP = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
|
|
@@ -2488,10 +2492,10 @@ function defineTip(tag = 'usa-tip') {
|
|
|
2488
2492
|
}
|
|
2489
2493
|
}
|
|
2490
2494
|
return UsaTip;
|
|
2491
|
-
}, { id: 'tip', text: css$
|
|
2495
|
+
}, { id: 'tip', text: css$c });
|
|
2492
2496
|
}
|
|
2493
2497
|
|
|
2494
|
-
var css$
|
|
2498
|
+
var css$b = "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}}";
|
|
2495
2499
|
|
|
2496
2500
|
function defineStepper(tag = 'usa-stepper') {
|
|
2497
2501
|
return base.defineElement(tag, (Base) => {
|
|
@@ -2588,10 +2592,10 @@ function defineStepper(tag = 'usa-stepper') {
|
|
|
2588
2592
|
}
|
|
2589
2593
|
}
|
|
2590
2594
|
return UsaStepper;
|
|
2591
|
-
}, { id: 'stepper', text: css$
|
|
2595
|
+
}, { id: 'stepper', text: css$b });
|
|
2592
2596
|
}
|
|
2593
2597
|
|
|
2594
|
-
var css$
|
|
2598
|
+
var css$a = "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}}";
|
|
2595
2599
|
|
|
2596
2600
|
/** The visible page list: numbers and `'…'` gaps (1-based). */
|
|
2597
2601
|
function pageWindow(page, total, siblings = 1) {
|
|
@@ -2713,10 +2717,10 @@ function definePagination(tag = 'usa-pagination') {
|
|
|
2713
2717
|
}
|
|
2714
2718
|
}
|
|
2715
2719
|
return UsaPagination;
|
|
2716
|
-
}, { id: 'pagination', text: css$
|
|
2720
|
+
}, { id: 'pagination', text: css$a });
|
|
2717
2721
|
}
|
|
2718
2722
|
|
|
2719
|
-
var css$
|
|
2723
|
+
var css$9 = "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}}";
|
|
2720
2724
|
|
|
2721
2725
|
const SEGMENTED_VARIANTS = ['ios', 'pill', 'outline'];
|
|
2722
2726
|
function defineSegmented(tag = 'usa-segmented') {
|
|
@@ -2810,10 +2814,10 @@ function defineSegmented(tag = 'usa-segmented') {
|
|
|
2810
2814
|
}
|
|
2811
2815
|
}
|
|
2812
2816
|
return UsaSegmented;
|
|
2813
|
-
}, { id: 'segmented', text: css$
|
|
2817
|
+
}, { id: 'segmented', text: css$9 });
|
|
2814
2818
|
}
|
|
2815
2819
|
|
|
2816
|
-
var css$
|
|
2820
|
+
var css$8 = "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}}";
|
|
2817
2821
|
|
|
2818
2822
|
const SWITCH_VARIANTS = ['ios', 'daynight', 'bounce', 'liquid'];
|
|
2819
2823
|
function defineSwitch(tag = 'usa-switch') {
|
|
@@ -2901,10 +2905,10 @@ function defineSwitch(tag = 'usa-switch') {
|
|
|
2901
2905
|
}
|
|
2902
2906
|
}
|
|
2903
2907
|
return UsaSwitch;
|
|
2904
|
-
}, { id: 'switch', text: css$
|
|
2908
|
+
}, { id: 'switch', text: css$8 });
|
|
2905
2909
|
}
|
|
2906
2910
|
|
|
2907
|
-
var css$
|
|
2911
|
+
var css$7 = "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}}";
|
|
2908
2912
|
|
|
2909
2913
|
function defineKanban(tag = 'usa-kanban') {
|
|
2910
2914
|
return base.defineElement(tag, (Base) => {
|
|
@@ -3109,10 +3113,10 @@ function defineKanban(tag = 'usa-kanban') {
|
|
|
3109
3113
|
}
|
|
3110
3114
|
}
|
|
3111
3115
|
return UsaKanban;
|
|
3112
|
-
}, { id: 'kanban', text: css$
|
|
3116
|
+
}, { id: 'kanban', text: css$7 });
|
|
3113
3117
|
}
|
|
3114
3118
|
|
|
3115
|
-
var css$
|
|
3119
|
+
var css$6 = "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}}";
|
|
3116
3120
|
|
|
3117
3121
|
function defineSwipeDeck(tag = 'usa-swipe-deck') {
|
|
3118
3122
|
return base.defineElement(tag, (Base) => {
|
|
@@ -3254,10 +3258,10 @@ function defineSwipeDeck(tag = 'usa-swipe-deck') {
|
|
|
3254
3258
|
}
|
|
3255
3259
|
}
|
|
3256
3260
|
return UsaSwipeDeck;
|
|
3257
|
-
}, { id: 'swipe-deck', text: css$
|
|
3261
|
+
}, { id: 'swipe-deck', text: css$6 });
|
|
3258
3262
|
}
|
|
3259
3263
|
|
|
3260
|
-
var css$
|
|
3264
|
+
var css$5 = "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}}";
|
|
3261
3265
|
|
|
3262
3266
|
const WEATHER_CONDITIONS = ['clear', 'cloudy', 'rain', 'snow', 'storm', 'fog', 'night'];
|
|
3263
3267
|
const LABEL = { clear: 'Clear', cloudy: 'Cloudy', rain: 'Rain', snow: 'Snow', storm: 'Thunderstorm', fog: 'Fog', night: 'Clear night' };
|
|
@@ -3338,10 +3342,10 @@ function defineWeatherCard(tag = 'usa-weather-card') {
|
|
|
3338
3342
|
}
|
|
3339
3343
|
}
|
|
3340
3344
|
return UsaWeatherCard;
|
|
3341
|
-
}, { id: 'weather-card', text: css$
|
|
3345
|
+
}, { id: 'weather-card', text: css$5 });
|
|
3342
3346
|
}
|
|
3343
3347
|
|
|
3344
|
-
var css = "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}}";
|
|
3348
|
+
var css$4 = "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}}";
|
|
3345
3349
|
|
|
3346
3350
|
function definePullCord(tag = 'usa-pull-cord') {
|
|
3347
3351
|
return base.defineElement(tag, (Base) => {
|
|
@@ -3470,7 +3474,563 @@ function definePullCord(tag = 'usa-pull-cord') {
|
|
|
3470
3474
|
}
|
|
3471
3475
|
}
|
|
3472
3476
|
return UsaPullCord;
|
|
3473
|
-
}, { id: 'pull-cord', text: css });
|
|
3477
|
+
}, { id: 'pull-cord', text: css$4 });
|
|
3478
|
+
}
|
|
3479
|
+
|
|
3480
|
+
var css$3 = "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
|
+
|
|
3482
|
+
const iso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
|
3483
|
+
/** Parse `YYYY-MM-DD` as a local date (or null). */
|
|
3484
|
+
function parseISODate(s) {
|
|
3485
|
+
const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s || '');
|
|
3486
|
+
if (!m)
|
|
3487
|
+
return null;
|
|
3488
|
+
const d = new Date(+m[1], +m[2] - 1, +m[3]);
|
|
3489
|
+
return d.getMonth() === +m[2] - 1 ? d : null;
|
|
3490
|
+
}
|
|
3491
|
+
/** The 6×7 day grid of a month (first row starts on `firstDay`). */
|
|
3492
|
+
function monthGrid(year, month, firstDay = 1) {
|
|
3493
|
+
const first = new Date(year, month, 1);
|
|
3494
|
+
const off = (first.getDay() - firstDay + 7) % 7;
|
|
3495
|
+
return Array.from({ length: 42 }, (_, i) => new Date(year, month, 1 - off + i));
|
|
3496
|
+
}
|
|
3497
|
+
function defineDatePicker(tag = 'usa-date-picker') {
|
|
3498
|
+
return base.defineElement(tag, (Base) => {
|
|
3499
|
+
class UsaDatePicker extends Base {
|
|
3500
|
+
constructor() {
|
|
3501
|
+
super(...arguments);
|
|
3502
|
+
this._value = null;
|
|
3503
|
+
this._view = new Date();
|
|
3504
|
+
this._focus = new Date();
|
|
3505
|
+
}
|
|
3506
|
+
static get observedAttributes() {
|
|
3507
|
+
return ['min', 'max', 'first-day', 'locale'];
|
|
3508
|
+
}
|
|
3509
|
+
get value() {
|
|
3510
|
+
return this._value ? iso(this._value) : '';
|
|
3511
|
+
}
|
|
3512
|
+
set value(v) {
|
|
3513
|
+
const d = parseISODate(v);
|
|
3514
|
+
this._value = d;
|
|
3515
|
+
if (d)
|
|
3516
|
+
(this._view = new Date(d.getFullYear(), d.getMonth(), 1)), (this._focus = d);
|
|
3517
|
+
if (this.isConnected)
|
|
3518
|
+
this.render(0);
|
|
3519
|
+
}
|
|
3520
|
+
get month() {
|
|
3521
|
+
return iso(this._view).slice(0, 7);
|
|
3522
|
+
}
|
|
3523
|
+
mount() {
|
|
3524
|
+
const v = parseISODate(this.getAttribute('value'));
|
|
3525
|
+
if (v)
|
|
3526
|
+
(this._value = v), (this._focus = v);
|
|
3527
|
+
else
|
|
3528
|
+
this._focus = this._value || new Date();
|
|
3529
|
+
this._view = new Date(this._focus.getFullYear(), this._focus.getMonth(), 1);
|
|
3530
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
3531
|
+
this.insertAdjacentHTML('afterbegin', '<div class="usa-dp-head" data-usa-part><button type="button" class="usa-dp-nav" data-d="-1" aria-label="Previous month">‹</button><span class="usa-dp-title" aria-live="polite"></span><button type="button" class="usa-dp-nav" data-d="1" aria-label="Next month">›</button></div><div class="usa-dp-viewport" data-usa-part><div class="usa-dp-grid" role="grid"></div></div>');
|
|
3532
|
+
this.listen(this, 'click', (e) => {
|
|
3533
|
+
const t = e.target;
|
|
3534
|
+
const nav = t.closest?.('.usa-dp-nav');
|
|
3535
|
+
if (nav)
|
|
3536
|
+
return this.showMonth(Number(nav.dataset.d));
|
|
3537
|
+
const day = t.closest?.('[data-date]');
|
|
3538
|
+
if (day && !day.hasAttribute('aria-disabled'))
|
|
3539
|
+
this.pick(parseISODate(day.dataset.date));
|
|
3540
|
+
});
|
|
3541
|
+
this.listen(this, 'keydown', (e) => this.key(e));
|
|
3542
|
+
this.render(0);
|
|
3543
|
+
}
|
|
3544
|
+
inRange(d) {
|
|
3545
|
+
const lo = parseISODate(this.getAttribute('min'));
|
|
3546
|
+
const hi = parseISODate(this.getAttribute('max'));
|
|
3547
|
+
return (!lo || d >= lo) && (!hi || d <= hi);
|
|
3548
|
+
}
|
|
3549
|
+
render(dir, focus = false) {
|
|
3550
|
+
const grid = this.querySelector('.usa-dp-grid');
|
|
3551
|
+
if (!grid)
|
|
3552
|
+
return;
|
|
3553
|
+
const loc = this.str('locale', '') || undefined;
|
|
3554
|
+
const fd = this.num('first-day', 1);
|
|
3555
|
+
const title = this.querySelector('.usa-dp-title');
|
|
3556
|
+
title.textContent = this._view.toLocaleDateString(loc, { month: 'long', year: 'numeric' });
|
|
3557
|
+
const days = monthGrid(this._view.getFullYear(), this._view.getMonth(), fd);
|
|
3558
|
+
const names = days.slice(0, 7).map((d) => d.toLocaleDateString(loc, { weekday: 'narrow' }));
|
|
3559
|
+
const today = iso(new Date());
|
|
3560
|
+
const sel = this.value;
|
|
3561
|
+
const foc = iso(this._focus);
|
|
3562
|
+
let html = `<div role="row" class="usa-dp-row usa-dp-dow">${names.map((n) => `<span role="columnheader">${n}</span>`).join('')}</div>`;
|
|
3563
|
+
for (let r = 0; r < 6; r++) {
|
|
3564
|
+
html += '<div role="row" class="usa-dp-row">';
|
|
3565
|
+
for (const d of days.slice(r * 7, r * 7 + 7)) {
|
|
3566
|
+
const k = iso(d);
|
|
3567
|
+
const out = d.getMonth() !== this._view.getMonth();
|
|
3568
|
+
const dis = !this.inRange(d);
|
|
3569
|
+
html += `<span role="gridcell" class="usa-dp-day" data-date="${k}"${out ? ' data-out' : ''}${k === today ? ' data-today' : ''} aria-selected="${k === sel}"${dis ? ' aria-disabled="true"' : ''} tabindex="${k === foc ? 0 : -1}" aria-label="${d.toLocaleDateString(loc, { day: 'numeric', month: 'long', year: 'numeric' })}">${d.getDate()}</span>`;
|
|
3570
|
+
}
|
|
3571
|
+
html += '</div>';
|
|
3572
|
+
}
|
|
3573
|
+
grid.innerHTML = html;
|
|
3574
|
+
if (focus)
|
|
3575
|
+
grid.querySelector(`[data-date="${foc}"]`)?.focus();
|
|
3576
|
+
if (dir && !this.reduced)
|
|
3577
|
+
this.motion(grid, [{ transform: `translateX(${dir * 30}%)`, opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: 320, easing: 'cubic-bezier(.2,.8,.2,1)' });
|
|
3578
|
+
}
|
|
3579
|
+
showMonth(delta) {
|
|
3580
|
+
this._view = new Date(this._view.getFullYear(), this._view.getMonth() + delta, 1);
|
|
3581
|
+
this._focus = new Date(this._view);
|
|
3582
|
+
this.render(Math.sign(delta));
|
|
3583
|
+
}
|
|
3584
|
+
pick(d) {
|
|
3585
|
+
if (!this.inRange(d))
|
|
3586
|
+
return;
|
|
3587
|
+
this._value = d;
|
|
3588
|
+
this._focus = d;
|
|
3589
|
+
const dir = d.getMonth() !== this._view.getMonth() || d.getFullYear() !== this._view.getFullYear() ? (d > this._view ? 1 : -1) : 0;
|
|
3590
|
+
if (dir)
|
|
3591
|
+
this._view = new Date(d.getFullYear(), d.getMonth(), 1);
|
|
3592
|
+
this.setAttribute('value', iso(d));
|
|
3593
|
+
this.render(dir, true);
|
|
3594
|
+
const cell = this.querySelector(`[data-date="${iso(d)}"]`);
|
|
3595
|
+
if (cell && !this.reduced)
|
|
3596
|
+
this.motion(cell, [{ transform: 'scale(.6)' }, { transform: 'scale(1.15)', offset: 0.6 }, { transform: 'scale(1)' }], { duration: 380, easing: 'ease-out' });
|
|
3597
|
+
this.emit('change', { value: iso(d), date: d });
|
|
3598
|
+
}
|
|
3599
|
+
key(e) {
|
|
3600
|
+
if (!e.target.closest?.('[data-date]'))
|
|
3601
|
+
return;
|
|
3602
|
+
const f = new Date(this._focus);
|
|
3603
|
+
const step = {
|
|
3604
|
+
ArrowLeft: () => f.setDate(f.getDate() - 1),
|
|
3605
|
+
ArrowRight: () => f.setDate(f.getDate() + 1),
|
|
3606
|
+
ArrowUp: () => f.setDate(f.getDate() - 7),
|
|
3607
|
+
ArrowDown: () => f.setDate(f.getDate() + 7),
|
|
3608
|
+
PageUp: () => f.setMonth(f.getMonth() - 1),
|
|
3609
|
+
PageDown: () => f.setMonth(f.getMonth() + 1),
|
|
3610
|
+
Home: () => f.setDate(f.getDate() - ((f.getDay() - this.num('first-day', 1) + 7) % 7)),
|
|
3611
|
+
End: () => f.setDate(f.getDate() + 6 - ((f.getDay() - this.num('first-day', 1) + 7) % 7)),
|
|
3612
|
+
};
|
|
3613
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
3614
|
+
e.preventDefault();
|
|
3615
|
+
return this.pick(this._focus);
|
|
3616
|
+
}
|
|
3617
|
+
if (!step[e.key])
|
|
3618
|
+
return;
|
|
3619
|
+
e.preventDefault();
|
|
3620
|
+
step[e.key]();
|
|
3621
|
+
const dir = f.getMonth() !== this._view.getMonth() ? (f > this._view ? 1 : -1) : 0;
|
|
3622
|
+
this._focus = f;
|
|
3623
|
+
if (dir)
|
|
3624
|
+
this._view = new Date(f.getFullYear(), f.getMonth(), 1);
|
|
3625
|
+
this.render(dir, true);
|
|
3626
|
+
}
|
|
3627
|
+
}
|
|
3628
|
+
return UsaDatePicker;
|
|
3629
|
+
}, { id: 'date-picker', text: css$3 });
|
|
3630
|
+
}
|
|
3631
|
+
|
|
3632
|
+
var css$2 = "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
|
+
|
|
3634
|
+
/** HSV (h 0–360, s / v 0–1) → `#rrggbb`. */
|
|
3635
|
+
function hsvToHex(h, s, v) {
|
|
3636
|
+
const f = (n) => {
|
|
3637
|
+
const k = (n + h / 60) % 6;
|
|
3638
|
+
return Math.round((v - v * s * Math.max(0, Math.min(k, 4 - k, 1))) * 255);
|
|
3639
|
+
};
|
|
3640
|
+
return '#' + [f(5), f(3), f(1)].map((x) => x.toString(16).padStart(2, '0')).join('');
|
|
3641
|
+
}
|
|
3642
|
+
/** `#rrggbb` → HSV (or null). */
|
|
3643
|
+
function hexToHsv(hex) {
|
|
3644
|
+
const m = /^#?([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i.exec(hex.trim());
|
|
3645
|
+
if (!m)
|
|
3646
|
+
return null;
|
|
3647
|
+
const [r, g, b] = [m[1], m[2], m[3]].map((x) => parseInt(x, 16) / 255);
|
|
3648
|
+
const mx = Math.max(r, g, b);
|
|
3649
|
+
const d = mx - Math.min(r, g, b);
|
|
3650
|
+
let h = 0;
|
|
3651
|
+
if (d)
|
|
3652
|
+
h = mx === r ? ((g - b) / d) % 6 : mx === g ? (b - r) / d + 2 : (r - g) / d + 4;
|
|
3653
|
+
return [(h * 60 + 360) % 360, mx ? d / mx : 0, mx];
|
|
3654
|
+
}
|
|
3655
|
+
function defineColorPicker(tag = 'usa-color-picker') {
|
|
3656
|
+
return base.defineElement(tag, (Base) => {
|
|
3657
|
+
class UsaColorPicker extends Base {
|
|
3658
|
+
constructor() {
|
|
3659
|
+
super(...arguments);
|
|
3660
|
+
this._h = 260;
|
|
3661
|
+
this._s = 0.64;
|
|
3662
|
+
this._v = 1;
|
|
3663
|
+
}
|
|
3664
|
+
static get observedAttributes() {
|
|
3665
|
+
return ['swatches'];
|
|
3666
|
+
}
|
|
3667
|
+
get value() {
|
|
3668
|
+
return hsvToHex(this._h, this._s, this._v);
|
|
3669
|
+
}
|
|
3670
|
+
set value(v) {
|
|
3671
|
+
const hsv = hexToHsv(v);
|
|
3672
|
+
if (!hsv)
|
|
3673
|
+
return;
|
|
3674
|
+
[this._h, this._s, this._v] = hsv;
|
|
3675
|
+
this.paint(true);
|
|
3676
|
+
}
|
|
3677
|
+
mount() {
|
|
3678
|
+
const hsv = hexToHsv(this.str('value', '#7c5cff'));
|
|
3679
|
+
if (hsv)
|
|
3680
|
+
[this._h, this._s, this._v] = hsv;
|
|
3681
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
3682
|
+
const sw = this.str('swatches', '').split(',').map((s) => s.trim()).filter((s) => hexToHsv(s));
|
|
3683
|
+
this.insertAdjacentHTML('afterbegin', `<div class="usa-cp-sv" data-usa-part role="slider" tabindex="0" aria-label="Saturation and brightness"><span class="usa-cp-thumb"></span></div><div class="usa-cp-row" data-usa-part><span class="usa-cp-chip" aria-hidden="true"></span><div class="usa-cp-hue" role="slider" tabindex="0" aria-label="Hue" aria-valuemin="0" aria-valuemax="360"><span class="usa-cp-thumb"></span></div></div>${sw.length ? `<div class="usa-cp-swatches" data-usa-part>${sw.map((c) => `<button type="button" class="usa-cp-sw" style="background:${c}" data-c="${c}" aria-label="${c}"></button>`).join('')}</div>` : ''}`);
|
|
3684
|
+
const sv = this.querySelector('.usa-cp-sv');
|
|
3685
|
+
const hue = this.querySelector('.usa-cp-hue');
|
|
3686
|
+
this.drag(sv, (x, y) => ((this._s = x), (this._v = 1 - y)));
|
|
3687
|
+
this.drag(hue, (x) => (this._h = x * 360));
|
|
3688
|
+
this.listen(sv, 'keydown', (e) => this.keys(e, (d, ax) => (ax ? (this._v = clampN(this._v - d, 0, 1)) : (this._s = clampN(this._s + d, 0, 1)))));
|
|
3689
|
+
this.listen(hue, 'keydown', (e) => this.keys(e, (d) => (this._h = (this._h + d * 360 + 360) % 360)));
|
|
3690
|
+
this.listen(this, 'click', (e) => {
|
|
3691
|
+
const b = e.target.closest?.('.usa-cp-sw');
|
|
3692
|
+
if (!b)
|
|
3693
|
+
return;
|
|
3694
|
+
this.value = b.dataset.c;
|
|
3695
|
+
if (!this.reduced)
|
|
3696
|
+
this.motion(b, [{ transform: 'scale(1)' }, { transform: 'scale(1.35)', offset: 0.4 }, { transform: 'scale(1)' }], { duration: 360, easing: 'cubic-bezier(.3,1.5,.5,1)' });
|
|
3697
|
+
this.emit('change', { value: this.value });
|
|
3698
|
+
});
|
|
3699
|
+
this.paint(false);
|
|
3700
|
+
}
|
|
3701
|
+
keys(e, fn) {
|
|
3702
|
+
const k = e.shiftKey ? 0.1 : 0.01;
|
|
3703
|
+
const map = { ArrowLeft: [-k, false], ArrowRight: [k, false], ArrowUp: [-k, true], ArrowDown: [k, true] };
|
|
3704
|
+
const m = map[e.key];
|
|
3705
|
+
if (!m)
|
|
3706
|
+
return;
|
|
3707
|
+
e.preventDefault();
|
|
3708
|
+
fn(m[0], m[1]);
|
|
3709
|
+
this.paint(false);
|
|
3710
|
+
this.emit('change', { value: this.value });
|
|
3711
|
+
}
|
|
3712
|
+
drag(area, fn) {
|
|
3713
|
+
const at = (e) => {
|
|
3714
|
+
const r = area.getBoundingClientRect();
|
|
3715
|
+
fn(clampN((e.clientX - r.left) / (r.width || 1), 0, 1), clampN((e.clientY - r.top) / (r.height || 1), 0, 1));
|
|
3716
|
+
this.paint(false);
|
|
3717
|
+
this.emit('input', { value: this.value });
|
|
3718
|
+
};
|
|
3719
|
+
this.listen(area, 'pointerdown', (e) => {
|
|
3720
|
+
area.setPointerCapture?.(e.pointerId);
|
|
3721
|
+
area.toggleAttribute('data-drag', true);
|
|
3722
|
+
at(e);
|
|
3723
|
+
const move = (ev) => at(ev);
|
|
3724
|
+
const up = () => {
|
|
3725
|
+
area.removeAttribute('data-drag');
|
|
3726
|
+
area.removeEventListener('pointermove', move);
|
|
3727
|
+
area.removeEventListener('pointerup', up);
|
|
3728
|
+
this.emit('change', { value: this.value });
|
|
3729
|
+
};
|
|
3730
|
+
area.addEventListener('pointermove', move);
|
|
3731
|
+
area.addEventListener('pointerup', up);
|
|
3732
|
+
});
|
|
3733
|
+
}
|
|
3734
|
+
paint(morph) {
|
|
3735
|
+
const c = this.value;
|
|
3736
|
+
this.style.setProperty('--usa-cp-h', String(Math.round(this._h)));
|
|
3737
|
+
this.style.setProperty('--usa-cp-color', c);
|
|
3738
|
+
this.style.setProperty('--usa-cp-x', (this._s * 100).toFixed(2) + '%');
|
|
3739
|
+
this.style.setProperty('--usa-cp-y', ((1 - this._v) * 100).toFixed(2) + '%');
|
|
3740
|
+
this.style.setProperty('--usa-cp-hx', ((this._h / 360) * 100).toFixed(2) + '%');
|
|
3741
|
+
const sv = this.querySelector('.usa-cp-sv');
|
|
3742
|
+
sv?.setAttribute('aria-valuetext', `saturation ${Math.round(this._s * 100)}%, brightness ${Math.round(this._v * 100)}%`);
|
|
3743
|
+
const hue = this.querySelector('.usa-cp-hue');
|
|
3744
|
+
hue?.setAttribute('aria-valuenow', String(Math.round(this._h)));
|
|
3745
|
+
this.setAttribute('value', c);
|
|
3746
|
+
const chip = this.querySelector('.usa-cp-chip');
|
|
3747
|
+
if (morph && chip && !this.reduced)
|
|
3748
|
+
this.motion(chip, [{ borderRadius: '50%', transform: 'scale(.7) rotate(-20deg)' }, { borderRadius: '30%', transform: 'scale(1.1)', offset: 0.6 }, { borderRadius: '50%', transform: 'none' }], { duration: 420, easing: 'ease-out' });
|
|
3749
|
+
}
|
|
3750
|
+
}
|
|
3751
|
+
return UsaColorPicker;
|
|
3752
|
+
}, { id: 'color-picker', text: css$2 });
|
|
3753
|
+
}
|
|
3754
|
+
|
|
3755
|
+
var css$1 = "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
|
+
|
|
3757
|
+
const size = (n) => (n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(1)} KB` : `${(n / 1048576).toFixed(1)} MB`);
|
|
3758
|
+
function defineFileDrop(tag = 'usa-file-drop') {
|
|
3759
|
+
return base.defineElement(tag, (Base) => {
|
|
3760
|
+
class UsaFileDrop extends Base {
|
|
3761
|
+
constructor() {
|
|
3762
|
+
super(...arguments);
|
|
3763
|
+
this._files = [];
|
|
3764
|
+
this._depth = 0;
|
|
3765
|
+
}
|
|
3766
|
+
get files() {
|
|
3767
|
+
return this._files.slice();
|
|
3768
|
+
}
|
|
3769
|
+
mount() {
|
|
3770
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
3771
|
+
const label = this.str('label', 'Drop files here or browse');
|
|
3772
|
+
this.insertAdjacentHTML('afterbegin', `<div class="usa-fd-zone" data-usa-part role="button" tabindex="0"><svg class="usa-fd-ants" aria-hidden="true"><rect x="1" y="1" width="calc(100% - 2px)" height="calc(100% - 2px)" rx="14"/></svg><span class="usa-fd-icon" aria-hidden="true">⇪</span><span class="usa-fd-label"></span><input type="file" hidden></div><ul class="usa-fd-list" data-usa-part aria-live="polite"></ul>`);
|
|
3773
|
+
const zone = this.querySelector('.usa-fd-zone');
|
|
3774
|
+
zone.querySelector('.usa-fd-label').textContent = label;
|
|
3775
|
+
zone.setAttribute('aria-label', label);
|
|
3776
|
+
const input = zone.querySelector('input');
|
|
3777
|
+
if (this.str('accept', ''))
|
|
3778
|
+
input.accept = this.str('accept', '');
|
|
3779
|
+
input.multiple = this.flag('multiple');
|
|
3780
|
+
this.listen(zone, 'click', (e) => e.target !== input && input.click());
|
|
3781
|
+
this.listen(zone, 'keydown', (e) => {
|
|
3782
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
3783
|
+
e.preventDefault();
|
|
3784
|
+
input.click();
|
|
3785
|
+
}
|
|
3786
|
+
});
|
|
3787
|
+
this.listen(input, 'change', () => input.files && this.addFiles(input.files));
|
|
3788
|
+
this.listen(zone, 'dragenter', (e) => {
|
|
3789
|
+
e.preventDefault();
|
|
3790
|
+
this._depth++;
|
|
3791
|
+
this.toggleAttribute('data-over', true);
|
|
3792
|
+
});
|
|
3793
|
+
this.listen(zone, 'dragover', (e) => e.preventDefault());
|
|
3794
|
+
this.listen(zone, 'dragleave', () => {
|
|
3795
|
+
this._depth = Math.max(0, this._depth - 1);
|
|
3796
|
+
if (!this._depth)
|
|
3797
|
+
this.removeAttribute('data-over');
|
|
3798
|
+
});
|
|
3799
|
+
this.listen(zone, 'drop', (e) => {
|
|
3800
|
+
e.preventDefault();
|
|
3801
|
+
this._depth = 0;
|
|
3802
|
+
this.removeAttribute('data-over');
|
|
3803
|
+
if (e.dataTransfer?.files?.length)
|
|
3804
|
+
this.addFiles(e.dataTransfer.files);
|
|
3805
|
+
});
|
|
3806
|
+
}
|
|
3807
|
+
addFiles(list) {
|
|
3808
|
+
const ul = this.querySelector('.usa-fd-list');
|
|
3809
|
+
const files = Array.from(list).slice(0, this.flag('multiple') ? undefined : 1);
|
|
3810
|
+
if (!this.flag('multiple'))
|
|
3811
|
+
this.clear();
|
|
3812
|
+
const start = this._files.length;
|
|
3813
|
+
files.forEach((f, i) => {
|
|
3814
|
+
this._files.push(f);
|
|
3815
|
+
const li = document.createElement('li');
|
|
3816
|
+
li.className = 'usa-fd-item';
|
|
3817
|
+
li.innerHTML = '<span class="usa-fd-name"></span><span class="usa-fd-size"></span><span class="usa-fd-bar"><span class="usa-fd-fill"></span></span><svg class="usa-fd-check" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3.2 3L13 4.8"/></svg>';
|
|
3818
|
+
li.querySelector('.usa-fd-name').textContent = f.name;
|
|
3819
|
+
li.querySelector('.usa-fd-size').textContent = size(f.size);
|
|
3820
|
+
li.setAttribute('aria-label', `${f.name}, ${size(f.size)}`);
|
|
3821
|
+
ul.appendChild(li);
|
|
3822
|
+
if (!this.reduced)
|
|
3823
|
+
this.motion(li, [{ transform: 'translateY(-28px) scale(.85)', opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: 380, delay: i * 70, easing: 'cubic-bezier(.2,.9,.3,1.2)', fill: 'backwards' });
|
|
3824
|
+
});
|
|
3825
|
+
this.emit('files', { files });
|
|
3826
|
+
if (this.flag('simulate'))
|
|
3827
|
+
files.forEach((_, i) => this.simulate(start + i));
|
|
3828
|
+
}
|
|
3829
|
+
simulate(i) {
|
|
3830
|
+
let p = 0;
|
|
3831
|
+
const tick = () => {
|
|
3832
|
+
if (!this.isConnected)
|
|
3833
|
+
return;
|
|
3834
|
+
p = Math.min(1, p + 0.12 + Math.random() * 0.15);
|
|
3835
|
+
this.setProgress(i, p);
|
|
3836
|
+
if (p < 1)
|
|
3837
|
+
setTimeout(tick, 160);
|
|
3838
|
+
};
|
|
3839
|
+
setTimeout(tick, 200);
|
|
3840
|
+
}
|
|
3841
|
+
setProgress(index, value) {
|
|
3842
|
+
const li = this.querySelectorAll('.usa-fd-item')[index];
|
|
3843
|
+
if (!li)
|
|
3844
|
+
return;
|
|
3845
|
+
const v = Math.max(0, Math.min(1, value));
|
|
3846
|
+
li.style.setProperty('--usa-fd-p', String(v));
|
|
3847
|
+
li.toggleAttribute('data-done', v >= 1);
|
|
3848
|
+
li.setAttribute('aria-label', `${this._files[index]?.name || ''}, ${Math.round(v * 100)}%`);
|
|
3849
|
+
}
|
|
3850
|
+
clear() {
|
|
3851
|
+
this._files = [];
|
|
3852
|
+
this.querySelector('.usa-fd-list')?.replaceChildren();
|
|
3853
|
+
}
|
|
3854
|
+
}
|
|
3855
|
+
return UsaFileDrop;
|
|
3856
|
+
}, { id: 'file-drop', text: css$1 });
|
|
3857
|
+
}
|
|
3858
|
+
|
|
3859
|
+
var css = "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
|
+
|
|
3861
|
+
const DEFAULT = {
|
|
3862
|
+
format: player.ANIMATION_FORMAT,
|
|
3863
|
+
version: 1,
|
|
3864
|
+
name: 'Untitled',
|
|
3865
|
+
tracks: [
|
|
3866
|
+
{ target: ':scope > :nth-child(1)', start: 0, duration: 600, preset: 'fade-up', label: 'Title' },
|
|
3867
|
+
{ target: ':scope > :nth-child(2)', start: 300, duration: 600, preset: 'scale', label: 'Card' },
|
|
3868
|
+
{ target: ':scope > :nth-child(3)', start: 700, duration: 500, preset: 'fade-up', label: 'Button' },
|
|
3869
|
+
],
|
|
3870
|
+
};
|
|
3871
|
+
function defineKeyframeEditor(tag = 'usa-keyframe-editor') {
|
|
3872
|
+
return base.defineElement(tag, (Base) => {
|
|
3873
|
+
class UsaKeyframeEditor extends Base {
|
|
3874
|
+
constructor() {
|
|
3875
|
+
super(...arguments);
|
|
3876
|
+
this._anim = JSON.parse(JSON.stringify(DEFAULT));
|
|
3877
|
+
this._player = null;
|
|
3878
|
+
}
|
|
3879
|
+
get animation() {
|
|
3880
|
+
return this.toJSON();
|
|
3881
|
+
}
|
|
3882
|
+
set animation(v) {
|
|
3883
|
+
try {
|
|
3884
|
+
const a = typeof v === 'string' ? JSON.parse(v) : v;
|
|
3885
|
+
if (a && Array.isArray(a.tracks))
|
|
3886
|
+
this._anim = { format: player.ANIMATION_FORMAT, version: 1, ...JSON.parse(JSON.stringify(a)) };
|
|
3887
|
+
}
|
|
3888
|
+
catch {
|
|
3889
|
+
return;
|
|
3890
|
+
}
|
|
3891
|
+
if (this.isConnected)
|
|
3892
|
+
this.render();
|
|
3893
|
+
}
|
|
3894
|
+
toJSON() {
|
|
3895
|
+
return JSON.parse(JSON.stringify({ ...this._anim, duration: this.total() }));
|
|
3896
|
+
}
|
|
3897
|
+
total() {
|
|
3898
|
+
return Math.max(500, ...this._anim.tracks.map((t) => (t.start || 0) + (t.duration || 0)));
|
|
3899
|
+
}
|
|
3900
|
+
mount() {
|
|
3901
|
+
const src = this.querySelector(':scope > script[type="application/json"]');
|
|
3902
|
+
if (src?.textContent)
|
|
3903
|
+
this.animation = src.textContent;
|
|
3904
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
3905
|
+
this.insertAdjacentHTML('afterbegin', '<div class="usa-ke-bar" data-usa-part><button type="button" class="usa-ke-play" aria-label="Play">▶</button><input class="usa-ke-scrub" type="range" min="0" max="1000" value="1000" aria-label="Playhead"><output class="usa-ke-time">0 ms</output></div><div class="usa-ke-tracks" data-usa-part role="list"></div>');
|
|
3906
|
+
this.listen(this.querySelector('.usa-ke-play'), 'click', () => this.play());
|
|
3907
|
+
this.listen(this.querySelector('.usa-ke-scrub'), 'input', (e) => this.seek((Number(e.target.value) / 1000) * this.total()));
|
|
3908
|
+
this.render();
|
|
3909
|
+
}
|
|
3910
|
+
target() {
|
|
3911
|
+
const id = this.str('for', '');
|
|
3912
|
+
return id ? document.getElementById(id) : null;
|
|
3913
|
+
}
|
|
3914
|
+
rebuild() {
|
|
3915
|
+
this._player?.destroy?.();
|
|
3916
|
+
this._player = null;
|
|
3917
|
+
const t = this.target();
|
|
3918
|
+
if (t)
|
|
3919
|
+
this._player = player.createPlayer(t, this.toJSON(), { autoplay: false });
|
|
3920
|
+
}
|
|
3921
|
+
render() {
|
|
3922
|
+
const box = this.querySelector('.usa-ke-tracks');
|
|
3923
|
+
if (!box)
|
|
3924
|
+
return;
|
|
3925
|
+
const total = this.total();
|
|
3926
|
+
box.innerHTML = '';
|
|
3927
|
+
this._anim.tracks.forEach((t, i) => {
|
|
3928
|
+
const row = document.createElement('div');
|
|
3929
|
+
row.className = 'usa-ke-row';
|
|
3930
|
+
row.setAttribute('role', 'listitem');
|
|
3931
|
+
row.innerHTML = `<span class="usa-ke-label"></span><span class="usa-ke-lane"><span class="usa-ke-clip" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="${total}"><span class="usa-ke-grip" aria-hidden="true"></span></span></span>`;
|
|
3932
|
+
row.querySelector('.usa-ke-label').textContent = t.label || t.preset || t.effect || `Track ${i + 1}`;
|
|
3933
|
+
const clip = row.querySelector('.usa-ke-clip');
|
|
3934
|
+
clip.style.left = `${((t.start || 0) / total) * 100}%`;
|
|
3935
|
+
clip.style.width = `${Math.max(2, ((t.duration || 300) / total) * 100)}%`;
|
|
3936
|
+
clip.setAttribute('aria-valuenow', String(t.start || 0));
|
|
3937
|
+
clip.setAttribute('aria-label', `${row.querySelector('.usa-ke-label').textContent}: start ${t.start || 0} ms, ${t.duration || 0} ms`);
|
|
3938
|
+
clip.dataset.i = String(i);
|
|
3939
|
+
this.wire(clip, i);
|
|
3940
|
+
box.appendChild(row);
|
|
3941
|
+
});
|
|
3942
|
+
this.rebuild();
|
|
3943
|
+
}
|
|
3944
|
+
update(i, start, duration) {
|
|
3945
|
+
const t = this._anim.tracks[i];
|
|
3946
|
+
t.start = Math.max(0, Math.round(start / 10) * 10);
|
|
3947
|
+
t.duration = Math.max(50, Math.round(duration / 10) * 10);
|
|
3948
|
+
this.render();
|
|
3949
|
+
this.querySelector(`.usa-ke-clip[data-i="${i}"]`)?.focus();
|
|
3950
|
+
this.emit('change', { animation: this.toJSON() });
|
|
3951
|
+
}
|
|
3952
|
+
wire(clip, i) {
|
|
3953
|
+
clip.addEventListener('keydown', (e) => {
|
|
3954
|
+
const t = this._anim.tracks[i];
|
|
3955
|
+
const d = e.key === 'ArrowRight' ? 50 : e.key === 'ArrowLeft' ? -50 : 0;
|
|
3956
|
+
if (!d)
|
|
3957
|
+
return;
|
|
3958
|
+
e.preventDefault();
|
|
3959
|
+
if (e.shiftKey)
|
|
3960
|
+
this.update(i, t.start || 0, (t.duration || 300) + d);
|
|
3961
|
+
else
|
|
3962
|
+
this.update(i, (t.start || 0) + d, t.duration || 300);
|
|
3963
|
+
});
|
|
3964
|
+
clip.addEventListener('pointerdown', (e) => {
|
|
3965
|
+
const lane = clip.parentElement;
|
|
3966
|
+
const w = lane.getBoundingClientRect().width || 1;
|
|
3967
|
+
const total = this.total();
|
|
3968
|
+
const t = this._anim.tracks[i];
|
|
3969
|
+
const s0 = t.start || 0;
|
|
3970
|
+
const d0 = t.duration || 300;
|
|
3971
|
+
const resize = e.target.classList.contains('usa-ke-grip');
|
|
3972
|
+
const x0 = e.clientX;
|
|
3973
|
+
clip.setPointerCapture?.(e.pointerId);
|
|
3974
|
+
clip.toggleAttribute('data-drag', true);
|
|
3975
|
+
const move = (ev) => {
|
|
3976
|
+
const dms = ((ev.clientX - x0) / w) * total;
|
|
3977
|
+
if (resize)
|
|
3978
|
+
clip.style.width = `${(Math.max(50, d0 + dms) / total) * 100}%`;
|
|
3979
|
+
else
|
|
3980
|
+
clip.style.left = `${(Math.max(0, s0 + dms) / total) * 100}%`;
|
|
3981
|
+
};
|
|
3982
|
+
const up = (ev) => {
|
|
3983
|
+
clip.removeEventListener('pointermove', move);
|
|
3984
|
+
clip.removeEventListener('pointerup', up);
|
|
3985
|
+
clip.removeAttribute('data-drag');
|
|
3986
|
+
const dms = ((ev.clientX - x0) / w) * total;
|
|
3987
|
+
if (Math.abs(ev.clientX - x0) < 2)
|
|
3988
|
+
return;
|
|
3989
|
+
if (resize)
|
|
3990
|
+
this.update(i, s0, d0 + dms);
|
|
3991
|
+
else
|
|
3992
|
+
this.update(i, s0 + dms, d0);
|
|
3993
|
+
};
|
|
3994
|
+
clip.addEventListener('pointermove', move);
|
|
3995
|
+
clip.addEventListener('pointerup', up);
|
|
3996
|
+
});
|
|
3997
|
+
}
|
|
3998
|
+
seek(ms) {
|
|
3999
|
+
const total = this.total();
|
|
4000
|
+
const v = Math.max(0, Math.min(total, ms));
|
|
4001
|
+
this._player?.seek?.(v);
|
|
4002
|
+
const out = this.querySelector('.usa-ke-time');
|
|
4003
|
+
if (out)
|
|
4004
|
+
out.textContent = `${Math.round(v)} ms`;
|
|
4005
|
+
this.style.setProperty('--usa-ke-head', `${(v / total) * 100}%`);
|
|
4006
|
+
}
|
|
4007
|
+
play() {
|
|
4008
|
+
if (!this._player)
|
|
4009
|
+
this.rebuild();
|
|
4010
|
+
if (this.reduced)
|
|
4011
|
+
return this.seek(this.total());
|
|
4012
|
+
this._player?.seek?.(0);
|
|
4013
|
+
this._player?.play?.();
|
|
4014
|
+
const t0 = performance.now();
|
|
4015
|
+
const total = this.total();
|
|
4016
|
+
const scrub = this.querySelector('.usa-ke-scrub');
|
|
4017
|
+
const f = () => {
|
|
4018
|
+
const ms = Math.min(total, performance.now() - t0);
|
|
4019
|
+
if (scrub)
|
|
4020
|
+
scrub.value = String(Math.round((ms / total) * 1000));
|
|
4021
|
+
this.style.setProperty('--usa-ke-head', `${(ms / total) * 100}%`);
|
|
4022
|
+
const out = this.querySelector('.usa-ke-time');
|
|
4023
|
+
if (out)
|
|
4024
|
+
out.textContent = `${Math.round(ms)} ms`;
|
|
4025
|
+
if (ms < total && this.isConnected)
|
|
4026
|
+
requestAnimationFrame(f);
|
|
4027
|
+
};
|
|
4028
|
+
if (typeof requestAnimationFrame === 'function')
|
|
4029
|
+
requestAnimationFrame(f);
|
|
4030
|
+
}
|
|
4031
|
+
}
|
|
4032
|
+
return UsaKeyframeEditor;
|
|
4033
|
+
}, { id: 'keyframe-editor', text: css });
|
|
3474
4034
|
}
|
|
3475
4035
|
|
|
3476
4036
|
/**
|
|
@@ -3494,6 +4054,7 @@ const WIDGETS = {
|
|
|
3494
4054
|
'6.6': { 'usa-dock': defineDock, 'usa-nav-morph': defineNavMorph, 'usa-menu-toggle': defineMenuToggle, 'usa-tip': defineTip },
|
|
3495
4055
|
'6.7': { 'usa-stepper': defineStepper, 'usa-pagination': definePagination, 'usa-segmented': defineSegmented, 'usa-switch': defineSwitch },
|
|
3496
4056
|
'6.8': { 'usa-kanban': defineKanban, 'usa-swipe-deck': defineSwipeDeck, 'usa-weather-card': defineWeatherCard, 'usa-pull-cord': definePullCord },
|
|
4057
|
+
'6.9': { 'usa-date-picker': defineDatePicker, 'usa-color-picker': defineColorPicker, 'usa-file-drop': defineFileDrop, 'usa-keyframe-editor': defineKeyframeEditor },
|
|
3497
4058
|
};
|
|
3498
4059
|
/** Every widget tag, in release order. */
|
|
3499
4060
|
const WIDGET_TAGS = Object.values(WIDGETS).flatMap((g) => Object.keys(g));
|
|
@@ -3522,11 +4083,15 @@ exports.WEATHER_CONDITIONS = WEATHER_CONDITIONS;
|
|
|
3522
4083
|
exports.WIDGETS = WIDGETS;
|
|
3523
4084
|
exports.WIDGET_TAGS = WIDGET_TAGS;
|
|
3524
4085
|
exports.defineCarousel = defineCarousel;
|
|
4086
|
+
exports.defineColorPicker = defineColorPicker;
|
|
3525
4087
|
exports.defineCompare = defineCompare;
|
|
3526
4088
|
exports.defineCubeGallery = defineCubeGallery;
|
|
4089
|
+
exports.defineDatePicker = defineDatePicker;
|
|
3527
4090
|
exports.defineDisclosure = defineDisclosure;
|
|
3528
4091
|
exports.defineDock = defineDock;
|
|
4092
|
+
exports.defineFileDrop = defineFileDrop;
|
|
3529
4093
|
exports.defineKanban = defineKanban;
|
|
4094
|
+
exports.defineKeyframeEditor = defineKeyframeEditor;
|
|
3530
4095
|
exports.defineMasonryFlow = defineMasonryFlow;
|
|
3531
4096
|
exports.defineMenu = defineMenu;
|
|
3532
4097
|
exports.defineMenuToggle = defineMenuToggle;
|
|
@@ -3550,6 +4115,10 @@ exports.defineTip = defineTip;
|
|
|
3550
4115
|
exports.defineToastStack = defineToastStack;
|
|
3551
4116
|
exports.defineWeatherCard = defineWeatherCard;
|
|
3552
4117
|
exports.defineWidgets = defineWidgets;
|
|
4118
|
+
exports.hexToHsv = hexToHsv;
|
|
4119
|
+
exports.hsvToHex = hsvToHex;
|
|
4120
|
+
exports.monthGrid = monthGrid;
|
|
3553
4121
|
exports.pageWindow = pageWindow;
|
|
4122
|
+
exports.parseISODate = parseISODate;
|
|
3554
4123
|
exports.stackToast = stackToast;
|
|
3555
4124
|
//# sourceMappingURL=widgets.cjs.map
|