@alacris/ui 0.4.6 → 0.4.7

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.
Files changed (5) hide show
  1. package/README.md +3 -3
  2. package/package.json +1 -1
  3. package/src/components/ui-autocomplete.js +5 -8
  4. package/src/components/ui-select.js +5 -8
  5. package/src/components/ui-text-field.js +6 -9
package/README.md CHANGED
@@ -47,9 +47,9 @@ The published package is plain ESM. Point an import map at a pinned CDN build of
47
47
  {
48
48
  "imports": {
49
49
  "@alacris/core": "https://cdn.jsdelivr.net/npm/@alacris/core@0.11.4/dist/alacris.js",
50
- "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.6/src/index.js",
51
- "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.6/src/theme/index.js",
52
- "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.6/src/components/"
50
+ "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.7/src/index.js",
51
+ "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.7/src/theme/index.js",
52
+ "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.7/src/components/"
53
53
  }
54
54
  }
55
55
  </script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alacris/ui",
3
- "version": "0.4.6",
3
+ "version": "0.4.7",
4
4
  "description": "Themeable design system for Alacris — Material defaults, sixty-eight custom elements, ESM-only, no build step.",
5
5
  "type": "module",
6
6
  "exports": {
package/src/components/ui-autocomplete.js CHANGED
@@ -120,10 +120,8 @@ const styles = css`
120
120
  white-space: nowrap;
121
121
  overflow: hidden;
122
122
  font: inherit;
123
- font-size: inherit;
123
+ font-size: 0.75rem;
124
124
  letter-spacing: inherit;
125
- scale: 0.75;
126
- transform-origin: 0 50%;
127
125
  visibility: hidden;
128
126
  max-inline-size: 0.01px;
129
127
  height: 12px;
@@ -131,8 +129,7 @@ const styles = css`
131
129
  transition: max-inline-size ${sys.duration.short2} ${sys.easing.standard};
132
130
  }
133
131
  legend span {
134
- padding-inline-start: 0;
135
- padding-inline-end: 12px;
132
+ padding-inline: 4px 5px;
136
133
  display: inline-block;
137
134
  opacity: 0;
138
135
  visibility: visible;
@@ -155,14 +152,14 @@ const styles = css`
155
152
  transition: inset-block-start ${sys.duration.short3} ${sys.easing.standard},
156
153
  inset-inline-start ${sys.duration.short3} ${sys.easing.standard},
157
154
  translate ${sys.duration.short3} ${sys.easing.standard},
158
- scale ${sys.duration.short3} ${sys.easing.standard},
155
+ font-size ${sys.duration.short3} ${sys.easing.standard},
159
156
  color ${sys.duration.short2} ${sys.easing.standard};
160
157
  }
161
- .filled.floating .label { translate: 0 calc(-50% - 16px); scale: 0.75; }
158
+ .filled.floating .label { translate: 0 calc(-50% - 16px); font-size: 0.75rem; }
162
159
  .outlined.floating .label {
163
160
  inset-block-start: 0;
164
161
  translate: 0 -50%;
165
- scale: 0.75;
162
+ font-size: 0.75rem;
166
163
  }
167
164
  .focused .label { color: ${t.accent}; }
168
165
 
package/src/components/ui-select.js CHANGED
@@ -153,10 +153,8 @@ const styles = css`
153
153
  white-space: nowrap;
154
154
  overflow: hidden;
155
155
  font: inherit;
156
- font-size: inherit;
156
+ font-size: 0.75rem;
157
157
  letter-spacing: inherit;
158
- scale: 0.75;
159
- transform-origin: 0 50%;
160
158
  visibility: hidden;
161
159
  max-inline-size: 0.01px;
162
160
  height: 12px;
@@ -164,8 +162,7 @@ const styles = css`
164
162
  transition: max-inline-size ${sys.duration.short2} ${sys.easing.standard};
165
163
  }
166
164
  legend span {
167
- padding-inline-start: 0;
168
- padding-inline-end: 12px;
165
+ padding-inline: 4px 5px;
169
166
  display: inline-block;
170
167
  opacity: 0;
171
168
  visibility: visible;
@@ -189,14 +186,14 @@ const styles = css`
189
186
  transition: inset-block-start ${sys.duration.short3} ${sys.easing.standard},
190
187
  inset-inline-start ${sys.duration.short3} ${sys.easing.standard},
191
188
  translate ${sys.duration.short3} ${sys.easing.standard},
192
- scale ${sys.duration.short3} ${sys.easing.standard},
189
+ font-size ${sys.duration.short3} ${sys.easing.standard},
193
190
  color ${sys.duration.short2} ${sys.easing.standard};
194
191
  }
195
- .filled.floating .label { translate: 0 calc(-50% - 16px); scale: 0.75; }
192
+ .filled.floating .label { translate: 0 calc(-50% - 16px); font-size: 0.75rem; }
196
193
  .outlined.floating .label {
197
194
  inset-block-start: 0;
198
195
  translate: 0 -50%;
199
- scale: 0.75;
196
+ font-size: 0.75rem;
200
197
  }
201
198
  .open .label, :focus-within .label { color: ${t.accent}; }
202
199
 
package/src/components/ui-text-field.js CHANGED
@@ -145,10 +145,8 @@ const styles = css`
145
145
  white-space: nowrap;
146
146
  overflow: hidden;
147
147
  font: inherit;
148
- font-size: inherit;
148
+ font-size: 0.75rem;
149
149
  letter-spacing: inherit;
150
- scale: 0.75;
151
- transform-origin: 0 50%;
152
150
  visibility: hidden;
153
151
  max-inline-size: 0.01px;
154
152
  height: 12px;
@@ -156,8 +154,7 @@ const styles = css`
156
154
  transition: max-inline-size ${sys.duration.short2} ${sys.easing.standard};
157
155
  }
158
156
  legend span {
159
- padding-inline-start: 0;
160
- padding-inline-end: 12px;
157
+ padding-inline: 4px 5px;
161
158
  display: inline-block;
162
159
  opacity: 0;
163
160
  visibility: visible;
@@ -195,19 +192,19 @@ const styles = css`
195
192
  transition: inset-block-start ${sys.duration.short3} ${sys.easing.standard},
196
193
  inset-inline-start ${sys.duration.short3} ${sys.easing.standard},
197
194
  translate ${sys.duration.short3} ${sys.easing.standard},
198
- scale ${sys.duration.short3} ${sys.easing.standard},
195
+ font-size ${sys.duration.short3} ${sys.easing.standard},
199
196
  color ${sys.duration.short2} ${sys.easing.standard};
200
197
  }
201
198
  .with-leading .label { inset-inline-start: calc(${sys.space(4)} + 1.5rem + ${sys.space(2)}); }
202
199
  /* Multi-line fields anchor the unfloated label centered on the first text line. */
203
200
  .multiline:not(.floating) .label { inset-block-start: 28px; }
204
- .filled.floating .label { translate: 0 calc(-50% - 16px); scale: 0.75; }
205
- .filled.multiline.floating .label { inset-block-start: 16px; translate: 0 -50%; scale: 0.75; }
201
+ .filled.floating .label { translate: 0 calc(-50% - 16px); font-size: 0.75rem; }
202
+ .filled.multiline.floating .label { inset-block-start: 16px; translate: 0 -50%; font-size: 0.75rem; }
206
203
  .outlined.floating .label {
207
204
  inset-inline-start: ${sys.space(4)};
208
205
  inset-block-start: 0;
209
206
  translate: 0 -50%;
210
- scale: 0.75;
207
+ font-size: 0.75rem;
211
208
  }
212
209
  .focused .label { color: ${t.accent}; }
213
210
  .error .label { color: ${t.errorFg}; }