motionary 0.0.0-stage → 6.2.0

package/dist/components/feedback.js

@@ -0,0 +1,433 @@
+import { x as defineElement, z as kindOf, y as EASE_OUT, k as clamp, F as FLUENT_DECELERATE, E as EASE_SPRING } from '../chunks/base-C_3cAoRz.js';
+
+var css$4 = "usa-spinner{--usa-spinner-size:32px;--usa-spinner-color:currentColor;position:relative;display:inline-block;vertical-align:middle;flex:none;width:var(--usa-spinner-size);height:var(--usa-spinner-size);color:var(--usa-spinner-color)}usa-spinner i{position:absolute;display:block}usa-spinner[paused] *,usa-spinner[paused] *::after{animation-play-state:paused !important}usa-spinner svg{width:100%;height:100%;animation:usa-spin 2s linear infinite;overflow:visible}usa-spinner svg circle{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:0.5 100;stroke-dashoffset:0;animation:usa-ring-arc 1.6s ease-in-out infinite}@keyframes usa-spin{to{transform:rotate(360deg)}}@keyframes usa-ring-arc{0%{stroke-dasharray:0.5 100;stroke-dashoffset:0}50%{stroke-dasharray:62 100;stroke-dashoffset:-20}100%{stroke-dasharray:0.5 100;stroke-dashoffset:-99}}usa-spinner[data-kind=\"windows\"] i{inset:0;opacity:0;animation:usa-orbit 5.5s infinite}usa-spinner[data-kind=\"windows\"] i::after{content:\"\";position:absolute;left:50%;top:0;width:12%;height:12%;margin-left:-6%;border-radius:50%;background:currentColor}usa-spinner[data-kind=\"windows\"] i:nth-child(2){animation-delay:240ms;--n:1}usa-spinner[data-kind=\"windows\"] i:nth-child(3){animation-delay:480ms;--n:2}usa-spinner[data-kind=\"windows\"] i:nth-child(4){animation-delay:720ms;--n:3}usa-spinner[data-kind=\"windows\"] i:nth-child(5){animation-delay:960ms;--n:4}@keyframes usa-orbit{0%{transform:rotate(225deg);opacity:1;animation-timing-function:ease-out}7%{transform:rotate(345deg);animation-timing-function:linear}30%{transform:rotate(455deg);animation-timing-function:ease-in-out}39%{transform:rotate(690deg);animation-timing-function:linear}70%{transform:rotate(815deg);opacity:1;animation-timing-function:ease-out}75%{transform:rotate(945deg);animation-timing-function:ease-out}76%,100%{transform:rotate(945deg);opacity:0}}usa-spinner[data-kind=\"ring\"] i{inset:0;border-radius:50%;border:calc(var(--usa-spinner-size) / 9) solid color-mix(in srgb,currentColor 20%,transparent);border-top-color:currentColor;animation:usa-spin 0.8s linear infinite}usa-spinner[data-kind=\"dots\"]{display:inline-flex;align-items:center;justify-content:space-between;height:calc(var(--usa-spinner-size) / 2.5)}usa-spinner[data-kind=\"dots\"] i{position:static;width:22%;aspect-ratio:1;border-radius:50%;background:currentColor;animation:usa-dot 1.2s ease-in-out infinite}usa-spinner[data-kind=\"dots\"] i:nth-child(2){animation-delay:0.15s}usa-spinner[data-kind=\"dots\"] i:nth-child(3){animation-delay:0.3s}@keyframes usa-dot{0%,60%,100%{transform:translateY(0);opacity:0.35}30%{transform:translateY(-70%);opacity:1}}usa-spinner[data-kind=\"pulse\"] i{inset:0;border-radius:50%;background:currentColor;opacity:0;animation:usa-pulse 1.6s cubic-bezier(0.22,1,0.36,1) infinite}usa-spinner[data-kind=\"pulse\"] i:nth-child(2){animation-delay:0.8s}@keyframes usa-pulse{from{transform:scale(0.1);opacity:0.8}to{transform:scale(1);opacity:0}}usa-spinner[data-kind=\"bars\"]{display:inline-flex;align-items:center;justify-content:space-between}usa-spinner[data-kind=\"bars\"] i{position:static;width:16%;height:100%;border-radius:2px;background:currentColor;transform:scaleY(0.35);animation:usa-bar 1s ease-in-out infinite}usa-spinner[data-kind=\"bars\"] i:nth-child(2){animation-delay:0.12s}usa-spinner[data-kind=\"bars\"] i:nth-child(3){animation-delay:0.24s}usa-spinner[data-kind=\"bars\"] i:nth-child(4){animation-delay:0.36s}@keyframes usa-bar{0%,100%{transform:scaleY(0.35)}40%{transform:scaleY(1)}}@media (prefers-reduced-motion:reduce){usa-spinner svg,usa-spinner i,usa-spinner i::after{animation:usa-calm 2.4s ease-in-out infinite !important}usa-spinner[data-kind=\"windows\"] i{transform:rotate(calc(var(--n,0) * 72deg))}usa-spinner svg circle{animation:none;stroke-dasharray:30 100}}@keyframes usa-calm{0%,100%{opacity:1}50%{opacity:0.4}}";
+
+const SPINNER_VARIANTS = ['fluent', 'windows', 'ring', 'dots', 'pulse', 'bars'];
+function markup(variant) {
+    switch (variant) {
+        case 'windows':
+            return '<i></i><i></i><i></i><i></i><i></i>';
+        case 'dots':
+            return '<i></i><i></i><i></i>';
+        case 'bars':
+            return '<i></i><i></i><i></i><i></i>';
+        case 'pulse':
+            return '<i></i><i></i>';
+        case 'ring':
+            return '<i></i>';
+        default:
+            return '<svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="7" pathLength="100"/></svg>';
+    }
+}
+function defineSpinner(tag = 'usa-spinner') {
+    return defineElement(tag, (Base) => class UsaSpinner extends Base {
+        static get observedAttributes() {
+            return ['kind', 'size', 'label'];
+        }
+        /** The spinner kind (`kind` attribute). */
+        get kind() {
+            return kindOf(this, SPINNER_VARIANTS, 'fluent');
+        }
+        set kind(v) {
+            this.setAttribute('kind', v);
+        }
+        mount() {
+            const variant = this.kind;
+            if (this.getAttribute('data-kind') !== variant) {
+                this.innerHTML = markup(variant);
+                this.setAttribute('data-kind', variant);
+            }
+            const size = this.getAttribute('size');
+            if (size)
+                this.style.setProperty('--usa-spinner-size', `${Number(size)}px`);
+            else
+                this.style.removeProperty('--usa-spinner-size');
+            this.setAttribute('role', 'progressbar');
+            if (!this.hasAttribute('aria-label') || this.hasAttribute('label'))
+                this.setAttribute('aria-label', this.str('label', 'Loading'));
+        }
+    }, { id: 'spinner', text: css$4 });
+}
+
+var css$3 = "usa-skeleton{display:block;--usa-skeleton-base:color-mix(in srgb,currentColor 10%,transparent);--usa-skeleton-shine:color-mix(in srgb,currentColor 9%,transparent);--usa-skeleton-radius:8px}usa-skeleton[loading]>:not(.usa-skeleton-ph){display:none !important}usa-skeleton .usa-skeleton-ph{display:flex;gap:14px;align-items:flex-start}usa-skeleton .usa-bone-lines{flex:1;display:grid;gap:10px;min-width:0}usa-skeleton .usa-bone{position:relative;display:block;overflow:hidden;height:0.9em;border-radius:var(--usa-skeleton-radius);background:var(--usa-skeleton-base)}usa-skeleton .usa-bone-last{width:62%}usa-skeleton .usa-bone-block{height:120px}usa-skeleton .usa-bone-circle{border-radius:50%;flex:none}usa-skeleton .usa-bone-avatar{width:44px;height:44px}usa-skeleton .usa-bone::after{content:\"\";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--usa-skeleton-shine),transparent);animation:usa-skeleton 1.5s ease-in-out infinite}@keyframes usa-skeleton{to{transform:translateX(100%)}}@media (prefers-reduced-motion:reduce){usa-skeleton .usa-bone::after{animation:none}}";
+
+function defineSkeleton(tag = 'usa-skeleton') {
+    return defineElement(tag, (Base) => class UsaSkeleton extends Base {
+        constructor() {
+            super(...arguments);
+            this._ph = null;
+        }
+        static get observedAttributes() {
+            return ['loading', 'lines', 'width', 'height', 'circle', 'avatar', 'radius'];
+        }
+        get loading() {
+            return this.hasAttribute('loading');
+        }
+        set loading(v) {
+            this.toggleAttribute('loading', !!v);
+        }
+        changed(name) {
+            if (name === 'loading')
+                this.sync(true);
+            else {
+                this._ph?.remove();
+                this._ph = null;
+                this.sync(false);
+            }
+        }
+        mount() {
+            this.sync(false);
+        }
+        build() {
+            const ph = document.createElement('div');
+            ph.className = 'usa-skeleton-ph';
+            ph.setAttribute('aria-hidden', 'true');
+            const bone = (cls = '') => {
+                const b = document.createElement('span');
+                b.className = `usa-bone ${cls}`.trim();
+                return b;
+            };
+            const radius = this.getAttribute('radius');
+            if (radius)
+                this.style.setProperty('--usa-skeleton-radius', radius);
+            if (this.flag('circle') || this.hasAttribute('width') || this.hasAttribute('height')) {
+                const b = bone(this.flag('circle') ? 'usa-bone-circle' : 'usa-bone-block');
+                b.style.width = this.str('width', this.flag('circle') ? this.str('height', '48px') : '100%');
+                b.style.height = this.str('height', this.flag('circle') ? b.style.width : '120px');
+                ph.append(b);
+            }
+            else {
+                if (this.flag('avatar'))
+                    ph.append(bone('usa-bone-circle usa-bone-avatar'));
+                const col = document.createElement('div');
+                col.className = 'usa-bone-lines';
+                const n = Math.max(1, Math.min(20, this.num('lines', 3)));
+                for (let i = 0; i < n; i++)
+                    col.append(bone(i === n - 1 && n > 1 ? 'usa-bone-last' : ''));
+                ph.append(col);
+            }
+            return ph;
+        }
+        sync(animate) {
+            const loading = this.loading;
+            this.setAttribute('aria-busy', String(loading));
+            if (loading) {
+                if (!this._ph) {
+                    this._ph = this.build();
+                    this.prepend(this._ph);
+                }
+                return;
+            }
+            if (this._ph) {
+                this._ph.remove();
+                this._ph = null;
+            }
+            if (animate && !this.reduced) {
+                for (const kid of Array.from(this.children)) {
+                    this.motion(kid, [{ opacity: 0, transform: 'translateY(4px)' }, { opacity: 1, transform: 'none' }], { duration: 360, easing: EASE_OUT });
+                }
+            }
+            this.emit('loaded');
+        }
+    }, { id: 'skeleton', text: css$3 });
+}
+
+var css$2 = "usa-progress{--usa-progress-color:var(--usa-accent,#7c5cff);--usa-progress-track:color-mix(in srgb,currentColor 14%,transparent);position:relative;display:block;height:var(--usa-progress-height,4px);border-radius:999px;overflow:hidden;background:var(--usa-progress-track);contain:paint}usa-progress .usa-progress-bar{position:absolute;inset:0;border-radius:inherit;background:var(--usa-progress-color);transform:scaleX(0);transform-origin:0 50%;transition:transform 0.45s cubic-bezier(0.22,1,0.36,1)}usa-progress .usa-progress-bar2{display:none}usa-progress[data-indeterminate] .usa-progress-bar{right:auto;width:40%;transform:translateX(-100%);transition:none;animation:usa-indet 2s cubic-bezier(0.4,0,0.6,1) infinite}usa-progress[data-indeterminate] .usa-progress-bar2{display:block;width:60%;animation:usa-indet2 2s cubic-bezier(0.4,0,0.6,1) 1s infinite}usa-progress[state=\"paused\"]{--usa-progress-color:#c19c00}usa-progress[state=\"error\"]{--usa-progress-color:#d13438}usa-progress[state=\"paused\"] .usa-progress-bar,usa-progress[state=\"error\"] .usa-progress-bar{animation-play-state:paused}@keyframes usa-indet{from{transform:translateX(-100%)}to{transform:translateX(250%)}}@keyframes usa-indet2{from{transform:translateX(-100%)}to{transform:translateX(167%)}}@media (prefers-reduced-motion:reduce){usa-progress .usa-progress-bar{transition:none}usa-progress[data-indeterminate] .usa-progress-bar{width:100%;transform:none;animation:usa-calm-bar 2.4s ease-in-out infinite}usa-progress[data-indeterminate] .usa-progress-bar2{display:none}}@keyframes usa-calm-bar{0%,100%{opacity:1}50%{opacity:0.4}}";
+
+function defineProgress(tag = 'usa-progress') {
+    return defineElement(tag, (Base) => class UsaProgress extends Base {
+        constructor() {
+            super(...arguments);
+            this._fill = null;
+        }
+        static get observedAttributes() {
+            return ['value', 'max', 'indeterminate', 'label'];
+        }
+        get value() {
+            const v = this.getAttribute('value');
+            return v === null || v === '' || Number.isNaN(Number(v)) ? null : Number(v);
+        }
+        set value(v) {
+            if (v === null || v === undefined)
+                this.removeAttribute('value');
+            else
+                this.setAttribute('value', String(v));
+        }
+        get max() {
+            const m = this.num('max', 100);
+            return m > 0 ? m : 100;
+        }
+        set max(v) {
+            this.setAttribute('max', String(v));
+        }
+        get ratio() {
+            const v = this.value;
+            return this.hasAttribute('indeterminate') || v === null ? null : clamp(v / this.max, 0, 1);
+        }
+        changed() {
+            this.sync();
+        }
+        mount() {
+            if (!this._fill) {
+                this.innerHTML = '<span class="usa-progress-bar"></span><span class="usa-progress-bar usa-progress-bar2"></span>';
+                this._fill = this.firstElementChild;
+            }
+            this.setAttribute('role', 'progressbar');
+            this.sync();
+        }
+        sync() {
+            const ratio = this.ratio;
+            const label = this.getAttribute('label');
+            if (label)
+                this.setAttribute('aria-label', label);
+            this.toggleAttribute('data-indeterminate', ratio === null);
+            if (ratio === null) {
+                this.removeAttribute('aria-valuenow');
+                if (this._fill)
+                    this._fill.style.transform = '';
+                return;
+            }
+            this.setAttribute('aria-valuemin', '0');
+            this.setAttribute('aria-valuemax', String(this.max));
+            this.setAttribute('aria-valuenow', String(this.value));
+            if (this._fill)
+                this._fill.style.transform = `scaleX(${ratio})`;
+            if (ratio === 1)
+                this.emit('complete');
+        }
+    }, { id: 'progress', text: css$2 });
+}
+
+var css$1 = "usa-toaster{position:fixed;z-index:2147483000;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 32px));pointer-events:none}usa-toaster[position^=\"top\"]{bottom:auto;top:16px}usa-toaster[position$=\"left\"]{right:auto;left:16px}usa-toaster[position$=\"center\"]{right:auto;left:50%;translate:-50% 0}usa-toaster .usa-toast{--usa-toast-accent:#0078d4;pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:12px 12px 12px 14px;border-radius:10px;background:var(--usa-toast-bg,color-mix(in srgb,Canvas 92%,transparent));color:var(--usa-toast-fg,CanvasText);border:1px solid color-mix(in srgb,CanvasText 12%,transparent);border-left:3px solid var(--usa-toast-accent);box-shadow:0 8px 28px -8px rgb(0 0 0 / 0.35);font:inherit;font-size:14px;line-height:1.4;-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4)}usa-toaster .usa-toast[data-type=\"success\"]{--usa-toast-accent:#0f9d58}usa-toaster .usa-toast[data-type=\"warning\"]{--usa-toast-accent:#c19c00}usa-toaster .usa-toast[data-type=\"error\"]{--usa-toast-accent:#d13438}usa-toaster .usa-toast-icon{flex:none;width:20px;height:20px;fill:none;stroke:var(--usa-toast-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}usa-toaster .usa-toast-msg{flex:1;min-width:0;padding-top:1px;overflow-wrap:anywhere}usa-toaster .usa-toast-action,usa-toaster .usa-toast-close{flex:none;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;border-radius:6px;padding:2px 6px}usa-toaster .usa-toast-action{color:var(--usa-toast-accent);font-weight:600}usa-toaster .usa-toast-close{opacity:0.6;line-height:0;padding:3px}usa-toaster .usa-toast-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}usa-toaster .usa-toast-action:hover,usa-toaster .usa-toast-close:hover{background:color-mix(in srgb,currentColor 10%,transparent);opacity:1}";
+
+const ICONS = {
+    info: '<path d="M12 8h.01M11 12h1v5h1"/>',
+    success: '<path d="m8 12.5 3 3 5-6"/>',
+    warning: '<path d="M12 8v5M12 16.5h.01"/>',
+    error: '<path d="m9 9 6 6M15 9l-6 6"/>',
+};
+function defineToaster(tag = 'usa-toaster') {
+    return defineElement(tag, (Base) => class UsaToaster extends Base {
+        static get observedAttributes() {
+            return ['label'];
+        }
+        mount() {
+            this.setAttribute('role', 'region');
+            this.setAttribute('aria-label', this.str('label', 'Notifications'));
+        }
+        flip(mutate) {
+            const kids = Array.from(this.children);
+            const before = new Map(kids.map((k) => [k, k.getBoundingClientRect().top]));
+            mutate();
+            if (this.reduced)
+                return;
+            for (const k of Array.from(this.children)) {
+                const top = before.get(k);
+                if (top === undefined || k.hasAttribute('data-leaving'))
+                    continue;
+                const dy = top - k.getBoundingClientRect().top;
+                if (Math.abs(dy) > 0.5)
+                    this.motion(k, [{ transform: `translateY(${dy}px)` }, { transform: 'none' }], { duration: 320, easing: EASE_OUT, composite: 'add' });
+            }
+        }
+        enterFrames() {
+            if (this.reduced)
+                return [{ opacity: 0 }, { opacity: 1 }];
+            const pos = this.str('position', 'bottom-right');
+            const x = pos.endsWith('right') ? '110%' : pos.endsWith('left') ? '-110%' : '0';
+            const y = pos.endsWith('center') ? (pos.startsWith('top') ? '-120%' : '120%') : '0';
+            return [{ opacity: 0, transform: `translate(${x}, ${y}) scale(0.96)` }, { opacity: 1, transform: 'none' }];
+        }
+        show(message, options = {}) {
+            const type = options.type || 'info';
+            const el = document.createElement('div');
+            el.className = 'usa-toast';
+            el.setAttribute('data-type', type);
+            el.setAttribute('role', type === 'error' ? 'alert' : 'status');
+            el.innerHTML = `<svg class="usa-toast-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/>${ICONS[type] || ICONS.info}</svg><div class="usa-toast-msg"></div>`;
+            el.querySelector('.usa-toast-msg').textContent = message;
+            let closed = null;
+            let timer = 0;
+            const close = () => {
+                if (closed)
+                    return closed;
+                clearTimeout(timer);
+                el.setAttribute('data-leaving', '');
+                const frames = this.enterFrames().reverse();
+                const a = el.isConnected ? this.motion(el, frames, { duration: 220, easing: 'cubic-bezier(0.7, 0, 0.84, 0)', fill: 'forwards' }) : null;
+                closed = new Promise((resolve) => {
+                    const done = () => {
+                        this.flip(() => el.remove());
+                        resolve();
+                    };
+                    if (a)
+                        a.onfinish = done;
+                    else
+                        done();
+                });
+                return closed;
+            };
+            if (options.action) {
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.className = 'usa-toast-action';
+                btn.textContent = options.action.label;
+                btn.addEventListener('click', () => {
+                    options.action.onClick();
+                    close();
+                });
+                el.append(btn);
+            }
+            if (options.dismissible !== false) {
+                const x = document.createElement('button');
+                x.type = 'button';
+                x.className = 'usa-toast-close';
+                x.setAttribute('aria-label', 'Close');
+                x.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7 7 10 10M17 7 7 17"/></svg>';
+                x.addEventListener('click', () => close());
+                el.append(x);
+            }
+            const duration = options.duration ?? 4000;
+            const arm = () => {
+                clearTimeout(timer);
+                if (duration > 0)
+                    timer = setTimeout(close, duration);
+            };
+            const hold = () => clearTimeout(timer);
+            el.addEventListener('pointerenter', hold);
+            el.addEventListener('pointerleave', arm);
+            el.addEventListener('focusin', hold);
+            el.addEventListener('focusout', arm);
+            const top = this.str('position', 'bottom-right').startsWith('top');
+            this.flip(() => (top ? this.prepend(el) : this.append(el)));
+            this.motion(el, this.enterFrames(), { duration: 420, easing: FLUENT_DECELERATE });
+            arm();
+            const live = Array.from(this.querySelectorAll('.usa-toast:not([data-leaving])'));
+            const max = Math.max(1, this.num('max', 4));
+            const extra = live.length - max;
+            if (extra > 0)
+                (top ? live.slice(-extra) : live.slice(0, extra)).forEach((t) => t._close?.());
+            el._close = close;
+            this.emit('toast', { element: el, message, type });
+            return { element: el, close };
+        }
+        clear() {
+            this.querySelectorAll('.usa-toast').forEach((t) => t._close?.());
+        }
+    }, { id: 'toast', text: css$1 });
+}
+/**
+ * Show a toast. Defines `<usa-toaster>` and adds one to `<body>` if the
+ * page has none. Returns a handle with `close()`. No-op on the server.
+ *
+ * ```js
+ * toast('Saved', { type: 'success' });
+ * ```
+ */
+function toast(message, options = {}) {
+    if (typeof document === 'undefined' || !defineToaster())
+        return null;
+    let host = typeof options.toaster === 'string' ? document.querySelector(options.toaster) : options.toaster || document.querySelector('usa-toaster');
+    if (!host) {
+        host = document.createElement('usa-toaster');
+        document.body.append(host);
+    }
+    return host.show(message, options);
+}
+
+var css = "usa-check{--usa-check-size:56px;--usa-check-color:#0f9d58;display:inline-block;width:var(--usa-check-size);height:var(--usa-check-size);vertical-align:middle}usa-check[data-kind=\"error\"]{--usa-check-color:#d13438}usa-check[data-kind=\"warning\"]{--usa-check-color:#c19c00}usa-check svg{width:100%;height:100%;overflow:visible}usa-check circle,usa-check path{fill:none;stroke:var(--usa-check-color);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1}usa-check[data-state=\"idle\"] circle,usa-check[data-state=\"idle\"] path{stroke-dashoffset:1}usa-check[data-state=\"done\"] circle,usa-check[data-state=\"done\"] path{stroke-dashoffset:0}";
+
+const PATHS = {
+    success: 'M15 27 l7 7 l14 -15',
+    error: 'M18 18 L34 34 M34 18 L18 34',
+    warning: 'M26 15 V30 M26 37 V37.5',
+};
+function defineCheck(tag = 'usa-check') {
+    return defineElement(tag, (Base) => class UsaCheck extends Base {
+        constructor() {
+            super(...arguments);
+            this._anims = [];
+        }
+        static get observedAttributes() {
+            return ['kind', 'size', 'label'];
+        }
+        mount() {
+            const variant = kindOf(this, PATHS, 'success');
+            this.innerHTML = `<svg viewBox="0 0 52 52" aria-hidden="true"><circle class="usa-check-circle" cx="26" cy="26" r="23" pathLength="1"/><path class="usa-check-mark" d="${PATHS[variant]}" pathLength="1"/></svg>`;
+            this.setAttribute('data-kind', variant);
+            const size = this.getAttribute('size');
+            if (size)
+                this.style.setProperty('--usa-check-size', `${Number(size)}px`);
+            const label = this.getAttribute('label');
+            if (label) {
+                this.setAttribute('role', 'img');
+                this.setAttribute('aria-label', label);
+            }
+            if (this.reduced) {
+                this.setAttribute('data-state', 'done');
+                return;
+            }
+            this.setAttribute('data-state', 'idle');
+            const start = this.str('start', 'view');
+            if (start === 'load')
+                this.play();
+            else if (start === 'view') {
+                let done = false;
+                this.inView((v) => v && !done && ((done = true), this.play()), { threshold: 0.5 });
+            }
+        }
+        unmount() {
+            this._anims.splice(0).forEach((a) => a.cancel());
+        }
+        reset() {
+            this._anims.splice(0).forEach((a) => a.cancel());
+            this.setAttribute('data-state', this.reduced ? 'done' : 'idle');
+        }
+        play() {
+            this.reset();
+            this.setAttribute('data-state', 'done');
+            const circle = this.querySelector('.usa-check-circle');
+            const mark = this.querySelector('.usa-check-mark');
+            const svg = this.querySelector('svg');
+            if (this.reduced || !circle || !mark || !svg) {
+                this.emit('complete');
+                return Promise.resolve();
+            }
+            const draw = [{ strokeDashoffset: 1 }, { strokeDashoffset: 0 }];
+            const anims = [
+                this.motion(circle, draw, { duration: 520, easing: EASE_OUT, fill: 'backwards' }),
+                this.motion(mark, draw, { duration: 340, delay: 420, easing: EASE_OUT, fill: 'backwards' }),
+                this.motion(svg, [{ transform: 'scale(1)' }, { transform: 'scale(1.12)' }, { transform: 'scale(1)' }], { duration: 420, delay: 640, easing: EASE_SPRING }),
+            ].filter((a) => !!a);
+            this._anims = anims;
+            return new Promise((resolve) => {
+                const last = anims[anims.length - 1];
+                const done = () => {
+                    this.emit('complete');
+                    resolve();
+                };
+                if (last)
+                    last.onfinish = done;
+                else
+                    done();
+            });
+        }
+    }, { id: 'check', text: css });
+}
+
+/**
+ * motionary/components/feedback — loading & feedback.
+ * `<usa-spinner>`, `<usa-skeleton>`, `<usa-progress>`, `<usa-toaster>` +
+ * `toast()`, `<usa-check>`.
+ */
+/** Register every component of this category under its default tag. */
+function defineFeedbackComponents() {
+    defineSpinner();
+    defineSkeleton();
+    defineProgress();
+    defineToaster();
+    defineCheck();
+}
+
+export { SPINNER_VARIANTS, defineCheck, defineFeedbackComponents, defineProgress, defineSkeleton, defineSpinner, defineToaster, toast };
+//# sourceMappingURL=feedback.js.map

package/dist/components/feedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.js","sources":["../../src/components/feedback/spinner.ts","../../src/components/feedback/skeleton.ts","../../src/components/feedback/progress.ts","../../src/components/feedback/toast.ts","../../src/components/feedback/check.ts","../../src/components/feedback/index.ts"],"sourcesContent":["import { kindOf, defineElement, type UsaElement } from '../base';\nimport css from './spinner.css?raw';\n\nexport const SPINNER_VARIANTS = ['fluent', 'windows', 'ring', 'dots', 'pulse', 'bars'] as const;\nexport type SpinnerVariant = (typeof SPINNER_VARIANTS)[number];\n\n/**\n * `<usa-spinner>` — indeterminate loading indicators, pure CSS animations\n * of `transform` / `opacity` (plus an SVG stroke for `fluent`).\n *\n * Kinds (`kind`): `fluent` (default — the WinUI / Windows 11\n * ProgressRing arc), `windows` (the Windows 10 boot \"orbiting dots\"),\n * `ring` (classic border spinner), `dots` (three bouncing dots / typing\n * indicator), `pulse` (expanding ripple), `bars` (equalizer).\n * Attributes: `size` (px, 32), `label` (accessible name, \"Loading\"),\n * `paused`. Colour follows `color` / `--usa-spinner-color`.\n * `role=\"progressbar\"` without a value (indeterminate). Reduced motion:\n * a slow opacity pulse instead of movement.\n */\nexport interface UsaSpinnerElement extends UsaElement {\n  /** Spinner kind (`kind` attribute). */\n  kind: SpinnerVariant;\n}\n\nfunction markup(variant: string): string {\n  switch (variant) {\n    case 'windows':\n      return '<i></i><i></i><i></i><i></i><i></i>';\n    case 'dots':\n      return '<i></i><i></i><i></i>';\n    case 'bars':\n      return '<i></i><i></i><i></i><i></i>';\n    case 'pulse':\n      return '<i></i><i></i>';\n    case 'ring':\n      return '<i></i>';\n    default:\n      return '<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"7\" pathLength=\"100\"/></svg>';\n  }\n}\n\nexport function defineSpinner(tag = 'usa-spinner'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaSpinner extends Base {\n        static get observedAttributes(): string[] {\n          return ['kind', 'size', 'label'];\n        }\n\n        /** The spinner kind (`kind` attribute). */\n        get kind(): SpinnerVariant {\n          return kindOf(this, SPINNER_VARIANTS, 'fluent') as SpinnerVariant;\n        }\n        set kind(v: SpinnerVariant) {\n          this.setAttribute('kind', v);\n        }\n\n\n        mount(): void {\n          const variant = this.kind;\n          if (this.getAttribute('data-kind') !== variant) {\n            this.innerHTML = markup(variant);\n            this.setAttribute('data-kind', variant);\n          }\n          const size = this.getAttribute('size');\n          if (size) this.style.setProperty('--usa-spinner-size', `${Number(size)}px`);\n          else this.style.removeProperty('--usa-spinner-size');\n          this.setAttribute('role', 'progressbar');\n          if (!this.hasAttribute('aria-label') || this.hasAttribute('label')) this.setAttribute('aria-label', this.str('label', 'Loading'));\n        }\n      },\n    { id: 'spinner', text: css }\n  );\n}\n","import { defineElement, EASE_OUT, type UsaElement } from '../base';\nimport css from './skeleton.css?raw';\n\n/**\n * `<usa-skeleton>` — shimmering placeholders while content loads. With\n * `loading`, it shows `lines` bars (or one block of `width` × `height`,\n * or a `circle`) and hides its children; remove `loading` and the real\n * content fades in.\n *\n * Attributes: `loading`, `lines` (3), `width`, `height` (CSS lengths),\n * `circle`, `radius`, `avatar` (circle + lines, like a list row).\n * `aria-busy` follows `loading`. Reduced motion: no shimmer sweep.\n */\nexport interface UsaSkeletonElement extends UsaElement {\n  loading: boolean;\n}\n\nexport function defineSkeleton(tag = 'usa-skeleton'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaSkeleton extends Base {\n        static get observedAttributes(): string[] {\n          return ['loading', 'lines', 'width', 'height', 'circle', 'avatar', 'radius'];\n        }\n\n        private _ph: HTMLElement | null = null;\n\n        get loading(): boolean {\n          return this.hasAttribute('loading');\n        }\n        set loading(v: boolean) {\n          this.toggleAttribute('loading', !!v);\n        }\n\n        changed(name: string): void {\n          if (name === 'loading') this.sync(true);\n          else {\n            this._ph?.remove();\n            this._ph = null;\n            this.sync(false);\n          }\n        }\n\n        mount(): void {\n          this.sync(false);\n        }\n\n        private build(): HTMLElement {\n          const ph = document.createElement('div');\n          ph.className = 'usa-skeleton-ph';\n          ph.setAttribute('aria-hidden', 'true');\n          const bone = (cls = '') => {\n            const b = document.createElement('span');\n            b.className = `usa-bone ${cls}`.trim();\n            return b;\n          };\n          const radius = this.getAttribute('radius');\n          if (radius) this.style.setProperty('--usa-skeleton-radius', radius);\n          if (this.flag('circle') || this.hasAttribute('width') || this.hasAttribute('height')) {\n            const b = bone(this.flag('circle') ? 'usa-bone-circle' : 'usa-bone-block');\n            b.style.width = this.str('width', this.flag('circle') ? this.str('height', '48px') : '100%');\n            b.style.height = this.str('height', this.flag('circle') ? b.style.width : '120px');\n            ph.append(b);\n          } else {\n            if (this.flag('avatar')) ph.append(bone('usa-bone-circle usa-bone-avatar'));\n            const col = document.createElement('div');\n            col.className = 'usa-bone-lines';\n            const n = Math.max(1, Math.min(20, this.num('lines', 3)));\n            for (let i = 0; i < n; i++) col.append(bone(i === n - 1 && n > 1 ? 'usa-bone-last' : ''));\n            ph.append(col);\n          }\n          return ph;\n        }\n\n        private sync(animate: boolean): void {\n          const loading = this.loading;\n          this.setAttribute('aria-busy', String(loading));\n          if (loading) {\n            if (!this._ph) {\n              this._ph = this.build();\n              this.prepend(this._ph);\n            }\n            return;\n          }\n          if (this._ph) {\n            this._ph.remove();\n            this._ph = null;\n          }\n          if (animate && !this.reduced) {\n            for (const kid of Array.from(this.children)) {\n              this.motion(kid, [{ opacity: 0, transform: 'translateY(4px)' }, { opacity: 1, transform: 'none' }], { duration: 360, easing: EASE_OUT });\n            }\n          }\n          this.emit('loaded');\n        }\n      },\n    { id: 'skeleton', text: css }\n  );\n}\n","import { defineElement, clamp, type UsaElement } from '../base';\nimport css from './progress.css?raw';\n\n/**\n * `<usa-progress>` — a linear progress bar. Determinate (`value` / `max`)\n * bars glide between values with `transform: scaleX()`; without a value,\n * or with `indeterminate`, it shows the Windows Fluent indeterminate\n * animation (two sliding segments).\n *\n * Attributes: `value`, `max` (100), `indeterminate`, `state`\n * (`paused` | `error` — the WinUI states), `label` (accessible name).\n * `role=\"progressbar\"` with `aria-valuenow` when determinate.\n * Reduced motion: no glide; indeterminate becomes a gentle pulse.\n */\nexport interface UsaProgressElement extends UsaElement {\n  value: number | null;\n  max: number;\n  /** 0–1, or `null` when indeterminate. */\n  readonly ratio: number | null;\n}\n\nexport function defineProgress(tag = 'usa-progress'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaProgress extends Base {\n        static get observedAttributes(): string[] {\n          return ['value', 'max', 'indeterminate', 'label'];\n        }\n\n        private _fill: HTMLElement | null = null;\n\n        get value(): number | null {\n          const v = this.getAttribute('value');\n          return v === null || v === '' || Number.isNaN(Number(v)) ? null : Number(v);\n        }\n        set value(v: number | null) {\n          if (v === null || v === undefined) this.removeAttribute('value');\n          else this.setAttribute('value', String(v));\n        }\n        get max(): number {\n          const m = this.num('max', 100);\n          return m > 0 ? m : 100;\n        }\n        set max(v: number) {\n          this.setAttribute('max', String(v));\n        }\n        get ratio(): number | null {\n          const v = this.value;\n          return this.hasAttribute('indeterminate') || v === null ? null : clamp(v / this.max, 0, 1);\n        }\n\n        changed(): void {\n          this.sync();\n        }\n\n        mount(): void {\n          if (!this._fill) {\n            this.innerHTML = '<span class=\"usa-progress-bar\"></span><span class=\"usa-progress-bar usa-progress-bar2\"></span>';\n            this._fill = this.firstElementChild as HTMLElement;\n          }\n          this.setAttribute('role', 'progressbar');\n          this.sync();\n        }\n\n        private sync(): void {\n          const ratio = this.ratio;\n          const label = this.getAttribute('label');\n          if (label) this.setAttribute('aria-label', label);\n          this.toggleAttribute('data-indeterminate', ratio === null);\n          if (ratio === null) {\n            this.removeAttribute('aria-valuenow');\n            if (this._fill) this._fill.style.transform = '';\n            return;\n          }\n          this.setAttribute('aria-valuemin', '0');\n          this.setAttribute('aria-valuemax', String(this.max));\n          this.setAttribute('aria-valuenow', String(this.value));\n          if (this._fill) this._fill.style.transform = `scaleX(${ratio})`;\n          if (ratio === 1) this.emit('complete');\n        }\n      },\n    { id: 'progress', text: css }\n  );\n}\n","import { defineElement, EASE_OUT, FLUENT_DECELERATE, type UsaElement } from '../base';\nimport css from './toast.css?raw';\n\nexport type ToastType = 'info' | 'success' | 'warning' | 'error';\n\nexport interface ToastOptions {\n  /** ms before it hides itself; `0` keeps it until closed (default 4000). */\n  duration?: number;\n  type?: ToastType;\n  /** Optional action button. */\n  action?: { label: string; onClick: () => void };\n  /** Show a close button (default `true`). */\n  dismissible?: boolean;\n  /** The toaster to use (default: the first `<usa-toaster>`, created if missing). */\n  toaster?: UsaToasterElement | string;\n}\n\nexport interface ToastHandle {\n  element: HTMLElement;\n  close(): Promise<void>;\n}\n\n/**\n * `<usa-toaster>` — the region toasts slide into (`role=\"region\"`, each\n * toast `role=\"status\"`, errors `role=\"alert\"`). Toasts pause their timer\n * while hovered or focused, and the stack re-flows with a FLIP animation.\n *\n * Attributes: `position` (`bottom-right` default, `bottom-left`,\n * `bottom-center`, `top-right`, `top-left`, `top-center`), `max` (visible\n * toasts, 4), `label` (region name, \"Notifications\").\n * Reduced motion: toasts fade instead of sliding.\n */\nexport interface UsaToasterElement extends UsaElement {\n  show(message: string, options?: ToastOptions): ToastHandle;\n  clear(): void;\n}\n\nconst ICONS: Record<ToastType, string> = {\n  info: '<path d=\"M12 8h.01M11 12h1v5h1\"/>',\n  success: '<path d=\"m8 12.5 3 3 5-6\"/>',\n  warning: '<path d=\"M12 8v5M12 16.5h.01\"/>',\n  error: '<path d=\"m9 9 6 6M15 9l-6 6\"/>',\n};\n\nexport function defineToaster(tag = 'usa-toaster'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaToaster extends Base {\n        static get observedAttributes(): string[] {\n          return ['label'];\n        }\n\n        mount(): void {\n          this.setAttribute('role', 'region');\n          this.setAttribute('aria-label', this.str('label', 'Notifications'));\n        }\n\n        private flip(mutate: () => void): void {\n          const kids = Array.from(this.children) as HTMLElement[];\n          const before = new Map(kids.map((k) => [k, k.getBoundingClientRect().top]));\n          mutate();\n          if (this.reduced) return;\n          for (const k of Array.from(this.children) as HTMLElement[]) {\n            const top = before.get(k);\n            if (top === undefined || k.hasAttribute('data-leaving')) continue;\n            const dy = top - k.getBoundingClientRect().top;\n            if (Math.abs(dy) > 0.5) this.motion(k, [{ transform: `translateY(${dy}px)` }, { transform: 'none' }], { duration: 320, easing: EASE_OUT, composite: 'add' } as KeyframeAnimationOptions);\n          }\n        }\n\n        private enterFrames(): Keyframe[] {\n          if (this.reduced) return [{ opacity: 0 }, { opacity: 1 }];\n          const pos = this.str('position', 'bottom-right');\n          const x = pos.endsWith('right') ? '110%' : pos.endsWith('left') ? '-110%' : '0';\n          const y = pos.endsWith('center') ? (pos.startsWith('top') ? '-120%' : '120%') : '0';\n          return [{ opacity: 0, transform: `translate(${x}, ${y}) scale(0.96)` }, { opacity: 1, transform: 'none' }];\n        }\n\n        show(message: string, options: ToastOptions = {}): ToastHandle {\n          const type = options.type || 'info';\n          const el = document.createElement('div');\n          el.className = 'usa-toast';\n          el.setAttribute('data-type', type);\n          el.setAttribute('role', type === 'error' ? 'alert' : 'status');\n          el.innerHTML = `<svg class=\"usa-toast-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/>${ICONS[type] || ICONS.info}</svg><div class=\"usa-toast-msg\"></div>`;\n          (el.querySelector('.usa-toast-msg') as HTMLElement).textContent = message;\n          let closed: Promise<void> | null = null;\n          let timer: ReturnType<typeof setTimeout> | 0 = 0;\n          const close = (): Promise<void> => {\n            if (closed) return closed;\n            clearTimeout(timer as ReturnType<typeof setTimeout>);\n            el.setAttribute('data-leaving', '');\n            const frames = this.enterFrames().reverse();\n            const a = el.isConnected ? this.motion(el, frames, { duration: 220, easing: 'cubic-bezier(0.7, 0, 0.84, 0)', fill: 'forwards' }) : null;\n            closed = new Promise<void>((resolve) => {\n              const done = () => {\n                this.flip(() => el.remove());\n                resolve();\n              };\n              if (a) a.onfinish = done;\n              else done();\n            });\n            return closed;\n          };\n          if (options.action) {\n            const btn = document.createElement('button');\n            btn.type = 'button';\n            btn.className = 'usa-toast-action';\n            btn.textContent = options.action.label;\n            btn.addEventListener('click', () => {\n              options.action!.onClick();\n              close();\n            });\n            el.append(btn);\n          }\n          if (options.dismissible !== false) {\n            const x = document.createElement('button');\n            x.type = 'button';\n            x.className = 'usa-toast-close';\n            x.setAttribute('aria-label', 'Close');\n            x.innerHTML = '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"m7 7 10 10M17 7 7 17\"/></svg>';\n            x.addEventListener('click', () => close());\n            el.append(x);\n          }\n          const duration = options.duration ?? 4000;\n          const arm = () => {\n            clearTimeout(timer as ReturnType<typeof setTimeout>);\n            if (duration > 0) timer = setTimeout(close, duration);\n          };\n          const hold = () => clearTimeout(timer as ReturnType<typeof setTimeout>);\n          el.addEventListener('pointerenter', hold);\n          el.addEventListener('pointerleave', arm);\n          el.addEventListener('focusin', hold);\n          el.addEventListener('focusout', arm);\n          const top = this.str('position', 'bottom-right').startsWith('top');\n          this.flip(() => (top ? this.prepend(el) : this.append(el)));\n          this.motion(el, this.enterFrames(), { duration: 420, easing: FLUENT_DECELERATE });\n          arm();\n          const live = Array.from(this.querySelectorAll<HTMLElement>('.usa-toast:not([data-leaving])'));\n          const max = Math.max(1, this.num('max', 4));\n          const extra = live.length - max;\n          if (extra > 0) (top ? live.slice(-extra) : live.slice(0, extra)).forEach((t) => (t as any)._close?.());\n          (el as any)._close = close;\n          this.emit('toast', { element: el, message, type });\n          return { element: el, close };\n        }\n\n        clear(): void {\n          this.querySelectorAll<HTMLElement>('.usa-toast').forEach((t) => (t as any)._close?.());\n        }\n      },\n    { id: 'toast', text: css }\n  );\n}\n\n/**\n * Show a toast. Defines `<usa-toaster>` and adds one to `<body>` if the\n * page has none. Returns a handle with `close()`. No-op on the server.\n *\n * ```js\n * toast('Saved', { type: 'success' });\n * ```\n */\nexport function toast(message: string, options: ToastOptions = {}): ToastHandle | null {\n  if (typeof document === 'undefined' || !defineToaster()) return null;\n  let host: UsaToasterElement | null =\n    typeof options.toaster === 'string' ? document.querySelector(options.toaster) : options.toaster || document.querySelector('usa-toaster');\n  if (!host) {\n    host = document.createElement('usa-toaster') as UsaToasterElement;\n    document.body.append(host);\n  }\n  return host.show(message, options);\n}\n","import { kindOf, defineElement, EASE_OUT, EASE_SPRING, type UsaElement } from '../base';\nimport css from './check.css?raw';\n\n/**\n * `<usa-check>` — an animated result icon: the circle draws itself, then the\n * check mark (or cross / exclamation) strokes in with a little pop.\n *\n * Attributes: `kind` (`success` default, `error`, `warning`), `size`\n * (px, 56), `start` (`view` default | `load` | `manual`), `label`\n * (accessible name, e.g. \"Payment complete\"; the icon is decorative\n * without it). Event: `usa:complete`. Reduced motion: drawn instantly.\n */\nexport interface UsaCheckElement extends UsaElement {\n  play(): Promise<void>;\n  reset(): void;\n}\n\nconst PATHS: Record<string, string> = {\n  success: 'M15 27 l7 7 l14 -15',\n  error: 'M18 18 L34 34 M34 18 L18 34',\n  warning: 'M26 15 V30 M26 37 V37.5',\n};\n\nexport function defineCheck(tag = 'usa-check'): CustomElementConstructor | undefined {\n  return defineElement(\n    tag,\n    (Base) =>\n      class UsaCheck extends Base {\n        static get observedAttributes(): string[] {\n          return ['kind', 'size', 'label'];\n        }\n\n        private _anims: Animation[] = [];\n\n        mount(): void {\n          const variant = kindOf(this, PATHS, 'success');\n          this.innerHTML = `<svg viewBox=\"0 0 52 52\" aria-hidden=\"true\"><circle class=\"usa-check-circle\" cx=\"26\" cy=\"26\" r=\"23\" pathLength=\"1\"/><path class=\"usa-check-mark\" d=\"${PATHS[variant]}\" pathLength=\"1\"/></svg>`;\n          this.setAttribute('data-kind', variant);\n          const size = this.getAttribute('size');\n          if (size) this.style.setProperty('--usa-check-size', `${Number(size)}px`);\n          const label = this.getAttribute('label');\n          if (label) {\n            this.setAttribute('role', 'img');\n            this.setAttribute('aria-label', label);\n          }\n          if (this.reduced) {\n            this.setAttribute('data-state', 'done');\n            return;\n          }\n          this.setAttribute('data-state', 'idle');\n          const start = this.str('start', 'view');\n          if (start === 'load') this.play();\n          else if (start === 'view') {\n            let done = false;\n            this.inView((v) => v && !done && ((done = true), this.play()), { threshold: 0.5 });\n          }\n        }\n\n        unmount(): void {\n          this._anims.splice(0).forEach((a) => a.cancel());\n        }\n\n        reset(): void {\n          this._anims.splice(0).forEach((a) => a.cancel());\n          this.setAttribute('data-state', this.reduced ? 'done' : 'idle');\n        }\n\n        play(): Promise<void> {\n          this.reset();\n          this.setAttribute('data-state', 'done');\n          const circle = this.querySelector('.usa-check-circle');\n          const mark = this.querySelector('.usa-check-mark');\n          const svg = this.querySelector('svg');\n          if (this.reduced || !circle || !mark || !svg) {\n            this.emit('complete');\n            return Promise.resolve();\n          }\n          const draw = [{ strokeDashoffset: 1 }, { strokeDashoffset: 0 }];\n          const anims = [\n            this.motion(circle, draw, { duration: 520, easing: EASE_OUT, fill: 'backwards' }),\n            this.motion(mark, draw, { duration: 340, delay: 420, easing: EASE_OUT, fill: 'backwards' }),\n            this.motion(svg, [{ transform: 'scale(1)' }, { transform: 'scale(1.12)' }, { transform: 'scale(1)' }], { duration: 420, delay: 640, easing: EASE_SPRING }),\n          ].filter((a): a is Animation => !!a);\n          this._anims = anims;\n          return new Promise((resolve) => {\n            const last = anims[anims.length - 1];\n            const done = () => {\n              this.emit('complete');\n              resolve();\n            };\n            if (last) last.onfinish = done;\n            else done();\n          });\n        }\n      },\n    { id: 'check', text: css }\n  );\n}\n","/**\n * motionary/components/feedback — loading & feedback.\n * `<usa-spinner>`, `<usa-skeleton>`, `<usa-progress>`, `<usa-toaster>` +\n * `toast()`, `<usa-check>`.\n */\nimport { defineSpinner, type UsaSpinnerElement } from './spinner';\nimport { defineSkeleton, type UsaSkeletonElement } from './skeleton';\nimport { defineProgress, type UsaProgressElement } from './progress';\nimport { defineToaster, type UsaToasterElement } from './toast';\nimport { defineCheck, type UsaCheckElement } from './check';\n\nexport { defineSpinner, defineSkeleton, defineProgress, defineToaster, defineCheck };\nexport { toast } from './toast';\nexport { SPINNER_VARIANTS } from './spinner';\nexport type { SpinnerVariant } from './spinner';\nexport type { ToastOptions, ToastHandle, ToastType } from './toast';\nexport type { UsaSpinnerElement, UsaSkeletonElement, UsaProgressElement, UsaToasterElement, UsaCheckElement };\n\n/** Register every component of this category under its default tag. */\nexport function defineFeedbackComponents(): void {\n  defineSpinner();\n  defineSkeleton();\n  defineProgress();\n  defineToaster();\n  defineCheck();\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'usa-spinner': UsaSpinnerElement;\n    'usa-skeleton': UsaSkeletonElement;\n    'usa-progress': UsaProgressElement;\n    'usa-toaster': UsaToasterElement;\n    'usa-check': UsaCheckElement;\n  }\n}\n"],"names":["css"],"mappings":"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"}

package/dist/components/fx-gpu.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+require('../chunks/registry-DehBVRDV.cjs');
+require('../chunks/generative-DzIZq-_g.cjs');
+var components_fxGpu = require('../chunks/gpu-CenK2l6b.cjs');
+require('../chunks/base-BaQV-2ha.cjs');
+
+
+
+exports.GPU_FX = components_fxGpu.GPU_FX;
+exports.registerGpuEffects = components_fxGpu.registerGpuEffects;
+//# sourceMappingURL=fx-gpu.cjs.map

package/dist/components/fx-gpu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fx-gpu.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/components/fx-gpu.d.cts

@@ -0,0 +1,63 @@
+type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
+type Cleanup = () => void;
+
+/**
+ * 5.0 — unified plugin-style effect registration. Every effect (built-in or
+ * yours) is a plain object registered once and played the same way:
+ * `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
+ * `<usa-fx effect="name" trigger="click">`. Effects get a context that
+ * already applies reduced motion, motion sensitivity, intensity and the
+ * animation budget.
+ */
+
+declare const EFFECT_KINDS: readonly ["enter", "exit", "attention", "click", "hover", "card", "loop", "page", "background", "text", "cursor", "scroll"];
+type EffectKind = (typeof EFFECT_KINDS)[number];
+interface EffectContext {
+    /** Reduced motion applies (OS setting, `minimal` / `static` sensitivity). */
+    readonly reduced: boolean;
+    readonly sensitivity: MotionSensitivity;
+    /** The triggering event (pointer position for click effects), if any. */
+    readonly event?: Event;
+    /** `el.animate()` with the library's motion rules (may return `null`). */
+    animate(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
+    /** Register teardown for long-running effects (loops, listeners). */
+    onCleanup(fn: Cleanup): void;
+}
+interface EffectDefinition<O extends Record<string, unknown> = Record<string, any>> {
+    /** Unique, kebab-case. */
+    name: string;
+    kind: EffectKind;
+    /** One line for docs and the gallery. */
+    description?: string;
+    /** Option defaults (merged under the caller's options). */
+    defaults?: Partial<O>;
+    /**
+     * Under reduced motion: `'skip'` (do nothing — default for loop, background
+     * and cursor effects) or `'run'` (run with `ctx.reduced === true`, the
+     * effect degrades itself — default for everything else).
+     */
+    reduced?: 'skip' | 'run';
+    /** Play the effect. Return an Animation / Promise to be awaited, or a cleanup. */
+    run(el: HTMLElement, options: O, ctx: EffectContext): void | Cleanup | Animation | null | Promise<unknown>;
+}
+
+/**
+ * 6.2 — GPU effect pack (`motionary/components/fx-gpu`), registered through
+ * `registerEffect()`:
+ *
+ * - WebGL2 shaders with a Canvas 2D fallback (kind `background`): `fluid`
+ *   (domain-warped fluid that swirls around the pointer), `smoke`, `fire`,
+ *   `ink` (ink blooming in water), `fireflies`.
+ * - Canvas 2D particles (kind `background`): `sakura` (falling cherry
+ *   petals), `leaves` (tumbling autumn leaves).
+ * - `splash` (kind `click`): droplets + a ring burst from the pointer.
+ *
+ * Every background renders only while visible, lowers its resolution when
+ * frames are slow, and draws one static frame under reduced motion.
+ */
+
+declare const GPU_FX: EffectDefinition[];
+/** Register the 6.2 GPU pack (idempotent). */
+declare function registerGpuEffects(): void;
+
+export { GPU_FX, registerGpuEffects };