@fluid-topics/ft-input-label 1.2.10 → 1.2.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -103,17 +103,17 @@ Also for action icons.`,e.colorGray200),contentGlobalSubtle:t.extend("--ft-conte
103
103
  .ft-typography {
104
104
  vertical-align: inherit;
105
105
  }
106
- `,Na=[Object.keys(G).map(i=>xt(i))];var Ct=u(C()),f=u(z());var l={fontSize:f.FtCssVariableFactory.create("--ft-input-label-font-size","","SIZE","14px"),raisedFontSize:f.FtCssVariableFactory.create("--ft-input-label-raised-font-size","","SIZE","11px"),raisedZIndex:f.FtCssVariableFactory.create("--ft-input-label-outlined-raised-z-index","","NUMBER","2"),verticalSpacing:f.FtCssVariableFactory.create("--ft-input-label-vertical-spacing","","SIZE","4px"),horizontalSpacing:f.FtCssVariableFactory.create("--ft-input-label-horizontal-spacing","","SIZE","12px"),labelMaxWidth:f.FtCssVariableFactory.create("--ft-input-label-max-width","","SIZE","100%"),borderColor:f.FtCssVariableFactory.extend("--ft-input-label-border-color","",f.designSystemVariables.colorOutline),textColor:f.FtCssVariableFactory.extend("--ft-input-label-text-color","",f.designSystemVariables.colorOnSurfaceMedium),disabledTextColor:f.FtCssVariableFactory.extend("--ft-input-label-disabled-text-color","",f.designSystemVariables.colorOnSurfaceDisabled),colorSurface:f.FtCssVariableFactory.external(f.designSystemVariables.colorSurface,"Design system"),borderRadiusS:f.FtCssVariableFactory.external(f.designSystemVariables.borderRadiusS,"Design system"),colorError:f.FtCssVariableFactory.external(f.designSystemVariables.colorError,"Design system")},Nt=Ct.css`
106
+ `,Na=[Object.keys(G).map(i=>xt(i))];var Ct=u(C()),f=u(z());var l={fontSize:f.FtCssVariableFactory.create("--ft-input-label-font-size","","SIZE","14px"),raisedFontSize:f.FtCssVariableFactory.create("--ft-input-label-raised-font-size","","SIZE","11px"),raisedZIndex:f.FtCssVariableFactory.create("--ft-input-label-outlined-raised-z-index","","NUMBER","2"),verticalSpacing:f.FtCssVariableFactory.create("--ft-input-label-vertical-spacing","","SIZE","4px"),horizontalSpacing:f.FtCssVariableFactory.create("--ft-input-label-horizontal-spacing","","SIZE","12px"),labelMaxWidth:f.FtCssVariableFactory.create("--ft-input-label-max-width","","SIZE","100%"),borderColor:f.FtCssVariableFactory.extend("--ft-input-label-border-color","",f.designSystemVariables.colorOutline),textColor:f.FtCssVariableFactory.extend("--ft-input-label-text-color","",f.designSystemVariables.colorOnSurfaceMedium),disabledTextColor:f.FtCssVariableFactory.extend("--ft-input-label-disabled-text-color","",f.designSystemVariables.colorOnSurfaceDisabled),backgroundColor:f.FtCssVariableFactory.extend("--ft-input-label-background-color","",f.designSystemVariables.colorSurface),borderRadius:f.FtCssVariableFactory.extend("--ft-input-label-border-radius","",f.designSystemVariables.borderRadiusS),colorError:f.FtCssVariableFactory.external(f.designSystemVariables.colorError,"Design system")},Nt=Ct.css`
107
107
  .ft-input-label {
108
108
  position: absolute;
109
109
  inset: 0;
110
110
  display: flex;
111
- background-color: ${l.colorSurface};
112
- border-radius: ${l.borderRadiusS} ${l.borderRadiusS} 0 0;
111
+ background-color: ${l.backgroundColor};
112
+ border-radius: ${l.borderRadius} ${l.borderRadius} 0 0;
113
113
  }
114
114
 
115
115
  .ft-input-label--outlined {
116
- border-radius: ${l.borderRadiusS};
116
+ border-radius: ${l.borderRadius};
117
117
  }
118
118
 
119
119
  .ft-input-label {
@@ -205,20 +205,20 @@ Also for action icons.`,e.colorGray200),contentGlobalSubtle:t.extend("--ft-conte
205
205
  .ft-input-label--outlined:before {
206
206
  border-left-width: 1px;
207
207
  border-left-style: solid;
208
- border-radius: ${l.borderRadiusS} 0 0 ${l.borderRadiusS};
208
+ border-radius: ${l.borderRadius} 0 0 ${l.borderRadius};
209
209
  }
210
210
 
211
211
  .ft-input-label--outlined:after {
212
212
  border-right-width: 1px;
213
213
  border-right-style: solid;
214
- border-radius: 0 ${l.borderRadiusS} ${l.borderRadiusS} 0;
214
+ border-radius: 0 ${l.borderRadius} ${l.borderRadius} 0;
215
215
  }
216
216
 
217
217
  .ft-input-label--outlined.ft-input-label--raised .ft-input-label--floating-text {
218
218
  padding: 2px 4px;
219
219
  z-index: ${l.raisedZIndex};
220
- background-color: ${l.colorSurface};
221
- border-radius: ${l.borderRadiusS};
220
+ background-color: ${l.backgroundColor};
221
+ border-radius: ${l.borderRadius};
222
222
  top: calc((var(--ft-typography-caption-line-height) / -2) + 2px);
223
223
  }
224
224
 
@@ -151,17 +151,17 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:t.extend("--ft-conte
151
151
  .ft-typography {
152
152
  vertical-align: inherit;
153
153
  }
154
- `,Ob=[Object.keys(Gt).map(r=>qs(r))];var B={fontSize:t.create("--ft-input-label-font-size","","SIZE","14px"),raisedFontSize:t.create("--ft-input-label-raised-font-size","","SIZE","11px"),raisedZIndex:t.create("--ft-input-label-outlined-raised-z-index","","NUMBER","2"),verticalSpacing:t.create("--ft-input-label-vertical-spacing","","SIZE","4px"),horizontalSpacing:t.create("--ft-input-label-horizontal-spacing","","SIZE","12px"),labelMaxWidth:t.create("--ft-input-label-max-width","","SIZE","100%"),borderColor:t.extend("--ft-input-label-border-color","",te.colorOutline),textColor:t.extend("--ft-input-label-text-color","",te.colorOnSurfaceMedium),disabledTextColor:t.extend("--ft-input-label-disabled-text-color","",te.colorOnSurfaceDisabled),colorSurface:t.external(te.colorSurface,"Design system"),borderRadiusS:t.external(te.borderRadiusS,"Design system"),colorError:t.external(te.colorError,"Design system")},Xs=U`
154
+ `,Ob=[Object.keys(Gt).map(r=>qs(r))];var B={fontSize:t.create("--ft-input-label-font-size","","SIZE","14px"),raisedFontSize:t.create("--ft-input-label-raised-font-size","","SIZE","11px"),raisedZIndex:t.create("--ft-input-label-outlined-raised-z-index","","NUMBER","2"),verticalSpacing:t.create("--ft-input-label-vertical-spacing","","SIZE","4px"),horizontalSpacing:t.create("--ft-input-label-horizontal-spacing","","SIZE","12px"),labelMaxWidth:t.create("--ft-input-label-max-width","","SIZE","100%"),borderColor:t.extend("--ft-input-label-border-color","",te.colorOutline),textColor:t.extend("--ft-input-label-text-color","",te.colorOnSurfaceMedium),disabledTextColor:t.extend("--ft-input-label-disabled-text-color","",te.colorOnSurfaceDisabled),backgroundColor:t.extend("--ft-input-label-background-color","",te.colorSurface),borderRadius:t.extend("--ft-input-label-border-radius","",te.borderRadiusS),colorError:t.external(te.colorError,"Design system")},Xs=U`
155
155
  .ft-input-label {
156
156
  position: absolute;
157
157
  inset: 0;
158
158
  display: flex;
159
- background-color: ${B.colorSurface};
160
- border-radius: ${B.borderRadiusS} ${B.borderRadiusS} 0 0;
159
+ background-color: ${B.backgroundColor};
160
+ border-radius: ${B.borderRadius} ${B.borderRadius} 0 0;
161
161
  }
162
162
 
163
163
  .ft-input-label--outlined {
164
- border-radius: ${B.borderRadiusS};
164
+ border-radius: ${B.borderRadius};
165
165
  }
166
166
 
167
167
  .ft-input-label {
@@ -253,20 +253,20 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:t.extend("--ft-conte
253
253
  .ft-input-label--outlined:before {
254
254
  border-left-width: 1px;
255
255
  border-left-style: solid;
256
- border-radius: ${B.borderRadiusS} 0 0 ${B.borderRadiusS};
256
+ border-radius: ${B.borderRadius} 0 0 ${B.borderRadius};
257
257
  }
258
258
 
259
259
  .ft-input-label--outlined:after {
260
260
  border-right-width: 1px;
261
261
  border-right-style: solid;
262
- border-radius: 0 ${B.borderRadiusS} ${B.borderRadiusS} 0;
262
+ border-radius: 0 ${B.borderRadius} ${B.borderRadius} 0;
263
263
  }
264
264
 
265
265
  .ft-input-label--outlined.ft-input-label--raised .ft-input-label--floating-text {
266
266
  padding: 2px 4px;
267
267
  z-index: ${B.raisedZIndex};
268
- background-color: ${B.colorSurface};
269
- border-radius: ${B.borderRadiusS};
268
+ background-color: ${B.backgroundColor};
269
+ border-radius: ${B.borderRadius};
270
270
  top: calc((var(--ft-typography-caption-line-height) / -2) + 2px);
271
271
  }
272
272
 
@@ -8,8 +8,8 @@ export declare const FtInputLabelCssVariables: {
8
8
  borderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
9
9
  textColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
10
10
  disabledTextColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
11
- colorSurface: import("@fluid-topics/ft-wc-utils").FtCssVariable;
12
- borderRadiusS: import("@fluid-topics/ft-wc-utils").FtCssVariable;
11
+ backgroundColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
12
+ borderRadius: import("@fluid-topics/ft-wc-utils").FtCssVariable;
13
13
  colorError: import("@fluid-topics/ft-wc-utils").FtCssVariable;
14
14
  };
15
15
  export declare const styles: import("lit").CSSResult;
@@ -11,8 +11,8 @@ export const FtInputLabelCssVariables = {
11
11
  borderColor: FtCssVariableFactory.extend("--ft-input-label-border-color", "", designSystemVariables.colorOutline),
12
12
  textColor: FtCssVariableFactory.extend("--ft-input-label-text-color", "", designSystemVariables.colorOnSurfaceMedium),
13
13
  disabledTextColor: FtCssVariableFactory.extend("--ft-input-label-disabled-text-color", "", designSystemVariables.colorOnSurfaceDisabled),
14
- colorSurface: FtCssVariableFactory.external(designSystemVariables.colorSurface, "Design system"),
15
- borderRadiusS: FtCssVariableFactory.external(designSystemVariables.borderRadiusS, "Design system"),
14
+ backgroundColor: FtCssVariableFactory.extend("--ft-input-label-background-color", "", designSystemVariables.colorSurface),
15
+ borderRadius: FtCssVariableFactory.extend("--ft-input-label-border-radius", "", designSystemVariables.borderRadiusS),
16
16
  colorError: FtCssVariableFactory.external(designSystemVariables.colorError, "Design system"),
17
17
  };
18
18
  // language=CSS
@@ -21,12 +21,12 @@ export const styles = css `
21
21
  position: absolute;
22
22
  inset: 0;
23
23
  display: flex;
24
- background-color: ${FtInputLabelCssVariables.colorSurface};
25
- border-radius: ${FtInputLabelCssVariables.borderRadiusS} ${FtInputLabelCssVariables.borderRadiusS} 0 0;
24
+ background-color: ${FtInputLabelCssVariables.backgroundColor};
25
+ border-radius: ${FtInputLabelCssVariables.borderRadius} ${FtInputLabelCssVariables.borderRadius} 0 0;
26
26
  }
27
27
 
28
28
  .ft-input-label--outlined {
29
- border-radius: ${FtInputLabelCssVariables.borderRadiusS};
29
+ border-radius: ${FtInputLabelCssVariables.borderRadius};
30
30
  }
31
31
 
32
32
  .ft-input-label {
@@ -118,20 +118,20 @@ export const styles = css `
118
118
  .ft-input-label--outlined:before {
119
119
  border-left-width: 1px;
120
120
  border-left-style: solid;
121
- border-radius: ${FtInputLabelCssVariables.borderRadiusS} 0 0 ${FtInputLabelCssVariables.borderRadiusS};
121
+ border-radius: ${FtInputLabelCssVariables.borderRadius} 0 0 ${FtInputLabelCssVariables.borderRadius};
122
122
  }
123
123
 
124
124
  .ft-input-label--outlined:after {
125
125
  border-right-width: 1px;
126
126
  border-right-style: solid;
127
- border-radius: 0 ${FtInputLabelCssVariables.borderRadiusS} ${FtInputLabelCssVariables.borderRadiusS} 0;
127
+ border-radius: 0 ${FtInputLabelCssVariables.borderRadius} ${FtInputLabelCssVariables.borderRadius} 0;
128
128
  }
129
129
 
130
130
  .ft-input-label--outlined.ft-input-label--raised .ft-input-label--floating-text {
131
131
  padding: 2px 4px;
132
132
  z-index: ${FtInputLabelCssVariables.raisedZIndex};
133
- background-color: ${FtInputLabelCssVariables.colorSurface};
134
- border-radius: ${FtInputLabelCssVariables.borderRadiusS};
133
+ background-color: ${FtInputLabelCssVariables.backgroundColor};
134
+ border-radius: ${FtInputLabelCssVariables.borderRadius};
135
135
  top: calc((var(--ft-typography-caption-line-height) / -2) + 2px);
136
136
  }
137
137
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluid-topics/ft-input-label",
3
- "version": "1.2.10",
3
+ "version": "1.2.11",
4
4
  "description": "Dynamic label with outline",
5
5
  "keywords": [
6
6
  "Lit"
@@ -19,9 +19,9 @@
19
19
  "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
20
20
  },
21
21
  "dependencies": {
22
- "@fluid-topics/ft-typography": "1.2.10",
23
- "@fluid-topics/ft-wc-utils": "1.2.10",
22
+ "@fluid-topics/ft-typography": "1.2.11",
23
+ "@fluid-topics/ft-wc-utils": "1.2.11",
24
24
  "lit": "3.1.0"
25
25
  },
26
- "gitHead": "7330f87a313f88e6f3b0d5d1ef03c06211a87182"
26
+ "gitHead": "e064cf26299976a55c5adb3c602fed2dc076557b"
27
27
  }