motionary 6.8.0 → 7.0.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 +39 -0
- package/README.md +2 -2
- package/README_ja.md +2 -2
- package/README_zh.md +2 -2
- package/bin/usa-codemod-7.mjs +91 -0
- package/dist/chunks/{gpu-CsP2ZB3x.js → gpu-Bkw605Ds.js} +183 -5
- package/dist/chunks/gpu-Bkw605Ds.js.map +1 -0
- package/dist/chunks/{gpu-BBRLgEzM.cjs → gpu-Dx0H875w.cjs} +187 -4
- package/dist/chunks/gpu-Dx0H875w.cjs.map +1 -0
- package/dist/chunks/{index-tags-wv0R_vkO.cjs → index-tags-BTMwrfgV.cjs} +3 -3
- package/dist/chunks/index-tags-BTMwrfgV.cjs.map +1 -0
- package/dist/chunks/{index-tags-DucKMQr_.js → index-tags-C04JP8g4.js} +3 -3
- package/dist/chunks/index-tags-C04JP8g4.js.map +1 -0
- package/dist/chunks/player-C-TwEEy6.js +516 -0
- package/dist/chunks/player-C-TwEEy6.js.map +1 -0
- package/dist/chunks/player-PS6_FzNw.cjs +525 -0
- package/dist/chunks/player-PS6_FzNw.cjs.map +1 -0
- package/dist/components/a11y.cjs +1 -1
- package/dist/components/a11y.d.cts +2 -2
- package/dist/components/a11y.d.ts +2 -2
- package/dist/components/a11y.js +1 -1
- package/dist/components/angular.cjs +2 -2
- package/dist/components/angular.cjs.map +1 -1
- package/dist/components/angular.d.cts +5 -36
- package/dist/components/angular.d.ts +5 -36
- package/dist/components/angular.js +2 -2
- package/dist/components/angular.js.map +1 -1
- package/dist/components/effects.cjs +13 -522
- package/dist/components/effects.cjs.map +1 -1
- package/dist/components/effects.js +5 -513
- package/dist/components/effects.js.map +1 -1
- package/dist/components/fx-3d.cjs +2 -2
- package/dist/components/fx-3d.cjs.map +1 -1
- package/dist/components/fx-3d.d.cts +2 -2
- package/dist/components/fx-3d.d.ts +2 -2
- package/dist/components/fx-3d.js +2 -2
- package/dist/components/fx-3d.js.map +1 -1
- package/dist/components/fx-focus.cjs +125 -0
- package/dist/components/fx-focus.cjs.map +1 -0
- package/dist/components/fx-focus.d.cts +65 -0
- package/dist/components/fx-focus.d.ts +65 -0
- package/dist/components/fx-focus.js +122 -0
- package/dist/components/fx-focus.js.map +1 -0
- package/dist/components/fx-gpu.cjs +2 -2
- package/dist/components/fx-gpu.d.cts +2 -2
- package/dist/components/fx-gpu.d.ts +2 -2
- package/dist/components/fx-gpu.js +1 -1
- package/dist/components/fx-light.cjs +2 -2
- package/dist/components/fx-light.cjs.map +1 -1
- package/dist/components/fx-light.d.cts +2 -2
- package/dist/components/fx-light.d.ts +2 -2
- package/dist/components/fx-light.js +2 -2
- package/dist/components/fx-light.js.map +1 -1
- package/dist/components/fx-morph.cjs +2 -2
- package/dist/components/fx-morph.cjs.map +1 -1
- package/dist/components/fx-morph.d.cts +2 -2
- package/dist/components/fx-morph.d.ts +2 -2
- package/dist/components/fx-morph.js +2 -2
- package/dist/components/fx-morph.js.map +1 -1
- package/dist/components/fx-physics.cjs +2 -2
- package/dist/components/fx-physics.cjs.map +1 -1
- package/dist/components/fx-physics.d.cts +2 -2
- package/dist/components/fx-physics.d.ts +2 -2
- package/dist/components/fx-physics.js +2 -2
- package/dist/components/fx-physics.js.map +1 -1
- package/dist/components/fx-text.cjs +2 -2
- package/dist/components/fx-text.cjs.map +1 -1
- package/dist/components/fx-text.d.cts +2 -2
- package/dist/components/fx-text.d.ts +2 -2
- package/dist/components/fx-text.js +2 -2
- package/dist/components/fx-text.js.map +1 -1
- package/dist/components/fx-transitions.cjs +2 -2
- package/dist/components/fx-transitions.cjs.map +1 -1
- package/dist/components/fx-transitions.d.cts +2 -2
- package/dist/components/fx-transitions.d.ts +2 -2
- package/dist/components/fx-transitions.js +2 -2
- package/dist/components/fx-transitions.js.map +1 -1
- package/dist/components/fx-weather.cjs +2 -2
- package/dist/components/fx-weather.cjs.map +1 -1
- package/dist/components/fx-weather.d.cts +2 -2
- package/dist/components/fx-weather.d.ts +2 -2
- package/dist/components/fx-weather.js +2 -2
- package/dist/components/fx-weather.js.map +1 -1
- package/dist/components/fx2.cjs +37 -22
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +135 -14
- package/dist/components/fx2.d.ts +135 -14
- package/dist/components/fx2.js +25 -21
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/interaction.cjs +11 -94
- package/dist/components/interaction.cjs.map +1 -1
- package/dist/components/interaction.css +0 -1
- package/dist/components/interaction.d.cts +3 -21
- package/dist/components/interaction.d.ts +3 -21
- package/dist/components/interaction.js +12 -94
- package/dist/components/interaction.js.map +1 -1
- package/dist/components/jsx.d.cts +2 -2
- package/dist/components/jsx.d.ts +2 -2
- package/dist/components/lazy.cjs +1 -1
- package/dist/components/lazy.d.cts +2 -2
- package/dist/components/lazy.d.ts +2 -2
- package/dist/components/lazy.js +1 -1
- package/dist/components/lite.cjs +115 -256
- package/dist/components/lite.cjs.map +1 -1
- package/dist/components/lite.js +116 -255
- package/dist/components/lite.js.map +1 -1
- package/dist/components/marketplace.cjs +82 -0
- package/dist/components/marketplace.cjs.map +1 -0
- package/dist/components/marketplace.d.cts +108 -0
- package/dist/components/marketplace.d.ts +108 -0
- package/dist/components/marketplace.js +77 -0
- package/dist/components/marketplace.js.map +1 -0
- package/dist/components/perf.cjs +1 -1
- package/dist/components/perf.d.cts +2 -2
- package/dist/components/perf.d.ts +2 -2
- package/dist/components/perf.js +1 -1
- package/dist/components/react.cjs +2 -2
- package/dist/components/react.cjs.map +1 -1
- package/dist/components/react.js +2 -2
- package/dist/components/react.js.map +1 -1
- package/dist/components/solid.cjs +2 -2
- package/dist/components/solid.cjs.map +1 -1
- package/dist/components/solid.d.cts +4 -35
- package/dist/components/solid.d.ts +4 -35
- package/dist/components/solid.js +2 -2
- package/dist/components/solid.js.map +1 -1
- package/dist/components/svelte.cjs +2 -2
- package/dist/components/svelte.cjs.map +1 -1
- package/dist/components/svelte.d.cts +5 -36
- package/dist/components/svelte.d.ts +5 -36
- package/dist/components/svelte.js +2 -2
- package/dist/components/svelte.js.map +1 -1
- package/dist/components/ui.cjs +16 -74
- package/dist/components/ui.cjs.map +1 -1
- package/dist/components/ui.css +0 -1
- package/dist/components/ui.d.cts +3 -18
- package/dist/components/ui.d.ts +3 -18
- package/dist/components/ui.js +17 -74
- package/dist/components/ui.js.map +1 -1
- package/dist/components/vue.cjs +2 -2
- package/dist/components/vue.cjs.map +1 -1
- package/dist/components/vue.d.cts +5 -36
- package/dist/components/vue.d.ts +5 -36
- package/dist/components/vue.js +2 -2
- package/dist/components/vue.js.map +1 -1
- package/dist/components/widgets.cjs +622 -53
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +106 -2
- package/dist/components/widgets.d.ts +106 -2
- package/dist/components/widgets.js +615 -54
- package/dist/components/widgets.js.map +1 -1
- package/dist/components.cjs +1 -3
- package/dist/components.cjs.map +1 -1
- package/dist/components.css +0 -2
- package/dist/components.d.cts +6 -39
- package/dist/components.d.ts +6 -39
- package/dist/components.js +3 -3
- package/dist/components.umd.js +2 -2
- package/dist/components.umd.js.map +1 -1
- package/dist/widgets.umd.js +1 -1
- package/dist/widgets.umd.js.map +1 -1
- package/docs/ROADMAP.md +12 -12
- package/docs/accessibility.md +2 -2
- package/docs/components.md +41 -2
- package/docs/deprecations.md +4 -0
- package/docs/frameworks-ssr.md +4 -4
- package/docs/hybrid-apps.md +2 -2
- package/docs/upgrading-7.md +43 -0
- package/docs/windows-apps.md +1 -1
- package/package.json +133 -2
- package/dist/chunks/gpu-BBRLgEzM.cjs.map +0 -1
- package/dist/chunks/gpu-CsP2ZB3x.js.map +0 -1
- package/dist/chunks/index-tags-DucKMQr_.js.map +0 -1
- package/dist/chunks/index-tags-wv0R_vkO.cjs.map +0 -1
package/dist/components/ui.js
CHANGED
|
@@ -35,7 +35,7 @@ function place(floating, anchor, placement = 'top', gap = 8) {
|
|
|
35
35
|
let uid = 0;
|
|
36
36
|
const nextId = (prefix) => `${prefix}-${++uid}`;
|
|
37
37
|
|
|
38
|
-
var css$
|
|
38
|
+
var css$9 = "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}";
|
|
39
39
|
|
|
40
40
|
function defineTabs(tag = 'usa-tabs') {
|
|
41
41
|
adoptVariants();
|
|
@@ -138,10 +138,10 @@ function defineTabs(tag = 'usa-tabs') {
|
|
|
138
138
|
this.motion(p, [{ opacity: 0, transform: `translateX(${i > prev ? 16 : -16}px)` }, { opacity: 1, transform: 'none' }], { duration: 280, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' });
|
|
139
139
|
this.emit('change', { index: i });
|
|
140
140
|
}
|
|
141
|
-
}, { id: 'tabs', text: css$
|
|
141
|
+
}, { id: 'tabs', text: css$9 });
|
|
142
142
|
}
|
|
143
143
|
|
|
144
|
-
var css$
|
|
144
|
+
var css$8 = "usa-drawer,usa-bottom-sheet{position:fixed;z-index:1001;box-sizing:border-box;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;will-change:transform;outline:none}usa-drawer{top:0;bottom:0;left:0;width:min(86vw,360px);border-radius:0 var(--usa-radius,14px) var(--usa-radius,14px) 0;padding:20px}usa-drawer[side=\"right\"]{left:auto;right:0;border-radius:var(--usa-radius,14px) 0 0 var(--usa-radius,14px)}usa-drawer[side=\"top\"],usa-drawer[side=\"bottom\"]{left:0;right:0;width:auto;bottom:auto;max-height:80vh;border-radius:0 0 var(--usa-radius,14px) var(--usa-radius,14px);touch-action:pan-x}usa-drawer[side=\"bottom\"]{top:auto;bottom:0;border-radius:var(--usa-radius,14px) var(--usa-radius,14px) 0 0}usa-bottom-sheet{left:0;right:0;bottom:0;margin:0 auto;max-width:640px;border-radius:22px 22px 0 0;padding:8px 20px 24px;touch-action:none}usa-bottom-sheet .usa-sheet-handle{width:40px;height:5px;border-radius:3px;margin:4px auto 14px;background:color-mix(in srgb,currentColor 35%,transparent);cursor:grab}usa-drawer[hidden],usa-bottom-sheet[hidden]{display:none}.usa-panel-backdrop{position:fixed;inset:0;z-index:1000;background:rgb(0 0 0 / 0.45)}";
|
|
145
145
|
|
|
146
146
|
/** Shared machinery of `<usa-drawer>` and `<usa-bottom-sheet>`: backdrop, focus, Esc, drag-to-dismiss. */
|
|
147
147
|
function makePanel(Base, kind) {
|
|
@@ -298,7 +298,7 @@ function makePanel(Base, kind) {
|
|
|
298
298
|
}
|
|
299
299
|
function defineDrawer(tag = 'usa-drawer') {
|
|
300
300
|
adoptVariants();
|
|
301
|
-
return defineElement(tag, (Base) => makePanel(Base, 'drawer'), { id: 'sheet', text: css$
|
|
301
|
+
return defineElement(tag, (Base) => makePanel(Base, 'drawer'), { id: 'sheet', text: css$8 });
|
|
302
302
|
}
|
|
303
303
|
function defineBottomSheet(tag = 'usa-bottom-sheet') {
|
|
304
304
|
adoptVariants();
|
|
@@ -341,10 +341,10 @@ function defineBottomSheet(tag = 'usa-bottom-sheet') {
|
|
|
341
341
|
super.render(v);
|
|
342
342
|
}
|
|
343
343
|
};
|
|
344
|
-
}, { id: 'sheet', text: css$
|
|
344
|
+
}, { id: 'sheet', text: css$8 });
|
|
345
345
|
}
|
|
346
346
|
|
|
347
|
-
var css$
|
|
347
|
+
var css$7 = "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)}}";
|
|
348
348
|
|
|
349
349
|
function definePullRefresh(tag = 'usa-pull-refresh') {
|
|
350
350
|
adoptVariants();
|
|
@@ -443,10 +443,10 @@ function definePullRefresh(tag = 'usa-pull-refresh') {
|
|
|
443
443
|
Promise.resolve(fn(ev)).then(done, done);
|
|
444
444
|
});
|
|
445
445
|
}
|
|
446
|
-
}, { id: 'pull-refresh', text: css$
|
|
446
|
+
}, { id: 'pull-refresh', text: css$7 });
|
|
447
447
|
}
|
|
448
448
|
|
|
449
|
-
var css$
|
|
449
|
+
var css$6 = "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}}";
|
|
450
450
|
|
|
451
451
|
function defineFab(tag = 'usa-fab') {
|
|
452
452
|
adoptVariants();
|
|
@@ -532,10 +532,10 @@ function defineFab(tag = 'usa-fab') {
|
|
|
532
532
|
this.apply(true);
|
|
533
533
|
this.emit('toggle', { open: next });
|
|
534
534
|
}
|
|
535
|
-
}, { id: 'fab', text: css$
|
|
535
|
+
}, { id: 'fab', text: css$6 });
|
|
536
536
|
}
|
|
537
537
|
|
|
538
|
-
var css$
|
|
538
|
+
var css$5 = "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}}";
|
|
539
539
|
|
|
540
540
|
function defineNavbar(tag = 'usa-navbar') {
|
|
541
541
|
adoptVariants();
|
|
@@ -588,10 +588,10 @@ function defineNavbar(tag = 'usa-navbar') {
|
|
|
588
588
|
this.removeAttribute('data-hidden');
|
|
589
589
|
this.emit('show');
|
|
590
590
|
}
|
|
591
|
-
}, { id: 'navbar', text: css$
|
|
591
|
+
}, { id: 'navbar', text: css$5 });
|
|
592
592
|
}
|
|
593
593
|
|
|
594
|
-
var css$
|
|
594
|
+
var css$4 = "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}}";
|
|
595
595
|
|
|
596
596
|
function defineSlider(tag = 'usa-slider') {
|
|
597
597
|
adoptVariants();
|
|
@@ -712,10 +712,10 @@ function defineSlider(tag = 'usa-slider') {
|
|
|
712
712
|
}
|
|
713
713
|
UsaSlider.formAssociated = true;
|
|
714
714
|
return UsaSlider;
|
|
715
|
-
}, { id: 'slider', text: css$
|
|
715
|
+
}, { id: 'slider', text: css$4 });
|
|
716
716
|
}
|
|
717
717
|
|
|
718
|
-
var css$
|
|
718
|
+
var css$3 = "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}}";
|
|
719
719
|
|
|
720
720
|
function defineRating(tag = 'usa-rating') {
|
|
721
721
|
adoptVariants();
|
|
@@ -800,63 +800,7 @@ function defineRating(tag = 'usa-rating') {
|
|
|
800
800
|
}
|
|
801
801
|
UsaRating.formAssociated = true;
|
|
802
802
|
return UsaRating;
|
|
803
|
-
}, { id: 'rating', text: css$
|
|
804
|
-
}
|
|
805
|
-
|
|
806
|
-
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}";
|
|
807
|
-
|
|
808
|
-
function defineTooltip(tag = 'usa-tooltip') {
|
|
809
|
-
adoptVariants();
|
|
810
|
-
return defineElement(tag, (Base) => class UsaTooltip extends Base {
|
|
811
|
-
constructor() {
|
|
812
|
-
super(...arguments);
|
|
813
|
-
this._tip = null;
|
|
814
|
-
}
|
|
815
|
-
static get observedAttributes() {
|
|
816
|
-
return ['text'];
|
|
817
|
-
}
|
|
818
|
-
mount() {
|
|
819
|
-
const trigger = this.firstElementChild || this;
|
|
820
|
-
const tip = document.createElement('span');
|
|
821
|
-
tip.className = 'usa-tooltip-bubble usa-surface';
|
|
822
|
-
tip.setAttribute('role', 'tooltip');
|
|
823
|
-
tip.id = nextId('usa-tip');
|
|
824
|
-
tip.textContent = this.str('text');
|
|
825
|
-
tip.hidden = true;
|
|
826
|
-
this.append(tip);
|
|
827
|
-
this._tip = tip;
|
|
828
|
-
trigger.setAttribute('aria-describedby', tip.id);
|
|
829
|
-
const later = () => {
|
|
830
|
-
clearTimeout(this._t);
|
|
831
|
-
this._t = setTimeout(() => this.show(), this.num('delay', 300));
|
|
832
|
-
};
|
|
833
|
-
this.listen(this, 'pointerenter', later);
|
|
834
|
-
this.listen(this, 'pointerleave', () => this.hide());
|
|
835
|
-
this.listen(this, 'focusin', () => this.show());
|
|
836
|
-
this.listen(this, 'focusout', () => this.hide());
|
|
837
|
-
this.listen(document, 'keydown', (e) => e.key === 'Escape' && this.hide());
|
|
838
|
-
this.onCleanup(() => {
|
|
839
|
-
clearTimeout(this._t);
|
|
840
|
-
tip.remove();
|
|
841
|
-
trigger.removeAttribute('aria-describedby');
|
|
842
|
-
});
|
|
843
|
-
}
|
|
844
|
-
show() {
|
|
845
|
-
const tip = this._tip;
|
|
846
|
-
if (!tip || !tip.hidden || !this.str('text'))
|
|
847
|
-
return;
|
|
848
|
-
clearTimeout(this._t);
|
|
849
|
-
tip.hidden = false;
|
|
850
|
-
const p = place(tip, this.firstElementChild || this, this.str('placement', 'top'));
|
|
851
|
-
const d = { top: [0, 6], bottom: [0, -6], left: [6, 0], right: [-6, 0] }[p];
|
|
852
|
-
this.motion(tip, this.reduced ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 0, transform: `translate(${d[0]}px, ${d[1]}px) scale(0.85)` }, { opacity: 1, transform: 'none' }], this.reduced ? { duration: 120 } : springEasing('stiff'));
|
|
853
|
-
}
|
|
854
|
-
hide() {
|
|
855
|
-
clearTimeout(this._t);
|
|
856
|
-
if (this._tip)
|
|
857
|
-
this._tip.hidden = true;
|
|
858
|
-
}
|
|
859
|
-
}, { id: 'tooltip', text: css$3 });
|
|
803
|
+
}, { id: 'rating', text: css$3 });
|
|
860
804
|
}
|
|
861
805
|
|
|
862
806
|
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}";
|
|
@@ -1010,7 +954,7 @@ function defineAvatarStack(tag = 'usa-avatar-stack') {
|
|
|
1010
954
|
* motionary/components/ui — animated UI components + style variants (v2.6).
|
|
1011
955
|
* `<usa-tabs>`, `<usa-drawer>`, `<usa-bottom-sheet>`, `<usa-pull-refresh>`,
|
|
1012
956
|
* `<usa-fab>`, `<usa-navbar>`, `<usa-slider>`, `<usa-rating>`,
|
|
1013
|
-
* `<usa-
|
|
957
|
+
* `<usa-popover>`, `<usa-badge>`, `<usa-avatar-stack>`,
|
|
1014
958
|
* and `variant="minimal | neon | glass | brutalist | fluent | material"`
|
|
1015
959
|
* design tokens (`setVariant()`, `VARIANTS`).
|
|
1016
960
|
*/
|
|
@@ -1024,11 +968,10 @@ function defineUiComponents() {
|
|
|
1024
968
|
defineNavbar();
|
|
1025
969
|
defineSlider();
|
|
1026
970
|
defineRating();
|
|
1027
|
-
defineTooltip();
|
|
1028
971
|
definePopover();
|
|
1029
972
|
defineBadge();
|
|
1030
973
|
defineAvatarStack();
|
|
1031
974
|
}
|
|
1032
975
|
|
|
1033
|
-
export { adoptVariants, defineAvatarStack, defineBadge, defineBottomSheet, defineDrawer, defineFab, defineNavbar, definePopover, definePullRefresh, defineRating, defineSlider, defineTabs,
|
|
976
|
+
export { adoptVariants, defineAvatarStack, defineBadge, defineBottomSheet, defineDrawer, defineFab, defineNavbar, definePopover, definePullRefresh, defineRating, defineSlider, defineTabs, defineUiComponents };
|
|
1034
977
|
//# sourceMappingURL=ui.js.map
|