@redocly/theme 0.69.0-next.1 → 0.69.0-next.11

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

@@ -7,10 +7,12 @@ exports.Card = Card;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const ChevronRightIcon_1 = require("../../../icons/ChevronRightIcon/ChevronRightIcon");
+const ArrowUpRightIcon_1 = require("../../../icons/ArrowUpRightIcon/ArrowUpRightIcon");
 const CardImage_1 = require("../../../markdoc/components/Cards/CardImage");
 const CardIcon_1 = require("../../../markdoc/components/Cards/CardIcon");
+const CardBadge_1 = require("../../../markdoc/components/Cards/CardBadge");
 const Link_1 = require("../../../components/Link/Link");
-function Card({ title = '', image, icon, iconRawContent, imagePosition = 'start', iconPosition = 'auto', layout = 'vertical', variant = 'filled', lineClamp, iconVariant = 'filled', align = 'start', to, children, }) {
+function Card({ title = '', image, icon, iconRawContent, imagePosition = 'start', iconPosition = 'auto', layout = 'vertical', variant = 'filled', lineClamp, iconVariant = 'filled', iconColor, align = 'start', to, cta, linkIcon, badge, badgeColor, badgeIcon, badgeIconRawContent, children, }) {
     const titleNoSpaces = title === null || title === void 0 ? void 0 : title.replace(/\s+/g, '-').toLowerCase();
     const cardTitleId = `card-title-${titleNoSpaces}`;
     const justifyContent = align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
@@ -20,12 +22,20 @@ function Card({ title = '', image, icon, iconRawContent, imagePosition = 'start'
         react_1.default.createElement(react_1.default.Fragment, null,
             image ? react_1.default.createElement(CardImage_1.CardImage, { src: image, alt: title, position: imagePosition }) : null,
             react_1.default.createElement(CardContentWrapper, { $layout: layout, $alignItems: alignItems, $textAlign: textAlign, $hasImage: image !== undefined },
-                icon && (react_1.default.createElement(CardIcon_1.CardIcon, { variant: iconVariant, src: icon, rawContent: iconRawContent, position: iconPosition })),
+                icon && (react_1.default.createElement(CardIcon_1.CardIcon, { variant: iconVariant, src: icon, rawContent: iconRawContent, position: iconPosition, color: iconColor })),
                 react_1.default.createElement(ContentWrapper, null,
-                    react_1.default.createElement(Title, { id: cardTitleId, $isCardLink: !!to, $justifyContent: justifyContent },
-                        title,
-                        variant == 'ghost' && !!to && react_1.default.createElement(CardLinkIcon, null)),
-                    react_1.default.createElement(Body, { $lineClamp: lineClamp }, children))))));
+                    react_1.default.createElement(TitleWrapper, { id: cardTitleId, $isCardLink: !!to, $justifyContent: justifyContent },
+                        react_1.default.createElement(Title, null,
+                            title,
+                            !!to && !!linkIcon && (react_1.default.createElement(CardLinkIcon, { as: linkIcon === 'arrow' ? ArrowUpRightIcon_1.ArrowUpRightIcon : undefined }))),
+                        !!badge && (react_1.default.createElement(CardBadge_1.CardBadge, { color: badgeColor, icon: badgeIcon, iconRawContent: badgeIconRawContent }, badge))),
+                    react_1.default.createElement(Body, { $lineClamp: lineClamp }, children),
+                    !!to && !!cta && (react_1.default.createElement(Cta, { $justifyContent: justifyContent },
+                        react_1.default.createElement(CtaText, null,
+                            " ",
+                            cta,
+                            " "),
+                        react_1.default.createElement(CtaIcon, null))))))));
 }
 const CardContentWrapper = styled_components_1.default.div `
   display: flex;
@@ -44,24 +54,26 @@ const ContentWrapper = styled_components_1.default.div `
   gap: var(--card-content-gap);
   width: 100%;
 `;
-const Title = styled_components_1.default.h3 `
-  margin: var(--card-title-margin);
-  font-weight: var(--card-title-font-weight);
+const TitleWrapper = styled_components_1.default.div `
   color: var(--card-title-text-color);
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
+  row-gap: var(--card-title-row-gap);
   justify-content: ${({ $justifyContent }) => $justifyContent};
   width: 100%;
 `;
+const Title = styled_components_1.default.h3 `
+  margin: var(--card-title-margin);
+  font-weight: var(--card-title-font-weight);
+`;
+// The `as` prop selects the icon; the chevron is the default target.
 const CardLinkIcon = (0, styled_components_1.default)(ChevronRightIcon_1.ChevronRightIcon) `
   width: var(--card-link-icon-width);
   height: var(--card-link-icon-height);
-  color: var(--card-link-icon-color);
+  color: var(--icon-color-secondary);
   margin-left: var(--spacing-xxs);
-  opacity: 0;
-  transition:
-    opacity 0.3s,
-    transform 0.3s;
+  margin-top: calc(var(--spacing-xxs) / 2);
 `;
 const Body = styled_components_1.default.div `
   color: var(--card-text-color);
@@ -84,6 +96,26 @@ const Body = styled_components_1.default.div `
     margin-bottom: 0;
   }
 `;
+const Cta = styled_components_1.default.div `
+  display: flex;
+  gap: var(--card-cta-gap);
+  align-items: center;
+  margin-top: var(--card-cta-margin-top);
+  color: var(--card-cta-text-color);
+  font-size: var(--card-cta-font-size);
+  justify-content: ${({ $justifyContent }) => $justifyContent};
+    
+  && > * {
+    cursor: pointer;
+  }  
+`;
+const CtaText = styled_components_1.default.span `
+  font-weight: var(--card-cta-font-weight);
+`;
+const CtaIcon = (0, styled_components_1.default)(ChevronRightIcon_1.ChevronRightIcon) `
+  width: var(--card-cta-icon-width);
+  height: var(--card-cta-icon-height);
+`;
 const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $variant }) => ({
     className: getCardWrapperClass($isCardLink, $variant),
 })) `
@@ -112,6 +144,13 @@ const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $varia
       height: 100%;
       object-fit: cover;
     `}
+  } 
+    
+  &:hover,
+  &:focus-within {
+    ${Cta} {
+      color: var(--card-link-icon-color);
+    }
   }
 
   &.card-link {
@@ -130,8 +169,8 @@ const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $varia
         background-color: var(--card-icon-bg-color-hover);
       }
 
-      svg {
-        opacity: 1;
+      ${CardLinkIcon} {
+        color: var(--card-link-icon-color);
       }
     }
   }

package/lib/markdoc/components/Cards/CardBadge.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type CardBadgeProps = React.PropsWithChildren<{
+    color?: string;
+    icon?: string;
+    /** Inline SVG content for the icon */
+    iconRawContent?: string;
+    className?: string;
+}>;
+export declare function CardBadge({ color, icon, iconRawContent, className, children }: CardBadgeProps): React.JSX.Element;

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

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardBadge = CardBadge;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Badge_1 = require("../../../components/Badge/Badge");
+function CardBadge({ color, icon, iconRawContent, className, children }) {
+    // `tag-default` keeps a badge grey when the name is absent or unknown.
+    const classNames = ['tag-default', color && `tag-${color}`, className].filter(Boolean).join(' ');
+    return (react_1.default.createElement(CardBadgeWrapper, { className: classNames, icon: icon, iconRawContent: iconRawContent }, children));
+}
+const CardBadgeWrapper = (0, styled_components_1.default)(Badge_1.Badge) `
+  display: flex;
+  align-items: center;
+  margin: var(--card-badge-margin);
+  padding: var(--card-badge-padding);
+  border-radius: var(--card-badge-border-radius);
+  font-size: var(--card-badge-font-size);
+  font-weight: var(--card-badge-font-weight);
+  line-height: var(--card-badge-line-height);
+  white-space: nowrap;
+  flex-shrink: 0;
+
+  --badge-text-color: var(--tag-color);
+  --badge-bg-color: var(--tag-bg-color);
+`;
+//# sourceMappingURL=CardBadge.js.map

package/lib/markdoc/components/Cards/CardIcon.d.ts

@@ -1,15 +1,16 @@
 import React from 'react';
 export type CardIconProps = {
-    variant?: string;
+    variant?: 'filled' | 'ghost';
     src: string;
     rawContent?: string;
     position?: 'auto' | 'start' | 'center' | 'end';
+    color?: string;
 };
-export declare function CardIcon({ variant, src, rawContent, position }: CardIconProps): React.JSX.Element;
+export declare function CardIcon({ variant, src, rawContent, position, color }: CardIconProps): React.JSX.Element;
 export declare const CardIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$position" | "$variant"> & {
-    $variant?: string;
+    $variant?: 'filled' | 'ghost';
     $position?: string;
 }, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$position" | "$variant"> & {
-    $variant?: string;
+    $variant?: 'filled' | 'ghost';
     $position?: string;
 }, never>>> & string;

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

@@ -8,14 +8,17 @@ exports.CardIcon = CardIcon;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const GenericIcon_1 = require("../../../icons/GenericIcon/GenericIcon");
-function CardIcon({ variant, src, rawContent, position }) {
-    return (react_1.default.createElement(exports.CardIconWrapper, { $variant: variant, $position: position },
+function CardIcon({ variant, src, rawContent, position, color }) {
+    return (react_1.default.createElement(exports.CardIconWrapper, { className: color && `card-icon-color-${color}`, $variant: variant, $position: position },
         react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: src, rawContent: rawContent })));
 }
 exports.CardIconWrapper = styled_components_1.default.div `
+  --card-icon-bg-color-hover: ${({ $variant }) => $variant === 'ghost' && 'transparent'};
   --icon-width: var(--card-icon-width);
   --icon-height: var(--card-icon-height);
   color: var(--card-icon-color);
+  /* An inline SVG fills from this. */
+  --icon-color: var(--card-icon-color);
 
   display: flex;
   align-self: ${({ $position }) => ($position ? $position : 'auto')};
@@ -24,7 +27,7 @@ exports.CardIconWrapper = styled_components_1.default.div `
   min-height: var(--card-icon-height);
   flex-shrink: 0;
 
-  padding: var(--card-icon-padding);
+  padding: ${({ $variant }) => ($variant === 'ghost' ? 0 : `var(--card-icon-padding)`)};
   border: ${({ $variant }) => $variant !== 'ghost' && `var(--card-icon-border)`};
   border-radius: var(--card-icon-border-radius);
   overflow: hidden;

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

@@ -23,6 +23,38 @@ exports.cardsDarkMode = (0, styled_components_1.css) `
     --card-box-shadow: 0px 8px 24px -4px #00000014, 0px 6px 12px -6px #0000001F;
     --card-box-shadow-hover: 0px 14px 64px -4px #0000001F, 0px 8px 22px -6px #0000001F;
   }
+
+  .card-icon-color-green {
+    --card-icon-color: var(--color-green-7);
+  }
+
+  .card-icon-color-grey {
+    --card-icon-color: var(--color-warm-grey-8);
+  }
+
+  .card-icon-color-turquoise {
+    --card-icon-color: var(--color-turquoise-6);
+  }
+
+  .card-icon-color-magenta {
+    --card-icon-color: var(--color-magenta-4);
+  }
+
+  .card-icon-color-carrot {
+    --card-icon-color: var(--color-carrot-6);
+  }
+
+  .card-icon-color-grass {
+    --card-icon-color: var(--color-grass-7);
+  }
+
+  .card-icon-color-persian-green {
+    --card-icon-color: var(--color-persian-green-7);
+  }
+
+  .card-icon-color-sky {
+    --card-icon-color: var(--color-sky-6);
+  }
 `;
 /* eslint-enable theme/no-raw-colors-in-styles */
 //# sourceMappingURL=variables.dark.js.map

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

@@ -23,24 +23,38 @@ exports.cards = (0, styled_components_1.css) `
   --card-border-radius: var(--border-radius-xl);
   --card-border-style: solid;
   --card-link-cursor: pointer;
-  --card-link-icon-width: var(--h3-font-size);
-  --card-link-icon-height: var(--h3-font-size);
+  --card-link-icon-width: 14px;
+  --card-link-icon-height: 14px;
   --card-border-width: 1px;
-  --card-image-border-radius: var(--border-radius-md);
+  --card-image-border-radius: var(--border-radius-xl);
   --card-image-aspect-ratio: 16 / 9;
-  --card-icon-border-radius: var(--border-radius-md);
+  --card-icon-border-radius: var(--border-radius-lg);
   --card-icon-border: var(--card-border-width) var(--border-style) var(--card-icon-border-color);
   --card-icon-padding: var(--spacing-sm);
   --card-icon-size: 24px;
   --card-icon-height: var(--card-icon-size);
   --card-icon-width: var(--card-icon-size);
   --card-icon-gap: var(--spacing-base);
-  --card-title-margin: 0;
+  --card-title-margin: 0 var(--spacing-xs) 0 0;
   --card-title-font-weight: var(--font-weight-semibold);
+  --card-title-row-gap: var(--spacing-xxs);
   --card-content-gap: 4px;
   --card-padding: 16px 20px;
   --card-body-font-size: var(--font-size-base);
   --card-body-line-height: var(--line-height-base);
+  --card-cta-margin-top: var(--spacing-base);
+  --card-cta-gap: var(--spacing-xxs);
+  --card-cta-font-size: var(--font-size-base);
+  --card-cta-font-weight: var(--font-weight-regular);  
+  --card-cta-text-color: var(--text-color-secondary);
+  --card-cta-icon-width: 14px;
+  --card-cta-icon-height: 14px;
+  --card-badge-margin: 0 var(--spacing-xxs) 0 0 ;
+  --card-badge-padding: 0 var(--spacing-xxs);
+  --card-badge-border-radius: var(--badge-border-radius);
+  --card-badge-font-size: var(--font-size-sm);
+  --card-badge-font-weight: var(--font-weight-regular);
+  --card-badge-line-height: var(--line-height-sm);
 
   /**
    * @tokens Card variants
@@ -76,7 +90,7 @@ exports.cards = (0, styled_components_1.css) `
     --card-bg-color: transparent;
     --card-bg-color-hover: var(--layer-color);
     --card-border-width: 0;
-    --card-border-radius: var(--border-radius-md);
+    --card-border-radius: var(--border-radius-xl);
     --card-padding: var(--spacing-xs) 0;
     --card-icon-border-color-hover: var(--card-icon-border-color);
     --card-icon-bg-color-hover: var(--card-icon-bg-color);
@@ -84,6 +98,66 @@ exports.cards = (0, styled_components_1.css) `
     --card-hover-transition: initial;
   }
 
+  /**
+   * @tokens Card icon colors
+   */
+  .card-icon-color-red {
+    --card-icon-color: var(--color-red-7);
+  }
+
+  .card-icon-color-green {
+    --card-icon-color: var(--color-green-8);
+  }
+
+  .card-icon-color-blue {
+    --card-icon-color: var(--color-blue-7);
+  }
+
+  .card-icon-color-grey {
+    --card-icon-color: var(--text-color-secondary);
+  }
+
+  .card-icon-color-turquoise {
+    --card-icon-color: var(--color-turquoise-8);
+  }
+
+  .card-icon-color-magenta {
+    --card-icon-color: var(--color-magenta-7);
+  }
+
+  .card-icon-color-purple {
+    --card-icon-color: var(--color-purple-7);
+  }
+
+  .card-icon-color-carrot {
+    --card-icon-color: var(--color-carrot-8);
+  }
+
+  .card-icon-color-raspberry {
+    --card-icon-color: var(--color-raspberry-7);
+  }
+
+  .card-icon-color-orange {
+    --card-icon-color: var(--color-orange-7);
+  }
+
+  .card-icon-color-grass {
+    --card-icon-color: var(--color-grass-8);
+  }
+
+  .card-icon-color-persian-green {
+    --card-icon-color: var(--color-persian-green-8);
+  }
+
+  .card-icon-color-sky {
+    --card-icon-color: var(--color-sky-8);
+  }
+
+  .card-icon-color-blueberry {
+    --card-icon-color: var(--color-blueberry-7);
+  }
+
+  // @tokens End
 `;
-/* eslint-enable theme/no-raw-colors-in-styles */ 
+/* eslint-enable theme/no-raw-colors-in-styles */
 //# sourceMappingURL=variables.js.map

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

@@ -67,6 +67,7 @@ const CodePanelWrapper = styled_components_1.default.div `
   background-color: var(--code-panel-bg-color);
   border: 1px solid var(--code-panel-border-color);
   border-radius: var(--code-panel-border-radius);
+  overflow: clip;
   --code-block-max-height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
   height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
   position: sticky;

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

@@ -113,7 +113,7 @@ const StepContent = styled_components_1.default.div.withConfig({
   margin: var(--spacing-xs) 0px var(--spacing-xs) calc(var(--spacing-unit) * 3.5);
   padding: var(--spacing-md) var(--spacing-lg);
   background: ${({ isActive }) => (isActive ? 'var(--layer-color)' : 'none')};
-  border-radius: var(--border-radius);
+  border-radius: var(--code-step-border-radius);
 
   &:hover {
     background-color: ${({ isActive }) => isActive ? 'var(--code-step-bg-active-hover)' : 'var(--code-step-bg-hover)'};

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

@@ -9,11 +9,12 @@ exports.codeWalkthrough = (0, styled_components_1.css) `
 --code-step-bg-active: var(--layer-color);
 --code-step-bg-hover: var(--color-hover-base);
 --code-step-bg-active-hover: var(--layer-color-hover);
+--code-step-border-radius: var(--border-radius-lg);
 
 --code-panel-bg-color: var(--layer-color);
 --code-panel-line-numbering-color: var(--text-color-disabled);
 --code-panel-header-height: var(--spacing-lg);
 --code-panel-border-color: var(--border-color-secondary);
---code-panel-border-radius: var(--border-radius);
+--code-panel-border-radius: var(--border-radius-xl);
 `;
 //# sourceMappingURL=variables.js.map

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

@@ -45,6 +45,7 @@ const utils_1 = require("../../../core/utils");
 const LinkIcon_1 = require("../../../icons/LinkIcon/LinkIcon");
 const PageActions_1 = require("../../../components/PageActions/PageActions");
 const hooks_1 = require("../../../core/hooks");
+const contexts_1 = require("../../../core/contexts");
 const constants_1 = require("../../../core/constants");
 function renderWithSpanWrapper(children) {
     const childrenArray = react_1.default.Children.toArray(children);
@@ -68,10 +69,12 @@ function renderWithSpanWrapper(children) {
 }
 function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, className, __idx, }) {
     var _a, _b;
+    var _c;
     const { pathname } = (0, react_router_1.useLocation)();
     const { usePageProps } = (0, hooks_1.useThemeHooks)();
     const pageProps = usePageProps();
-    const isMarkdownPage = ((_a = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _a === void 0 ? void 0 : _a.type) === 'markdown' || ((_b = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _b === void 0 ? void 0 : _b.type) === 'asciidoc';
+    // The page-type fallback is only for backward compatibility; templates set the scope.
+    const withPageActions = (_c = (0, react_1.useContext)(contexts_1.PageActionsContext)) !== null && _c !== void 0 ? _c : (((_a = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _a === void 0 ? void 0 : _a.type) === 'markdown' || ((_b = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _b === void 0 ? void 0 : _b.type) === 'asciidoc');
     const headingTextId = `${id}-heading-text`;
     const linkEl = (react_1.default.createElement("a", { "aria-labelledby": headingTextId, href: `#${id}`, className: (0, utils_1.concatClassNames)(constants_1.ANCHOR_CLASS, 'before') },
         react_1.default.createElement(LinkIcon_1.LinkIcon, { "aria-hidden": "true", focusable: "false", color: "--heading-anchor-color" })));
@@ -80,7 +83,7 @@ function Heading({ level, id, children, 'data-source': dataSource, 'data-hash':
         react_1.default.createElement(HeadingContentWrapper, null,
             linkEl,
             headingText,
-            isMarkdownPage && __idx === 0 ? react_1.default.createElement(PageActions_1.PageActions, { pageSlug: pathname }) : null)));
+            withPageActions && __idx === 0 ? react_1.default.createElement(PageActions_1.PageActions, { pageSlug: pathname }) : null)));
 }
 const HeadingContentWrapper = styled_components_1.default.div `
   display: flex;

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

@@ -137,6 +137,7 @@ function TabList({ childrenArray, size, activeTab, onTabChange, containerRef, on
         totalTabs,
     });
     (0, react_1.useEffect)(() => {
+        // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent
         onReadyChange === null || onReadyChange === void 0 ? void 0 : onReadyChange(isReady);
     }, [isReady, onReadyChange]);
     const { highlightStyle } = useHighlightBarAnimation({
@@ -190,6 +191,7 @@ const useHighlightBarAnimation = (props) => {
         width: 0,
     });
     (0, react_1.useEffect)(() => {
+        // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent
         const activeIndex = childrenArray.findIndex((child) => child.props.label === activeTab);
         const container = tabsContainerRef.current;
         if (!container || activeIndex === -1) {
@@ -207,6 +209,7 @@ const useHighlightBarAnimation = (props) => {
                 return;
             const moreButtonRect = moreButton.getBoundingClientRect();
             const containerRect = container.getBoundingClientRect();
+            // oxlint-disable-next-line react-you-might-not-need-an-effect/no-derived-state
             setHighlightStyle({
                 left: moreButtonRect.left - containerRect.left,
                 width: moreButtonRect.width,
@@ -220,6 +223,7 @@ const useHighlightBarAnimation = (props) => {
         const { offsetLeft, offsetWidth } = activeTabElement;
         if (visibleTabs.includes(activeIndex)) {
             activeTabElement.classList.add('active');
+            // oxlint-disable-next-line react-you-might-not-need-an-effect/no-derived-state
             setHighlightStyle({ left: offsetLeft, width: offsetWidth });
             return;
         }
@@ -297,8 +301,8 @@ exports.TabItem = styled_components_1.default.li.withConfig({
       right: -4px;
       bottom: -2px;
       left: -4px;
-      border: 1px solid var(--button-border-color-focused);
-      border-radius: 6px;
+      border: var(--border-width) var(--border-style) var(--button-border-color-focused);
+      border-radius: var(--border-radius-md);
       pointer-events: none;
     }
   }

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

@@ -87,7 +87,9 @@ function isTabItemFragment(node) {
  */
 function useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab) {
     (0, react_1.useEffect)(() => {
+        // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent
         const availableLabels = childrenArray.map((child) => child.props.label);
+        // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent
         if (activeTab && !availableLabels.includes(activeTab) && availableLabels.length > 0) {
             setActiveTab(initialTab);
         }
@@ -148,8 +150,8 @@ exports.TabContent = styled_components_1.default.div `
       right: -4px;
       bottom: -2px;
       left: -4px;
-      border: 1px solid var(--button-border-color-focused);
-      border-radius: 6px;
+      border: var(--border-width) var(--border-style) var(--button-border-color-focused);
+      border-radius: var(--border-radius-md);
       pointer-events: none;
     }
   }

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

@@ -52,7 +52,7 @@ exports.markdownTabs = (0, styled_components_1.css) `
   --md-tabs-small-tab-font-size: var(--font-size-base); // @presenter FontSize
   --md-tabs-small-tab-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --md-tabs-small-tab-line-height: var(--line-height-base); // @presenter LineHeight
-  --md-tabs-small-tab-border-radius: var(--border-radius); // @presenter BorderRadius
+  --md-tabs-small-tab-border-radius: var(--border-radius-md); // @presenter BorderRadius
 
   --md-tabs-active-tab-text-color: var(--color-primary-text, var(--md-tabs-active-tab-text-color-legacy)); // @presenter Color
   --md-tabs-active-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
@@ -65,14 +65,14 @@ exports.markdownTabs = (0, styled_components_1.css) `
   --md-tabs-medium-active-tab-line-height: var(--md-tabs-medium-tab-line-height); // @presenter LineHeight
   --md-tabs-medium-active-tab-padding: var(--md-tabs-medium-tab-padding); // @presenter Spacing
   --md-tabs-medium-active-tab-border-width: var(--md-tabs-medium-tab-border-width); // @presenter Spacing
-  --md-tabs-medium-active-tab-border-radius: 6px; // @presenter BorderRadius
+  --md-tabs-medium-active-tab-border-radius: var(--border-radius-lg); // @presenter BorderRadius
 
   --md-tabs-small-active-tab-font-size: var(--md-tabs-small-tab-font-size); // @presenter FontSize
   --md-tabs-small-active-tab-font-weight: var(--md-tabs-small-tab-font-weight); // @presenter FontWeight
   --md-tabs-small-active-tab-line-height: var(--md-tabs-small-tab-line-height); // @presenter LineHeight
   --md-tabs-small-active-tab-padding: var(--md-tabs-small-tab-padding); // @presenter Spacing
   --md-tabs-small-active-tab-border-width: var(--md-tabs-medium-tab-border-width); // @presenter Spacing
-  --md-tabs-small-active-tab-border-radius: var(--border-radius); // @presenter BorderRadius
+  --md-tabs-small-active-tab-border-radius: var(--border-radius-md); // @presenter BorderRadius
 
   --md-tabs-hover-tab-text-color: var(--md-tabs-tab-text-color); // @presenter Color
   --md-tabs-hover-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
@@ -92,7 +92,7 @@ exports.markdownTabs = (0, styled_components_1.css) `
   --md-tabs-small-hover-tab-line-height: var(--md-tabs-small-tab-line-height); // @presenter LineHeight
   --md-tabs-small-hover-tab-padding: var(--md-tabs-small-tab-padding); // @presenter Spacing
   --md-tabs-small-hover-tab-border-width: var(--md-tabs-medium-tab-border-width); // @presenter Spacing
-  --md-tabs-small-hover-tab-border-radius: var(--border-radius); // @presenter BorderRadius
+  --md-tabs-small-hover-tab-border-radius: var(--border-radius-md); // @presenter BorderRadius
 
   --md-tabs-tab-text-disabled-color: var(--text-color-disabled); // @presenter Color
 

package/lib/markdoc/tags/accordion-group.js

@@ -4,6 +4,9 @@ exports.accordionGroup = void 0;
 exports.accordionGroup = {
     schema: {
         render: 'AccordionGroup',
+        attributes: {
+            singleExpanded: { type: Boolean, default: false },
+        },
     },
     tagName: 'accordion-group',
 };

package/lib/markdoc/tags/admonition.js

@@ -8,7 +8,7 @@ exports.admonition = {
                 type: String,
                 required: true,
                 default: 'info',
-                matches: ['warning', 'info', 'danger', 'success', 'default'],
+                matches: ['warning', 'info', 'danger', 'success', 'idea'],
             },
             name: { type: String },
         },

package/lib/markdoc/tags/card.js

@@ -52,7 +52,21 @@ exports.card = {
                 type: String,
                 matches: ['filled', 'ghost'],
             },
+            iconColor: { type: String },
             to: { type: String, resolver: 'link' },
+            linkIcon: {
+                type: String,
+                matches: ['arrow', 'chevron'],
+            },
+            cta: { type: String },
+            badge: { type: String },
+            badgeColor: { type: String },
+            badgeIcon: { type: String, resolver: 'relativeOrCdnIcon' },
+            badgeIconRawContent: {
+                // internal use only
+                type: String,
+                render: true,
+            },
         },
     },
     tagName: 'card',

package/lib/markdoc/tags/connect-mcp.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.connectMcp = void 0;
+const constants_1 = require("../../core/constants");
 exports.connectMcp = {
     schema: {
         render: 'ConnectMCP',
@@ -17,7 +18,7 @@ exports.connectMcp = {
             },
             options: {
                 type: Array,
-                default: ['cursor', 'vscode', 'copy'],
+                default: constants_1.DEFAULT_MCP_OPTIONS,
             },
         },
         selfClosing: true,