@threadlabs/looma 0.29.17 → 0.30.0

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-editor-link-card/ui-editor-link-card.html

@@ -22,12 +22,12 @@
     <event name="remove" type="object">Requests removing this link.</event>
   </defs>
   <div>
-    <ui-card variant="elevated" padding="xs" size="content">
+    <ui-card variant="elevated" padding="xs" size="sm">
       <ui-cluster gap="xs" wrap="nowrap" role="group" aria-label="Link actions">
         <ui-icon from:name="{ true: 'file-text', false: 'link' }[concat($resolved)]"></ui-icon>
-        <ui-stack gap="none" from:title="$href" from:aria-label="concat({ true: $targetLabel, false: 'URL' }[concat($resolved)], ': ', $shown)">
-          <ui-text as="strong" size="sm" weight="medium" font="sans" wrap="anywhere">{$shown}</ui-text>
-          <ui-text $if="$detail != ''" as="small" size="xs" tone="secondary" font="sans">{$detail}</ui-text>
+        <ui-stack gap="none" fill from:title="$href" from:aria-label="concat({ true: $targetLabel, false: 'URL' }[concat($resolved)], ': ', $shown)">
+          <ui-text as="strong" size="sm" weight="medium" font="sans" truncate>{$shown}</ui-text>
+          <ui-text $if="$detail != ''" as="small" size="xs" tone="secondary" font="sans" truncate>{$detail}</ui-text>
         </ui-stack>
         <template $if="$openHref != ''">
           <ui-button
@@ -40,7 +40,7 @@
             target="_blank"
             rel="noopener noreferrer"
             aria-label="Open link"
-          ><ui-cluster gap="xs" wrap="nowrap"><ui-icon name="external-link"></ui-icon>Open link</ui-cluster></ui-button>
+          ><ui-icon name="external-link"></ui-icon></ui-button>
           <ui-tooltip from:for="concat($base, '-open')">Open link</ui-tooltip>
         </template>
         <ui-icon-button from:id="concat($base, '-edit')" label="Edit link" variant="ghost" size="sm" data-link-action="edit"><ui-icon

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

@@ -1,5 +1,7 @@
 <template component="ui-icon">
   <defs>
+    <prop name="tone" type="keyword" values="inherit, secondary, muted" default="inherit"
+    >Icon colour. inherit follows its control; secondary and muted keep a supporting icon quiet without a text wrapper.</prop>
     <prop name="name" type="string" default=""
     >Which icon to draw, by its name in Looma's icon set (LOOMA_ICONS), such as "align-left". An unknown or empty name draws nothing. The icon is hidden from
       assistive technology, so name the control it sits in.</prop>
@@ -125,6 +127,14 @@
       block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
     }
 
+    :host([tone="secondary"]) {
+      color: var(--ui-text-secondary);
+    }
+
+    :host([tone="muted"]) {
+      color: var(--ui-text-muted);
+    }
+
     svg {
       inline-size: 100%;
       block-size: 100%;

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;