@alacris/ui 0.2.2 → 0.2.4

package/README.md

@@ -46,10 +46,10 @@ The published package is plain ESM. Point an import map at a pinned CDN build of
 <script type="importmap">
 {
   "imports": {
-    "@alacris/core": "https://cdn.jsdelivr.net/npm/@alacris/core@0.11.0/dist/alacris.js",
-    "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.2.2/src/index.js",
-    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.2.2/src/theme/index.js",
-    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.2.2/src/components/"
+    "@alacris/core": "https://cdn.jsdelivr.net/npm/@alacris/core@0.11.1/dist/alacris.js",
+    "@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.2.4/src/index.js",
+    "@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.2.4/src/theme/index.js",
+    "@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/ui@0.2.4/src/components/"
   }
 }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alacris/ui",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Themeable design system for Alacris — Material defaults, sixty-eight custom elements, ESM-only, no build step.",
   "type": "module",
   "exports": {

package/src/components/ui-text-field.js

@@ -37,6 +37,11 @@ const t = vars('ui-text-field', {
   radius: sys.radius.xs,
   font: sys.type.bodyLg,
   height: '56px',
+
+  // The lane reserved at the end of a number field for its stepper. It is a
+  // variable because the buttons are the browser's and their width is not the
+  // same on every engine — a consumer with a denser field can shorten it.
+  stepperWidth: '18px',
 });
 
 const styles = css`
@@ -217,6 +222,44 @@ const styles = css`
   .filled.has-label textarea { padding-top: ${sys.space(7)}; }
   .with-leading.multiline .field { padding-inline-start: ${sys.space(4)}; }
   .with-leading.multiline textarea { padding-inline-start: 0; }
+  /* A number field's spin buttons are laid out at the inline end of the
+     input's *content* box rather than at the edge of the field. That is the
+     opposite of what it looks like, and it is why the obvious fix makes
+     things worse: padding the input to reserve a lane for them moves the end
+     of the content box inward and takes the buttons with it, so they land
+     further onto the label than they started. That is what shipped in 0.2.3
+     — a chevron sitting on the "n" of "Min", clipped to a single arrow —
+     and it was a regression, not the original complaint.
+
+     They cannot be moved out of the way either: margin-inline-end on the
+     pseudo-element is ignored. So they are left where the browser puts them,
+     at the end of the field where there is already room, and only the label
+     and the legend are shortened, so a long one ellipsises before it reaches
+     the buttons rather than sliding underneath them. appearance:none does
+     not help here: it removes the field's own chrome and leaves the
+     ::-webkit-*-spin-button alone, which is why this needs saying. */
+  .numeric .label {
+    max-inline-size: calc(100% - ${sys.space(4)} - ${t.stepperWidth});
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .numeric legend { max-inline-size: calc(100% - ${t.stepperWidth}); }
+  .numeric input::-webkit-outer-spin-button,
+  .numeric input::-webkit-inner-spin-button {
+    /* Nudged off the text rather than sitting tight against it, and always
+       visible: a stepper that only appears on hover is a control nobody
+       knows is there. */
+    margin: 0;
+    margin-inline-start: ${sys.space(2)};
+    opacity: 1;
+  }
+  /* Firefox draws no buttons at all unless asked. Asking for them makes the
+     two engines agree about what a number field looks like. */
+  @supports (-moz-appearance: number-input) {
+    .numeric input { -moz-appearance: number-input; }
+  }
+
   input::placeholder, textarea::placeholder { color: ${t.labelFg}; opacity: 0; transition: opacity ${sys.duration.short2} linear; }
   .floating input::placeholder, .floating textarea::placeholder { opacity: 1; }
 
@@ -255,7 +298,8 @@ define('ui-text-field', {
     const cls = computed(() =>
       ['root', variant(), floating() && 'floating', focused() && 'focused',
        error() && 'error', disabled() && 'disabled', label() && 'has-label',
-       hasLeading() && 'with-leading', type() === 'textarea' && 'multiline'].filter(Boolean).join(' '));
+       hasLeading() && 'with-leading', type() === 'textarea' && 'multiline',
+       type() === 'number' && 'numeric'].filter(Boolean).join(' '));
 
     const onInput = (e) => {
       value.set(e.target.value);