@threadlabs/looma 0.6.3 → 0.6.4

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

@@ -63,7 +63,7 @@
       </button>
       <span class="leading"><slot name="leading"></slot></span>
       <span class="label"><slot name="label"><template $value="label"></template></slot></span>
-      <span class="actions"><slot name="actions"></slot></span>
+      <span class="actions" $ref="actions"><slot name="actions"></slot></span>
       <span class="drop-indicator row-drop-indicator" aria-hidden="true"></span>
     </div>
     <div class="children" $ref="children" role="group" :hidden="not (isContainer and internalExpanded)"><slot></slot></div>
@@ -72,6 +72,7 @@
   <style>
     :host {
       --_tree-row-min-height: 32px;
+      --_tree-disclosure-size: 16px;
 
       position: relative;
       display: block;
@@ -82,7 +83,7 @@
     .row {
       position: relative;
       display: grid;
-      grid-template-columns: 20px auto minmax(0, 1fr) auto;
+      grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
       align-items: center;
       min-block-size: var(--ui-tree-item-min-block-size, var(--_tree-row-min-height));
       min-inline-size: 0;
@@ -130,13 +131,14 @@
     .disclosure-spacer {
       grid-column: 1;
       grid-row: 1;
-      inline-size: 20px;
+      inline-size: var(--_tree-disclosure-size);
       block-size: 28px;
     }
 
     .disclosure {
       display: grid;
-      place-items: center;
+      /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
+      place-items: center start;
       padding: 0;
       color: var(--ui-text-muted);
       background: transparent;
@@ -157,18 +159,18 @@
     .disclosure-icon {
       display: grid;
       place-items: center;
-      inline-size: 14px;
-      block-size: 14px;
+      inline-size: 12px;
+      block-size: 12px;
       transform: rotate(-90deg);
       transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
     .disclosure-icon::before {
       display: block;
-      inline-size: 0.45rem;
-      block-size: 0.45rem;
-      border-inline-end: 2px solid currentColor;
-      border-block-end: 2px solid currentColor;
+      inline-size: 0.375rem;
+      block-size: 0.375rem;
+      border-inline-end: 1.5px solid currentColor;
+      border-block-end: 1.5px solid currentColor;
       content: "";
       /* A chevron's ink sits below its box centre; lift it so it centres optically (in either rotation). */
       transform: translateY(-20%) rotate(45deg);
@@ -229,12 +231,66 @@
       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))
+      );
+    }
+
+    .row:hover > .label > :slotted(*),
+    .row:focus-within > .label > :slotted(*) {
+      text-overflow: clip;
+    }
+
     .actions {
-      grid-column: 4;
-      grid-row: 1;
+      position: absolute;
+      z-index: 1;
+      inset-block: 0;
+      inset-inline-end: 0;
       display: inline-flex;
       align-items: center;
       min-inline-size: 0;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    .row:hover > .actions,
+    .row:focus-within > .actions {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    /* Without hover there is no reveal, so the controls keep their own column. */
+    @media (hover: none) {
+      .row {
+        grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+      }
+
+      .actions {
+        position: static;
+        grid-column: 4;
+        grid-row: 1;
+        padding-inline-start: 0;
+        background: none;
+        opacity: 1;
+        pointer-events: auto;
+      }
     }
 
     .drag-handle {

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

@@ -11,7 +11,7 @@ function parentItem(element) {
 /** Synchronizes an inferred tree hierarchy after nested component lowering. */
 export default function controller(host) {
   const element = host.element;
-  const { row, disclosure, children } = host.refs;
+  const { row, disclosure, children, actions } = host.refs;
   // Touch use enlarges rows and hides drag handles (see the template's styles).
   trackInputModality(element.ownerDocument);
   const childItems = () => Array.from(children?.children ?? [])
@@ -81,9 +81,17 @@ export default function controller(host) {
   updateLevel();
   const stop = host.effect(apply);
   apply();
+  // The label's fade has to end where the controls begin, and only the controls know their width.
+  const actionsSize = new ResizeObserver(([entry]) => {
+    const width = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+    element.style.setProperty("--_tree-actions-width", `${width}px`);
+  });
+  if (actions) actionsSize.observe(actions);
+
   return () => {
     stop?.();
     observer.disconnect();
+    actionsSize.disconnect();
     element.removeEventListener("ui-tree-auto-expand", onAutoExpand);
     element.removeEventListener("ui-tree-structure-sync", onStructure);
     element.removeEventListener("ui-tree-roving-tab-stop", onRoving);