@fluid-topics/ft-text-field 0.1.7 → 0.1.10

package/README.md

@@ -3,7 +3,7 @@ A text field input component.
 ## Install
 
 ```shell
-npm install @fluid-topics/ft-text-field
+npm install @fluid-topics/ft-switch
 yarn add @fluid-topics/ft-text-field
 ```
 
@@ -11,15 +11,14 @@ yarn add @fluid-topics/ft-text-field
 
 ```typescript
 import {html} from "lit"
-import "@fluid-topics/ft-text-field"
+import "@fluid-topics/ft-switch"
+import {FtSwitchChange} from "@fluid-topics/ft-switch";
 
 function render() {
     return html` 
-            <ft-text-field label="Label"
-                           value="Value"
-                           @change=${(e: CustomEvent) => console.log("Value changed:", e.detail)}
-                           @live-change=${(e: CustomEvent) => console.log("Value live changed:", e.detail)} 
-                           .dataList=${["Banana","Cucumber","Eggplant"]}>
-            </ft-text-field>     `
+            <ft-switch @change=${(e: FtSwitchChange) => console.log("Value changed:", e.detail)}>
+                <ft-switch-option value="1">1</ft-switch-option>
+                <ft-switch-option value="2">2</ft-switch-option>
+            </ft-switch>     `
 }
 ```

package/build/ft-text-field.light.js

@@ -101,7 +101,11 @@ const M=t=>({_$litStatic$:t}),U=new Map,V=(t=>(e,...i)=>{var r;const a=i.length;
         line-height: ${Vt};
         text-transform: ${Pt};
     }
-`;let te=class extends a.FtLitElement{constructor(){super(...arguments),this.variant=P.body1}getStyles(){return[Gt,Zt,Lt,qt,Wt,Kt,Xt,Yt,Jt,Qt]}getTemplate(){return this.element?V`
+`;let te=class extends a.FtLitElement{constructor(){super(...arguments),this.variant=P.body1}getStyles(){return[Gt,Zt,Lt,qt,Wt,Kt,Xt,Yt,Jt,Qt,e.css`
+                .ft-typography {
+                    vertical-align: inherit;
+                }
+            `]}getTemplate(){return this.element?V`
                 <${M(this.element)}
                         class="ft-typography ft-typography--${this.variant}">
                     <slot></slot>
@@ -201,11 +205,11 @@ const M=t=>({_$litStatic$:t}),U=new Map,V=(t=>(e,...i)=>{var r;const a=i.length;
                 }
 
                 .ft-input-label--outlined.ft-input-label--raised .ft-input-label--floating-text {
-                    padding: 4px;
+                    padding: 2px 4px;
                     z-index: ${ie.raisedZIndex};
                     background-color: ${ie.colorSurface};
                     border-radius: ${ie.borderRadiusS};
-                    top: calc(var(--ft-typography-caption-line-height) / -2);
+                    top: calc((var(--ft-typography-caption-line-height) / -2) + 2px);
                 }
 
                 .ft-input-label--outlined.ft-input-label--raised .ft-input-label--text {

package/build/ft-text-field.min.js

@@ -180,7 +180,11 @@ const vt=t=>({_$litStatic$:t}),gt=new Map,bt=(t=>(e,...i)=>{var r;const o=i.leng
         line-height: ${be};
         text-transform: ${xe};
     }
-`;let Me=class extends ht{constructor(){super(...arguments),this.variant=xt.body1}getStyles(){return[we,$e,Oe,Se,Ee,ke,Re,Ce,Ne,Ae]}getTemplate(){return this.element?bt`
+`;let Me=class extends ht{constructor(){super(...arguments),this.variant=xt.body1}getStyles(){return[we,$e,Oe,Se,Ee,ke,Re,Ce,Ne,Ae,a`
+                .ft-typography {
+                    vertical-align: inherit;
+                }
+            `]}getTemplate(){return this.element?bt`
                 <${vt(this.element)}
                         class="ft-typography ft-typography--${this.variant}">
                     <slot></slot>
@@ -280,11 +284,11 @@ const vt=t=>({_$litStatic$:t}),gt=new Map,bt=(t=>(e,...i)=>{var r;const o=i.leng
                 }
 
                 .ft-input-label--outlined.ft-input-label--raised .ft-input-label--floating-text {
-                    padding: 4px;
+                    padding: 2px 4px;
                     z-index: ${Te.raisedZIndex};
                     background-color: ${Te.colorSurface};
                     border-radius: ${Te.borderRadiusS};
-                    top: calc(var(--ft-typography-caption-line-height) / -2);
+                    top: calc((var(--ft-typography-caption-line-height) / -2) + 2px);
                 }
 
                 .ft-input-label--outlined.ft-input-label--raised .ft-input-label--text {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-text-field",
-  "version": "0.1.7",
+  "version": "0.1.10",
   "description": "A fluidtopics text field",
   "keywords": [
     "Lit"
@@ -19,11 +19,11 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-input-label": "^0.1.7",
-    "@fluid-topics/ft-ripple": "^0.1.7",
-    "@fluid-topics/ft-typography": "^0.1.7",
-    "@fluid-topics/ft-wc-utils": "^0.1.7",
+    "@fluid-topics/ft-input-label": "^0.1.10",
+    "@fluid-topics/ft-ripple": "^0.1.10",
+    "@fluid-topics/ft-typography": "^0.1.10",
+    "@fluid-topics/ft-wc-utils": "^0.1.10",
     "lit": "^2.0.2"
   },
-  "gitHead": "78397cca67971191c46739cfb6c87481aaa65745"
+  "gitHead": "af9249642eff7416fb4aa6371f82cb3f99086cec"
 }