@esportsplus/ui 0.50.13 → 0.51.0

package/build/components/tooltip/onclick.js

@@ -1,19 +1,19 @@
-import * as template_8d320e78acc84a40aecd0d8b5125cc231 from '@esportsplus/template';
-import * as reactivity_8d320e78acc84a40aecd0d8b5125cc230 from '@esportsplus/reactivity';
+import * as template_bfe0e7193abc4b26be22b3bb5499d3e21 from '@esportsplus/template';
+import * as reactivity_bfe0e7193abc4b26be22b3bb5499d3e20 from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
 import { root } from '@esportsplus/ui';
 import template from '../../components/template/index.js';
-const template_8d320e78acc84a40aecd0d8b5125cc234t = template_8d320e78acc84a40aecd0d8b5125cc231.template(`<div class='tooltip'><!--$--></div>`);
-class ReactiveObject_8d320e78acc84a40aecd0d8b5125cc234r extends reactivity_8d320e78acc84a40aecd0d8b5125cc230.ReactiveObject {
-    #active = this[reactivity_8d320e78acc84a40aecd0d8b5125cc230.SIGNAL](false);
+const template_bfe0e7193abc4b26be22b3bb5499d3e24t = template_bfe0e7193abc4b26be22b3bb5499d3e21.template(`<div class='tooltip'><!--$--></div>`);
+class ReactiveObject_bfe0e7193abc4b26be22b3bb5499d3e24r extends reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.ReactiveObject {
+    #active = this[reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.SIGNAL](false);
     constructor() {
         super(null);
     }
     get active() {
-        return reactivity_8d320e78acc84a40aecd0d8b5125cc230.read(this.#active);
+        return reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.read(this.#active);
     }
     set active(_v0) {
-        reactivity_8d320e78acc84a40aecd0d8b5125cc230.write(this.#active, _v0);
+        reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.write(this.#active, _v0);
     }
 }
 const OMIT = ['state', 'toggle'];
@@ -37,12 +37,12 @@ function frame() {
     running = false;
 }
 export default template.factory((attributes, content) => {
-    let state = attributes.state || new ReactiveObject_8d320e78acc84a40aecd0d8b5125cc234r(), toggle = attributes.toggle || false;
+    let state = attributes.state || new ReactiveObject_bfe0e7193abc4b26be22b3bb5499d3e24r(), toggle = attributes.toggle || false;
     return (() => {
-        let root_8d320e78acc84a40aecd0d8b5125cc234s = template_8d320e78acc84a40aecd0d8b5125cc234t(), element_8d320e78acc84a40aecd0d8b5125cc234u = root_8d320e78acc84a40aecd0d8b5125cc234s.firstChild, element_8d320e78acc84a40aecd0d8b5125cc234v = element_8d320e78acc84a40aecd0d8b5125cc234u.firstChild, attributes_8d320e78acc84a40aecd0d8b5125cc234w = { "class": "tooltip" };
-        template_8d320e78acc84a40aecd0d8b5125cc231.setProperties(element_8d320e78acc84a40aecd0d8b5125cc234u, omit(attributes, OMIT), attributes_8d320e78acc84a40aecd0d8b5125cc234w);
-        template_8d320e78acc84a40aecd0d8b5125cc231.setList(element_8d320e78acc84a40aecd0d8b5125cc234u, 'class', () => state.active && '--active', attributes_8d320e78acc84a40aecd0d8b5125cc234w);
-        template_8d320e78acc84a40aecd0d8b5125cc231.delegate(element_8d320e78acc84a40aecd0d8b5125cc234u, 'click', function (e) {
+        let root_bfe0e7193abc4b26be22b3bb5499d3e24s = template_bfe0e7193abc4b26be22b3bb5499d3e24t(), element_bfe0e7193abc4b26be22b3bb5499d3e24u = root_bfe0e7193abc4b26be22b3bb5499d3e24s.firstChild, element_bfe0e7193abc4b26be22b3bb5499d3e24v = element_bfe0e7193abc4b26be22b3bb5499d3e24u.firstChild, attributes_bfe0e7193abc4b26be22b3bb5499d3e24w = { "class": "tooltip" };
+        template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e24u, omit(attributes, OMIT), attributes_bfe0e7193abc4b26be22b3bb5499d3e24w);
+        template_bfe0e7193abc4b26be22b3bb5499d3e21.setList(element_bfe0e7193abc4b26be22b3bb5499d3e24u, 'class', () => state.active && '--active', attributes_bfe0e7193abc4b26be22b3bb5499d3e24w);
+        template_bfe0e7193abc4b26be22b3bb5499d3e21.delegate(element_bfe0e7193abc4b26be22b3bb5499d3e24u, 'click', function (e) {
             let active = true, node = e.target;
             if (this === node || (toggle && this.contains(node))) {
                 active = !state.active;
@@ -70,7 +70,7 @@ export default template.factory((attributes, content) => {
                 scheduled = true;
             }
         });
-        template_8d320e78acc84a40aecd0d8b5125cc231.slot(element_8d320e78acc84a40aecd0d8b5125cc234v, content);
-        return root_8d320e78acc84a40aecd0d8b5125cc234s;
+        template_bfe0e7193abc4b26be22b3bb5499d3e21.slot(element_bfe0e7193abc4b26be22b3bb5499d3e24v, content);
+        return root_bfe0e7193abc4b26be22b3bb5499d3e24s;
     })();
 });

package/build/components/tooltip/onhover.d.ts

@@ -1,20 +1,20 @@
-import * as template_8d320e78acc84a40aecd0d8b5125cc231 from '@esportsplus/template';
+import * as template_bfe0e7193abc4b26be22b3bb5499d3e21 from '@esportsplus/template';
 declare const _default: {
     (): ReturnType<(this: {
-        attributes?: template_8d320e78acc84a40aecd0d8b5125cc231.Attributes | undefined;
-        content?: template_8d320e78acc84a40aecd0d8b5125cc231.Renderable<any>;
-    }, attributes: Readonly<template_8d320e78acc84a40aecd0d8b5125cc231.Attributes>, content: template_8d320e78acc84a40aecd0d8b5125cc231.Renderable<any>) => template_8d320e78acc84a40aecd0d8b5125cc231.Renderable<any>>;
-    <T extends template_8d320e78acc84a40aecd0d8b5125cc231.Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: template_8d320e78acc84a40aecd0d8b5125cc231.Attributes | undefined;
-        content?: template_8d320e78acc84a40aecd0d8b5125cc231.Renderable<any>;
-    }, attributes: Readonly<template_8d320e78acc84a40aecd0d8b5125cc231.Attributes>, content: template_8d320e78acc84a40aecd0d8b5125cc231.Renderable<any>) => template_8d320e78acc84a40aecd0d8b5125cc231.Renderable<any>>;
-    <T extends template_8d320e78acc84a40aecd0d8b5125cc231.Renderable<any>>(content: T): ReturnType<(this: {
-        attributes?: template_8d320e78acc84a40aecd0d8b5125cc231.Attributes | undefined;
-        content?: template_8d320e78acc84a40aecd0d8b5125cc231.Renderable<any>;
-    }, attributes: Readonly<template_8d320e78acc84a40aecd0d8b5125cc231.Attributes>, content: template_8d320e78acc84a40aecd0d8b5125cc231.Renderable<any>) => template_8d320e78acc84a40aecd0d8b5125cc231.Renderable<any>>;
-    (attributes: template_8d320e78acc84a40aecd0d8b5125cc231.Attributes, content: template_8d320e78acc84a40aecd0d8b5125cc231.Renderable<any>): ReturnType<(this: {
-        attributes?: template_8d320e78acc84a40aecd0d8b5125cc231.Attributes | undefined;
-        content?: template_8d320e78acc84a40aecd0d8b5125cc231.Renderable<any>;
-    }, attributes: Readonly<template_8d320e78acc84a40aecd0d8b5125cc231.Attributes>, content: template_8d320e78acc84a40aecd0d8b5125cc231.Renderable<any>) => template_8d320e78acc84a40aecd0d8b5125cc231.Renderable<any>>;
+        attributes?: template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes | undefined;
+        content?: template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>;
+    }, attributes: Readonly<template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes>, content: template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>) => template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>>;
+    <T extends template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes | undefined;
+        content?: template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>;
+    }, attributes: Readonly<template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes>, content: template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>) => template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>>;
+    <T extends template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>>(content: T): ReturnType<(this: {
+        attributes?: template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes | undefined;
+        content?: template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>;
+    }, attributes: Readonly<template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes>, content: template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>) => template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>>;
+    (attributes: template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes, content: template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>): ReturnType<(this: {
+        attributes?: template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes | undefined;
+        content?: template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>;
+    }, attributes: Readonly<template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes>, content: template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>) => template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>>;
 };
 export default _default;

package/build/components/tooltip/onhover.js

@@ -1,34 +1,34 @@
-import * as template_8d320e78acc84a40aecd0d8b5125cc231 from '@esportsplus/template';
-import * as reactivity_8d320e78acc84a40aecd0d8b5125cc230 from '@esportsplus/reactivity';
+import * as template_bfe0e7193abc4b26be22b3bb5499d3e21 from '@esportsplus/template';
+import * as reactivity_bfe0e7193abc4b26be22b3bb5499d3e20 from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
 import template from '../../components/template/index.js';
-const template_8d320e78acc84a40aecd0d8b5125cc234z = template_8d320e78acc84a40aecd0d8b5125cc231.template(`<div class='tooltip'><!--$--></div>`);
-class ReactiveObject_8d320e78acc84a40aecd0d8b5125cc234x extends reactivity_8d320e78acc84a40aecd0d8b5125cc230.ReactiveObject {
-    #active = this[reactivity_8d320e78acc84a40aecd0d8b5125cc230.SIGNAL](false);
+const template_bfe0e7193abc4b26be22b3bb5499d3e24z = template_bfe0e7193abc4b26be22b3bb5499d3e21.template(`<div class='tooltip'><!--$--></div>`);
+class ReactiveObject_bfe0e7193abc4b26be22b3bb5499d3e24x extends reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.ReactiveObject {
+    #active = this[reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.SIGNAL](false);
     constructor() {
         super(null);
     }
     get active() {
-        return reactivity_8d320e78acc84a40aecd0d8b5125cc230.read(this.#active);
+        return reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.read(this.#active);
     }
     set active(_v0) {
-        reactivity_8d320e78acc84a40aecd0d8b5125cc230.write(this.#active, _v0);
+        reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.write(this.#active, _v0);
     }
 }
 const OMIT = ['state'];
 export default template.factory((attributes, content) => {
-    let state = attributes.state || new ReactiveObject_8d320e78acc84a40aecd0d8b5125cc234x();
+    let state = attributes.state || new ReactiveObject_bfe0e7193abc4b26be22b3bb5499d3e24x();
     return (() => {
-        let root_8d320e78acc84a40aecd0d8b5125cc234y = template_8d320e78acc84a40aecd0d8b5125cc234z(), element_8d320e78acc84a40aecd0d8b5125cc2350 = root_8d320e78acc84a40aecd0d8b5125cc234y.firstChild, element_8d320e78acc84a40aecd0d8b5125cc2351 = element_8d320e78acc84a40aecd0d8b5125cc2350.firstChild, attributes_8d320e78acc84a40aecd0d8b5125cc2352 = { "class": "tooltip" };
-        template_8d320e78acc84a40aecd0d8b5125cc231.setProperties(element_8d320e78acc84a40aecd0d8b5125cc2350, omit(attributes, OMIT), attributes_8d320e78acc84a40aecd0d8b5125cc2352);
-        template_8d320e78acc84a40aecd0d8b5125cc231.setList(element_8d320e78acc84a40aecd0d8b5125cc2350, 'class', () => state.active && '--active', attributes_8d320e78acc84a40aecd0d8b5125cc2352);
-        template_8d320e78acc84a40aecd0d8b5125cc231.delegate(element_8d320e78acc84a40aecd0d8b5125cc2350, 'mouseover', () => {
+        let root_bfe0e7193abc4b26be22b3bb5499d3e24y = template_bfe0e7193abc4b26be22b3bb5499d3e24z(), element_bfe0e7193abc4b26be22b3bb5499d3e250 = root_bfe0e7193abc4b26be22b3bb5499d3e24y.firstChild, element_bfe0e7193abc4b26be22b3bb5499d3e251 = element_bfe0e7193abc4b26be22b3bb5499d3e250.firstChild, attributes_bfe0e7193abc4b26be22b3bb5499d3e252 = { "class": "tooltip" };
+        template_bfe0e7193abc4b26be22b3bb5499d3e21.setProperties(element_bfe0e7193abc4b26be22b3bb5499d3e250, omit(attributes, OMIT), attributes_bfe0e7193abc4b26be22b3bb5499d3e252);
+        template_bfe0e7193abc4b26be22b3bb5499d3e21.setList(element_bfe0e7193abc4b26be22b3bb5499d3e250, 'class', () => state.active && '--active', attributes_bfe0e7193abc4b26be22b3bb5499d3e252);
+        template_bfe0e7193abc4b26be22b3bb5499d3e21.delegate(element_bfe0e7193abc4b26be22b3bb5499d3e250, 'mouseover', () => {
             state.active = true;
         });
-        template_8d320e78acc84a40aecd0d8b5125cc231.delegate(element_8d320e78acc84a40aecd0d8b5125cc2350, 'mouseout', () => {
+        template_bfe0e7193abc4b26be22b3bb5499d3e21.delegate(element_bfe0e7193abc4b26be22b3bb5499d3e250, 'mouseout', () => {
             state.active = false;
         });
-        template_8d320e78acc84a40aecd0d8b5125cc231.slot(element_8d320e78acc84a40aecd0d8b5125cc2351, content);
-        return root_8d320e78acc84a40aecd0d8b5125cc234y;
+        template_bfe0e7193abc4b26be22b3bb5499d3e21.slot(element_bfe0e7193abc4b26be22b3bb5499d3e251, content);
+        return root_bfe0e7193abc4b26be22b3bb5499d3e24y;
     })();
 });

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

@@ -1,21 +1,21 @@
-import * as template_8d320e78acc84a40aecd0d8b5125cc231 from '@esportsplus/template';
+import * as template_bfe0e7193abc4b26be22b3bb5499d3e21 from '@esportsplus/template';
 import './scss/index.scss';
 declare const _default: {
     (): ReturnType<(this: {
-        attributes?: template_8d320e78acc84a40aecd0d8b5125cc231.Attributes | undefined;
+        attributes?: template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes | undefined;
         content?: string[] | undefined;
-    }, attributes: Readonly<template_8d320e78acc84a40aecd0d8b5125cc231.Attributes>, content: string[]) => template_8d320e78acc84a40aecd0d8b5125cc231.Renderable<any>>;
-    <T extends template_8d320e78acc84a40aecd0d8b5125cc231.Attributes>(attributes: T): ReturnType<(this: {
-        attributes?: template_8d320e78acc84a40aecd0d8b5125cc231.Attributes | undefined;
+    }, attributes: Readonly<template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes>, content: string[]) => template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>>;
+    <T extends template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes>(attributes: T): ReturnType<(this: {
+        attributes?: template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes | undefined;
         content?: string[] | undefined;
-    }, attributes: Readonly<template_8d320e78acc84a40aecd0d8b5125cc231.Attributes>, content: string[]) => template_8d320e78acc84a40aecd0d8b5125cc231.Renderable<any>>;
+    }, attributes: Readonly<template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes>, content: string[]) => template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>>;
     <T extends string[]>(content: T): ReturnType<(this: {
-        attributes?: template_8d320e78acc84a40aecd0d8b5125cc231.Attributes | undefined;
+        attributes?: template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes | undefined;
         content?: string[] | undefined;
-    }, attributes: Readonly<template_8d320e78acc84a40aecd0d8b5125cc231.Attributes>, content: string[]) => template_8d320e78acc84a40aecd0d8b5125cc231.Renderable<any>>;
-    (attributes: template_8d320e78acc84a40aecd0d8b5125cc231.Attributes, content: string[]): ReturnType<(this: {
-        attributes?: template_8d320e78acc84a40aecd0d8b5125cc231.Attributes | undefined;
+    }, attributes: Readonly<template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes>, content: string[]) => template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>>;
+    (attributes: template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes, content: string[]): ReturnType<(this: {
+        attributes?: template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes | undefined;
         content?: string[] | undefined;
-    }, attributes: Readonly<template_8d320e78acc84a40aecd0d8b5125cc231.Attributes>, content: string[]) => template_8d320e78acc84a40aecd0d8b5125cc231.Renderable<any>>;
+    }, attributes: Readonly<template_bfe0e7193abc4b26be22b3bb5499d3e21.Attributes>, content: string[]) => template_bfe0e7193abc4b26be22b3bb5499d3e21.Renderable<any>>;
 };
 export default _default;

package/build/components/typewriter/index.js

@@ -1,27 +1,27 @@
-import * as template_8d320e78acc84a40aecd0d8b5125cc231 from '@esportsplus/template';
-import * as reactivity_8d320e78acc84a40aecd0d8b5125cc230 from '@esportsplus/reactivity';
+import * as template_bfe0e7193abc4b26be22b3bb5499d3e21 from '@esportsplus/template';
+import * as reactivity_bfe0e7193abc4b26be22b3bb5499d3e20 from '@esportsplus/reactivity';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
-const template_8d320e78acc84a40aecd0d8b5125cc2355 = template_8d320e78acc84a40aecd0d8b5125cc231.template(`<div class='typewriter'><!--$--></div>`);
-const template_8d320e78acc84a40aecd0d8b5125cc2358 = template_8d320e78acc84a40aecd0d8b5125cc231.template(``);
-class ReactiveObject_8d320e78acc84a40aecd0d8b5125cc2353 extends reactivity_8d320e78acc84a40aecd0d8b5125cc230.ReactiveObject {
-    #text = this[reactivity_8d320e78acc84a40aecd0d8b5125cc230.SIGNAL]('');
+const template_bfe0e7193abc4b26be22b3bb5499d3e255 = template_bfe0e7193abc4b26be22b3bb5499d3e21.template(`<div class='typewriter'><!--$--></div>`);
+const template_bfe0e7193abc4b26be22b3bb5499d3e258 = template_bfe0e7193abc4b26be22b3bb5499d3e21.template(``);
+class ReactiveObject_bfe0e7193abc4b26be22b3bb5499d3e253 extends reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.ReactiveObject {
+    #text = this[reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.SIGNAL]('');
     constructor() {
         super(null);
     }
     get text() {
-        return reactivity_8d320e78acc84a40aecd0d8b5125cc230.read(this.#text);
+        return reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.read(this.#text);
     }
     set text(_v0) {
-        reactivity_8d320e78acc84a40aecd0d8b5125cc230.write(this.#text, _v0);
+        reactivity_bfe0e7193abc4b26be22b3bb5499d3e20.write(this.#text, _v0);
     }
 }
-const EMPTY_NODE = template_8d320e78acc84a40aecd0d8b5125cc2358();
+const EMPTY_NODE = template_bfe0e7193abc4b26be22b3bb5499d3e258();
 export default template.factory(function (_, content) {
-    let state = new ReactiveObject_8d320e78acc84a40aecd0d8b5125cc2353();
+    let state = new ReactiveObject_bfe0e7193abc4b26be22b3bb5499d3e253();
     return (() => {
-        let root_8d320e78acc84a40aecd0d8b5125cc2354 = template_8d320e78acc84a40aecd0d8b5125cc2355(), element_8d320e78acc84a40aecd0d8b5125cc2356 = root_8d320e78acc84a40aecd0d8b5125cc2354.firstChild, element_8d320e78acc84a40aecd0d8b5125cc2357 = element_8d320e78acc84a40aecd0d8b5125cc2356.firstChild;
-        template_8d320e78acc84a40aecd0d8b5125cc231.onconnect(element_8d320e78acc84a40aecd0d8b5125cc2356, () => {
+        let root_bfe0e7193abc4b26be22b3bb5499d3e254 = template_bfe0e7193abc4b26be22b3bb5499d3e255(), element_bfe0e7193abc4b26be22b3bb5499d3e256 = root_bfe0e7193abc4b26be22b3bb5499d3e254.firstChild, element_bfe0e7193abc4b26be22b3bb5499d3e257 = element_bfe0e7193abc4b26be22b3bb5499d3e256.firstChild;
+        template_bfe0e7193abc4b26be22b3bb5499d3e21.onconnect(element_bfe0e7193abc4b26be22b3bb5499d3e256, () => {
             let character = 0, i = 0, isWriting = true, write = content[i];
             function play() {
                 setTimeout(() => {
@@ -50,7 +50,7 @@ export default template.factory(function (_, content) {
             }
             play();
         });
-        new template_8d320e78acc84a40aecd0d8b5125cc231.EffectSlot(element_8d320e78acc84a40aecd0d8b5125cc2357, () => state.text || EMPTY_NODE);
-        return root_8d320e78acc84a40aecd0d8b5125cc2354;
+        new template_bfe0e7193abc4b26be22b3bb5499d3e21.EffectSlot(element_bfe0e7193abc4b26be22b3bb5499d3e257, () => state.text || EMPTY_NODE);
+        return root_bfe0e7193abc4b26be22b3bb5499d3e254;
     })();
 });

package/package.json

@@ -59,7 +59,7 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "0.50.13",
+  "version": "0.51.0",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc",

package/src/components/checkbox/scss/variables.scss

@@ -32,14 +32,20 @@
     --width-switch: 40px;
 
     &::before {
-        --border-width: 5px;
+        --border-width: 4px;
         --box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.16);
-        --height: 110%;
-        --translateX: 108%;
+        --height: 100%;
+        --translateX: 124%;
         --translateY: 8%;
         --width: 50%;
     }
 
+    #{tokens.state(default)} {
+        &::before {
+            --translateY: 100%;
+        }
+    }
+
     #{tokens.state(inactive)} {
         @include tokens.state(hover) {
             --background: var(--background-hover);
@@ -64,9 +70,5 @@
         --box-shadow: var(--box-shadow-active);
         --opacity: var(--opacity-active);
         --scale: var(--scale-active);
-
-        &::before {
-            --translateY: 100%;
-        }
     }
 }

package/src/components/frame/scss/index.scss

@@ -1,3 +1,27 @@
+@use '/tokens';
+@use 'variables';
+
+.frames {
+    display: flex;
+    gap: var(--gap);
+    transform: translateX(calc(var(--i) * (100% + var(--gap))));
+    transition: transform 0.3s ease;
+
+    .frame {
+        flex-shrink: 0;
+        min-width: 100%;
+        width: 100%;
+
+        @include tokens.state(inactive) {
+            opacity: var(--opacity);
+
+            > * {
+                pointer-events: none;
+            }
+        }
+    }
+}
+
 .frame {
     cursor: default;
     display: none;

package/src/components/frame/scss/variables.scss

@@ -0,0 +1,4 @@
+.frames {
+    --gap: var(--size-400);
+    --opacity: 0.4;
+}