@alacris/ui 0.4.5 → 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 +7 -7
  4. package/src/components/ui-select.js +7 -7
  5. package/src/components/ui-text-field.js +10 -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.5/src/index.js",
51
- "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.5/src/theme/index.js",
52
- "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.5/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.5",
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
@@ -119,9 +119,9 @@ const styles = css`
119
119
  margin-inline-start: 0;
120
120
  white-space: nowrap;
121
121
  overflow: hidden;
122
- font: ${t.font};
123
- font-size: 0.75em;
124
- letter-spacing: calc(${sys.tracking.bodyLg} * 0.75);
122
+ font: inherit;
123
+ font-size: 0.75rem;
124
+ letter-spacing: inherit;
125
125
  visibility: hidden;
126
126
  max-inline-size: 0.01px;
127
127
  height: 12px;
@@ -129,7 +129,7 @@ const styles = css`
129
129
  transition: max-inline-size ${sys.duration.short2} ${sys.easing.standard};
130
130
  }
131
131
  legend span {
132
- padding-inline: ${sys.space(1)} calc(${sys.space(1)} - 0.5px);
132
+ padding-inline: 4px 5px;
133
133
  display: inline-block;
134
134
  opacity: 0;
135
135
  visibility: visible;
@@ -152,14 +152,14 @@ const styles = css`
152
152
  transition: inset-block-start ${sys.duration.short3} ${sys.easing.standard},
153
153
  inset-inline-start ${sys.duration.short3} ${sys.easing.standard},
154
154
  translate ${sys.duration.short3} ${sys.easing.standard},
155
- scale ${sys.duration.short3} ${sys.easing.standard},
155
+ font-size ${sys.duration.short3} ${sys.easing.standard},
156
156
  color ${sys.duration.short2} ${sys.easing.standard};
157
157
  }
158
- .filled.floating .label { translate: 0 calc(-50% - 16px); scale: 0.75; }
158
+ .filled.floating .label { translate: 0 calc(-50% - 16px); font-size: 0.75rem; }
159
159
  .outlined.floating .label {
160
160
  inset-block-start: 0;
161
161
  translate: 0 -50%;
162
- scale: 0.75;
162
+ font-size: 0.75rem;
163
163
  }
164
164
  .focused .label { color: ${t.accent}; }
165
165
 
package/src/components/ui-select.js CHANGED
@@ -152,9 +152,9 @@ const styles = css`
152
152
  margin-inline-start: 0;
153
153
  white-space: nowrap;
154
154
  overflow: hidden;
155
- font: ${t.font};
156
- font-size: 0.75em;
157
- letter-spacing: calc(${sys.tracking.bodyLg} * 0.75);
155
+ font: inherit;
156
+ font-size: 0.75rem;
157
+ letter-spacing: inherit;
158
158
  visibility: hidden;
159
159
  max-inline-size: 0.01px;
160
160
  height: 12px;
@@ -162,7 +162,7 @@ const styles = css`
162
162
  transition: max-inline-size ${sys.duration.short2} ${sys.easing.standard};
163
163
  }
164
164
  legend span {
165
- padding-inline: ${sys.space(1)} calc(${sys.space(1)} + 3.5px);
165
+ padding-inline: 4px 5px;
166
166
  display: inline-block;
167
167
  opacity: 0;
168
168
  visibility: visible;
@@ -186,14 +186,14 @@ const styles = css`
186
186
  transition: inset-block-start ${sys.duration.short3} ${sys.easing.standard},
187
187
  inset-inline-start ${sys.duration.short3} ${sys.easing.standard},
188
188
  translate ${sys.duration.short3} ${sys.easing.standard},
189
- scale ${sys.duration.short3} ${sys.easing.standard},
189
+ font-size ${sys.duration.short3} ${sys.easing.standard},
190
190
  color ${sys.duration.short2} ${sys.easing.standard};
191
191
  }
192
- .filled.floating .label { translate: 0 calc(-50% - 16px); scale: 0.75; }
192
+ .filled.floating .label { translate: 0 calc(-50% - 16px); font-size: 0.75rem; }
193
193
  .outlined.floating .label {
194
194
  inset-block-start: 0;
195
195
  translate: 0 -50%;
196
- scale: 0.75;
196
+ font-size: 0.75rem;
197
197
  }
198
198
  .open .label, :focus-within .label { color: ${t.accent}; }
199
199
 
package/src/components/ui-text-field.js CHANGED
@@ -144,9 +144,9 @@ const styles = css`
144
144
  margin-inline-start: 0;
145
145
  white-space: nowrap;
146
146
  overflow: hidden;
147
- font: ${t.font};
148
- font-size: 0.75em;
149
- letter-spacing: calc(${sys.tracking.bodyLg} * 0.75);
147
+ font: inherit;
148
+ font-size: 0.75rem;
149
+ letter-spacing: inherit;
150
150
  visibility: hidden;
151
151
  max-inline-size: 0.01px;
152
152
  height: 12px;
@@ -154,7 +154,7 @@ const styles = css`
154
154
  transition: max-inline-size ${sys.duration.short2} ${sys.easing.standard};
155
155
  }
156
156
  legend span {
157
- padding-inline: ${sys.space(1)} calc(${sys.space(1)} - 3px);
157
+ padding-inline: 4px 5px;
158
158
  display: inline-block;
159
159
  opacity: 0;
160
160
  visibility: visible;
@@ -188,22 +188,23 @@ const styles = css`
188
188
  color: ${t.labelFg};
189
189
  pointer-events: none;
190
190
  transform-origin: 0 50%;
191
+ z-index: 2;
191
192
  transition: inset-block-start ${sys.duration.short3} ${sys.easing.standard},
192
193
  inset-inline-start ${sys.duration.short3} ${sys.easing.standard},
193
194
  translate ${sys.duration.short3} ${sys.easing.standard},
194
- scale ${sys.duration.short3} ${sys.easing.standard},
195
+ font-size ${sys.duration.short3} ${sys.easing.standard},
195
196
  color ${sys.duration.short2} ${sys.easing.standard};
196
197
  }
197
198
  .with-leading .label { inset-inline-start: calc(${sys.space(4)} + 1.5rem + ${sys.space(2)}); }
198
199
  /* Multi-line fields anchor the unfloated label centered on the first text line. */
199
- .multiline:not(.floating) .label { inset-block-start: 28px; z-index: 2; }
200
- .filled.floating .label { translate: 0 calc(-50% - 16px); scale: 0.75; }
201
- .filled.multiline.floating .label { inset-block-start: 16px; translate: 0 -50%; scale: 0.75; }
200
+ .multiline:not(.floating) .label { inset-block-start: 28px; }
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; }
202
203
  .outlined.floating .label {
203
204
  inset-inline-start: ${sys.space(4)};
204
205
  inset-block-start: 0;
205
206
  translate: 0 -50%;
206
- scale: 0.75;
207
+ font-size: 0.75rem;
207
208
  }
208
209
  .focused .label { color: ${t.accent}; }
209
210
  .error .label { color: ${t.errorFg}; }