@threadlabs/looma 0.26.17 → 0.26.19

package/components/ui-editor-table-overlay/ui-editor-table-overlay.html

@@ -60,6 +60,7 @@
     </state>
     <state
       name="hovered"
+      nullable
       type="object"
     >
       <prop name="left" required type="number"></prop>
@@ -73,6 +74,7 @@
     </state>
     <state
       name="active"
+      nullable
       type="object"
     >
       <prop name="left" required type="number"></prop>

package/components/ui-editor-table-overlay/ui-editor-table-overlay.js

@@ -130,7 +130,7 @@ function connect(host) {
       rowOffset: `${hovered.top + hovered.height / 2}px`,
       columnOffset: `${hovered.left + hovered.width / 2}px`,
     };
-    const active = host.props.geometry.value?.activeCell ?? null;
+    const active = hovered ?? host.props.geometry.value?.activeCell ?? null;
     host.state.active = active && { ...active, menuLeft: `${active.left + active.width - 30}px`, menuTop: `${active.top + 6}px` };
     queueMicrotask(proximity.refresh);
   });

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.js

@@ -1,4 +1,5 @@
 import { backgrounds } from "../shared/editor.js";
+import { createAnchoredSurface } from "../shared/overlay.js";
 
 const overflowSections = [
   ["Structure", [["add-row-before", "Add row above", "panel-top"], ["add-column-before", "Add column left", "panel-left"], ["toggle-header-row", "Header row", "rows"], ["toggle-header-column", "Header column", "columns"], ["move-row-up", "Move row up", "rows"], ["move-row-down", "Move row down", "rows"], ["move-column-left", "Move column left", "columns"], ["move-column-right", "Move column right", "columns"]]],
@@ -9,10 +10,19 @@ const overflowSections = [
 // Lists the actions the table selection permits; the overflow menu opens and closes here.
 function connect(host) {
   const element = host.element;
+  let surface = null;
+  let surfaceMenu = null;
+  let positionFrame = null;
   const positionMenu = () => {
+    if (!host.state.overflowOpen) return;
     const button = element.querySelector(".more");
     const menu = element.querySelector(".menu");
     if (!button || !menu) return;
+    if (surfaceMenu !== menu) {
+      surface?.destroy();
+      surfaceMenu = menu;
+      surface = createAnchoredSurface(menu, { anchor: button, placement: "bottom-end", gap: 8, viewportGap: 12 });
+    }
     const rect = button.getBoundingClientRect();
     const viewport = window.visualViewport;
     const top = viewport?.offsetTop ?? 0;
@@ -20,8 +30,11 @@ function connect(host) {
     const above = rect.top - top - 20;
     const below = bottom - rect.bottom - 20;
     menu.style.maxHeight = `${Math.max(80, Math.floor(Math.max(above, below)))}px`;
-    menu.style.top = below >= above ? "calc(100% + var(--ui-space-2))" : "auto";
-    menu.style.bottom = below >= above ? "auto" : "calc(100% + var(--ui-space-2))";
+    surface.show();
+  };
+  const schedulePosition = () => {
+    if (positionFrame !== null) cancelAnimationFrame(positionFrame);
+    positionFrame = requestAnimationFrame(() => { positionFrame = null; positionMenu(); });
   };
   const stop = host.effect(() => {
     const enabled = new Set(Array.isArray(host.props.actions.value) ? host.props.actions.value : []);
@@ -45,12 +58,19 @@ function connect(host) {
     host.state.hasOverflow = host.state.swatches.length > 0 || host.state.sections.length > 0;
     if (!host.props.open.value || !host.state.hasOverflow) host.state.overflowOpen = false;
   });
+  const stopMenu = host.effect(() => {
+    if (host.state.overflowOpen) schedulePosition();
+    else {
+      surface?.destroy();
+      surface = null;
+      surfaceMenu = null;
+    }
+  });
   const onClick = (event) => {
     const action = event.target.closest?.("[data-action]")?.dataset.action;
     if (!action) return;
     if (action === "toggle-overflow") {
       host.state.overflowOpen = !host.state.overflowOpen;
-      if (host.state.overflowOpen) requestAnimationFrame(positionMenu);
       return;
     }
     host.state.overflowOpen = false;
@@ -74,6 +94,9 @@ function connect(host) {
   window.visualViewport?.addEventListener("resize", positionMenu);
   return () => {
     stop();
+    stopMenu();
+    surface?.destroy();
+    if (positionFrame !== null) cancelAnimationFrame(positionFrame);
     element.removeEventListener("click", onClick);
     document.removeEventListener("pointerdown", onOutside, true);
     document.removeEventListener("keydown", onKeydown, true);

package/components/ui-menu/ui-menu.html

@@ -2,6 +2,7 @@
   <defs>
     <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="icons" type="boolean" default="false">Reserves a fixed icon column in every item, including items without an icon. Supply item icons through their icon slot.</prop>
     <prop name="size" type="keyword" values="sm, md" default="md"
     >sm sizes the menu to a small trigger, such as an xs or sm button: smallest text, short rows, a small check, and a narrower minimum width. md is the
       standard size.</prop>
@@ -77,6 +78,10 @@
       gap: 0;
     }
 
+    :host([icons]) {
+      --_ui-default-menu-icon-display: inline-flex;
+    }
+
     :host {
       --_ui-menu-surface: var(--ui-menu-surface);
       --_ui-menu-border: var(--ui-menu-border);
@@ -89,6 +94,7 @@
       --_ui-default-menu-item-radius: initial;
       --_ui-default-menu-item-min-block-size: initial;
       --_ui-default-menu-indicator-size: initial;
+      --_ui-default-menu-icon-display: none;
       display: flex;
       flex-direction: column;
       box-sizing: border-box;

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

@@ -10,6 +10,7 @@
     <prop name="type" type="keyword" values="action, checkbox, radio" default="action"
     >An action closes its menu; a checkbox toggles, and a radio chooses one item within its nearest Menu Group. Checkable items keep the menu open.</prop>
     <prop name="checked" type="boolean" default="false">Initial or externally controlled checked state of a checkbox or radio item.</prop>
+    <prop name="tone" type="keyword" values="neutral, danger" default="neutral">Danger identifies a destructive action without changing its behavior.</prop>
     <state type="boolean" name="internalChecked" value="false"></state>
     <event name="change" type="object">
       <prop name="checked" required type="boolean"></prop>
@@ -27,6 +28,7 @@
       from:data-value="$value"
       from:href="{ true: null, false: $href }[concat($disabled)]"
     >
+      <span class="icon" aria-hidden="true"><slot name="icon"></slot></span>
       <span class="label"><slot></slot></span>
       <span class="shortcut" aria-hidden="true"><slot name="shortcut"></slot></span>
     </a>
@@ -41,6 +43,7 @@
       <span class="indicator" aria-hidden="true">
         <ui-icon $if="($type = 'checkbox' or $type = 'radio') and $internalChecked" name="check"></ui-icon>
       </span>
+      <span class="icon" aria-hidden="true"><slot name="icon"></slot></span>
       <span class="label"><slot></slot></span>
       <span class="shortcut" aria-hidden="true"><slot name="shortcut"></slot></span>
     </div>
@@ -91,6 +94,29 @@
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    /* A named icon has a fixed column; an icon-enabled menu reserves it on every row. */
+    .icon {
+      display: var(--_ui-default-menu-icon-display, none);
+      align-items: center;
+      justify-content: center;
+      flex: none;
+      inline-size: var(--ui-icon-size-sm);
+      block-size: var(--ui-icon-size-sm);
+    }
+
+    .icon:not(:empty) {
+      display: inline-flex;
+    }
+
+    .icon :slotted(svg) {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+
+    :host([tone="danger"]) {
+      color: var(--ui-danger);
+    }
+
     .label {
       display: flex;
       align-items: center;