motionary 6.3.0 → 6.4.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 +19 -2
- package/README.md +2 -2
- package/README_ja.md +2 -2
- package/README_zh.md +2 -2
- package/dist/chunks/{generative-BRUZaIsX.js → generative-2LhxG5BJ.js} +2 -2
- package/dist/chunks/{generative-BRUZaIsX.js.map → generative-2LhxG5BJ.js.map} +1 -1
- package/dist/chunks/{gpu-XHWzeNb5.js → gpu-EjV49FQk.js} +3 -3
- package/dist/chunks/{gpu-XHWzeNb5.js.map → gpu-EjV49FQk.js.map} +1 -1
- package/dist/chunks/{shared-eweTlzxv.js → shared-CkKHWrtJ.js} +2 -2
- package/dist/chunks/{shared-eweTlzxv.js.map → shared-CkKHWrtJ.js.map} +1 -1
- package/dist/components/effects.js +3 -3
- package/dist/components/fx-gpu.js +3 -3
- package/dist/components/fx-light.cjs +221 -0
- package/dist/components/fx-light.cjs.map +1 -0
- package/dist/components/fx-light.d.cts +72 -0
- package/dist/components/fx-light.d.ts +72 -0
- package/dist/components/fx-light.js +217 -0
- package/dist/components/fx-light.js.map +1 -0
- package/dist/components/fx-text.js +1 -1
- package/dist/components/fx2.cjs +6 -0
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +29 -1
- package/dist/components/fx2.d.ts +29 -1
- package/dist/components/fx2.js +9 -5
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/widgets.cjs +519 -14
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +67 -2
- package/dist/components/widgets.d.ts +67 -2
- package/dist/components/widgets.js +514 -15
- package/dist/components/widgets.js.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.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 +29 -1
- package/package.json +14 -4
|
@@ -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$9 = "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$9 });
|
|
231
231
|
}
|
|
232
232
|
|
|
233
|
-
var css$
|
|
233
|
+
var css$8 = "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$8 });
|
|
347
347
|
}
|
|
348
348
|
|
|
349
|
-
var css$
|
|
349
|
+
var css$7 = "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$7 });
|
|
418
418
|
}
|
|
419
419
|
|
|
420
|
-
var css$
|
|
420
|
+
var css$6 = "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$6 });
|
|
554
554
|
}
|
|
555
555
|
|
|
556
|
-
var css$
|
|
556
|
+
var css$5 = "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$5 });
|
|
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$4 = "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$4 });
|
|
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 = "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)}}";
|
|
987
|
+
var css$3 = "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,7 +1123,505 @@ function defineMenu(tag = 'usa-menu') {
|
|
|
1123
1123
|
}
|
|
1124
1124
|
}
|
|
1125
1125
|
return UsaMenu;
|
|
1126
|
-
}, { id: 'menu', text: css });
|
|
1126
|
+
}, { id: 'menu', text: css$3 });
|
|
1127
|
+
}
|
|
1128
|
+
|
|
1129
|
+
var css$2 = "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
|
+
|
|
1131
|
+
const PROGRESS_VARIANTS = ['ring', 'bar', 'semi'];
|
|
1132
|
+
const NS = 'http://www.w3.org/2000/svg';
|
|
1133
|
+
function defineProgressRing(tag = 'usa-progress-ring') {
|
|
1134
|
+
return base.defineElement(tag, (Base) => {
|
|
1135
|
+
class UsaProgressRing extends Base {
|
|
1136
|
+
constructor() {
|
|
1137
|
+
super(...arguments);
|
|
1138
|
+
this._shown = 0;
|
|
1139
|
+
this._arc = null;
|
|
1140
|
+
this._label = null;
|
|
1141
|
+
this._len = 1;
|
|
1142
|
+
this._raf = 0;
|
|
1143
|
+
}
|
|
1144
|
+
static get observedAttributes() {
|
|
1145
|
+
return ['variant', 'value', 'max', 'gradient'];
|
|
1146
|
+
}
|
|
1147
|
+
get value() {
|
|
1148
|
+
return this.hasAttribute('value') ? this.num('value', 0) : null;
|
|
1149
|
+
}
|
|
1150
|
+
set value(v) {
|
|
1151
|
+
if (v === null)
|
|
1152
|
+
this.removeAttribute('value');
|
|
1153
|
+
else
|
|
1154
|
+
this.setAttribute('value', String(v));
|
|
1155
|
+
}
|
|
1156
|
+
get max() {
|
|
1157
|
+
return Math.max(1e-9, this.num('max', 100));
|
|
1158
|
+
}
|
|
1159
|
+
set max(v) {
|
|
1160
|
+
this.setAttribute('max', String(v));
|
|
1161
|
+
}
|
|
1162
|
+
changed(name) {
|
|
1163
|
+
if (name === 'value' && this._arc)
|
|
1164
|
+
return this.update();
|
|
1165
|
+
super.changed(name);
|
|
1166
|
+
}
|
|
1167
|
+
mount() {
|
|
1168
|
+
const v = this.str('variant', 'ring');
|
|
1169
|
+
const variant = PROGRESS_VARIANTS.includes(v) ? v : 'ring';
|
|
1170
|
+
this.dataset.variant = variant;
|
|
1171
|
+
this.setAttribute('role', 'progressbar');
|
|
1172
|
+
this.setAttribute('aria-valuemin', '0');
|
|
1173
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
1174
|
+
const stops = this.str('gradient', '').split(',').map((s) => s.trim()).filter(Boolean);
|
|
1175
|
+
const gid = `usa-pr-${Math.random().toString(36).slice(2, 8)}`;
|
|
1176
|
+
if (variant === 'bar') {
|
|
1177
|
+
const track = part('div', 'usa-pr-track');
|
|
1178
|
+
const fill = part('div', 'usa-pr-fill');
|
|
1179
|
+
if (stops.length)
|
|
1180
|
+
fill.style.background = `linear-gradient(90deg,${stops.join(',')})`;
|
|
1181
|
+
track.append(fill);
|
|
1182
|
+
this.append(track);
|
|
1183
|
+
this._arc = fill;
|
|
1184
|
+
}
|
|
1185
|
+
else {
|
|
1186
|
+
const svg = document.createElementNS(NS, 'svg');
|
|
1187
|
+
svg.setAttribute('data-usa-part', '');
|
|
1188
|
+
svg.setAttribute('aria-hidden', 'true');
|
|
1189
|
+
svg.setAttribute('class', 'usa-pr-svg');
|
|
1190
|
+
svg.setAttribute('width', '100%');
|
|
1191
|
+
svg.setAttribute('height', '100%');
|
|
1192
|
+
const semi = variant === 'semi';
|
|
1193
|
+
svg.setAttribute('viewBox', semi ? '0 0 100 56' : '0 0 100 100');
|
|
1194
|
+
const d = semi ? 'M 8 50 A 42 42 0 0 1 92 50' : 'M 50 8 A 42 42 0 1 1 49.99 8';
|
|
1195
|
+
const grad = stops.length ? `<defs><linearGradient id="${gid}" x1="0" y1="0" x2="1" y2="1">${stops.map((c, i) => `<stop offset="${stops.length > 1 ? i / (stops.length - 1) : 0}" stop-color="${c}"/>`).join('')}</linearGradient></defs>` : '';
|
|
1196
|
+
svg.innerHTML = `${grad}<path class="usa-pr-track" d="${d}"/><path class="usa-pr-arc" d="${d}"${stops.length ? ` stroke="url(#${gid})"` : ''}/>`;
|
|
1197
|
+
this.append(svg);
|
|
1198
|
+
this._arc = svg.querySelector('.usa-pr-arc');
|
|
1199
|
+
this._len = semi ? Math.PI * 42 : Math.PI * 2 * 42;
|
|
1200
|
+
this._arc.style.strokeDasharray = `${this._len}`;
|
|
1201
|
+
this._arc.style.strokeDashoffset = `${this._len}`;
|
|
1202
|
+
}
|
|
1203
|
+
this._label = part('span', 'usa-pr-label', { 'aria-hidden': 'true' });
|
|
1204
|
+
if (this.flag('no-label'))
|
|
1205
|
+
this._label.hidden = true;
|
|
1206
|
+
this.append(this._label);
|
|
1207
|
+
this._shown = 0;
|
|
1208
|
+
this.onCleanup(() => {
|
|
1209
|
+
if (this._raf && typeof cancelAnimationFrame === 'function')
|
|
1210
|
+
cancelAnimationFrame(this._raf);
|
|
1211
|
+
});
|
|
1212
|
+
this.update();
|
|
1213
|
+
}
|
|
1214
|
+
paint(frac) {
|
|
1215
|
+
const f = clampN(frac, 0, 1.08);
|
|
1216
|
+
if (this._arc instanceof HTMLElement)
|
|
1217
|
+
this._arc.style.transform = `scaleX(${Math.min(1, f)})`;
|
|
1218
|
+
else if (this._arc)
|
|
1219
|
+
this._arc.style.strokeDashoffset = `${(this._len * (1 - Math.min(1, f))).toFixed(2)}`;
|
|
1220
|
+
}
|
|
1221
|
+
update() {
|
|
1222
|
+
const v = this.value;
|
|
1223
|
+
const max = this.max;
|
|
1224
|
+
this.setAttribute('aria-valuemax', String(max));
|
|
1225
|
+
this.toggleAttribute('data-indeterminate', v === null);
|
|
1226
|
+
if (v === null) {
|
|
1227
|
+
this.removeAttribute('aria-valuenow');
|
|
1228
|
+
if (this._label)
|
|
1229
|
+
this._label.textContent = '';
|
|
1230
|
+
this.paint(0.28);
|
|
1231
|
+
return;
|
|
1232
|
+
}
|
|
1233
|
+
const target = clampN(v, 0, max) / max;
|
|
1234
|
+
this.setAttribute('aria-valuenow', String(clampN(v, 0, max)));
|
|
1235
|
+
const from = this._shown;
|
|
1236
|
+
this._shown = target;
|
|
1237
|
+
const label = (f) => {
|
|
1238
|
+
if (this._label)
|
|
1239
|
+
this._label.textContent = `${Math.round(f * 100)}%`;
|
|
1240
|
+
};
|
|
1241
|
+
if (this._raf && typeof cancelAnimationFrame === 'function')
|
|
1242
|
+
cancelAnimationFrame(this._raf);
|
|
1243
|
+
if (this.reduced || typeof requestAnimationFrame !== 'function') {
|
|
1244
|
+
this.paint(target);
|
|
1245
|
+
label(target);
|
|
1246
|
+
}
|
|
1247
|
+
else {
|
|
1248
|
+
const t0 = performance.now();
|
|
1249
|
+
const dur = this.num('duration', 900);
|
|
1250
|
+
const step = (now) => {
|
|
1251
|
+
const k = Math.min(1, (now - t0) / dur);
|
|
1252
|
+
// ease-out-back: a little overshoot, then settle
|
|
1253
|
+
const c = 1.4;
|
|
1254
|
+
const e = 1 + (c + 1) * Math.pow(k - 1, 3) + c * Math.pow(k - 1, 2);
|
|
1255
|
+
const f = from + (target - from) * e;
|
|
1256
|
+
this.paint(f);
|
|
1257
|
+
label(from + (target - from) * Math.min(1, k * 1.15));
|
|
1258
|
+
this._raf = k < 1 ? requestAnimationFrame(step) : 0;
|
|
1259
|
+
if (k >= 1)
|
|
1260
|
+
this.paint(target);
|
|
1261
|
+
};
|
|
1262
|
+
this._raf = requestAnimationFrame(step);
|
|
1263
|
+
}
|
|
1264
|
+
if (target >= 1 && from < 1)
|
|
1265
|
+
this.emit('complete', { value: v });
|
|
1266
|
+
}
|
|
1267
|
+
}
|
|
1268
|
+
return UsaProgressRing;
|
|
1269
|
+
}, { id: 'meters', text: css$2 });
|
|
1270
|
+
}
|
|
1271
|
+
function defineOdometer(tag = 'usa-odometer') {
|
|
1272
|
+
return base.defineElement(tag, (Base) => {
|
|
1273
|
+
class UsaOdometer extends Base {
|
|
1274
|
+
constructor() {
|
|
1275
|
+
super(...arguments);
|
|
1276
|
+
this._row = null;
|
|
1277
|
+
this._text = '';
|
|
1278
|
+
}
|
|
1279
|
+
static get observedAttributes() {
|
|
1280
|
+
return ['value', 'locale', 'decimals', 'prefix', 'suffix'];
|
|
1281
|
+
}
|
|
1282
|
+
get value() {
|
|
1283
|
+
return this.num('value', 0);
|
|
1284
|
+
}
|
|
1285
|
+
set value(v) {
|
|
1286
|
+
this.setAttribute('value', String(v));
|
|
1287
|
+
}
|
|
1288
|
+
get text() {
|
|
1289
|
+
return this._text;
|
|
1290
|
+
}
|
|
1291
|
+
changed(name) {
|
|
1292
|
+
if (name === 'value' && this._row)
|
|
1293
|
+
return this.render(true);
|
|
1294
|
+
super.changed(name);
|
|
1295
|
+
}
|
|
1296
|
+
mount() {
|
|
1297
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
1298
|
+
this._row = part('span', 'usa-odo-row', { 'aria-hidden': 'true' });
|
|
1299
|
+
this.append(this._row);
|
|
1300
|
+
this.setAttribute('role', 'img');
|
|
1301
|
+
this._text = '';
|
|
1302
|
+
this.render(false);
|
|
1303
|
+
}
|
|
1304
|
+
format() {
|
|
1305
|
+
const d = Math.max(0, Math.min(6, Math.round(this.num('decimals', 0))));
|
|
1306
|
+
let s;
|
|
1307
|
+
try {
|
|
1308
|
+
s = new Intl.NumberFormat(this.str('locale', '') || undefined, { minimumFractionDigits: d, maximumFractionDigits: d }).format(this.value);
|
|
1309
|
+
}
|
|
1310
|
+
catch {
|
|
1311
|
+
s = this.value.toFixed(d);
|
|
1312
|
+
}
|
|
1313
|
+
return `${this.str('prefix', '')}${s}${this.str('suffix', '')}`;
|
|
1314
|
+
}
|
|
1315
|
+
column(ch) {
|
|
1316
|
+
const isDigit = /\d/.test(ch);
|
|
1317
|
+
const col = part('span', isDigit ? 'usa-odo-col' : 'usa-odo-sym');
|
|
1318
|
+
if (isDigit) {
|
|
1319
|
+
const strip = document.createElement('span');
|
|
1320
|
+
strip.className = 'usa-odo-strip';
|
|
1321
|
+
strip.textContent = '01234567890123456789'.split('').join('\n');
|
|
1322
|
+
col.append(strip);
|
|
1323
|
+
col.dataset.d = ch;
|
|
1324
|
+
strip.style.transform = `translateY(${-Number(ch) * 5}%)`;
|
|
1325
|
+
}
|
|
1326
|
+
else
|
|
1327
|
+
col.textContent = ch;
|
|
1328
|
+
return col;
|
|
1329
|
+
}
|
|
1330
|
+
render(animate) {
|
|
1331
|
+
const row = this._row;
|
|
1332
|
+
if (!row)
|
|
1333
|
+
return;
|
|
1334
|
+
const next = this.format();
|
|
1335
|
+
this._text = next;
|
|
1336
|
+
this.setAttribute('aria-label', next);
|
|
1337
|
+
const anim = animate && !this.reduced;
|
|
1338
|
+
const dur = this.num('duration', 1100);
|
|
1339
|
+
const chars = next.split('');
|
|
1340
|
+
const old = Array.from(row.children);
|
|
1341
|
+
const off = chars.length - old.length; // right-aligned: digits keep their place value
|
|
1342
|
+
const fresh = new Set();
|
|
1343
|
+
const cols = chars.map((ch, i) => {
|
|
1344
|
+
const o = old[i - off];
|
|
1345
|
+
const digit = /\d/.test(ch);
|
|
1346
|
+
if (o && digit && o.dataset.d !== undefined)
|
|
1347
|
+
return o;
|
|
1348
|
+
if (o && !digit && o.dataset.d === undefined) {
|
|
1349
|
+
o.textContent = ch;
|
|
1350
|
+
return o;
|
|
1351
|
+
}
|
|
1352
|
+
const c = this.column(ch);
|
|
1353
|
+
fresh.add(c);
|
|
1354
|
+
return c;
|
|
1355
|
+
});
|
|
1356
|
+
row.replaceChildren(...cols);
|
|
1357
|
+
cols.forEach((c, i) => {
|
|
1358
|
+
if (fresh.has(c)) {
|
|
1359
|
+
if (anim)
|
|
1360
|
+
this.motion(c, [{ opacity: 0, transform: 'translateY(-60%)' }, { opacity: 1, transform: 'none' }], { duration: 420, easing: 'cubic-bezier(.22,1,.36,1)' });
|
|
1361
|
+
return;
|
|
1362
|
+
}
|
|
1363
|
+
if (c.dataset.d === undefined)
|
|
1364
|
+
return;
|
|
1365
|
+
const to = Number(chars[i]);
|
|
1366
|
+
const from = Number(c.dataset.d);
|
|
1367
|
+
c.dataset.d = String(to);
|
|
1368
|
+
const strip = c.firstElementChild;
|
|
1369
|
+
strip.style.transform = `translateY(${-to * 5}%)`;
|
|
1370
|
+
if (!anim || from === to)
|
|
1371
|
+
return;
|
|
1372
|
+
const end = to >= from ? -to * 5 : -(to + 10) * 5; // always roll forward
|
|
1373
|
+
const place = cols.length - i;
|
|
1374
|
+
this.motion(strip, [{ transform: `translateY(${-from * 5}%)` }, { transform: `translateY(${end}%)` }], { duration: Math.max(400, dur - place * 60), easing: 'cubic-bezier(.2,.9,.25,1.04)' });
|
|
1375
|
+
});
|
|
1376
|
+
}
|
|
1377
|
+
}
|
|
1378
|
+
return UsaOdometer;
|
|
1379
|
+
}, { id: 'meters', text: css$2 });
|
|
1380
|
+
}
|
|
1381
|
+
|
|
1382
|
+
var css$1 = "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
|
+
|
|
1384
|
+
const SKELETON_VARIANTS = ['wave', 'pulse', 'glow'];
|
|
1385
|
+
function defineSkeletonReveal(tag = 'usa-skeleton-reveal') {
|
|
1386
|
+
return base.defineElement(tag, (Base) => {
|
|
1387
|
+
class UsaSkeletonReveal extends Base {
|
|
1388
|
+
constructor() {
|
|
1389
|
+
super(...arguments);
|
|
1390
|
+
this._layer = null;
|
|
1391
|
+
}
|
|
1392
|
+
static get observedAttributes() {
|
|
1393
|
+
return ['loading', 'variant'];
|
|
1394
|
+
}
|
|
1395
|
+
get loading() {
|
|
1396
|
+
return this.flag('loading');
|
|
1397
|
+
}
|
|
1398
|
+
set loading(v) {
|
|
1399
|
+
this.setFlag('loading', v);
|
|
1400
|
+
}
|
|
1401
|
+
changed(name) {
|
|
1402
|
+
if (name === 'loading') {
|
|
1403
|
+
if (this.loading)
|
|
1404
|
+
this.build();
|
|
1405
|
+
else
|
|
1406
|
+
void this.reveal();
|
|
1407
|
+
return;
|
|
1408
|
+
}
|
|
1409
|
+
super.changed(name);
|
|
1410
|
+
}
|
|
1411
|
+
mount() {
|
|
1412
|
+
const v = this.str('variant', 'wave');
|
|
1413
|
+
this.dataset.variant = SKELETON_VARIANTS.includes(v) ? v : 'wave';
|
|
1414
|
+
if (this.loading)
|
|
1415
|
+
this.build();
|
|
1416
|
+
if (typeof ResizeObserver === 'function') {
|
|
1417
|
+
const ro = new ResizeObserver(() => this.loading && this.build());
|
|
1418
|
+
ro.observe(this);
|
|
1419
|
+
this.onCleanup(() => ro.disconnect());
|
|
1420
|
+
}
|
|
1421
|
+
this.onCleanup(() => this._layer?.remove());
|
|
1422
|
+
}
|
|
1423
|
+
/** Measure the content and lay placeholders over it. */
|
|
1424
|
+
build() {
|
|
1425
|
+
this.setAttribute('aria-busy', 'true');
|
|
1426
|
+
this.setAttribute('data-loading', '');
|
|
1427
|
+
this._layer?.remove();
|
|
1428
|
+
const layer = part('div', 'usa-sk-layer', { 'aria-hidden': 'true' });
|
|
1429
|
+
const host = this.getBoundingClientRect();
|
|
1430
|
+
const boxes = [];
|
|
1431
|
+
const add = (r, round = false) => {
|
|
1432
|
+
if (r.width < 2 || r.height < 2)
|
|
1433
|
+
return;
|
|
1434
|
+
boxes.push([r.left - host.left, r.top - host.top, r.width, r.height, round]);
|
|
1435
|
+
};
|
|
1436
|
+
const marked = Array.from(this.querySelectorAll('[data-skeleton], img, svg, video, canvas, button, input'));
|
|
1437
|
+
for (const m of marked)
|
|
1438
|
+
if (!m.closest('.usa-sk-layer'))
|
|
1439
|
+
add(m.getBoundingClientRect(), m.dataset.skeleton === 'circle' || getComputedStyle(m).borderRadius === '50%');
|
|
1440
|
+
// text: one bar per rendered line (Range client rects), skipping marked elements
|
|
1441
|
+
const walker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT);
|
|
1442
|
+
for (let n = walker.nextNode(); n; n = walker.nextNode()) {
|
|
1443
|
+
if (!n.textContent?.trim() || (n.parentElement && marked.some((m) => m.contains(n.parentElement))))
|
|
1444
|
+
continue;
|
|
1445
|
+
const range = document.createRange();
|
|
1446
|
+
range.selectNodeContents(n);
|
|
1447
|
+
const rects = typeof range.getClientRects === 'function' ? Array.from(range.getClientRects()) : [];
|
|
1448
|
+
for (const r of rects)
|
|
1449
|
+
add({ left: r.left, top: r.top + r.height * 0.18, width: r.width, height: r.height * 0.64 });
|
|
1450
|
+
}
|
|
1451
|
+
for (const [x, y, w, h, round] of boxes) {
|
|
1452
|
+
const b = document.createElement('span');
|
|
1453
|
+
b.className = 'usa-sk-box';
|
|
1454
|
+
b.style.cssText = `left:${x.toFixed(1)}px;top:${y.toFixed(1)}px;width:${w.toFixed(1)}px;height:${h.toFixed(1)}px;${round ? 'border-radius:50%' : ''}`;
|
|
1455
|
+
b.style.setProperty('--usa-sk-x', `${(-x).toFixed(1)}px`);
|
|
1456
|
+
layer.append(b);
|
|
1457
|
+
}
|
|
1458
|
+
this.append(layer);
|
|
1459
|
+
this._layer = layer;
|
|
1460
|
+
}
|
|
1461
|
+
reveal() {
|
|
1462
|
+
const layer = this._layer;
|
|
1463
|
+
this.removeAttribute('aria-busy');
|
|
1464
|
+
if (this.hasAttribute('loading'))
|
|
1465
|
+
this.removeAttribute('loading');
|
|
1466
|
+
this._layer = null;
|
|
1467
|
+
if (!layer) {
|
|
1468
|
+
this.removeAttribute('data-loading');
|
|
1469
|
+
return Promise.resolve();
|
|
1470
|
+
}
|
|
1471
|
+
const boxes = Array.from(layer.children);
|
|
1472
|
+
const kids = Array.from(this.children).filter((c) => c !== layer);
|
|
1473
|
+
this.removeAttribute('data-loading');
|
|
1474
|
+
const done = [];
|
|
1475
|
+
if (this.reduced) {
|
|
1476
|
+
const a = this.motion(layer, [{ opacity: 1 }, { opacity: 0 }], { duration: 200, fill: 'forwards' });
|
|
1477
|
+
if (a)
|
|
1478
|
+
done.push(a.finished);
|
|
1479
|
+
}
|
|
1480
|
+
else {
|
|
1481
|
+
const top = Math.min(...boxes.map((b) => parseFloat(b.style.top) || 0), 0);
|
|
1482
|
+
for (const b of boxes) {
|
|
1483
|
+
const a = this.motion(b, [{ opacity: 1, transform: 'none', filter: 'blur(0)' }, { opacity: 0, transform: 'scale(1.04)', filter: 'blur(6px)' }], { duration: 420, delay: Math.min(500, ((parseFloat(b.style.top) || 0) - top) * 1.2), easing: 'cubic-bezier(.4,0,.2,1)', fill: 'forwards' });
|
|
1484
|
+
if (a)
|
|
1485
|
+
done.push(a.finished);
|
|
1486
|
+
}
|
|
1487
|
+
kids.forEach((k, i) => this.motion(k, [{ opacity: 0, filter: 'blur(8px)', transform: 'translateY(6px)' }, { opacity: 1, filter: 'blur(0)', transform: 'none' }], { duration: 520, delay: 60 + i * 70, easing: 'cubic-bezier(.22,1,.36,1)', fill: 'backwards' }));
|
|
1488
|
+
}
|
|
1489
|
+
const end = () => {
|
|
1490
|
+
layer.remove();
|
|
1491
|
+
this.emit('reveal');
|
|
1492
|
+
};
|
|
1493
|
+
return Promise.all(done).then(end, end);
|
|
1494
|
+
}
|
|
1495
|
+
}
|
|
1496
|
+
return UsaSkeletonReveal;
|
|
1497
|
+
}, { id: 'skeleton-reveal', text: css$1 });
|
|
1498
|
+
}
|
|
1499
|
+
|
|
1500
|
+
var css = "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
|
+
|
|
1502
|
+
const PATHS = {
|
|
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',
|
|
1504
|
+
heart: 'M12 21s-7.5-4.6-9.6-9.2C.9 8.4 2.9 4.5 6.6 4.5c2.1 0 3.6 1.2 5.4 3.1 1.8-1.9 3.3-3.1 5.4-3.1 3.7 0 5.7 3.9 4.2 7.3C19.5 16.4 12 21 12 21z',
|
|
1505
|
+
};
|
|
1506
|
+
function defineStarRating(tag = 'usa-star-rating') {
|
|
1507
|
+
return base.defineElement(tag, (Base) => {
|
|
1508
|
+
class UsaStarRating extends Base {
|
|
1509
|
+
constructor() {
|
|
1510
|
+
super(...arguments);
|
|
1511
|
+
this._v = 0;
|
|
1512
|
+
this._stars = [];
|
|
1513
|
+
}
|
|
1514
|
+
static get observedAttributes() {
|
|
1515
|
+
return ['max', 'icon', 'readonly', 'step'];
|
|
1516
|
+
}
|
|
1517
|
+
get value() {
|
|
1518
|
+
return this._v;
|
|
1519
|
+
}
|
|
1520
|
+
set value(v) {
|
|
1521
|
+
this.set(v, false);
|
|
1522
|
+
}
|
|
1523
|
+
get max() {
|
|
1524
|
+
return Math.max(1, Math.round(this.num('max', 5)));
|
|
1525
|
+
}
|
|
1526
|
+
get step() {
|
|
1527
|
+
return this.num('step', 1) === 0.5 ? 0.5 : 1;
|
|
1528
|
+
}
|
|
1529
|
+
mount() {
|
|
1530
|
+
this.querySelectorAll(':scope > [data-usa-part]').forEach((n) => n.remove());
|
|
1531
|
+
const icon = PATHS[this.str('icon', 'star')] || PATHS.star;
|
|
1532
|
+
this._stars = [];
|
|
1533
|
+
for (let i = 0; i < this.max; i++) {
|
|
1534
|
+
const s = part('span', 'usa-star', { 'aria-hidden': 'true' }, `<svg viewBox="0 0 24 24" width="100%" height="100%"><path class="usa-star-bg" d="${icon}"/></svg><span class="usa-star-fg"><svg viewBox="0 0 24 24" width="24" height="24"><path d="${icon}"/></svg></span>`);
|
|
1535
|
+
this._stars.push(s);
|
|
1536
|
+
this.append(s);
|
|
1537
|
+
}
|
|
1538
|
+
const ro = this.flag('readonly');
|
|
1539
|
+
this.setAttribute('role', ro ? 'img' : 'slider');
|
|
1540
|
+
if (!ro) {
|
|
1541
|
+
this.tabIndex = 0;
|
|
1542
|
+
this.setAttribute('aria-valuemin', '0');
|
|
1543
|
+
this.setAttribute('aria-valuemax', String(this.max));
|
|
1544
|
+
}
|
|
1545
|
+
if (!this.hasAttribute('aria-label'))
|
|
1546
|
+
this.setAttribute('aria-label', this.str('label', 'Rating'));
|
|
1547
|
+
this._v = clampN(this.num('value', 0), 0, this.max);
|
|
1548
|
+
this.paint(this._v);
|
|
1549
|
+
this.sync();
|
|
1550
|
+
if (ro)
|
|
1551
|
+
return;
|
|
1552
|
+
const at = (e) => {
|
|
1553
|
+
const r = this._stars[0].getBoundingClientRect();
|
|
1554
|
+
const last = this._stars[this._stars.length - 1].getBoundingClientRect();
|
|
1555
|
+
const w = last.right - r.left || 1;
|
|
1556
|
+
const raw = ((e.clientX - r.left) / w) * this.max;
|
|
1557
|
+
return clampN(Math.ceil(raw / this.step) * this.step, this.step, this.max);
|
|
1558
|
+
};
|
|
1559
|
+
this.listen(this, 'pointermove', (e) => {
|
|
1560
|
+
this.setAttribute('data-preview', '');
|
|
1561
|
+
this.paint(at(e));
|
|
1562
|
+
});
|
|
1563
|
+
this.listen(this, 'pointerleave', () => {
|
|
1564
|
+
this.removeAttribute('data-preview');
|
|
1565
|
+
this.paint(this._v);
|
|
1566
|
+
});
|
|
1567
|
+
this.listen(this, 'click', (e) => this.set(at(e), true));
|
|
1568
|
+
this.listen(this, 'keydown', (e) => {
|
|
1569
|
+
const k = e.key;
|
|
1570
|
+
let v = this._v;
|
|
1571
|
+
if (k === 'ArrowRight' || k === 'ArrowUp')
|
|
1572
|
+
v += this.step;
|
|
1573
|
+
else if (k === 'ArrowLeft' || k === 'ArrowDown')
|
|
1574
|
+
v -= this.step;
|
|
1575
|
+
else if (k === 'Home')
|
|
1576
|
+
v = 0;
|
|
1577
|
+
else if (k === 'End')
|
|
1578
|
+
v = this.max;
|
|
1579
|
+
else
|
|
1580
|
+
return;
|
|
1581
|
+
e.preventDefault();
|
|
1582
|
+
this.set(v, true);
|
|
1583
|
+
});
|
|
1584
|
+
}
|
|
1585
|
+
sync() {
|
|
1586
|
+
this.setAttribute('aria-valuenow', String(this._v));
|
|
1587
|
+
this.setAttribute('aria-valuetext', `${this._v} of ${this.max}`);
|
|
1588
|
+
if (this.flag('readonly'))
|
|
1589
|
+
this.setAttribute('aria-label', `${this.str('label', 'Rating')}: ${this._v} of ${this.max}`);
|
|
1590
|
+
}
|
|
1591
|
+
paint(v) {
|
|
1592
|
+
this._stars.forEach((s, i) => s.style.setProperty('--usa-star-fill', `${(clampN(v - i, 0, 1) * 100).toFixed(0)}%`));
|
|
1593
|
+
}
|
|
1594
|
+
set(v, user) {
|
|
1595
|
+
const nv = clampN(Math.round(v / this.step) * this.step, 0, this.max);
|
|
1596
|
+
const changed = nv !== this._v;
|
|
1597
|
+
this._v = nv;
|
|
1598
|
+
this.paint(nv);
|
|
1599
|
+
this.sync();
|
|
1600
|
+
if (!user)
|
|
1601
|
+
return;
|
|
1602
|
+
const idx = Math.ceil(nv) - 1;
|
|
1603
|
+
if (!this.reduced && idx >= 0) {
|
|
1604
|
+
const star = this._stars[idx];
|
|
1605
|
+
this.motion(star, [{ transform: 'scale(1)' }, { transform: 'scale(1.45) rotate(-12deg)', offset: 0.35 }, { transform: 'scale(.92)', offset: 0.7 }, { transform: 'none' }], { duration: 520, easing: 'cubic-bezier(.3,1.4,.5,1)' });
|
|
1606
|
+
this._stars.slice(0, idx).forEach((s, i) => this.motion(s, [{ transform: 'none' }, { transform: 'translateY(-5px)' }, { transform: 'none' }], { duration: 320, delay: i * 45, easing: 'ease-out' }));
|
|
1607
|
+
for (let k = 0; k < 8; k++) {
|
|
1608
|
+
const sp = part('span', 'usa-star-spark', { 'aria-hidden': 'true' });
|
|
1609
|
+
star.append(sp);
|
|
1610
|
+
const a = (k / 8) * Math.PI * 2;
|
|
1611
|
+
const anim = this.motion(sp, [{ transform: 'translate(-50%,-50%) scale(1)', opacity: 1 }, { transform: `translate(calc(-50% + ${(Math.cos(a) * 22).toFixed(1)}px), calc(-50% + ${(Math.sin(a) * 22).toFixed(1)}px)) scale(.2)`, opacity: 0 }], { duration: 520, easing: 'cubic-bezier(.2,.8,.3,1)', fill: 'forwards' });
|
|
1612
|
+
const rm = () => sp.remove();
|
|
1613
|
+
if (anim)
|
|
1614
|
+
anim.finished.then(rm, rm);
|
|
1615
|
+
else
|
|
1616
|
+
rm();
|
|
1617
|
+
}
|
|
1618
|
+
}
|
|
1619
|
+
if (changed)
|
|
1620
|
+
this.emit('change', { value: nv });
|
|
1621
|
+
}
|
|
1622
|
+
}
|
|
1623
|
+
return UsaStarRating;
|
|
1624
|
+
}, { id: 'star-rating', text: css });
|
|
1127
1625
|
}
|
|
1128
1626
|
|
|
1129
1627
|
/**
|
|
@@ -1142,6 +1640,7 @@ function defineMenu(tag = 'usa-menu') {
|
|
|
1142
1640
|
const WIDGETS = {
|
|
1143
1641
|
'6.2': { 'usa-carousel': defineCarousel, 'usa-tab-bar': defineTabBar, 'usa-disclosure': defineDisclosure, 'usa-stories': defineStories },
|
|
1144
1642
|
'6.3': { 'usa-toast-stack': defineToastStack, 'usa-modal': defineModal, 'usa-sheet': defineSheet, 'usa-menu': defineMenu },
|
|
1643
|
+
'6.4': { 'usa-progress-ring': defineProgressRing, 'usa-odometer': defineOdometer, 'usa-skeleton-reveal': defineSkeletonReveal, 'usa-star-rating': defineStarRating },
|
|
1145
1644
|
};
|
|
1146
1645
|
/** Every widget tag, in release order. */
|
|
1147
1646
|
const WIDGET_TAGS = Object.values(WIDGETS).flatMap((g) => Object.keys(g));
|
|
@@ -1156,7 +1655,9 @@ function defineWidgets(release) {
|
|
|
1156
1655
|
exports.CAROUSEL_EFFECTS = CAROUSEL_EFFECTS;
|
|
1157
1656
|
exports.MENU_EFFECTS = MENU_EFFECTS;
|
|
1158
1657
|
exports.MODAL_EFFECTS = MODAL_EFFECTS;
|
|
1658
|
+
exports.PROGRESS_VARIANTS = PROGRESS_VARIANTS;
|
|
1159
1659
|
exports.SHEET_SIDES = SHEET_SIDES;
|
|
1660
|
+
exports.SKELETON_VARIANTS = SKELETON_VARIANTS;
|
|
1160
1661
|
exports.TAB_INDICATORS = TAB_INDICATORS;
|
|
1161
1662
|
exports.TOAST_POSITIONS = TOAST_POSITIONS;
|
|
1162
1663
|
exports.WIDGETS = WIDGETS;
|
|
@@ -1165,7 +1666,11 @@ exports.defineCarousel = defineCarousel;
|
|
|
1165
1666
|
exports.defineDisclosure = defineDisclosure;
|
|
1166
1667
|
exports.defineMenu = defineMenu;
|
|
1167
1668
|
exports.defineModal = defineModal;
|
|
1669
|
+
exports.defineOdometer = defineOdometer;
|
|
1670
|
+
exports.defineProgressRing = defineProgressRing;
|
|
1168
1671
|
exports.defineSheet = defineSheet;
|
|
1672
|
+
exports.defineSkeletonReveal = defineSkeletonReveal;
|
|
1673
|
+
exports.defineStarRating = defineStarRating;
|
|
1169
1674
|
exports.defineStories = defineStories;
|
|
1170
1675
|
exports.defineTabBar = defineTabBar;
|
|
1171
1676
|
exports.defineToastStack = defineToastStack;
|