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

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/components/default.d.ts

@@ -1,3 +1,5 @@
+export * from '../../markdoc/components/Accordion/Accordion';
+export * from '../../markdoc/components/Accordion/AccordionGroup';
 export * from '../../markdoc/components/Admonition/Admonition';
 export * from '../../markdoc/components/InlineSvg/InlineSvg';
 export * from '../../markdoc/components/MarkdocExample/MarkdocExample';

package/lib/markdoc/components/default.js

@@ -14,6 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../markdoc/components/Accordion/Accordion"), exports);
+__exportStar(require("../../markdoc/components/Accordion/AccordionGroup"), exports);
 __exportStar(require("../../markdoc/components/Admonition/Admonition"), exports);
 __exportStar(require("../../markdoc/components/InlineSvg/InlineSvg"), exports);
 __exportStar(require("../../markdoc/components/MarkdocExample/MarkdocExample"), exports);

package/lib/markdoc/default.d.ts

@@ -5,6 +5,8 @@ export * from '../markdoc/attributes/img-srcset';
 export * from '../markdoc/attributes/relative-path';
 export * from '../markdoc/attributes/svg-content';
 export * as components from '../markdoc/components/default';
+import { accordion } from '../markdoc/tags/accordion';
+import { accordionGroup } from '../markdoc/tags/accordion-group';
 import { admonition } from '../markdoc/tags/admonition';
 import { html } from '../markdoc/tags/html';
 import { markdocExample } from '../markdoc/tags/markdoc-example';
@@ -29,6 +31,8 @@ import { connectMcp } from '../markdoc/tags/connect-mcp';
 import { loginButton } from '../markdoc/tags/login-button';
 import { diagram } from '../markdoc/tags/diagram';
 export declare const tags: {
+    [accordion.tagName]: import("./tags/types").MarkdocTagSchema;
+    [accordionGroup.tagName]: import("./tags/types").MarkdocTagSchema;
     [admonition.tagName]: import("./tags/types").MarkdocTagSchema;
     [debug.tagName]: import("./tags/types").MarkdocTagSchema;
     [html.tagName]: import("./tags/types").MarkdocTagSchema;

package/lib/markdoc/default.js

@@ -47,6 +47,8 @@ __exportStar(require("../markdoc/attributes/svg-content"), exports);
 /* Components */
 exports.components = __importStar(require("../markdoc/components/default"));
 /* Tags */
+const accordion_1 = require("../markdoc/tags/accordion");
+const accordion_group_1 = require("../markdoc/tags/accordion-group");
 const admonition_1 = require("../markdoc/tags/admonition");
 const html_1 = require("../markdoc/tags/html");
 const markdoc_example_1 = require("../markdoc/tags/markdoc-example");
@@ -71,6 +73,8 @@ const connect_mcp_1 = require("../markdoc/tags/connect-mcp");
 const login_button_1 = require("../markdoc/tags/login-button");
 const diagram_1 = require("../markdoc/tags/diagram");
 exports.tags = {
+    [accordion_1.accordion.tagName]: accordion_1.accordion.schema,
+    [accordion_group_1.accordionGroup.tagName]: accordion_group_1.accordionGroup.schema,
     [admonition_1.admonition.tagName]: admonition_1.admonition.schema,
     [debug_1.debug.tagName]: debug_1.debug.schema,
     [html_1.html.tagName]: html_1.html.schema,

package/lib/markdoc/tags/accordion-group.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const accordionGroup: MarkdocSchemaWrapper;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.accordionGroup = void 0;
+exports.accordionGroup = {
+    schema: {
+        render: 'AccordionGroup',
+    },
+    tagName: 'accordion-group',
+};
+//# sourceMappingURL=accordion-group.js.map

package/lib/markdoc/tags/accordion.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const accordion: MarkdocSchemaWrapper;

package/lib/markdoc/tags/accordion.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.accordion = void 0;
+exports.accordion = {
+    schema: {
+        render: 'Accordion',
+        attributes: {
+            title: { type: String, required: true },
+            expanded: { type: Boolean, default: false },
+        },
+    },
+    tagName: 'accordion',
+};
+//# sourceMappingURL=accordion.js.map

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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.69.0-next.0",
+  "version": "0.69.0-next.10",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -42,6 +42,7 @@
   "devDependencies": {
     "@babel/core": "7.29.7",
     "@markdoc/markdoc": "0.5.2",
+    "@redocly/realm-asyncapi-sdk": "0.15.0-next.3",
     "@shikijs/types": "3.21.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
@@ -53,8 +54,8 @@
     "@types/nprogress": "0.2.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@vitest/coverage-v8": "4.1.10",
-    "@vitest/ui": "4.1.10",
+    "@vitest/coverage-v8": "4.1.11",
+    "@vitest/ui": "4.1.11",
     "concurrently": "7.6.0",
     "react-router": "^8.3.0",
     "resize-observer-polyfill": "1.5.1",
@@ -65,15 +66,15 @@
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "3.5.2",
     "typescript": "6.0.3",
-    "vitest": "4.1.10",
+    "vitest": "4.1.11",
     "vitest-when": "0.6.2",
-    "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.14.0"
+    "webpack": "5.105.2"
   },
   "dependencies": {
+    "@redocly/config": "0.56.0",
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
-    "@xyflow/react": "^12.8.2",
+    "@xyflow/react": "12.8.3",
     "copy-to-clipboard": "3.3.3",
     "file-saver": "2.0.5",
     "highlight-words-core": "1.2.2",
@@ -83,10 +84,18 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
     "nprogress": "0.2.0",
-    "openapi-sampler": "^1.7.2",
+    "openapi-sampler": "^1.7.5",
     "react-calendar": "5.1.0",
-    "react-date-picker": "11.0.0",
-    "@redocly/config": "0.53.1"
+    "react-date-picker": "11.0.0"
+  },
+  "nx": {
+    "targets": {
+      "vitest:test": {
+        "dependsOn": [
+          "build"
+        ]
+      }
+    }
   },
   "scripts": {
     "watch": "tsgo -p tsconfig.build.json && (concurrently \"tsgo -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import type { BaseSyntheticEvent, PropsWithChildren, ReactNode, JSX } from 'react';
@@ -32,6 +32,12 @@ export function Accordion({
 }: PropsWithChildren<AccordionProps>): JSX.Element {
   const [isExpanded, setExpanded] = useState(expanded);
   const [animate, setAnimate] = useState(false);
+  const [prevExpanded, setPrevExpanded] = useState(expanded);
+
+  if (prevExpanded !== expanded) {
+    setPrevExpanded(expanded);
+    setExpanded(expanded);
+  }
 
   const toggle = ({ target }: BaseSyntheticEvent): void => {
     if (target instanceof HTMLAnchorElement || !isExpandable) return;
@@ -40,8 +46,6 @@ export function Accordion({
     onToggle?.(!isExpanded);
   };
 
-  useEffect(() => setExpanded(expanded), [expanded]);
-
   return (
     <AccordionWrapper
       className={className}

package/src/components/Accordion/variables.ts

@@ -12,7 +12,7 @@ export const accordion = css`
   * @tokens Accordion common
   */
 
-  --accordion-border-radius: var(--border-radius); // @presenter BorderRadius
+  --accordion-border-radius: var(--border-radius-xl); // @presenter BorderRadius
   --accordion-border: none; // @presenter Border
 
   --accordion-line-height: var(--line-height-base); // @presenter LineHeight

package/src/components/Admonition/Admonition.tsx

@@ -10,7 +10,7 @@ import { InformationIcon } from '@redocly/theme/icons/InformationIcon/Informatio
 import { IdeaIcon } from '@redocly/theme/icons/IdeaIcon/IdeaIcon';
 
 type AdmonitionTypeProps = {
-  type: 'warning' | 'success' | 'danger' | 'info' | 'default';
+  type: 'warning' | 'success' | 'danger' | 'info' | 'idea';
 };
 
 export type AdmonitionProps = Partial<AdmonitionTypeProps> & {
@@ -25,7 +25,7 @@ const IconsMap: Record<AdmonitionTypeProps['type'], FC<{ color?: string }>> = {
   success: CheckmarkOutlineIcon,
   danger: ErrorIcon,
   info: InformationIcon,
-  default: IdeaIcon,
+  idea: IdeaIcon,
 };
 
 export function Admonition({

package/src/components/Admonition/variables.dark.ts

@@ -13,6 +13,6 @@ export const admonitionDarkMode = css`
   --admonition-success-bg-color: color-mix(in srgb, var(--color-green-1) 40%, transparent); // @presenter Color
   --admonition-success-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-green-3) 40%, transparent); // @presenter Border
 
-  --admonition-default-bg-color: color-mix(in srgb, var(--color-primary-bg, var(--admonition-default-bg-color-legacy)) 40%, transparent); // @presenter Color
-  --admonition-default-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-primary-border, var(--admonition-default-border-color-legacy)) 40%, transparent); // @presenter Border
+  --admonition-idea-bg-color: color-mix(in srgb, var(--color-primary-bg, var(--admonition-default-bg-color-legacy)) 40%, transparent); // @presenter Color
+  --admonition-idea-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-primary-border, var(--admonition-default-border-color-legacy)) 40%, transparent); // @presenter Border
 `;

package/src/components/Admonition/variables.ts

@@ -32,7 +32,7 @@ export const admonition = css`
   * @tokens Admonition border
   */
 
-  --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --admonition-border-radius: var(--border-radius-xl); // @presenter BorderRadius
   --admonition-border-style: var(--border-style);
   --admonition-border-width: 1px;
 
@@ -90,17 +90,17 @@ export const admonition = css`
   --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
 
   /**
-  * @tokens Admonition type primary
+  * @tokens Admonition type idea
   */
 
-  --admonition-default-bg-color: var(--color-primary-bg, var(--admonition-default-bg-color-legacy)); // @presenter Color
-  --admonition-default-text-color: var(--admonition-heading-text-color); // @presenter Color
-  --admonition-default-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
-  --admonition-default-icon-color: var(--color-primary-base, var(--admonition-default-icon-color-legacy)); // @presenter Color
-  --admonition-default-border-color: var(--color-primary-border, var(--admonition-default-border-color-legacy)); // @presenter Color
-  --admonition-default-border-style: var(--admonition-border-style); // @presenter Color
-  --admonition-default-border-width: var(--admonition-border-width); // @presenter Color
-  --admonition-default-border: var(--admonition-default-border-width) var(--admonition-default-border-style) var(--admonition-default-border-color); // @presenter Border
+  --admonition-idea-bg-color: var(--color-primary-bg, var(--admonition-default-bg-color-legacy)); // @presenter Color
+  --admonition-idea-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-idea-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-idea-icon-color: var(--color-primary-base, var(--admonition-default-icon-color-legacy)); // @presenter Color
+  --admonition-idea-border-color: var(--color-primary-border, var(--admonition-default-border-color-legacy)); // @presenter Color
+  --admonition-idea-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-idea-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-idea-border: var(--admonition-idea-border-width) var(--admonition-idea-border-style) var(--admonition-idea-border-color); // @presenter Border
   
   // @tokens End
 `;

package/src/components/Badge/Badge.tsx

@@ -11,9 +11,18 @@ export type BadgeProps = PropsWithChildren<{
   key?: string;
   className?: string;
   icon?: string;
+  /** Inline SVG content for the icon */
+  iconRawContent?: string;
 }>;
 
-export function Badge({ icon, children, deprecated, color, ...props }: BadgeProps): JSX.Element {
+export function Badge({
+  icon,
+  iconRawContent,
+  children,
+  deprecated,
+  color,
+  ...props
+}: BadgeProps): JSX.Element {
   return (
     <BadgeComponent
       {...props}
@@ -21,7 +30,7 @@ export function Badge({ icon, children, deprecated, color, ...props }: BadgeProp
       $deprecated={deprecated}
       data-component-name="Badge/Badge"
     >
-      {icon ? <BadgeIcon icon={icon} /> : null}
+      {icon || iconRawContent ? <BadgeIcon icon={icon} rawContent={iconRawContent} /> : null}
       {children}
     </BadgeComponent>
   );
@@ -54,4 +63,9 @@ const BadgeIcon = styled(GenericIcon)`
   margin-right: var(--spacing-xxs);
   flex-shrink: 0;
   vertical-align: middle;
+
+  /* For inline SVG to align properly */
+  svg {
+    display: block;
+  }
 `;

package/src/components/Banner/variables.dark.ts

@@ -6,5 +6,7 @@ export const bannerDarkMode = css`
   */
  
   --banner-warning-text-color: var(--color-white); // @presenter Color
+
+  // @tokens End
 `;
 

package/src/components/Banner/variables.ts

@@ -8,7 +8,7 @@ export const banner = css`
   --banner-button-size: 22px;
   --banner-button-padding: 3px; // @presenter Spacing
   --banner-button-font-size: var(--font-size-base);
-  --banner-button-border-radius: var(--border-radius);
+  --banner-button-border-radius: var(--border-radius-md);
   --banner-button-padding-inline: 1px var(--spacing-sm);
   --banner-button-line-height: var(--line-height-base); // @presenter LineHeight
   --banner-button-icon-size: 14px;
@@ -47,5 +47,7 @@ export const banner = css`
   --banner-error-link-color: var(--banner-error-text-color); // @presenter Color
   --banner-error-link-decoration: underline 1px var(--banner-error-link-color);
   --banner-error-link-decoration-hover: underline 2px var(--banner-error-link-color);
+
+  // @tokens End
 `;
 

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -61,7 +61,7 @@ const baseBreadcrumbStyles = `
   align-items: center;
   gap: var(--breadcrumbs-gap);
   padding: var(--breadcrumb-padding);
-  border-radius: var(--border-radius);
+  border-radius: var(--breadcrumbs-border-radius);
   color: var(--breadcrumbs-text-color);
   text-decoration: none;
 

package/src/components/Breadcrumbs/variables.ts

@@ -13,7 +13,7 @@ export const breadcrumbs = css`
   --breadcrumbs-icon-size: var(--font-size-base); // @presenter FontSize
   --breadcrumbs-font-weight-active: var(--font-weight-medium); // @presenter FontWeight
 
-  --breadcrumbs-border-radius: var(--border-radius); // @presenter BorderRadius
+  --breadcrumbs-border-radius: var(--border-radius-md); // @presenter BorderRadius
   --breadcrumbs-gap: var(--spacing-xxs); // @presenter Spacing
 
   --breadcrumbs-padding: 2px var(--spacing-xs); // @presenter Spacing

package/src/components/Button/ButtonGroup.tsx

@@ -2,13 +2,11 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
-import type { ButtonSize } from '@redocly/theme/components/Button/Button';
+import type { ButtonGroupSize, ButtonGroupVariant } from '@redocly/theme/core/types';
 
-type ButtonGroupVariant = 'outlined';
-
-type ButtonGroupProps = {
+export type ButtonGroupProps = {
   variant?: ButtonGroupVariant;
-  size?: ButtonSize;
+  size?: ButtonGroupSize;
   children: React.ReactNode;
   className?: string;
 };
@@ -30,24 +28,44 @@ const ButtonGroupWrapper = styled.div`
   display: flex;
   line-height: var(--button-line-height);
 
-  .button {
+  & > .button,
+  & > * > .button {
     border-radius: 0;
   }
 
   & > .button:first-child,
-  *:first-child > .button {
+  & > *:first-child > .button {
     border-top-left-radius: var(--button-border-radius);
     border-bottom-left-radius: var(--button-border-radius);
   }
 
   & > .button:last-child,
-  *:last-child > .button {
+  & > *:last-child > .button {
     border-top-right-radius: var(--button-border-radius);
     border-bottom-right-radius: var(--button-border-radius);
   }
 
+  /* Adjacent segments share a single divider line: the leading segment drops its
+     own right border and the trailing one draws the divider as its left border. */
+  & > .button:not(:last-child),
+  & > *:not(:last-child) > .button {
+    border-right-style: none;
+    border-right-width: 0;
+  }
+
   & > .button:not(:first-child),
-  *:not(:first-child) > .button {
-    border-left: none;
+  & > *:not(:first-child) > .button {
+    border-left-width: 1px;
+    border-left-style: solid;
+    border-left-color: color-mix(
+      in srgb,
+      var(--button-group-divider-color) calc(var(--button-group-divider-opacity) * 100%),
+      transparent
+    );
+  }
+
+  & > .button:not(:first-child):disabled,
+  & > *:not(:first-child) > .button:disabled {
+    border-left-color: var(--button-group-divider-color-disabled);
   }
 `;