@threadlabs/looma 0.16.2 → 0.16.4

package/components/ui-button/ui-button.html

@@ -119,6 +119,10 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-button-white-space {
+      syntax: "*";
+      inherits: false;
+    }
 
     :host {
       --_hue: var(--ui-accent);
@@ -162,6 +166,8 @@
       font: inherit;
       font-weight: var(--ui-font-medium);
       text-decoration: none;
+      /* Unset, a button wraps as its container does. */
+      white-space: var(--ui-button-white-space, inherit);
       line-height: var(--ui-line-height-tight);
       padding: var(--ui-space-2) var(--ui-space-3);
       background-image: var(--ui-raised-highlight);

package/components/ui-form-field/ui-form-field.html

@@ -25,19 +25,43 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-form-field-help-font-size {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-form-field-help-min-block-size {
       syntax: "*";
       inherits: false;
     }
+    @property --ui-form-field-help-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-form-field-label-font-size {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-form-field-label-text {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-form-field-min-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
 
     :host {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-form-field-danger: var(--ui-form-field-danger);
       --_ui-form-field-help-min-block-size: var(--ui-form-field-help-min-block-size);
+      --_ui-form-field-label-text: var(--ui-form-field-label-text);
+      --_ui-form-field-label-font-size: var(--ui-form-field-label-font-size);
+      --_ui-form-field-help-text: var(--ui-form-field-help-text);
+      --_ui-form-field-help-font-size: var(--ui-form-field-help-font-size);
 
       display: grid;
       gap: var(--ui-space-2);
-      min-inline-size: 0;
+      min-inline-size: var(--ui-form-field-min-inline-size, 0);
       align-content: start;
       color: var(--ui-text-primary);
     }
@@ -51,8 +75,8 @@
     }
 
     .label {
-      color: var(--ui-text-secondary);
-      font-size: var(--ui-font-size-sm);
+      color: var(--_ui-form-field-label-text, var(--ui-text-secondary));
+      font-size: var(--_ui-form-field-label-font-size, var(--ui-font-size-sm));
     }
 
     /* A label action, such as a small help button, sits after the label text in a box one line
@@ -75,8 +99,8 @@
     }
 
     .help {
-      color: var(--ui-text-muted);
-      font-size: var(--ui-font-size-sm);
+      color: var(--_ui-form-field-help-text, var(--ui-text-muted));
+      font-size: var(--_ui-form-field-help-font-size, var(--ui-font-size-sm));
       line-height: var(--ui-line-height-md);
     }
 

package/components/ui-input/ui-input.html

@@ -1,8 +1,9 @@
 <template component="ui-input" controller="./ui-input.js">
   <defs>
-    <prop name="value" type="string"
-    >The input's text. Setting or changing it replaces the live text; between changes the user's typing stands, so follow input events to keep it in step. It is
-      also the input's default, so a form reset returns to it.</prop>
+    <prop name="value" type="string | number"
+    >The input's value: text, or a number for a type="number" field. Setting or changing it replaces the live text; between changes the user's typing stands, so
+      follow input events to keep it in step. A number field keeps text that means the same number, such as 1.0 for 1. It is also the input's default, so a form
+      reset returns to it.</prop>
     <prop name="disabled" type="boolean" default="false">Prevents editing and form submission.</prop>
     <prop name="invalid" type="boolean" default="false">Exposes invalid state to assistive technology and styling.</prop>
     <prop name="readonly" type="boolean" default="false">Allows selection without allowing edits.</prop>
@@ -41,6 +42,10 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-input-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-input-invalid-border {
       syntax: "*";
       inherits: false;
@@ -69,7 +74,7 @@
     :host {
       box-sizing: border-box;
       display: inline-block;
-      inline-size: 100%;
+      inline-size: var(--ui-input-inline-size, 100%);
       min-inline-size: 0;
       min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-md)));
       margin: 0;

package/components/ui-input/ui-input.js

@@ -4,7 +4,13 @@ export default function controller(host) {
   return host.effect(() => {
     const value = host.state.value;
     if (value === undefined || value === null) return;
-    host.element.defaultValue = String(value);
-    if (host.element.value !== String(value)) host.element.value = String(value);
+    const input = host.element;
+    const text = String(value);
+    input.defaultValue = text;
+    if (input.value === text) return;
+    // A number field's text can differ from the number it means (1.0 is 1, and Chromium reads 12. as
+    // 12). Writing the value would erase what the user is typing, so a field that means it stays.
+    if (input.type === "number" && input.value !== "" && Number(input.value) === Number(value)) return;
+    input.value = text;
   });
 }

package/components/ui-nav-item/ui-nav-item.html

@@ -52,6 +52,10 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-nav-item-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
 
     /* One destination in a side or rail navigation: an icon to find it by (leading), its name (the
        default slot), and an optional line under it (description), such as the record a section
@@ -65,7 +69,7 @@
       display: flex;
       align-items: center;
       gap: var(--ui-space-3);
-      inline-size: 100%;
+      inline-size: var(--ui-nav-item-inline-size, 100%);
       min-inline-size: 0;
       min-block-size: var(--ui-control-size, 2.5rem);
       margin: 0;

package/components/ui-select/ui-select.html

@@ -15,10 +15,26 @@
   <select :disabled="disabled" :required="required" :aria-invalid="invalid"><slot></slot></select>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-select-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-select-border-hover {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-select-focus-border {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-select-focus-shadow {
       syntax: "*";
       inherits: false;
     }
+    @property --ui-select-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-select-invalid-border {
       syntax: "*";
       inherits: false;
@@ -35,18 +51,22 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-select-surface {
+      syntax: "*";
+      inherits: false;
+    }
 
     :host {
       box-sizing: border-box;
       display: inline-block;
-      inline-size: 100%;
+      inline-size: var(--ui-select-inline-size, 100%);
       min-inline-size: 0;
       min-block-size: var(--ui-control-size-md);
       margin: 0;
       padding: var(--ui-space-2) var(--ui-space-3);
-      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+      border: 1px solid var(--ui-select-border, var(--ui-control-border, var(--ui-border-strong)));
       border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
-      background-color: var(--ui-control-surface, var(--ui-surface-elevated));
+      background-color: var(--ui-select-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
       color-scheme: light dark;
       font: inherit;
@@ -73,11 +93,11 @@
     }
 
     :host:hover:not(:focus):not(:disabled) {
-      border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+      border-color: var(--ui-select-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)));
     }
 
     :host:focus-visible {
-      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      border-color: var(--ui-select-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
       outline: none;
       box-shadow: var(--ui-select-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow));
     }

package/components/ui-text/ui-text.html

@@ -14,9 +14,9 @@
       exactly, such as an address, in the monospace face.</prop>
     <prop name="truncate" type="boolean" default="false">Keeps the text on one line, ending in an ellipsis when it does not fit.</prop>
     <prop name="align" type="start | center" default="start">Aligns the text within its line.</prop>
-    <prop name="as" type="p | span | div | small | strong | label" default="p"
-    >The native element the text renders: a paragraph by default, inline span, small, or strong within a line, a div for a block, or a label for a
-      control.</prop>
+    <prop name="as" type="p | span | div | small | strong | label | h2 | h3 | h4 | h5 | h6" default="p"
+    >The native element the text renders: a paragraph by default, inline span, small, or strong within a line, a div for a block, a label for a control, or a
+      heading, h2 to h6, below a Page Header's h1 and a Section's h2. A heading takes its size and weight from size and weight, like any other text.</prop>
   </defs>
   <template $match>
     <span $when="as = 'span'"><slot></slot></span>
@@ -24,11 +24,17 @@
     <small $when="as = 'small'"><slot></slot></small>
     <strong $when="as = 'strong'"><slot></slot></strong>
     <label $when="as = 'label'"><slot></slot></label>
+    <h2 $when="as = 'h2'"><slot></slot></h2>
+    <h3 $when="as = 'h3'"><slot></slot></h3>
+    <h4 $when="as = 'h4'"><slot></slot></h4>
+    <h5 $when="as = 'h5'"><slot></slot></h5>
+    <h6 $when="as = 'h6'"><slot></slot></h6>
     <p $else><slot></slot></p>
   </template>
   <style>
     /* Running text, set on the type scale and in a tone that says what it is, so a view never styles
-       text of its own. The root is a paragraph unless as= names a span, div, small, strong, or label. */
+       text of its own. The root is a paragraph unless as= names a span, div, small, strong, label, or
+       heading. */
     :host {
       margin: 0;
       min-inline-size: 0;
@@ -36,6 +42,13 @@
       text-align: start;
     }
 
+    /* A heading drops the browser's heading size and weight, so size and weight set it as they set
+       any text, and inherit keeps the text around it. */
+    :host:is(h2, h3, h4, h5, h6) {
+      font-size: inherit;
+      font-weight: inherit;
+    }
+
     :host-state([size="xs"]) {
       font-size: var(--ui-font-size-xs);
       line-height: var(--ui-line-height);