@byline/admin 6.1.0 → 6.2.0

package/dist/forms/form-renderer.js

@@ -10,7 +10,7 @@ import { FieldRenderer } from "../fields/field-renderer.js";
 import { useBylineFieldServices } from "../fields/field-services-context.js";
 import { AdminGroup } from "../presentation/group.js";
 import { AdminRow } from "../presentation/row.js";
-import { AdminTabs } from "../presentation/tabs.js";
+import { AdminTabs, tabPanelId, tabTriggerId } from "../presentation/tabs.js";
 import { AvailableLocalesWidget } from "./available-locales-widget.js";
 import { DocumentActions } from "./document-actions.js";
 import { FormProvider, useFieldValue, useFormContext } from "./form-context.js";
@@ -284,10 +284,12 @@ const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRe
         const requested = activeTabBySet[set.name] ?? '';
         const resolvedActive = visibleTabs.length > 0 && !visibleTabs.some((t)=>t.name === requested) ? visibleTabs[0]?.name ?? requested : requested;
         const activeTab = visibleTabs.find((t)=>t.name === resolvedActive);
+        const idBase = `tabset:${set.name}`;
         return /*#__PURE__*/ jsxs("div", {
             className: clsx('byline-form-tabset', form_renderer_module.tabset),
             children: [
                 visibleTabs.length > 0 && /*#__PURE__*/ jsx(AdminTabs, {
+                    idBase: idBase,
                     tabs: visibleTabs,
                     activeTab: resolvedActive,
                     onChange: (tabName)=>handleTabChange(set.name, tabName),
@@ -295,11 +297,14 @@ const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRe
                     className: clsx('byline-form-tabset-tabs', form_renderer_module["tabset-tabs"])
                 }),
                 activeTab && /*#__PURE__*/ jsx("div", {
+                    role: "tabpanel",
+                    id: tabPanelId(idBase, activeTab.name),
+                    "aria-labelledby": tabTriggerId(idBase, activeTab.name),
                     className: clsx('byline-form-tabset-fields', form_renderer_module["tabset-fields"]),
                     children: activeTab.fields.map((name)=>renderItem(name))
                 })
             ]
-        }, `tabset:${set.name}`);
+        }, idBase);
     };
     const busyAnnouncement = isUploading ? t('forms.actions.uploading') : isSubmitting ? t('forms.actions.saving') : '';
     return /*#__PURE__*/ jsxs(Fragment, {

package/dist/presentation/tab-strip-drag.d.ts

@@ -0,0 +1,75 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+/**
+ * Pure state for click-and-drag scrolling of the tab strip.
+ *
+ * The DOM plumbing — pointer capture, the click suppression, the cursor —
+ * lives in `tabs.tsx`; the rules it follows are here so they can be tested
+ * without a pointer.
+ */
+/**
+ * How far the pointer must travel before the gesture stops being a click and
+ * becomes a drag.
+ *
+ * Without a threshold every click on a tab would nudge the strip by a pixel or
+ * two, and the click suppression that follows a drag would swallow the very
+ * clicks that select tabs.
+ */
+export declare const DRAG_THRESHOLD_PX = 5;
+/**
+ * How long after a drag a click is treated as that drag's own click.
+ *
+ * A window rather than a consume-once flag, because the click is not
+ * guaranteed to arrive: a drag released outside the strip produces none, and
+ * a flag left armed would swallow the reader's next deliberate click on a tab.
+ * Far longer than the browser's synthetic click takes to arrive, far shorter
+ * than anyone can release and deliberately click again.
+ */
+export declare const CLICK_SUPPRESSION_MS = 100;
+/** Where a gesture began. An internal part of `DragState`, not a public type. */
+interface DragOrigin {
+    /** Pointer x at the moment the button went down. */
+    pointerX: number;
+    /** The viewport's scroll offset at that same moment. */
+    scrollLeft: number;
+}
+export interface DragState {
+    origin: DragOrigin;
+    /** Whether the threshold has already been crossed. */
+    dragging: boolean;
+}
+export interface DragAdvance {
+    dragging: boolean;
+    /** The offset to scroll to, or `null` while the gesture is still a click. */
+    scrollLeft: number | null;
+}
+/**
+ * Whether a `pointerdown` should begin a potential drag.
+ *
+ * Mouse only. Touch and pen already scroll the viewport natively, with
+ * momentum and rubber-banding that a hand-rolled drag does not reproduce, so
+ * taking the gesture over would trade a good interaction for a worse one.
+ */
+export declare function shouldStartDrag({ pointerType, button, overflowing, }: {
+    pointerType: string;
+    button: number;
+    overflowing: boolean;
+}): boolean;
+/**
+ * Advance a gesture given the pointer's current x.
+ *
+ * Returns `scrollLeft: null` while the pointer is still within the threshold,
+ * so the caller leaves the viewport alone and lets the click through.
+ */
+export declare function advanceDrag({ origin, dragging }: DragState, pointerX: number, maxScroll: number): DragAdvance;
+/**
+ * Whether a click arriving now belongs to a drag that has just ended, and
+ * should therefore not reach the tab underneath.
+ */
+export declare function shouldSuppressClick(dragEndedAt: number | null, now: number): boolean;
+export {};

package/dist/presentation/tab-strip-drag.js

@@ -0,0 +1,25 @@
+const DRAG_THRESHOLD_PX = 5;
+const CLICK_SUPPRESSION_MS = 100;
+function shouldStartDrag({ pointerType, button, overflowing }) {
+    if ('mouse' !== pointerType) return false;
+    if (0 !== button) return false;
+    return overflowing;
+}
+function advanceDrag({ origin, dragging }, pointerX, maxScroll) {
+    const delta = pointerX - origin.pointerX;
+    const isDragging = dragging || Math.abs(delta) >= DRAG_THRESHOLD_PX;
+    if (false === isDragging) return {
+        dragging: false,
+        scrollLeft: null
+    };
+    const next = origin.scrollLeft - delta;
+    return {
+        dragging: true,
+        scrollLeft: Math.min(Math.max(next, 0), maxScroll)
+    };
+}
+function shouldSuppressClick(dragEndedAt, now) {
+    if (null == dragEndedAt) return false;
+    return now - dragEndedAt < CLICK_SUPPRESSION_MS;
+}
+export { CLICK_SUPPRESSION_MS, DRAG_THRESHOLD_PX, advanceDrag, shouldStartDrag, shouldSuppressClick };

package/dist/presentation/tab-strip-drag.test.node.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+export {};

package/dist/presentation/tab-strip-geometry.d.ts

@@ -0,0 +1,75 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+export interface StripMeasurements {
+    /**
+     * Intrinsic content width of the tablist row.
+     *
+     * The row is laid out at `max-content`, so this is the width the tabs want
+     * regardless of how much room the viewport currently gives them. A row that
+     * shrank to its container would report the container's width back and the
+     * strip could never detect overflow at all.
+     */
+    rowWidth: number;
+    /**
+     * Usable width of the strip container.
+     *
+     * Independent of whether the trigger is rendered — the container is sized by
+     * the layout above it, not by its own children.
+     */
+    containerWidth: number;
+    /** Width the overflow trigger occupies when it is rendered. */
+    triggerWidth: number;
+    /** Gap between the viewport and the trigger. */
+    triggerGap: number;
+    /** Current horizontal scroll offset of the viewport. */
+    scrollLeft: number;
+}
+export interface StripState {
+    /** Whether the row needs the scrolling viewport and the overflow trigger. */
+    overflowing: boolean;
+    /** Width available to the scrolling viewport. */
+    viewportWidth: number;
+    /** Whether the viewport is scrolled fully left (hides the leading fade). */
+    atStart: boolean;
+    /** Whether the viewport is scrolled fully right (hides the trailing fade). */
+    atEnd: boolean;
+}
+export interface RevealMeasurements {
+    viewportWidth: number;
+    scrollLeft: number;
+    /** The tab's offset from the start of the row. */
+    tabOffsetLeft: number;
+    tabWidth: number;
+    rowWidth: number;
+    padding?: number;
+}
+/**
+ * Resolve whether the strip overflows, and where it sits within its scroll
+ * range.
+ *
+ * Overflow is decided against the bare container, and deliberately takes no
+ * account of the trigger: a row that fits the container fits, and reserving
+ * the trigger's width first would summon a menu for tabs that were never cut
+ * off. The trigger is subtracted only afterwards, to size the viewport it now
+ * shares the container with.
+ *
+ * That ordering is also what keeps the result stable. The trigger's presence
+ * changes the viewport but never `containerWidth` — which the layout above
+ * sets — and never `rowWidth`, which the row holds at `max-content`. So the
+ * overflow answer cannot feed back into its own inputs.
+ */
+export declare function computeStripState({ rowWidth, containerWidth, triggerWidth, triggerGap, scrollLeft, }: StripMeasurements): StripState;
+/**
+ * The scroll offset that brings one tab into view, or `null` when the tab is
+ * already visible and the viewport should be left untouched.
+ *
+ * Returning `null` rather than the current offset is the point: this runs on
+ * selection and on focus, and writing `scrollLeft` unconditionally would
+ * cancel a scroll the reader is in the middle of.
+ */
+export declare function computeRevealScroll({ viewportWidth, scrollLeft, tabOffsetLeft, tabWidth, rowWidth, padding, }: RevealMeasurements): number | null;

package/dist/presentation/tab-strip-geometry.js

@@ -0,0 +1,36 @@
+const EDGE_EPSILON = 1;
+const DEFAULT_REVEAL_PADDING = 8;
+function computeStripState({ rowWidth, containerWidth, triggerWidth, triggerGap, scrollLeft }) {
+    const measured = containerWidth > 0;
+    const overflowing = measured && rowWidth > containerWidth;
+    if (false === overflowing) return {
+        overflowing: false,
+        viewportWidth: Math.max(0, containerWidth),
+        atStart: true,
+        atEnd: true
+    };
+    const viewportWidth = Math.max(0, containerWidth - triggerWidth - triggerGap);
+    const maxScroll = Math.max(0, rowWidth - viewportWidth);
+    return {
+        overflowing: true,
+        viewportWidth,
+        atStart: scrollLeft <= EDGE_EPSILON,
+        atEnd: scrollLeft >= maxScroll - EDGE_EPSILON
+    };
+}
+function computeRevealScroll({ viewportWidth, scrollLeft, tabOffsetLeft, tabWidth, rowWidth, padding = DEFAULT_REVEAL_PADDING }) {
+    const maxScroll = Math.max(0, rowWidth - viewportWidth);
+    const clamp = (value)=>Math.min(Math.max(value, 0), maxScroll);
+    const leadingEdge = tabOffsetLeft - padding;
+    const trailingEdge = tabOffsetLeft + tabWidth + padding;
+    let next;
+    if (tabWidth + 2 * padding >= viewportWidth) next = leadingEdge;
+    else if (leadingEdge < scrollLeft) next = leadingEdge;
+    else {
+        if (!(trailingEdge > scrollLeft + viewportWidth)) return null;
+        next = trailingEdge - viewportWidth;
+    }
+    const clamped = clamp(next);
+    return clamped === scrollLeft ? null : clamped;
+}
+export { computeRevealScroll, computeStripState };

package/dist/presentation/tab-strip-geometry.test.node.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+export {};

package/dist/presentation/tabs.d.ts

@@ -6,20 +6,43 @@ interface AdminTabsProps {
     tabs: AdminTabItem[];
     activeTab: string;
     onChange: (name: string) => void;
+    /**
+     * Prefix for the generated tab and panel ids. The consumer that renders the
+     * panels builds its panel ids from the same base via `tabPanelId`, which is
+     * what associates the two halves for assistive technology.
+     */
+    idBase: string;
     /** Error counts keyed by tab name — shows a danger badge when > 0. */
     errorCounts?: Record<string, number>;
     className?: string;
 }
+/** Id of the button for one tab. */
+export declare const tabTriggerId: (idBase: string, name: string) => string;
+/** Id the consumer must put on the panel belonging to one tab. */
+export declare const tabPanelId: (idBase: string, name: string) => string;
 /**
  * Tabs navigation bar for admin form layouts.
  *
- * Used by FormRenderer when a CollectionAdminConfig declares a `tabs` array.
- * Each tab is a simple button with a bottom-border active indicator.
- * Inactive tabs show a subtle hover state. Fully dark-mode aware.
+ * Used by FormRenderer when a CollectionAdminConfig declares a `tabs` array,
+ * and by the collection history view. The number of tabs a collection can
+ * declare is unbounded while the column they sit in is not, so the strip
+ * scrolls horizontally and — only once the tabs genuinely exceed the column —
+ * grows a menu listing every tab.
  *
- * Stable override handles: `.byline-admin-tabs`, `.byline-admin-tab`,
- * `.byline-admin-tab-active`, `.byline-admin-tab-label`,
- * `.byline-admin-tab-badge`.
+ * The menu is a jump list rather than a list of the tabs that happen to be
+ * out of view: its contents stay put as the strip scrolls, and no tab ever
+ * changes position in the strip as a result of being selected. Editors learn
+ * where a tab lives and it stays there.
+ *
+ * Scroll position is moved only when the selection changes or a tab takes
+ * focus. A reader who scrolls the strip to look at other labels keeps their
+ * position through re-measurement, re-render and resize.
+ *
+ * Stable override handles: `.byline-admin-tabs`, `.byline-admin-tabs-viewport`,
+ * `.byline-admin-tablist`, `.byline-admin-tab`, `.byline-admin-tab-active`,
+ * `.byline-admin-tab-label`, `.byline-admin-tab-badge`,
+ * `.byline-admin-tabs-overflow-trigger`, `.byline-admin-tabs-overflow-menu`,
+ * `.byline-admin-tabs-overflow-item`.
  */
-export declare const AdminTabs: ({ tabs, activeTab, onChange, errorCounts, className, }: AdminTabsProps) => import("react").JSX.Element;
+export declare const AdminTabs: ({ tabs, activeTab, onChange, idBase, errorCounts, className, }: AdminTabsProps) => import("react").JSX.Element;
 export {};

package/dist/presentation/tabs.js

@@ -1,39 +1,270 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { useTranslation } from "@byline/i18n/react";
-import { Badge } from "@byline/ui/react";
+import { Badge, Dropdown, EllipsisIcon } from "@byline/ui/react";
 import clsx from "clsx";
+import { advanceDrag, shouldStartDrag, shouldSuppressClick } from "./tab-strip-drag.js";
+import { computeRevealScroll, computeStripState } from "./tab-strip-geometry.js";
 import tabs_module from "./tabs.module.js";
-const AdminTabs = ({ tabs, activeTab, onChange, errorCounts, className })=>{
+const useIsoLayoutEffect = "u" > typeof window ? useLayoutEffect : useEffect;
+const TRIGGER_SIZE_PX = 32;
+const TRIGGER_GAP_PX = 12;
+const INITIAL_STRIP_STATE = {
+    overflowing: false,
+    viewportWidth: 0,
+    atStart: true,
+    atEnd: true
+};
+const tabTriggerId = (idBase, name)=>`${idBase}-tab-${name}`;
+const tabPanelId = (idBase, name)=>`${idBase}-panel-${name}`;
+function prefersReducedMotion() {
+    if ("u" < typeof window || 'function' != typeof window.matchMedia) return false;
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+const AdminTabs = ({ tabs, activeTab, onChange, idBase, errorCounts, className })=>{
     const { t } = useTranslation('byline-admin');
-    return /*#__PURE__*/ jsx("div", {
-        role: "tablist",
-        "aria-label": t('presentation.formTabsAriaLabel'),
+    const containerRef = useRef(null);
+    const viewportRef = useRef(null);
+    const rowRef = useRef(null);
+    const tabRefs = useRef(new Map());
+    const focusAfterChange = useRef(null);
+    const [strip, setStrip] = useState(INITIAL_STRIP_STATE);
+    const measure = useCallback(()=>{
+        const container = containerRef.current;
+        const row = rowRef.current;
+        if (null == container || null == row) return;
+        const next = computeStripState({
+            rowWidth: row.scrollWidth,
+            containerWidth: container.clientWidth,
+            triggerWidth: TRIGGER_SIZE_PX,
+            triggerGap: TRIGGER_GAP_PX,
+            scrollLeft: viewportRef.current?.scrollLeft ?? 0
+        });
+        setStrip((prev)=>prev.overflowing === next.overflowing && prev.viewportWidth === next.viewportWidth && prev.atStart === next.atStart && prev.atEnd === next.atEnd ? prev : next);
+    }, []);
+    useIsoLayoutEffect(()=>{
+        measure();
+        const container = containerRef.current;
+        const row = rowRef.current;
+        if (null == container || null == row || "u" < typeof ResizeObserver) return;
+        const observer = new ResizeObserver(()=>measure());
+        observer.observe(container);
+        observer.observe(row);
+        return ()=>observer.disconnect();
+    }, [
+        measure,
+        tabs
+    ]);
+    const reveal = useCallback((name)=>{
+        const viewport = viewportRef.current;
+        const row = rowRef.current;
+        const tab = tabRefs.current.get(name);
+        if (null == viewport || null == row || null == tab) return;
+        const next = computeRevealScroll({
+            viewportWidth: viewport.clientWidth,
+            scrollLeft: viewport.scrollLeft,
+            tabOffsetLeft: tab.offsetLeft,
+            tabWidth: tab.offsetWidth,
+            rowWidth: row.scrollWidth
+        });
+        if (null == next) return;
+        viewport.scrollTo?.({
+            left: next,
+            behavior: prefersReducedMotion() ? 'auto' : 'smooth'
+        });
+    }, []);
+    useEffect(()=>{
+        const pending = focusAfterChange.current;
+        if (pending === activeTab) {
+            focusAfterChange.current = null;
+            tabRefs.current.get(activeTab)?.focus({
+                preventScroll: true
+            });
+        }
+        reveal(activeTab);
+    }, [
+        activeTab,
+        reveal
+    ]);
+    const select = useCallback((name, moveFocus)=>{
+        if (moveFocus) focusAfterChange.current = name;
+        onChange(name);
+    }, [
+        onChange
+    ]);
+    const dragRef = useRef(null);
+    const dragEndedAtRef = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const handlePointerDown = (event)=>{
+        const viewport = viewportRef.current;
+        if (null == viewport) return;
+        if (false === shouldStartDrag({
+            pointerType: event.pointerType,
+            button: event.button,
+            overflowing: strip.overflowing
+        })) return;
+        dragRef.current = {
+            origin: {
+                pointerX: event.clientX,
+                scrollLeft: viewport.scrollLeft
+            },
+            dragging: false
+        };
+    };
+    const handlePointerMove = (event)=>{
+        const state = dragRef.current;
+        const viewport = viewportRef.current;
+        const row = rowRef.current;
+        if (null == state || null == viewport || null == row) return;
+        const maxScroll = Math.max(0, row.scrollWidth - viewport.clientWidth);
+        const next = advanceDrag(state, event.clientX, maxScroll);
+        if (null == next.scrollLeft) return;
+        if (false === state.dragging) {
+            state.dragging = true;
+            setDragging(true);
+            viewport.setPointerCapture?.(event.pointerId);
+        }
+        viewport.scrollLeft = next.scrollLeft;
+    };
+    const handlePointerEnd = (event)=>{
+        const state = dragRef.current;
+        if (null == state) return;
+        dragRef.current = null;
+        if (false === state.dragging) return;
+        setDragging(false);
+        viewportRef.current?.releasePointerCapture?.(event.pointerId);
+        dragEndedAtRef.current = performance.now();
+    };
+    const handleClickCapture = (event)=>{
+        if (false === shouldSuppressClick(dragEndedAtRef.current, performance.now())) return;
+        dragEndedAtRef.current = null;
+        event.stopPropagation();
+        event.preventDefault();
+    };
+    const handleKeyDown = (event)=>{
+        const current = tabs.findIndex((tab)=>tab.name === activeTab);
+        if (current < 0 || 0 === tabs.length) return;
+        let nextIndex;
+        switch(event.key){
+            case 'ArrowRight':
+                nextIndex = (current + 1) % tabs.length;
+                break;
+            case 'ArrowLeft':
+                nextIndex = (current - 1 + tabs.length) % tabs.length;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                break;
+            case 'End':
+                nextIndex = tabs.length - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        const next = tabs[nextIndex];
+        if (null == next || next.name === activeTab) return;
+        select(next.name, true);
+    };
+    const sizing = {
+        '--byline-admin-tabs-trigger-size': `${TRIGGER_SIZE_PX}px`,
+        '--byline-admin-tabs-trigger-gap': `${TRIGGER_GAP_PX}px`
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ref: containerRef,
+        style: sizing,
         className: clsx('byline-admin-tabs', tabs_module.tabs, className),
-        children: tabs.map((tab)=>{
-            const isActive = tab.name === activeTab;
-            return /*#__PURE__*/ jsx("button", {
-                type: "button",
-                role: "tab",
-                "aria-selected": isActive,
-                onClick: ()=>onChange(tab.name),
-                className: clsx('byline-admin-tab', tabs_module.tab, isActive && [
-                    'byline-admin-tab-active',
-                    tabs_module["tab-active"]
-                ]),
-                children: /*#__PURE__*/ jsxs("span", {
-                    className: clsx('byline-admin-tab-label', tabs_module.label),
-                    children: [
-                        tab.label,
-                        (errorCounts?.[tab.name] ?? 0) > 0 && /*#__PURE__*/ jsx(Badge, {
-                            intent: "danger",
-                            className: clsx('byline-admin-tab-badge', tabs_module.badge),
-                            children: errorCounts?.[tab.name]
-                        })
-                    ]
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                ref: viewportRef,
+                onScroll: measure,
+                onPointerDown: handlePointerDown,
+                onPointerMove: handlePointerMove,
+                onPointerUp: handlePointerEnd,
+                onPointerCancel: handlePointerEnd,
+                onClickCapture: handleClickCapture,
+                "data-at-start": strip.atStart,
+                "data-at-end": strip.atEnd,
+                "data-draggable": strip.overflowing,
+                "data-dragging": dragging,
+                className: clsx('byline-admin-tabs-viewport', tabs_module.viewport),
+                children: /*#__PURE__*/ jsx("div", {
+                    ref: rowRef,
+                    role: "tablist",
+                    "aria-label": t('presentation.formTabsAriaLabel'),
+                    onKeyDown: handleKeyDown,
+                    className: clsx('byline-admin-tablist', tabs_module.tablist),
+                    children: tabs.map((tab)=>{
+                        const isActive = tab.name === activeTab;
+                        const errorCount = errorCounts?.[tab.name] ?? 0;
+                        return /*#__PURE__*/ jsx("button", {
+                            ref: (node)=>{
+                                if (null == node) tabRefs.current.delete(tab.name);
+                                else tabRefs.current.set(tab.name, node);
+                            },
+                            type: "button",
+                            role: "tab",
+                            id: tabTriggerId(idBase, tab.name),
+                            "aria-controls": tabPanelId(idBase, tab.name),
+                            "aria-selected": isActive,
+                            tabIndex: isActive ? 0 : -1,
+                            onClick: ()=>select(tab.name, false),
+                            onFocus: ()=>reveal(tab.name),
+                            className: clsx('byline-admin-tab', tabs_module.tab, isActive && [
+                                'byline-admin-tab-active',
+                                tabs_module["tab-active"]
+                            ]),
+                            children: /*#__PURE__*/ jsxs("span", {
+                                className: clsx('byline-admin-tab-label', tabs_module.label),
+                                children: [
+                                    tab.label,
+                                    errorCount > 0 && /*#__PURE__*/ jsx(Badge, {
+                                        intent: "danger",
+                                        className: clsx('byline-admin-tab-badge', tabs_module.badge),
+                                        children: errorCount
+                                    })
+                                ]
+                            })
+                        }, tab.name);
+                    })
                 })
-            }, tab.name);
-        })
+            }),
+            strip.overflowing && /*#__PURE__*/ jsxs(Dropdown.Root, {
+                children: [
+                    /*#__PURE__*/ jsx(Dropdown.Trigger, {
+                        "aria-label": t('presentation.formTabsAllTabsLabel'),
+                        className: clsx('byline-admin-tabs-overflow-trigger', tabs_module["overflow-trigger"]),
+                        children: /*#__PURE__*/ jsx(EllipsisIcon, {
+                            className: clsx('byline-admin-tabs-overflow-icon', tabs_module["overflow-icon"])
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Dropdown.Portal, {
+                        children: /*#__PURE__*/ jsx(Dropdown.Content, {
+                            sideOffset: 6,
+                            align: "end",
+                            className: clsx('byline-admin-tabs-overflow-menu', tabs_module["overflow-menu"]),
+                            children: tabs.map((tab)=>{
+                                const errorCount = errorCounts?.[tab.name] ?? 0;
+                                return /*#__PURE__*/ jsxs(Dropdown.Item, {
+                                    onClick: ()=>select(tab.name, true),
+                                    "data-active": tab.name === activeTab,
+                                    className: clsx('byline-admin-tabs-overflow-item', tabs_module["overflow-item"]),
+                                    children: [
+                                        tab.label,
+                                        errorCount > 0 && /*#__PURE__*/ jsx(Badge, {
+                                            intent: "danger",
+                                            className: clsx('byline-admin-tab-badge', tabs_module.badge),
+                                            children: errorCount
+                                        })
+                                    ]
+                                }, tab.name);
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
     });
 };
-export { AdminTabs };
+export { AdminTabs, tabPanelId, tabTriggerId };

package/dist/presentation/tabs.module.js

@@ -1,10 +1,20 @@
 import "./tabs_module.css";
 const tabs_module = {
     tabs: "tabs-AUVgW2",
+    viewport: "viewport-Q34w7N",
+    tablist: "tablist-a3JXdm",
     tab: "tab-Tn7xcQ",
     "tab-active": "tab-active-cGf5N5",
     tabActive: "tab-active-cGf5N5",
     label: "label-PvJgbb",
-    badge: "badge-NJVOEv"
+    badge: "badge-NJVOEv",
+    "overflow-trigger": "overflow-trigger-sQPQE8",
+    overflowTrigger: "overflow-trigger-sQPQE8",
+    "overflow-icon": "overflow-icon-E4aR_Z",
+    overflowIcon: "overflow-icon-E4aR_Z",
+    "overflow-menu": "overflow-menu-BkkmwS",
+    overflowMenu: "overflow-menu-BkkmwS",
+    "overflow-item": "overflow-item-ahgTA4",
+    overflowItem: "overflow-item-ahgTA4"
 };
 export default tabs_module;