@threadlabs/looma 0.15.0 → 0.15.2

package/components/ui-cluster/ui-cluster.html

@@ -9,6 +9,10 @@
     <prop name="justify" type="start | center | end | between"
     >Where items sit along each row: start (the default), center, end, or between, which pushes the first and last items to the ends of the row and spreads the
       spare space between them, as for a title with its actions.</prop>
+    <prop name="wrap" type="wrap | nowrap"
+    >Whether items move onto a new row when they run out of space: wrap (the default) or nowrap, which keeps them on one row at their own sizes. Use nowrap for
+      a small group that must read as one unit, such as a meter and its value in a table cell, so the cell grows to fit it; a whole row of actions should keep
+      wrapping so it fits narrow screens.</prop>
   </defs>
   <div><slot></slot></div>
   <style>
@@ -62,6 +66,9 @@
     :host-state([justify="between"]) {
       justify-content: space-between;
     }
+    :host-state([wrap="nowrap"]) {
+      flex-wrap: nowrap;
+    }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {

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

@@ -11,7 +11,10 @@
       adds no visual marker; show one in the label if the form needs it.</prop>
   </defs>
   <div>
-    <div class="label"><slot name="label"></slot></div>
+    <div class="label">
+      <slot name="label"></slot>
+      <span class="label-action"><slot name="label-action"></slot></span>
+    </div>
     <slot></slot>
     <div class="help"><slot name="help"></slot></div>
     <div class="error"><slot name="error"></slot></div>
@@ -52,6 +55,25 @@
       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
+       tall, centred on the first line and overflowing it. A button taller than a line of label
+       text then never makes this field's label row taller than its neighbours' in a grid row. */
+    .label:has(> .label-action > *) {
+      display: flex;
+      align-items: start;
+      gap: var(--ui-space-1);
+    }
+
+    .label-action {
+      display: flex;
+      align-items: unsafe center;
+      block-size: 1lh;
+    }
+
+    .label-action:not(:has(> *)) {
+      display: none;
+    }
+
     .help {
       color: var(--ui-text-muted);
       font-size: var(--ui-font-size-sm);