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