@adecore/ui 0.28.0 → 0.29.1

package/dist/tabs/parts.js

@@ -98,10 +98,21 @@ export function TabsList({ className, children, start, end, after, variant = 'li
         }
         return () => observer.disconnect();
     });
-    // A picked tab that scrolled out of sight comes back into it, wherever it was picked from.
+    // A picked tab that scrolled out of sight comes back into it, wherever it was picked from. Only the strip
+    // moves: `scrollIntoView` would scroll every ancestor too, such as a thread that holds a block of tabs.
     useEffect(() => {
-        if (scrolls) {
-            list.current?.querySelector('[aria-selected="true"]')?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+        const row = list.current;
+        const tab = row?.querySelector('[aria-selected="true"]');
+        if (!scrolls || !row || !tab) {
+            return;
+        }
+        const strip = row.getBoundingClientRect();
+        const picked = tab.getBoundingClientRect();
+        if (picked.left < strip.left) {
+            row.scrollLeft -= strip.left - picked.left;
+        }
+        else if (picked.right > strip.right) {
+            row.scrollLeft += picked.right - strip.right;
         }
     }, [scrolls, value]);
     useEffect(() => {

package/dist/theme.css

@@ -320,6 +320,9 @@
        same outline for something that takes focus without being a button, such as a row in a list. */
     .icon-btn:focus-visible, .menu-item:focus-visible, button:focus-visible, .focus-ring:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
     .menu-item:focus-visible { outline-offset: -2px; }
+    /* A container that only holds focus, a pane or a block a jump lands on, wears no ring: only what a person
+       operates does. A heading keeps it, since a prompt moves focus there to be read out. */
+    :where([tabindex='-1']:not(h1, h2, h3, h4, h5, h6)):focus-visible, .ade-split-pane:focus-visible, .ade-split-content:focus-visible { outline: none; }
     /* A card that holds a field, the composer's or a prompt's, wears the field's outline on its own edge. */
     .focus-ring-within:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: -1px; }
     /* Base UI moves DOM focus to the item the pointer hovers, and a browser keeps `:focus-visible`
@@ -796,7 +799,6 @@
         min-width: 0;
         border-bottom: 1px solid var(--separator);
     }
-    .ade-split-content { outline-offset: -2px; }
     .ade-split-view[data-dragging] > .ade-split-content { pointer-events: none; }
     .ade-split-divider {
         position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.28.0",
+  "version": "0.29.1",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/tabs/parts.tsx

@@ -163,10 +163,20 @@ export function TabsList({ className, children, start, end, after, variant = 'li
         return () => observer.disconnect();
     });
 
-    // A picked tab that scrolled out of sight comes back into it, wherever it was picked from.
+    // A picked tab that scrolled out of sight comes back into it, wherever it was picked from. Only the strip
+    // moves: `scrollIntoView` would scroll every ancestor too, such as a thread that holds a block of tabs.
     useEffect(() => {
-        if (scrolls) {
-            list.current?.querySelector('[aria-selected="true"]')?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+        const row = list.current;
+        const tab = row?.querySelector<HTMLElement>('[aria-selected="true"]');
+        if (!scrolls || !row || !tab) {
+            return;
+        }
+        const strip = row.getBoundingClientRect();
+        const picked = tab.getBoundingClientRect();
+        if (picked.left < strip.left) {
+            row.scrollLeft -= strip.left - picked.left;
+        } else if (picked.right > strip.right) {
+            row.scrollLeft += picked.right - strip.right;
         }
     }, [scrolls, value]);
 

package/src/theme.css

@@ -320,6 +320,9 @@
        same outline for something that takes focus without being a button, such as a row in a list. */
     .icon-btn:focus-visible, .menu-item:focus-visible, button:focus-visible, .focus-ring:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
     .menu-item:focus-visible { outline-offset: -2px; }
+    /* A container that only holds focus, a pane or a block a jump lands on, wears no ring: only what a person
+       operates does. A heading keeps it, since a prompt moves focus there to be read out. */
+    :where([tabindex='-1']:not(h1, h2, h3, h4, h5, h6)):focus-visible, .ade-split-pane:focus-visible, .ade-split-content:focus-visible { outline: none; }
     /* A card that holds a field, the composer's or a prompt's, wears the field's outline on its own edge. */
     .focus-ring-within:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: -1px; }
     /* Base UI moves DOM focus to the item the pointer hovers, and a browser keeps `:focus-visible`
@@ -796,7 +799,6 @@
         min-width: 0;
         border-bottom: 1px solid var(--separator);
     }
-    .ade-split-content { outline-offset: -2px; }
     .ade-split-view[data-dragging] > .ade-split-content { pointer-events: none; }
     .ade-split-divider {
         position: absolute;