@threadlabs/looma 0.25.5 → 0.25.6

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;