@alacris/ui 0.4.4 → 0.4.6

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 +10 -5
  4. package/src/components/ui-select.js +10 -5
  5. package/src/components/ui-text-field.js +14 -8
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.4/src/index.js",
51
- "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.4/src/theme/index.js",
52
- "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.4/src/components/"
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/"
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.4",
3
+ "version": "0.4.6",
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,11 @@ 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: inherit;
124
+ letter-spacing: inherit;
125
+ scale: 0.75;
126
+ transform-origin: 0 50%;
125
127
  visibility: hidden;
126
128
  max-inline-size: 0.01px;
127
129
  height: 12px;
@@ -129,7 +131,8 @@ const styles = css`
129
131
  transition: max-inline-size ${sys.duration.short2} ${sys.easing.standard};
130
132
  }
131
133
  legend span {
132
- padding-inline: ${sys.space(1)} calc(${sys.space(1)} - 0.5px);
134
+ padding-inline-start: 0;
135
+ padding-inline-end: 12px;
133
136
  display: inline-block;
134
137
  opacity: 0;
135
138
  visibility: visible;
@@ -149,7 +152,9 @@ const styles = css`
149
152
  color: ${t.labelFg};
150
153
  pointer-events: none;
151
154
  transform-origin: 0 50%;
152
- transition: translate ${sys.duration.short3} ${sys.easing.standard},
155
+ transition: inset-block-start ${sys.duration.short3} ${sys.easing.standard},
156
+ inset-inline-start ${sys.duration.short3} ${sys.easing.standard},
157
+ translate ${sys.duration.short3} ${sys.easing.standard},
153
158
  scale ${sys.duration.short3} ${sys.easing.standard},
154
159
  color ${sys.duration.short2} ${sys.easing.standard};
155
160
  }
package/src/components/ui-select.js CHANGED
@@ -152,9 +152,11 @@ 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: inherit;
157
+ letter-spacing: inherit;
158
+ scale: 0.75;
159
+ transform-origin: 0 50%;
158
160
  visibility: hidden;
159
161
  max-inline-size: 0.01px;
160
162
  height: 12px;
@@ -162,7 +164,8 @@ const styles = css`
162
164
  transition: max-inline-size ${sys.duration.short2} ${sys.easing.standard};
163
165
  }
164
166
  legend span {
165
- padding-inline: ${sys.space(1)} calc(${sys.space(1)} + 3.5px);
167
+ padding-inline-start: 0;
168
+ padding-inline-end: 12px;
166
169
  display: inline-block;
167
170
  opacity: 0;
168
171
  visibility: visible;
@@ -183,7 +186,9 @@ const styles = css`
183
186
  color: ${t.labelFg};
184
187
  pointer-events: none;
185
188
  transform-origin: 0 50%;
186
- transition: translate ${sys.duration.short3} ${sys.easing.standard},
189
+ transition: inset-block-start ${sys.duration.short3} ${sys.easing.standard},
190
+ inset-inline-start ${sys.duration.short3} ${sys.easing.standard},
191
+ translate ${sys.duration.short3} ${sys.easing.standard},
187
192
  scale ${sys.duration.short3} ${sys.easing.standard},
188
193
  color ${sys.duration.short2} ${sys.easing.standard};
189
194
  }
package/src/components/ui-text-field.js CHANGED
@@ -144,9 +144,11 @@ 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: inherit;
149
+ letter-spacing: inherit;
150
+ scale: 0.75;
151
+ transform-origin: 0 50%;
150
152
  visibility: hidden;
151
153
  max-inline-size: 0.01px;
152
154
  height: 12px;
@@ -154,7 +156,8 @@ const styles = css`
154
156
  transition: max-inline-size ${sys.duration.short2} ${sys.easing.standard};
155
157
  }
156
158
  legend span {
157
- padding-inline: ${sys.space(1)} calc(${sys.space(1)} - 3px);
159
+ padding-inline-start: 0;
160
+ padding-inline-end: 12px;
158
161
  display: inline-block;
159
162
  opacity: 0;
160
163
  visibility: visible;
@@ -188,15 +191,18 @@ const styles = css`
188
191
  color: ${t.labelFg};
189
192
  pointer-events: none;
190
193
  transform-origin: 0 50%;
191
- transition: translate ${sys.duration.short3} ${sys.easing.standard},
194
+ z-index: 2;
195
+ transition: inset-block-start ${sys.duration.short3} ${sys.easing.standard},
196
+ inset-inline-start ${sys.duration.short3} ${sys.easing.standard},
197
+ translate ${sys.duration.short3} ${sys.easing.standard},
192
198
  scale ${sys.duration.short3} ${sys.easing.standard},
193
199
  color ${sys.duration.short2} ${sys.easing.standard};
194
200
  }
195
201
  .with-leading .label { inset-inline-start: calc(${sys.space(4)} + 1.5rem + ${sys.space(2)}); }
196
- /* Multi-line fields anchor the unfloated label near the top line. */
197
- .multiline:not(.floating) .label { inset-block-start: 24px; z-index: 2; }
202
+ /* Multi-line fields anchor the unfloated label centered on the first text line. */
203
+ .multiline:not(.floating) .label { inset-block-start: 28px; }
198
204
  .filled.floating .label { translate: 0 calc(-50% - 16px); scale: 0.75; }
199
- .filled.multiline.floating .label { inset-block-start: 24px; translate: 0 -85%; scale: 0.75; }
205
+ .filled.multiline.floating .label { inset-block-start: 16px; translate: 0 -50%; scale: 0.75; }
200
206
  .outlined.floating .label {
201
207
  inset-inline-start: ${sys.space(4)};
202
208
  inset-block-start: 0;