@esportsplus/ui 0.56.2 → 0.56.4

package/build/components/plan-card/index.js

@@ -0,0 +1,257 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_1sxgp013 = template_u1.template(`<article class='plan-card'><header class='plan-card-header'><span aria-hidden='true' class='plan-card-icon'></span><h3 class='plan-card-title'></h3></header><!--$--><div class='plan-card-todos' role='group'><div class='plan-card-todos-header'><svg aria-hidden='true' class='plan-card-todos-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M3.5 5.5 5 7l2.5-2.5M3.5 11.5 5 13l2.5-2.5M3.5 17.5 5 19l2.5-2.5M11 6h9M11 12h9M11 18h9' /></svg><span class='plan-card-todos-label'>To-dos</span><span class='plan-card-todos-count'></span></div><ul class='plan-card-list'><!--$--></ul></div><footer class='plan-card-footer'><span aria-live='polite' class='plan-card-status'></span><span class='plan-card-buttons'><!--$--><button class='plan-card-button plan-card-button--primary' type='button'><!--$--><kbd aria-hidden='true' class='plan-card-kbd'><kbd></kbd><kbd><svg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M18 6v6a3 3 0 0 1-3 3H5M9 11l-4 4 4 4' />`);
+const template_1sxgp01j = template_u1.template(`<svg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M3 7l6-3 6 3 6-3v13l-6 3-6-3-6 3V7M9 4v13M15 7v13' />`);
+const template_1sxgp01l = template_u1.template(`<span class='plan-card-actions'><!--$-->`);
+const template_1sxgp01p = template_u1.template(`<button aria-label='Download the plan' class='plan-card-action' data-tooltip='Download' type='button'><svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5 5-5M12 4v12' />`);
+const template_1sxgp01s = template_u1.template(`<button aria-label='Open the full plan' class='plan-card-action' data-tooltip='Open' type='button'><svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M16 4h4v4M14 10l6-6M8 20H4v-4M4 20l6-6' />`);
+const template_1sxgp01v = template_u1.template(`<p class='plan-card-description'>`);
+const template_1sxgp01y = template_u1.template(`<div class='plan-card-todo '><svg aria-hidden='true' class='plan-card-todo-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path /></svg><span class='plan-card-todo-label'>`);
+const template_1sxgp0113 = template_u1.template(`<li>`);
+const template_1sxgp0116 = template_u1.template(`<li class='plan-card-fold'><div class='plan-card-fold-inner'>`);
+const template_1sxgp011a = template_u1.template(`<li><button class='plan-card-toggle' type='button'><span aria-hidden='true' class='plan-card-toggle-icon'><svg class='plan-card-toggle-more' fill='currentColor' viewBox='0 0 24 24'><circle cx='5' cy='12' r='1.75' /><circle cx='12' cy='12' r='1.75' /><circle cx='19' cy='12' r='1.75' /></svg><svg class='plan-card-toggle-less' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='m6 15 6-6 6 6' /></svg></span><span class='plan-card-toggle-labels'><span class='plan-card-toggle-label plan-card-toggle-label--more'><!--$--> more</span><span class='plan-card-toggle-label plan-card-toggle-label--less'>Show less`);
+const template_1sxgp011g = template_u1.template(`<svg aria-hidden='true' class='plan-card-status-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'><path d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM8.5 12l2.5 2.5 4.5-5' /></svg><span>`);
+const template_1sxgp011j = template_u1.template(`<button aria-label='Cancel auto approval' class='plan-card-cancel' data-tooltip='Cancel' type='button'><svg aria-hidden='true' class='plan-card-ring' viewBox='0 0 18 18'><circle class='plan-card-ring-track' cx='9' cy='9' r='7' /><circle class='plan-card-ring-progress' cx='9' cy='9' r='7' /></svg><span aria-hidden='true' class='plan-card-cancel-icon'><svg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 24 24'><path d='M18 6 6 18M6 6l12 12' /></svg></span></button><span> Auto Approve in <span class='plan-card-digits'></span>s `);
+const template_1sxgp011o = template_u1.template(`<button class='plan-card-button plan-card-button--secondary' type='button'> View Plan `);
+class ReactiveObject_1sxgp010 extends reactivity_u0.ReactiveObject {
+    #approved = this[reactivity_u0.SIGNAL](false);
+    #countdown;
+    #expanded = this[reactivity_u0.SIGNAL](false);
+    constructor(_p0) {
+        super(null);
+        this.#countdown = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get approved() {
+        return reactivity_u0.read(this.#approved);
+    }
+    set approved(_v0) {
+        reactivity_u0.write(this.#approved, _v0);
+    }
+    get countdown() {
+        return reactivity_u0.read(this.#countdown);
+    }
+    set countdown(_v1) {
+        reactivity_u0.write(this.#countdown, _v1);
+    }
+    get expanded() {
+        return reactivity_u0.read(this.#expanded);
+    }
+    set expanded(_v2) {
+        reactivity_u0.write(this.#expanded, _v2);
+    }
+}
+class ReactiveObject_1sxgp011 extends reactivity_u0.ReactiveObject {
+    #value = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get value() {
+        return reactivity_u0.read(this.#value);
+    }
+    set value(_v0) {
+        reactivity_u0.write(this.#value, _v0);
+    }
+}
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+const PLAN_CARD_APPROVE = Symbol.for('@esportsplus/ui/plan-card.approve');
+const PLAN_CARD_VIEW = Symbol.for('@esportsplus/ui/plan-card.view');
+const RING = 2 * Math.PI * 7;
+let uid = 0;
+function mac() {
+    return /Mac|iPhone|iPad/.test(navigator.platform);
+}
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+const planCard = ({ autoApprove = 10, description, icon, onapprove, ondownload, onexpand, onview, peek = 3, state, title, todos, ...attributes }) => {
+    let digits, id = `plan-card-${++uid}`, observer, s = state ?? new ReactiveObject_1sxgp010(autoApprove > 0 ? autoApprove : -1), started = new ReactiveObject_1sxgp011(), timer, total = untrack(() => s.countdown);
+    function approve(auto) {
+        if (s.approved) {
+            return;
+        }
+        clearInterval(timer);
+        s.approved = true;
+        onapprove?.(auto);
+    }
+    function cancel() {
+        clearInterval(timer);
+        s.countdown = -1;
+    }
+    function start() {
+        if (started.value || s.approved || s.countdown <= 0) {
+            return;
+        }
+        started.value = true;
+        timer = setInterval(() => {
+            if (s.countdown <= 0) {
+                clearInterval(timer);
+                return;
+            }
+            s.countdown -= 1;
+            if (s.countdown === 0) {
+                approve(true);
+            }
+        }, 1000);
+    }
+    function write(value, animate) {
+        if (!digits) {
+            return;
+        }
+        let reduce = reduced(), text = String(Math.max(value, 0));
+        while (digits.children.length > text.length) {
+            digits.lastElementChild.remove();
+        }
+        for (let i = 0, n = text.length; i < n; i++) {
+            let span = digits.children[i];
+            if (span?.textContent === text[i]) {
+                continue;
+            }
+            let next = document.createElement('span');
+            next.className = 'plan-card-digit';
+            next.textContent = text[i];
+            if (span) {
+                span.replaceWith(next);
+            }
+            else {
+                digits.append(next);
+            }
+            if (animate && !reduce) {
+                next.animate([
+                    { filter: 'blur(1.5px)', opacity: 0, translate: '0 -4px' },
+                    { filter: 'blur(0px)', opacity: 1, translate: '0 0' }
+                ], { delay: i * 40, duration: 260, easing: EASE_OUT, fill: 'backwards' });
+            }
+        }
+    }
+    let hidden = Math.max(todos.length - peek, 0), previous, stop = effect(() => {
+        let countdown = s.countdown;
+        untrack(() => write(countdown, previous !== undefined));
+        previous = countdown;
+    });
+    onCleanup(() => {
+        clearInterval(timer);
+        observer?.disconnect();
+        stop();
+    });
+    return (() => {
+        let root_1sxgp012 = template_1sxgp013(), element_1sxgp014 = root_1sxgp012.firstChild, element_1sxgp015 = element_1sxgp014.firstElementChild.firstElementChild, element_1sxgp016 = element_1sxgp015.nextElementSibling, element_1sxgp017 = element_1sxgp014.firstElementChild, element_1sxgp018 = element_1sxgp014.firstChild.nextSibling, element_1sxgp019 = element_1sxgp017.nextElementSibling, element_1sxgp01a = element_1sxgp019.firstElementChild.firstElementChild.nextElementSibling, element_1sxgp01b = element_1sxgp01a.nextElementSibling, element_1sxgp01c = element_1sxgp019.firstElementChild.nextElementSibling, element_1sxgp01d = element_1sxgp01c.firstChild, element_1sxgp01e = element_1sxgp019.nextElementSibling.firstElementChild, element_1sxgp01f = element_1sxgp01e.nextElementSibling.firstChild, element_1sxgp01g = element_1sxgp01e.nextElementSibling.firstElementChild, element_1sxgp01h = element_1sxgp01g.firstChild, element_1sxgp01i = element_1sxgp01g.firstElementChild.firstElementChild;
+        template_u1.setProperties(element_1sxgp014, attributes);
+        template_u1.setProperty(element_1sxgp014, 'aria-labelledby', `${id}-title`);
+        template_u1.setList(element_1sxgp014, 'class', () => s.approved && '--approved');
+        template_u1.onconnect(element_1sxgp014, (element) => {
+            if (s.countdown <= 0) {
+                return;
+            }
+            observer = new IntersectionObserver((entries) => {
+                if (!entries.some((entry) => entry.isIntersecting)) {
+                    return;
+                }
+                observer?.disconnect();
+                start();
+            }, { threshold: 0.5 });
+            observer.observe(element);
+        });
+        template_u1.delegate(element_1sxgp014, 'keydown', (e) => {
+            if (e.key === 'Enter' && (mac() ? e.metaKey : e.ctrlKey)) {
+                e.preventDefault();
+                approve(false);
+            }
+        });
+        template_u1.slot(element_1sxgp015, icon ?? template_1sxgp01j(), 1);
+        template_u1.setProperty(element_1sxgp016, 'id', template_u1.interpolate([(id), "-title"]));
+        template_u1.slot(element_1sxgp016, title, 1);
+        template_u1.slot(element_1sxgp017, (ondownload || onexpand) && (() => {
+            let root_1sxgp01k = template_1sxgp01l(), element_1sxgp01m = root_1sxgp01k.firstChild.firstChild, element_1sxgp01n = root_1sxgp01k.firstChild;
+            template_u1.slot(element_1sxgp01m, ondownload && (() => {
+                let root_1sxgp01o = template_1sxgp01p(), element_1sxgp01q = root_1sxgp01o.firstChild;
+                template_u1.delegate(element_1sxgp01q, 'click', ondownload);
+                return root_1sxgp01o;
+            })());
+            template_u1.slot(element_1sxgp01n, onexpand && (() => {
+                let root_1sxgp01r = template_1sxgp01s(), element_1sxgp01t = root_1sxgp01r.firstChild;
+                template_u1.delegate(element_1sxgp01t, 'click', onexpand);
+                return root_1sxgp01r;
+            })(), 2);
+            return root_1sxgp01k;
+        })(), 2);
+        template_u1.slot(element_1sxgp018, description && (() => {
+            let root_1sxgp01u = template_1sxgp01v(), element_1sxgp01w = root_1sxgp01u.firstChild;
+            template_u1.slot(element_1sxgp01w, description, 1);
+            return root_1sxgp01u;
+        })());
+        template_u1.setProperty(element_1sxgp019, 'aria-labelledby', template_u1.interpolate([(id), "-todos"]));
+        template_u1.setProperty(element_1sxgp01a, 'id', template_u1.interpolate([(id), "-todos"]));
+        template_u1.slot(element_1sxgp01b, todos.length, 1);
+        template_u1.setProperty(element_1sxgp01c, 'id', template_u1.interpolate([(id), "-list"]));
+        template_u1.slot(element_1sxgp01d, todos.map((todo, index) => {
+            let row = (() => {
+                let root_1sxgp01x = template_1sxgp01y(), element_1sxgp01z = root_1sxgp01x.firstChild, element_1sxgp0110 = element_1sxgp01z.firstElementChild.firstElementChild, element_1sxgp0111 = element_1sxgp01z.firstElementChild.nextElementSibling;
+                template_u1.setList(element_1sxgp01z, 'class', todo.done && '--done');
+                template_u1.setProperty(element_1sxgp0110, 'd', todo.done ? 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM8.5 12l2.5 2.5 4.5-5' : 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z');
+                template_u1.slot(element_1sxgp0111, todo.label, 1);
+                return root_1sxgp01x;
+            })();
+            if (index < peek) {
+                return (() => {
+                    let root_1sxgp0112 = template_1sxgp0113(), element_1sxgp0114 = root_1sxgp0112.firstChild;
+                    template_u1.slot(element_1sxgp0114, row, 1);
+                    return root_1sxgp0112;
+                })();
+            }
+            return (() => {
+                let root_1sxgp0115 = template_1sxgp0116(), element_1sxgp0117 = root_1sxgp0115.firstChild, element_1sxgp0118 = element_1sxgp0117.firstElementChild;
+                template_u1.setList(element_1sxgp0117, 'class', () => s.expanded && '--active');
+                template_u1.setProperty(element_1sxgp0117, 'inert', () => !s.expanded);
+                template_u1.slot(element_1sxgp0118, row, 1);
+                return root_1sxgp0115;
+            })();
+        }));
+        template_u1.slot(element_1sxgp01c, hidden > 0 && (() => {
+            let root_1sxgp0119 = template_1sxgp011a(), element_1sxgp011b = root_1sxgp0119.firstChild.firstElementChild, element_1sxgp011c = element_1sxgp011b.firstElementChild.nextElementSibling.firstElementChild, element_1sxgp011d = element_1sxgp011c.firstChild, element_1sxgp011e = element_1sxgp011c.nextElementSibling;
+            template_u1.setProperty(element_1sxgp011b, 'aria-controls', `${id}-list`);
+            template_u1.setProperty(element_1sxgp011b, 'aria-expanded', () => String(s.expanded));
+            template_u1.setList(element_1sxgp011b, 'class', () => s.expanded && '--active');
+            template_u1.delegate(element_1sxgp011b, 'click', () => {
+                s.expanded = !s.expanded;
+            });
+            template_u1.setProperty(element_1sxgp011c, 'aria-hidden', () => s.expanded && 'true');
+            template_u1.slot(element_1sxgp011d, hidden);
+            template_u1.setProperty(element_1sxgp011e, 'aria-hidden', () => !s.expanded && 'true');
+            return root_1sxgp0119;
+        })(), 2);
+        template_u1.setList(element_1sxgp01e, 'class', () => s.approved ? '--approved' : s.countdown === -1 && '--cancelled');
+        new template_u1.EffectSlot(element_1sxgp01e, () => s.approved
+            ? (() => {
+                let root_1sxgp011f = template_1sxgp011g(), element_1sxgp011h = root_1sxgp011f.firstChild.nextSibling;
+                element_1sxgp011h.appendChild(template_u1.text(total > 0 && s.countdown === 0 ? 'Auto-approved' : 'Approved'));
+                return root_1sxgp011f;
+            })()
+            : total > 0 && (() => {
+                let root_1sxgp011i = template_1sxgp011j(), element_1sxgp011k = root_1sxgp011i.firstChild, element_1sxgp011l = element_1sxgp011k.firstElementChild.firstElementChild.nextElementSibling, element_1sxgp011m = element_1sxgp011k.nextSibling.firstElementChild;
+                template_u1.setProperty(element_1sxgp011k, 'disabled', () => s.countdown === -1);
+                template_u1.delegate(element_1sxgp011k, 'click', cancel);
+                template_u1.setList(element_1sxgp011l, 'style', () => `stroke-dasharray: ${RING}; stroke-dashoffset: ${RING * (1 - Math.max(started.value ? s.countdown - 1 : s.countdown, 0) / total)}`);
+                template_u1.onrender(element_1sxgp011m, (element) => {
+                    digits = element;
+                    write(untrack(() => s.countdown), false);
+                });
+                return root_1sxgp011i;
+            })(), 1);
+        template_u1.slot(element_1sxgp01f, onview && (() => {
+            let root_1sxgp011n = template_1sxgp011o(), element_1sxgp011p = root_1sxgp011n.firstChild;
+            template_u1.setProperties(element_1sxgp011p, attributes[PLAN_CARD_VIEW]);
+            template_u1.delegate(element_1sxgp011p, 'click', onview);
+            return root_1sxgp011n;
+        })());
+        template_u1.setProperties(element_1sxgp01g, attributes[PLAN_CARD_APPROVE]);
+        template_u1.setProperty(element_1sxgp01g, 'aria-keyshortcuts', mac() ? 'Meta+Enter' : 'Control+Enter');
+        template_u1.setProperty(element_1sxgp01g, 'disabled', () => s.approved);
+        template_u1.delegate(element_1sxgp01g, 'click', () => approve(false));
+        new template_u1.EffectSlot(element_1sxgp01h, () => s.approved ? 'Approved' : 'Approve');
+        element_1sxgp01i.appendChild(template_u1.text(mac() ? '⌘' : 'Ctrl'));
+        return root_1sxgp012;
+    })();
+};
+export default Object.assign(planCard, { approve: PLAN_CARD_APPROVE, view: PLAN_CARD_VIEW });

package/build/components/plan-card/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.plan-card{--action-hover:oklch(from var(--color-black-300) l c h / .07);--background:var(--color-white-300);--border-color:var(--color-border-300);--color:var(--color-text-500);--focus-color:var(--color-text-500);--icon-background:oklch(76.9% .188 70.08/.15);--icon-color:oklch(66.6% .179 58.318);--muted:var(--color-text-300);--padding:20px;--primary-background:var(--color-text-500);--primary-color:var(--color-white-300);--radius:16px;--ring-color:var(--color-text-500);--ring-track:var(--color-border-300);--secondary-background:var(--color-grey-500);--secondary-color:var(--color-text-500);--spring:cubic-bezier(.16, 1, .3, 1);--success-color:oklch(62.7% .194 149.214);--todos-background:var(--color-grey-300);--width:512px}.plan-card--blue{--icon-background:oklch(from var(--color-blue-400) l c h / .12);--icon-color:var(--color-blue-400)}.plan-card--flat{--border-color:transparent;--todos-background:var(--color-grey-400)}.plan-card{background:var(--background);border:var(--border-width-400) solid var(--border-color);border-radius:var(--radius);color:var(--color);max-width:100%;padding:var(--padding);width:var(--width)}.plan-card-action:after,.plan-card-cancel:after{background:var(--color-text-500);color:var(--color-white-300);content:attr(data-tooltip);font-size:12px;font-weight:var(--font-weight-500);opacity:0;pointer-events:none;white-space:nowrap;z-index:1;border-radius:6px;padding:4px 8px;transition:opacity .1s ease-out,translate .1s ease-out;position:absolute;bottom:calc(100% + 6px);left:50%;translate:-50% 2px}.plan-card-action:focus-visible:after,.plan-card-action:hover:after,.plan-card-cancel:focus-visible:after,.plan-card-cancel:hover:after{opacity:1;transition-delay:.4s;translate:-50%}.plan-card-action:focus-visible:after,.plan-card-cancel:focus-visible:after{transition-delay:0s}.plan-card-action{color:var(--color);cursor:pointer;background:0 0;border:0;border-radius:8px;outline:none;justify-content:center;align-items:center;width:28px;height:28px;transition:background-color .15s ease-out;display:flex;position:relative}.plan-card-action:active{background:oklch(from var(--color-black-300) l c h/.12)}.plan-card-action:focus-visible{outline:2px solid var(--focus-color)}.plan-card-action:hover{background:var(--action-hover)}.plan-card-action svg{width:16px;height:16px}.plan-card-actions{align-items:center;gap:4px;margin-left:auto;display:flex}.plan-card-button{cursor:pointer;font-size:.875rem;font-weight:var(--font-weight-500);white-space:nowrap;border:0;border-radius:8px;outline:none;align-items:center;gap:6px;height:32px;padding-inline:10px;transition:opacity .15s ease-out,scale .15s ease-out;display:inline-flex}.plan-card-button:active{scale:.97}.plan-card-button:disabled{cursor:default;opacity:.5;scale:1}.plan-card-button:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}.plan-card-button--primary{background:var(--primary-background);color:var(--primary-color);padding-right:6px}.plan-card-button--secondary{background:var(--secondary-background);color:var(--secondary-color)}.plan-card-buttons{align-items:center;gap:8px;margin-left:auto;display:flex}.plan-card-cancel{cursor:pointer;background:0 0;border:0;border-radius:999px;outline:none;flex-shrink:0;place-items:center;width:18px;height:18px;padding:0;transition:scale .15s ease-out;display:grid;position:relative}.plan-card-cancel:before{content:"";position:absolute;inset:-11px}.plan-card-cancel:active{scale:.96}.plan-card-cancel:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}.plan-card-cancel:focus-visible .plan-card-cancel-icon,.plan-card-cancel:hover .plan-card-cancel-icon{opacity:1}.plan-card-cancel>*{grid-area:1/1}.plan-card-cancel-icon{background:var(--secondary-background);color:var(--muted);opacity:0;border-radius:999px;justify-content:center;align-items:center;width:18px;height:18px;transition:opacity .1s ease-out;display:flex}.plan-card-cancel-icon svg{width:10px;height:10px}.plan-card-description{color:var(--muted);text-wrap:pretty;margin:12px 0 0;font-size:.9375rem;line-height:1.625}.plan-card-digit{display:inline-block}.plan-card-digits{font-variant-numeric:tabular-nums;display:inline-flex}.plan-card-fold{transition:grid-template-rows .3s var(--spring);grid-template-rows:0fr;display:grid}.plan-card-fold.--active{grid-template-rows:1fr}.plan-card-fold-inner{min-height:0;overflow:hidden}.plan-card-footer{flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;display:flex}.plan-card-header{align-items:center;gap:12px;display:flex}.plan-card-icon{background:var(--icon-background);color:var(--icon-color);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.plan-card-icon svg{width:16px;height:16px}.plan-card.--approved .plan-card-kbd{display:none}.plan-card-kbd{gap:4px;margin-left:2px;font-family:inherit;display:inline-flex}.plan-card-kbd kbd{background:oklch(from var(--primary-color) l c h/.15);border-radius:4px;justify-content:center;align-items:center;min-width:20px;height:20px;padding-inline:4px;font-family:inherit;font-size:.625rem;display:inline-flex}.plan-card-kbd svg{width:10px;height:10px}.plan-card-list{margin:10px 0 0;padding:0;list-style:none}.plan-card-list>li+li .plan-card-todo,.plan-card-list>li+li>.plan-card-toggle{margin-top:8px}.plan-card-ring{width:18px;height:18px;rotate:-90deg}.plan-card-ring circle{fill:none;stroke-width:2px}.plan-card-ring-progress{stroke:var(--ring-color);stroke-linecap:round;transition:stroke-dashoffset 1s linear}.plan-card-ring-track{stroke:var(--ring-track)}.plan-card-status{color:var(--muted);align-items:center;gap:8px;font-size:.875rem;transition:opacity .2s ease-out,translate .2s ease-out,visibility linear;display:flex}.plan-card-status.--approved{color:var(--success-color);font-weight:var(--font-weight-500)}.plan-card-status.--cancelled{opacity:0;visibility:hidden;transition:opacity .2s ease-out,translate .2s ease-out,visibility 0s linear .2s;translate:0 4px}.plan-card-status-icon{width:16px;height:16px}.plan-card-title{font-size:1.125rem;font-weight:var(--font-weight-600);letter-spacing:-.025em;min-width:0;margin:0;line-height:1.4}.plan-card-todo{color:var(--muted);align-items:center;gap:10px;font-size:.9375rem;display:flex}.plan-card-todo.--done .plan-card-todo-icon{color:var(--success-color);opacity:1}.plan-card-todo-icon{opacity:.5;flex-shrink:0;width:16px;height:16px}.plan-card-todo-label{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.plan-card-todos{background:var(--todos-background);border-radius:12px;margin-top:16px;padding:12px}.plan-card-todos-count{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto;padding-right:4px;font-size:.875rem}.plan-card-todos-header{align-items:center;gap:8px;display:flex}.plan-card-todos-icon{flex-shrink:0;width:16px;height:16px}.plan-card-todos-label{font-size:.9375rem;font-weight:var(--font-weight-500)}.plan-card-toggle{color:var(--muted);cursor:pointer;text-align:left;background:0 0;border:0;border-radius:6px;outline:none;align-items:center;gap:10px;width:100%;padding:0;font-size:.9375rem;transition:color .15s ease-out;display:flex}.plan-card-toggle:focus-visible{outline:2px solid var(--focus-color);outline-offset:2px}.plan-card-toggle:hover{color:var(--color)}.plan-card-toggle.--active .plan-card-toggle-label--less,.plan-card-toggle.--active .plan-card-toggle-less{filter:blur();opacity:1;translate:0}.plan-card-toggle.--active .plan-card-toggle-label--more,.plan-card-toggle.--active .plan-card-toggle-more{filter:blur(2px);opacity:0;translate:0 -4px}.plan-card-toggle-icon,.plan-card-toggle-labels{display:grid}.plan-card-toggle-icon>*,.plan-card-toggle-labels>*{transition:filter .2s var(--spring), opacity .2s var(--spring), translate .2s var(--spring);grid-area:1/1}.plan-card-toggle-icon{color:var(--muted);opacity:.5;flex-shrink:0;place-items:center;width:16px;height:16px}.plan-card-toggle-icon svg{width:16px;height:16px}.plan-card-toggle-label--less,.plan-card-toggle-less{filter:blur(2px);opacity:0;translate:0 4px}@media (prefers-reduced-motion:reduce){.plan-card-fold,.plan-card-ring-progress,.plan-card-toggle-icon>*,.plan-card-toggle-labels>*{transition:none}.plan-card-status{translate:none}}}
+/*$vite$:1*/