@threadlabs/looma 0.29.18 → 0.30.1

package/components/ui-combobox/ui-combobox.html

@@ -187,6 +187,20 @@
             <prop name="index" required type="integer"></prop>
             <prop name="labelledBy" required nullable type="string"></prop>
             <prop name="detail" required nullable type="string"></prop>
+            <prop name="option" required type="object">
+              <prop name="id" required type="string"></prop>
+              <prop name="value" required type="string"></prop>
+              <prop name="label" required type="string"></prop>
+              <prop name="group" type="string"></prop>
+              <prop name="disabled" type="boolean"></prop>
+              <prop name="description" type="string"></prop>
+              <prop name="tag" type="object">
+                <prop name="label" required type="string"></prop>
+                <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger"></prop>
+                <prop name="color" type="string"></prop>
+              </prop>
+              <prop name="selected" type="boolean"></prop>
+            </prop>
           </prop>
         </prop>
       </prop>
@@ -371,6 +385,37 @@
       </prop>
       <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
     </event>
+    <slot name="item">
+      <prop name="item" type="object" required>A chosen item in a multiple combobox: replaces its default badge.
+        <prop name="id" required type="string"></prop>
+        <prop name="value" required type="string"></prop>
+        <prop name="label" required type="string"></prop>
+        <prop name="group" type="string"></prop>
+        <prop name="disabled" type="boolean"></prop>
+        <prop name="description" type="string"></prop>
+        <prop name="tag" type="object">
+          <prop name="label" required type="string"></prop>
+          <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger"></prop>
+          <prop name="color" type="string"></prop>
+        </prop>
+      </prop>
+    </slot>
+    <slot name="option">
+      <prop name="option" type="object" required>A suggestion in the list: replaces its default label, description and tag.
+        <prop name="id" required type="string"></prop>
+        <prop name="value" required type="string"></prop>
+        <prop name="label" required type="string"></prop>
+        <prop name="group" type="string"></prop>
+        <prop name="disabled" type="boolean"></prop>
+        <prop name="description" type="string"></prop>
+        <prop name="tag" type="object">
+          <prop name="label" required type="string"></prop>
+          <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger"></prop>
+          <prop name="color" type="string"></prop>
+        </prop>
+        <prop name="selected" type="boolean"></prop>
+      </prop>
+    </slot>
   </defs>
   <div>
     <label from:for="concat($uid, '-input')" class:sr-only="$labelVisibility = 'sr-only'">{$label}<template $if="$required">
@@ -390,7 +435,7 @@
               from:disabled="$disabled or $readonly or $item.disabled"
               from:aria-label="concat($item.label, ', press Delete or Backspace to remove')"
             >
-              <slot from:name="concat('item-', $item.id)"><ui-badge>{$item.label}</ui-badge></slot>
+              <slot name="item" from:item="$item"><ui-badge>{$item.label}</ui-badge></slot>
             </button>
           </template>
           <input
@@ -485,7 +530,7 @@
             from:aria-labelledby="$row.labelledBy"
             from:aria-describedby="$row.detail"
           >
-            <slot from:name="concat('option-', $row.id)">
+            <slot name="option" from:option="$row.option">
               <span $if="$row.detail" class="detail">
                 <span class="line">
                   <span class="primary" from:id="concat($uid, '-option-', $row.index, '-label')">{$row.label}</span>

package/components/ui-combobox/ui-combobox.js

@@ -384,7 +384,8 @@ function connect(host) {
       // The label names the option and the tag and description describe it, as a listbox option's
       // label and description parts do; a row without either keeps its name from its content.
       const detail = [row.tag ? `${uid}-option-${index}-tag` : "", row.description ? `${uid}-option-${index}-description` : ""].filter(Boolean).join(" ");
-      group.rows.push({ ...row, index, labelledBy: detail ? `${uid}-option-${index}-label` : null, detail: detail || null });
+      // The option slot receives the row as the consumer gave it, without the parts the listbox adds.
+      group.rows.push({ ...row, index, labelledBy: detail ? `${uid}-option-${index}-label` : null, detail: detail || null, option: row });
     });
     host.state.groups = groups;
     host.state.creatable = canCreate();

package/components/ui-cover/ui-cover.html

@@ -11,7 +11,8 @@
     :host {
       display: flex;
       flex-direction: column;
-      align-items: center;
+      /* Safe: a child wider than the cover keeps its start edge in view instead of overflowing both ways. */
+      align-items: safe center;
       justify-content: center;
       gap: var(--ui-space-6);
       box-sizing: border-box;
@@ -24,10 +25,6 @@
       min-block-size: 100%;
     }
 
-    :host > :slotted(*) {
-      max-inline-size: 100%;
-    }
-
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none;

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

@@ -13,7 +13,7 @@
   <div>
     <div class="label">
       <slot name="label"></slot>
-      <span class="label-action"><slot name="label-action"></slot></span>
+      <span class="label-action"><slot name="labelAction"></slot></span>
     </div>
     <slot></slot>
     <div class="help"><slot name="help"></slot></div>

package/components/ui-menu/ui-menu.js

@@ -43,9 +43,10 @@ function connect(host) {
   const releaseAnchor = () => {
     if (!anchor) return;
     anchor.removeEventListener("click", onAnchorClick);
+    // Restore metadata without restoring a consumer's stale open state.
     for (const [name, value] of Object.entries(anchorAria ?? {})) {
       if (value === null) anchor.removeAttribute(name);
-      else anchor.setAttribute(name, value);
+      else anchor.setAttribute(name, name === "aria-expanded" ? "false" : value);
     }
     anchor = null;
     anchorAria = null;

package/components/ui-popover/ui-popover.js

@@ -42,7 +42,8 @@ function connect(host) {
     if (!anchor) return;
     anchor.removeEventListener("click", onAnchorClick);
     if (anchorExpanded === null) anchor.removeAttribute("aria-expanded");
-    else anchor.setAttribute("aria-expanded", anchorExpanded);
+    // A consumer may have mounted us after setting true; released anchors are collapsed.
+    else anchor.setAttribute("aria-expanded", "false");
     anchor = null;
     anchorExpanded = null;
   };

package/components/ui-reel/ui-reel.html

@@ -23,12 +23,14 @@
     }
 
     :host {
-      /* Hooks do not inherit, so the parts below read them from the root. */
-      --_ui-reel-item-width: var(--ui-reel-item-width);
-
       --_reel-gap: var(--ui-space-4);
-      --_reel-item-width: auto;
-      display: flex;
+      --_reel-item-width: max-content;
+      /* Sizes its children from its own box: one row of columns, each the item width, that never
+         shrinks to fit, so the reel scrolls once they overflow. */
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: var(--ui-reel-item-width, var(--_reel-item-width));
+      justify-content: start;
       inline-size: 100%;
       gap: var(--ui-reel-gap, var(--_reel-gap));
       min-inline-size: 0;
@@ -63,11 +65,6 @@
       --_ui-scroll-fade-direction: to left;
     }
 
-    :host > :slotted(*) {
-      min-inline-size: 0;
-      flex: 0 0 var(--_ui-reel-item-width, var(--_reel-item-width));
-    }
-
     :host([gap="xs"]) {
       --_reel-gap: var(--ui-space-2);
     }

package/components/ui-switcher/ui-switcher.html

@@ -26,27 +26,22 @@
     }
 
     :host {
-      /* Hooks do not inherit, so the parts below read them from the root. */
-      --_ui-switcher-threshold: var(--ui-switcher-threshold);
-
       --_switcher-gap: var(--ui-space-4);
-      display: flex;
-      flex-wrap: wrap;
+      --_switcher-threshold: 30rem;
+      --_switcher-track: clamp(1px, (var(--ui-switcher-threshold, var(--_switcher-threshold)) - 100%) * 999, 100%);
+      /* Lays its children out from its own box: below the threshold each track takes the full width;
+         at or above it, tracks shrink to 1px so every child fits one row and empty tracks collapse.
+         The large multiplier makes the whole row flip at once. */
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(var(--_switcher-track), 1fr));
       gap: var(--ui-switcher-gap, var(--_switcher-gap));
       min-inline-size: 0;
       max-inline-size: 100%;
       margin: 0;
     }
 
-    :host > :slotted(*) {
-      min-inline-size: 0;
-      flex-grow: 1;
-      /* The large multiplier makes the basis flip as a group at the intrinsic threshold. */
-      flex-basis: calc((var(--_ui-switcher-threshold, 30rem) - 100%) * 999);
-    }
-
-    :host(:state(overLimit)) > :slotted(*) {
-      flex-basis: 100%;
+    :host(:state(overLimit)) {
+      grid-template-columns: minmax(0, 1fr);
     }
 
     :host([gap="xs"]) {
@@ -64,23 +59,23 @@
     :host([gap="xl"]) {
       --_switcher-gap: var(--ui-space-6);
     }
-    :host([threshold="xs"]) > :slotted(*) {
-      flex-basis: calc((var(--_ui-switcher-threshold, 20rem) - 100%) * 999);
+    :host([threshold="xs"]) {
+      --_switcher-threshold: 20rem;
     }
-    :host([threshold="md"]) > :slotted(*) {
-      flex-basis: calc((var(--_ui-switcher-threshold, 45rem) - 100%) * 999);
+    :host([threshold="md"]) {
+      --_switcher-threshold: 45rem;
     }
-    :host([threshold="lg"]) > :slotted(*) {
-      flex-basis: calc((var(--_ui-switcher-threshold, 60rem) - 100%) * 999);
+    :host([threshold="lg"]) {
+      --_switcher-threshold: 60rem;
     }
     :host([align="start"]) {
-      align-items: flex-start;
+      align-items: start;
     }
     :host([align="center"]) {
       align-items: center;
     }
     :host([align="end"]) {
-      align-items: flex-end;
+      align-items: end;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/components/ui-tooltip/ui-tooltip.js

@@ -137,6 +137,8 @@ function connect(host) {
     }
     trigger.addEventListener("focusin", onFocusin);
     trigger.addEventListener("focusout", onFocusout);
+    // A trigger that already had focus sent its focusin before this listener; treat it as arriving now.
+    onFocusin();
   };
   const ids = createIdResolver(document, () => {
     lastFor = undefined;