@redocly/theme 0.59.0-rc.3 → 0.60.0-custom.2

package/lib/icons/ThumbUpFilledIcon/ThumbUpFilledIcon.js

@@ -0,0 +1,34 @@
+"use strict";
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThumbUpFilledIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => {
+    const { color } = props, restProps = __rest(props, ["color"]);
+    return (react_1.default.createElement("svg", Object.assign({ width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, restProps),
+        react_1.default.createElement("path", { d: "M3.0625 7H0.875V13.125H3.0625V7Z", fill: (0, utils_1.getCssColorVariable)(color) || '#DCDDE5' }),
+        react_1.default.createElement("path", { d: "M10.0625 13.125H3.9375V6.64882L5.26846 4.65229L5.63828 2.06382C5.66886 1.85567 5.77308 1.66539 5.932 1.52753C6.09092 1.38967 6.29402 1.31338 6.5044 1.3125H6.5625C6.91048 1.31288 7.2441 1.45129 7.49016 1.69734C7.73621 1.9434 7.87462 2.27702 7.875 2.625V5.25H11.375C11.839 5.25052 12.2838 5.43506 12.6119 5.76314C12.9399 6.09121 13.1245 6.53603 13.125 7V10.0625C13.1241 10.8744 12.8012 11.6529 12.227 12.227C11.6529 12.8012 10.8744 13.1241 10.0625 13.125Z", fill: (0, utils_1.getCssColorVariable)(color) || '#DCDDE5' })));
+};
+exports.ThumbUpFilledIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/ThumbUpFilledIcon/ThumbUpFilledIcon',
+})) `
+  height: ${({ size }) => size || '14px'};
+  width: ${({ size }) => size || '14px'};
+  color: ${({ color }) => color && (0, utils_1.getCssColorVariable)(color)};
+`;
+//# sourceMappingURL=ThumbUpFilledIcon.js.map

package/lib/icons/VSCodeIcon/VSCodeIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const VSCodeIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/VSCodeIcon/VSCodeIcon.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VSCodeIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 100 100", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { clipRule: "evenodd", d: "m70.9119 99.3171c1.575.6136 3.3709.5743 4.9606-.1907l20.5883-9.9067c2.1634-1.041 3.5392-3.2305 3.5392-5.6325v-67.1739c0-2.402-1.3757-4.5915-3.5391-5.6325l-20.5884-9.907044c-2.0863-1.003885-4.5279-.757996-6.359.573194-.2615.19016-.5107.40248-.7445.63646l-39.4139 35.95809-17.1679-13.0319c-1.5982-1.2131-3.83357-1.1137-5.31787.2365l-5.5063 5.0088c-1.815582 1.6515-1.817663 4.5078-.0045 6.1621l14.88857 13.5831-14.88857 13.5831c-1.813163 1.6542-1.811082 4.5106.0045 6.1621l5.5063 5.0088c1.4843 1.3502 3.71967 1.4496 5.31787.2364l17.1679-13.0318 39.4139 35.958c.6235.6239 1.3556 1.0937 2.1429 1.4004zm4.1033-72.0182-29.9061 22.7012 29.9061 22.7011z", fill: "currentColor", fillRule: "evenodd" })));
+exports.VSCodeIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/VSCodeIcon/VSCodeIcon',
+})) `
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=VSCodeIcon.js.map

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 export * from './core';
-export * from './config';
+export type * from './config';
 export * from './ext/configure';
 export * from './components/Button/Button';
 export * from './components/Button/ButtonGroup';
@@ -31,8 +31,8 @@ export * from './components/Buttons/EmailButton';
 export * from './components/Buttons/NewTabButton';
 export * from './components/Buttons/AIAssistantButton';
 export * from './components/Markdown/Markdown';
-export * from './components/Markdown/styles/baseTable';
-export * from './components/Markdown/styles/headingAnchor';
+export * from './components/Markdown/styles/base-table';
+export * from './components/Markdown/styles/heading-anchor';
 export * from './components/Markdown/styles/links';
 export * from './components/Admonition/Admonition';
 export * from './components/ApiOnboarding/AppCustomAttributes';
@@ -264,6 +264,7 @@ export * from './icons/RedoclyIcon/RedoclyIcon';
 export * from './icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon';
 export * from './icons/GenericIcon/GenericIcon';
 export * from './icons/ShareIcon/ShareIcon';
+export * from './icons/HashtagIcon/HashtagIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';

package/lib/index.js

@@ -38,7 +38,6 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.markdoc = void 0;
 __exportStar(require("./core"), exports);
-__exportStar(require("./config"), exports);
 __exportStar(require("./ext/configure"), exports);
 /* Components */
 __exportStar(require("./components/Button/Button"), exports);
@@ -73,8 +72,8 @@ __exportStar(require("./components/Buttons/NewTabButton"), exports);
 __exportStar(require("./components/Buttons/AIAssistantButton"), exports);
 /* Markdown */
 __exportStar(require("./components/Markdown/Markdown"), exports);
-__exportStar(require("./components/Markdown/styles/baseTable"), exports);
-__exportStar(require("./components/Markdown/styles/headingAnchor"), exports);
+__exportStar(require("./components/Markdown/styles/base-table"), exports);
+__exportStar(require("./components/Markdown/styles/heading-anchor"), exports);
 __exportStar(require("./components/Markdown/styles/links"), exports);
 /* Admonition */
 __exportStar(require("./components/Admonition/Admonition"), exports);
@@ -327,6 +326,7 @@ __exportStar(require("./icons/RedoclyIcon/RedoclyIcon"), exports);
 __exportStar(require("./icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon"), exports);
 __exportStar(require("./icons/GenericIcon/GenericIcon"), exports);
 __exportStar(require("./icons/ShareIcon/ShareIcon"), exports);
+__exportStar(require("./icons/HashtagIcon/HashtagIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);

package/lib/layouts/ThreePanelLayout.js

@@ -51,7 +51,7 @@ exports.ThreePanelLayout = ThreePanelLayout;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const config_1 = require("@redocly/config");
-const media_css_1 = require("../core/utils/media-css");
+const utils_1 = require("../core/utils");
 function ThreePanelLayout(_a) {
     var { children } = _a, props = __rest(_a, ["children"]);
     return (react_1.default.createElement(Wrapper, Object.assign({ "data-component-name": "Layout/ThreePanelLayout" }, props), children));
@@ -68,15 +68,15 @@ const Wrapper = styled_components_1.default.div `
     return (0, styled_components_1.css) `
       max-width: ${layout === config_1.LayoutVariant.THREE_PANEL ? '100%' : ''};
 
-      @media screen and (min-width: ${media_css_1.breakpoints.small}) {
+      @media screen and (min-width: ${utils_1.breakpoints.small}) {
         max-width: var(--layout-${layout}-small-max-width);
       }
 
-      @media screen and (min-width: ${media_css_1.breakpoints.medium}) {
+      @media screen and (min-width: ${utils_1.breakpoints.medium}) {
         max-width: var(--layout-${layout}-medium-max-width);
       }
 
-      @media screen and (min-width: ${media_css_1.breakpoints.large}) {
+      @media screen and (min-width: ${utils_1.breakpoints.large}) {
         max-width: var(--layout-${layout}-large-max-width);
       }
 

package/lib/markdoc/components/Cards/Card.js

@@ -43,6 +43,7 @@ const ContentWrapper = styled_components_1.default.div `
   flex-direction: column;
   flex-shrink: 1;
   gap: var(--card-content-gap);
+  width: 100%;
 `;
 const Title = styled_components_1.default.h3 `
   margin: var(--card-title-margin);
@@ -82,28 +83,6 @@ const Body = styled_components_1.default.div `
   > *:last-child {
     margin-bottom: 0;
   }
-
-  /* Icon link styles */
-  & a {
-    display: inline-flex;
-    align-items: center;
-    line-height: 1;
-
-    & svg {
-      width: 1.2em;
-      height: 1.2em;
-      margin-right: 0.25em;
-      vertical-align: middle;
-
-      & g {
-        fill: var(--link-color-primary);
-      }
-    }
-  }
-
-  & a:visited > span > svg > g {
-    fill: var(--link-color-visited);
-  }
 `;
 const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $variant }) => ({
     className: getCardWrapperClass($isCardLink, $variant),
@@ -149,12 +128,6 @@ const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $varia
       }
     }
   }
-
-  && ul {
-    list-style: none;
-    padding-left: 0;
-    margin: var(--spacing-xs) 0;
-  }
 `;
 const getCardWrapperClass = ($isCardLink, $variant) => {
     let classes = [];

package/lib/markdoc/components/Cards/variables.dark.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cardsDarkMode = void 0;
 const styled_components_1 = require("styled-components");
+/* eslint-disable theme/no-raw-colors-in-styles */
 exports.cardsDarkMode = (0, styled_components_1.css) `
   --card-icon-border-color: var(--color-warm-grey-4);
   --card-icon-bg-color: var(--color-warm-grey-3);
@@ -24,4 +25,5 @@ exports.cardsDarkMode = (0, styled_components_1.css) `
     --card-box-shadow-hover: 0px 14px 64px -4px #0000001F, 0px 8px 22px -6px #0000001F;
   }
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */
 //# sourceMappingURL=variables.dark.js.map

package/lib/markdoc/components/Cards/variables.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cards = void 0;
 const styled_components_1 = require("styled-components");
+/* eslint-disable theme/no-raw-colors-in-styles */
 exports.cards = (0, styled_components_1.css) `
   --cards-gap: var(--spacing-sm);
 
@@ -68,4 +69,5 @@ exports.cards = (0, styled_components_1.css) `
   }
 
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */ 
 //# sourceMappingURL=variables.js.map

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

@@ -162,6 +162,7 @@ const Tab = styled_components_1.default.button `
           }
         `}
 `;
+// eslint-disable-next-line no-warning-comments
 // code-walk-todo: figure it our why we could not do it differently
 const StyledDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
   --md-list-left-padding: var(--dropdown-menu-padding);

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

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import type { MCPOption } from '../../../core/types';
+export type ConnectMCPProps = {
+    placement?: 'top' | 'bottom';
+    alignment?: 'start' | 'end';
+    options?: MCPOption[];
+};
+export declare function ConnectMCP({ placement, alignment, options, }: ConnectMCPProps): JSX.Element | null;

package/lib/markdoc/components/ConnectMCP/ConnectMCP.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectMCP = ConnectMCP;
+const react_1 = __importDefault(require("react"));
+const ConnectMCPButton_1 = require("../../../components/Buttons/ConnectMCPButton");
+const hooks_1 = require("../../../core/hooks");
+function ConnectMCP({ placement = 'bottom', alignment = 'start', options, }) {
+    var _a, _b, _c;
+    const themeConfig = (0, hooks_1.useThemeConfig)();
+    const isMcpDisabled = ((_a = themeConfig.mcp) === null || _a === void 0 ? void 0 : _a.hide) || ((_c = (_b = themeConfig.mcp) === null || _b === void 0 ? void 0 : _b.docs) === null || _c === void 0 ? void 0 : _c.hide);
+    if (isMcpDisabled) {
+        return null;
+    }
+    return react_1.default.createElement(ConnectMCPButton_1.ConnectMCPButton, { placement: placement, alignment: alignment, options: options });
+}
+//# sourceMappingURL=ConnectMCP.js.map

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

@@ -44,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;
@@ -99,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)
@@ -123,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 };
 };
@@ -132,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;
@@ -148,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%;
+      }
     }
   }
 `;
@@ -162,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) `
@@ -199,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;
@@ -218,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,
@@ -241,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);
@@ -253,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 {};