@esportsplus/ui 0.45.5 → 0.47.2

package/build/themes/dark/textarea.d.ts

@@ -1,33 +1,34 @@
 declare const _default: (attributes: {
     [key: `aria-${string}`]: string | number | boolean | undefined;
     [key: `data-${string}`]: string | undefined;
-    class?: import("@esportsplus/template/build/types").Attribute | import("@esportsplus/template/build/types").Attribute[];
+    class?: import("node_modules/@esportsplus/template/build/types").Attribute | import("node_modules/@esportsplus/template/build/types").Attribute[];
     onconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
     ondisconnect?: ((element: import("@esportsplus/template").Element) => void) | undefined;
     onrender?: ((element: import("@esportsplus/template").Element) => void) | undefined;
     ontick?: ((dispose: VoidFunction, element: import("@esportsplus/template").Element) => void) | undefined;
-    style?: import("@esportsplus/template/build/types").Attribute | import("@esportsplus/template/build/types").Attribute[];
+    style?: import("node_modules/@esportsplus/template/build/types").Attribute | import("node_modules/@esportsplus/template/build/types").Attribute[];
 } & {
     onabort?: ((this: import("@esportsplus/template").Element, event: UIEvent) => void) | undefined;
     onanimationcancel?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
     onanimationend?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
     onanimationiteration?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
     onanimationstart?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
-    onauxclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+    onauxclick?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
     onbeforeinput?: ((this: import("@esportsplus/template").Element, event: InputEvent) => void) | undefined;
-    onbeforetoggle?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onbeforematch?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onbeforetoggle?: ((this: import("@esportsplus/template").Element, event: ToggleEvent) => void) | undefined;
     onblur?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
     oncancel?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
     oncanplay?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
     oncanplaythrough?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
     onchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
-    onclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+    onclick?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
     onclose?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
     oncompositionend?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
     oncompositionstart?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
     oncompositionupdate?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
     oncontextlost?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
-    oncontextmenu?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+    oncontextmenu?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
     oncontextrestored?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
     oncopy?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
     oncuechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
@@ -77,6 +78,7 @@ declare const _default: (attributes: {
     onpointermove?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
     onpointerout?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
     onpointerover?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+    onpointerrawupdate?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
     onpointerup?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
     onprogress?: ((this: import("@esportsplus/template").Element, event: ProgressEvent<EventTarget>) => void) | undefined;
     onratechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
@@ -95,7 +97,7 @@ declare const _default: (attributes: {
     onsubmit?: ((this: import("@esportsplus/template").Element, event: SubmitEvent) => void) | undefined;
     onsuspend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
     ontimeupdate?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
-    ontoggle?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    ontoggle?: ((this: import("@esportsplus/template").Element, event: ToggleEvent) => void) | undefined;
     ontouchcancel?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
     ontouchend?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
     ontouchmove?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
@@ -116,5 +118,5 @@ declare const _default: (attributes: {
         active: boolean;
         error: string;
     };
-}) => Node;
+}) => DocumentFragment;
 export default _default;

package/package.json

@@ -1,25 +1,25 @@
 {
   "author": "ICJR",
   "dependencies": {
-    "@esportsplus/action": "^0.0.58",
-    "@esportsplus/queue": "^0.1.0",
-    "@esportsplus/reactivity": "^0.18.1",
-    "@esportsplus/template": "^0.26.5",
-    "@esportsplus/utilities": "^0.25.0",
-    "@esportsplus/vite": "^0.10.5",
+    "@esportsplus/action": "^0.1.3",
+    "@esportsplus/queue": "^0.2.0",
+    "@esportsplus/reactivity": "^0.29.12",
+    "@esportsplus/template": "^0.40.4",
+    "@esportsplus/utilities": "^0.27.2",
+    "@esportsplus/vite": "^0.12.3",
     "modern-normalize": "^3.0.1"
   },
   "devDependencies": {
-    "@esportsplus/typescript": "^0.9.2",
-    "@types/node": "^24.10.1",
-    "@types/shelljs": "^0.8.17",
-    "autoprefixer": "^10.4.22",
+    "@esportsplus/typescript": "^0.27.3",
+    "@types/node": "^25.0.3",
+    "@types/shelljs": "^0.10.0",
+    "autoprefixer": "^10.4.23",
     "glob": "^13.0.0",
     "lightningcss": "^1.30.2",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.94.2",
+    "sass": "^1.97.2",
     "shelljs": "^0.10.0",
-    "vite": "^7.2.2"
+    "vite": "^7.3.1"
   },
   "exports": {
     "./css-utilities.scss": "./build/css-utilities/index.scss",
@@ -34,10 +34,12 @@
       "types": "./build/themes/dark/index.d.ts",
       "default": "./build/themes/dark/index.js"
     },
+    "./themes/dark/*.scss": "./build/themes/dark/*/scss/index.scss",
     "./themes/light": {
       "types": "./build/themes/light/index.d.ts",
       "default": "./build/themes/light/index.js"
     },
+    "./themes/light/*.scss": "./build/themes/light/*/scss/index.scss",
     "./tokens.scss": "./tokens.scss",
     "./*.scss": "./build/components/*/scss/index.scss",
     "./*": {
@@ -51,12 +53,16 @@
   },
   "name": "@esportsplus/ui",
   "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/esportsplus/ui"
+  },
   "sideEffects": false,
   "type": "module",
-  "version": "0.45.5",
+  "version": "0.47.2",
   "scripts": {
     "build": "run-s build:vite build:ts",
-    "build:ts": "tsc && tsc-alias",
+    "build:ts": "tsc",
     "build:vite": "vite build",
     "-": "-"
   }

package/src/components/button/index.ts

@@ -11,10 +11,6 @@ const hold = template.factory(
                     state.holding = false;
                 }
             },
-            start = (e: MouseEvent) => {
-                e.preventDefault();
-                state.holding = true;
-            },
             state = reactive({
                 complete: false,
                 holding: false
@@ -23,17 +19,29 @@ const hold = template.factory(
         return html`
             <div
                 class='button ${() => state.holding && 'button--holding'} ${() => state.complete && '--active'}'
-                onanimationend=${(e: AnimationEvent) => {
-                    if (e.animationName === 'buttonHolding') {
-                        state.complete = true;
+                onmousedown='${(e) => {
+                    e.preventDefault();
+                    state.holding = true;
+                }}'
+                ${attributes}
+                ${{
+                    onanimationend: (e: AnimationEvent) => {
+                        if (e.animationName === 'buttonHolding') {
+                            state.complete = true;
+                        }
+                    },
+                    onclick: () => {},
+                    onmousedown: (e) => {
+                        e.preventDefault();
+                        state.holding = true;
+                    },
+                    onmouseup: end,
+                    ontouchend: end,
+                    ontouchstart: (e) => {
+                        e.preventDefault();
+                        state.holding = true;
                     }
                 }}
-                onclick=${() => {}}
-                onmousedown=${start}
-                onmouseup=${end}
-                ontouchstart=${start}
-                ontouchend=${end}
-                ${attributes}
             >
                 ${() => content(state)}
             </div>

package/src/components/counter/index.ts

@@ -30,8 +30,10 @@ export default (attributes: Attributes & {
         rendering = true,
         state = reactive({
             length: 0,
+            test: () => 'sds',
             render: [] as string[]
-        });
+        }),
+        render = reactive([] as string[]);
 
     decimals ??= 2;
 
@@ -69,7 +71,7 @@ export default (attributes: Attributes & {
                 value = '0';
             }
 
-            state.render[i] = value;
+            render[i] = value;
         }
 
         if (rendering === true) {
@@ -87,7 +89,7 @@ export default (attributes: Attributes & {
                     return '';
                 }
 
-                return html.reactive(state.render, function (value, i) {
+                return html.reactive(render, function (value) {
                     if (isNaN(parseInt(value, 10))) {
                         return html`
                             <span class='counter-character counter-character--symbol'>
@@ -97,9 +99,7 @@ export default (attributes: Attributes & {
                     }
 
                     return html`
-                        <div class=' counter-character' ${{
-                            class: i > n - 3 && 'counter-character--fraction'
-                        }}>
+                        <div class=' counter-character'>
                             <div class='counter-character-track' style='${`--value: ${value}`}'>
                                 <span>9</span>
                                 ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html`<span>${value}</span>`)}

package/src/components/select/index.ts

@@ -96,7 +96,19 @@ const select = template.factory<A, (state: { active: boolean, selected?: string
                     state.render = true;
                 }}
             >
-                ${content ? (() => content(state)) : (() => options[ state.selected! ] || '-')}
+                ${content ? (() => content(state)) : (() => {
+                    let selected = options[state.selected!];
+
+                    if (!selected) {
+                        return '-';
+                    }
+
+                    if (selected !== null && typeof selected === 'object' && 'content' in selected) {
+                        return selected.content;
+                    }
+
+                    return selected;
+                })}
 
                 <div class='select-arrow' ${this?.attributes?.arrow} ${attributes.arrow}></div>
 

package/src/themes/dark/button/scss/index.scss

@@ -1,9 +1,14 @@
 .button {
+    &--form,
     &--primary,
     &--secondary,
     &--tertiary {
         --border-color-active: var(--color-primary-300);
+        --color-active: var(--color-white-400);
         --color-default: var(--color-grey-500);
+        --color-hover: var(--color-white-400);
+        --color-pressed: var(--color-grey-500);
+        --font-weight: var(--font-weight-500);
     }
 
     &--form,
@@ -14,7 +19,14 @@
         --background-pressed: var(--color-primary-500);
     }
 
+    &--form {
+        --padding-horizontal: var(--size-500);
+        --padding-vertical: var(--size-500);
+        --width: 100%;
+    }
+
     &--secondary {
+        --background-active: var(--color-black-300);
         --background-default: var(--color-black-300);
         --background-hover: var(--color-primary-300);
         --background-pressed: var(--color-primary-500);
@@ -22,6 +34,10 @@
     }
 
     &--tertiary {
+        --background-active: var(--color-black-300);
+        --background-default: var(--color-black-400);
+        --background-hover: var(--color-black-300);
+        --background-pressed: var(--color-black-500);
         --border-color-active: var(--color-primary-300);
         --border-color-default: var(--color-black-300);
         --border-color-hover: var(--color-black-400);

package/src/themes/dark/index.ts

@@ -1,7 +1,5 @@
 export { default as alert } from './alert';
 export { default as back } from './back';
-export { default as button } from './button';
 export { default as input } from './input';
-export { default as link } from './link';
 export { default as select } from './select';
 export { default as textarea } from './textarea';

package/src/themes/dark/link/scss/index.scss

@@ -0,0 +1,26 @@
+.link {
+    &--primary,
+    &--tooltip {
+        --color-active: var(--color-white-400);
+        --color-default: var(--color-grey-500);
+        --color-hover: var(--color-white-400);
+        --color-pressed: var(--color-grey-500);
+        --font-weight: var(--font-weight-500);
+        --gap-horizontal: 0px;
+        --gap-vertical: 0px;
+        align-items: center;
+        display: flex;
+        flex-flow: row;
+        gap: var(--gap-vertical) var(--gap-horizontal);
+    }
+
+    &--tooltip {
+        --background-active: var(--color-black-300);
+        --background-default: var(--color-black-400);
+        --background-hover: var(--color-black-300);
+        --background-pressed: var(--color-black-500);
+        --padding-horizontal: var(--size-500);
+        --padding-vertical: var(--size-500);
+        white-space: nowrap;
+    }
+}

package/tsconfig.json

@@ -1,3 +1,8 @@
 {
-    "extends": "@esportsplus/typescript/tsconfig.package.json"
+    "extends": "@esportsplus/typescript/tsconfig.package.json",
+    "compilerOptions": {
+        "plugins": [
+            { "transform": "@esportsplus/template/compiler/tsc" }
+        ]
+    }
 }

package/build/themes/dark/button/index.d.ts

@@ -1,16 +0,0 @@
-import './scss/index.scss';
-declare const _default: {
-    form: {
-        class: string;
-    };
-    primary: {
-        class: string;
-    };
-    secondary: {
-        class: string;
-    };
-    tertiary: {
-        class: string;
-    };
-};
-export default _default;

package/build/themes/dark/button/index.js

@@ -1,14 +0,0 @@
-import './scss/index.scss';
-const primary = {
-    class: `button button--primary --color-white --text-bold --text-uppercase`,
-};
-const secondary = {
-    class: `button button--secondary --background-black --color-white --text-bold`
-};
-const tertiary = {
-    class: `button button--tertiary --background-black --color-white --text-bold`
-};
-const form = {
-    class: `${primary.class} --padding-500 --width-full`
-};
-export default { form, primary, secondary, tertiary };

package/build/themes/dark/link.d.ts

@@ -1,11 +0,0 @@
-declare const _default: {
-    primary: {
-        class: string;
-        style: string;
-    };
-    tooltip: {
-        class: string;
-        style: string;
-    };
-};
-export default _default;

package/build/themes/dark/link.js

@@ -1,9 +0,0 @@
-const primary = {
-    class: 'link --color-white --flex-row --flex-vertical --text-bold',
-    style: '--color-default: var(--color-grey-500);'
-};
-const tooltip = {
-    class: `${primary.class} --background-black --padding-500`,
-    style: `${primary.style} white-space: nowrap;`
-};
-export default { primary, tooltip };

package/src/themes/dark/button/index.ts

@@ -1,22 +0,0 @@
-import './scss/index.scss';
-
-
-const primary = {
-    class: `button button--primary --color-white --text-bold --text-uppercase`,
-};
-
-const secondary = {
-    class: `button button--secondary --background-black --color-white --text-bold`
-};
-
-const tertiary = {
-    class: `button button--tertiary --background-black --color-white --text-bold`
-};
-
-
-const form = {
-    class: `${primary.class} --padding-500 --width-full`
-};
-
-
-export default { form, primary, secondary, tertiary };

package/src/themes/dark/link.ts

@@ -1,12 +0,0 @@
-const primary = {
-    class: 'link --color-white --flex-row --flex-vertical --text-bold',
-    style: '--color-default: var(--color-grey-500);'
-};
-
-const tooltip = {
-    class: `${primary.class} --background-black --padding-500`,
-    style: `${primary.style} white-space: nowrap;`
-};
-
-
-export default { primary, tooltip };