@esportsplus/ui 0.51.7 → 0.54.0

package/README.md

@@ -14,6 +14,8 @@ pnpm add @esportsplus/ui
 - `@esportsplus/action` - Response/error handling
 - `@esportsplus/utilities` - Core utilities
 
+*https://github.com/Chainlift/liftkit* temporarily trying liftkit rules
+
 ## Quick Start
 
 ```typescript
@@ -85,10 +87,9 @@ html`
 ### Layout
 | Component | Description |
 |-----------|-------------|
-| `scrollbar` | Custom scrollbar container |
-| `frame` | Scrollable frame |
+| `scrollbar` | Native scrollbar styling |
+| `tabs.scss` | Tab panels: instant by default, `tabs--slide` for horizontal motion, `tabs--scroll` for vertical motion |
 | `sidebar` | Side navigation |
-| `site` | Site wrapper |
 | `overlay` | Modal/overlay container |
 
 ### Utility
@@ -100,6 +101,26 @@ html`
 
 ## Component Patterns
 
+### Tabs
+
+Import `@esportsplus/ui/tabs.scss`. Put `.tabs-content` panels inside `.tabs`
+and apply `.--active` to the selected panel. The default switch is instant.
+For motion, add `.tabs--slide` (horizontal) or `.tabs--scroll` (vertical),
+and set `--i` to the negative selected index: `0`, `-1`, `-2`, etc.
+
+```html
+<div style="overflow: hidden; height: 300px;">
+    <div class="tabs tabs--scroll" style="--i: -1;">
+        <div class="tabs-content" inert aria-hidden="true">First panel</div>
+        <div class="tabs-content --active">Second panel</div>
+    </div>
+</div>
+```
+
+Animated tracks need a clipping parent; vertical tracks also need a definite
+parent height. Keep inactive panels `inert` and update tab/panel ARIA attributes
+alongside the active class. The docs include reactive switching examples.
+
 ### Factory Pattern
 
 Components use `template.factory()` supporting flexible call signatures:
@@ -187,7 +208,7 @@ Located in `tokens.scss`:
 - **Sizing**: `--size-{300-800}` (12px-80px)
 - **Spacing**: `--spacing-{0-600}`
 - **Border**: `--border-radius-{100-900}`, `--border-width-{100-700}`
-- **Typography**: `--font-size-*`, `--font-weight-*`, `--line-height-*`
+- **Typography**: `--font-size-*`, `--font-weight-*`; line height adjusts automatically to each element's font size.
 
 ### CSS Utilities
 
@@ -212,7 +233,7 @@ Each component exposes CSS custom properties:
 ```scss
 .ui-button {
   --background: var(--color-blue-400);
-  --color: var(--color-white);
+  --color: var(--color-white-400);
   --border-radius: var(--border-radius-300);
   --padding-horizontal: 16px;
   --padding-vertical: 8px;
@@ -250,12 +271,35 @@ build/
 │   │   └── scss/index.scss
 │   └── index.js
 ├── css-utilities/
-├── themes/
-│   ├── dark/
-│   └── light/
-└── fonts/
+│   └── font/
+└── themes/
+    ├── dark/
+    └── light/
+```
+
+## Fonts
+
+Import the font stylesheet and apply its family class to `html` or `body`:
+
+```typescript
+import '@esportsplus/ui/css-utilities/font/montserrat.scss';
+
+document.documentElement.classList.add('--font-montserrat');
 ```
 
+`@esportsplus/ui/css-utilities/font/geist.scss` includes Geist Sans and Geist Mono,
+selected with `--font-geist` and `--font-geist-mono`. The aggregate
+`@esportsplus/ui/css-utilities.scss` includes all three families.
+
+Family classes define `--font-family` and their `--font-weight-*` token maps.
+Components consume these variables through their own `font-family` and
+`font-weight` declarations. Nested family classes override the inherited tokens.
+The root component no longer chooses Montserrat automatically.
+
+Fonts are bundled as local assets for the consuming app to serve; no runtime CDN
+is required. Geist Sans and Geist Mono include variable weights 100–900 in normal
+and italic styles. The previous `@esportsplus/ui/fonts` entry point has been removed.
+
 ## TypeScript
 
 Full type safety with zero `any` types:

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

@@ -1,22 +1,10 @@
-import * as template_u1 from '@esportsplus/template';
+import * as template_u0 from '@esportsplus/template';
 import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
-declare const _default: {
-    (): ReturnType<(this: {
-        attributes?: Attributes | undefined;
-        content?: template_u1.Renderable<any>;
-    }, attributes: Readonly<Attributes>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
-    <T extends Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: Attributes | undefined;
-        content?: template_u1.Renderable<any>;
-    }, attributes: Readonly<Attributes>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
-    <T extends template_u1.Renderable<any>>(content: T): ReturnType<(this: {
-        attributes?: Attributes | undefined;
-        content?: template_u1.Renderable<any>;
-    }, attributes: Readonly<Attributes>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
-    (attributes: Attributes, content: template_u1.Renderable<any>): ReturnType<(this: {
-        attributes?: Attributes | undefined;
-        content?: template_u1.Renderable<any>;
-    }, attributes: Readonly<Attributes>, content: template_u1.Renderable<any>) => template_u1.Renderable<any>>;
+type A = Attributes & {
+    state: {
+        active: boolean | number;
+    };
 };
+declare const _default: template_u0.Factory<A, template_u0.Renderable<any>, template_u0.Renderable<any>>;
 export default _default;

package/build/components/accordion/index.js

@@ -1,42 +1,16 @@
-import * as template_u1 from '@esportsplus/template';
-import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u0 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
-import template from '../template/index.js';
 import './scss/index.scss';
-const template_04mlrpv2 = template_u1.template(`<div >`);
-class ReactiveObject_04mlrpv0 extends reactivity_u0.ReactiveObject {
-    #active = this[reactivity_u0.SIGNAL](0);
-    constructor() {
-        super(null);
-    }
-    get active() {
-        return reactivity_u0.read(this.#active);
-    }
-    set active(_v0) {
-        reactivity_u0.write(this.#active, _v0);
-    }
-}
+const template_u2 = template_u0.template(`<div class='accordion' ><div class='accordion-content'>`);
 const OMIT = ['state'];
-let key = Symbol();
-export default template.factory(function (attributes, content) {
-    let ref, state = attributes.state || new ReactiveObject_04mlrpv0();
+export default component(function (attributes, content) {
+    let state = attributes.state;
     return (() => {
-        let root_04mlrpv1 = template_04mlrpv2(), element_04mlrpv3 = root_04mlrpv1.firstChild;
-        template_u1.setProperties(element_04mlrpv3, omit(attributes, OMIT));
-        template_u1.setList(element_04mlrpv3, 'class', () => {
-            return state.active && '--active';
-        });
-        template_u1.onrender(element_04mlrpv3, (element) => {
-            (ref = element)[key] = state;
-        });
-        template_u1.setList(element_04mlrpv3, 'style', () => {
-            let parent = ref.closest('accordion');
-            if (parent && key in parent) {
-                parent[key].active = (+parent[key].active) + 1;
-            }
-            return state.active && `--max-height: ${ref.scrollHeight}`;
-        });
-        template_u1.slot(element_04mlrpv3, content, 1);
-        return root_04mlrpv1;
+        let root_u1 = template_u2(), element_u3 = root_u1.firstChild, element_u4 = element_u3.firstElementChild;
+        template_u0.setProperties(element_u3, omit(attributes, OMIT));
+        template_u0.setProperty(element_u3, 'inert', () => !state.active);
+        template_u0.slot(element_u4, content, 1);
+        return root_u1;
     })();
 });

package/build/components/accordion/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.accordion,.accordion:not(.--active){--max-height:0}.accordion{max-height:var(--max-height);opacity:0;pointer-events:none;transition:max-height var(--transition-duration) ease-in-out, opacity var(--transition-duration) ease-in-out}.accordion.--active{opacity:1;pointer-events:auto}}
+@layer components {.accordion{grid-template-rows:1fr;transition:grid-template-rows .3s;display:grid}.accordion[inert]{grid-template-rows:0fr}.accordion-content{min-height:0;overflow:hidden}}
 /*$vite$:1*/

package/build/components/anchor/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.anchor{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);max-height:calc(var(--max-height,100%) - var(--margin-vertical) * 2);max-width:calc(var(--max-width,100%) - var(--margin-horizontal) * 2);transition:opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;z-index:9;position:absolute}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--n,.anchor--s{right:50%;transform:translate(50%)}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}.anchor--n{top:var(--margin-vertical)}.anchor--s{bottom:var(--margin-vertical)}}
+@layer components {.anchor{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);max-height:calc(var(--max-height,100%) - var(--margin-vertical) * 2);max-width:calc(var(--max-width,100%) - var(--margin-horizontal) * 2);transition:opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);z-index:9;position:absolute}.anchor:not(.--active){opacity:0}.anchor:not(.--active),.anchor:not(.--active) *{pointer-events:none}.anchor--n,.anchor--s{right:50%;transform:translate(50%)}.anchor--ne,.anchor--nw{top:var(--margin-vertical)}.anchor--se,.anchor--sw{bottom:var(--margin-vertical)}.anchor--ne,.anchor--se{right:var(--margin-horizontal)}.anchor--nw,.anchor--sw{left:var(--margin-horizontal)}.anchor--n{top:var(--margin-vertical)}.anchor--s{bottom:var(--margin-vertical)}}
 /*$vite$:1*/

package/build/components/button/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.button{--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-400);--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--width:auto}.button.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.button:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.button:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.button--holding{--animation-duration:2.4s;--background-hold:var(--background-active)}.button--processing{--animation-duration:.64s;--border-width:var(--border-width-400);--processing-color:var(--color);--size:var(--size-400)}.button--skeleton{--animation-duration:6.4s}.button{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));transition:all var(--transition-duration) ease-in-out;width:var(--width);flex-wrap:wrap;place-content:center;align-items:center;display:flex;position:relative}.button:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration) ease-in-out, opacity var(--transition-duration) ease-in-out;z-index:-1;position:absolute;inset:0}.button--flat:after{display:none}.button--holding{-webkit-user-select:none;user-select:none;overflow:hidden}.button--holding:after{animation:buttonHolding var(--animation-duration) ease-in-out forwards;box-shadow:unset;background:var(--background-hold);z-index:1;border-radius:0;width:110%;height:100%;display:block;transform:translate(-100%)}@keyframes buttonHolding{to{transform:translate(0%)}}.button--holding>*{animation:buttonHoldingContentPulse calc(var(--animation-duration) / 3) infinite ease-in-out;z-index:2}@keyframes buttonHoldingContentPulse{0%,to{opacity:1}50%{opacity:.4}}.button--processing{color:#0000;pointer-events:none}.button--processing:before{animation:buttonProcessing var(--animation-duration) infinite linear;border:var(--border-width) solid color-mix(in srgb, var(--processing-color), transparent 90%);border-left-color:var(--processing-color);content:"";height:var(--size);width:var(--size);border-top-color:#0000;border-right-color:#0000;border-radius:100%;position:absolute;bottom:50%;right:50%;transform:translate(50%,50%)}.button--processing *{opacity:0}@keyframes buttonProcessing{0%{transform:translate(50%,50%)rotate(0)}to{transform:translate(50%,50%)rotate(359deg)}}.button--skeleton{animation:var(--animation-duration) ease-in-out infinite buttonSkeleton;background-image:linear-gradient(270deg, var(--background-pressed), var(--background-default), var(--background-default), var(--background-pressed));color:#0000;pointer-events:none;background-size:400% 100%}.button--skeleton *{opacity:0}@keyframes buttonSkeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.button--top-left,.button--top-right{top:calc((var(--padding-vertical) + var(--line-height)/2) * -1);position:absolute}.button--top-left{left:calc((var(--padding-horizontal) + var(--line-height)/2) * -1)}.button--top-right{right:calc((var(--padding-horizontal) + var(--line-height)/2) * -1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}}
+@layer components {.button{--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);--box-shadow:var(--box-shadow-default);--box-shadow-default:none}.button.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.button:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.button:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.button--processing{--animation-duration:.64s;--border-width:var(--border-width-400);--processing-color:var(--color);--size:var(--size-400)}.button--skeleton{--animation-duration:6.4s}.text,.button{--border-width:0px;--color:var(--color-default,inherit);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--width:auto;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);gap:var(--gap-vertical) var(--gap-horizontal);transition:color var(--transition-duration) var(--transition-timing-function);width:var(--width);display:flex;position:relative}.text.--text-truncate,.--text-truncate.button{display:block}.button{background:var(--background);border-radius:var(--border-radius);cursor:pointer;padding:max(0px, var(--padding-vertical) - var(--border-width)) max(0px, var(--padding-horizontal) - var(--border-width));transition:all var(--transition-duration) var(--transition-timing-function);white-space:nowrap;flex-wrap:nowrap;place-content:center;align-items:center;translate:0}.button:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);z-index:-1;position:absolute;inset:0}.button--flat:after{display:none}.button--processing{color:#0000;pointer-events:none}.button--processing:before{animation:button--processing var(--animation-duration) infinite linear;border:var(--border-width) solid color-mix(in srgb, var(--processing-color), transparent 90%);border-left-color:var(--processing-color);content:"";height:var(--size);width:var(--size);border-top-color:#0000;border-right-color:#0000;border-radius:100%;position:absolute;bottom:50%;right:50%;transform:translate(50%,50%)}.button--processing *{opacity:0}@keyframes button--processing{0%{transform:translate(50%,50%)rotate(0)}to{transform:translate(50%,50%)rotate(359deg)}}.button--skeleton{animation:var(--animation-duration) var(--transition-timing-function) infinite button--skeleton;background-image:linear-gradient(270deg, var(--background-pressed), var(--background-default), var(--background-default), var(--background-pressed));color:#0000;pointer-events:none;background-size:400% 100%}.button--skeleton *{opacity:0}@keyframes button--skeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.button--tactile:not(.--active):active{translate:0 1px}.button--top-left,.button--top-right{top:calc((var(--padding-vertical) + .5lh) * -1);position:absolute}.button--top-left{left:calc((var(--padding-horizontal) + .5lh) * -1)}.button--top-right{right:calc((var(--padding-horizontal) + .5lh) * -1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}}
 /*$vite$:1*/

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

@@ -1,2 +1,2 @@
-@layer components {.card{--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-400);--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--padding-horizontal:0px;--padding-vertical:0px;--width:auto}.card.--active{--background:var(--background-active);--border-color:var(--border-color-active)}.card:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover)}.card:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed)}.card{background:var(--background);border-radius:var(--border-radius);padding:var(--padding-vertical) var(--padding-horizontal);transition:background var(--transition-duration) ease-in-out, border-color var(--transition-duration) ease-in-out, box-shadow var(--transition-duration) ease-in-out, max-height var(--transition-duration) ease-in-out, opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;width:var(--width);position:relative}.card:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration) ease-in-out, opacity var(--transition-duration) ease-in-out;z-index:-1;position:absolute;inset:0}.card--flat:after{display:none}.card--option{border-radius:0}.card--option.--active{z-index:2}.card--option:not(.--active):hover{z-index:1}.card--option:only-child{border-radius:var(--border-radius)}.card--option:not(:only-child):not(:first-child){margin-top:calc(var(--border-width) * -1)}.card--option:not(:only-child):first-child{border-radius:var(--border-radius) var(--border-radius) 0 0}.card--option:not(:only-child):not(:has(~.card--option)){border-radius:0 0 var(--border-radius) var(--border-radius)}}
+@layer components {.card{--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);--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--padding-horizontal:0px;--padding-vertical:0px;--width:auto}.card.--active{--background:var(--background-active);--border-color:var(--border-color-active)}.card:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover)}.card:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed)}.card{background:var(--background);border-radius:var(--border-radius);padding:max(0px, var(--padding-vertical) - var(--border-width)) max(0px, var(--padding-horizontal) - var(--border-width));transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function), max-height var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);width:var(--width);position:relative}.card:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);z-index:-1;position:absolute;inset:0}}
 /*$vite$:1*/

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

@@ -1,20 +1,20 @@
 import { type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
-declare const factory: (type: string) => (this: {
-    attributes?: Attributes;
-} | any, attributes?: Attributes & {
+type A = Attributes & {
+    'aria-label'?: string;
+    checked?: boolean;
+    id?: string;
+    name?: string;
     state?: {
-        active: boolean;
         error: string;
     };
-}) => DocumentFragment | Text;
+    value?: number | string;
+};
+declare const factory: (type: 'checkbox' | 'radio' | 'switch') => (this: {
+    attributes?: Exclude<A, 'state'>;
+} | void, attributes?: A) => DocumentFragment | Text;
 declare const _default: (this: {
-    attributes?: Attributes;
-} | any, attributes?: Attributes & {
-    state?: {
-        active: boolean;
-        error: string;
-    };
-}) => DocumentFragment | Text;
+    attributes?: Exclude<A, 'state'>;
+} | void, attributes?: A) => DocumentFragment | Text;
 export default _default;
 export { factory };

package/build/components/checkbox/index.js

@@ -1,51 +1,83 @@
-import * as template_u1 from '@esportsplus/template';
+import * as template_u0 from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
-import { root } 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_0l38kpg2 = template_u1.template(`<div ><input >`);
+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' >`);
 class ReactiveObject_0l38kpg0 extends reactivity_u0.ReactiveObject {
-    #active = this[reactivity_u0.SIGNAL](false);
     #error = this[reactivity_u0.SIGNAL]('');
     constructor() {
         super(null);
     }
-    get active() {
-        return reactivity_u0.read(this.#active);
-    }
-    set active(_v0) {
-        reactivity_u0.write(this.#active, _v0);
-    }
     get error() {
         return reactivity_u0.read(this.#error);
     }
-    set error(_v1) {
-        reactivity_u0.write(this.#error, _v1);
+    set error(_v0) {
+        reactivity_u0.write(this.#error, _v0);
     }
 }
-const OMIT = ['checked', 'value'];
+const OMIT = ['aria-label', 'checked', 'id', 'name', 'state', 'value'];
 const factory = (type) => {
     function template(attributes) {
         let state = attributes?.state || new ReactiveObject_0l38kpg0();
-        if (attributes?.checked) {
-            state.active = true;
-        }
-        return (() => {
-            let root_0l38kpg1 = template_0l38kpg2(), element_0l38kpg3 = root_0l38kpg1.firstChild, element_0l38kpg4 = element_0l38kpg3.firstElementChild;
-            template_u1.setList(element_0l38kpg3, 'class', (type) + (() => state.active && '--active'));
-            template_u1.setProperties(element_0l38kpg3, this?.attributes && omit(this.attributes, OMIT));
-            template_u1.setProperties(element_0l38kpg3, attributes && omit(attributes, OMIT));
-            template_u1.setProperty(element_0l38kpg4, 'checked', attributes?.checked || root(() => state.active));
-            template_u1.setList(element_0l38kpg4, 'class', `${type}-tag`);
-            template_u1.delegate(element_0l38kpg4, 'change', (e) => {
-                state.active = e.target.checked;
-            });
-            template_u1.onrender(element_0l38kpg4, form.input.onrender(state));
-            template_u1.setProperty(element_0l38kpg4, 'type', type === 'radio' ? 'radio' : 'checkbox');
-            template_u1.setProperty(element_0l38kpg4, 'value', attributes?.value || 1);
-            return root_0l38kpg1;
-        })();
+        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;
 };

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-default:var(--background);--border-radius:var(--border-radius-300);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--margin-horizontal:calc(var(--width-switch) - var(--width));--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:45deg;--scale:var(--scale-default);--scale-active:1;--scale-default:0;--scale-hover:1.08;--scale-pressed:.98;--size:var(--size-600);--width:var(--height);--width-switch:40px}.checkbox:before{--border-width:4px;--box-shadow:1px 1px 0 #00000029;--height:100%;--translateX:124%;--translateY:8%;--width:50%}.checkbox:not(.--active):not(:hover):before{--translateY:100%}.checkbox:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.checkbox:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.checkbox.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--opacity:var(--opacity-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:var(--border-width);flex:0 0 var(--width);height:var(--height);transition:background var(--transition-duration) ease-in-out, border-color var(--transition-duration) ease-in-out, box-shadow var(--transition-duration) ease-in-out, opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;width:var(--width);position:relative}.checkbox:invalid,.checkbox:required{box-shadow:none}.checkbox:before{border-bottom:var(--border-width) solid var(--accent);border-right:var(--border-width) solid var(--accent);box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX), var(--translateY)) rotate(var(--rotate)) scale(var(--scale));transform-origin:bottom;width:var(--width);position:absolute;bottom:50%;right:92%}.checkbox-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
+@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}}}
 /*$vite$:1*/

package/build/components/checkbox/svg/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12.5 9.5 17 19 7" pathLength="1"/></svg>

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

@@ -0,0 +1,11 @@
+import * as template_u0 from '@esportsplus/template';
+import { type Attributes, type Renderable } from '@esportsplus/template';
+type A = Attributes & {
+    onerror?: () => void;
+    timeout?: number;
+    value: string;
+};
+declare const _default: template_u0.Factory<A, (state: {
+    copied: boolean;
+}) => Renderable<unknown>, Renderable<any>>;
+export default _default;

package/build/components/clipboard/copy.js

@@ -0,0 +1,49 @@
+import * as template_u0 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' >`);
+class ReactiveObject_0irbxmo0 extends reactivity_u0.ReactiveObject {
+    #copied = 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);
+    }
+}
+const OMIT = ['onerror', 'timeout', 'value'];
+export default component((attributes, content) => {
+    let state = new ReactiveObject_0irbxmo0(), timer, connected = true;
+    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;
+            }
+            timer = setTimeout(() => { state.copied = false; }, attributes.timeout ?? 3000);
+        });
+        new template_u0.EffectSlot(element_um, () => content(state), 1);
+        return root_uk;
+    })();
+});