@threadlabs/looma 0.26.24 → 0.26.26

package/components/ui-icon-button/ui-icon-button.html

@@ -23,6 +23,9 @@
     <prop name="anticipatory" type="boolean" default="false"
     >Keeps the button out of sight until it is wanted: at rest a fine pointer sees only a small guide dot, and the button appears on hover, on focus, or when
       the pointer comes near inside a ui-affordance-scope. Touch devices and the solid variant always show it.</prop>
+    <prop name="guide" type="keyword" values="dot, bar" default="dot"
+    >The idle marker of an anticipatory button: dot for contextual actions, or a slim neutral rounded bar for a panel-edge control. The icon appears on hover or
+      keyboard focus; touch always shows the icon.</prop>
     <prop name="round" type="boolean" default="false">Use a fully circular shape.</prop>
   </defs>
   <button
@@ -172,6 +175,13 @@
       pointer-events: none;
     }
 
+    :host([anticipatory][guide="bar"])::before {
+      inline-size: 2px;
+      block-size: 20px;
+      background: var(--ui-border-strong);
+      opacity: 1;
+    }
+
     :host([anticipatory]):disabled::before {
       opacity: 0;
     }
@@ -226,7 +236,7 @@
         border-color var(--ui-motion-fast) var(--ui-motion-ease),
         color var(--ui-motion-fast) var(--ui-motion-ease),
         box-shadow var(--ui-motion-base) var(--ui-motion-ease),
-        transform var(--ui-motion-fast) var(--ui-motion-ease);
+        scale var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
     @media (hover: none), (pointer: coarse) {
@@ -356,7 +366,7 @@
     }
 
     :host:active:enabled:not([aria-disabled="true"]) {
-      transform: scale(var(--ui-icon-button-active-scale, 0.96));
+      scale: var(--ui-icon-button-active-scale, 0.96);
     }
 
     :is(:host([loading]), :host([pending])) {

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

@@ -10,7 +10,8 @@
     >Positions the description around its trigger. Start and end on top or bottom follow the writing direction.</prop>
     <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>
+      opens only on keyboard-visible focus. Action activation dismisses hover/focus hints without removing focus; a fresh hover or keyboard focus can open them
+      again.</prop>
     <prop name="showDelay" type="number" default="500">Waits this many milliseconds before showing after pointer entry.</prop>
     <prop name="hideDelay" type="number" default="100">Waits this many milliseconds before hiding after pointer exit.</prop>
     <prop name="inverse" type="boolean" default="false">Use the high-contrast inverse surface (dark on light themes, light on dark themes).</prop>

package/components/ui-tooltip/ui-tooltip.js

@@ -28,6 +28,7 @@ function connect(host) {
   const overlayId = element.id || `ui-tooltip-${Math.random().toString(36).slice(2, 11)}`;
   if (!element.id) element.id = overlayId;
   let focused = false;
+  let pointerFocused = false;
   let trigger = null;
   let surface = null;
   let showTimer = null;
@@ -71,6 +72,8 @@ function connect(host) {
     }, Math.max(0, Number(host.props.hideDelay.value ?? 100)));
   };
   const onFocusin = () => {
+    // A pointer click may focus the action, but only visible keyboard focus keeps its hint open.
+    if (pointerFocused || !trigger?.matches(":focus-visible")) return;
     focused = true;
     clearTimers();
     setOpen(true, "keyboard");
@@ -78,6 +81,7 @@ function connect(host) {
   const onFocusout = (event) => {
     if (event.relatedTarget && element.contains(event.relatedTarget)) return;
     focused = false;
+    pointerFocused = false;
     clearTimers();
     setOpen(false, "keyboard");
   };
@@ -88,6 +92,8 @@ function connect(host) {
     else trigger.removeAttribute("aria-describedby");
     trigger.removeEventListener("keydown", onKeydown);
     trigger.removeEventListener("click", onClick);
+    trigger.removeEventListener("click", onActivate);
+    trigger.removeEventListener("pointerdown", onPointerDown);
     trigger.removeAttribute("aria-expanded");
     trigger.removeEventListener("pointerenter", onEnter);
     trigger.removeEventListener("pointerleave", onLeave);
@@ -98,6 +104,18 @@ function connect(host) {
     clearTimers();
     setOpen(!host.state.internalOpen, "pointer");
   };
+  const onPointerDown = () => {
+    pointerFocused = true;
+    focused = false;
+    clearTimers();
+    setOpen(false, "pointer");
+  };
+  const onActivate = (event) => {
+    // Action hints are spent once the action runs; the next hover or keyboard focus opens anew.
+    clearTimers();
+    focused = false;
+    setOpen(false, event.detail === 0 ? "keyboard" : "pointer");
+  };
   const attach = () => {
     if (!trigger) return;
     const ids = new Set((trigger.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean));
@@ -111,6 +129,8 @@ function connect(host) {
       trigger.setAttribute("aria-expanded", String(Boolean(host.state.internalOpen)));
       return;
     }
+    trigger.addEventListener("pointerdown", onPointerDown);
+    trigger.addEventListener("click", onActivate);
     if (how === "hover") {
       trigger.addEventListener("pointerenter", onEnter);
       trigger.addEventListener("pointerleave", onLeave);