@esportsplus/ui 0.42.14 → 0.44.0

package/build/theme/dark/select.js

@@ -0,0 +1,19 @@
+import select from '../../components/select/index.js';
+export default select.bind({
+    attributes: {
+        class: '--background-black --border --border-black --color-white',
+        option: {
+            class: '--background-black --color-white --padding-horizontal-500 --width-full',
+            style: '--color-default: var(--color-grey-500);white-space: nowrap;'
+        },
+        style: '--border-color-default: var(--color-black-300);',
+        'tooltip-content': {
+            class: '--border --border-radius-500',
+            direction: 'sw',
+            style: `
+                --background: var(--color-black-400);
+                --border-color: var(--color-black-300);
+            `
+        }
+    }
+});

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

@@ -0,0 +1,120 @@
+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[];
+    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[];
+} & {
+    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;
+    onbeforeinput?: ((this: import("@esportsplus/template").Element, event: InputEvent) => void) | undefined;
+    onbeforetoggle?: ((this: import("@esportsplus/template").Element, event: Event) => 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;
+    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;
+    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;
+    oncut?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
+    ondblclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+    ondrag?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+    ondragend?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+    ondragenter?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+    ondragleave?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+    ondragover?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+    ondragstart?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+    ondrop?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+    ondurationchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onemptied?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onended?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onerror?: ((this: import("@esportsplus/template").Element, event: ErrorEvent) => void) | undefined;
+    onfocus?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
+    onfocusin?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
+    onfocusout?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
+    onformdata?: ((this: import("@esportsplus/template").Element, event: FormDataEvent) => void) | undefined;
+    ongotpointercapture?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+    oninput?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    oninvalid?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onkeydown?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
+    onkeypress?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
+    onkeyup?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
+    onload?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onloadeddata?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onloadedmetadata?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onloadstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onlostpointercapture?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+    onmousedown?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+    onmouseenter?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+    onmouseleave?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+    onmousemove?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+    onmouseout?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+    onmouseover?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+    onmouseup?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+    onpaste?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
+    onpause?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onplay?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onplaying?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onpointercancel?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+    onpointerdown?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+    onpointerenter?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+    onpointerleave?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+    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;
+    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;
+    onreset?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onresize?: ((this: import("@esportsplus/template").Element, event: UIEvent) => void) | undefined;
+    onscroll?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onscrollend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onsecuritypolicyviolation?: ((this: import("@esportsplus/template").Element, event: SecurityPolicyViolationEvent) => void) | undefined;
+    onseeked?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onseeking?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onselect?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onselectionchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onselectstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onslotchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onstalled?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    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;
+    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;
+    ontouchstart?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
+    ontransitioncancel?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
+    ontransitionend?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
+    ontransitionrun?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
+    ontransitionstart?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
+    onvolumechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onwaiting?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onwebkitanimationend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onwebkitanimationiteration?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onwebkitanimationstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onwebkittransitionend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+    onwheel?: ((this: import("@esportsplus/template").Element, event: WheelEvent) => void) | undefined;
+} & Record<PropertyKey, unknown> & {
+    state?: {
+        active: boolean;
+        error: string;
+    };
+}) => Node;
+export default _default;

package/build/theme/dark/textarea.js

@@ -0,0 +1,10 @@
+import textarea from '../../components/textarea/index.js';
+export default textarea.bind({
+    attributes: {
+        class: 'textarea--primary --border --border-black --color-white',
+        style: `
+            --border-color-active: var(--color-purple-300);
+            --border-color-default: var(--color-black-300);
+        `
+    }
+});

package/package.json

@@ -14,10 +14,10 @@
     "@types/node": "^24.10.1",
     "@types/shelljs": "^0.8.17",
     "autoprefixer": "^10.4.22",
-    "glob": "^11.0.3",
+    "glob": "^12.0.0",
     "lightningcss": "^1.30.2",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.94.0",
+    "sass": "^1.94.1",
     "shelljs": "^0.10.0",
     "vite": "^7.2.2"
   },
@@ -30,6 +30,10 @@
     },
     "./layer.scss": "./layer.scss",
     "./lib.scss": "./lib.scss",
+    "./theme/dark/*": {
+      "types": "./build/theme/dark/index.d.ts",
+      "default": "./build/theme/dark/index.js"
+    },
     "./tokens.scss": "./tokens.scss",
     "./*.scss": "./build/components/*/scss/index.scss",
     "./*": {
@@ -45,7 +49,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.42.14",
+  "version": "0.44.0",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc && tsc-alias",

package/src/css-utilities/text/scss/index.scss

@@ -39,6 +39,18 @@
         &-top::before {
             margin-top: calc((1 - var(--line-height)) * 0.618em);
         }
+
+        &-first-child {
+            &:first-child {
+                @extend .--text-crop-top;
+            }
+        }
+
+        &-last-child {
+            &:last-child {
+                @extend .--text-crop-bottom;
+            }
+        }
     }
 
     &-italic {

package/src/theme/dark/alert.ts

@@ -0,0 +1,23 @@
+import alert from '~/components/alert';
+
+
+export default alert({
+    class: '--margin-600 --padding-500',
+    style: `
+        background: var(--color-black-400);
+        border: 2px solid var(--color-black-300);
+        box-shadow: var(--box-shadow-300);
+    `,
+
+    'alert-close': {
+        class: '--background-black --border-radius-300 --color-white',
+        style: '--color-default: var(--color-grey-500);margin: calc(var(--size-100) * -1) 0;'
+    },
+    'alert-messages': {
+        class: '--padding-horizontal --padding-500',
+        style: 'justify-content: center;'
+    },
+    'alert-message': {
+        style: 'color: var(--color-white-400);'
+    },
+});

package/src/theme/dark/back.ts

@@ -0,0 +1,9 @@
+import back from '~/components/back';
+
+
+export default back.bind({
+    attributes: {
+        class: '--color-white --margin-vertical --margin-spacer-200',
+        style: '--color-default: var(--color-grey-500);'
+    }
+});

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

@@ -0,0 +1,22 @@
+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/theme/dark/button/scss/index.scss

@@ -0,0 +1,30 @@
+.button {
+    &--primary,
+    &--secondary,
+    &--tertiary {
+        --border-color-active: var(--color-primary-300);
+        --color-default: var(--color-grey-500);
+    }
+
+    &--form,
+    &--primary {
+        --background-active: var(--color-primary-300);
+        --background-default: var(--color-primary-300);
+        --background-hover: var(--color-primary-300);
+        --background-pressed: var(--color-primary-500);
+    }
+
+    &--secondary {
+        --background-default: var(--color-black-300);
+        --background-hover: var(--color-primary-300);
+        --background-pressed: var(--color-primary-500);
+        --border-color: var(--background-color);
+    }
+
+    &--tertiary {
+        --border-color-active: var(--color-primary-300);
+        --border-color-default: var(--color-black-300);
+        --border-color-hover: var(--color-black-400);
+        --border-color-pressed: var(--color-black-500);
+    }
+}

package/src/theme/dark/index.ts

@@ -0,0 +1,6 @@
+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 select } from './select';
+export { default as textarea } from './textarea';

package/src/theme/dark/input.ts

@@ -0,0 +1,12 @@
+import input from '~/components/input';
+
+
+export default input.bind({
+    attributes: {
+        class: 'input--primary --border --border-black --color-white',
+        style: `
+            --border-color-active: var(--color-purple-300);
+            --border-color-default: var(--color-black-300);
+        `
+    }
+});

package/src/theme/dark/select.ts

@@ -0,0 +1,22 @@
+import select from '~/components/select';
+
+
+export default select.bind({
+    attributes: {
+        class: '--background-black --border --border-black --color-white',
+        option: {
+            class: '--background-black --color-white --padding-horizontal-500 --width-full',
+            style: '--color-default: var(--color-grey-500);white-space: nowrap;'
+        },
+        style: '--border-color-default: var(--color-black-300);',
+
+        'tooltip-content': {
+            class: '--border --border-radius-500',
+            direction: 'sw',
+            style: `
+                --background: var(--color-black-400);
+                --border-color: var(--color-black-300);
+            `
+        }
+    }
+});

package/src/theme/dark/textarea.ts

@@ -0,0 +1,12 @@
+import textarea from '~/components/textarea';
+
+
+export default textarea.bind({
+    attributes: {
+        class: 'textarea--primary --border --border-black --color-white',
+        style: `
+            --border-color-active: var(--color-purple-300);
+            --border-color-default: var(--color-black-300);
+        `
+    }
+});