@esportsplus/ui 0.31.3 → 0.31.7

package/build/components/select/index.js

@@ -43,7 +43,7 @@ const select = template.factory(function (attributes, content) {
     });
     return html `
             <label
-                class='select ${() => state.active && '--active'}'
+                class='select tooltip ${() => state.active && '--active'}'
                 onclick=${() => {
         if (state.render) {
             set(state, !state.active);

package/build/components/select/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.select{cursor:pointer;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;flex-wrap:wrap;width:100%;display:flex;position:relative}.select-arrow{right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--border-color);border-style:var(--border-style);border-width:0 var(--border-width)var(--border-width)0;content:"";height:var(--arrow-size);width:var(--arrow-size);position:absolute;transform:translateY(50%)rotate(45deg)}.select-content{background:var(--background);border:var(--border-width)var(--border-style)var(--border-color);border-radius:var(--border-radius);font-size:var(--font-size);line-height:var(--line-height);padding:var(--padding-vertical)calc(var(--padding-horizontal)/1.5 + var(--arrow-size))var(--padding-vertical)var(--padding-horizontal)}.select-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
+@layer components {.select{--arrow-size:6px;--arrow-spacer:1px;--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-default:var(--background);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--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);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.select:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.select.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.select-arrow{--border-width:var(--border-width-500)}.select-option{--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select{cursor:pointer;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;flex-wrap:wrap;width:100%;display:flex;position:relative}.select-arrow{right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--border-color);border-style:var(--border-style);border-width:0 var(--border-width)var(--border-width)0;content:"";height:var(--arrow-size);width:var(--arrow-size);position:absolute;transform:translateY(50%)rotate(45deg)}.select-content{background:var(--background);border:var(--border-width)var(--border-style)var(--border-color);border-radius:var(--border-radius);font-size:var(--font-size);line-height:var(--line-height);padding:var(--padding-vertical)calc(var(--padding-horizontal)/1.5 + var(--arrow-size))var(--padding-vertical)var(--padding-horizontal)}.select-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
 /*$vite$:1*/

package/package.json

@@ -48,7 +48,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.31.3",
+  "version": "0.31.7",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc && tsc-alias",

package/src/components/select/index.ts

@@ -77,7 +77,7 @@ const select = template.factory<A>(
 
         return html`
             <label
-                class='select ${() => state.active && '--active'}'
+                class='select tooltip ${() => state.active && '--active'}'
                 onclick=${() => {
                     if (state.render) {
                         set(state, !state.active);

package/src/components/select/scss/index.scss

@@ -1,4 +1,5 @@
 @use '/lib';
+@use 'variables';
 
 .select {
     cursor: pointer;

package/src/components/select/scss/variables.scss

@@ -1,3 +1,5 @@
+@use '/tokens';
+
 .select {
     --arrow-size: 6px;
     --arrow-spacer: 1px;