@threadlabs/looma 0.25.5 → 0.25.7

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

@@ -8,9 +8,9 @@
     <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>
@@ -84,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-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-tree-item/ui-tree-item.html

@@ -35,6 +35,9 @@
     <prop name="selected" type="boolean" default="false"
     >Marks the item selected: it sets aria-selected and highlights the row. This is controlled state; respond to the parent Tree's select request by updating
       it.</prop>
+    <prop name="actionsVisible" type="boolean" default="false"
+    >Keeps the actions slot visible before hover or focus, for persistent status or controls. The label fades beneath its measured width on pointer devices;
+      touch rows retain a separate actions column with a short end fade. Does not change keyboard navigation or start the marquee.</prop>
     <prop name="marquee" type="boolean" default="false"
     >Scrolls a name too long for its row while a pointer hovers the row or keyboard focus is in it, rests at the end, then scrolls it again from the start. A
       touch does not start it. Off by default: a tree of short names should not move, and a product decides whether reading the whole name matters more than a
@@ -371,6 +374,7 @@
        the truncation mark while it shows: an ellipsis under it would read as a second one. */
     .row:hover > .label,
     .row:focus-within > .label,
+    :host([actionsVisible]) > .row > .label,
     :host[data-move-source] > .row > .label {
       text-overflow: clip;
       mask-image: linear-gradient(
@@ -382,6 +386,7 @@
 
     .row:hover > .label:dir(rtl),
     .row:focus-within > .label:dir(rtl),
+    :host([actionsVisible]) > .row > .label:dir(rtl),
     :host[data-move-source] > .row > .label:dir(rtl) {
       mask-image: linear-gradient(
         to left,
@@ -464,6 +469,7 @@
 
     .row:hover > .actions,
     .row:focus-within > .actions,
+    :host([actionsVisible]) > .row > .actions,
     :host[data-move-source] > .row > .actions {
       opacity: 1;
       pointer-events: auto;
@@ -500,6 +506,14 @@
         );
       }
 
+      /* Persistent content has its own column on touch. Fade only the label's end. */
+      :host([actionsVisible]) > .row > .label {
+        mask-image: linear-gradient(to right, #000 calc(100% - var(--ui-space-1)), transparent 100%);
+      }
+      :host([actionsVisible]) > .row > .label:dir(rtl) {
+        mask-image: linear-gradient(to left, #000 calc(100% - var(--ui-space-1)), transparent 100%);
+      }
+
       .row[data-ui-marquee] > .label:dir(rtl) {
         mask-image: linear-gradient(
           to left,