@esportsplus/ui 0.54.0 → 0.56.2

package/build/components/checkbox/index.js

@@ -1,13 +1,13 @@
-import * as template_u0 from '@esportsplus/template';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
 import form from '../form/index.js';
 import icon from '../icon/index.js';
 import check from './svg/check.svg';
 import './scss/index.scss';
-const template_u6 = template_u0.template(`<div class='checkbox ' ><input class='checkbox-tag' type=checkbox >`);
-const template_ua = template_u0.template(`<div class='checkbox ' ><input class='checkbox-tag' type=radio >`);
-const template_uh = template_u0.template(`<div class='checkbox ' ><input class='checkbox-tag' >`);
+const template_0l38kpg2 = template_u1.template(`<div class='checkbox '><input class='checkbox-tag' type=checkbox value='1'>`);
+const template_0l38kpg6 = template_u1.template(`<div class='checkbox '><input class='checkbox-tag' type=radio value='1'>`);
+const template_0l38kpgd = template_u1.template(`<div class='checkbox '><input class='checkbox-tag' value='1'>`);
 class ReactiveObject_0l38kpg0 extends reactivity_u0.ReactiveObject {
     #error = this[reactivity_u0.SIGNAL]('');
     constructor() {
@@ -20,66 +20,50 @@ class ReactiveObject_0l38kpg0 extends reactivity_u0.ReactiveObject {
         reactivity_u0.write(this.#error, _v0);
     }
 }
-const OMIT = ['aria-label', 'checked', 'id', 'name', 'state', 'value'];
-const factory = (type) => {
-    function template(attributes) {
-        let state = attributes?.state || new ReactiveObject_0l38kpg0();
-        return (type === "checkbox" ? (() => {
-            let root_u5 = template_u6(), element_u7 = root_u5.firstChild, element_u8 = element_u7.firstElementChild;
-            template_u0.setList(element_u7, 'class', (type === 'radio' || type === 'switch') && `checkbox--${type}`);
-            template_u0.setProperties(element_u7, this?.attributes && omit(this.attributes, OMIT));
-            template_u0.setProperties(element_u7, attributes && omit(attributes, OMIT));
-            template_u0.setProperty(element_u8, 'aria-label', attributes?.['aria-label'] ?? this?.attributes?.['aria-label']);
-            template_u0.setProperty(element_u8, 'checked', attributes?.checked);
-            template_u0.setProperty(element_u8, 'id', attributes?.id ?? this?.attributes?.id);
-            template_u0.setProperty(element_u8, 'name', attributes?.name ?? this?.attributes?.name);
-            template_u0.onrender(element_u8, form.input.onrender(state));
-            template_u0.setProperty(element_u8, 'value', attributes?.value ?? 1);
-            template_u0.slot(element_u7, type === 'checkbox' && icon({ 'aria-hidden': true, class: 'checkbox-check' }, check), 2);
-            return root_u5;
-        })() : type === "radio" ? (() => {
-            let root_u9 = template_ua(), element_ub = root_u9.firstChild, element_uc = element_ub.firstElementChild;
-            template_u0.setList(element_ub, 'class', (type === 'radio' || type === 'switch') && `checkbox--${type}`);
-            template_u0.setProperties(element_ub, this?.attributes && omit(this.attributes, OMIT));
-            template_u0.setProperties(element_ub, attributes && omit(attributes, OMIT));
-            template_u0.setProperty(element_uc, 'aria-label', attributes?.['aria-label'] ?? this?.attributes?.['aria-label']);
-            template_u0.setProperty(element_uc, 'checked', attributes?.checked);
-            template_u0.setProperty(element_uc, 'id', attributes?.id ?? this?.attributes?.id);
-            template_u0.setProperty(element_uc, 'name', attributes?.name ?? this?.attributes?.name);
-            template_u0.onrender(element_uc, form.input.onrender(state));
-            template_u0.setProperty(element_uc, 'value', attributes?.value ?? 1);
-            template_u0.slot(element_ub, type === 'checkbox' && icon({ 'aria-hidden': true, class: 'checkbox-check' }, check), 2);
-            return root_u9;
-        })() : type === "switch" ? (() => {
-            let root_ud = template_u6(), element_ue = root_ud.firstChild, element_uf = element_ue.firstElementChild;
-            template_u0.setList(element_ue, 'class', (type === 'radio' || type === 'switch') && `checkbox--${type}`);
-            template_u0.setProperties(element_ue, this?.attributes && omit(this.attributes, OMIT));
-            template_u0.setProperties(element_ue, attributes && omit(attributes, OMIT));
-            template_u0.setProperty(element_uf, 'aria-label', attributes?.['aria-label'] ?? this?.attributes?.['aria-label']);
-            template_u0.setProperty(element_uf, 'checked', attributes?.checked);
-            template_u0.setProperty(element_uf, 'id', attributes?.id ?? this?.attributes?.id);
-            template_u0.setProperty(element_uf, 'name', attributes?.name ?? this?.attributes?.name);
-            template_u0.onrender(element_uf, form.input.onrender(state));
-            template_u0.setProperty(element_uf, 'value', attributes?.value ?? 1);
-            template_u0.slot(element_ue, type === 'checkbox' && icon({ 'aria-hidden': true, class: 'checkbox-check' }, check), 2);
-            return root_ud;
-        })() : (() => {
-            let root_ug = template_uh(), element_ui = root_ug.firstChild, element_uj = element_ui.firstElementChild;
-            template_u0.setList(element_ui, 'class', (type === 'radio' || type === 'switch') && `checkbox--${type}`);
-            template_u0.setProperties(element_ui, this?.attributes && omit(this.attributes, OMIT));
-            template_u0.setProperties(element_ui, attributes && omit(attributes, OMIT));
-            template_u0.setProperty(element_uj, 'aria-label', attributes?.['aria-label'] ?? this?.attributes?.['aria-label']);
-            template_u0.setProperty(element_uj, 'checked', attributes?.checked);
-            template_u0.setProperty(element_uj, 'id', attributes?.id ?? this?.attributes?.id);
-            template_u0.setProperty(element_uj, 'name', attributes?.name ?? this?.attributes?.name);
-            template_u0.onrender(element_uj, form.input.onrender(state));
-            template_u0.setProperty(element_uj, 'type', type === 'radio' ? 'radio' : 'checkbox');
-            template_u0.setProperty(element_uj, 'value', attributes?.value ?? 1);
-            template_u0.slot(element_ui, type === 'checkbox' && icon({ 'aria-hidden': true, class: 'checkbox-check' }, check), 2);
-            return root_ug;
-        })());
-    }
-    return template;
-};
+const CHECKBOX_INPUT = Symbol.for('@esportsplus/ui/checkbox.input');
+const factory = Object.assign((type) => component(function ({ state = new ReactiveObject_0l38kpg0(), ...attributes }) {
+    return (type === "checkbox" ? (() => {
+        let root_0l38kpg1 = template_0l38kpg2(), element_0l38kpg3 = root_0l38kpg1.firstChild, element_0l38kpg4 = element_0l38kpg3.firstElementChild;
+        template_u1.setList(element_0l38kpg3, 'class', (type === 'radio' || type === 'switch') && `checkbox--${type}`);
+        template_u1.setProperties(element_0l38kpg3, this?.attributes);
+        template_u1.setProperties(element_0l38kpg3, attributes);
+        template_u1.onrender(element_0l38kpg4, form.input.onrender(state));
+        template_u1.setProperties(element_0l38kpg4, this?.attributes?.[CHECKBOX_INPUT]);
+        template_u1.setProperties(element_0l38kpg4, attributes[CHECKBOX_INPUT]);
+        template_u1.slot(element_0l38kpg3, type === 'checkbox' && icon({ 'aria-hidden': true, class: 'checkbox-check' }, check), 2);
+        return root_0l38kpg1;
+    })() : type === "radio" ? (() => {
+        let root_0l38kpg5 = template_0l38kpg6(), element_0l38kpg7 = root_0l38kpg5.firstChild, element_0l38kpg8 = element_0l38kpg7.firstElementChild;
+        template_u1.setList(element_0l38kpg7, 'class', (type === 'radio' || type === 'switch') && `checkbox--${type}`);
+        template_u1.setProperties(element_0l38kpg7, this?.attributes);
+        template_u1.setProperties(element_0l38kpg7, attributes);
+        template_u1.onrender(element_0l38kpg8, form.input.onrender(state));
+        template_u1.setProperties(element_0l38kpg8, this?.attributes?.[CHECKBOX_INPUT]);
+        template_u1.setProperties(element_0l38kpg8, attributes[CHECKBOX_INPUT]);
+        template_u1.slot(element_0l38kpg7, type === 'checkbox' && icon({ 'aria-hidden': true, class: 'checkbox-check' }, check), 2);
+        return root_0l38kpg5;
+    })() : type === "switch" ? (() => {
+        let root_0l38kpg9 = template_0l38kpg2(), element_0l38kpga = root_0l38kpg9.firstChild, element_0l38kpgb = element_0l38kpga.firstElementChild;
+        template_u1.setList(element_0l38kpga, 'class', (type === 'radio' || type === 'switch') && `checkbox--${type}`);
+        template_u1.setProperties(element_0l38kpga, this?.attributes);
+        template_u1.setProperties(element_0l38kpga, attributes);
+        template_u1.onrender(element_0l38kpgb, form.input.onrender(state));
+        template_u1.setProperties(element_0l38kpgb, this?.attributes?.[CHECKBOX_INPUT]);
+        template_u1.setProperties(element_0l38kpgb, attributes[CHECKBOX_INPUT]);
+        template_u1.slot(element_0l38kpga, type === 'checkbox' && icon({ 'aria-hidden': true, class: 'checkbox-check' }, check), 2);
+        return root_0l38kpg9;
+    })() : (() => {
+        let root_0l38kpgc = template_0l38kpgd(), element_0l38kpge = root_0l38kpgc.firstChild, element_0l38kpgf = element_0l38kpge.firstElementChild;
+        template_u1.setList(element_0l38kpge, 'class', (type === 'radio' || type === 'switch') && `checkbox--${type}`);
+        template_u1.setProperties(element_0l38kpge, this?.attributes);
+        template_u1.setProperties(element_0l38kpge, attributes);
+        template_u1.onrender(element_0l38kpgf, form.input.onrender(state));
+        template_u1.setProperty(element_0l38kpgf, 'type', type === 'radio' ? 'radio' : 'checkbox');
+        template_u1.setProperties(element_0l38kpgf, this?.attributes?.[CHECKBOX_INPUT]);
+        template_u1.setProperties(element_0l38kpgf, attributes[CHECKBOX_INPUT]);
+        template_u1.slot(element_0l38kpge, type === 'checkbox' && icon({ 'aria-hidden': true, class: 'checkbox-check' }, check), 2);
+        return root_0l38kpgc;
+    })());
+}, { input: CHECKBOX_INPUT }), { input: CHECKBOX_INPUT });
 export default factory('checkbox');
 export { factory };

package/build/components/checkbox/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.checkbox{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--border-radius:var(--border-radius-300);--border-style:solid;--border-width:0px;--border-width-offset:0px;--border-width-offset-hover:1px;--box-shadow:var(--box-shadow-default);--box-shadow-active:0 3px 8px color-mix(in srgb, var(--background-active) 22%, transparent);--box-shadow-default:none;--box-shadow-hover:var(--box-shadow-default);--box-shadow-pressed:var(--box-shadow-default);--check-linecap:round;--check-linejoin:round;--check-size:80%;--check-stroke-width:4;--check-timing-function:ease;--focus-color:var(--border-color-active);--focus-offset:2px;--focus-width:2px;--height:var(--size);--indicator-color:var(--indicator-color-default);--indicator-color-active:var(--indicator-color-default);--indicator-color-default:var(--color-white-400);--indicator-color-hover:var(--indicator-color-default);--indicator-color-pressed:var(--indicator-color-default);--scale:var(--scale-default);--scale-active:1;--scale-default:.92;--scale-hover:.96;--scale-pressed:var(--scale-default);--size:var(--size-500);--transition-duration:.28s;--transition-timing-function:cubic-bezier(.34, 1.56, .64, 1);--width:var(--height)}.checkbox--radio:before,.checkbox--switch:before{--box-shadow:0 2px 4px #0003}.checkbox--radio{--border-radius:100%;--scale-default:0;--scale-hover:0}.checkbox--radio:before{--height:var(--size-200);--width:var(--size-200)}.checkbox--switch{--border-width-offset-hover:0px;--box-shadow-active:var(--box-shadow-default);--focus-color:var(--background-active);--padding-horizontal:2px;--padding-vertical:2px;--width:var(--width-rail);--width-rail:calc(var(--height) * 1.8)}.checkbox--switch:before{--translateX:0px;--width:var(--height)}.checkbox--switch:has(input:checked):before{--translateX:calc(var(--width-rail) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2))}.checkbox:not(:has(input:checked)):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--border-width-offset:var(--border-width-offset-hover);--box-shadow:var(--box-shadow-hover);--indicator-color:var(--indicator-color-hover);--scale:var(--scale-hover)}label:hover .checkbox:not(:has(input:checked)){--background:var(--background-hover);--border-color:var(--border-color-hover);--border-width-offset:var(--border-width-offset-hover);--box-shadow:var(--box-shadow-hover);--indicator-color:var(--indicator-color-hover);--scale:var(--scale-hover)}.checkbox:not(:has(input:checked)):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--indicator-color:var(--indicator-color-pressed);--scale:var(--scale-pressed)}label:active .checkbox:not(:has(input:checked)){--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--indicator-color:var(--indicator-color-pressed);--scale:var(--scale-pressed)}.checkbox:has(input:checked){--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--indicator-color:var(--indicator-color-active);--scale:var(--scale-active)}.checkbox{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:calc(var(--border-width) + var(--border-width-offset));box-shadow:var(--box-shadow);cursor:pointer;flex:0 0 var(--width);height:var(--height);pointer-events:none;transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), border-width var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function);width:var(--width);position:relative}.checkbox--radio:before,.checkbox--switch:before{background:var(--indicator-color);box-shadow:var(--box-shadow);content:"";pointer-events:none;transform-origin:50%;transition:transform var(--transition-duration) var(--transition-timing-function);width:var(--width)}.checkbox--radio:before{border-radius:calc(var(--border-radius) - var(--height) / 2);height:var(--height);transform:scale(var(--scale));margin:auto;position:absolute;inset:0}.checkbox--switch:before{top:var(--padding-vertical);left:var(--padding-horizontal);border-radius:calc(var(--border-radius) - var(--padding-vertical) / 1.5);height:calc(var(--height) - var(--border-width) * 2 - var(--padding-vertical) * 2);transform:translateX(var(--translateX)) scale(var(--scale));position:absolute}.checkbox:has(input:checked) .checkbox-check svg{stroke-dashoffset:0}.checkbox:has(>.checkbox-tag:focus-visible,>.radio-tag:focus-visible,>.switch-tag:focus-visible){outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}.checkbox .checkbox-check{height:var(--check-size);pointer-events:none;width:var(--check-size);margin:auto;position:absolute;inset:0 0 0 1px}.checkbox .checkbox-check svg{fill:none;stroke:var(--indicator-color);stroke-width:var(--check-stroke-width);stroke-linecap:var(--check-linecap);stroke-linejoin:var(--check-linejoin);stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke-dashoffset var(--transition-duration) var(--check-timing-function)}.checkbox-tag{cursor:inherit;opacity:0;pointer-events:all;z-index:1;width:100%;height:100%;margin:0;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.checkbox,.checkbox:before,.checkbox .checkbox-check svg{transition:none}}}
+@layer components {.checkbox{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--border-radius:var(--border-radius-300);--border-style:solid;--border-width:0px;--border-width-offset:0px;--border-width-offset-hover:1px;--box-shadow:var(--box-shadow-default);--box-shadow-active:0 3px 8px color-mix(in srgb, var(--background-active) 22%, transparent);--box-shadow-default:none;--box-shadow-hover:var(--box-shadow-default);--box-shadow-pressed:var(--box-shadow-default);--check-linecap:round;--check-linejoin:round;--check-size:80%;--check-stroke-width:4;--check-timing-function:ease;--focus-color:var(--border-color-active);--focus-offset:2px;--focus-width:2px;--height:var(--size);--indicator-color:var(--indicator-color-default);--indicator-color-active:var(--indicator-color-default);--indicator-color-default:var(--color-white-400);--indicator-color-hover:var(--indicator-color-default);--indicator-color-pressed:var(--indicator-color-default);--scale:var(--scale-default);--scale-active:1;--scale-default:.92;--scale-hover:.96;--scale-pressed:var(--scale-default);--size:var(--size-500);--transition-duration:.28s;--transition-timing-function:cubic-bezier(.34, 1.56, .64, 1);--width:var(--height)}.checkbox--radio:before,.checkbox--switch:before{--box-shadow:0 2px 4px #0003}.checkbox--radio{--border-radius:100%;--scale-default:0;--scale-hover:0}.checkbox--radio:before{--height:var(--size-200);--width:var(--size-200)}.checkbox--switch{--border-width-offset-hover:0px;--box-shadow-active:var(--box-shadow-default);--focus-color:var(--background-active);--padding-horizontal:2px;--padding-vertical:2px;--width:var(--width-rail);--width-rail:calc(var(--height) * 1.8)}.checkbox--switch:before{--translateX:0px;--width:var(--height)}.checkbox--switch:has(input:checked):before{--translateX:calc(var(--width-rail) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2))}.checkbox:not(:has(input:checked)):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--border-width-offset:var(--border-width-offset-hover);--box-shadow:var(--box-shadow-hover);--indicator-color:var(--indicator-color-hover);--scale:var(--scale-hover)}label:hover .checkbox:not(:has(input:checked)){--background:var(--background-hover);--border-color:var(--border-color-hover);--border-width-offset:var(--border-width-offset-hover);--box-shadow:var(--box-shadow-hover);--indicator-color:var(--indicator-color-hover);--scale:var(--scale-hover)}.checkbox:not(:has(input:checked)):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--indicator-color:var(--indicator-color-pressed);--scale:var(--scale-pressed)}label:active .checkbox:not(:has(input:checked)){--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--indicator-color:var(--indicator-color-pressed);--scale:var(--scale-pressed)}.checkbox:has(input:checked){--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--indicator-color:var(--indicator-color-active);--scale:var(--scale-active)}.checkbox{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:calc(var(--border-width) + var(--border-width-offset));box-shadow:var(--box-shadow);cursor:pointer;flex:0 0 var(--width);height:var(--height);pointer-events:none;transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), border-width var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function);width:var(--width);position:relative}.checkbox--radio:before,.checkbox--switch:before{background:var(--indicator-color);box-shadow:var(--box-shadow);content:"";pointer-events:none;transform-origin:50%;transition:scale var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);width:var(--width)}.checkbox--radio:before{border-radius:calc(var(--border-radius) - var(--height) / 2);height:var(--height);scale:var(--scale);margin:auto;position:absolute;inset:0}.checkbox--switch:before{top:var(--padding-vertical);left:var(--padding-horizontal);border-radius:calc(var(--border-radius) - var(--padding-vertical) / 1.5);height:calc(var(--height) - var(--border-width) * 2 - var(--padding-vertical) * 2);scale:var(--scale);translate:var(--translateX);position:absolute}.checkbox:has(input:checked) .checkbox-check svg{stroke-dashoffset:0}.checkbox:has(>.checkbox-tag:focus-visible,>.radio-tag:focus-visible,>.switch-tag:focus-visible){outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}.checkbox .checkbox-check{height:var(--check-size);pointer-events:none;width:var(--check-size);margin:auto;position:absolute;inset:0 0 0 1px}.checkbox .checkbox-check svg{fill:none;stroke:var(--indicator-color);stroke-width:var(--check-stroke-width);stroke-linecap:var(--check-linecap);stroke-linejoin:var(--check-linejoin);stroke-dasharray:1;stroke-dashoffset:1px;transition:stroke-dashoffset var(--transition-duration) var(--check-timing-function)}.checkbox-tag{cursor:inherit;opacity:0;pointer-events:all;z-index:1;width:100%;height:100%;margin:0;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.checkbox,.checkbox:before,.checkbox .checkbox-check svg{transition:none}}}
 /*$vite$:1*/

package/build/components/checkbox-group/index.d.ts

@@ -0,0 +1,30 @@
+import { type Attributes } from '@esportsplus/template';
+import checkbox, { factory } from '../checkbox/index.js';
+import './scss/index.scss';
+type A = Attributes & {
+    [CHECKBOX_GROUP_INPUT]?: Input;
+    [CHECKBOX_GROUP_ROW]?: Attributes;
+    hint?: boolean;
+    items: Item[];
+    label: string;
+    name?: string;
+    state?: Record<string, boolean>;
+    value?: string[];
+};
+type Input = NonNullable<NonNullable<Parameters<typeof checkbox>[0]>[typeof factory.input]>;
+type Item = {
+    description?: string;
+    id: string;
+    label: string;
+};
+declare const CHECKBOX_GROUP_INPUT: unique symbol;
+declare const CHECKBOX_GROUP_ROW: unique symbol;
+declare function template(this: {
+    attributes?: Pick<A, typeof CHECKBOX_GROUP_INPUT | typeof CHECKBOX_GROUP_ROW>;
+} | void, { hint, items, label, name, value, state, ...attributes }: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly input: typeof CHECKBOX_GROUP_INPUT;
+    readonly row: typeof CHECKBOX_GROUP_ROW;
+};
+export default _default;
+export type { Item };

package/build/components/checkbox-group/index.js

@@ -0,0 +1,101 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import checkbox, { factory } from '../checkbox/index.js';
+import './scss/index.scss';
+const template_1n6hf6a1 = template_u1.template(`<div class='checkbox-group'><label class='checkbox-group-row checkbox-group-row--parent'><span class='checkbox-group-box'><!--$--><svg aria-hidden='true' class='checkbox-group-dash' fill='none' stroke='currentColor' stroke-linecap='round' viewBox='0 0 16 16'><path d='M4 8h8' pathLength='1' /></svg></span><span class='checkbox-group-text'><span class='checkbox-group-label'></span></span><span class='checkbox-group-count'><!--$--> of </span></label><div class='checkbox-group-divider'></div><div class='checkbox-group-items' role='group'>`);
+const template_1n6hf6aa = template_u1.template(`<label class='checkbox-group-row '><span class='checkbox-group-box'></span><span class='checkbox-group-text'><span class='checkbox-group-label'>`);
+const template_1n6hf6ag = template_u1.template(`<span class='checkbox-group-description'>`);
+const template_1n6hf6ai = template_u1.template(`<p class='checkbox-group-hint'><kbd>Shift</kbd> click to select a range `);
+const CHECKBOX_GROUP_INPUT = Symbol.for('@esportsplus/ui/checkbox-group.input');
+const CHECKBOX_GROUP_ROW = Symbol.for('@esportsplus/ui/checkbox-group.row');
+let uid = 0;
+function template({ hint = true, items, label, name, value = [], state = reactivity_u0.reactive(Object.fromEntries(items.map((item) => [item.id, value.includes(item.id)]))), ...attributes }) {
+    let anchor = null, id = `checkbox-group-${++uid}`, shift = false;
+    function all() {
+        return count() === items.length;
+    }
+    function count() {
+        let n = 0;
+        for (let i = 0, m = items.length; i < m; i++) {
+            if (state[items[i].id]) {
+                n++;
+            }
+        }
+        return n;
+    }
+    function mixed() {
+        let n = count();
+        return n > 0 && n < items.length;
+    }
+    function remember(e) {
+        if (e.shiftKey) {
+            shift = true;
+        }
+    }
+    function toggle(index, checked) {
+        let from = shift && anchor !== null ? anchor : index, hi = Math.max(from, index);
+        for (let i = Math.min(from, index); i <= hi; i++) {
+            state[items[i].id] = checked;
+        }
+        anchor = index;
+        shift = false;
+    }
+    return (() => {
+        let root_1n6hf6a0 = template_1n6hf6a1(), element_1n6hf6a2 = root_1n6hf6a0.firstChild, element_1n6hf6a3 = element_1n6hf6a2.firstElementChild, element_1n6hf6a4 = element_1n6hf6a3.firstElementChild.firstChild, element_1n6hf6a5 = element_1n6hf6a3.firstElementChild.nextElementSibling.firstElementChild, element_1n6hf6a6 = element_1n6hf6a3.firstElementChild.nextElementSibling.nextElementSibling.firstChild, element_1n6hf6a7 = element_1n6hf6a3.firstElementChild.nextElementSibling.nextElementSibling, element_1n6hf6a8 = element_1n6hf6a3.nextElementSibling.nextElementSibling;
+        template_u1.setProperties(element_1n6hf6a2, this?.attributes);
+        template_u1.setProperties(element_1n6hf6a2, attributes);
+        template_u1.setProperties(element_1n6hf6a3, this?.attributes?.[CHECKBOX_GROUP_ROW]);
+        template_u1.setProperties(element_1n6hf6a3, attributes[CHECKBOX_GROUP_ROW]);
+        template_u1.slot(element_1n6hf6a4, checkbox({
+            [factory.input]: {
+                'aria-controls': items.map((item) => `${id}-${item.id}`).join(' '),
+                checked: () => all(),
+                indeterminate: () => mixed(),
+                onchange: () => {
+                    let checked = !all();
+                    anchor = null;
+                    shift = false;
+                    for (let i = 0, n = items.length; i < n; i++) {
+                        state[items[i].id] = checked;
+                    }
+                }
+            }
+        }));
+        template_u1.setProperty(element_1n6hf6a5, 'id', template_u1.interpolate([(id), "-all"]));
+        template_u1.slot(element_1n6hf6a5, label, 1);
+        new template_u1.EffectSlot(element_1n6hf6a6, () => count());
+        template_u1.slot(element_1n6hf6a7, items.length, 2);
+        template_u1.setProperty(element_1n6hf6a8, 'aria-labelledby', template_u1.interpolate([(id), "-all"]));
+        template_u1.slot(element_1n6hf6a8, items.map((item, index) => {
+            let root_1n6hf6a9 = template_1n6hf6aa(), element_1n6hf6ab = root_1n6hf6a9.firstChild, element_1n6hf6ac = element_1n6hf6ab.firstElementChild, element_1n6hf6ad = element_1n6hf6ac.nextElementSibling.firstElementChild, element_1n6hf6ae = element_1n6hf6ac.nextElementSibling;
+            template_u1.setList(element_1n6hf6ab, 'class', item.description && 'checkbox-group-row--description');
+            template_u1.setProperties(element_1n6hf6ab, this?.attributes?.[CHECKBOX_GROUP_ROW]);
+            template_u1.setProperties(element_1n6hf6ab, attributes[CHECKBOX_GROUP_ROW]);
+            template_u1.delegate(element_1n6hf6ab, 'click', remember);
+            template_u1.slot(element_1n6hf6ac, checkbox({
+                [factory.input]: {
+                    checked: () => state[item.id],
+                    id: `${id}-${item.id}`,
+                    name,
+                    onchange: function () {
+                        toggle(index, this.checked);
+                    },
+                    onclick: remember,
+                    value: item.id,
+                    ...this?.attributes?.[CHECKBOX_GROUP_INPUT],
+                    ...attributes[CHECKBOX_GROUP_INPUT]
+                }
+            }), 1);
+            template_u1.slot(element_1n6hf6ad, item.label, 1);
+            template_u1.slot(element_1n6hf6ae, item.description ? (() => {
+                let root_1n6hf6af = template_1n6hf6ag(), element_1n6hf6ah = root_1n6hf6af.firstChild;
+                template_u1.slot(element_1n6hf6ah, item.description, 1);
+                return root_1n6hf6af;
+            })() : '', 2);
+            return root_1n6hf6a9;
+        }), 1);
+        template_u1.slot(element_1n6hf6a2, hint ? template_1n6hf6ai() : '', 2);
+        return root_1n6hf6a0;
+    })();
+}
+export default Object.assign(template, { input: CHECKBOX_GROUP_INPUT, row: CHECKBOX_GROUP_ROW });

package/build/components/checkbox-group/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.checkbox-group{--background:var(--color-white-300);--border-color:var(--color-border-300);--border-radius:calc(var(--row-border-radius) + var(--padding));--box-border-width:1.5px;--box-shadow:0 0 0 1px oklch(from var(--color-black-500) l c h / .06), 0 1px 2px oklch(from var(--color-black-500) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-500) l c h / .12);--box-size:var(--size-500);--check-color:var(--color-white-300);--color:var(--color-text-500);--color-muted:var(--color-text-300);--description-font-size:calc(var(--font-size-400) * .875);--description-line-height:1.43;--focus-width:var(--border-width-500);--label-line-height:1.4;--padding:6px;--press-scale:.96;--row-background-hover:var(--color-grey-400);--row-border-radius:14px;--row-min-height:44px;--row-padding-horizontal:var(--size-300);--row-padding-vertical:var(--size-200);--transition-duration:.15s;--transition-timing-function:ease-out;--width:min(360px, 100%);background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);color:var(--color);padding:var(--padding);width:var(--width)}.checkbox-group-box{transition:scale var(--transition-duration) var(--transition-timing-function);flex:none;display:grid;position:relative}.checkbox-group-box .checkbox{--background-active:transparent;--border-color-active:var(--color);--border-color-default:color-mix(in oklch, var(--color) 25%, transparent);--border-color-hover:color-mix(in oklch, var(--color) 45%, transparent);--border-radius:var(--border-radius-300);--border-width:var(--box-border-width);--border-width-offset-hover:0px;--box-shadow-active:none;--check-size:14px;--check-stroke-width:3.4;--focus-width:0px;--indicator-color-default:var(--check-color);--size:var(--box-size);--transition-duration:.15s;--transition-timing-function:ease-out}.checkbox-group-box .checkbox:before{background:var(--color);border-radius:var(--border-radius);content:"";inset:calc(var(--box-border-width) * -1);opacity:0;pointer-events:none;transition:opacity .12s cubic-bezier(.23,1,.32,1),scale .12s cubic-bezier(.23,1,.32,1);position:absolute;scale:.8}.checkbox-group-box .checkbox:has(input:checked,input:indeterminate):before{opacity:1;transition:opacity .25s linear(0, .069, .225, .411, .59, .743, .861, .945, .999, 1.03, 1.044, 1.046, 1.041, 1.033, 1.025, 1.017, 1.01, 1.005, 1.002, 1, .998, .998, .998, .998, 1), scale .25s linear(0, .069, .225, .411, .59, .743, .861, .945, .999, 1.03, 1.044, 1.046, 1.041, 1.033, 1.025, 1.017, 1.01, 1.005, 1.002, 1, .998, .998, .998, .998, 1);scale:1}.checkbox-group-box .checkbox .checkbox-check svg{opacity:0;transition:opacity 0s linear .1s,stroke-dashoffset .1s cubic-bezier(.23,1,.32,1)}.checkbox-group-box .checkbox:has(input:checked) .checkbox-check svg{opacity:1;transition:opacity,stroke-dashoffset .2s cubic-bezier(.23,1,.32,1)}.checkbox-group-box:has(input:indeterminate) .checkbox{border-color:var(--color)}.checkbox-group-box:has(input:indeterminate) .checkbox-group-dash{opacity:1;stroke-dashoffset:0;transition:opacity,stroke-dashoffset .2s cubic-bezier(.23,1,.32,1)}.checkbox-group-count{color:var(--color-muted);font-size:var(--font-size-300);font-variant-numeric:tabular-nums;flex:none}.checkbox-group-dash{color:var(--check-color);opacity:0;pointer-events:none;stroke-dasharray:1;stroke-dashoffset:1px;stroke-width:2.25px;width:70%;height:70%;margin:auto;transition:opacity 0s linear .1s,stroke-dashoffset .1s cubic-bezier(.23,1,.32,1);position:absolute;inset:0}.checkbox-group-description{color:var(--color-muted);font-size:var(--description-font-size);line-height:var(--description-line-height)}.checkbox-group-divider{background:var(--border-color);height:1px;margin:4px var(--row-padding-horizontal)}.checkbox-group-hint{color:var(--color-muted);font-size:var(--font-size-300);padding:var(--padding) var(--row-padding-horizontal) var(--size-200);-webkit-user-select:none;user-select:none;margin:0}.checkbox-group-hint kbd{border:1px solid var(--border-color);font-family:inherit;font-size:inherit;border-radius:4px;padding:1px 4px}.checkbox-group-label{color:var(--color);font-size:var(--font-size-400);font-weight:var(--font-weight-400);line-height:var(--label-line-height)}.checkbox-group-row{border-radius:var(--row-border-radius);cursor:pointer;align-items:center;gap:var(--size-300);min-height:var(--row-min-height);padding:var(--row-padding-vertical) var(--row-padding-horizontal);touch-action:manipulation;transition:background var(--transition-duration) var(--transition-timing-function);-webkit-user-select:none;user-select:none;display:flex}.checkbox-group-row:hover{background:var(--row-background-hover)}.checkbox-group-row:active .checkbox-group-box{scale:var(--press-scale)}.checkbox-group-row:has(input:focus-visible){outline:var(--focus-width) solid var(--color);outline-offset:calc(var(--focus-width) * -1)}.checkbox-group-row--description{align-items:flex-start}.checkbox-group-row--description .checkbox-group-box{margin-top:1px}.checkbox-group-row--parent .checkbox-group-label{font-weight:var(--font-weight-500)}.checkbox-group-text{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}@media (prefers-reduced-motion:reduce){.checkbox-group-box{transition:none}.checkbox-group-box .checkbox:before{transition:opacity .12s cubic-bezier(.23,1,.32,1);scale:1}.checkbox-group-box .checkbox:has(input:checked,input:indeterminate):before{transition:opacity .12s cubic-bezier(.23,1,.32,1);scale:1}:is(.checkbox-group-box .checkbox .checkbox-check svg,.checkbox-group-box .checkbox:has(input:checked) .checkbox-check svg){stroke-dashoffset:0;transition:opacity .15s cubic-bezier(.23,1,.32,1)}.checkbox-group-box:has(input:indeterminate) .checkbox-group-dash{transition:opacity .15s cubic-bezier(.23,1,.32,1)}.checkbox-group-dash{stroke-dashoffset:0;transition:opacity .15s cubic-bezier(.23,1,.32,1)}.checkbox-group-row:active .checkbox-group-box{scale:1}}}
+/*$vite$:1*/

package/build/components/clipboard/copy.d.ts

@@ -1,11 +1,27 @@
-import * as template_u0 from '@esportsplus/template';
 import { type Attributes, type Renderable } from '@esportsplus/template';
 type A = Attributes & {
-    onerror?: () => void;
+    ondisconnect?: never;
+    onclick?: never;
     timeout?: number;
     value: string;
 };
-declare const _default: template_u0.Factory<A, (state: {
-    copied: boolean;
-}) => Renderable<unknown>, Renderable<any>>;
+declare const _default: {
+    (): Renderable<any>;
+    <T extends A>(attributes: T): Renderable<any>;
+    <T extends (state: {
+        copied: boolean;
+        failed: boolean;
+    }) => Renderable<unknown>>(content: T): Renderable<any>;
+    (attributes: A, content?: ((state: {
+        copied: boolean;
+        failed: boolean;
+    }) => Renderable<unknown>) | undefined): Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: ((state: {
+            copied: boolean;
+            failed: boolean;
+        }) => Renderable<unknown>) | undefined;
+    }): any;
+};
 export default _default;

package/build/components/clipboard/copy.js

@@ -1,11 +1,11 @@
-import * as template_u0 from '@esportsplus/template';
+import * as template_u1 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
 import write from './write.js';
-const template_ul = template_u0.template(`<button type='button' >`);
+const template_0irbxmo2 = template_u1.template(`<div>`);
 class ReactiveObject_0irbxmo0 extends reactivity_u0.ReactiveObject {
     #copied = this[reactivity_u0.SIGNAL](false);
+    #failed = this[reactivity_u0.SIGNAL](false);
     constructor() {
         super(null);
     }
@@ -15,35 +15,34 @@ class ReactiveObject_0irbxmo0 extends reactivity_u0.ReactiveObject {
     set copied(_v0) {
         reactivity_u0.write(this.#copied, _v0);
     }
+    get failed() {
+        return reactivity_u0.read(this.#failed);
+    }
+    set failed(_v1) {
+        reactivity_u0.write(this.#failed, _v1);
+    }
 }
-const OMIT = ['onerror', 'timeout', 'value'];
-export default component((attributes, content) => {
-    let state = new ReactiveObject_0irbxmo0(), timer, connected = true;
+export default component(({ timeout = 3000, value, ...attributes }, content) => {
+    let state = new ReactiveObject_0irbxmo0(), reset = () => {
+        clearTimeout(timer);
+        state.copied = false;
+        state.failed = false;
+    }, timer;
     return (() => {
-        let root_uk = template_ul(), element_um = root_uk.firstChild;
-        template_u0.setProperties(element_um, omit(attributes, OMIT));
-        template_u0.onconnect(element_um, () => { connected = true; });
-        template_u0.ondisconnect(element_um, () => {
-            connected = false;
-            clearTimeout(timer);
-            state.copied = false;
-        });
-        template_u0.delegate(element_um, 'click', async (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            let copied = await write(attributes.value);
-            if (!connected) {
-                return;
-            }
-            clearTimeout(timer);
-            state.copied = copied;
-            if (!copied) {
-                attributes.onerror?.();
-                return;
+        let root_0irbxmo1 = template_0irbxmo2(), element_0irbxmo3 = root_0irbxmo1.firstChild;
+        template_u1.setProperties(element_0irbxmo3, attributes);
+        template_u1.ondisconnect(element_0irbxmo3, reset);
+        template_u1.delegate(element_0irbxmo3, 'click', async (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            reset();
+            state.copied = await write(value);
+            if (!state.copied) {
+                state.failed = true;
             }
-            timer = setTimeout(() => { state.copied = false; }, attributes.timeout ?? 3000);
+            timer = setTimeout(reset, timeout);
         });
-        new template_u0.EffectSlot(element_um, () => content(state), 1);
-        return root_uk;
+        new template_u1.EffectSlot(element_0irbxmo3, () => content(state), 1);
+        return root_0irbxmo1;
     })();
 });