@alacris/ui 0.4.4 → 0.4.5

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 +3 -1
  4. package/src/components/ui-select.js +3 -1
  5. package/src/components/ui-text-field.js +6 -4
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.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/"
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.5",
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
@@ -149,7 +149,9 @@ const styles = css`
149
149
  color: ${t.labelFg};
150
150
  pointer-events: none;
151
151
  transform-origin: 0 50%;
152
- transition: translate ${sys.duration.short3} ${sys.easing.standard},
152
+ transition: inset-block-start ${sys.duration.short3} ${sys.easing.standard},
153
+ inset-inline-start ${sys.duration.short3} ${sys.easing.standard},
154
+ translate ${sys.duration.short3} ${sys.easing.standard},
153
155
  scale ${sys.duration.short3} ${sys.easing.standard},
154
156
  color ${sys.duration.short2} ${sys.easing.standard};
155
157
  }
package/src/components/ui-select.js CHANGED
@@ -183,7 +183,9 @@ const styles = css`
183
183
  color: ${t.labelFg};
184
184
  pointer-events: none;
185
185
  transform-origin: 0 50%;
186
- transition: translate ${sys.duration.short3} ${sys.easing.standard},
186
+ transition: inset-block-start ${sys.duration.short3} ${sys.easing.standard},
187
+ inset-inline-start ${sys.duration.short3} ${sys.easing.standard},
188
+ translate ${sys.duration.short3} ${sys.easing.standard},
187
189
  scale ${sys.duration.short3} ${sys.easing.standard},
188
190
  color ${sys.duration.short2} ${sys.easing.standard};
189
191
  }
package/src/components/ui-text-field.js CHANGED
@@ -188,15 +188,17 @@ const styles = css`
188
188
  color: ${t.labelFg};
189
189
  pointer-events: none;
190
190
  transform-origin: 0 50%;
191
- transition: translate ${sys.duration.short3} ${sys.easing.standard},
191
+ transition: inset-block-start ${sys.duration.short3} ${sys.easing.standard},
192
+ inset-inline-start ${sys.duration.short3} ${sys.easing.standard},
193
+ translate ${sys.duration.short3} ${sys.easing.standard},
192
194
  scale ${sys.duration.short3} ${sys.easing.standard},
193
195
  color ${sys.duration.short2} ${sys.easing.standard};
194
196
  }
195
197
  .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; }
198
+ /* 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; }
198
200
  .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; }
201
+ .filled.multiline.floating .label { inset-block-start: 16px; translate: 0 -50%; scale: 0.75; }
200
202
  .outlined.floating .label {
201
203
  inset-inline-start: ${sys.space(4)};
202
204
  inset-block-start: 0;