@esportsplus/ui 0.35.13 → 0.36.0

package/build/components/button/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.button{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--border-radius:var(--border-radius-400);--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--width:auto}.button.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.button:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.button:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.button--hold{--animation-duration:2.4s;--background-hold:var(--background-active)}.button--processing{--animation-duration:.64s;--border-width:var(--border-width-400);--processing-color:var(--color);--size:var(--size-400)}.button--skeleton{--animation-duration:6.4s}.button{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width))calc(var(--padding-horizontal) - var(--border-width));transition:all var(--transition-duration)ease-in-out;width:var(--width);flex-wrap:wrap;place-content:center;align-items:center;display:flex;position:relative}.button:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;z-index:-1;position:absolute;inset:0}.button--flat:after{display:none}.button--holding{overflow:hidden}.button--holding:after{animation:buttonHolding var(--animation-duration)ease-in-out forwards;box-shadow:unset;background:var(--background-hold);z-index:1;border-radius:0;width:110%;height:100%;display:block;transform:translate(-100%)}@keyframes buttonHolding{to{transform:translate(0%)}}.button--holding>*{animation:buttonHoldingContentPulse calc(var(--animation-duration)/3)infinite ease-in-out;z-index:2}@keyframes buttonHoldingContentPulse{0%,to{opacity:1}50%{opacity:.4}}.button--processing{color:#0000;pointer-events:none}.button--processing:before{animation:buttonProcessing var(--animation-duration)infinite linear;border:var(--border-width)solid color-mix(in srgb,var(--processing-color),transparent 90%);border-left-color:var(--processing-color);content:"";height:var(--size);width:var(--size);border-top-color:#0000;border-right-color:#0000;border-radius:100%;position:absolute;bottom:50%;right:50%;transform:translate(50%,50%)}.button--processing *{opacity:0}@keyframes buttonProcessing{0%{transform:translate(50%,50%)rotate(0)}to{transform:translate(50%,50%)rotate(359deg)}}.button--skeleton{animation:var(--animation-duration)ease-in-out infinite buttonSkeleton;background-image:linear-gradient(270deg,var(--background-pressed),var(--background-default),var(--background-default),var(--background-pressed));color:#0000;pointer-events:none;background-size:400% 100%}.button--skeleton *{opacity:0}@keyframes buttonSkeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.button--top-left,.button--top-right{top:calc((var(--padding-vertical) + var(--line-height)/2)*-1);position:absolute}.button--top-left{left:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--top-right{right:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}}
+@layer components {.button{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--border-radius:var(--border-radius-400);--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--width:auto}.button.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.button:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.button:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.button--holding{--animation-duration:2.4s;--background-hold:var(--background-active)}.button--processing{--animation-duration:.64s;--border-width:var(--border-width-400);--processing-color:var(--color);--size:var(--size-400)}.button--skeleton{--animation-duration:6.4s}.button{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width))calc(var(--padding-horizontal) - var(--border-width));transition:all var(--transition-duration)ease-in-out;width:var(--width);flex-wrap:wrap;place-content:center;align-items:center;display:flex;position:relative}.button:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;z-index:-1;position:absolute;inset:0}.button--flat:after{display:none}.button--holding{overflow:hidden}.button--holding:after{animation:buttonHolding var(--animation-duration)ease-in-out forwards;box-shadow:unset;background:var(--background-hold);z-index:1;border-radius:0;width:110%;height:100%;display:block;transform:translate(-100%)}@keyframes buttonHolding{to{transform:translate(0%)}}.button--holding>*{animation:buttonHoldingContentPulse calc(var(--animation-duration)/3)infinite ease-in-out;z-index:2}@keyframes buttonHoldingContentPulse{0%,to{opacity:1}50%{opacity:.4}}.button--processing{color:#0000;pointer-events:none}.button--processing:before{animation:buttonProcessing var(--animation-duration)infinite linear;border:var(--border-width)solid color-mix(in srgb,var(--processing-color),transparent 90%);border-left-color:var(--processing-color);content:"";height:var(--size);width:var(--size);border-top-color:#0000;border-right-color:#0000;border-radius:100%;position:absolute;bottom:50%;right:50%;transform:translate(50%,50%)}.button--processing *{opacity:0}@keyframes buttonProcessing{0%{transform:translate(50%,50%)rotate(0)}to{transform:translate(50%,50%)rotate(359deg)}}.button--skeleton{animation:var(--animation-duration)ease-in-out infinite buttonSkeleton;background-image:linear-gradient(270deg,var(--background-pressed),var(--background-default),var(--background-default),var(--background-pressed));color:#0000;pointer-events:none;background-size:400% 100%}.button--skeleton *{opacity:0}@keyframes buttonSkeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.button--top-left,.button--top-right{top:calc((var(--padding-vertical) + var(--line-height)/2)*-1);position:absolute}.button--top-left{left:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--top-right{right:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}}
 /*$vite$:1*/

package/build/components/form/action.js

@@ -29,6 +29,7 @@ export default (attributes, content) => {
     let { action, state } = attributes;
     return html `
         <form
+            class='form'
             ${omit(attributes, OMIT)}
             ${{
         onclick: function (event) {

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

@@ -1,3 +1,4 @@
+import './scss/index.scss';
 declare const _default: {
     action: <T extends Record<string, any>>(attributes: {
         action: (data: {

package/build/components/form/index.js

@@ -1,3 +1,4 @@
 import action from './action.js';
 import input from './input.js';
+import './scss/index.scss';
 export default { action, input };

package/build/components/form/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.form{--gap-horizontal:0px;--gap-vertical:0px;--margin-horizontal:0px;--margin-vertical:0px;gap:var(--gap-vertical)var(--gap-horizontal);margin:var(--margin-vertical)var(--margin-horizontal);flex-wrap:wrap;justify-content:flex-start;display:flex;position:relative}}
+/*$vite$:1*/

package/package.json

@@ -3,14 +3,14 @@
   "dependencies": {
     "@esportsplus/action": "^0.0.58",
     "@esportsplus/queue": "^0.1.0",
-    "@esportsplus/reactivity": "^0.18.0",
+    "@esportsplus/reactivity": "^0.18.1",
     "@esportsplus/template": "^0.26.2",
-    "@esportsplus/utilities": "^0.22.2",
+    "@esportsplus/utilities": "^0.23.1",
     "modern-normalize": "^3.0.1"
   },
   "devDependencies": {
     "@esportsplus/typescript": "^0.9.2",
-    "@types/node": "^24.3.1",
+    "@types/node": "^24.4.0",
     "autoprefixer": "^10.4.21",
     "glob": "^11.0.3",
     "lightningcss": "^1.30.1",
@@ -42,7 +42,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.35.13",
+  "version": "0.36.0",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc && tsc-alias",

package/src/components/button/scss/variables.scss

@@ -47,7 +47,7 @@
     }
 
 
-    &--hold {
+    &--holding {
         --animation-duration: 2.4s;
         --background-hold: var(--background-active);
     }

package/src/components/form/action.ts

@@ -51,6 +51,7 @@ export default <T extends Record<string, any>>(
 
     return html`
         <form
+            class='form'
             ${omit(attributes, OMIT)}
             ${{
                 onclick: function(event) {

package/src/components/form/index.ts

@@ -1,5 +1,6 @@
 import action from './action';
 import input from './input';
+import './scss/index.scss';
 
 
 export default { action, input };

package/src/components/form/scss/index.scss

@@ -0,0 +1,10 @@
+@use 'variables';
+
+.form {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-vertical) var(--gap-horizontal);
+    justify-content: flex-start;
+    margin: var(--margin-vertical) var(--margin-horizontal);
+    position: relative;
+}

package/src/components/form/scss/variables.scss

@@ -0,0 +1,6 @@
+.form {
+    --gap-horizontal: 0px;
+    --gap-vertical: 0px;
+    --margin-horizontal: 0px;
+    --margin-vertical: 0px;
+}