@alacris/ui 0.4.5 → 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 +7 -4
  4. package/src/components/ui-select.js +7 -4
  5. package/src/components/ui-text-field.js +9 -5
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.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.5",
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;
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;
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,6 +191,7 @@ const styles = css`
188
191
  color: ${t.labelFg};
189
192
  pointer-events: none;
190
193
  transform-origin: 0 50%;
194
+ z-index: 2;
191
195
  transition: inset-block-start ${sys.duration.short3} ${sys.easing.standard},
192
196
  inset-inline-start ${sys.duration.short3} ${sys.easing.standard},
193
197
  translate ${sys.duration.short3} ${sys.easing.standard},
@@ -196,7 +200,7 @@ const styles = css`
196
200
  }
197
201
  .with-leading .label { inset-inline-start: calc(${sys.space(4)} + 1.5rem + ${sys.space(2)}); }
198
202
  /* 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; }
203
+ .multiline:not(.floating) .label { inset-block-start: 28px; }
200
204
  .filled.floating .label { translate: 0 calc(-50% - 16px); scale: 0.75; }
201
205
  .filled.multiline.floating .label { inset-block-start: 16px; translate: 0 -50%; scale: 0.75; }
202
206
  .outlined.floating .label {