@esportsplus/ui 0.33.4 → 0.34.0

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

@@ -2,7 +2,7 @@ import { type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 declare const factory: (type: string) => (this: {
     attributes?: Attributes;
-}, attributes?: Attributes & {
+} | any, attributes?: Attributes & {
     state?: {
         active: boolean;
         error: string;
@@ -10,7 +10,7 @@ declare const factory: (type: string) => (this: {
 }) => Node;
 declare const _default: (this: {
     attributes?: Attributes;
-}, attributes?: Attributes & {
+} | any, attributes?: Attributes & {
     state?: {
         active: boolean;
         error: string;

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

@@ -1,7 +1,7 @@
 import './scss/index.scss';
 declare const _default: (this: {
     attributes?: import("@esportsplus/template").Attributes;
-}, attributes?: import("@esportsplus/template").Attributes & {
+} | any, attributes?: import("@esportsplus/template").Attributes & {
     state?: {
         active: boolean;
         error: string;

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

@@ -2,7 +2,9 @@ import { type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
 export default function (this: {
     attributes?: Attributes;
-}, attributes: Attributes & {
+} | any, attributes: Attributes & {
+    min: number;
+    max: number;
     state?: {
         active: boolean;
         error: string;

package/build/components/range/index.js

@@ -14,6 +14,7 @@ export default function (attributes) {
     return html `
         <input
             class='range --border-state --border-black'
+            style='${() => `--thumb-position: ${((state.value - attributes.min) / (attributes.max - attributes.min)) * 100}%`}'
             type='range'
             ${this?.attributes}
             ${attributes}

package/build/components/range/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.range{--background:var(--background-default);--background-active:var(--background-default);--background-default:var(--color-black-300);--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-width:var(--border-width-700);--height:var(--size-200);--margin-horizontal:0px;--margin-vertical:0px;--thumb-background:var(--color-white-400);--thumb-size:var(--size-400);--width:100%}.range label:not(.--active):not(.--active):hover,.range:not(.--active):not(.--active):hover{--background:var(--background-hover)}.range label:not(.--active):not(.--active):active,.range:not(.--active):not(.--active):active{--background:var(--background-pressed)}.range.--active{--background:var(--background-active)}.range{background:var(--background);height:var(--height);margin:calc(var(--margin-vertical) + (var(--thumb-size) - var(--height))/2)var(--margin-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,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);border:0;border-radius:240px}.range::-moz-range-thumb{background:var(--thumb-background);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range::-webkit-slider-thumb{background:var(--thumb-background);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range{appearance:none;outline:none}.range::-moz-range-thumb{appearance:none;outline:none}.range::-webkit-slider-thumb{appearance:none;outline:none}}
+@layer components {.range{--background:var(--background-default);--background-active:var(--background-default);--background-default:linear-gradient(to right,var(--thumb-background)var(--thumb-position),var(--color-black-300)var(--thumb-position));--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-width:var(--border-width-700);--height:var(--size-200);--margin-horizontal:0px;--margin-vertical:0px;--thumb-background:var(--color-white-400);--thumb-size:var(--size-400);--width:100%}.range label:not(.--active):not(.--active):hover,.range:not(.--active):not(.--active):hover{--background:var(--background-hover)}.range label:not(.--active):not(.--active):active,.range:not(.--active):not(.--active):active{--background:var(--background-pressed)}.range.--active{--background:var(--background-active)}.range{background:var(--background);height:var(--height);margin:calc(var(--margin-vertical) + (var(--thumb-size) - var(--height))/2)var(--margin-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,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);border:0;border-radius:240px}.range::-moz-range-thumb{background:var(--thumb-background);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range::-webkit-slider-thumb{background:var(--thumb-background);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range{appearance:none;outline:none}.range::-moz-range-thumb{appearance:none;outline:none}.range::-webkit-slider-thumb{appearance:none;outline:none}}
 /*$vite$:1*/

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

@@ -1,7 +1,7 @@
 import './scss/index.scss';
 declare const _default: (this: {
     attributes?: import("@esportsplus/template").Attributes;
-}, attributes?: import("@esportsplus/template").Attributes & {
+} | any, attributes?: import("@esportsplus/template").Attributes & {
     state?: {
         active: boolean;
         error: string;

package/package.json

@@ -15,7 +15,7 @@
     "glob": "^11.0.3",
     "lightningcss": "^1.30.1",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.91.0",
+    "sass": "^1.92.0",
     "vite": "^7.1.4"
   },
   "exports": {
@@ -48,7 +48,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.33.4",
+  "version": "0.34.0",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc && tsc-alias",

package/src/components/checkbox/index.ts

@@ -10,7 +10,7 @@ const OMIT = ['checked', 'value'];
 
 const factory = (type: string) => {
     function template(
-        this: { attributes?: Attributes },
+        this: { attributes?: Attributes } | any,
         attributes?: Attributes & { state?: { active: boolean, error: string } }
     ) {
         let state = attributes?.state || reactive({

package/src/components/range/index.ts

@@ -5,8 +5,8 @@ import './scss/index.scss';
 
 
 export default function(
-    this: { attributes?: Attributes },
-    attributes: Attributes & { state?: { active: boolean, error: string, value: number } }
+    this: { attributes?: Attributes } | any,
+    attributes: Attributes & { min: number, max: number, state?: { active: boolean, error: string, value: number } }
 ) {
     let state = attributes.state || reactive({
             active: false,
@@ -21,6 +21,7 @@ export default function(
     return html`
         <input
             class='range --border-state --border-black'
+            style='${() => `--thumb-position: ${((state.value - attributes.min) / (attributes.max - attributes.min)) * 100}%`}'
             type='range'
             ${this?.attributes}
             ${attributes}

package/src/components/range/scss/variables.scss

@@ -3,7 +3,7 @@
 .range {
     --background: var(--background-default);
     --background-active: var(--background-default);
-    --background-default: var(--color-black-300);
+    --background-default: linear-gradient(to right, var(--thumb-background) var(--thumb-position), var(--color-black-300) var(--thumb-position));
     --background-hover: var(--background-default);
     --background-pressed: var(--background-default);
     --border-width: var(--border-width-700);