motionary 6.7.0 → 6.8.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 +15 -0
- package/dist/components/fx-physics.cjs +344 -0
- package/dist/components/fx-physics.cjs.map +1 -0
- package/dist/components/fx-physics.d.cts +92 -0
- package/dist/components/fx-physics.d.ts +92 -0
- package/dist/components/fx-physics.js +340 -0
- package/dist/components/fx-physics.js.map +1 -0
- package/dist/components/fx-weather.cjs +265 -0
- package/dist/components/fx-weather.cjs.map +1 -0
- package/dist/components/fx-weather.d.cts +70 -0
- package/dist/components/fx-weather.d.ts +70 -0
- package/dist/components/fx-weather.js +261 -0
- package/dist/components/fx-weather.js.map +1 -0
- package/dist/components/fx2.cjs +12 -0
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +74 -1
- package/dist/components/fx2.d.ts +74 -1
- package/dist/components/fx2.js +9 -1
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/widgets.cjs +620 -45
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +73 -2
- package/dist/components/widgets.d.ts +73 -2
- package/dist/components/widgets.js +616 -46
- package/dist/components/widgets.js.map +1 -1
- package/dist/widgets.umd.js +1 -1
- package/dist/widgets.umd.js.map +1 -1
- package/docs/ROADMAP.md +1 -1
- package/docs/components.md +27 -0
- package/package.json +21 -1
|
@@ -36,7 +36,7 @@ function arrowIndex(e, i, n, vertical = false) {
|
|
|
36
36
|
return -1;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
var css$
|
|
39
|
+
var css$p = "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}";
|
|
40
40
|
|
|
41
41
|
const CAROUSEL_EFFECTS = ['slide', 'fade', 'scale', 'cards'];
|
|
42
42
|
function defineCarousel(tag = 'usa-carousel') {
|
|
@@ -225,10 +225,10 @@ function defineCarousel(tag = 'usa-carousel') {
|
|
|
225
225
|
}
|
|
226
226
|
}
|
|
227
227
|
return UsaCarousel;
|
|
228
|
-
}, { id: 'carousel', text: css$
|
|
228
|
+
}, { id: 'carousel', text: css$p });
|
|
229
229
|
}
|
|
230
230
|
|
|
231
|
-
var css$
|
|
231
|
+
var css$o = "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}";
|
|
232
232
|
|
|
233
233
|
const TAB_INDICATORS = ['pill', 'underline', 'glow', 'gooey'];
|
|
234
234
|
function defineTabBar(tag = 'usa-tab-bar') {
|
|
@@ -341,10 +341,10 @@ function defineTabBar(tag = 'usa-tab-bar') {
|
|
|
341
341
|
}
|
|
342
342
|
}
|
|
343
343
|
return UsaTabBar;
|
|
344
|
-
}, { id: 'tab-bar', text: css$
|
|
344
|
+
}, { id: 'tab-bar', text: css$o });
|
|
345
345
|
}
|
|
346
346
|
|
|
347
|
-
var css$
|
|
347
|
+
var css$n = "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}}";
|
|
348
348
|
|
|
349
349
|
function defineDisclosure(tag = 'usa-disclosure') {
|
|
350
350
|
return defineElement(tag, (Base) => {
|
|
@@ -412,10 +412,10 @@ function defineDisclosure(tag = 'usa-disclosure') {
|
|
|
412
412
|
}
|
|
413
413
|
}
|
|
414
414
|
return UsaDisclosure;
|
|
415
|
-
}, { id: 'disclosure', text: css$
|
|
415
|
+
}, { id: 'disclosure', text: css$n });
|
|
416
416
|
}
|
|
417
417
|
|
|
418
|
-
var css$
|
|
418
|
+
var css$m = "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}}";
|
|
419
419
|
|
|
420
420
|
function defineStories(tag = 'usa-stories') {
|
|
421
421
|
return defineElement(tag, (Base) => {
|
|
@@ -548,10 +548,10 @@ function defineStories(tag = 'usa-stories') {
|
|
|
548
548
|
}
|
|
549
549
|
}
|
|
550
550
|
return UsaStories;
|
|
551
|
-
}, { id: 'stories', text: css$
|
|
551
|
+
}, { id: 'stories', text: css$m });
|
|
552
552
|
}
|
|
553
553
|
|
|
554
|
-
var css$
|
|
554
|
+
var css$l = "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)}}";
|
|
555
555
|
|
|
556
556
|
const MODAL_EFFECTS = ['scale', 'slide-up', 'flip', 'origin'];
|
|
557
557
|
const SHEET_SIDES = ['right', 'left', 'bottom', 'top'];
|
|
@@ -778,12 +778,12 @@ function defineOverlay(tag, kind) {
|
|
|
778
778
|
}
|
|
779
779
|
}
|
|
780
780
|
return UsaOverlay;
|
|
781
|
-
}, { id: 'overlay', text: css$
|
|
781
|
+
}, { id: 'overlay', text: css$l });
|
|
782
782
|
}
|
|
783
783
|
const defineModal = (tag = 'usa-modal') => defineOverlay(tag, 'modal');
|
|
784
784
|
const defineSheet = (tag = 'usa-sheet') => defineOverlay(tag, 'sheet');
|
|
785
785
|
|
|
786
|
-
var css$
|
|
786
|
+
var css$k = "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}}";
|
|
787
787
|
|
|
788
788
|
const TOAST_POSITIONS = ['bottom-right', 'bottom-left', 'bottom-center', 'top-right', 'top-left', 'top-center'];
|
|
789
789
|
const ICONS = { info: 'ℹ', success: '✓', warning: '!', error: '✕' };
|
|
@@ -954,7 +954,7 @@ function defineToastStack(tag = 'usa-toast-stack') {
|
|
|
954
954
|
}
|
|
955
955
|
}
|
|
956
956
|
return UsaToastStack;
|
|
957
|
-
}, { id: 'toast', text: css$
|
|
957
|
+
}, { id: 'toast', text: css$k });
|
|
958
958
|
}
|
|
959
959
|
/** Show a toast on the first `<usa-toast-stack>` of the page (one is created when missing). */
|
|
960
960
|
function stackToast(input, stack) {
|
|
@@ -982,7 +982,7 @@ function installToastTriggers() {
|
|
|
982
982
|
});
|
|
983
983
|
}
|
|
984
984
|
|
|
985
|
-
var css$
|
|
985
|
+
var css$j = "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)}}";
|
|
986
986
|
|
|
987
987
|
const MENU_EFFECTS = ['scale', 'fold', 'slide'];
|
|
988
988
|
function defineMenu(tag = 'usa-menu') {
|
|
@@ -1121,10 +1121,10 @@ function defineMenu(tag = 'usa-menu') {
|
|
|
1121
1121
|
}
|
|
1122
1122
|
}
|
|
1123
1123
|
return UsaMenu;
|
|
1124
|
-
}, { id: 'menu', text: css$
|
|
1124
|
+
}, { id: 'menu', text: css$j });
|
|
1125
1125
|
}
|
|
1126
1126
|
|
|
1127
|
-
var css$
|
|
1127
|
+
var css$i = "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}}";
|
|
1128
1128
|
|
|
1129
1129
|
const PROGRESS_VARIANTS = ['ring', 'bar', 'semi'];
|
|
1130
1130
|
const NS = 'http://www.w3.org/2000/svg';
|
|
@@ -1264,7 +1264,7 @@ function defineProgressRing(tag = 'usa-progress-ring') {
|
|
|
1264
1264
|
}
|
|
1265
1265
|
}
|
|
1266
1266
|
return UsaProgressRing;
|
|
1267
|
-
}, { id: 'meters', text: css$
|
|
1267
|
+
}, { id: 'meters', text: css$i });
|
|
1268
1268
|
}
|
|
1269
1269
|
function defineOdometer(tag = 'usa-odometer') {
|
|
1270
1270
|
return defineElement(tag, (Base) => {
|
|
@@ -1374,10 +1374,10 @@ function defineOdometer(tag = 'usa-odometer') {
|
|
|
1374
1374
|
}
|
|
1375
1375
|
}
|
|
1376
1376
|
return UsaOdometer;
|
|
1377
|
-
}, { id: 'meters', text: css$
|
|
1377
|
+
}, { id: 'meters', text: css$i });
|
|
1378
1378
|
}
|
|
1379
1379
|
|
|
1380
|
-
var css$
|
|
1380
|
+
var css$h = "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}}";
|
|
1381
1381
|
|
|
1382
1382
|
const SKELETON_VARIANTS = ['wave', 'pulse', 'glow'];
|
|
1383
1383
|
function defineSkeletonReveal(tag = 'usa-skeleton-reveal') {
|
|
@@ -1492,10 +1492,10 @@ function defineSkeletonReveal(tag = 'usa-skeleton-reveal') {
|
|
|
1492
1492
|
}
|
|
1493
1493
|
}
|
|
1494
1494
|
return UsaSkeletonReveal;
|
|
1495
|
-
}, { id: 'skeleton-reveal', text: css$
|
|
1495
|
+
}, { id: 'skeleton-reveal', text: css$h });
|
|
1496
1496
|
}
|
|
1497
1497
|
|
|
1498
|
-
var css$
|
|
1498
|
+
var css$g = "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}}";
|
|
1499
1499
|
|
|
1500
1500
|
const PATHS = {
|
|
1501
1501
|
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',
|
|
@@ -1619,10 +1619,10 @@ function defineStarRating(tag = 'usa-star-rating') {
|
|
|
1619
1619
|
}
|
|
1620
1620
|
}
|
|
1621
1621
|
return UsaStarRating;
|
|
1622
|
-
}, { id: 'star-rating', text: css$
|
|
1622
|
+
}, { id: 'star-rating', text: css$g });
|
|
1623
1623
|
}
|
|
1624
1624
|
|
|
1625
|
-
var css$
|
|
1625
|
+
var css$f = "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}}";
|
|
1626
1626
|
|
|
1627
1627
|
function defineMilestones(tag = 'usa-milestones') {
|
|
1628
1628
|
return defineElement(tag, (Base) => {
|
|
@@ -1710,10 +1710,10 @@ function defineMilestones(tag = 'usa-milestones') {
|
|
|
1710
1710
|
}
|
|
1711
1711
|
}
|
|
1712
1712
|
return UsaMilestones;
|
|
1713
|
-
}, { id: 'milestones', text: css$
|
|
1713
|
+
}, { id: 'milestones', text: css$f });
|
|
1714
1714
|
}
|
|
1715
1715
|
|
|
1716
|
-
var css$
|
|
1716
|
+
var css$e = "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}";
|
|
1717
1717
|
|
|
1718
1718
|
function defineMasonryFlow(tag = 'usa-masonry-flow') {
|
|
1719
1719
|
return defineElement(tag, (Base) => {
|
|
@@ -1834,10 +1834,10 @@ function defineMasonryFlow(tag = 'usa-masonry-flow') {
|
|
|
1834
1834
|
}
|
|
1835
1835
|
}
|
|
1836
1836
|
return UsaMasonryFlow;
|
|
1837
|
-
}, { id: 'masonry-flow', text: css$
|
|
1837
|
+
}, { id: 'masonry-flow', text: css$e });
|
|
1838
1838
|
}
|
|
1839
1839
|
|
|
1840
|
-
var css$
|
|
1840
|
+
var css$d = "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}";
|
|
1841
1841
|
|
|
1842
1842
|
function defineCompare(tag = 'usa-compare') {
|
|
1843
1843
|
return defineElement(tag, (Base) => {
|
|
@@ -1961,10 +1961,10 @@ function defineCompare(tag = 'usa-compare') {
|
|
|
1961
1961
|
}
|
|
1962
1962
|
}
|
|
1963
1963
|
return UsaCompare;
|
|
1964
|
-
}, { id: 'compare', text: css$
|
|
1964
|
+
}, { id: 'compare', text: css$d });
|
|
1965
1965
|
}
|
|
1966
1966
|
|
|
1967
|
-
var css$
|
|
1967
|
+
var css$c = "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}";
|
|
1968
1968
|
|
|
1969
1969
|
function defineCubeGallery(tag = 'usa-cube-gallery') {
|
|
1970
1970
|
return defineElement(tag, (Base) => {
|
|
@@ -2097,10 +2097,10 @@ function defineCubeGallery(tag = 'usa-cube-gallery') {
|
|
|
2097
2097
|
}
|
|
2098
2098
|
}
|
|
2099
2099
|
return UsaCubeGallery;
|
|
2100
|
-
}, { id: 'cube-gallery', text: css$
|
|
2100
|
+
}, { id: 'cube-gallery', text: css$c });
|
|
2101
2101
|
}
|
|
2102
2102
|
|
|
2103
|
-
var css$
|
|
2103
|
+
var css$b = "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}}";
|
|
2104
2104
|
|
|
2105
2105
|
function defineDock(tag = 'usa-dock') {
|
|
2106
2106
|
return defineElement(tag, (Base) => {
|
|
@@ -2168,10 +2168,10 @@ function defineDock(tag = 'usa-dock') {
|
|
|
2168
2168
|
}
|
|
2169
2169
|
}
|
|
2170
2170
|
return UsaDock;
|
|
2171
|
-
}, { id: 'dock', text: css$
|
|
2171
|
+
}, { id: 'dock', text: css$b });
|
|
2172
2172
|
}
|
|
2173
2173
|
|
|
2174
|
-
var css$
|
|
2174
|
+
var css$a = "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)}";
|
|
2175
2175
|
|
|
2176
2176
|
const NAV_INDICATORS = ['underline', 'pill', 'blob', 'dot'];
|
|
2177
2177
|
function defineNavMorph(tag = 'usa-nav-morph') {
|
|
@@ -2275,10 +2275,10 @@ function defineNavMorph(tag = 'usa-nav-morph') {
|
|
|
2275
2275
|
}
|
|
2276
2276
|
}
|
|
2277
2277
|
return UsaNavMorph;
|
|
2278
|
-
}, { id: 'nav-morph', text: css$
|
|
2278
|
+
}, { id: 'nav-morph', text: css$a });
|
|
2279
2279
|
}
|
|
2280
2280
|
|
|
2281
|
-
var css$
|
|
2281
|
+
var css$9 = "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}";
|
|
2282
2282
|
|
|
2283
2283
|
const TOGGLE_VARIANTS = ['cross', 'arrow', 'minus', 'plus-x'];
|
|
2284
2284
|
function defineMenuToggle(tag = 'usa-menu-toggle') {
|
|
@@ -2351,10 +2351,10 @@ function defineMenuToggle(tag = 'usa-menu-toggle') {
|
|
|
2351
2351
|
}
|
|
2352
2352
|
}
|
|
2353
2353
|
return UsaMenuToggle;
|
|
2354
|
-
}, { id: 'menu-toggle', text: css$
|
|
2354
|
+
}, { id: 'menu-toggle', text: css$9 });
|
|
2355
2355
|
}
|
|
2356
2356
|
|
|
2357
|
-
var css$
|
|
2357
|
+
var css$8 = "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)}";
|
|
2358
2358
|
|
|
2359
2359
|
const TIP_PLACEMENTS = ['top', 'bottom', 'left', 'right'];
|
|
2360
2360
|
const FLIP = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' };
|
|
@@ -2486,10 +2486,10 @@ function defineTip(tag = 'usa-tip') {
|
|
|
2486
2486
|
}
|
|
2487
2487
|
}
|
|
2488
2488
|
return UsaTip;
|
|
2489
|
-
}, { id: 'tip', text: css$
|
|
2489
|
+
}, { id: 'tip', text: css$8 });
|
|
2490
2490
|
}
|
|
2491
2491
|
|
|
2492
|
-
var css$
|
|
2492
|
+
var css$7 = "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}}";
|
|
2493
2493
|
|
|
2494
2494
|
function defineStepper(tag = 'usa-stepper') {
|
|
2495
2495
|
return defineElement(tag, (Base) => {
|
|
@@ -2586,10 +2586,10 @@ function defineStepper(tag = 'usa-stepper') {
|
|
|
2586
2586
|
}
|
|
2587
2587
|
}
|
|
2588
2588
|
return UsaStepper;
|
|
2589
|
-
}, { id: 'stepper', text: css$
|
|
2589
|
+
}, { id: 'stepper', text: css$7 });
|
|
2590
2590
|
}
|
|
2591
2591
|
|
|
2592
|
-
var css$
|
|
2592
|
+
var css$6 = "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}}";
|
|
2593
2593
|
|
|
2594
2594
|
/** The visible page list: numbers and `'…'` gaps (1-based). */
|
|
2595
2595
|
function pageWindow(page, total, siblings = 1) {
|
|
@@ -2711,10 +2711,10 @@ function definePagination(tag = 'usa-pagination') {
|
|
|
2711
2711
|
}
|
|
2712
2712
|
}
|
|
2713
2713
|
return UsaPagination;
|
|
2714
|
-
}, { id: 'pagination', text: css$
|
|
2714
|
+
}, { id: 'pagination', text: css$6 });
|
|
2715
2715
|
}
|
|
2716
2716
|
|
|
2717
|
-
var css$
|
|
2717
|
+
var css$5 = "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}}";
|
|
2718
2718
|
|
|
2719
2719
|
const SEGMENTED_VARIANTS = ['ios', 'pill', 'outline'];
|
|
2720
2720
|
function defineSegmented(tag = 'usa-segmented') {
|
|
@@ -2808,10 +2808,10 @@ function defineSegmented(tag = 'usa-segmented') {
|
|
|
2808
2808
|
}
|
|
2809
2809
|
}
|
|
2810
2810
|
return UsaSegmented;
|
|
2811
|
-
}, { id: 'segmented', text: css$
|
|
2811
|
+
}, { id: 'segmented', text: css$5 });
|
|
2812
2812
|
}
|
|
2813
2813
|
|
|
2814
|
-
var css = "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}}";
|
|
2814
|
+
var css$4 = "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}}";
|
|
2815
2815
|
|
|
2816
2816
|
const SWITCH_VARIANTS = ['ios', 'daynight', 'bounce', 'liquid'];
|
|
2817
2817
|
function defineSwitch(tag = 'usa-switch') {
|
|
@@ -2899,7 +2899,576 @@ function defineSwitch(tag = 'usa-switch') {
|
|
|
2899
2899
|
}
|
|
2900
2900
|
}
|
|
2901
2901
|
return UsaSwitch;
|
|
2902
|
-
}, { id: 'switch', text: css });
|
|
2902
|
+
}, { id: 'switch', text: css$4 });
|
|
2903
|
+
}
|
|
2904
|
+
|
|
2905
|
+
var css$3 = "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}}";
|
|
2906
|
+
|
|
2907
|
+
function defineKanban(tag = 'usa-kanban') {
|
|
2908
|
+
return defineElement(tag, (Base) => {
|
|
2909
|
+
class UsaKanban extends Base {
|
|
2910
|
+
constructor() {
|
|
2911
|
+
super(...arguments);
|
|
2912
|
+
this._cols = [];
|
|
2913
|
+
this._live = null;
|
|
2914
|
+
this._held = null;
|
|
2915
|
+
}
|
|
2916
|
+
get columns() {
|
|
2917
|
+
return this._cols;
|
|
2918
|
+
}
|
|
2919
|
+
cardsOf(col) {
|
|
2920
|
+
return Array.from(col.children).filter((c) => c instanceof HTMLElement && (c.hasAttribute('data-card') || c.localName === 'li'));
|
|
2921
|
+
}
|
|
2922
|
+
mount() {
|
|
2923
|
+
this._cols = ownChildren(this);
|
|
2924
|
+
this.setAttribute('role', 'group');
|
|
2925
|
+
if (!this.hasAttribute('aria-label'))
|
|
2926
|
+
this.setAttribute('aria-label', this.str('label', 'Board'));
|
|
2927
|
+
if (!this.querySelector(':scope > .usa-kb-live')) {
|
|
2928
|
+
const l = document.createElement('span');
|
|
2929
|
+
l.className = 'usa-kb-live';
|
|
2930
|
+
l.setAttribute('data-usa-part', '');
|
|
2931
|
+
l.setAttribute('aria-live', 'polite');
|
|
2932
|
+
this.appendChild(l);
|
|
2933
|
+
}
|
|
2934
|
+
this._live = this.querySelector('.usa-kb-live');
|
|
2935
|
+
this._cols.forEach((col) => {
|
|
2936
|
+
col.classList.add('usa-kb-col');
|
|
2937
|
+
col.setAttribute('role', 'list');
|
|
2938
|
+
const title = col.dataset.title || col.querySelector('h1,h2,h3,h4,h5,h6')?.textContent?.trim() || '';
|
|
2939
|
+
if (title)
|
|
2940
|
+
col.setAttribute('aria-label', title);
|
|
2941
|
+
this.cardsOf(col).forEach((c) => this.prepCard(c));
|
|
2942
|
+
});
|
|
2943
|
+
this.listen(this, 'pointerdown', (e) => this.drag(e));
|
|
2944
|
+
this.listen(this, 'keydown', (e) => this.key(e));
|
|
2945
|
+
}
|
|
2946
|
+
prepCard(c) {
|
|
2947
|
+
c.classList.add('usa-kb-card');
|
|
2948
|
+
c.setAttribute('role', 'listitem');
|
|
2949
|
+
if (!c.hasAttribute('tabindex'))
|
|
2950
|
+
c.tabIndex = 0;
|
|
2951
|
+
c.setAttribute('aria-roledescription', 'draggable card');
|
|
2952
|
+
}
|
|
2953
|
+
say(msg) {
|
|
2954
|
+
if (this._live)
|
|
2955
|
+
this._live.textContent = msg;
|
|
2956
|
+
}
|
|
2957
|
+
colName(col) {
|
|
2958
|
+
return col.getAttribute('aria-label') || `column ${this._cols.indexOf(col) + 1}`;
|
|
2959
|
+
}
|
|
2960
|
+
/** FLIP: run `change`, then glide every card from its old box. */
|
|
2961
|
+
flip(change) {
|
|
2962
|
+
const cards = this._cols.flatMap((c) => this.cardsOf(c));
|
|
2963
|
+
const before = new Map(cards.map((c) => [c, c.getBoundingClientRect()]));
|
|
2964
|
+
change();
|
|
2965
|
+
if (this.reduced)
|
|
2966
|
+
return;
|
|
2967
|
+
for (const c of cards) {
|
|
2968
|
+
const a = before.get(c);
|
|
2969
|
+
const b = c.getBoundingClientRect();
|
|
2970
|
+
const dx = a.left - b.left;
|
|
2971
|
+
const dy = a.top - b.top;
|
|
2972
|
+
if ((dx || dy) && c !== this._held)
|
|
2973
|
+
this.motion(c, [{ transform: `translate(${dx}px,${dy}px)` }, { transform: 'none' }], { duration: 260, easing: 'cubic-bezier(.2,.8,.2,1)' });
|
|
2974
|
+
}
|
|
2975
|
+
}
|
|
2976
|
+
move(card, to, index) {
|
|
2977
|
+
const from = card.parentElement;
|
|
2978
|
+
const list = this.cardsOf(to).filter((c) => c !== card);
|
|
2979
|
+
const i = Math.max(0, Math.min(list.length, index));
|
|
2980
|
+
this.flip(() => {
|
|
2981
|
+
const ref = list[i] || null;
|
|
2982
|
+
if (ref)
|
|
2983
|
+
to.insertBefore(card, ref);
|
|
2984
|
+
else
|
|
2985
|
+
to.appendChild(card);
|
|
2986
|
+
});
|
|
2987
|
+
this.emit('move', { card, from, to, index: i });
|
|
2988
|
+
}
|
|
2989
|
+
drag(e) {
|
|
2990
|
+
const card = e.target.closest?.('.usa-kb-card');
|
|
2991
|
+
if (!card || !this.contains(card) || e.button > 0)
|
|
2992
|
+
return;
|
|
2993
|
+
const r = card.getBoundingClientRect();
|
|
2994
|
+
const ox = e.clientX - r.left;
|
|
2995
|
+
const oy = e.clientY - r.top;
|
|
2996
|
+
let started = false;
|
|
2997
|
+
let lastX = e.clientX;
|
|
2998
|
+
const ghost = card;
|
|
2999
|
+
const ph = document.createElement('div');
|
|
3000
|
+
ph.className = 'usa-kb-ph';
|
|
3001
|
+
ph.setAttribute('data-usa-part', '');
|
|
3002
|
+
const onMove = (ev) => {
|
|
3003
|
+
if (!started) {
|
|
3004
|
+
if (Math.hypot(ev.clientX - e.clientX, ev.clientY - e.clientY) < 6)
|
|
3005
|
+
return;
|
|
3006
|
+
started = true;
|
|
3007
|
+
ph.style.height = r.height + 'px';
|
|
3008
|
+
card.parentElement.insertBefore(ph, card);
|
|
3009
|
+
ghost.classList.add('usa-kb-lifted');
|
|
3010
|
+
ghost.style.width = r.width + 'px';
|
|
3011
|
+
ghost.style.position = 'fixed';
|
|
3012
|
+
ghost.style.zIndex = '1000';
|
|
3013
|
+
ghost.style.pointerEvents = 'none';
|
|
3014
|
+
}
|
|
3015
|
+
ev.preventDefault();
|
|
3016
|
+
const tilt = this.reduced ? 0 : Math.max(-8, Math.min(8, (ev.clientX - lastX) * 0.8));
|
|
3017
|
+
lastX = ev.clientX;
|
|
3018
|
+
ghost.style.left = ev.clientX - ox + 'px';
|
|
3019
|
+
ghost.style.top = ev.clientY - oy + 'px';
|
|
3020
|
+
ghost.style.transform = `rotate(${tilt}deg) scale(${this.reduced ? 1 : 1.04})`;
|
|
3021
|
+
const col = this._cols.find((c) => {
|
|
3022
|
+
const b = c.getBoundingClientRect();
|
|
3023
|
+
return ev.clientX >= b.left && ev.clientX <= b.right;
|
|
3024
|
+
});
|
|
3025
|
+
if (!col)
|
|
3026
|
+
return;
|
|
3027
|
+
const cards = this.cardsOf(col).filter((c) => c !== card);
|
|
3028
|
+
const at = cards.find((c) => {
|
|
3029
|
+
const b = c.getBoundingClientRect();
|
|
3030
|
+
return ev.clientY < b.top + b.height / 2;
|
|
3031
|
+
});
|
|
3032
|
+
if (ph.parentElement !== col || ph.nextElementSibling !== (at || null))
|
|
3033
|
+
this.flip(() => (at ? col.insertBefore(ph, at) : col.appendChild(ph)));
|
|
3034
|
+
};
|
|
3035
|
+
const onUp = () => {
|
|
3036
|
+
window.removeEventListener('pointermove', onMove);
|
|
3037
|
+
window.removeEventListener('pointerup', onUp);
|
|
3038
|
+
window.removeEventListener('pointercancel', onUp);
|
|
3039
|
+
if (!started)
|
|
3040
|
+
return;
|
|
3041
|
+
const to = ph.parentElement;
|
|
3042
|
+
const index = this.cardsOf(to).filter((c) => c !== card).indexOf(ph.nextElementSibling);
|
|
3043
|
+
const from = card.parentElement;
|
|
3044
|
+
const g = ghost.getBoundingClientRect();
|
|
3045
|
+
to.insertBefore(card, ph);
|
|
3046
|
+
ph.remove();
|
|
3047
|
+
ghost.classList.remove('usa-kb-lifted');
|
|
3048
|
+
ghost.style.cssText = '';
|
|
3049
|
+
const b = card.getBoundingClientRect();
|
|
3050
|
+
if (!this.reduced)
|
|
3051
|
+
this.motion(card, [{ transform: `translate(${g.left - b.left}px,${g.top - b.top}px) rotate(3deg)` }, { transform: 'none' }], { duration: 240, easing: 'cubic-bezier(.2,.9,.3,1.2)' });
|
|
3052
|
+
const list = this.cardsOf(to);
|
|
3053
|
+
this.emit('move', { card, from, to, index: index < 0 ? list.indexOf(card) : list.indexOf(card) });
|
|
3054
|
+
this.say(`Moved to ${this.colName(to)}, position ${list.indexOf(card) + 1}`);
|
|
3055
|
+
};
|
|
3056
|
+
window.addEventListener('pointermove', onMove, { passive: false });
|
|
3057
|
+
window.addEventListener('pointerup', onUp);
|
|
3058
|
+
window.addEventListener('pointercancel', onUp);
|
|
3059
|
+
}
|
|
3060
|
+
key(e) {
|
|
3061
|
+
const card = e.target.closest?.('.usa-kb-card');
|
|
3062
|
+
if (!card)
|
|
3063
|
+
return;
|
|
3064
|
+
if (e.key === ' ' || e.key === 'Enter') {
|
|
3065
|
+
e.preventDefault();
|
|
3066
|
+
if (this._held === card) {
|
|
3067
|
+
card.removeAttribute('aria-grabbed');
|
|
3068
|
+
card.classList.remove('usa-kb-held');
|
|
3069
|
+
this._held = null;
|
|
3070
|
+
this.say(`Dropped in ${this.colName(card.parentElement)}`);
|
|
3071
|
+
}
|
|
3072
|
+
else {
|
|
3073
|
+
this._held = card;
|
|
3074
|
+
card.setAttribute('aria-grabbed', 'true');
|
|
3075
|
+
card.classList.add('usa-kb-held');
|
|
3076
|
+
this.say('Picked up. Use arrow keys to move, Space to drop.');
|
|
3077
|
+
}
|
|
3078
|
+
return;
|
|
3079
|
+
}
|
|
3080
|
+
if (e.key === 'Escape' && this._held) {
|
|
3081
|
+
this._held.classList.remove('usa-kb-held');
|
|
3082
|
+
this._held.removeAttribute('aria-grabbed');
|
|
3083
|
+
this._held = null;
|
|
3084
|
+
return;
|
|
3085
|
+
}
|
|
3086
|
+
if (this._held !== card)
|
|
3087
|
+
return;
|
|
3088
|
+
const col = card.parentElement;
|
|
3089
|
+
const ci = this._cols.indexOf(col);
|
|
3090
|
+
const idx = this.cardsOf(col).indexOf(card);
|
|
3091
|
+
let to = col;
|
|
3092
|
+
let i = idx;
|
|
3093
|
+
if (e.key === 'ArrowLeft' && ci > 0)
|
|
3094
|
+
(to = this._cols[ci - 1]), (i = Math.min(idx, this.cardsOf(to).length));
|
|
3095
|
+
else if (e.key === 'ArrowRight' && ci < this._cols.length - 1)
|
|
3096
|
+
(to = this._cols[ci + 1]), (i = Math.min(idx, this.cardsOf(to).length));
|
|
3097
|
+
else if (e.key === 'ArrowUp')
|
|
3098
|
+
i = Math.max(0, idx - 1);
|
|
3099
|
+
else if (e.key === 'ArrowDown')
|
|
3100
|
+
i = idx + 1;
|
|
3101
|
+
else
|
|
3102
|
+
return;
|
|
3103
|
+
e.preventDefault();
|
|
3104
|
+
this.move(card, to, i);
|
|
3105
|
+
card.focus();
|
|
3106
|
+
this.say(`${this.colName(to)}, position ${this.cardsOf(to).indexOf(card) + 1}`);
|
|
3107
|
+
}
|
|
3108
|
+
}
|
|
3109
|
+
return UsaKanban;
|
|
3110
|
+
}, { id: 'kanban', text: css$3 });
|
|
3111
|
+
}
|
|
3112
|
+
|
|
3113
|
+
var css$2 = "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}}";
|
|
3114
|
+
|
|
3115
|
+
function defineSwipeDeck(tag = 'usa-swipe-deck') {
|
|
3116
|
+
return defineElement(tag, (Base) => {
|
|
3117
|
+
class UsaSwipeDeck extends Base {
|
|
3118
|
+
constructor() {
|
|
3119
|
+
super(...arguments);
|
|
3120
|
+
this._cards = [];
|
|
3121
|
+
this._gone = [];
|
|
3122
|
+
}
|
|
3123
|
+
get cards() {
|
|
3124
|
+
return this._cards.filter((c) => !this._gone.includes(c));
|
|
3125
|
+
}
|
|
3126
|
+
get top() {
|
|
3127
|
+
return this.cards[0] || null;
|
|
3128
|
+
}
|
|
3129
|
+
mount() {
|
|
3130
|
+
this._cards = ownChildren(this);
|
|
3131
|
+
this._gone = [];
|
|
3132
|
+
this.setAttribute('role', 'region');
|
|
3133
|
+
this.setAttribute('aria-roledescription', 'card deck');
|
|
3134
|
+
if (!this.hasAttribute('aria-label'))
|
|
3135
|
+
this.setAttribute('aria-label', this.str('label', 'Cards'));
|
|
3136
|
+
if (!this.hasAttribute('tabindex'))
|
|
3137
|
+
this.tabIndex = 0;
|
|
3138
|
+
this._cards.forEach((c) => {
|
|
3139
|
+
c.classList.add('usa-sd-card');
|
|
3140
|
+
if (!c.querySelector(':scope > .usa-sd-stamp')) {
|
|
3141
|
+
c.insertAdjacentHTML('beforeend', '<span class="usa-sd-stamp usa-sd-like" data-usa-part aria-hidden="true">LIKE</span><span class="usa-sd-stamp usa-sd-nope" data-usa-part aria-hidden="true">NOPE</span>');
|
|
3142
|
+
}
|
|
3143
|
+
});
|
|
3144
|
+
this.layout();
|
|
3145
|
+
this.listen(this, 'pointerdown', (e) => this.drag(e));
|
|
3146
|
+
this.listen(this, 'keydown', (e) => {
|
|
3147
|
+
if (e.key === 'ArrowRight')
|
|
3148
|
+
this.like();
|
|
3149
|
+
else if (e.key === 'ArrowLeft')
|
|
3150
|
+
this.nope();
|
|
3151
|
+
else if (e.key === 'Backspace' || (e.key === 'z' && (e.ctrlKey || e.metaKey)))
|
|
3152
|
+
this.undo();
|
|
3153
|
+
else
|
|
3154
|
+
return;
|
|
3155
|
+
e.preventDefault();
|
|
3156
|
+
});
|
|
3157
|
+
}
|
|
3158
|
+
layout() {
|
|
3159
|
+
this.cards.forEach((c, i) => {
|
|
3160
|
+
c.style.zIndex = String(100 - i);
|
|
3161
|
+
c.style.transform = i ? `translateY(${Math.min(i, 2) * 10}px) scale(${1 - Math.min(i, 2) * 0.05})` : '';
|
|
3162
|
+
c.style.opacity = i > 2 ? '0' : '1';
|
|
3163
|
+
c.toggleAttribute('data-top', i === 0);
|
|
3164
|
+
c.setAttribute('aria-hidden', String(i !== 0));
|
|
3165
|
+
});
|
|
3166
|
+
this._cards.filter((c) => this._gone.includes(c)).forEach((c) => (c.style.visibility = 'hidden'));
|
|
3167
|
+
}
|
|
3168
|
+
stamp(c, dx) {
|
|
3169
|
+
const k = Math.min(1, Math.abs(dx) / Math.max(40, this.num('threshold', 110)));
|
|
3170
|
+
c.querySelector('.usa-sd-like')?.style.setProperty('opacity', dx > 0 ? k.toFixed(2) : '0');
|
|
3171
|
+
c.querySelector('.usa-sd-nope')?.style.setProperty('opacity', dx < 0 ? k.toFixed(2) : '0');
|
|
3172
|
+
}
|
|
3173
|
+
fly(dir, dx = 0, dy = 0) {
|
|
3174
|
+
const c = this.top;
|
|
3175
|
+
if (!c)
|
|
3176
|
+
return;
|
|
3177
|
+
const index = this._cards.indexOf(c);
|
|
3178
|
+
this._gone.push(c);
|
|
3179
|
+
const sign = dir === 'right' ? 1 : -1;
|
|
3180
|
+
const w = this.getBoundingClientRect().width || 300;
|
|
3181
|
+
const done = () => {
|
|
3182
|
+
c.style.visibility = 'hidden';
|
|
3183
|
+
this.stamp(c, 0);
|
|
3184
|
+
};
|
|
3185
|
+
const a = this.reduced
|
|
3186
|
+
? this.motion(c, [{ opacity: 1 }, { opacity: 0 }], { duration: 200, fill: 'forwards' })
|
|
3187
|
+
: this.motion(c, [{ transform: `translate(${dx}px,${dy}px) rotate(${dx * 0.06}deg)` }, { transform: `translate(${sign * w * 1.5}px,${dy + 60}px) rotate(${sign * 30}deg)`, opacity: 0.6 }], { duration: 420, easing: 'cubic-bezier(.3,.6,.4,1)', fill: 'forwards' });
|
|
3188
|
+
if (a)
|
|
3189
|
+
a.finished.then(done, done);
|
|
3190
|
+
else
|
|
3191
|
+
done();
|
|
3192
|
+
this.layout();
|
|
3193
|
+
const next = this.top;
|
|
3194
|
+
if (next && !this.reduced)
|
|
3195
|
+
this.motion(next, [{ transform: 'translateY(10px) scale(.95)' }, { transform: 'none' }], { duration: 300, easing: 'cubic-bezier(.3,1.3,.5,1)' });
|
|
3196
|
+
this.emit('swipe', { card: c, dir, index });
|
|
3197
|
+
if (!this.top)
|
|
3198
|
+
this.emit('empty', {});
|
|
3199
|
+
}
|
|
3200
|
+
like() {
|
|
3201
|
+
this.fly('right');
|
|
3202
|
+
}
|
|
3203
|
+
nope() {
|
|
3204
|
+
this.fly('left');
|
|
3205
|
+
}
|
|
3206
|
+
undo() {
|
|
3207
|
+
const c = this._gone.pop();
|
|
3208
|
+
if (!c)
|
|
3209
|
+
return;
|
|
3210
|
+
c.getAnimations?.().forEach((a) => a.cancel());
|
|
3211
|
+
c.style.visibility = '';
|
|
3212
|
+
this.layout();
|
|
3213
|
+
if (!this.reduced)
|
|
3214
|
+
this.motion(c, [{ transform: 'translate(-120%,40px) rotate(-25deg)', opacity: 0 }, { transform: 'none', opacity: 1 }], { duration: 380, easing: 'cubic-bezier(.2,.9,.3,1.1)' });
|
|
3215
|
+
}
|
|
3216
|
+
drag(e) {
|
|
3217
|
+
const c = this.top;
|
|
3218
|
+
if (!c || !c.contains(e.target) || e.button > 0)
|
|
3219
|
+
return;
|
|
3220
|
+
const x0 = e.clientX;
|
|
3221
|
+
const y0 = e.clientY;
|
|
3222
|
+
const t0 = performance.now();
|
|
3223
|
+
let dx = 0;
|
|
3224
|
+
let dy = 0;
|
|
3225
|
+
c.setPointerCapture?.(e.pointerId);
|
|
3226
|
+
c.classList.add('usa-sd-dragging');
|
|
3227
|
+
const move = (ev) => {
|
|
3228
|
+
dx = ev.clientX - x0;
|
|
3229
|
+
dy = ev.clientY - y0;
|
|
3230
|
+
c.style.transform = `translate(${dx}px,${dy}px) rotate(${this.reduced ? 0 : dx * 0.06}deg)`;
|
|
3231
|
+
this.stamp(c, dx);
|
|
3232
|
+
};
|
|
3233
|
+
const up = () => {
|
|
3234
|
+
c.removeEventListener('pointermove', move);
|
|
3235
|
+
c.removeEventListener('pointerup', up);
|
|
3236
|
+
c.removeEventListener('pointercancel', up);
|
|
3237
|
+
c.classList.remove('usa-sd-dragging');
|
|
3238
|
+
const v = Math.abs(dx) / Math.max(1, performance.now() - t0);
|
|
3239
|
+
if (Math.abs(dx) > this.num('threshold', 110) || (v > 0.6 && Math.abs(dx) > 30))
|
|
3240
|
+
this.fly(dx > 0 ? 'right' : 'left', dx, dy);
|
|
3241
|
+
else {
|
|
3242
|
+
const from = c.style.transform;
|
|
3243
|
+
c.style.transform = '';
|
|
3244
|
+
this.stamp(c, 0);
|
|
3245
|
+
if (!this.reduced && from)
|
|
3246
|
+
this.motion(c, [{ transform: from }, { transform: 'none' }], { duration: 420, easing: 'cubic-bezier(.3,1.5,.5,1)' });
|
|
3247
|
+
}
|
|
3248
|
+
};
|
|
3249
|
+
c.addEventListener('pointermove', move);
|
|
3250
|
+
c.addEventListener('pointerup', up);
|
|
3251
|
+
c.addEventListener('pointercancel', up);
|
|
3252
|
+
}
|
|
3253
|
+
}
|
|
3254
|
+
return UsaSwipeDeck;
|
|
3255
|
+
}, { id: 'swipe-deck', text: css$2 });
|
|
3256
|
+
}
|
|
3257
|
+
|
|
3258
|
+
var css$1 = "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}}";
|
|
3259
|
+
|
|
3260
|
+
const WEATHER_CONDITIONS = ['clear', 'cloudy', 'rain', 'snow', 'storm', 'fog', 'night'];
|
|
3261
|
+
const LABEL = { clear: 'Clear', cloudy: 'Cloudy', rain: 'Rain', snow: 'Snow', storm: 'Thunderstorm', fog: 'Fog', night: 'Clear night' };
|
|
3262
|
+
const icon = (c) => {
|
|
3263
|
+
const drops = (cls, n) => Array.from({ length: n }, (_, i) => `<i class="${cls}" style="--i:${i}"></i>`).join('');
|
|
3264
|
+
switch (c) {
|
|
3265
|
+
case 'clear':
|
|
3266
|
+
return '<span class="usa-wc-sun"></span>';
|
|
3267
|
+
case 'night':
|
|
3268
|
+
return `<span class="usa-wc-moon"></span>${drops('usa-wc-star', 5)}`;
|
|
3269
|
+
case 'cloudy':
|
|
3270
|
+
return '<span class="usa-wc-cloud usa-wc-c2"></span><span class="usa-wc-cloud"></span>';
|
|
3271
|
+
case 'rain':
|
|
3272
|
+
return `<span class="usa-wc-cloud"></span>${drops('usa-wc-drop', 6)}`;
|
|
3273
|
+
case 'snow':
|
|
3274
|
+
return `<span class="usa-wc-cloud"></span>${drops('usa-wc-flake', 6)}`;
|
|
3275
|
+
case 'storm':
|
|
3276
|
+
return `<span class="usa-wc-cloud usa-wc-dark"></span><span class="usa-wc-bolt"></span>${drops('usa-wc-drop', 4)}`;
|
|
3277
|
+
default:
|
|
3278
|
+
return `${drops('usa-wc-fogband', 3)}`;
|
|
3279
|
+
}
|
|
3280
|
+
};
|
|
3281
|
+
function defineWeatherCard(tag = 'usa-weather-card') {
|
|
3282
|
+
return defineElement(tag, (Base) => {
|
|
3283
|
+
class UsaWeatherCard extends Base {
|
|
3284
|
+
static get observedAttributes() {
|
|
3285
|
+
return ['condition', 'temp', 'place', 'unit', 'label'];
|
|
3286
|
+
}
|
|
3287
|
+
get condition() {
|
|
3288
|
+
return this.dataset.condition || 'clear';
|
|
3289
|
+
}
|
|
3290
|
+
set condition(v) {
|
|
3291
|
+
this.setAttribute('condition', v);
|
|
3292
|
+
}
|
|
3293
|
+
mount() {
|
|
3294
|
+
const c = this.str('condition', 'clear');
|
|
3295
|
+
const cond = WEATHER_CONDITIONS.includes(c) ? c : 'clear';
|
|
3296
|
+
const changed = this.dataset.condition && this.dataset.condition !== cond;
|
|
3297
|
+
this.dataset.condition = cond;
|
|
3298
|
+
const temp = this.num('temp', NaN);
|
|
3299
|
+
const unit = this.str('unit', '°');
|
|
3300
|
+
const label = this.str('label', LABEL[cond]);
|
|
3301
|
+
const place = this.str('place', '');
|
|
3302
|
+
this.setAttribute('role', 'group');
|
|
3303
|
+
this.setAttribute('aria-label', [label, Number.isFinite(temp) ? `${Math.round(temp)}${unit}` : '', place].filter(Boolean).join(', '));
|
|
3304
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
3305
|
+
const scene = document.createElement('div');
|
|
3306
|
+
scene.className = 'usa-wc-scene';
|
|
3307
|
+
scene.setAttribute('aria-hidden', 'true');
|
|
3308
|
+
scene.setAttribute('data-usa-part', '');
|
|
3309
|
+
scene.innerHTML = `<span class="usa-wc-icon">${icon(cond)}</span>`;
|
|
3310
|
+
const text = document.createElement('div');
|
|
3311
|
+
text.className = 'usa-wc-text';
|
|
3312
|
+
text.setAttribute('data-usa-part', '');
|
|
3313
|
+
text.setAttribute('aria-hidden', 'true');
|
|
3314
|
+
text.innerHTML = `<b class="usa-wc-temp">${Number.isFinite(temp) ? Math.round(temp) + unit : ''}</b><span class="usa-wc-label"></span><span class="usa-wc-place"></span>`;
|
|
3315
|
+
text.querySelector('.usa-wc-label').textContent = label;
|
|
3316
|
+
text.querySelector('.usa-wc-place').textContent = place;
|
|
3317
|
+
this.prepend(scene, text);
|
|
3318
|
+
if (this.reduced)
|
|
3319
|
+
return;
|
|
3320
|
+
if (changed)
|
|
3321
|
+
this.motion(scene, [{ opacity: 0, transform: 'scale(.9)' }, { opacity: 1, transform: 'none' }], { duration: 420, easing: 'ease-out' });
|
|
3322
|
+
if (Number.isFinite(temp) && typeof requestAnimationFrame === 'function') {
|
|
3323
|
+
const el = text.querySelector('.usa-wc-temp');
|
|
3324
|
+
const t0 = performance.now();
|
|
3325
|
+
const from = Math.round(temp) - Math.min(12, Math.abs(Math.round(temp)) + 6);
|
|
3326
|
+
let raf = 0;
|
|
3327
|
+
const f = (now) => {
|
|
3328
|
+
const k = Math.min(1, (now - t0) / 900);
|
|
3329
|
+
el.textContent = Math.round(from + (Math.round(temp) - from) * (1 - Math.pow(1 - k, 3))) + unit;
|
|
3330
|
+
if (k < 1)
|
|
3331
|
+
raf = requestAnimationFrame(f);
|
|
3332
|
+
};
|
|
3333
|
+
raf = requestAnimationFrame(f);
|
|
3334
|
+
this.onCleanup(() => cancelAnimationFrame(raf));
|
|
3335
|
+
}
|
|
3336
|
+
}
|
|
3337
|
+
}
|
|
3338
|
+
return UsaWeatherCard;
|
|
3339
|
+
}, { id: 'weather-card', text: css$1 });
|
|
3340
|
+
}
|
|
3341
|
+
|
|
3342
|
+
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}}";
|
|
3343
|
+
|
|
3344
|
+
function definePullCord(tag = 'usa-pull-cord') {
|
|
3345
|
+
return defineElement(tag, (Base) => {
|
|
3346
|
+
class UsaPullCord extends Base {
|
|
3347
|
+
constructor() {
|
|
3348
|
+
super(...arguments);
|
|
3349
|
+
this._on = false;
|
|
3350
|
+
this._raf = 0;
|
|
3351
|
+
this._x = 0;
|
|
3352
|
+
this._y = 0;
|
|
3353
|
+
this._vx = 0;
|
|
3354
|
+
this._vy = 0;
|
|
3355
|
+
}
|
|
3356
|
+
get on() {
|
|
3357
|
+
return this._on;
|
|
3358
|
+
}
|
|
3359
|
+
set on(v) {
|
|
3360
|
+
this.toggle(!!v, false);
|
|
3361
|
+
}
|
|
3362
|
+
mount() {
|
|
3363
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
3364
|
+
this.insertAdjacentHTML('afterbegin', '<span class="usa-pc-lamp" data-usa-part aria-hidden="true"></span><svg class="usa-pc-svg" data-usa-part aria-hidden="true" viewBox="-40 0 80 150"><path class="usa-pc-cord" d="M0 0 L0 90"/><circle class="usa-pc-knob" cx="0" cy="96" r="7"/></svg>');
|
|
3365
|
+
this.setAttribute('role', 'switch');
|
|
3366
|
+
if (!this.hasAttribute('tabindex'))
|
|
3367
|
+
this.tabIndex = 0;
|
|
3368
|
+
if (!this.hasAttribute('aria-label'))
|
|
3369
|
+
this.setAttribute('aria-label', this.str('label', 'Light'));
|
|
3370
|
+
this._on = this.flag('on');
|
|
3371
|
+
this.sync();
|
|
3372
|
+
this.draw();
|
|
3373
|
+
this.listen(this, 'keydown', (e) => {
|
|
3374
|
+
if (e.key === ' ' || e.key === 'Enter') {
|
|
3375
|
+
e.preventDefault();
|
|
3376
|
+
this.pull();
|
|
3377
|
+
}
|
|
3378
|
+
});
|
|
3379
|
+
this.listen(this, 'pointerdown', (e) => this.drag(e));
|
|
3380
|
+
this.onCleanup(() => this._raf && cancelAnimationFrame(this._raf));
|
|
3381
|
+
}
|
|
3382
|
+
sync() {
|
|
3383
|
+
this.setAttribute('aria-checked', String(this._on));
|
|
3384
|
+
this.toggleAttribute('data-on', this._on);
|
|
3385
|
+
}
|
|
3386
|
+
draw() {
|
|
3387
|
+
const cord = this.querySelector('.usa-pc-cord');
|
|
3388
|
+
const knob = this.querySelector('.usa-pc-knob');
|
|
3389
|
+
const ex = this._x;
|
|
3390
|
+
const ey = 90 + this._y;
|
|
3391
|
+
cord?.setAttribute('d', `M0 0 Q${(ex * 0.5).toFixed(1)} ${(ey * 0.55).toFixed(1)} ${ex.toFixed(1)} ${ey.toFixed(1)}`);
|
|
3392
|
+
knob?.setAttribute('cx', ex.toFixed(1));
|
|
3393
|
+
knob?.setAttribute('cy', (ey + 6).toFixed(1));
|
|
3394
|
+
}
|
|
3395
|
+
/** Damped spring back to rest. */
|
|
3396
|
+
release() {
|
|
3397
|
+
if (this.reduced || typeof requestAnimationFrame !== 'function') {
|
|
3398
|
+
this._x = this._y = 0;
|
|
3399
|
+
this.draw();
|
|
3400
|
+
return;
|
|
3401
|
+
}
|
|
3402
|
+
let last = 0;
|
|
3403
|
+
const f = (now) => {
|
|
3404
|
+
const dt = last ? Math.min(0.033, (now - last) / 1000) : 1 / 60;
|
|
3405
|
+
last = now;
|
|
3406
|
+
this._vx += (-120 * this._x - 3 * this._vx) * dt;
|
|
3407
|
+
this._vy += (-260 * this._y - 9 * this._vy) * dt;
|
|
3408
|
+
this._x += this._vx * dt;
|
|
3409
|
+
this._y += this._vy * dt;
|
|
3410
|
+
this.draw();
|
|
3411
|
+
if (Math.abs(this._x) + Math.abs(this._y) + Math.abs(this._vx) + Math.abs(this._vy) > 0.05)
|
|
3412
|
+
this._raf = requestAnimationFrame(f);
|
|
3413
|
+
else
|
|
3414
|
+
((this._raf = 0), (this._x = this._y = this._vx = this._vy = 0), this.draw());
|
|
3415
|
+
};
|
|
3416
|
+
if (!this._raf)
|
|
3417
|
+
this._raf = requestAnimationFrame(f);
|
|
3418
|
+
}
|
|
3419
|
+
/** Pull once (keyboard / click): tug the cord and toggle. */
|
|
3420
|
+
pull() {
|
|
3421
|
+
this._y = 26;
|
|
3422
|
+
this._vx = (Math.random() - 0.5) * 60;
|
|
3423
|
+
this.draw();
|
|
3424
|
+
this.toggle(undefined, true);
|
|
3425
|
+
this.release();
|
|
3426
|
+
}
|
|
3427
|
+
drag(e) {
|
|
3428
|
+
if (e.button > 0)
|
|
3429
|
+
return;
|
|
3430
|
+
const y0 = e.clientY;
|
|
3431
|
+
const x0 = e.clientX;
|
|
3432
|
+
let moved = false;
|
|
3433
|
+
if (this._raf)
|
|
3434
|
+
(cancelAnimationFrame(this._raf), (this._raf = 0));
|
|
3435
|
+
const move = (ev) => {
|
|
3436
|
+
moved = moved || Math.abs(ev.clientY - y0) > 4;
|
|
3437
|
+
this._y = Math.max(0, Math.min(50, ev.clientY - y0));
|
|
3438
|
+
this._x = Math.max(-30, Math.min(30, (ev.clientX - x0) * 0.6));
|
|
3439
|
+
this.draw();
|
|
3440
|
+
};
|
|
3441
|
+
const up = () => {
|
|
3442
|
+
window.removeEventListener('pointermove', move);
|
|
3443
|
+
window.removeEventListener('pointerup', up);
|
|
3444
|
+
window.removeEventListener('pointercancel', up);
|
|
3445
|
+
if (!moved)
|
|
3446
|
+
return this.pull();
|
|
3447
|
+
if (this._y >= this.num('threshold', 24))
|
|
3448
|
+
this.toggle(undefined, true);
|
|
3449
|
+
this._vy = -this._y * 2;
|
|
3450
|
+
this.release();
|
|
3451
|
+
};
|
|
3452
|
+
window.addEventListener('pointermove', move);
|
|
3453
|
+
window.addEventListener('pointerup', up);
|
|
3454
|
+
window.addEventListener('pointercancel', up);
|
|
3455
|
+
}
|
|
3456
|
+
toggle(force, user = false) {
|
|
3457
|
+
const next = typeof force === 'boolean' ? force : !this._on;
|
|
3458
|
+
if (next === this._on)
|
|
3459
|
+
return;
|
|
3460
|
+
this._on = next;
|
|
3461
|
+
this.toggleAttribute('on', next);
|
|
3462
|
+
this.sync();
|
|
3463
|
+
const lamp = this.querySelector('.usa-pc-lamp');
|
|
3464
|
+
if (user && lamp && !this.reduced)
|
|
3465
|
+
this.motion(lamp, [{ transform: 'translateY(0)' }, { transform: 'translateY(3px)', offset: 0.3 }, { transform: 'translateY(0)' }], { duration: 300, easing: 'ease-out' });
|
|
3466
|
+
if (user)
|
|
3467
|
+
this.emit('change', { on: next });
|
|
3468
|
+
}
|
|
3469
|
+
}
|
|
3470
|
+
return UsaPullCord;
|
|
3471
|
+
}, { id: 'pull-cord', text: css });
|
|
2903
3472
|
}
|
|
2904
3473
|
|
|
2905
3474
|
/**
|
|
@@ -2922,6 +3491,7 @@ const WIDGETS = {
|
|
|
2922
3491
|
'6.5': { 'usa-milestones': defineMilestones, 'usa-masonry-flow': defineMasonryFlow, 'usa-compare': defineCompare, 'usa-cube-gallery': defineCubeGallery },
|
|
2923
3492
|
'6.6': { 'usa-dock': defineDock, 'usa-nav-morph': defineNavMorph, 'usa-menu-toggle': defineMenuToggle, 'usa-tip': defineTip },
|
|
2924
3493
|
'6.7': { 'usa-stepper': defineStepper, 'usa-pagination': definePagination, 'usa-segmented': defineSegmented, 'usa-switch': defineSwitch },
|
|
3494
|
+
'6.8': { 'usa-kanban': defineKanban, 'usa-swipe-deck': defineSwipeDeck, 'usa-weather-card': defineWeatherCard, 'usa-pull-cord': definePullCord },
|
|
2925
3495
|
};
|
|
2926
3496
|
/** Every widget tag, in release order. */
|
|
2927
3497
|
const WIDGET_TAGS = Object.values(WIDGETS).flatMap((g) => Object.keys(g));
|
|
@@ -2933,5 +3503,5 @@ function defineWidgets(release) {
|
|
|
2933
3503
|
fn(tag);
|
|
2934
3504
|
}
|
|
2935
3505
|
|
|
2936
|
-
export { CAROUSEL_EFFECTS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WIDGETS, WIDGET_TAGS, defineCarousel, defineCompare, defineCubeGallery, defineDisclosure, defineDock, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineNavMorph, defineOdometer, definePagination, defineProgressRing, defineSegmented, defineSheet, defineSkeletonReveal, defineStarRating, defineStepper, defineStories, defineSwitch, defineTabBar, defineTip, defineToastStack, defineWidgets, pageWindow, stackToast };
|
|
3506
|
+
export { CAROUSEL_EFFECTS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PROGRESS_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, defineCarousel, defineCompare, defineCubeGallery, defineDisclosure, defineDock, defineKanban, defineMasonryFlow, defineMenu, defineMenuToggle, defineMilestones, defineModal, defineNavMorph, defineOdometer, definePagination, defineProgressRing, definePullCord, defineSegmented, defineSheet, defineSkeletonReveal, defineStarRating, defineStepper, defineStories, defineSwipeDeck, defineSwitch, defineTabBar, defineTip, defineToastStack, defineWeatherCard, defineWidgets, pageWindow, stackToast };
|
|
2937
3507
|
//# sourceMappingURL=widgets.js.map
|