@threadlabs/looma 0.23.22 → 0.23.24

package/components/shared/overlay.js

@@ -205,6 +205,8 @@ export function createAnchoredSurface(surface, options = {}) {
   let point = null;
   let open = false;
   let frame = null;
+  let anchorFrame = null;
+  let lastAnchorRect = null;
   let abort = null;
   let sizeObserver = null;
   surface.setAttribute("popover", "manual");
@@ -218,12 +220,31 @@ export function createAnchoredSurface(surface, options = {}) {
       return;
     }
     if (!anchor) return;
-    fallbackPosition(surface, anchor.getBoundingClientRect(), placement, gap(), viewportGap);
+    lastAnchorRect = anchor.getBoundingClientRect();
+    fallbackPosition(surface, lastAnchorRect, placement, gap(), viewportGap);
   };
   const schedule = () => {
     if (open && frame === null) frame = owner.requestAnimationFrame(position);
   };
+  // Resize and scroll events do not report an ancestor's transition or layout shift.
+  // While visible, sample the anchor and only re-position when its bounds change.
+  const trackAnchor = () => {
+    anchorFrame = null;
+    if (!open || !anchor || point) return;
+    const rect = anchor.getBoundingClientRect();
+    if (!lastAnchorRect || rect.left !== lastAnchorRect.left || rect.top !== lastAnchorRect.top
+      || rect.width !== lastAnchorRect.width || rect.height !== lastAnchorRect.height) schedule();
+    anchorFrame = owner.requestAnimationFrame(trackAnchor);
+  };
+  const stopTracking = () => {
+    if (anchorFrame !== null) owner.cancelAnimationFrame(anchorFrame);
+    anchorFrame = null;
+    lastAnchorRect = null;
+  };
   const syncListeners = () => {
+    if (open && anchor && !point) {
+      if (anchorFrame === null) anchorFrame = owner.requestAnimationFrame(trackAnchor);
+    } else stopTracking();
     const needed = open && (point || anchor);
     if (!needed) {
       abort?.abort();
@@ -251,7 +272,7 @@ export function createAnchoredSurface(surface, options = {}) {
     showAtPoint(next) { point = next; open = true; syncListeners(); show(surface); position(); schedule(); observeSize(); },
     hide() { open = false; point = null; syncListeners(); stopSize(); if (frame !== null) owner.cancelAnimationFrame(frame); frame = null; hide(surface); },
     refresh: schedule,
-    destroy() { open = false; abort?.abort(); abort = null; stopSize(); if (frame !== null) owner.cancelAnimationFrame(frame); frame = null; hide(surface); anchor = null; },
+    destroy() { open = false; stopTracking(); abort?.abort(); abort = null; stopSize(); if (frame !== null) owner.cancelAnimationFrame(frame); frame = null; hide(surface); anchor = null; },
   };
 }
 

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

@@ -1,9 +1,11 @@
 <link rel="component" href="../ui-spinner/ui-spinner.html">
+<link rel="component" href="../ui-icon/ui-icon.html">
 <template component="ui-button" controller="./ui-button.js">
   <defs>
-    <prop name="variant" type="keyword" values="outline, solid, danger, ghost, link" default="outline"
+    <prop name="variant" type="keyword" values="outline, solid, danger, ghost, link, card" default="outline"
     >Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is
-      hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it.</prop>
+      hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it. card uses the
+      same tone on a full-width action with an icon slot, wrapping content, and a centered action slot.</prop>
     <prop name="size" type="keyword" values="xs, sm, md, lg" default="md"
     >Height, padding, and type size. xs is 1.5rem with the smallest text, for a control inside a line of small text; sm is the small control height (2rem by
       default) with tighter padding and smaller text, md is the standard control height (2.5rem), and lg is taller (3rem) with roomier padding. Under touch, sm
@@ -37,6 +39,34 @@
          table keyed by a boolean's text picks each value, and null leaves the attribute off. -->
   </defs>
   <template $match>
+    <a
+      $when="variant = 'card' and as = 'a'"
+      from:href="{ true: null, false: href }[concat(disabled or loading or pending)]"
+      from:target="target"
+      from:rel="rel"
+      from:aria-disabled="{ true: 'true', false: null }[concat(disabled or loading or pending)]"
+      from:aria-busy="loading or pending"
+      from:tabindex="{ true: '0', false: null }[concat((loading or pending) and not disabled)]"
+    >
+      <span class="card-icon"><ui-spinner $if="loading or pending" size="sm"></ui-spinner><template $if="not (loading or pending)"><slot
+            name="icon"
+          ></slot></template></span>
+      <span class="card-content"><slot></slot></span>
+      <span class="card-action"><slot name="action"><ui-icon name="chevron-right" aria-hidden="true"></ui-icon></slot></span>
+    </a>
+    <button
+      $when="variant = 'card'"
+      from:type="type"
+      from:disabled="disabled"
+      from:aria-disabled="{ true: 'true', false: null }[concat(loading or pending)]"
+      from:aria-busy="loading or pending"
+    >
+      <span class="card-icon"><ui-spinner $if="loading or pending" size="sm"></ui-spinner><template $if="not (loading or pending)"><slot
+            name="icon"
+          ></slot></template></span>
+      <span class="card-content"><slot></slot></span>
+      <span class="card-action"><slot name="action"><ui-icon name="chevron-right" aria-hidden="true"></ui-icon></slot></span>
+    </button>
     <a
       $when="as = 'a'"
       from:href="{ true: null, false: href }[concat(disabled or loading or pending)]"
@@ -233,6 +263,42 @@
       font-size: var(--ui-font-size-md);
     }
 
+    /* Card actions inherit Button's palette and behavior; only their shared layout changes.
+       The icon may contain any decorative composition. Empty icons remove their column. */
+    :host-state([variant="card"]) {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: start;
+      gap: var(--ui-space-3);
+      inline-size: 100%;
+      min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-md));
+      text-align: start;
+      white-space: normal;
+      box-shadow: none;
+      background-image: none;
+    }
+    :host-state([variant="card"][size="lg"]) {
+      min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
+    }
+    :host-state([variant="card"]):has(.card-icon:empty) {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+    .card-icon {
+      display: flex;
+      align-items: flex-start;
+    }
+    .card-icon:empty {
+      display: none;
+    }
+    .card-content {
+      min-inline-size: 0;
+    }
+    .card-action {
+      display: flex;
+      align-items: center;
+      align-self: center;
+    }
+
     /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
        is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
     :host:hover:not(:disabled, [aria-disabled="true"]) {

package/components/ui-separator/ui-separator.html

@@ -1,5 +1,7 @@
 <template component="ui-separator">
   <defs>
+    <prop name="emphasis" type="keyword" values="normal, strong" default="normal"
+    >Normal uses the decorative divider color; strong uses the stronger enclosing-edge color for clearer separation.</prop>
     <prop name="orientation" type="keyword" values="horizontal, vertical" default="horizontal"
     >Whether the separator divides stacked content (horizontal) or inline content (vertical).</prop>
     <prop name="selectable" type="boolean" default="false">Gives a document divider a pointer-sized hit area. The editor owns selection and deletion.</prop>
@@ -19,13 +21,17 @@
       align-self: stretch;
       margin: 0;
       border: 0;
-      border-block-start: var(--ui-border-width) solid var(--ui-separator-color, var(--ui-border-divider));
+      border-block-start: var(--ui-border-width) solid var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
+    }
+
+    :host-state([emphasis="strong"]) {
+      --_separator-color: var(--ui-border-strong);
     }
 
     :host[aria-orientation="vertical"] {
       block-size: auto;
       border-block-start: 0;
-      border-inline-start: var(--ui-border-width) solid var(--ui-separator-color, var(--ui-border-divider));
+      border-inline-start: var(--ui-border-width) solid var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
     }
 
     :host-state([selectable]) {