@threadlabs/looma 0.27.2 → 0.27.3

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

@@ -2,10 +2,11 @@
 <link rel="component" href="../ui-icon/ui-icon.html">
 <template component="ui-button" controller="./ui-button.js">
   <defs>
-    <prop name="variant" type="keyword" values="outline, solid, danger, ghost, link, card" default="outline"
+    <prop name="variant" type="keyword" values="outline, solid, danger, ghost, link, card, field" default="outline"
     >Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is
       hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it. card uses the
-      same tone on a full-width action with an icon slot, wrapping content, and a centered action slot.</prop>
+      same tone on a full-width action with an icon slot, wrapping content, and a centered action slot. field opens a custom value picker: it shares Select's
+      quiet outline, neutral text and slightly raised surface, independently of action tone.</prop>
     <prop name="size" type="keyword" values="xs, sm, md, lg" default="md"
     >Height, padding, and type size. xs is 1.5rem with the smallest text, for a control inside a line of small text; sm is the small control height (2rem by
       default) with tighter padding and smaller text, md is the standard control height (2.5rem), and lg is taller (3rem) with roomier padding. Under touch, sm
@@ -14,7 +15,7 @@
     >rounded uses the theme's action radius; pill rounds the ends fully, for a compact choice such as a status or a person.</prop>
     <prop name="tone" type="keyword" values="accent, neutral, danger, success, warning, info" default="accent"
     >Which colour the button speaks in. It applies to every variant, so an outline, a ghost, and a solid in the same tone are the same action at three volumes:
-      tone="danger" variant="outline" is a destructive secondary action. neutral is the quiet one, for a button that should not claim a colour.</prop>
+      tone="danger" variant="outline" is a destructive secondary action. neutral is the quiet one, for a button that should not claim a colour. The field variant always uses neutral field colors.</prop>
     <prop name="disabled" type="boolean" default="false"
     >Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (as="a" with href) drops its
       href and states aria-disabled="true" instead, because a link has no native disabled state.</prop>
@@ -416,6 +417,33 @@
       --_on-hue: var(--ui-surface);
     }
 
+    /* A value picker is a field, with Select's quiet edge and resting lift. */
+    :host([variant="field"]) {
+      --_ui-field-shadow: var(--ui-shadow-sm);
+      border-color: var(--ui-button-border, var(--ui-control-border, var(--ui-border-strong)));
+      border-radius: var(--ui-button-radius, var(--ui-field-radius, var(--ui-radius-md)));
+      background-color: var(--ui-button-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
+      color: var(--ui-button-text, var(--ui-text-primary));
+      font-weight: var(--ui-font-normal);
+      box-shadow: var(--ui-button-shadow, var(--_ui-field-shadow));
+    }
+
+    :host([variant="field"]):hover:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--ui-control-border-hover, var(--ui-text-secondary)));
+      background-color: var(--ui-button-hover-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
+    }
+
+    :host([variant="field"]):is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+      --_ui-field-shadow: var(--ui-pressed);
+    }
+
+    :host([variant="field"]):focus-visible {
+      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      box-shadow:
+        var(--ui-button-shadow, var(--_ui-field-shadow)),
+        var(--ui-control-focus-halo-shadow);
+    }
+
     :host([variant="ghost"]) {
       border-color: transparent;
       background: transparent;

package/components/ui-combobox/ui-combobox.html

@@ -63,8 +63,8 @@
     <prop name="allowFreeText" type="boolean" default="false">Allows values that do not match an authored option.</prop>
     <prop name="clearQueryOnBlur" type="boolean" default="false"
     >In multiple mode, clears unfinished search text when focus leaves the whole combobox, preserving selected items. A controlled query reports query-change
-      with an empty query; the consumer must reflect it back. Does not choose or create an option. The default preserves unfinished text. Single mode keeps
-      its existing selection and free-text resolution.</prop>
+      with an empty query; the consumer must reflect it back. Does not choose or create an option. The default preserves unfinished text. Single mode keeps its
+      existing selection and free-text resolution.</prop>
     <prop name="allowCreate" type="boolean" default="false"
     >Offers the current query as a new option, reported as create-item. When nothing else matches, the offer is highlighted, so Enter creates it; with nothing
       highlighted, Enter in multiple mode commits the typed text as a token separator does.</prop>
@@ -609,6 +609,7 @@
       --_ui-combobox-popup-radius: var(--ui-combobox-popup-radius);
       --_ui-combobox-popup-shadow: var(--ui-combobox-popup-shadow);
 
+      --_row: var(--ui-control-size-md);
       display: grid;
       gap: var(--ui-space-1);
       min-inline-size: 0;
@@ -630,6 +631,8 @@
     }
 
     .field {
+      box-sizing: border-box;
+      min-block-size: var(--_row);
       flex: 1 1 auto;
       display: flex;
       min-inline-size: 0;
@@ -696,14 +699,14 @@
       appearance: none;
       width: 100%;
       min-inline-size: 0;
-      min-block-size: calc(var(--ui-control-size-md) - 2px);
+      min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
       box-sizing: border-box;
       border: 0;
       border-radius: inherit;
       background: transparent;
       color: inherit;
       font: inherit;
-      line-height: var(--ui-line-height-md);
+      line-height: var(--ui-line-height-tight);
       padding: var(--ui-space-2) var(--ui-space-3);
       margin: 0;
       outline: none;
@@ -712,12 +715,13 @@
       --_row: var(--ui-control-size-sm);
     }
     :host([size="sm"]) input {
-      min-block-size: calc(var(--_row) - 2px);
       padding: var(--ui-space-1) var(--ui-space-2);
       font-size: var(--ui-font-size-sm);
     }
+    :host([size="lg"]) {
+      --_row: var(--ui-control-size-lg);
+    }
     :host([size="lg"]) input {
-      min-block-size: calc(var(--ui-control-size-lg) - 2px);
       padding: var(--ui-space-3) var(--ui-space-4);
       font-size: var(--ui-font-size-md);
     }
@@ -823,9 +827,12 @@
       white-space: nowrap;
     }
     @media (pointer: coarse) {
+      :host {
+        --_row: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+      }
       button {
         min-inline-size: 2.75rem;
-        min-block-size: 2.75rem;
+        min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
       }
       /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
          body-size text: below 16px, iOS zooms the page into the focused field. */
@@ -849,7 +856,7 @@
        while the clear and disclosure controls remain fixed at the end of the field. */
     :host([multiple]) .field {
       align-items: center;
-      min-block-size: var(--_ui-combobox-item-min-block-size, 2.5rem);
+      min-block-size: var(--_ui-combobox-item-min-block-size, var(--_row));
       padding: var(--ui-space-1);
     }
     :host([multiple]) .entry {

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

@@ -111,7 +111,7 @@
       background: var(--ui-input-surface, var(--_ui-default-input-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
       color: var(--ui-text-primary);
       font: inherit;
-      line-height: var(--ui-line-height-md);
+      line-height: var(--ui-line-height-tight);
       box-shadow: var(--ui-input-shadow, var(--_ui-default-input-shadow, var(--ui-control-inset)));
       transition:
         border-color var(--ui-motion-fast) var(--ui-motion-ease),
@@ -135,6 +135,13 @@
     /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
        body-size text: below 16px, iOS zooms the page into the focused field. */
     @media (pointer: coarse) {
+      :host {
+        min-block-size: var(
+          --ui-input-min-block-size,
+          var(--_ui-default-input-min-block-size, max(var(--ui-control-size-md), var(--ui-control-min-block-size)))
+        );
+      }
+
       :host,
       :host([size="sm"]),
       :host([size="lg"]) {

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

@@ -98,6 +98,10 @@
     }
 
     @media (pointer: coarse) {
+      :host {
+        min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+      }
+
       :host:has(.field [data-ui-input-state~="size=sm"]) {
         min-block-size: var(--ui-control-min-block-size);
       }

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

@@ -70,8 +70,8 @@
       color: var(--ui-text-primary);
       color-scheme: light dark;
       font: inherit;
-      line-height: var(--ui-line-height-md);
-      box-shadow: var(--ui-select-shadow, var(--ui-control-inset));
+      line-height: var(--ui-line-height-tight);
+      box-shadow: var(--ui-select-shadow, var(--ui-shadow-sm));
       transition:
         border-color var(--ui-motion-fast) var(--ui-motion-ease),
         box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
@@ -99,7 +99,7 @@
     :host:focus-visible {
       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));
+      box-shadow: var(--ui-select-focus-shadow, var(--ui-shadow-sm), var(--ui-control-focus-halo-shadow));
     }
 
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
@@ -111,7 +111,7 @@
     :host:is([aria-invalid="true"], :user-invalid):focus-visible {
       box-shadow: var(
         --ui-select-invalid-focus-shadow,
-        var(--ui-control-inset),
+        var(--ui-shadow-sm),
         0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
           in srgb,
           var(--ui-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
@@ -147,6 +147,10 @@
     /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
        body-size text: below 16px, iOS zooms the page into the focused field. */
     @media (pointer: coarse) {
+      :host {
+        min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+      }
+
       :host([size="sm"]) {
         min-block-size: var(--ui-control-min-block-size);
         font-size: inherit;