@esportsplus/ui 0.50.11 → 0.50.13

package/build/components/tooltip/onclick.js

@@ -1,19 +1,19 @@
-import * as template_395fa766de714d01a2177bd6e730518f1 from '@esportsplus/template';
-import * as reactivity_395fa766de714d01a2177bd6e730518f0 from '@esportsplus/reactivity';
+import * as template_8d320e78acc84a40aecd0d8b5125cc231 from '@esportsplus/template';
+import * as reactivity_8d320e78acc84a40aecd0d8b5125cc230 from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
 import { root } from '@esportsplus/ui';
 import template from '../../components/template/index.js';
-const template_395fa766de714d01a2177bd6e730518f4t = template_395fa766de714d01a2177bd6e730518f1.template(`<div class='tooltip'><!--$--></div>`);
-class ReactiveObject_395fa766de714d01a2177bd6e730518f4r extends reactivity_395fa766de714d01a2177bd6e730518f0.ReactiveObject {
-    #active = this[reactivity_395fa766de714d01a2177bd6e730518f0.SIGNAL](false);
+const template_8d320e78acc84a40aecd0d8b5125cc234t = template_8d320e78acc84a40aecd0d8b5125cc231.template(`<div class='tooltip'><!--$--></div>`);
+class ReactiveObject_8d320e78acc84a40aecd0d8b5125cc234r extends reactivity_8d320e78acc84a40aecd0d8b5125cc230.ReactiveObject {
+    #active = this[reactivity_8d320e78acc84a40aecd0d8b5125cc230.SIGNAL](false);
     constructor() {
         super(null);
     }
     get active() {
-        return reactivity_395fa766de714d01a2177bd6e730518f0.read(this.#active);
+        return reactivity_8d320e78acc84a40aecd0d8b5125cc230.read(this.#active);
     }
     set active(_v0) {
-        reactivity_395fa766de714d01a2177bd6e730518f0.write(this.#active, _v0);
+        reactivity_8d320e78acc84a40aecd0d8b5125cc230.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_395fa766de714d01a2177bd6e730518f4r(), toggle = attributes.toggle || false;
+    let state = attributes.state || new ReactiveObject_8d320e78acc84a40aecd0d8b5125cc234r(), toggle = attributes.toggle || false;
     return (() => {
-        let root_395fa766de714d01a2177bd6e730518f4s = template_395fa766de714d01a2177bd6e730518f4t(), element_395fa766de714d01a2177bd6e730518f4u = root_395fa766de714d01a2177bd6e730518f4s.firstChild, element_395fa766de714d01a2177bd6e730518f4v = element_395fa766de714d01a2177bd6e730518f4u.firstChild, attributes_395fa766de714d01a2177bd6e730518f4w = { "class": "tooltip" };
-        template_395fa766de714d01a2177bd6e730518f1.setProperties(element_395fa766de714d01a2177bd6e730518f4u, omit(attributes, OMIT), attributes_395fa766de714d01a2177bd6e730518f4w);
-        template_395fa766de714d01a2177bd6e730518f1.setList(element_395fa766de714d01a2177bd6e730518f4u, 'class', () => state.active && '--active', attributes_395fa766de714d01a2177bd6e730518f4w);
-        template_395fa766de714d01a2177bd6e730518f1.delegate(element_395fa766de714d01a2177bd6e730518f4u, 'click', function (e) {
+        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 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_395fa766de714d01a2177bd6e730518f1.slot(element_395fa766de714d01a2177bd6e730518f4v, content);
-        return root_395fa766de714d01a2177bd6e730518f4s;
+        template_8d320e78acc84a40aecd0d8b5125cc231.slot(element_8d320e78acc84a40aecd0d8b5125cc234v, content);
+        return root_8d320e78acc84a40aecd0d8b5125cc234s;
     })();
 });

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

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

package/build/components/tooltip/onhover.js

@@ -1,34 +1,34 @@
-import * as template_395fa766de714d01a2177bd6e730518f1 from '@esportsplus/template';
-import * as reactivity_395fa766de714d01a2177bd6e730518f0 from '@esportsplus/reactivity';
+import * as template_8d320e78acc84a40aecd0d8b5125cc231 from '@esportsplus/template';
+import * as reactivity_8d320e78acc84a40aecd0d8b5125cc230 from '@esportsplus/reactivity';
 import { omit } from '@esportsplus/utilities';
 import template from '../../components/template/index.js';
-const template_395fa766de714d01a2177bd6e730518f4z = template_395fa766de714d01a2177bd6e730518f1.template(`<div class='tooltip'><!--$--></div>`);
-class ReactiveObject_395fa766de714d01a2177bd6e730518f4x extends reactivity_395fa766de714d01a2177bd6e730518f0.ReactiveObject {
-    #active = this[reactivity_395fa766de714d01a2177bd6e730518f0.SIGNAL](false);
+const template_8d320e78acc84a40aecd0d8b5125cc234z = template_8d320e78acc84a40aecd0d8b5125cc231.template(`<div class='tooltip'><!--$--></div>`);
+class ReactiveObject_8d320e78acc84a40aecd0d8b5125cc234x extends reactivity_8d320e78acc84a40aecd0d8b5125cc230.ReactiveObject {
+    #active = this[reactivity_8d320e78acc84a40aecd0d8b5125cc230.SIGNAL](false);
     constructor() {
         super(null);
     }
     get active() {
-        return reactivity_395fa766de714d01a2177bd6e730518f0.read(this.#active);
+        return reactivity_8d320e78acc84a40aecd0d8b5125cc230.read(this.#active);
     }
     set active(_v0) {
-        reactivity_395fa766de714d01a2177bd6e730518f0.write(this.#active, _v0);
+        reactivity_8d320e78acc84a40aecd0d8b5125cc230.write(this.#active, _v0);
     }
 }
 const OMIT = ['state'];
 export default template.factory((attributes, content) => {
-    let state = attributes.state || new ReactiveObject_395fa766de714d01a2177bd6e730518f4x();
+    let state = attributes.state || new ReactiveObject_8d320e78acc84a40aecd0d8b5125cc234x();
     return (() => {
-        let root_395fa766de714d01a2177bd6e730518f4y = template_395fa766de714d01a2177bd6e730518f4z(), element_395fa766de714d01a2177bd6e730518f50 = root_395fa766de714d01a2177bd6e730518f4y.firstChild, element_395fa766de714d01a2177bd6e730518f51 = element_395fa766de714d01a2177bd6e730518f50.firstChild, attributes_395fa766de714d01a2177bd6e730518f52 = { "class": "tooltip" };
-        template_395fa766de714d01a2177bd6e730518f1.setProperties(element_395fa766de714d01a2177bd6e730518f50, omit(attributes, OMIT), attributes_395fa766de714d01a2177bd6e730518f52);
-        template_395fa766de714d01a2177bd6e730518f1.setList(element_395fa766de714d01a2177bd6e730518f50, 'class', () => state.active && '--active', attributes_395fa766de714d01a2177bd6e730518f52);
-        template_395fa766de714d01a2177bd6e730518f1.delegate(element_395fa766de714d01a2177bd6e730518f50, 'mouseover', () => {
+        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', () => {
             state.active = true;
         });
-        template_395fa766de714d01a2177bd6e730518f1.delegate(element_395fa766de714d01a2177bd6e730518f50, 'mouseout', () => {
+        template_8d320e78acc84a40aecd0d8b5125cc231.delegate(element_8d320e78acc84a40aecd0d8b5125cc2350, 'mouseout', () => {
             state.active = false;
         });
-        template_395fa766de714d01a2177bd6e730518f1.slot(element_395fa766de714d01a2177bd6e730518f51, content);
-        return root_395fa766de714d01a2177bd6e730518f4y;
+        template_8d320e78acc84a40aecd0d8b5125cc231.slot(element_8d320e78acc84a40aecd0d8b5125cc2351, content);
+        return root_8d320e78acc84a40aecd0d8b5125cc234y;
     })();
 });

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

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

package/build/components/typewriter/index.js

@@ -1,27 +1,27 @@
-import * as template_395fa766de714d01a2177bd6e730518f1 from '@esportsplus/template';
-import * as reactivity_395fa766de714d01a2177bd6e730518f0 from '@esportsplus/reactivity';
+import * as template_8d320e78acc84a40aecd0d8b5125cc231 from '@esportsplus/template';
+import * as reactivity_8d320e78acc84a40aecd0d8b5125cc230 from '@esportsplus/reactivity';
 import template from '../../components/template/index.js';
 import './scss/index.scss';
-const template_395fa766de714d01a2177bd6e730518f55 = template_395fa766de714d01a2177bd6e730518f1.template(`<div class='typewriter'><!--$--></div>`);
-const template_395fa766de714d01a2177bd6e730518f58 = template_395fa766de714d01a2177bd6e730518f1.template(``);
-class ReactiveObject_395fa766de714d01a2177bd6e730518f53 extends reactivity_395fa766de714d01a2177bd6e730518f0.ReactiveObject {
-    #text = this[reactivity_395fa766de714d01a2177bd6e730518f0.SIGNAL]('');
+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]('');
     constructor() {
         super(null);
     }
     get text() {
-        return reactivity_395fa766de714d01a2177bd6e730518f0.read(this.#text);
+        return reactivity_8d320e78acc84a40aecd0d8b5125cc230.read(this.#text);
     }
     set text(_v0) {
-        reactivity_395fa766de714d01a2177bd6e730518f0.write(this.#text, _v0);
+        reactivity_8d320e78acc84a40aecd0d8b5125cc230.write(this.#text, _v0);
     }
 }
-const EMPTY_NODE = template_395fa766de714d01a2177bd6e730518f58();
+const EMPTY_NODE = template_8d320e78acc84a40aecd0d8b5125cc2358();
 export default template.factory(function (_, content) {
-    let state = new ReactiveObject_395fa766de714d01a2177bd6e730518f53();
+    let state = new ReactiveObject_8d320e78acc84a40aecd0d8b5125cc2353();
     return (() => {
-        let root_395fa766de714d01a2177bd6e730518f54 = template_395fa766de714d01a2177bd6e730518f55(), element_395fa766de714d01a2177bd6e730518f56 = root_395fa766de714d01a2177bd6e730518f54.firstChild, element_395fa766de714d01a2177bd6e730518f57 = element_395fa766de714d01a2177bd6e730518f56.firstChild;
-        template_395fa766de714d01a2177bd6e730518f1.onconnect(element_395fa766de714d01a2177bd6e730518f56, () => {
+        let root_8d320e78acc84a40aecd0d8b5125cc2354 = template_8d320e78acc84a40aecd0d8b5125cc2355(), element_8d320e78acc84a40aecd0d8b5125cc2356 = root_8d320e78acc84a40aecd0d8b5125cc2354.firstChild, element_8d320e78acc84a40aecd0d8b5125cc2357 = element_8d320e78acc84a40aecd0d8b5125cc2356.firstChild;
+        template_8d320e78acc84a40aecd0d8b5125cc231.onconnect(element_8d320e78acc84a40aecd0d8b5125cc2356, () => {
             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_395fa766de714d01a2177bd6e730518f1.EffectSlot(element_395fa766de714d01a2177bd6e730518f57, () => state.text || EMPTY_NODE);
-        return root_395fa766de714d01a2177bd6e730518f54;
+        new template_8d320e78acc84a40aecd0d8b5125cc231.EffectSlot(element_8d320e78acc84a40aecd0d8b5125cc2357, () => state.text || EMPTY_NODE);
+        return root_8d320e78acc84a40aecd0d8b5125cc2354;
     })();
 });

package/package.json

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

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

@@ -38,13 +38,8 @@
         --translateX: 108%;
         --translateY: 8%;
         --width: 50%;
-
-        #{tokens.state(default, '.field')} & {
-            --translateY: 100%;
-        }
     }
 
-    #{tokens.state(inactive, 'label')},
     #{tokens.state(inactive)} {
         @include tokens.state(hover) {
             --background: var(--background-hover);
@@ -69,5 +64,9 @@
         --box-shadow: var(--box-shadow-active);
         --opacity: var(--opacity-active);
         --scale: var(--scale-active);
+
+        &::before {
+            --translateY: 100%;
+        }
     }
 }

package/src/components/switch/scss/variables.scss

@@ -38,13 +38,8 @@
         --translateX: 0px;
         --translateY: 0px;
         --width: var(--height);
-
-        #{tokens.state(active, '.field')} & {
-            --translateX: calc(var(--width-switch) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2));
-        }
     }
 
-    #{tokens.state(inactive, 'label')},
     #{tokens.state(inactive)} {
         @include tokens.state(hover) {
             --background: var(--background-hover);
@@ -71,5 +66,9 @@
         --box-shadow: var(--box-shadow-active);
         --opacity: var(--opacity-active);
         --scale: var(--scale-active);
+
+        &::before {
+            --translateX: calc(var(--width-switch) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2));
+        }
     }
 }