@threadlabs/looma 0.19.0 → 0.20.0

package/components/ui-toast/ui-toast.html

@@ -2,11 +2,15 @@
 <link rel="component" href="../ui-icon/ui-icon.html">
 <template component="ui-toast" controller="./ui-toast.js">
   <defs>
-    <prop name="tone" type="neutral | info | success | warning | danger" default="neutral"
+    <prop name="tone" type="keyword" values="neutral, info, success, warning, danger" default="neutral"
     >Semantic accent for this message. Danger uses an assertive alert role; the other tones use polite status semantics.</prop>
     <prop name="duration" type="number" default="0"
     >Milliseconds before requesting dismissal; 0 keeps the toast until an action dismisses it. The timer pauses on hover or focus.</prop>
-    <event name="dismiss" type="object({ id: string, reason: action | timeout, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="dismiss" type="object">
+      <prop name="id" required type="string"></prop>
+      <prop name="reason" required type="keyword" values="action, timeout"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <div :role="{ neutral: 'status', info: 'status', success: 'status', warning: 'status', danger: 'alert' }[tone]">
     <div class="message"><slot></slot></div>

package/components/ui-toast-region/ui-toast-region.html

@@ -4,14 +4,26 @@
   <defs>
     <prop name="duration" type="number" default="0"
     >Default milliseconds for toasts added with show() or the show command; 0 keeps each until dismissed. Hover or focus pauses a timer.</prop>
-    <prop name="placement" type="top | top-start | top-end | bottom | bottom-start | bottom-end" default="top"
+    <prop name="placement" type="keyword" values="top, top-start, top-end, bottom, bottom-start, bottom-end" default="top"
     >Screen edge where the stack appears. Start and end follow the writing direction.</prop>
     <state
       name="toasts"
-      type="list(object({ id: string, message: string, tone: neutral | info | success | warning | danger, role: alert | status, closing: boolean }))"
+      type="array"
       :value="[]"
-    ></state>
-    <event name="dismiss" type="object({ id: string, reason: action | timeout, trigger: keyboard | pointer | programmatic })"></event>
+    >
+      <prop type="object">
+        <prop name="id" required type="string"></prop>
+        <prop name="message" required type="string"></prop>
+        <prop name="tone" required type="keyword" values="neutral, info, success, warning, danger"></prop>
+        <prop name="role" required type="keyword" values="alert, status"></prop>
+        <prop name="closing" required type="boolean"></prop>
+      </prop>
+    </state>
+    <event name="dismiss" type="object">
+      <prop name="id" required type="string"></prop>
+      <prop name="reason" required type="keyword" values="action, timeout"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
     <method name="show" export="show" returns="promise(string)"></method>
   </defs>
   <div role="region" aria-label="Notifications" aria-live="polite" popover="manual">

package/components/ui-tooltip/ui-tooltip.html

@@ -4,10 +4,11 @@
     <prop name="open" type="boolean" default="false">Whether the tooltip is open initially or when set externally.</prop>
     <prop
       name="placement"
-      type="top | top-start | top-end | bottom | bottom-start | bottom-end | left | left-start | left-end | right | right-start | right-end"
+      type="keyword"
+      values="top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end"
       default="top"
     >Positions the description around its trigger. Start and end on top or bottom follow the writing direction.</prop>
-    <prop name="trigger" type="hover | click | focus" default="hover"
+    <prop name="trigger" type="keyword" values="hover, click, focus" default="hover"
     >How the trigger opens it. hover also opens on keyboard focus; click toggles it and suits a help button, where hovering a question mark says nothing; focus
       opens only while the trigger holds focus.</prop>
     <prop name="showDelay" type="number" default="500">Waits this many milliseconds before showing after pointer entry.</prop>
@@ -16,12 +17,20 @@
     <state name="internalOpen" :value="false"></state>
     <event
       name="open"
-      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
-    ></event>
+      type="object"
+    >
+      <prop name="open" required type="boolean"></prop>
+      <prop name="reason" required type="keyword" values="action, programmatic, light-dismiss, escape"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
     <event
       name="close"
-      type="object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })"
-    ></event>
+      type="object"
+    >
+      <prop name="open" required type="boolean"></prop>
+      <prop name="reason" required type="keyword" values="action, programmatic, light-dismiss, escape"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <span role="tooltip" :hidden="not internalOpen"><div class="surface"><slot></slot></div></span>
   <style>

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

@@ -1,9 +1,10 @@
 <link rel="component" href="../ui-tree-item/ui-tree-item.html">
 <template component="ui-tree" controller="./ui-tree.js">
   <defs>
-    <prop name="density" type="comfortable | compact" default="comfortable">Compact trades padding and type size for rows that fit more on screen.</prop>
+    <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
+    >Compact trades padding and type size for rows that fit more on screen.</prop>
     <prop name="label" type="string" default="Tree">The tree's accessible name, announced when focus enters it. Name what the tree holds.</prop>
-    <prop name="selection" type="none | single | multiple" default="none"
+    <prop name="selection" type="keyword" values="none, single, multiple" default="none"
     >How selection works. None keeps rows for navigation and expansion; single requests one selected item; multiple shows checkboxes and requests an item with
       its descendants. The application owns each Tree Item's selected state and responds to select.</prop>
     <prop name="hoverExpandDelay" type="number" default="700"
@@ -17,13 +18,35 @@
       that fit should not move. An item may set its own marquee to opt in or out on its own.</prop>
     <event
       name="reorder"
-      type="object({ sourceId: string, targetId: string, position: before | inside | after, sourceType: string, targetType: string, sourceScope: string, targetScope: string, trigger: keyboard | pointer | programmatic })"
-    ></event>
+      type="object"
+    >
+      <prop name="sourceId" required type="string"></prop>
+      <prop name="targetId" required type="string"></prop>
+      <prop name="position" required type="keyword" values="before, inside, after"></prop>
+      <prop name="sourceType" required type="string"></prop>
+      <prop name="targetType" required type="string"></prop>
+      <prop name="sourceScope" required type="string"></prop>
+      <prop name="targetScope" required type="string"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
     <event
       name="reorder-rejected"
-      type="object({ sourceId: string, targetId: string, position: before | inside | after, reason: max-depth, maxDepth: integer, resultingDepth: integer, trigger: keyboard | pointer | programmatic })"
-    ></event>
-    <event name="select" type="object({ ids: list(string), trigger: keyboard | pointer | programmatic })"></event>
+      type="object"
+    >
+      <prop name="sourceId" required type="string"></prop>
+      <prop name="targetId" required type="string"></prop>
+      <prop name="position" required type="keyword" values="before, inside, after"></prop>
+      <prop name="reason" required type="keyword" values="max-depth"></prop>
+      <prop name="maxDepth" required type="integer"></prop>
+      <prop name="resultingDepth" required type="integer"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
+    <event name="select" type="object">
+      <prop name="ids" required type="array">
+        <prop type="string"></prop>
+      </prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <div role="tree"><slot></slot></div>
   <style>

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

@@ -44,7 +44,11 @@
     <state name="structuralLevel" :value="1"></state>
     <state name="tabStop" :value="false"></state>
     <state name="isContainer" :value="false"></state>
-    <event name="expand" bubbles="false" type="object({ id: string, expanded: boolean, trigger: keyboard | pointer | programmatic })"></event>
+    <event name="expand" bubbles="false" type="object">
+      <prop name="id" required type="string"></prop>
+      <prop name="expanded" required type="boolean"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
+    </event>
   </defs>
   <div
     role="treeitem"
@@ -324,7 +328,7 @@
       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);
+      column-gap: var(--ui-space-1);
     }
 
     /* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
@@ -352,7 +356,7 @@
       text-overflow: clip;
       mask-image: linear-gradient(
         to right,
-        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
         transparent calc(100% - var(--_tree-actions-width, 1.75rem))
       );
     }
@@ -361,7 +365,7 @@
     .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)),
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
         transparent calc(100% - var(--_tree-actions-width, 1.75rem))
       );
     }
@@ -388,7 +392,7 @@
         to right,
         transparent var(--_marquee-icon-width, 0px),
         #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)),
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
         transparent calc(100% - var(--_tree-actions-width, 1.75rem))
       );
     }
@@ -398,7 +402,7 @@
         to left,
         transparent var(--_marquee-icon-width, 0px),
         #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)),
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
         transparent calc(100% - var(--_tree-actions-width, 1.75rem))
       );
     }

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

@@ -112,17 +112,34 @@ export default function controller(host) {
   // 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-default-tree-item-marquee").trim() === "1";
+  // A slotted link may fill the row and have padding past its name. Measure the rendered letters,
+  // since moving that link's box to the actions would send a short name too far (or move it at all).
+  const textEdge = (rightToLeft) => {
+    const walker = element.ownerDocument.createTreeWalker(labelText, NodeFilter.SHOW_TEXT);
+    const range = element.ownerDocument.createRange();
+    let edge = rightToLeft ? Infinity : -Infinity;
+    while (walker.nextNode()) {
+      if (!walker.currentNode.textContent?.trim()) continue;
+      range.selectNodeContents(walker.currentNode);
+      for (const rect of range.getClientRects()) {
+        if (rect.width === 0 || rect.height === 0) continue;
+        edge = rightToLeft ? Math.min(edge, rect.left) : Math.max(edge, rect.right);
+      }
+    }
+    return Number.isFinite(edge) ? edge : rightToLeft
+      ? labelText.getBoundingClientRect().left : labelText.getBoundingClientRect().right;
+  };
   const startMarquee = () => {
     if (!labelText || !label || !marqueeWanted()) return;
     labelText.style.flex = "none";
     labelText.style.inlineSize = "max-content";
-    const text = labelText.getBoundingClientRect();
+    const rightToLeft = getComputedStyle(element).direction === "rtl";
+    const end = textEdge(rightToLeft);
     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));
+    const distance = Math.ceil(rightToLeft ? cell.left + stop - end : end - (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`);