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