@esportsplus/ui 0.54.0 → 0.56.2

package/build/components/selection-toolbar/index.d.ts

@@ -0,0 +1,36 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [SELECTION_TOOLBAR_EDITOR]?: Attributes;
+    [SELECTION_TOOLBAR_TOOLBAR]?: Attributes;
+    href?: string;
+    label: string;
+    onconnect?: never;
+    ondisconnect?: never;
+    ondocumentselectionchange?: never;
+    onfocusout?: never;
+    onwindowpointercancel?: never;
+    onwindowpointerup?: never;
+    state?: State;
+};
+type State = {
+    copied: boolean;
+    open: boolean;
+};
+declare const SELECTION_TOOLBAR_EDITOR: unique symbol;
+declare const SELECTION_TOOLBAR_TOOLBAR: unique symbol;
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends A>(attributes: T): template_u1.Renderable<any>;
+    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+    (attributes: A, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: template_u1.Renderable<any>;
+    }): any;
+} & {
+    readonly editor: typeof SELECTION_TOOLBAR_EDITOR;
+    readonly toolbar: typeof SELECTION_TOOLBAR_TOOLBAR;
+};
+export default _default;

package/build/components/selection-toolbar/index.js

@@ -0,0 +1,442 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { write } from '../clipboard/index.js';
+import './scss/index.scss';
+const template_0zx3wuh2 = template_u1.template(`<svg aria-hidden='true' class='selection-toolbar-icon' viewBox='0 0 16 16'><path d='M4.75 3.25h3.9a2.4 2.4 0 0 1 0 4.8h-3.9Zm0 4.8h4.6a2.35 2.35 0 0 1 0 4.7h-4.6Z' stroke-width='1.75' />`);
+const template_0zx3wuh3 = template_u1.template(`<span aria-hidden='true' class='selection-toolbar-swap'><svg class='selection-toolbar-icon selection-toolbar-icon--copy' viewBox='0 0 16 16'><rect x='5.25' y='5.25' width='8' height='8' rx='1.75' /><path d='M10.75 5.25V4.5a1.75 1.75 0 0 0-1.75-1.75H4.5A1.75 1.75 0 0 0 2.75 4.5V9a1.75 1.75 0 0 0 1.75 1.75h.75' /></svg><svg class='selection-toolbar-icon selection-toolbar-icon--check' viewBox='0 0 16 16'><path d='m3.5 8.5 3 3 6-7' />`);
+const template_0zx3wuh4 = template_u1.template(`<svg aria-hidden='true' class='selection-toolbar-icon' viewBox='0 0 16 16'><path d='m9.75 2.75 3.5 3.5-5.5 5.5h-3.5v-3.5Z' /><path d='M2.75 14.25h10.5' />`);
+const template_0zx3wuh5 = template_u1.template(`<svg aria-hidden='true' class='selection-toolbar-icon' viewBox='0 0 16 16'><path d='M7 3.25h5M4 12.75h5M9.5 3.25l-3 9.5' />`);
+const template_0zx3wuh6 = template_u1.template(`<svg aria-hidden='true' class='selection-toolbar-icon' viewBox='0 0 16 16'><path d='M7 9a2.5 2.5 0 0 0 3.54 0l2-2A2.5 2.5 0 0 0 9 3.46l-.5.5M9 7a2.5 2.5 0 0 0-3.54 0l-2 2A2.5 2.5 0 0 0 7 12.54l.5-.5' />`);
+const template_0zx3wuh8 = template_u1.template(`<div class='selection-toolbar'><div aria-multiline='true' class='selection-toolbar-editor' contenteditable='true' role='textbox' spellcheck='false'></div><div aria-hidden='true' aria-label='Formatting' class='selection-toolbar-toolbar' inert role='toolbar'></div><span aria-live='polite' class='selection-toolbar-live'>`);
+const template_0zx3wuhe = template_u1.template(`<button class='button selection-toolbar-button ' tabindex='-1' type='button'>`);
+const template_0zx3wuhh = template_u1.template(`<!--$--><button aria-label='Copy' class='button selection-toolbar-button ' tabindex='-1' type='button'>`);
+const template_0zx3wuhk = template_u1.template(`<span aria-hidden='true' class='selection-toolbar-divider'>`);
+const template_0zx3wuhs = template_u1.template(`<!--$--><button class='button selection-toolbar-button ' tabindex='-1' type='button'>`);
+class ReactiveObject_0zx3wuh0 extends reactivity_u0.ReactiveObject {
+    #copied = this[reactivity_u0.SIGNAL](false);
+    #open = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get copied() {
+        return reactivity_u0.read(this.#copied);
+    }
+    set copied(_v0) {
+        reactivity_u0.write(this.#copied, _v0);
+    }
+    get open() {
+        return reactivity_u0.read(this.#open);
+    }
+    set open(_v1) {
+        reactivity_u0.write(this.#open, _v1);
+    }
+}
+class ReactiveObject_0zx3wuh1 extends reactivity_u0.ReactiveObject {
+    #text = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get text() {
+        return reactivity_u0.read(this.#text);
+    }
+    set text(_v0) {
+        reactivity_u0.write(this.#text, _v0);
+    }
+}
+const ACTIONS = ['bold', 'italic', 'link', 'highlight', 'copy'];
+const COPIED_FOR = 1400;
+const FORMATS = ['bold', 'italic', 'link', 'highlight'];
+const GAP = 8;
+const LABELS = {
+    bold: 'Bold',
+    highlight: 'Highlight',
+    italic: 'Italic',
+    link: 'Link'
+};
+const SELECTION_TOOLBAR_EDITOR = Symbol.for('@esportsplus/ui/selection-toolbar.editor');
+const SELECTION_TOOLBAR_TOOLBAR = Symbol.for('@esportsplus/ui/selection-toolbar.toolbar');
+const TAGS = {
+    bold: 'strong',
+    highlight: 'mark',
+    italic: 'em',
+    link: 'a'
+};
+function closest(node, tag, root) {
+    let element = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement, found = element?.closest(tag);
+    return found && found !== root && root.contains(found) ? found : null;
+}
+function icon(action) {
+    switch (action) {
+        case 'bold':
+            return template_0zx3wuh2();
+        case 'copy':
+            return template_0zx3wuh3();
+        case 'highlight':
+            return template_0zx3wuh4();
+        case 'italic':
+            return template_0zx3wuh5();
+        default:
+            return template_0zx3wuh6();
+    }
+}
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+function same(a, b) {
+    return !!a
+        && a.startContainer === b.startContainer
+        && a.startOffset === b.startOffset
+        && a.endContainer === b.endContainer
+        && a.endOffset === b.endOffset;
+}
+function select(range) {
+    let selection = window.getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+}
+function unwrap(element) {
+    let parent = element.parentNode;
+    if (!parent) {
+        return;
+    }
+    while (element.firstChild) {
+        parent.insertBefore(element.firstChild, element);
+    }
+    parent.removeChild(element);
+}
+export default Object.assign(component(function ({ href = '#', label, state = new ReactiveObject_0zx3wuh0(), ...attributes }, content) {
+    let buttons = [], copyTimer, dismissed = false, editor, focusIndex = 0, frame = 0, live = new ReactiveObject_0zx3wuh1(), observer, pressing = false, release, root, saved = null, toolbar;
+    async function copy() {
+        let range = current();
+        if (!range) {
+            return;
+        }
+        clearTimeout(copyTimer);
+        state.copied = true;
+        live.text = 'Copied';
+        copyTimer = setTimeout(() => {
+            state.copied = false;
+        }, COPIED_FOR);
+        if (!(await write(range.toString()))) {
+            clearTimeout(copyTimer);
+            state.copied = false;
+            live.text = 'Couldn\'t copy';
+        }
+    }
+    function current() {
+        if (!editor || !saved || saved.collapsed || !editor.contains(saved.commonAncestorContainer)) {
+            return null;
+        }
+        return saved;
+    }
+    function dismiss() {
+        dismissed = true;
+        show(false);
+    }
+    function focus(index) {
+        focusIndex = (index + ACTIONS.length) % ACTIONS.length;
+        roving();
+        buttons[focusIndex]?.focus();
+    }
+    function roving() {
+        for (let i = 0, n = buttons.length; i < n; i++) {
+            buttons[i].tabIndex = i === focusIndex ? 0 : -1;
+        }
+    }
+    function settle() {
+        if (!pressing) {
+            return;
+        }
+        pressing = false;
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(sync);
+    }
+    function show(next, instant = false) {
+        state.open = next;
+        if (!toolbar) {
+            return;
+        }
+        toolbar.classList.toggle('--active', next);
+        toolbar.classList.toggle('selection-toolbar-toolbar--instant', instant);
+        toolbar.inert = !next;
+        toolbar.setAttribute('aria-hidden', next ? 'false' : 'true');
+    }
+    function sync() {
+        if (!editor || !root || !toolbar) {
+            return;
+        }
+        let selection = window.getSelection(), range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+        if (!range || range.collapsed || !editor.contains(range.commonAncestorContainer)) {
+            if (toolbar.contains(document.activeElement)) {
+                return;
+            }
+            if (state.open) {
+                show(false);
+            }
+            return;
+        }
+        if (pressing) {
+            return;
+        }
+        if (dismissed) {
+            if (same(saved, range)) {
+                return;
+            }
+            dismissed = false;
+        }
+        saved = range.cloneRange();
+        let bounds = range.getBoundingClientRect(), box = root.getBoundingClientRect(), h = toolbar.offsetHeight, lines = [...range.getClientRects()].filter((rect) => rect.width > 0), w = toolbar.offsetWidth;
+        let first = lines[0] ?? bounds, last = lines[lines.length - 1] ?? bounds;
+        let below = first.top - box.top < h + GAP || first.top < h + GAP, center = bounds.left + bounds.width / 2 - box.left;
+        let left = Math.min(Math.max(center - w / 2, 0), box.width - w), top = below ? last.bottom - box.top + GAP : first.top - box.top - h - GAP;
+        toolbar.style.transformOrigin = `${center - left}px ${below ? 0 : h}px`;
+        if (!state.open || reduced()) {
+            toolbar.classList.add('selection-toolbar-toolbar--jump');
+            toolbar.style.translate = `${left}px ${top}px`;
+            void toolbar.offsetWidth;
+            toolbar.classList.remove('selection-toolbar-toolbar--jump');
+        }
+        else {
+            toolbar.style.translate = `${left}px ${top}px`;
+        }
+        for (let i = 0, n = FORMATS.length; i < n; i++) {
+            let start = closest(range.startContainer, TAGS[FORMATS[i]], editor);
+            buttons[i]?.setAttribute('aria-pressed', start && start === closest(range.endContainer, TAGS[FORMATS[i]], editor) ? 'true' : 'false');
+        }
+        if (!state.open) {
+            focusIndex = 0;
+            roving();
+            show(true);
+        }
+    }
+    function toggle(format) {
+        let range = current();
+        if (!editor || !range) {
+            return;
+        }
+        let end = closest(range.endContainer, TAGS[format], editor), next = document.createRange(), start = closest(range.startContainer, TAGS[format], editor);
+        if (start && start === end) {
+            let firstChild = start.firstChild, lastChild = start.lastChild;
+            unwrap(start);
+            if (!firstChild || !lastChild) {
+                return;
+            }
+            next.setStartBefore(firstChild);
+            next.setEndAfter(lastChild);
+            live.text = `${LABELS[format]} off`;
+        }
+        else {
+            let element = document.createElement(TAGS[format]), fragment = range.extractContents();
+            fragment.querySelectorAll(TAGS[format]).forEach(unwrap);
+            if (format === 'link') {
+                element.setAttribute('href', href);
+            }
+            element.appendChild(fragment);
+            range.insertNode(element);
+            next.selectNodeContents(element);
+            live.text = `${LABELS[format]} on`;
+        }
+        editor.querySelectorAll(Object.values(TAGS).join(',')).forEach((element) => {
+            if (!element.textContent) {
+                element.remove();
+            }
+        });
+        select(next);
+    }
+    return (() => {
+        let root_0zx3wuh7 = template_0zx3wuh8(), element_0zx3wuh9 = root_0zx3wuh7.firstChild, element_0zx3wuha = element_0zx3wuh9.firstElementChild, element_0zx3wuhb = element_0zx3wuha.nextElementSibling, element_0zx3wuhc = element_0zx3wuhb.nextElementSibling;
+        template_u1.setProperties(element_0zx3wuh9, this?.attributes);
+        template_u1.setProperties(element_0zx3wuh9, attributes);
+        template_u1.onconnect(element_0zx3wuh9, (element) => {
+            root = element;
+            editor = element.querySelector('.selection-toolbar-editor') ?? undefined;
+            toolbar = element.querySelector('.selection-toolbar-toolbar') ?? undefined;
+            buttons = [...element.querySelectorAll('.selection-toolbar-button')];
+            for (let i = 0, n = FORMATS.length; i < n; i++) {
+                buttons[i]?.setAttribute('aria-pressed', 'false');
+            }
+            let bar = toolbar, prevent = (e) => e.preventDefault();
+            bar?.addEventListener('mousedown', prevent);
+            release = () => bar?.removeEventListener('mousedown', prevent);
+            observer = new ResizeObserver(sync);
+            observer.observe(element);
+            roving();
+        });
+        template_u1.ondisconnect(element_0zx3wuh9, () => {
+            cancelAnimationFrame(frame);
+            clearTimeout(copyTimer);
+            observer?.disconnect();
+            release?.();
+        });
+        template_u1.ondocument(element_0zx3wuh9, 'selectionchange', sync);
+        template_u1.on(element_0zx3wuh9, 'focusout', (e) => {
+            if (state.open && !root?.contains(e.relatedTarget)) {
+                show(false);
+            }
+        });
+        template_u1.onwindow(element_0zx3wuh9, 'pointercancel', settle);
+        template_u1.onwindow(element_0zx3wuh9, 'pointerup', settle);
+        template_u1.setProperty(element_0zx3wuha, 'aria-label', label);
+        template_u1.delegate(element_0zx3wuha, 'keydown', (e) => {
+            let mod = e.metaKey || e.ctrlKey;
+            if (mod && !e.altKey && (e.key === 'b' || e.key === 'i')) {
+                e.preventDefault();
+                if (current()) {
+                    toggle(e.key === 'b' ? 'bold' : 'italic');
+                }
+                return;
+            }
+            if (e.key === 'Escape' && state.open) {
+                e.preventDefault();
+                dismiss();
+                return;
+            }
+            if (state.open && !mod && (e.key.length === 1 || e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Enter')) {
+                show(false, true);
+            }
+        });
+        template_u1.delegate(element_0zx3wuha, 'pointerdown', (e) => {
+            if (e.button === 0) {
+                pressing = true;
+            }
+        });
+        template_u1.on(element_0zx3wuha, 'scroll', sync);
+        template_u1.setProperties(element_0zx3wuha, this?.attributes?.[SELECTION_TOOLBAR_EDITOR]);
+        template_u1.setProperties(element_0zx3wuha, attributes[SELECTION_TOOLBAR_EDITOR]);
+        template_u1.slot(element_0zx3wuha, content, 1);
+        template_u1.delegate(element_0zx3wuhb, 'keydown', (e) => {
+            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+                e.preventDefault();
+                focus(focusIndex + (e.key === 'ArrowRight' ? 1 : -1));
+            }
+            else if (e.key === 'Home' || e.key === 'End') {
+                e.preventDefault();
+                focus(e.key === 'Home' ? 0 : -1);
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                dismiss();
+                editor?.focus({ preventScroll: true });
+                let range = current();
+                if (range) {
+                    select(range);
+                }
+            }
+        });
+        template_u1.setProperties(element_0zx3wuhb, this?.attributes?.[SELECTION_TOOLBAR_TOOLBAR]);
+        template_u1.setProperties(element_0zx3wuhb, attributes[SELECTION_TOOLBAR_TOOLBAR]);
+        template_u1.slot(element_0zx3wuhb, ACTIONS.map((action, i) => (action === "bold" ? (() => {
+            let root_0zx3wuhd = template_0zx3wuhe(), element_0zx3wuhf = root_0zx3wuhd.firstChild;
+            template_u1.setProperty(element_0zx3wuhf, 'aria-label', action === 'copy' ? 'Copy' : LABELS[action]);
+            template_u1.setList(element_0zx3wuhf, 'class', () => action === 'copy' && state.copied && '--active');
+            template_u1.delegate(element_0zx3wuhf, 'click', () => {
+                if (action === 'copy') {
+                    void copy();
+                }
+                else {
+                    toggle(action);
+                }
+            });
+            template_u1.on(element_0zx3wuhf, 'focus', () => {
+                focusIndex = i;
+                roving();
+            });
+            template_u1.slot(element_0zx3wuhf, icon(action), 1);
+            return root_0zx3wuhd;
+        })() : action === "copy" ? (() => {
+            let root_0zx3wuhg = template_0zx3wuhh(), element_0zx3wuhi = root_0zx3wuhg.firstChild, element_0zx3wuhj = element_0zx3wuhi.nextSibling;
+            template_u1.slot(element_0zx3wuhi, action === 'copy' ? template_0zx3wuhk() : '');
+            template_u1.setList(element_0zx3wuhj, 'class', () => action === 'copy' && state.copied && '--active');
+            template_u1.delegate(element_0zx3wuhj, 'click', () => {
+                if (action === 'copy') {
+                    void copy();
+                }
+                else {
+                    toggle(action);
+                }
+            });
+            template_u1.on(element_0zx3wuhj, 'focus', () => {
+                focusIndex = i;
+                roving();
+            });
+            template_u1.slot(element_0zx3wuhj, icon(action), 1);
+            return root_0zx3wuhg;
+        })() : action === "highlight" ? (() => {
+            let root_0zx3wuhl = template_0zx3wuhe(), element_0zx3wuhm = root_0zx3wuhl.firstChild;
+            template_u1.setProperty(element_0zx3wuhm, 'aria-label', action === 'copy' ? 'Copy' : LABELS[action]);
+            template_u1.setList(element_0zx3wuhm, 'class', () => action === 'copy' && state.copied && '--active');
+            template_u1.delegate(element_0zx3wuhm, 'click', () => {
+                if (action === 'copy') {
+                    void copy();
+                }
+                else {
+                    toggle(action);
+                }
+            });
+            template_u1.on(element_0zx3wuhm, 'focus', () => {
+                focusIndex = i;
+                roving();
+            });
+            template_u1.slot(element_0zx3wuhm, icon(action), 1);
+            return root_0zx3wuhl;
+        })() : action === "italic" ? (() => {
+            let root_0zx3wuhn = template_0zx3wuhe(), element_0zx3wuho = root_0zx3wuhn.firstChild;
+            template_u1.setProperty(element_0zx3wuho, 'aria-label', action === 'copy' ? 'Copy' : LABELS[action]);
+            template_u1.setList(element_0zx3wuho, 'class', () => action === 'copy' && state.copied && '--active');
+            template_u1.delegate(element_0zx3wuho, 'click', () => {
+                if (action === 'copy') {
+                    void copy();
+                }
+                else {
+                    toggle(action);
+                }
+            });
+            template_u1.on(element_0zx3wuho, 'focus', () => {
+                focusIndex = i;
+                roving();
+            });
+            template_u1.slot(element_0zx3wuho, icon(action), 1);
+            return root_0zx3wuhn;
+        })() : action === "link" ? (() => {
+            let root_0zx3wuhp = template_0zx3wuhe(), element_0zx3wuhq = root_0zx3wuhp.firstChild;
+            template_u1.setProperty(element_0zx3wuhq, 'aria-label', action === 'copy' ? 'Copy' : LABELS[action]);
+            template_u1.setList(element_0zx3wuhq, 'class', () => action === 'copy' && state.copied && '--active');
+            template_u1.delegate(element_0zx3wuhq, 'click', () => {
+                if (action === 'copy') {
+                    void copy();
+                }
+                else {
+                    toggle(action);
+                }
+            });
+            template_u1.on(element_0zx3wuhq, 'focus', () => {
+                focusIndex = i;
+                roving();
+            });
+            template_u1.slot(element_0zx3wuhq, icon(action), 1);
+            return root_0zx3wuhp;
+        })() : (() => {
+            let root_0zx3wuhr = template_0zx3wuhs(), element_0zx3wuht = root_0zx3wuhr.firstChild, element_0zx3wuhu = element_0zx3wuht.nextSibling;
+            template_u1.slot(element_0zx3wuht, action === 'copy' ? template_0zx3wuhk() : '');
+            template_u1.setProperty(element_0zx3wuhu, 'aria-label', action === 'copy' ? 'Copy' : LABELS[action]);
+            template_u1.setList(element_0zx3wuhu, 'class', () => action === 'copy' && state.copied && '--active');
+            template_u1.delegate(element_0zx3wuhu, 'click', () => {
+                if (action === 'copy') {
+                    void copy();
+                }
+                else {
+                    toggle(action);
+                }
+            });
+            template_u1.on(element_0zx3wuhu, 'focus', () => {
+                focusIndex = i;
+                roving();
+            });
+            template_u1.slot(element_0zx3wuhu, icon(action), 1);
+            return root_0zx3wuhr;
+        })())), 1);
+        new template_u1.EffectSlot(element_0zx3wuhc, () => live.text, 1);
+        return root_0zx3wuh7;
+    })();
+}), { editor: SELECTION_TOOLBAR_EDITOR, toolbar: SELECTION_TOOLBAR_TOOLBAR });

package/build/components/selection-toolbar/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.selection-toolbar{--selection-toolbar-background:var(--color-grey-400);--selection-toolbar-box-shadow:0 0 0 1px color-mix(in oklab, var(--color-black-300) 6%, transparent), 0 1px 2px color-mix(in oklab, var(--color-black-300) 6%, transparent), 0 6px 16px -6px color-mix(in oklab, var(--color-black-300) 12%, transparent);--selection-toolbar-button-size:36px;--selection-toolbar-color:var(--color-text-500);--selection-toolbar-color-muted:var(--color-text-300);--selection-toolbar-divider-color:var(--color-border-300);--selection-toolbar-ease:cubic-bezier(.23, 1, .32, 1);--selection-toolbar-focus-color:color-mix(in oklab, var(--color-text-500) 38%, transparent);--selection-toolbar-follow:linear(0, .057, .18, .321, .455, .573, .671, .75, .812, .86, .896, .924, .944, .96, .971, .979, .985, .989, .992, .994, .996, .997, .998, .999, 1);--selection-toolbar-follow-duration:.41s;--selection-toolbar-font-size:15px;--selection-toolbar-icon-size:16px;--selection-toolbar-mark:color-mix(in oklab, var(--color-text-500) 15%, transparent);--selection-toolbar-spring:linear(0, .057, .18, .321, .455, .573, .671, .75, .812, .86, .896, .924, .944, .96, .971, .979, .985, .989, .992, .994, .996, .997, .998, .999, 1)}.selection-toolbar--white{--selection-toolbar-background:var(--color-white-300)}.selection-toolbar{position:relative}.selection-toolbar-button.button{--background-default:transparent;--background-hover:color-mix(in oklab, var(--selection-toolbar-color) 6%, transparent);--border-radius:var(--border-radius-400);--color-default:var(--selection-toolbar-color-muted);--color-hover:var(--selection-toolbar-color);--padding-horizontal:0px;--padding-vertical:0px;height:var(--selection-toolbar-button-size);touch-action:manipulation;-webkit-user-select:none;user-select:none;width:var(--selection-toolbar-button-size);border:0;outline:none;transition:background-color .15s ease-out,color .15s ease-out,scale .15s ease-out}.selection-toolbar-button.button:active{scale:.96}.selection-toolbar-button.button:focus-visible{outline:2px solid var(--selection-toolbar-focus-color)}.selection-toolbar-button.button[aria-pressed=true]{--background-default:color-mix(in oklab, var(--selection-toolbar-color) 8%, transparent);--background-hover:color-mix(in oklab, var(--selection-toolbar-color) 10%, transparent);--color-default:var(--selection-toolbar-color)}.selection-toolbar-divider{background:var(--selection-toolbar-divider-color);width:1px;height:20px;margin-inline:4px}.selection-toolbar-editor{border-radius:var(--border-radius-400);caret-color:var(--selection-toolbar-color);color:var(--selection-toolbar-color-muted);font-size:var(--selection-toolbar-font-size);text-wrap:pretty;outline:none;height:100%;line-height:1.625;overflow-y:auto}.selection-toolbar-editor:focus-visible{outline:2px solid var(--selection-toolbar-focus-color);outline-offset:4px}.selection-toolbar-editor ::selection{background:var(--selection-toolbar-mark);color:var(--selection-toolbar-color)}.selection-toolbar-editor a{color:var(--selection-toolbar-color);text-decoration:underline;-webkit-text-decoration-color:color-mix(in oklab, var(--selection-toolbar-color) 40%, transparent);-webkit-text-decoration-color:color-mix(in oklab, var(--selection-toolbar-color) 40%, transparent);text-decoration-color:color-mix(in oklab, var(--selection-toolbar-color) 40%, transparent);text-underline-offset:4px}.selection-toolbar-editor em{color:var(--selection-toolbar-color)}.selection-toolbar-editor mark{background:var(--selection-toolbar-mark);border-radius:var(--border-radius-100);color:var(--selection-toolbar-color)}.selection-toolbar-editor p{margin:0}.selection-toolbar-editor p+p{margin-top:12px}.selection-toolbar-editor strong{color:var(--selection-toolbar-color);font-weight:var(--font-weight-600)}.selection-toolbar-icon{fill:none;height:var(--selection-toolbar-icon-size);stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;width:var(--selection-toolbar-icon-size);grid-area:1/1}.selection-toolbar-icon--check,.selection-toolbar-icon--copy{transition:filter .3s var(--selection-toolbar-spring), opacity .3s var(--selection-toolbar-spring), scale .3s var(--selection-toolbar-spring)}.selection-toolbar-icon--check{filter:blur(4px);opacity:0;scale:.25}.selection-toolbar-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.selection-toolbar-swap{display:grid}.selection-toolbar-toolbar{background:var(--selection-toolbar-background);border-radius:var(--border-radius-600);box-shadow:var(--selection-toolbar-box-shadow);opacity:0;pointer-events:none;transition:opacity .1s var(--selection-toolbar-ease), scale .1s var(--selection-toolbar-ease), translate var(--selection-toolbar-follow-duration) var(--selection-toolbar-follow);z-index:10;align-items:center;gap:2px;padding:4px;display:flex;position:absolute;top:0;left:0;scale:.96}.selection-toolbar-toolbar.--active{opacity:1;pointer-events:auto;transition:opacity .18s var(--selection-toolbar-ease), scale .18s var(--selection-toolbar-ease), translate var(--selection-toolbar-follow-duration) var(--selection-toolbar-follow);scale:1}.selection-toolbar-toolbar--instant,.selection-toolbar-toolbar--jump{transition:none}.selection-toolbar .selection-toolbar-button.--active .selection-toolbar-icon--check{filter:blur();opacity:1;scale:1}.selection-toolbar .selection-toolbar-button.--active .selection-toolbar-icon--copy{filter:blur(4px);opacity:0;scale:.25}@media (prefers-reduced-motion:reduce){.selection-toolbar-button.button{transition:background-color .15s ease-out,color .15s ease-out}.selection-toolbar-button.button:active{scale:1}.selection-toolbar-icon--check,.selection-toolbar-icon--copy{transition-property:opacity}.selection-toolbar-toolbar,.selection-toolbar-toolbar.--active{transition-property:opacity;scale:1}.selection-toolbar .selection-toolbar-button.--active .selection-toolbar-icon{filter:none;scale:1}}}
+/*$vite$:1*/

package/build/components/settings/index.d.ts

@@ -0,0 +1,43 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes<HTMLDialogElement> & {
+    groups: Group[];
+    labels?: {
+        close?: string;
+        saved?: string;
+        title?: string;
+    };
+    oncancel?: never;
+    onclick?: never;
+    onclose?: never;
+    onconnect?: never;
+    ondisconnect?: never;
+    state?: State;
+};
+type Group = {
+    items: Item[];
+    label: Renderable<unknown>;
+};
+type Item = Attributes & {
+    content: Renderable<unknown>;
+    icon?: string;
+    id?: string;
+    onclick?: never;
+    render?: () => Renderable<unknown>;
+};
+type State = {
+    active: boolean;
+    saved: boolean;
+    selected?: string;
+};
+declare const _default: {
+    (): Renderable<any>;
+    <T extends A>(attributes: T): Renderable<any>;
+    <T extends Renderable<any>>(content: T): Renderable<any>;
+    (attributes: A, content?: Renderable<any>): Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: Renderable<any>;
+    }): any;
+};
+export default _default;