@alacris/ui 0.4.3 → 0.4.4

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 +2 -1
  4. package/src/components/ui-select.js +2 -1
  5. package/src/components/ui-text-field.js +5 -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.3/src/index.js",
51
- "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.3/src/theme/index.js",
52
- "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.4.3/src/components/"
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/"
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.3",
3
+ "version": "0.4.4",
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
@@ -155,7 +155,8 @@ const styles = css`
155
155
  }
156
156
  .filled.floating .label { translate: 0 calc(-50% - 16px); scale: 0.75; }
157
157
  .outlined.floating .label {
158
- translate: 0 calc(-50% - (${t.height} + var(--ui-density, 0) * 4px) / 2);
158
+ inset-block-start: 0;
159
+ translate: 0 -50%;
159
160
  scale: 0.75;
160
161
  }
161
162
  .focused .label { color: ${t.accent}; }
package/src/components/ui-select.js CHANGED
@@ -189,7 +189,8 @@ const styles = css`
189
189
  }
190
190
  .filled.floating .label { translate: 0 calc(-50% - 16px); scale: 0.75; }
191
191
  .outlined.floating .label {
192
- translate: 0 calc(-50% - (${t.height} + var(--ui-density, 0) * 4px) / 2);
192
+ inset-block-start: 0;
193
+ translate: 0 -50%;
193
194
  scale: 0.75;
194
195
  }
195
196
  .open .label, :focus-within .label { color: ${t.accent}; }
package/src/components/ui-text-field.js CHANGED
@@ -193,14 +193,14 @@ const styles = css`
193
193
  color ${sys.duration.short2} ${sys.easing.standard};
194
194
  }
195
195
  .with-leading .label { inset-inline-start: calc(${sys.space(4)} + 1.5rem + ${sys.space(2)}); }
196
- /* Multi-line fields anchor the label to the top, not the vertical center. */
197
- .multiline .label { inset-block-start: 24px; z-index: 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
198
  .filled.floating .label { translate: 0 calc(-50% - 16px); scale: 0.75; }
199
- .filled.multiline.floating .label { translate: 0 -85%; scale: 0.75; }
200
- .outlined.multiline.floating .label { inset-block-start: 8px; }
199
+ .filled.multiline.floating .label { inset-block-start: 24px; translate: 0 -85%; scale: 0.75; }
201
200
  .outlined.floating .label {
202
201
  inset-inline-start: ${sys.space(4)};
203
- translate: 0 calc(-50% - (${t.height} + var(--ui-density, 0) * 4px) / 2);
202
+ inset-block-start: 0;
203
+ translate: 0 -50%;
204
204
  scale: 0.75;
205
205
  }
206
206
  .focused .label { color: ${t.accent}; }