use-scroll-animate 2.7.0 → 2.8.0

package/dist/components/ui.cjs

@@ -2,37 +2,7 @@
 
 var base = require('../chunks/base-BR6fYLBA.cjs');
 var spring = require('../chunks/spring-DyHe1Hfa.cjs');
-
-var css$b = ":root{--usa-accent:#7c5cff;--usa-accent-text:#fff;--usa-surface:#1b1e27;--usa-text:inherit;--usa-radius:14px;--usa-border:1px solid rgb(127 127 127 / 0.25);--usa-shadow:0 10px 30px -12px rgb(0 0 0 / 0.45);--usa-blur:0px;--usa-font:inherit}:where([variant=\"minimal\"],[data-usa-variant=\"minimal\"]){--usa-accent:currentColor;--usa-accent-text:Canvas;--usa-surface:transparent;--usa-radius:6px;--usa-border:1px solid color-mix(in srgb,currentColor 22%,transparent);--usa-shadow:none;--usa-blur:0px}:where([variant=\"neon\"],[data-usa-variant=\"neon\"]){--usa-accent:#00f0ff;--usa-accent-text:#04121a;--usa-surface:#0a0b14;--usa-text:#e6fbff;--usa-radius:10px;--usa-border:1px solid #00f0ff;--usa-shadow:0 0 6px #00f0ff,0 0 22px rgb(0 240 255 / 0.45);--usa-blur:0px}:where([variant=\"glass\"],[data-usa-variant=\"glass\"]){--usa-accent:#a78bfa;--usa-accent-text:#fff;--usa-surface:rgb(255 255 255 / 0.12);--usa-radius:18px;--usa-border:1px solid rgb(255 255 255 / 0.28);--usa-shadow:0 12px 40px -12px rgb(0 0 0 / 0.35);--usa-blur:16px}:where([variant=\"brutalist\"],[data-usa-variant=\"brutalist\"]){--usa-accent:#ff3d00;--usa-accent-text:#000;--usa-surface:#fff;--usa-text:#000;--usa-radius:0px;--usa-border:3px solid #000;--usa-shadow:5px 5px 0 #000;--usa-blur:0px;--usa-font:ui-monospace,\"SFMono-Regular\",Menlo,monospace}:where([variant=\"fluent\"],[data-usa-variant=\"fluent\"]){--usa-accent:#0067c0;--usa-accent-text:#fff;--usa-surface:rgb(249 249 249 / 0.82);--usa-text:#1a1a1a;--usa-radius:8px;--usa-border:1px solid rgb(0 0 0 / 0.08);--usa-shadow:0 2px 4px rgb(0 0 0 / 0.14),0 0 2px rgb(0 0 0 / 0.12);--usa-blur:30px;--usa-font:\"Segoe UI Variable\",\"Segoe UI\",system-ui,sans-serif}:where([variant=\"material\"],[data-usa-variant=\"material\"]){--usa-accent:#6750a4;--usa-accent-text:#fff;--usa-surface:#fffbfe;--usa-text:#1c1b1f;--usa-radius:20px;--usa-border:0 solid transparent;--usa-shadow:0 1px 3px rgb(0 0 0 / 0.3),0 4px 8px 3px rgb(0 0 0 / 0.15);--usa-blur:0px;--usa-font:Roboto,system-ui,sans-serif}@media (prefers-color-scheme:dark){:where([variant=\"fluent\"],[data-usa-variant=\"fluent\"]){--usa-accent:#4cc2ff;--usa-accent-text:#000;--usa-surface:rgb(44 44 44 / 0.8);--usa-text:#fff;--usa-border:1px solid rgb(255 255 255 / 0.08)}:where([variant=\"material\"],[data-usa-variant=\"material\"]){--usa-accent:#d0bcff;--usa-accent-text:#381e72;--usa-surface:#1c1b1f;--usa-text:#e6e1e5}}.usa-surface{background:var(--usa-surface);color:var(--usa-text);border:var(--usa-border);border-radius:var(--usa-radius);box-shadow:var(--usa-shadow);font-family:var(--usa-font);-webkit-backdrop-filter:blur(var(--usa-blur));backdrop-filter:blur(var(--usa-blur))}@media (prefers-reduced-transparency:reduce){.usa-surface{-webkit-backdrop-filter:none;backdrop-filter:none}}";
-
-/**
- * Style variants (v2.6): `variant="minimal | neon | glass | brutalist |
- * fluent | material"` on any `<usa-*>` element — or on any ancestor as
- * `data-usa-variant`, or page-wide with `setVariant()` — sets the shared
- * design tokens every component reads:
- *
- * `--usa-accent`, `--usa-accent-text`, `--usa-surface`, `--usa-text`,
- * `--usa-radius`, `--usa-border`, `--usa-shadow`, `--usa-blur`, `--usa-font`.
- *
- * (`<usa-spinner>`, `<usa-check>` and `<usa-dialog>` already use `variant`
- * for their kind; the token names never clash with those values except
- * `fluent`, which means the same thing there.)
- */
-const VARIANTS = ['minimal', 'neon', 'glass', 'brutalist', 'fluent', 'material'];
-/** Inject the variant token sheet (done automatically by every `ui` component). */
-function adoptVariants() {
-    base.adoptStyles('variants', css$b);
-}
-/** Apply a variant to the whole page (or `root`); `null` removes it. */
-function setVariant(variant, root = typeof document !== 'undefined' ? document.documentElement : null) {
-    if (!root)
-        return;
-    adoptVariants();
-    if (variant)
-        root.setAttribute('data-usa-variant', variant);
-    else
-        root.removeAttribute('data-usa-variant');
-}
+var variants = require('../chunks/variants-Bbatdq8d.cjs');
 
 /** Position a fixed `floating` element next to `anchor`, flipping when it would leave the viewport. */
 function place(floating, anchor, placement = 'top', gap = 8) {
@@ -69,7 +39,7 @@ const nextId = (prefix) => `${prefix}-${++uid}`;
 var css$a = "usa-tabs{display:block;font-family:var(--usa-font)}usa-tabs .usa-tabs-list{position:relative;display:flex;gap:4px;border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}usa-tabs [role=\"tab\"]{position:relative;z-index:1;padding:10px 14px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;opacity:0.7;transition:opacity 0.2s ease,color 0.2s ease;border-radius:calc(var(--usa-radius,14px) / 2)}usa-tabs [role=\"tab\"][aria-selected=\"true\"]{opacity:1;color:var(--usa-accent,#7c5cff)}usa-tabs [role=\"tab\"]:focus-visible{outline:2px solid var(--usa-accent,#7c5cff);outline-offset:-2px}usa-tabs .usa-tabs-indicator{position:absolute;left:0;bottom:-1px;height:3px;width:0;border-radius:3px;background:var(--usa-accent,#7c5cff);pointer-events:none}usa-tabs[indicator=\"pill\"] .usa-tabs-list{border-bottom:0;padding:4px;border-radius:999px;background:color-mix(in srgb,currentColor 8%,transparent)}usa-tabs[indicator=\"pill\"] .usa-tabs-indicator{top:4px;bottom:4px;height:auto;border-radius:999px;opacity:0.18}usa-tabs [role=\"tabpanel\"]{padding:14px 2px}usa-tabs [role=\"tabpanel\"]:focus-visible{outline:2px solid var(--usa-accent,#7c5cff);outline-offset:2px;border-radius:6px}";
 
 function defineTabs(tag = 'usa-tabs') {
-    adoptVariants();
+    variants.adoptVariants();
     return base.defineElement(tag, (Base) => class UsaTabs extends Base {
         constructor() {
             super(...arguments);
@@ -328,11 +298,11 @@ function makePanel(Base, kind) {
     };
 }
 function defineDrawer(tag = 'usa-drawer') {
-    adoptVariants();
+    variants.adoptVariants();
     return base.defineElement(tag, (Base) => makePanel(Base, 'drawer'), { id: 'sheet', text: css$9 });
 }
 function defineBottomSheet(tag = 'usa-bottom-sheet') {
-    adoptVariants();
+    variants.adoptVariants();
     return base.defineElement(tag, (Base) => {
         const Panel = makePanel(Base, 'sheet');
         return class UsaBottomSheet extends Panel {
@@ -378,7 +348,7 @@ function defineBottomSheet(tag = 'usa-bottom-sheet') {
 var css$8 = "usa-pull-refresh{position:relative;display:block;overflow:auto;overscroll-behavior-y:contain;touch-action:pan-x pan-down}usa-pull-refresh>:not(.usa-pull-indicator):not(.usa-sr){transform:translateY(var(--usa-pull,0px))}usa-pull-refresh .usa-pull-indicator{position:absolute;left:50%;top:0;width:34px;height:34px;margin-left:-17px;z-index:2;display:grid;place-items:center;border-radius:50%;background:var(--usa-surface,#1b1e27);box-shadow:var(--usa-shadow);color:var(--usa-accent,#7c5cff);transform:translateY(calc(var(--usa-pull,0px) - 40px)) rotate(calc(var(--usa-pull-p,0) * 270deg));opacity:var(--usa-pull-p,0);pointer-events:none}usa-pull-refresh .usa-pull-indicator svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}usa-pull-refresh .usa-pull-indicator circle{stroke-dasharray:calc(var(--usa-pull-p,0) * 75) 100}usa-pull-refresh[data-armed] .usa-pull-indicator{background:var(--usa-accent,#7c5cff);color:var(--usa-accent-text,#fff)}usa-pull-refresh[data-refreshing] .usa-pull-indicator{opacity:1;animation:usa-pull-spin 0.8s linear infinite}usa-pull-refresh[data-refreshing] .usa-pull-indicator circle{stroke-dasharray:60 100}@keyframes usa-pull-spin{from{transform:translateY(calc(var(--usa-pull,0px) - 40px)) rotate(0)}to{transform:translateY(calc(var(--usa-pull,0px) - 40px)) rotate(360deg)}}@media (prefers-reduced-motion:reduce){usa-pull-refresh[data-refreshing] .usa-pull-indicator{animation-duration:2.4s;transform:translateY(8px)}}";
 
 function definePullRefresh(tag = 'usa-pull-refresh') {
-    adoptVariants();
+    variants.adoptVariants();
     return base.defineElement(tag, (Base) => class UsaPullRefresh extends Base {
         constructor() {
             super(...arguments);
@@ -480,7 +450,7 @@ function definePullRefresh(tag = 'usa-pull-refresh') {
 var css$7 = "usa-fab{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:900;display:grid;place-items:center}usa-fab[position=\"bottom-left\"]{right:auto;left:max(20px,env(safe-area-inset-left))}usa-fab[position=\"inline\"]{position:relative;right:auto;bottom:auto;display:inline-grid}usa-fab>*{grid-area:1 / 1}usa-fab .usa-fab-main{position:relative;z-index:1;width:56px;height:56px;border-radius:min(var(--usa-radius,14px) * 1.2,28px);border:0;display:grid;place-items:center;font-size:24px;cursor:pointer;background:var(--usa-accent,#7c5cff);color:var(--usa-accent-text,#fff);box-shadow:var(--usa-shadow);transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1)}usa-fab[open] .usa-fab-main{transform:rotate(45deg)}usa-fab .usa-fab-action{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;opacity:0;transform:scale(0.4);will-change:transform,opacity}usa-fab .usa-fab-main:focus-visible,usa-fab .usa-fab-action:focus-visible{outline:2px solid var(--usa-accent,#7c5cff);outline-offset:3px}@media (prefers-reduced-motion:reduce){usa-fab .usa-fab-main{transition:none}}";
 
 function defineFab(tag = 'usa-fab') {
-    adoptVariants();
+    variants.adoptVariants();
     return base.defineElement(tag, (Base) => class UsaFab extends Base {
         static get observedAttributes() {
             return ['direction', 'gap'];
@@ -569,7 +539,7 @@ function defineFab(tag = 'usa-fab') {
 var css$6 = "usa-navbar{position:sticky;top:0;z-index:800;display:block;transition:transform 0.35s cubic-bezier(0.22,1,0.36,1),padding 0.25s ease,box-shadow 0.25s ease;will-change:transform}usa-navbar[data-hidden]{transform:translateY(-100%)}usa-navbar[data-scrolled]{box-shadow:var(--usa-shadow,0 6px 20px -10px rgb(0 0 0 / 0.4))}usa-navbar[shrink][data-scrolled]{padding-block:4px}@media (prefers-reduced-motion:reduce){usa-navbar{transition:none}}";
 
 function defineNavbar(tag = 'usa-navbar') {
-    adoptVariants();
+    variants.adoptVariants();
     return base.defineElement(tag, (Base) => class UsaNavbar extends Base {
         constructor() {
             super(...arguments);
@@ -625,7 +595,7 @@ function defineNavbar(tag = 'usa-navbar') {
 var css$5 = "usa-slider{--usa-slider:0;position:relative;display:block;height:28px;min-width:120px;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent}usa-slider .usa-slider-track{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:color-mix(in srgb,currentColor 16%,transparent);overflow:hidden}usa-slider .usa-slider-fill{position:absolute;inset:0;background:var(--usa-accent,#7c5cff);transform-origin:0 50%;transform:scaleX(var(--usa-slider))}usa-slider .usa-slider-thumb{position:absolute;top:50%;left:calc(var(--usa-slider) * 100%);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgb(0 0 0 / 0.35),0 0 0 4px color-mix(in srgb,var(--usa-accent,#7c5cff) 0%,transparent);transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.2s ease}usa-slider:hover .usa-slider-thumb,usa-slider:focus-visible .usa-slider-thumb{box-shadow:0 1px 4px rgb(0 0 0 / 0.35),0 0 0 6px color-mix(in srgb,var(--usa-accent,#7c5cff) 25%,transparent)}usa-slider[data-dragging] .usa-slider-thumb{transform:scale(1.25)}usa-slider .usa-slider-bubble{position:absolute;bottom:150%;left:50%;transform:translateX(-50%) scale(0.6);opacity:0;padding:2px 8px;border-radius:8px;font:600 12px/1.6 system-ui,sans-serif;color:var(--usa-accent-text,#fff);background:var(--usa-accent,#7c5cff);white-space:nowrap;pointer-events:none;transition:opacity 0.15s ease,transform 0.25s cubic-bezier(0.34,1.56,0.64,1)}usa-slider[bubble][data-dragging] .usa-slider-bubble,usa-slider[bubble]:focus-visible .usa-slider-bubble{opacity:1;transform:translateX(-50%) scale(1)}usa-slider:focus-visible{outline:none}usa-slider[disabled]{opacity:0.45;cursor:not-allowed}@media (prefers-reduced-motion:reduce){usa-slider .usa-slider-thumb,usa-slider .usa-slider-bubble{transition:none}}";
 
 function defineSlider(tag = 'usa-slider') {
-    adoptVariants();
+    variants.adoptVariants();
     return base.defineElement(tag, (Base) => {
         class UsaSlider extends Base {
             static get observedAttributes() {
@@ -749,7 +719,7 @@ function defineSlider(tag = 'usa-slider') {
 var css$4 = "usa-rating{--usa-rating-on:#f5b301;display:inline-flex;gap:2px;font-size:1.5em;line-height:1;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}usa-rating[readonly]{cursor:default}usa-rating .usa-rating-star{display:inline-block;color:color-mix(in srgb,currentColor 22%,transparent);transition:color 0.15s ease,transform 0.2s ease}usa-rating .usa-rating-star[data-on]{color:var(--usa-rating-on)}usa-rating[data-previewing] .usa-rating-star{color:color-mix(in srgb,currentColor 22%,transparent)}usa-rating[data-previewing] .usa-rating-star[data-preview]{color:var(--usa-rating-on);transform:scale(1.12)}usa-rating:focus-visible{outline:2px solid var(--usa-accent,#7c5cff);outline-offset:3px;border-radius:6px}@media (prefers-reduced-motion:reduce){usa-rating .usa-rating-star{transition:none;transform:none !important}}";
 
 function defineRating(tag = 'usa-rating') {
-    adoptVariants();
+    variants.adoptVariants();
     return base.defineElement(tag, (Base) => {
         class UsaRating extends Base {
             static get observedAttributes() {
@@ -837,7 +807,7 @@ function defineRating(tag = 'usa-rating') {
 var css$3 = "usa-tooltip{display:inline-block}usa-tooltip .usa-tooltip-bubble{position:fixed;z-index:2000;max-width:260px;padding:6px 10px;font-size:0.85rem;line-height:1.4;pointer-events:none;--usa-radius:8px;white-space:normal}usa-tooltip .usa-tooltip-bubble[hidden]{display:none}";
 
 function defineTooltip(tag = 'usa-tooltip') {
-    adoptVariants();
+    variants.adoptVariants();
     return base.defineElement(tag, (Base) => class UsaTooltip extends Base {
         constructor() {
             super(...arguments);
@@ -893,7 +863,7 @@ function defineTooltip(tag = 'usa-tooltip') {
 var css$2 = "usa-popover{display:inline-block}usa-popover .usa-popover-panel{position:fixed;z-index:1500;min-width:180px;max-width:min(92vw,360px);padding:12px 14px;outline:none}usa-popover .usa-popover-panel[hidden]{display:none}";
 
 function definePopover(tag = 'usa-popover') {
-    adoptVariants();
+    variants.adoptVariants();
     return base.defineElement(tag, (Base) => class UsaPopover extends Base {
         get open() {
             return this.flag('open');
@@ -956,7 +926,7 @@ function definePopover(tag = 'usa-popover') {
 var css$1 = "usa-badge{position:relative;display:inline-block}usa-badge .usa-badge-count{position:absolute;top:0;right:0;transform-origin:50% 50%;translate:45% -45%;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;display:grid;place-items:center;font:700 11px/1 system-ui,sans-serif;color:var(--usa-accent-text,#fff);background:var(--usa-badge-color,#e5484d);box-shadow:0 0 0 2px var(--usa-badge-ring,Canvas);pointer-events:none}usa-badge[data-dot] .usa-badge-count{min-width:10px;width:10px;height:10px;padding:0}usa-badge .usa-badge-count[hidden]{display:none}usa-badge[pulse] .usa-badge-count::after{content:\"\";position:absolute;inset:0;border-radius:inherit;background:inherit;animation:usa-badge-pulse 1.6s ease-out infinite;z-index:-1}@keyframes usa-badge-pulse{from{transform:scale(1);opacity:0.6}to{transform:scale(2.4);opacity:0}}@media (prefers-reduced-motion:reduce){usa-badge[pulse] .usa-badge-count::after{animation:none}}";
 
 function defineBadge(tag = 'usa-badge') {
-    adoptVariants();
+    variants.adoptVariants();
     return base.defineElement(tag, (Base) => class UsaBadge extends Base {
         constructor() {
             super(...arguments);
@@ -1006,7 +976,7 @@ function defineBadge(tag = 'usa-badge') {
 var css = "usa-avatar-stack{--usa-avatar-size:36px;--usa-avatar-overlap:0.35;display:inline-flex;align-items:center;padding-inline-start:calc(var(--usa-avatar-size) * var(--usa-avatar-overlap))}usa-avatar-stack .usa-avatar{width:var(--usa-avatar-size);height:var(--usa-avatar-size);border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--usa-avatar-ring,Canvas);margin-inline-start:calc(var(--usa-avatar-size) * var(--usa-avatar-overlap) * -1);transition:margin 0.45s cubic-bezier(0.34,1.56,0.64,1),transform 0.3s cubic-bezier(0.34,1.56,0.64,1);display:grid;place-items:center;font:700 12px/1 system-ui,sans-serif;background:color-mix(in srgb,currentColor 14%,transparent)}usa-avatar-stack .usa-avatar[hidden]{display:none}usa-avatar-stack:hover .usa-avatar,usa-avatar-stack:focus-within .usa-avatar{margin-inline-start:4px}usa-avatar-stack .usa-avatar:hover{transform:translateY(-4px) scale(1.08)}@media (prefers-reduced-motion:reduce){usa-avatar-stack .usa-avatar{transition:none}usa-avatar-stack:hover .usa-avatar,usa-avatar-stack:focus-within .usa-avatar{margin-inline-start:calc(var(--usa-avatar-size) * var(--usa-avatar-overlap) * -1)}usa-avatar-stack .usa-avatar:hover{transform:none}}";
 
 function defineAvatarStack(tag = 'usa-avatar-stack') {
-    adoptVariants();
+    variants.adoptVariants();
     return base.defineElement(tag, (Base) => class UsaAvatarStack extends Base {
         static get observedAttributes() {
             return ['max', 'size', 'overlap'];
@@ -1063,8 +1033,9 @@ function defineUiComponents() {
 
 exports.configureComponents = base.configureComponents;
 exports.prefersReducedMotion = base.prefersReducedMotion;
-exports.VARIANTS = VARIANTS;
-exports.adoptVariants = adoptVariants;
+exports.VARIANTS = variants.VARIANTS;
+exports.adoptVariants = variants.adoptVariants;
+exports.setVariant = variants.setVariant;
 exports.defineAvatarStack = defineAvatarStack;
 exports.defineBadge = defineBadge;
 exports.defineBottomSheet = defineBottomSheet;
@@ -1078,5 +1049,4 @@ exports.defineSlider = defineSlider;
 exports.defineTabs = defineTabs;
 exports.defineTooltip = defineTooltip;
 exports.defineUiComponents = defineUiComponents;
-exports.setVariant = setVariant;
 //# sourceMappingURL=ui.cjs.map