@threadlabs/looma 0.10.10 → 0.10.12

package/components/ui-list/ui-list.html

@@ -0,0 +1,33 @@
+<template component="ui-list">
+  <defs>
+    <prop name="layout" type="rows | grid" default="rows"
+    >How the items are laid out. Rows stack the items one per line, for a list read top to bottom. Grid sets them in as many columns as fit, each at least
+      --ui-list-min-item-width (14rem) wide, for card items such as pinned or featured entries.</prop>
+  </defs>
+  <ul role="list"><slot></slot></ul>
+  <style>
+    /* A list of items (ui-list-item). It owns the spacing between them, so a view never sets it. The
+       explicit list role keeps the list announced as one: some browsers drop it from a list with no
+       markers. */
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ui-list-gap, var(--ui-space-1));
+      min-inline-size: 0;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    :host-state([layout="grid"]) {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ui-list-min-item-width, 14rem)), 1fr));
+      gap: var(--ui-list-gap, var(--ui-space-3));
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-list-item/ui-list-item.html

@@ -0,0 +1,146 @@
+<template component="ui-list-item">
+  <defs>
+    <prop name="variant" type="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="current" type="boolean" default="false"
+    >Marks the item as the current one, such as the site you are in: it takes the selected surface and aria-current="true", which assistive technology
+      announces. Set it on one item at a time.</prop>
+  </defs>
+  <li :aria-current="current">
+    <span class="leading"><slot name="leading"></slot></span>
+    <span class="content">
+      <span class="title"><slot></slot></span>
+      <span class="description"><slot name="description"></slot></span>
+    </span>
+    <span class="trailing"><slot name="trailing"></slot></span>
+  </li>
+  <style>
+    /* One entry in a list: something to recognise (leading, usually an icon), its name (the default
+       slot), one line about it (description), and what it offers (trailing, such as a button or a
+       badge). The title and description are one line each and end in an ellipsis, so every item in a
+       list has the same height.
+
+       A link in the title is the whole item: its hit area stretches over the item, so the icon and the
+       padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
+       a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
+       stay their own. */
+    :host {
+      position: relative;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      gap: var(--ui-list-item-gap, var(--ui-space-3));
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-size, 2.5rem);
+      padding-block: var(--ui-list-item-padding-block, var(--ui-space-2));
+      padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-3));
+      border-radius: var(--ui-radius-md);
+      color: var(--ui-text-primary);
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    :host-state([variant="card"]) {
+      padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
+      padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-lg);
+      background: var(--ui-surface-raised);
+    }
+
+    :host:has(.title a[href]:hover) {
+      background: var(--ui-surface-hover);
+    }
+
+    :host-state([variant="card"]):has(.title a[href]:hover) {
+      border-color: var(--ui-border-strong);
+    }
+
+    :host-state([current]) {
+      background: var(--ui-surface-hover);
+    }
+
+    :host:has(.title a[href]:focus-visible) {
+      box-shadow: 0 0 0 2px var(--ui-focus-ring);
+    }
+
+    .leading,
+    .trailing {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      gap: var(--ui-space-2);
+    }
+
+    .leading {
+      color: var(--ui-text-muted);
+      font-size: var(--ui-list-item-icon-size, var(--ui-font-size-lg));
+    }
+
+    /* Trailing controls take their own clicks, above the title link's stretched hit area. */
+    .trailing {
+      position: relative;
+      z-index: 1;
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    .content {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: var(--ui-space-0-5, 2px);
+      min-inline-size: 0;
+    }
+
+    .title,
+    .description {
+      display: block;
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .title {
+      font-size: var(--ui-font-size-md);
+      font-weight: var(--ui-font-medium);
+      line-height: var(--ui-line-height-tight);
+    }
+
+    .description {
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height-tight);
+    }
+
+    .title > :slotted(a) {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .title > :slotted(a:focus-visible) {
+      outline: none;
+      box-shadow: none;
+    }
+
+    .title > :slotted(a[href])::after {
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      content: "";
+    }
+
+    /* An unused region takes no space. */
+    .leading:empty,
+    .description:empty,
+    .trailing:empty {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-tree-item/ui-tree-item.html

@@ -85,8 +85,8 @@
       <button class="disclosure" $ref="disclosure" type="button" :disabled="disabled" :hidden="not isContainer">
         <span class="disclosure-icon" aria-hidden="true"></span>
       </button>
-      <span class="leading"><slot name="leading"></slot></span>
-      <span class="label"><span class="label-text" $ref="labelText"><slot name="label"><template $value="label"></template></slot></span></span>
+      <span class="leading" $ref="leading"><slot name="leading"></slot></span>
+      <span class="label" $ref="label"><span class="label-text" $ref="labelText"><slot name="label"><template $value="label"></template></slot></span></span>
       <span class="actions" $ref="actions"><slot name="actions"></slot></span>
       <span class="drop-indicator row-drop-indicator" aria-hidden="true"></span>
     </div>
@@ -221,6 +221,9 @@
       block-size: 1em;
       margin-inline-start: var(--ui-space-1);
       color: var(--ui-text-muted);
+      /* Above the label, so a sliding name passes under the icon. */
+      position: relative;
+      z-index: 1;
     }
 
     .leading:empty {
@@ -248,6 +251,9 @@
       /* The cell clips: a name longer than the row slides inside it rather than over its icons. */
       overflow: hidden;
       padding: var(--ui-tree-item-label-padding-block, var(--ui-space-1)) var(--ui-tree-item-label-padding-inline, var(--ui-space-2));
+      /* The length of the fade before the controls. The label's one flex child lays out no gap; this
+         is where the controller reads the length in pixels to stop a sliding name before the fade. */
+      column-gap: var(--ui-space-3);
     }
 
     /* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
@@ -268,6 +274,27 @@
       min-inline-size: 0;
     }
 
+    /* The controls sit over the label's end, so the text fades out where they begin. The fade is
+       the truncation mark while it shows: an ellipsis under it would read as a second one. */
+    .row:hover > .label,
+    .row:focus-within > .label {
+      text-overflow: clip;
+      mask-image: linear-gradient(
+        to right,
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+        transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+      );
+    }
+
+    .row:hover > .label:dir(rtl),
+    .row:focus-within > .label:dir(rtl) {
+      mask-image: linear-gradient(
+        to left,
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+        transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+      );
+    }
+
     /* A hovered row reads its whole name: the label slides far enough to show the end, waits
        there, and comes back. Only when it actually overflows — the controller measures by how
        much — after the controls have taken their place over its end — and hands over the distance
@@ -279,13 +306,17 @@
       will-change: transform;
     }
 
-    /* While it slides, the start fades too: the name is leaving the cell at both ends, and a hard
-       edge beside the icon reads as a collision rather than as more text. */
+    /* This comes after the hover fade, which it replaces at the same specificity. While the name
+       slides, the label reaches back under the icon (the controller measures how far) with its text
+       where it was, and fades out across that stretch, gone by the icon's middle: the name slips
+       under the icon rather than stopping at a hard edge beside it. */
     .row[data-ui-marquee] > .label {
+      margin-inline-start: calc(-1 * var(--_marquee-lead, 0px));
+      padding-inline-start: calc(var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2)));
       mask-image: linear-gradient(
         to right,
-        transparent 0,
-        #000 var(--ui-space-2),
+        transparent calc(var(--_marquee-lead, 0px) / 2),
+        #000 calc(var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2))),
         #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
         transparent calc(100% - var(--_tree-actions-width, 1.75rem))
       );
@@ -294,8 +325,8 @@
     .row[data-ui-marquee] > .label:dir(rtl) {
       mask-image: linear-gradient(
         to left,
-        transparent 0,
-        #000 var(--ui-space-2),
+        transparent calc(var(--_marquee-lead, 0px) / 2),
+        #000 calc(var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2))),
         #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
         transparent calc(100% - var(--_tree-actions-width, 1.75rem))
       );
@@ -318,27 +349,6 @@
       }
     }
 
-    /* The controls sit over the label's end, so the text fades out where they begin. The fade is
-       the truncation mark while it shows: an ellipsis under it would read as a second one. */
-    .row:hover > .label,
-    .row:focus-within > .label {
-      text-overflow: clip;
-      mask-image: linear-gradient(
-        to right,
-        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
-        transparent calc(100% - var(--_tree-actions-width, 1.75rem))
-      );
-    }
-
-    .row:hover > .label:dir(rtl),
-    .row:focus-within > .label:dir(rtl) {
-      mask-image: linear-gradient(
-        to left,
-        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
-        transparent calc(100% - var(--_tree-actions-width, 1.75rem))
-      );
-    }
-
     .row:hover > .label > :slotted(*),
     .row:focus-within > .label > :slotted(*) {
       text-overflow: clip;

package/components/ui-tree-item/ui-tree-item.js

@@ -19,7 +19,7 @@ const CONTROLS = [
 
 export default function controller(host) {
   const element = host.element;
-  const { row, disclosure, children, actions, labelText } = host.refs;
+  const { row, disclosure, children, leading, label, actions, labelText } = host.refs;
   // Touch use enlarges rows and hides drag handles (see the template's styles).
   trackInputModality(element.ownerDocument);
   const childItems = () => Array.from(children?.children ?? [])
@@ -98,23 +98,28 @@ export default function controller(host) {
   const stop = host.effect(apply);
   apply();
   /**
-   * A hovered row reads its whole name. The controls overlay the label's end rather than taking
-   * width from it, so the width the name actually has while hovered is the label minus them:
-   * measuring against the full label scrolls short and leaves the tail under the controls.
+   * A hovered row reads its whole name. The label box always fills the row, so the name is measured
+   * at its own width; it has to end where the fade before the controls begins, since the controls
+   * overlay the label's end rather than taking width from it.
    */
   const MARQUEE_SPEED = 36; // CSS pixels per second.
-  const MARQUEE_SLACK = 4; // So the tail clears the edge rather than stopping on it.
   // The tree sets this for its items; an item's own prop overrides it either way.
   const marqueeWanted = () => host.state.marquee
     || getComputedStyle(element).getPropertyValue("--ui-tree-item-marquee").trim() === "1";
   const startMarquee = () => {
-    if (!labelText || !marqueeWanted()) return;
-    const covered = actions?.offsetWidth ?? 0;
-    const visible = labelText.clientWidth - covered;
-    const overflow = Math.round(labelText.scrollWidth - visible);
-    if (overflow <= 0) return;
-    const distance = overflow + MARQUEE_SLACK;
+    if (!labelText || !label || !marqueeWanted()) return;
+    labelText.style.flex = "none";
+    labelText.style.inlineSize = "max-content";
+    const text = labelText.getBoundingClientRect();
+    labelText.style.flex = labelText.style.inlineSize = "";
+    const cell = label.getBoundingClientRect();
+    const icon = leading?.getBoundingClientRect();
+    const stop = (actions?.offsetWidth ?? 0) + parseFloat(getComputedStyle(label).columnGap);
     const rightToLeft = getComputedStyle(element).direction === "rtl";
+    const distance = Math.ceil(rightToLeft ? cell.left + stop - text.left : text.right - (cell.right - stop));
+    if (distance <= 0) return;
+    const lead = icon?.width ? (rightToLeft ? icon.right - cell.right : cell.left - icon.left) : 0;
+    row.style.setProperty("--_marquee-lead", `${Math.max(0, lead)}px`);
     row.style.setProperty("--_marquee-distance", `${rightToLeft ? distance : -distance}px`);
     row.style.setProperty(
       "--_marquee-duration",
@@ -124,6 +129,7 @@ export default function controller(host) {
   };
   const stopMarquee = () => {
     delete row.dataset.uiMarquee;
+    row.style.removeProperty("--_marquee-lead");
     row.style.removeProperty("--_marquee-distance");
     row.style.removeProperty("--_marquee-duration");
   };