@threadlabs/looma 0.35.0 → 0.36.0

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

@@ -249,7 +249,9 @@
       line-height: var(--ui-line-height-tight);
       padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-action-inset-md, var(--ui-space-3)) !important;
       background-image: var(--ui-surface-highlight, none);
-      box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))), var(--_tone-glow);
+      box-shadow:
+        var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+        var(--_tone-glow);
       cursor: pointer;
       transition:
         scale var(--ui-motion-press, var(--ui-motion-fast)) var(--ui-motion-ease),
@@ -382,7 +384,9 @@
       background-color: var(--_tone);
       color: var(--_on-tone);
       background-image: var(--_tone-highlight);
-      box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))), var(--_tone-glow);
+      box-shadow:
+        var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+        var(--_tone-glow);
     }
 
     :is(:host[data-appearance="solid"], :host[data-appearance="danger"]):hover:not(:disabled, [aria-disabled="true"]) {
@@ -552,8 +556,11 @@
 
     /* The size states outrank :host, so sm is named too, or a small button would stay small. */
     @media (pointer: coarse) {
-      :host, :host([size="sm"]) {
-        min-block-size: var(--ui-control-min-block-size);
+      :host {
+        min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+      }
+      :host([size="sm"]) {
+        min-block-size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
       }
     }
 

package/components/ui-color-picker/ui-color-picker.html

@@ -127,7 +127,7 @@
         --_size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
       }
       :host([size="sm"]) {
-        --_size: var(--ui-control-min-block-size);
+        --_size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
         --_font: var(--ui-font-size-md);
       }
     }

package/components/ui-combobox/ui-combobox.html

@@ -882,7 +882,7 @@
       /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
          body-size text: below 16px, iOS zooms the page into the focused field. */
       :host([size="sm"]) {
-        --_row: var(--ui-control-min-block-size);
+        --_row: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
       }
       :host([size="sm"]) input {
         font-size: inherit;

package/components/ui-curve-editor/ui-curve-editor.html

@@ -13,6 +13,7 @@
     <prop name="disabled" type="boolean" default="false">Prevents typing, stepping and pointer or keyboard changes while keeping the value visible.</prop>
     <event name="input" type="object"><prop name="value" type="string" required></prop></event>
     <event name="change" type="object"><prop name="value" type="string" required></prop></event>
+    <event name="cancel" type="object"><prop name="value" type="string" required></prop></event>
   </defs>
   <span>
     <span class="plot-frame" from:aria-label="$label" role="group"><span class="plot" $ref="plot">

package/components/ui-curve-editor/ui-curve-editor.js

@@ -24,21 +24,30 @@ export function connect(host) {
     if (!drag || event.pointerId !== drag.id || host.props.disabled.value) return;
     const rect = plot.getBoundingClientRect();
     if (!rect.width || !rect.height) return;
-    points[drag.index] = (event.clientX - rect.left) / rect.width;
-    points[drag.index + 1] = 2 - (event.clientY - rect.top) / rect.height * 3;
+    points[drag.index] = (event.clientX - rect.left - drag.offsetX) / rect.width;
+    points[drag.index + 1] = 2 - (event.clientY - rect.top - drag.offsetY) / rect.height * 3;
     paint(); emit("input");
   };
-  const finish = event => { if (drag?.id !== event.pointerId) return; drag = undefined; if (!host.props.disabled.value) emit("change"); };
+  const finish = event => {
+    if (drag?.id !== event.pointerId) return;
+    const start = drag; drag = undefined;
+    if (start.handle.hasPointerCapture(start.id)) start.handle.releasePointerCapture(start.id);
+    if (event.type !== 'pointerup' || host.props.disabled.value) { points = start.points; paint(); emit('input'); emit('cancel'); }
+    else emit('change');
+  };
   const cleanups = [];
   for (const [index, handle] of [[0, first], [2, second]]) {
-    const down = event => { if (host.props.disabled.value || event.button !== 0) return; event.preventDefault(); handle.focus(); drag = { id: event.pointerId, index }; handle.setPointerCapture(event.pointerId); };
+    const down = event => { if (host.props.disabled.value || event.button !== 0) return; event.preventDefault(); handle.focus(); const rect = plot.getBoundingClientRect();
+      drag = { id: event.pointerId, index, handle, points: [...points], offsetX: event.clientX - rect.left - points[index] * rect.width, offsetY: event.clientY - rect.top - (2 - points[index + 1]) / 3 * rect.height };
+      handle.setPointerCapture(event.pointerId); };
     const key = event => {
+      if (event.key === 'Escape' && drag) { event.preventDefault(); finish({ pointerId: drag.id, type: 'cancel' }); return; }
       if (host.props.disabled.value || !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) return;
       event.preventDefault(); const step = event.shiftKey ? .1 : .01;
       points[index + (event.key === "ArrowUp" || event.key === "ArrowDown" ? 1 : 0)] += (event.key === "ArrowLeft" || event.key === "ArrowDown" ? -step : step);
       paint(); emit("input"); emit("change");
     };
-    for (const [type, callback] of [["pointerdown", down], ["pointermove", move], ["pointerup", finish], ["pointercancel", finish], ["keydown", key]]) {
+    for (const [type, callback] of [["pointerdown", down], ["pointermove", move], ["pointerup", finish], ["pointercancel", finish], ["lostpointercapture", finish], ["keydown", key]]) {
       handle.addEventListener(type, callback); cleanups.push(() => handle.removeEventListener(type, callback));
     }
   }
@@ -47,5 +56,5 @@ export function connect(host) {
     for (const type of ["input", "change"]) { field.addEventListener(type, edit); cleanups.push(() => field.removeEventListener(type, edit)); }
   });
   const stop = host.effect(() => { const value = host.props.value.value; if (value === external) return; external = value; try { points = curvePoints(value); } catch { /* Keep the last valid curve. */ } paint(); });
-  return () => { stop(); cleanups.forEach(cleanup => cleanup()); };
+  return () => { stop(); cleanups.forEach(cleanup => cleanup()); if (drag?.handle.hasPointerCapture(drag.id)) drag.handle.releasePointerCapture(drag.id); };
 }

package/components/ui-input/ui-input.html

@@ -150,7 +150,10 @@
       }
 
       :host([size="sm"]) {
-        min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size)));
+        min-block-size: var(
+          --ui-input-min-block-size,
+          var(--_ui-default-input-min-block-size, max(var(--ui-control-size-sm), var(--ui-control-min-block-size)))
+        );
       }
     }
 

package/components/ui-light-editor/ui-light-editor.html

@@ -1,3 +1,4 @@
+<link rel="component" href="../ui-icon/ui-icon.html">
 <link rel="component" href="../ui-number-input/ui-number-input.html">
 <template component="ui-light-editor" module="./ui-light-editor.js">
   <defs>
@@ -10,36 +11,159 @@
     <prop name="disabled" type="boolean" default="false">Prevents pointer, keyboard and exact edits.</prop>
     <event name="input" type="object"><prop name="x" type="number" required></prop><prop name="y" type="number" required></prop></event>
     <event name="change" type="object"><prop name="x" type="number" required></prop><prop name="y" type="number" required></prop></event>
+    <event name="cancel" type="object"><prop name="x" type="number" required></prop><prop name="y" type="number" required></prop></event>
   </defs>
   <span>
     <span class="stage" from:aria-label="$label" role="group">
       <span class="plane" $ref="plane">
         <svg viewBox="0 0 100 60" preserveAspectRatio="none" aria-hidden="true"><path d="M0 30 H100 M50 0 V60"></path></svg>
         <span class="specimen"><slot></slot></span>
-        <button type="button" class="source" $ref="source" from:disabled="$disabled" from:aria-label="concat($label, '. Arrow keys move the source; Shift moves faster.')"></button>
+        <button
+          type="button"
+          class="source"
+          $ref="source"
+          from:disabled="$disabled"
+          from:aria-label="concat($label, '. Arrow keys move the source; Shift moves faster.')"
+        >
+          <span class="source-glyph"><ui-icon name="lightbulb"></ui-icon></span>
+        </button>
       </span>
     </span>
     <span class="coordinates">
-      <ui-number-input data-coordinate="x" from:value="$horizontal" min="0" max="100" step="1" unit="%" label="Light horizontal position" from:size="$size" from:disabled="$disabled"></ui-number-input>
-      <ui-number-input data-coordinate="y" from:value="$vertical" min="0" max="100" step="1" unit="%" label="Light vertical position" from:size="$size" from:disabled="$disabled"></ui-number-input>
+      <ui-number-input
+        data-coordinate="x"
+        from:value="$horizontal"
+        min="0"
+        max="100"
+        step="1"
+        unit="%"
+        label="Light horizontal position"
+        from:size="$size"
+        from:disabled="$disabled"
+      ></ui-number-input>
+      <ui-number-input
+        data-coordinate="y"
+        from:value="$vertical"
+        min="0"
+        max="100"
+        step="1"
+        unit="%"
+        label="Light vertical position"
+        from:size="$size"
+        from:disabled="$disabled"
+      ></ui-number-input>
     </span>
-    <span class="hint">Drag the light, use arrow keys, or enter its position. Top centre is 50%, 0%.</span>
+    <span class="hint">Drag the light, tap the background, use arrow keys, or enter its position. Escape cancels a drag. Top centre is 50%, 0%.</span>
   </span>
   <style>
-    :host { display: grid !important; gap: var(--ui-space-3) !important; min-inline-size: 0; padding: 0 !important; margin: 0 !important; }
-    .stage { box-sizing: border-box !important; display: block !important; block-size: 13rem; padding: calc(var(--ui-control-min-block-size) / 2) !important; border: var(--ui-border-width) solid var(--ui-control-border); border-radius: var(--ui-field-radius, var(--ui-radius-md)); background: var(--ui-neutral-surface, var(--ui-surface)); }
-    .plane { position: relative; display: block !important; inline-size: 100%; block-size: 100%; }
-    svg { inline-size: 100%; block-size: 100%; overflow: visible; }
-    path { fill: none; stroke: var(--ui-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
-    .specimen { position: absolute; inset: 0; display: grid !important; place-items: center !important; }
-    .source { position: absolute; left: 50%; top: 0; translate: -50% -50%; display: grid !important; place-items: center !important; inline-size: max(2rem, var(--ui-control-min-block-size)); block-size: max(2rem, var(--ui-control-min-block-size)); padding: 0 !important; margin: 0 !important; border: 0; border-radius: 50%; background: transparent; cursor: grab; touch-action: none; }
-    .source::after { content: ""; inline-size: 1rem; block-size: 1rem; border: var(--ui-border-width) solid var(--ui-accent); border-radius: 50%; background: var(--ui-surface-raised); box-shadow: 0 0 0 var(--ui-space-2) color-mix(in srgb, var(--ui-accent) 12%, transparent), var(--ui-shadow-sm); }
-    .source:active { cursor: grabbing; }
-    .source:focus-visible { outline: var(--ui-focus-width) solid var(--ui-focus-ring); outline-offset: var(--ui-space-1); }
-    .source:disabled { cursor: not-allowed; }
-    .source:disabled::after { background: var(--ui-disabled-surface); border-color: var(--ui-disabled-border); box-shadow: none; }
-    .coordinates { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ui-space-2) !important; }
-    .hint { font-size: var(--ui-font-size-sm); color: var(--ui-text-secondary); }
-    @media (forced-colors: active) { .source::after { background: Canvas; border-color: CanvasText; } .source:focus-visible { outline-color: Highlight; } }
+    :host {
+      display: grid !important;
+      gap: var(--ui-space-3) !important;
+      min-inline-size: 0;
+      padding: 0 !important;
+      margin: 0 !important;
+    }
+    .stage {
+      box-sizing: border-box !important;
+      display: block !important;
+      block-size: 13rem;
+      padding: calc(var(--ui-control-min-block-size) / 2) !important;
+      border: var(--ui-border-width) solid var(--ui-control-border);
+      border-radius: var(--ui-field-radius, var(--ui-radius-md));
+      background: var(--ui-neutral-surface, var(--ui-surface));
+    }
+    .plane {
+      position: relative;
+      display: block !important;
+      inline-size: 100%;
+      block-size: 100%;
+    }
+    svg {
+      inline-size: 100%;
+      block-size: 100%;
+      overflow: visible;
+    }
+    path {
+      fill: none;
+      stroke: var(--ui-border);
+      stroke-width: 1;
+      vector-effect: non-scaling-stroke;
+    }
+    .specimen {
+      position: absolute;
+      inset: 0;
+      display: grid !important;
+      place-items: center !important;
+    }
+    .source {
+      position: absolute;
+      left: 50%;
+      top: 0;
+      translate: -50% -50%;
+      display: grid !important;
+      place-items: center !important;
+      inline-size: max(2rem, var(--ui-control-min-block-size));
+      block-size: max(2rem, var(--ui-control-min-block-size));
+      padding: 0 !important;
+      margin: 0 !important;
+      border: 0;
+      border-radius: 50%;
+      background: transparent;
+      cursor: grab;
+      touch-action: none;
+    }
+    .source-glyph {
+      position: relative;
+      z-index: 1;
+      display: inline-flex !important;
+      color: var(--ui-accent);
+      font-size: var(--ui-font-size-lg);
+    }
+    .source::after {
+      content: "";
+      position: absolute;
+      inline-size: 2rem;
+      block-size: 2rem;
+      border: var(--ui-border-width) solid var(--ui-accent);
+      border-radius: 50%;
+      background: var(--ui-surface-raised);
+      box-shadow: 0 0 0 var(--ui-space-2) color-mix(in srgb, var(--ui-accent) 12%, transparent), var(--ui-shadow-sm);
+    }
+    .source:active {
+      cursor: grabbing;
+    }
+    .source:focus-visible {
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-space-1);
+    }
+    .source:disabled {
+      cursor: not-allowed;
+    }
+    .source:disabled::after {
+      background: var(--ui-disabled-surface);
+      border-color: var(--ui-disabled-border);
+      box-shadow: none;
+    }
+    .coordinates {
+      display: grid !important;
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      gap: var(--ui-space-2) !important;
+    }
+    .hint {
+      font-size: var(--ui-font-size-sm);
+      color: var(--ui-text-secondary);
+    }
+    @media (forced-colors: active) {
+      .source-glyph {
+        color: CanvasText;
+      }
+      .source::after {
+        background: Canvas;
+        border-color: CanvasText;
+      }
+      .source:focus-visible {
+        outline-color: Highlight;
+      }
+    }
   </style>
 </template>

package/components/ui-light-editor/ui-light-editor.js

@@ -2,7 +2,7 @@ const coordinate = value => Number.isFinite(Number(value)) ? Math.round(Math.max
 
 export function connect(host) {
   const { plane, source } = host.refs;
-  let x = coordinate(host.props.x.value), y = coordinate(host.props.y.value), drag;
+  let x = coordinate(host.props.x.value), y = coordinate(host.props.y.value), drag, suppressClick = false;
   const listeners = [];
   const listen = (element, type, fn) => { element.addEventListener(type, fn); listeners.push(() => element.removeEventListener(type, fn)); };
   const paint = () => {
@@ -14,21 +14,38 @@ export function connect(host) {
   const emit = type => host.dispatch(type, { x, y });
   listen(source, 'pointerdown', event => {
     if (host.props.disabled.value || event.button !== 0) return;
-    event.preventDefault(); source.focus(); drag = event.pointerId; source.setPointerCapture(drag);
+    event.preventDefault(); source.focus();
+    const rect = plane.getBoundingClientRect();
+    drag = { id: event.pointerId, x, y, offsetX: event.clientX - rect.left - x * rect.width, offsetY: event.clientY - rect.top - y * rect.height };
+    source.setPointerCapture(drag.id);
   });
   listen(source, 'pointermove', event => {
-    if (drag !== event.pointerId || host.props.disabled.value) return;
+    if (drag?.id !== event.pointerId || host.props.disabled.value) return;
     const rect = plane.getBoundingClientRect(); if (!rect.width || !rect.height) return;
-    x = (event.clientX - rect.left) / rect.width; y = (event.clientY - rect.top) / rect.height;
+    x = (event.clientX - rect.left - drag.offsetX) / rect.width; y = (event.clientY - rect.top - drag.offsetY) / rect.height;
     paint(); emit('input');
   });
   const end = event => {
-    if (drag !== event.pointerId) return;
-    drag = undefined;
-    if (source.hasPointerCapture(event.pointerId)) source.releasePointerCapture(event.pointerId);
-    if (!host.props.disabled.value) emit('change');
+    if (drag?.id !== event.pointerId) return;
+    const start = drag; drag = undefined; suppressClick = true;
+    if (source.hasPointerCapture(start.id)) source.releasePointerCapture(start.id);
+    if (event.type !== 'pointerup' || host.props.disabled.value) {
+      x = start.x; y = start.y; paint(); emit('input'); emit('cancel');
+    } else if (!host.props.disabled.value) emit('change');
   };
   listen(source, 'pointerup', end); listen(source, 'pointercancel', end); listen(source, 'lostpointercapture', end);
+  listen(source, 'keydown', event => {
+    if (event.key === 'Escape' && drag) { event.preventDefault(); end({ pointerId: drag.id, type: 'cancel' }); }
+  });
+  // A background tap is deliberate placement; scrolling and specimen controls keep native gestures.
+  listen(plane, 'pointerdown', () => { suppressClick = false; });
+  listen(plane, 'click', event => {
+    if (suppressClick) { suppressClick = false; return; }
+    if (host.props.disabled.value || event.target.closest('button,input,select,textarea,a,[role="button"]')) return;
+    const rect = plane.getBoundingClientRect(); if (!rect.width || !rect.height) return;
+    x = (event.clientX - rect.left) / rect.width; y = (event.clientY - rect.top) / rect.height;
+    paint(); emit('input'); emit('change');
+  });
   listen(source, 'keydown', event => {
     if (host.props.disabled.value || !['ArrowLeft','ArrowRight','ArrowUp','ArrowDown','Home','End'].includes(event.key)) return;
     event.preventDefault(); const step = event.shiftKey ? .1 : .01;
@@ -49,5 +66,5 @@ export function connect(host) {
     });
   }
   const stop = host.effect(() => { x = coordinate(host.props.x.value); y = coordinate(host.props.y.value); paint(); });
-  return () => { stop(); listeners.forEach(cleanup => cleanup()); if (drag !== undefined && source.hasPointerCapture(drag)) source.releasePointerCapture(drag); };
+  return () => { stop(); listeners.forEach(cleanup => cleanup()); if (drag && source.hasPointerCapture(drag.id)) source.releasePointerCapture(drag.id); };
 }

package/components/ui-reel/ui-reel.html

@@ -8,7 +8,8 @@
       scrolls sideways once they overflow.</prop>
     <prop name="snap" type="keyword" values="start, center"
     >Snaps scrolling to items: start comes to rest with an item's start edge at the reel's start, and center with an item centred in the reel. Unset, the reel
-      scrolls freely.</prop>
+      scrolls freely. Wrap a component item in a plain element when snapping: the wrapper receives snap alignment while the component keeps ownership of its
+      root styles.</prop>
   </defs>
   <div role="region" tabindex="0"><slot></slot></div>
   <style>

package/components/ui-select/ui-select.html

@@ -84,10 +84,12 @@
       --_ui-select-highlight: var(--ui-surface-highlight, linear-gradient(transparent, transparent));
       appearance: none;
       padding-inline-end: calc(var(--ui-space-3) + 1.5rem) !important;
-      background-image: var(
-        --ui-select-chevron,
-        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
-      ), var(--_ui-select-highlight);
+      background-image:
+        var(
+          --ui-select-chevron,
+          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
+        ),
+        var(--_ui-select-highlight);
       background-repeat: no-repeat;
       background-position: right var(--ui-space-3) center, center;
       background-size: 1.125rem 1.125rem, 100% 100%;
@@ -134,7 +136,9 @@
       padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
       padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1)) !important;
       background-position: right var(--ui-space-2) center, center;
-      background-size: var(--ui-icon-size-sm) var(--ui-icon-size-sm), 100% 100%;
+      background-size:
+        var(--ui-icon-size-sm) var(--ui-icon-size-sm),
+        100% 100%;
       font-size: var(--ui-font-size-sm);
     }
 
@@ -154,7 +158,7 @@
       }
 
       :host([size="sm"]) {
-        min-block-size: var(--ui-control-min-block-size);
+        min-block-size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
         font-size: inherit;
       }
     }

package/components/ui-tabs/ui-tabs.html

@@ -98,10 +98,9 @@
       max-inline-size: 100%;
       /* Tabs that do not fit scroll sideways rather than wrapping or squeezing. */
       overflow-x: auto;
-      /* overflow-x: auto would make the block axis scrollable too; a sideways swipe must not scroll the
-         strip or the page vertically. */
+      /* Contain sideways overscroll without trapping vertical page scrolling. */
       overflow-y: hidden;
-      overscroll-behavior: contain;
+      overscroll-behavior-inline: contain;
       scrollbar-width: thin;
       border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
     }

package/components/ui-tabs/ui-tabs.js

@@ -122,17 +122,9 @@ export function connect(host) {
     if (list.contains(event.relatedTarget)) return;
     for (const button of tabButtons()) button.tabIndex = button.value === host.state.internalValue ? 0 : -1;
   };
-  // A vertical mouse wheel over an overflowing strip scrolls it sideways instead of the page.
-  // Trackpad gestures already carry a horizontal delta and are left to the browser.
-  const onWheel = (event) => {
-    if (list.scrollWidth <= list.clientWidth || event.deltaX !== 0 || event.ctrlKey) return;
-    event.preventDefault();
-    list.scrollLeft += event.deltaY;
-  };
   list.addEventListener("click", onClick);
   list.addEventListener("keydown", onKeydown);
   list.addEventListener("focusout", onFocusout);
-  list.addEventListener("wheel", onWheel, { passive: false });
   const observer = new MutationObserver(readPanels);
   observer.observe(container, { childList: true });
   const tabObserver = new MutationObserver(syncButtons);
@@ -153,6 +145,5 @@ export function connect(host) {
     list.removeEventListener("click", onClick);
     list.removeEventListener("keydown", onKeydown);
     list.removeEventListener("focusout", onFocusout);
-    list.removeEventListener("wheel", onWheel);
   };
 }

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

@@ -238,7 +238,8 @@
       border-inline-end-width: var(--ui-border-width);
       border-block-end-width: var(--ui-border-width);
       border-end-end-radius: var(--ui-border-width);
-      transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
+      /* Stretch in screen axes after rotation so both arrow shoulders stay level. */
+      transform: scale(1.25, 0.85) rotate(45deg);
     }
 
     :host[data-ui-actual-placement="bottom"] .surface::after {