@esportsplus/ui 0.25.9 → 0.27.0

package/src/components/textarea/index.ts

@@ -6,25 +6,21 @@ import template from '~/components/template';
 import './scss/index.scss';
 
 
-type A = Attributes & {
-    'textarea-tag'?: Attributes;
-    state?: { active: boolean, error: string };
-};
+type A = Attributes & { state?: { active: boolean, error: string } };
 
 
-const OMIT = ['textarea-tag'];
+const OMIT = ['state'];
 
 
-export default template.factory(
-    function(attributes: A, content) {
-        let a = attributes['textarea-tag'],
-            state = attributes.state || reactive({
+export default template.factory<A, never>(
+    function(attributes) {
+        let state = attributes.state || reactive({
                 active: false,
                 error: ''
             });
 
         return html`
-            <label
+            <textarea
                 class='textarea'
                 ${{
                     class: () => state.active && '--active',
@@ -33,19 +29,13 @@ export default template.factory(
                     },
                     onfocusout: () => {
                         state.active = false;
-                    }
+                    },
+                    onrender: form.input.onrender(state)
                 }}
-                ${a ? omit(attributes, OMIT) : attributes}
+                ${omit(attributes, OMIT)}
             >
-                <textarea
-                    class='textarea-tag'
-                    onrender=${form.input.onrender(state)}
-                    ${a}
-                >
-                    ${a?.value as string}
-                </textarea>
-                ${content}
-            </label>
+                ${attributes?.value as string}
+            </textarea>
         `;
     }
 );

package/src/components/textarea/scss/index.scss

@@ -3,24 +3,27 @@
     background: var(--background);
     border: var(--border-width) var(--border-style) var(--border-color);
     border-radius: var(--border-radius);
+    color: var(--color);
     cursor: text;
     display: flex;
+    flex: 1 1 auto;
     flex-wrap: wrap;
     font-size: var(--font-size);
     line-height: var(--line-height);
+    min-width: 0;
+    padding: var(--padding-vertical) var(--padding-horizontal);
     position: relative;
+    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;
+    white-space: normal;
     width: 100%;
 
     &:invalid,
     &:required {
         box-shadow: none;
     }
-
-    &-tag {
-        color: var(--color);
-        flex: 1 1 auto;
-        padding: var(--padding-vertical) var(--padding-horizontal);
-        min-width: 0;
-        white-space: normal;
-    }
 }

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

@@ -1,3 +1,5 @@
+@use 'variables';
+
 .--flex {
     &-center {
         align-content: center;
@@ -28,6 +30,11 @@
         flex: 0 0 var(--width);
     }
 
+    &-gap {
+        display: flex;
+        gap: var(--gap-vertical) var(--gap-horizontal);
+    }
+
     &-horizontal {
         display: flex;
         flex-flow: row wrap;

package/src/css-utilities/flex/scss/variables.scss

@@ -0,0 +1,39 @@
+@use '/lib';
+@use '/tokens';
+
+.--flex-gap {
+    @each $direction in 'horizontal' 'vertical' {
+        &,
+        &-#{$direction} {
+            @each $key in lib.map-keys(tokens.$border-width) {
+                &-border-width {
+                    --gap-#{$direction}: var(--border-width-400);
+
+                    &-#{$key} {
+                        --gap-#{$direction}: var(--border-width-#{$key});
+                    }
+                }
+            }
+
+            @each $key in lib.map-keys(tokens.$spacer) {
+                &-spacer {
+                    --gap-#{$direction}: var(--spacer-400);
+
+                    &-#{$key} {
+                        --gap-#{$direction}: var(--spacer-#{$key});
+                    }
+                }
+            }
+
+            @each $key in lib.map-keys(tokens.$size) {
+                &-#{$key} {
+                    --gap-#{$direction}: var(--size-#{$key});
+                }
+            }
+
+            &-inherit {
+                --gap-#{$direction}: inherit;
+            }
+        }
+    }
+}