@threadlabs/looma 0.25.4 → 0.25.6

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-checkbox/ui-checkbox.html

@@ -1,5 +1,6 @@
 <template component="ui-checkbox" controller="./ui-checkbox.js">
   <defs>
+    <prop name="label" type="string" default="">An accessible name for a checkbox without a visible label slot. It names the native input.</prop>
     <prop name="checked" type="boolean" default="false"
     >Whether the checkbox is checked initially or when set externally. A form reset returns it to this.</prop>
     <prop name="disabled" type="boolean" default="false">Disables the native checkbox, so it cannot be toggled or focused.</prop>
@@ -29,6 +30,7 @@
   <label>
     <input
       type="checkbox"
+      from:aria-label="label"
       $ref="input"
       .checked="internalChecked"
       .indeterminate="indeterminate"

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

@@ -1,11 +1,16 @@
 <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>
-    <prop name="align" type="keyword" values="start, center, end, stretch"
+    <prop name="align" type="keyword" values="start, center, end, stretch, baseline"
     >How items line up within each row: center (the default) aligns their middles, start their tops, end their bottoms, and stretch makes every item as tall as
-      its row.</prop>
+      its row. baseline aligns the first text baselines, including multiline columns.</prop>
     <prop name="justify" type="keyword" values="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>
@@ -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);
     }
@@ -54,6 +84,9 @@
     :host([align="end"]) {
       align-items: flex-end;
     }
+    :host([align="baseline"]) {
+      align-items: baseline;
+    }
     :host([align="stretch"]) {
       align-items: stretch;
     }

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-list-item/ui-list-item.html

@@ -3,6 +3,9 @@
     <prop name="variant" type="keyword" values="row, card" default="row"
     >How the item is drawn. A row is flat and takes a hover surface when it is a link, for items read down a list. A card sits on a raised, bordered surface,
       for items set in a grid (a List with layout="grid"). Both have the same parts: leading, title, description, and trailing.</prop>
+    <prop name="leadingInteractive" type="boolean" default="false"
+    >Makes the leading region an independent control above the row link. Use it for a checkbox or button; keep noninteractive row icons in the title link when
+      combining them with a leading control.</prop>
     <prop name="wrap" type="boolean" default="false"
     >Lets the title and description wrap so explanatory text stays readable on narrow screens. Omit it for the default equal-height, one-line rows.</prop>
     <prop name="current" type="boolean" default="false"
@@ -74,11 +77,11 @@
       background: var(--ui-surface-raised);
     }
 
-    :host:has(.title a[href]:hover) {
-      background: var(--ui-surface-hover);
+    :host:where(:has(.title a[href])):hover {
+      background: var(--ui-selection-surface);
     }
 
-    :host([variant="card"]):has(.title a[href]:hover) {
+    :host([variant="card"]):where(:has(.title a[href])):hover {
       border-color: var(--ui-border-strong);
     }
 
@@ -112,6 +115,12 @@
       color: var(--ui-selection-text);
     }
 
+    /* An explicitly independent leading control sits above the stretched row link. */
+    :host([leadingInteractive]) .leading {
+      position: relative;
+      z-index: 1;
+    }
+
     /* Trailing controls take their own clicks, above the title link's stretched hit area. */
     .trailing {
       position: relative;

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;