@redocly/theme 0.59.0-next.0 → 0.59.0-next.10

package/lib/markdoc/components/CodeWalkthrough/CodeStep.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/lib/markdoc/components/CodeWalkthrough/CodeToggle.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/lib/markdoc/components/CodeWalkthrough/CodeWalkthrough.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/lib/markdoc/components/CodeWalkthrough/Input.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/lib/markdoc/components/Heading/Heading.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/lib/markdoc/components/HtmlBlock/HtmlBlock.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HtmlBlock = HtmlBlock;
 const React = __importStar(require("react"));

package/lib/markdoc/components/InlineSvg/InlineSvg.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineSvg = InlineSvg;
 const React = __importStar(require("react"));

package/lib/markdoc/components/MarkdocExample/MarkdocExample.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/lib/markdoc/components/Tabs/TabList.d.ts

@@ -6,8 +6,10 @@ type TabListProps = {
     size: TabsSize;
     activeTab: string;
     onTabChange: (tab: string) => void;
+    containerRef: React.RefObject<HTMLUListElement | null>;
+    onReadyChange?: (isReady: boolean) => void;
 };
-export declare function TabList({ childrenArray, size, activeTab, onTabChange, }: TabListProps): JSX.Element;
+export declare function TabList({ childrenArray, size, activeTab, onTabChange, containerRef, onReadyChange, }: TabListProps): JSX.Element;
 export declare const TabListContainer: import("styled-components").StyledComponent<"ul", any, {}, never>;
 export declare const TabItem: import("styled-components").StyledComponent<"li", any, {
     active?: boolean;

package/lib/markdoc/components/Tabs/TabList.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabButtonLink = exports.TabItem = exports.TabListContainer = void 0;
 exports.TabList = TabList;
@@ -34,47 +44,144 @@ const DropdownMenuItem_1 = require("../../../components/Dropdown/DropdownMenuIte
 const Button_1 = require("../../../components/Button/Button");
 const hooks_1 = require("../../../core/hooks");
 const utils_1 = require("../../../core/utils");
-function TabList({ childrenArray, size, activeTab, onTabChange, }) {
-    const tabsContainerRef = (0, react_1.useRef)(null);
-    const { allTabsHidden, overflowTabs, visibleTabs, handleKeyboard, onTabClick, setTabRef } = (0, hooks_1.useTabs)({
+/**
+ * Calculates optimal dropdown position relative to viewport to ensure visibility.
+ * Positions below the button by default, but moves above if insufficient space.
+ * Adjusts horizontal position to prevent overflow off screen edges.
+ */
+const calculateDropdownPosition = (buttonRect, dropdownRect) => {
+    const gap = 4;
+    const margin = 16;
+    const spaceBelow = window.innerHeight - buttonRect.bottom;
+    const spaceAbove = buttonRect.top;
+    // Position below button, or above if dropdown doesn't fit below
+    const top = spaceBelow < dropdownRect.height + gap && spaceAbove > spaceBelow
+        ? buttonRect.top - gap
+        : buttonRect.bottom + gap;
+    // Align with button left edge, adjust if overflows screen
+    const idealLeft = buttonRect.left;
+    const rightEdge = idealLeft + dropdownRect.width;
+    const overflowsRight = rightEdge > window.innerWidth - margin;
+    const left = overflowsRight
+        ? window.innerWidth - dropdownRect.width - margin
+        : Math.max(margin, idealLeft);
+    return { top, left };
+};
+/**
+ * Manages dropdown positioning and updates on scroll/resize events for TabList.
+ */
+const useDropdownPosition = (hasOverflow, dropdownRef) => {
+    const [dropdownPosition, setDropdownPosition] = (0, react_1.useState)({});
+    const [isDropdownOpen, setIsDropdownOpen] = (0, react_1.useState)(false);
+    const updateDropdownPosition = (0, react_1.useCallback)(() => {
+        if (!dropdownRef.current)
+            return;
+        const button = dropdownRef.current.querySelector('button');
+        const dropdownMenu = dropdownRef.current.querySelector('div:last-child');
+        if (!button || !dropdownMenu)
+            return;
+        const buttonRect = button.getBoundingClientRect();
+        const dropdownRect = dropdownMenu.getBoundingClientRect();
+        const position = calculateDropdownPosition(buttonRect, dropdownRect);
+        setDropdownPosition(position);
+    }, [dropdownRef]);
+    // Track when dropdown menu appears and recalculate position
+    (0, react_1.useEffect)(() => {
+        if (!hasOverflow || !isDropdownOpen || !dropdownRef.current)
+            return;
+        const dropdownMenu = dropdownRef.current.querySelector('div:last-child');
+        if (!dropdownMenu)
+            return;
+        // ResizeObserver tracks both initial render and size changes
+        const resizeObserver = new ResizeObserver(() => {
+            updateDropdownPosition();
+        });
+        resizeObserver.observe(dropdownMenu);
+        return () => resizeObserver.disconnect();
+    }, [hasOverflow, isDropdownOpen, dropdownRef, updateDropdownPosition]);
+    // Update position on scroll/resize
+    (0, react_1.useEffect)(() => {
+        if (!hasOverflow || !isDropdownOpen)
+            return;
+        window.addEventListener('scroll', updateDropdownPosition, true);
+        window.addEventListener('resize', updateDropdownPosition);
+        return () => {
+            window.removeEventListener('scroll', updateDropdownPosition, true);
+            window.removeEventListener('resize', updateDropdownPosition);
+        };
+    }, [hasOverflow, isDropdownOpen, updateDropdownPosition]);
+    return {
+        dropdownPosition,
+        isDropdownOpen,
+        setIsDropdownOpen,
+        setDropdownPosition,
+        updateDropdownPosition,
+    };
+};
+const renderTab = (child, index, size, setTabRef, handleKeyboard, onTabClick) => {
+    const { label, icon } = child.props;
+    const tabId = (0, utils_1.getTabId)(label, index);
+    return (react_1.default.createElement(Tab_1.Tab, { key: `key-${tabId}`, tabId: tabId, label: label, icon: icon, size: size, disabled: child.props.disable, setRef: (el) => setTabRef(el, index), onKeyDown: (event) => handleKeyboard(event, index), onClick: () => {
+            var _a, _b;
+            (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+            onTabClick(label);
+        } }));
+};
+function TabList({ childrenArray, size, activeTab, onTabChange, containerRef, onReadyChange, }) {
+    const dropdownRef = (0, react_1.useRef)(null);
+    const totalTabs = childrenArray.length;
+    const { overflowTabs, visibleTabs, handleKeyboard, onTabClick, setTabRef, isReady } = (0, hooks_1.useTabs)({
         activeTab,
         onTabChange,
-        containerRef: tabsContainerRef,
-        totalTabs: childrenArray.length,
+        containerRef,
+        totalTabs,
     });
+    (0, react_1.useEffect)(() => {
+        onReadyChange === null || onReadyChange === void 0 ? void 0 : onReadyChange(isReady);
+    }, [isReady, onReadyChange]);
     const { highlightStyle } = useHighlightBarAnimation({
         activeTab,
         childrenArray,
         overflowTabs,
-        tabsContainerRef,
+        tabsContainerRef: containerRef,
         visibleTabs,
     });
-    return (react_1.default.createElement(exports.TabListContainer, { role: "tablist", ref: tabsContainerRef },
+    const hasOverflow = overflowTabs.length > 0;
+    const isMoreActive = hasOverflow &&
+        overflowTabs.some((i) => childrenArray[i] && activeTab === childrenArray[i].props.label);
+    // Show as selector when no visible tabs (all tabs in dropdown)
+    const showAsSelector = visibleTabs.length === 0 && hasOverflow;
+    const { dropdownPosition, setIsDropdownOpen, setDropdownPosition } = useDropdownPosition(hasOverflow, dropdownRef);
+    return (react_1.default.createElement(exports.TabListContainer, { role: "tablist", ref: containerRef },
         react_1.default.createElement(HighlightBar, { size: size, style: highlightStyle },
             react_1.default.createElement("div", null)),
         childrenArray.map((child, index) => {
-            if (!visibleTabs.includes(index))
+            // Show all tabs before ready (for measurement), then only visible ones
+            const shouldRender = !isReady || visibleTabs.includes(index);
+            if (!shouldRender)
                 return null;
-            const { label, icon } = child.props;
-            const tabId = (0, utils_1.getTabId)(label, index);
-            return (react_1.default.createElement(Tab_1.Tab, { key: `key-${tabId}`, tabId: tabId, label: label, icon: icon, size: size, disabled: child.props.disable, setRef: (el) => setTabRef(el, index), onKeyDown: (event) => handleKeyboard(event, index), onClick: () => {
-                    var _a, _b;
-                    (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-                    onTabClick(label);
-                } }));
+            return renderTab(child, index, size, setTabRef, handleKeyboard, onTabClick);
         }),
-        react_1.default.createElement(exports.TabItem, { size: size, active: overflowTabs.some((index) => activeTab === childrenArray[index].props.label), tabIndex: 0 }, overflowTabs.length > 0 && (react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(exports.TabButtonLink, { size: size, className: overflowTabs.some((index) => activeTab === childrenArray[index].props.label)
-                    ? 'active'
-                    : undefined }, allTabsHidden ? activeTab : 'More'), alignment: "start", withArrow: true },
-            react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, overflowTabs.map((index) => {
-                const { label } = childrenArray[index].props;
-                const tabId = (0, utils_1.getTabId)(label, index);
-                return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `more-${tabId}`, active: activeTab === label, onAction: () => {
-                        var _a, _b;
-                        (_b = (_a = childrenArray[index].props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-                        onTabClick(index);
-                    }, disabled: childrenArray[index].props.disable }, label));
-            })))))));
+        hasOverflow && (react_1.default.createElement(exports.TabItem, { size: size, active: isMoreActive || showAsSelector, tabIndex: 0, className: "dropdown-tab" },
+            react_1.default.createElement(DropdownWrapper, { "$top": dropdownPosition.top, "$left": dropdownPosition.left, onClickCapture: () => {
+                    setIsDropdownOpen(true);
+                } },
+                react_1.default.createElement(FixedPositionDropdown, { ref: dropdownRef, trigger: react_1.default.createElement(exports.TabButtonLink, { size: size, className: isMoreActive || showAsSelector ? 'active' : undefined }, showAsSelector ? react_1.default.createElement(TabButtonText, null, activeTab) : 'More'), alignment: "start", withArrow: true, onClose: () => {
+                        setIsDropdownOpen(false);
+                        setDropdownPosition({});
+                    } },
+                    react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, overflowTabs.map((index) => {
+                        const child = childrenArray[index];
+                        if (!child)
+                            return null;
+                        const { label } = child.props;
+                        const tabId = (0, utils_1.getTabId)(label, index);
+                        return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `more-${tabId}`, active: activeTab === label, onAction: () => {
+                                var _a, _b;
+                                (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                onTabClick(index);
+                            }, disabled: child.props.disable }, label));
+                    }))))))));
 }
 const useHighlightBarAnimation = (props) => {
     const { childrenArray, activeTab, tabsContainerRef, visibleTabs, overflowTabs } = props;
@@ -89,18 +196,11 @@ const useHighlightBarAnimation = (props) => {
             setHighlightStyle({ left: 0, width: 0 });
             return;
         }
-        const activeTabElement = container.querySelector(`[data-label="${activeTab}"]`);
-        if (!activeTabElement)
-            return;
+        // Remove active class from all tabs first
         container.querySelectorAll('[data-label]').forEach((el) => {
             el.classList.remove('active');
         });
-        const { offsetLeft, offsetWidth } = activeTabElement;
-        if (visibleTabs.includes(activeIndex)) {
-            activeTabElement.classList.add('active');
-            setHighlightStyle({ left: offsetLeft, width: offsetWidth });
-            return;
-        }
+        // Check if active tab is in overflow first
         if (overflowTabs.includes(activeIndex)) {
             const moreButton = container.querySelector('button');
             if (!moreButton)
@@ -113,6 +213,16 @@ const useHighlightBarAnimation = (props) => {
             });
             return;
         }
+        // Active tab is visible, find its element
+        const activeTabElement = container.querySelector(`[data-label="${activeTab}"]`);
+        if (!activeTabElement)
+            return;
+        const { offsetLeft, offsetWidth } = activeTabElement;
+        if (visibleTabs.includes(activeIndex)) {
+            activeTabElement.classList.add('active');
+            setHighlightStyle({ left: offsetLeft, width: offsetWidth });
+            return;
+        }
     }, [activeTab, childrenArray, visibleTabs, overflowTabs, tabsContainerRef]);
     return { highlightStyle };
 };
@@ -122,15 +232,11 @@ exports.TabListContainer = styled_components_1.default.ul `
   gap: var(--md-tabs-gap);
   width: 100%;
   min-width: 0;
-  position: relative;
 
   &::before {
     content: '';
     position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
+    inset: 0;
     border: var(--md-tabs-border);
     border-width: var(--md-tabs-border-width);
     pointer-events: none;
@@ -138,11 +244,17 @@ exports.TabListContainer = styled_components_1.default.ul `
 
   && {
     padding: var(--md-tabs-padding);
-    margin-block-end: 0;
     margin: 0;
 
     & > li {
-      margin-bottom: 0px;
+      margin-bottom: 0;
+      flex-shrink: 0;
+
+      &.dropdown-tab {
+        flex-shrink: 1;
+        min-width: 0;
+        max-width: 100%;
+      }
     }
   }
 `;
@@ -152,7 +264,7 @@ exports.TabItem = styled_components_1.default.li `
   cursor: pointer;
   align-items: center;
   padding: var(--md-tabs-tab-wrapper-padding);
-  z-index: 1;
+  z-index: var(--z-index-surface);
 
   ${({ active, size }) => active
     ? (0, styled_components_1.css) `
@@ -189,6 +301,46 @@ exports.TabItem = styled_components_1.default.li `
     }
   }
 `;
+const DropdownWrapper = styled_components_1.default.div.attrs((props) => ({
+    style: Object.assign(Object.assign({}, (props.$top !== undefined && { '--dropdown-top': `${props.$top}px` })), (props.$left !== undefined && { '--dropdown-left': `${props.$left}px` })),
+})) `
+  position: static;
+  z-index: var(--z-index-raised);
+  width: 100%;
+  min-width: 0;
+`;
+const FixedPositionDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
+  position: static;
+  width: 100%;
+  min-width: 0;
+
+  > div:first-child {
+    width: 100%;
+    min-width: 0;
+  }
+
+  > div:last-child {
+    position: fixed;
+    top: var(--dropdown-top, 0);
+    left: var(--dropdown-left, 0);
+    right: auto;
+    bottom: auto;
+    transform: none;
+    padding-top: 0;
+    max-width: min(400px, calc(100vw - 32px));
+    max-height: calc(100vh - var(--dropdown-top, 0) - 32px);
+    overflow-y: auto;
+    z-index: var(--z-index-raised);
+
+    ul {
+      li {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+`;
 const HighlightBar = styled_components_1.default.div `
   position: absolute;
   top: 0;
@@ -208,11 +360,19 @@ const HighlightBar = styled_components_1.default.div `
     border-radius: var(--md-tabs-${({ size }) => size}-active-tab-border-radius);
   }
 `;
+const TabButtonText = styled_components_1.default.span `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+`;
 exports.TabButtonLink = (0, styled_components_1.default)(Button_1.Button) `
   color: var(--md-tabs-tab-text-color);
   font-family: var(--md-tabs-tab-font-family);
   font-style: var(--md-tabs-tab-font-style);
   background-color: var(--md-tabs-tab-bg-color);
+  width: 100%;
 
   transition:
     background-color 300ms ease-in-out,
@@ -231,9 +391,9 @@ exports.TabButtonLink = (0, styled_components_1.default)(Button_1.Button) `
 
   &.active {
     color: var(--md-tabs-active-tab-text-color);
-    font-size: var(--md-tabs-${({ size }) => size}-active-tab-font-size);
     font-family: var(--md-tabs-active-tab-font-family);
     font-style: var(--md-tabs-active-tab-font-style);
+    font-size: var(--md-tabs-${({ size }) => size}-active-tab-font-size);
     font-weight: var(--md-tabs-${({ size }) => size}-active-tab-font-weight);
     line-height: var(--md-tabs-${({ size }) => size}-active-tab-line-height);
     background-color: var(--md-tabs-active-tab-bg-color);
@@ -243,12 +403,12 @@ exports.TabButtonLink = (0, styled_components_1.default)(Button_1.Button) `
 
   &:hover {
     color: var(--md-tabs-hover-tab-text-color);
-    font-size: var(--md-tabs-${({ size }) => size}-hover-tab-font-size);
     font-family: var(--md-tabs-hover-tab-font-family);
     font-style: var(--md-tabs-hover-tab-font-style);
+    font-size: var(--md-tabs-${({ size }) => size}-hover-tab-font-size);
     font-weight: var(--md-tabs-${({ size }) => size}-hover-tab-font-weight);
-    background-color: var(--md-tabs-hover-tab-bg-color);
     line-height: var(--md-tabs-${({ size }) => size}-hover-tab-line-height);
+    background-color: var(--md-tabs-hover-tab-bg-color);
     border-radius: var(--md-tabs-${({ size }) => size}-hover-tab-border-radius);
     padding: var(--md-tabs-${({ size }) => size}-hover-tab-padding);
   }

package/lib/markdoc/components/Tabs/Tabs.d.ts

@@ -17,7 +17,8 @@ type TabsProps = {
     className?: string;
     size: TabsSize;
     initialTab?: string;
+    forceReady?: boolean;
 };
-export declare function Tabs({ id, children, className, size, initialTab: propInitialTab, }: TabsProps): JSX.Element;
+export declare function Tabs({ id, children, className, size, initialTab: propInitialTab, forceReady, }: TabsProps): JSX.Element;
 export declare const TabContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};