@threadlabs/looma 0.35.0 → 0.35.1

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-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 {