@threadlabs/looma 0.25.3 → 0.25.5

package/components/ui-badge/ui-badge.html

@@ -14,7 +14,10 @@
     <prop name="size" type="keyword" values="xs, md" default="md"
     >Scale. xs is a compact count beside small controls; md is the usual text badge. A square is 24px at xs and 32px at md with default spacing.</prop>
   </defs>
-  <span><span class="label"><slot></slot></span></span>
+  <span>
+    <span class="icon" aria-hidden="true"><slot name="icon"></slot></span>
+    <span class="label"><slot></slot></span>
+  </span>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-badge-border {
@@ -89,6 +92,7 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      gap: var(--ui-space-1);
       box-sizing: border-box;
       min-inline-size: 0;
       max-inline-size: 100%;
@@ -113,8 +117,43 @@
       text-overflow: ellipsis;
     }
 
-    /* Trim leading while retaining the font's ascent and descent. A cap-to-baseline box
-       would crop glyphs where the label clips horizontal overflow for ellipsis. */
+    .label:empty {
+      display: none;
+    }
+
+    /* Icon content has its own flex item so label ellipsis never clips its strokes. */
+    .icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: none;
+    }
+
+    .icon:empty {
+      display: none;
+    }
+
+    .icon :slotted(svg) {
+      display: block;
+      inline-size: 1em;
+      block-size: 1em;
+      flex: none;
+    }
+
+    /* Ordinary icon-plus-text children keep inline ellipsis, with explicit glyph spacing. */
+    .label :slotted(svg) {
+      inline-size: 1em;
+      block-size: 1em;
+      vertical-align: middle;
+      margin-inline-end: var(--ui-space-1);
+    }
+
+    .label:has(svg) {
+      text-box-trim: none;
+    }
+
+    /* Text-only badges retain their trimmed inline baseline. Icon content needs a flex row;
+       trimming its label separately keeps the glyph centered without changing adjacent lines. */
     @supports (text-box-trim: trim-both) {
       :host {
         display: inline-block;
@@ -124,6 +163,15 @@
         text-box-trim: trim-both;
         text-box-edge: text;
       }
+      :host:has(.icon:not(:empty)),
+      :host:has(.label svg) {
+        display: inline-flex;
+        text-box-trim: none;
+      }
+      :host:has(.icon:not(:empty)) .label {
+        text-box-trim: trim-both;
+        text-box-edge: text;
+      }
     }
 
     :host([size="xs"]) {
@@ -262,6 +310,14 @@
       justify-content: center;
     }
 
+    :host([shape="square"]) .label :slotted(svg) {
+      margin-inline-end: 0;
+    }
+
+    :host([shape="square"]) .label:empty {
+      display: none;
+    }
+
     /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
     :host([shape="dot"]) {
       position: relative;

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

@@ -181,6 +181,7 @@
       display: inline-flex;
       align-items: center;
       justify-content: center;
+      column-gap: var(--ui-space-2);
       vertical-align: middle;
       color: var(--_tone-text);
     }
@@ -230,7 +231,6 @@
     .spinner-wrap {
       display: inline-flex;
       flex: none;
-      margin-inline-end: var(--ui-space-2);
       vertical-align: middle;
     }
 

package/components/ui-card/ui-card.html

@@ -7,8 +7,9 @@
       elevated floats above the page with a shadow, for a view's one card, such as sign-in.</prop>
     <prop name="padding" type="keyword" values="xs, sm, md, lg" default="md"
     >The space inside the card: xs is compact (0.5rem), sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).</prop>
-    <prop name="tone" type="keyword" values="neutral, danger" default="neutral"
-    >danger adds a soft danger surface and a strong leading edge for consequential content.</prop>
+    <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger" default="neutral"
+    >accent, info, success and warning add a quiet semantic surface. danger retains its strong leading edge for consequential content. Tone never changes child
+      controls.</prop>
     <prop name="as" type="keyword" values="div, section, article, aside" default="div"
     >The native element the card renders. Choose the one that names the content: a section of a page, a self-contained article, or an aside.</prop>
   </defs>
@@ -57,6 +58,30 @@
       box-shadow: var(--ui-shadow-lg);
     }
 
+    :host([tone="accent"]) {
+      border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border-default));
+      background: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
+    }
+
+    :host([tone="info"]) {
+      border-color: color-mix(in srgb, var(--ui-info) 25%, var(--ui-border-default));
+      background: color-mix(in srgb, var(--ui-info) 6%, var(--ui-surface-default));
+    }
+
+    :host([tone="success"]) {
+      border-color: color-mix(in srgb, var(--ui-success) 25%, var(--ui-border-default));
+      background: color-mix(in srgb, var(--ui-success) 6%, var(--ui-surface-default));
+    }
+
+    :host([tone="warning"]) {
+      border-color: color-mix(in srgb, var(--ui-warning) 25%, var(--ui-border-default));
+      background: color-mix(in srgb, var(--ui-warning) 6%, var(--ui-surface-default));
+    }
+
+    :host([variant="subtle"]:is([tone="accent"], [tone="info"], [tone="success"], [tone="warning"])) {
+      border-color: transparent;
+    }
+
     :host([tone="danger"]) {
       border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
       border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);

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

@@ -1,5 +1,10 @@
 <template component="ui-cluster">
   <defs>
+    <prop name="padding" type="keyword" values="none, s, m, l" default="none"
+    >Optional internal space for an action group, using the shared spacing scale.</prop>
+    <prop name="paddingEnd" type="keyword" values="none, s, m, l, xl" default="none"
+    >Optional extra space at the inline end, such as clearance beside another control. xl is 4rem.</prop>
+    <prop name="fixed" type="boolean" default="false">Keeps this group at its content size inside a flex layout.</prop>
     <prop name="gap" type="keyword" values="xs, s, m, l, xl"
     >Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem (also the default), m 1rem, l 1.5rem, and xl 2rem. The --ui-cluster-gap custom property,
       set on the cluster itself, overrides it; set on an ancestor, it does nothing.</prop>
@@ -33,6 +38,31 @@
       margin: 0;
     }
 
+    :host([fixed]) {
+      flex: none;
+    }
+    :host([padding="s"]) {
+      padding: var(--ui-space-2);
+    }
+    :host([padding="m"]) {
+      padding: var(--ui-space-3);
+    }
+    :host([padding="l"]) {
+      padding: var(--ui-space-4);
+    }
+    :host([paddingEnd="s"]) {
+      padding-inline-end: var(--ui-space-2);
+    }
+    :host([paddingEnd="m"]) {
+      padding-inline-end: var(--ui-space-3);
+    }
+    :host([paddingEnd="l"]) {
+      padding-inline-end: var(--ui-space-4);
+    }
+    :host([paddingEnd="xl"]) {
+      padding-inline-end: calc(var(--ui-space-4) * 4);
+    }
+
     :host([gap="xs"]) {
       --_layout-gap: var(--ui-space-2);
     }

package/components/ui-editor-surface/ui-editor-surface.html

@@ -0,0 +1,23 @@
+<template component="ui-editor-surface">
+  <defs>
+    <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
+    >The document canvas. comfortable preserves the editor's normal room and mobile toolbar clearance. compact fits a read-only excerpt to its content without
+      outer padding.</prop>
+  </defs>
+  <div><slot></slot></div>
+  <style>
+    :host {
+      display: flex;
+      flex-direction: column;
+      min-inline-size: 0;
+      max-inline-size: 100%;
+    }
+    /* The document renderer consumes these inherited surface settings. They do not style controls. */
+    :host([density="compact"]) {
+      --_ui-editor-content-min-height: 0px;
+      --_ui-editor-content-padding-block: 0px;
+      --_ui-editor-content-padding-inline: 0px;
+      --_ui-editor-mobile-bottom-space: 0px;
+    }
+  </style>
+</template>

package/components/ui-scroll-area/ui-scroll-area.html

@@ -1,5 +1,6 @@
 <template component="ui-scroll-area" controller="./ui-scroll-area.js">
   <defs>
+    <prop name="fill" type="boolean" default="false">Grows into remaining space within a flex layout while keeping content independently scrollable.</prop>
     <prop name="size" type="keyword" values="content, sm, md, lg" default="content"
     >Optional height preset. content keeps intrinsic sizing; sm fits three compact 3.125rem result rows before the overflow fade, md is 20rem, and lg is
       30rem.</prop>
@@ -12,6 +13,10 @@
     /* The controller sets each fade length from overflow and scroll position. The mask blends
        into whatever is behind the area without needing to know its colour. Before upgrade, its
        zero-length defaults leave the authored scroll area fully visible. */
+    :host([fill]) {
+      flex: 1;
+    }
+
     :host {
       display: block;
       box-sizing: border-box;

package/components/ui-stack/ui-stack.html

@@ -1,5 +1,7 @@
 <template component="ui-stack">
   <defs>
+    <prop name="fill" type="boolean" default="false">Grows into the remaining space of a flex layout and allows its scrolling children to shrink.</prop>
+    <prop name="height" type="number">An optional measured height in CSS pixels, for a viewport-bounded composition. Omit it to retain intrinsic sizing.</prop>
     <prop name="gap" type="keyword" values="none, xs, s, m, l, xl"
     >Space between items, on the spacing scale: none is zero, xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-stack-gap
       custom property, set on the stack itself, overrides it; set on an ancestor, it does nothing.</prop>
@@ -10,9 +12,14 @@
     >Where items sit along a stack that is taller than its content: start (the default), center, end, or between, which spreads the spare space between items.
       It has no effect unless the stack is given a height or stretched to one.</prop>
   </defs>
-  <div><slot></slot></div>
+  <div style:--ui-stack-height="height"><slot></slot></div>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-stack-height {
+      syntax: "*";
+      inherits: false;
+    }
+
     @property --ui-stack-gap {
       syntax: "*";
       inherits: false;
@@ -29,6 +36,15 @@
       margin: 0;
     }
 
+    :host([fill]) {
+      flex: 1;
+      min-block-size: 0;
+    }
+    :host([height]) {
+      block-size: calc(var(--ui-stack-height, 0) * 1px);
+      min-block-size: 0;
+    }
+
     :host([gap="none"]) {
       --_layout-gap: 0px;
     }

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

@@ -1,5 +1,6 @@
 <template component="ui-text">
   <defs>
+    <prop name="grow" type="boolean" default="false">Lets this text use remaining inline space in a flex row, including when truncated.</prop>
     <prop name="font" type="keyword" values="inherit, sans" default="inherit"
     >Use sans for UI text rendered outside its original font context; inherit preserves the surrounding typeface.</prop>
     <prop name="wrap" type="keyword" values="normal, anywhere" default="normal"
@@ -39,6 +40,10 @@
     /* 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, label, or
        heading. */
+    :host([grow]) {
+      flex: 1;
+    }
+
     :host {
       margin: 0;
       min-inline-size: 0;

package/components/ui-textarea/ui-textarea.html

@@ -8,6 +8,8 @@
     <prop name="readonly" type="boolean" default="false">Allows selection without allowing edits.</prop>
     <prop name="required" type="boolean" default="false">Marks the control as required for form validation.</prop>
     <prop name="rows" type="integer" default="4">Initial number of visible text rows.</prop>
+    <prop name="maxRows" type="integer"
+    >Optional maximum visible rows, for a growing field in a bounded layout. Extra text scrolls inside the field. Omit it to retain unbounded growth.</prop>
     <prop name="autosize" type="boolean" default="false"
     >Grow with the text while keeping rows as the minimum visible height. Uses CSS field sizing where supported; other browsers keep the native rows
       behavior.</prop>
@@ -23,6 +25,7 @@
     from:aria-invalid="invalid"
     from:rows="rows"
     style:--_rows="rows"
+    style:--_max-rows="maxRows"
   ></textarea>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
@@ -164,6 +167,10 @@
       font-size: var(--ui-font-size-md);
     }
 
+    :host([maxRows]) {
+      max-block-size: calc(max(var(--_rows), var(--_max-rows)) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px);
+    }
+
     @supports (field-sizing: content) {
       :host([autosize]) {
         field-sizing: content;