@threadlabs/looma 0.34.0 → 0.35.1

package/components/ui-switch/ui-switch.html

@@ -114,6 +114,7 @@
       border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
       border-radius: var(--ui-radius-round);
       background-color: var(--ui-control-surface, var(--ui-surface-default));
+      background-image: var(--ui-surface-highlight, none);
       box-shadow: var(--ui-control-inset);
       cursor: pointer;
       transition: background-color var(--ui-motion-base) var(--ui-motion-ease), border-color var(--ui-motion-base) var(--ui-motion-ease);
@@ -135,6 +136,7 @@
 
     input:checked {
       background-color: var(--ui-accent-solid);
+      background-image: var(--ui-accent-highlight, none);
       border-color: var(--ui-accent-solid);
     }
 
@@ -158,6 +160,7 @@
     :host([disabled]) input {
       border-color: var(--ui-disabled-border);
       background-color: var(--ui-disabled-surface);
+      background-image: none;
       box-shadow: none;
       cursor: not-allowed;
     }

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-textarea/ui-textarea.html

@@ -93,7 +93,8 @@
       border: var(--ui-textarea-border-width, var(--_ui-default-textarea-border-width, var(--ui-border-width))) solid
         var(--ui-textarea-border, var(--_ui-default-textarea-border, var(--ui-control-border, var(--ui-border-strong))));
       border-radius: var(--ui-textarea-radius, var(--_ui-default-textarea-radius, var(--ui-field-radius, var(--ui-radius-md))));
-      background: var(--ui-textarea-surface, var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
+      background-color: var(--ui-textarea-surface, var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
+      background-image: var(--_ui-default-textarea-highlight, var(--ui-surface-highlight, none));
       color: var(--ui-text-primary);
       font: inherit;
       line-height: var(--ui-line-height-md);

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 {