@redocly/theme 0.68.1 → 0.69.0-next.1

package/lib/components/Markdown/Markdown.js

@@ -184,7 +184,7 @@ exports.Markdown = styled_components_1.default.main
     margin: var(--md-hr-margin-vertical) 0;
   }
 
-  details {
+  details:not(${constants_1.ACCORDION_SELECTOR}) {
     margin: 1.125em 0;
 
     summary {

package/lib/core/constants/accordion.d.ts

@@ -0,0 +1,3 @@
+export declare const ACCORDION_COMPONENT_NAME = "Markdoc/Accordion/Accordion";
+export declare const ACCORDION_GROUP_COMPONENT_NAME = "Markdoc/Accordion/AccordionGroup";
+export declare const ACCORDION_SELECTOR = "[data-component-name='Markdoc/Accordion/Accordion']";

package/lib/core/constants/accordion.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ACCORDION_SELECTOR = exports.ACCORDION_GROUP_COMPONENT_NAME = exports.ACCORDION_COMPONENT_NAME = void 0;
+exports.ACCORDION_COMPONENT_NAME = 'Markdoc/Accordion/Accordion';
+exports.ACCORDION_GROUP_COMPONENT_NAME = 'Markdoc/Accordion/AccordionGroup';
+exports.ACCORDION_SELECTOR = `[data-component-name='${exports.ACCORDION_COMPONENT_NAME}']`;
+//# sourceMappingURL=accordion.js.map

package/lib/core/constants/index.d.ts

@@ -1,3 +1,4 @@
+export * from './accordion';
 export * from './common';
 export * from './environments';
 export * from './code-walkthrough';

package/lib/core/constants/index.js

@@ -14,6 +14,7 @@ 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("./accordion"), exports);
 __exportStar(require("./common"), exports);
 __exportStar(require("./environments"), exports);
 __exportStar(require("./code-walkthrough"), exports);

package/lib/core/styles/global.js

@@ -30,25 +30,26 @@ const variables_25 = require("../../components/CodeBlock/variables");
 const variables_26 = require("../../components/Product/variables");
 const variables_27 = require("../../components/Markdown/variables");
 const variables_28 = require("../../components/Banner/variables");
-const variables_29 = require("../../markdoc/components/Tabs/variables");
-const variables_30 = require("../../markdoc/components/NumberedList/variables");
-const variables_31 = require("../../markdoc/components/Diagram/variables");
-const variables_32 = require("../../components/LastUpdated/variables");
-const variables_33 = require("../../components/Logo/variables");
-const variables_34 = require("../../components/StatusCode/variables");
-const variables_35 = require("../../components/Segmented/variables");
-const variables_36 = require("../../components/UserMenu/variables");
-const variables_37 = require("../../components/Tags/variables");
-const variables_38 = require("../../components/VersionPicker/variables");
-const variables_39 = require("../../components/DatePicker/variables");
-const variables_40 = require("../../components/Switch/variables");
-const variables_41 = require("../../markdoc/components/Cards/variables");
-const variables_42 = require("../../markdoc/components/CodeWalkthrough/variables");
-const variables_43 = require("../../components/SkipContent/variables");
-const variables_44 = require("../../components/PageActions/variables");
-const variables_45 = require("../../components/SvgViewer/variables");
-const variables_46 = require("../../components/Toast/variables");
-const variables_47 = require("../../components/PageNavigation/variables");
+const variables_29 = require("../../markdoc/components/Accordion/variables");
+const variables_30 = require("../../markdoc/components/Tabs/variables");
+const variables_31 = require("../../markdoc/components/NumberedList/variables");
+const variables_32 = require("../../markdoc/components/Diagram/variables");
+const variables_33 = require("../../components/LastUpdated/variables");
+const variables_34 = require("../../components/Logo/variables");
+const variables_35 = require("../../components/StatusCode/variables");
+const variables_36 = require("../../components/Segmented/variables");
+const variables_37 = require("../../components/UserMenu/variables");
+const variables_38 = require("../../components/Tags/variables");
+const variables_39 = require("../../components/VersionPicker/variables");
+const variables_40 = require("../../components/DatePicker/variables");
+const variables_41 = require("../../components/Switch/variables");
+const variables_42 = require("../../markdoc/components/Cards/variables");
+const variables_43 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_44 = require("../../components/SkipContent/variables");
+const variables_45 = require("../../components/PageActions/variables");
+const variables_46 = require("../../components/SvgViewer/variables");
+const variables_47 = require("../../components/Toast/variables");
+const variables_48 = require("../../components/PageNavigation/variables");
 const palette_1 = require("./palette");
 const dark_1 = require("./dark");
 const themeColors = (0, styled_components_1.css) `
@@ -1309,29 +1310,30 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_20.button}
     ${variables_21.aiAssistantButton}
     ${variables_21.connectMCPButton}
-    ${variables_41.cards}
+    ${variables_42.cards}
     ${variables_8.catalog}
     ${variables_11.catalogClassic}
     ${variables_25.code}
-    ${variables_42.codeWalkthrough}
+    ${variables_43.codeWalkthrough}
     ${docsDropdown}
     ${variables_15.dropdown}
     ${error}
     ${variables_10.filter}
     ${variables_19.footer}
     ${headingsTypography}
-    ${variables_37.httpTag}
+    ${variables_38.httpTag}
     ${variables_9.image}
     ${inputs}
     ${variables_1.languagePicker}
-    ${variables_32.lastUpdated}
+    ${variables_33.lastUpdated}
     ${links}
     ${loadProgressBar}
-    ${variables_33.logo}
+    ${variables_34.logo}
     ${variables_27.markdown}
-    ${variables_29.markdownTabs}
-    ${variables_30.markdownNumberedList}
-    ${variables_31.diagram}
+    ${variables_29.markdownAccordion}
+    ${variables_30.markdownTabs}
+    ${variables_31.markdownNumberedList}
+    ${variables_32.diagram}
     ${variables_24.menu}
     ${variables_24.mobileMenu}
     ${modal}
@@ -1350,26 +1352,26 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_7.toc}
     ${variables_16.tooltip}
     ${typography}
-    ${variables_36.userMenu}
-    ${variables_38.versionPicker}
+    ${variables_37.userMenu}
+    ${variables_39.versionPicker}
     ${zIndexDepth}
     ${scorecardColors}
-    ${variables_34.statusCode}
+    ${variables_35.statusCode}
     ${tab}
     ${icon}
     ${tree}
-    ${variables_35.segmented}
-    ${variables_40.switcher}
+    ${variables_36.segmented}
+    ${variables_41.switcher}
     ${variables_17.checkbox}
     ${variables_3.feedback}
     ${variables_2.scorecard}
-    ${variables_39.datePicker}
+    ${variables_40.datePicker}
     ${replay}
-    ${variables_43.skipContent}
-    ${variables_44.pageActions}
-    ${variables_45.svgViewer}
-    ${variables_46.toast}
-    ${variables_47.pageNavigation}
+    ${variables_44.skipContent}
+    ${variables_45.pageActions}
+    ${variables_46.svgViewer}
+    ${variables_47.toast}
+    ${variables_48.pageNavigation}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

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

@@ -0,0 +1,9 @@
+import type { JSX, PropsWithChildren } from 'react';
+export type AccordionProps = {
+    title: string;
+    expanded?: boolean;
+    className?: string;
+    'data-source'?: string;
+    'data-hash'?: string;
+};
+export declare function Accordion({ title, expanded, className, children, 'data-source': dataSource, 'data-hash': dataHash, }: PropsWithChildren<AccordionProps>): JSX.Element;

package/lib/markdoc/components/Accordion/Accordion.js

@@ -0,0 +1,132 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = Accordion;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const ChevronRightIcon_1 = require("../../../icons/ChevronRightIcon/ChevronRightIcon");
+const constants_1 = require("../../../core/constants");
+function Accordion({ title, expanded = false, className, children, 'data-source': dataSource, 'data-hash': dataHash, }) {
+    return (react_1.default.createElement(AccordionWrapper, { className: className, open: expanded, "data-component-name": constants_1.ACCORDION_COMPONENT_NAME, "data-source": dataSource, "data-hash": dataHash },
+        react_1.default.createElement(AccordionSummary, null,
+            react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { color: "--md-accordion-chevron-icon-color", size: "var(--md-accordion-chevron-icon-size)" }),
+            title),
+        react_1.default.createElement(AccordionBody, null, children)));
+}
+const AccordionWrapper = styled_components_1.default.details `
+  margin: var(--md-accordion-margin);
+  border: var(--md-accordion-border);
+  border-radius: var(--md-accordion-border-radius);
+  font-family: var(--md-accordion-font-family);
+  overflow: hidden;
+
+  &[open] > summary svg {
+    transform: rotate(90deg);
+  }
+`;
+const AccordionSummary = styled_components_1.default.summary `
+  display: flex;
+  align-items: center;
+  gap: var(--md-accordion-gap);
+  cursor: pointer;
+  list-style: none;
+
+  background-color: var(--md-accordion-header-bg-color);
+  color: var(--md-accordion-header-text-color);
+  font-weight: var(--md-accordion-header-font-weight);
+  font-size: var(--md-accordion-header-font-size);
+  line-height: var(--md-accordion-header-line-height);
+  padding: var(--md-accordion-header-padding);
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &:hover {
+    background-color: var(--md-accordion-header-bg-color-hover);
+  }
+
+  &:focus-visible {
+    outline: none;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 2px;
+      border: 1px solid var(--button-border-color-focused);
+      border-radius: calc(var(--md-accordion-border-radius) - 2px);
+      pointer-events: none;
+    }
+  }
+
+  svg {
+    flex-shrink: 0;
+    transition: transform 0.15s ease-out;
+  }
+`;
+const showAccordionBody = (0, styled_components_1.keyframes) `
+  0% {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const AccordionBody = styled_components_1.default.div `
+  padding: var(--md-accordion-body-padding);
+  background-color: var(--md-accordion-body-bg-color);
+  color: var(--md-accordion-body-text-color);
+  font-size: var(--md-accordion-body-font-size);
+  line-height: var(--md-accordion-body-line-height);
+
+  details[open] > & {
+    animation: ${showAccordionBody} 0.15s ease-out;
+  }
+
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+`;
+//# sourceMappingURL=Accordion.js.map

package/lib/markdoc/components/Accordion/AccordionGroup.d.ts

@@ -0,0 +1,5 @@
+import type { JSX, PropsWithChildren } from 'react';
+export type AccordionGroupProps = {
+    className?: string;
+};
+export declare function AccordionGroup({ className, children, }: PropsWithChildren<AccordionGroupProps>): JSX.Element;

package/lib/markdoc/components/Accordion/AccordionGroup.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionGroup = AccordionGroup;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("../../../core/constants");
+function AccordionGroup({ className, children, }) {
+    return (react_1.default.createElement(AccordionGroupWrapper, { className: className, "data-component-name": constants_1.ACCORDION_GROUP_COMPONENT_NAME }, children));
+}
+const AccordionGroupWrapper = styled_components_1.default.div `
+  margin: var(--md-accordion-group-margin);
+  border: var(--md-accordion-group-border);
+  border-radius: var(--md-accordion-group-border-radius);
+  overflow: hidden;
+
+  & > ${constants_1.ACCORDION_SELECTOR} {
+    margin: 0;
+    border: none;
+    border-radius: 0;
+  }
+
+  & > ${constants_1.ACCORDION_SELECTOR} + ${constants_1.ACCORDION_SELECTOR} {
+    border-top: var(--md-accordion-group-divider);
+  }
+`;
+//# sourceMappingURL=AccordionGroup.js.map

package/lib/markdoc/components/Accordion/variables.d.ts

@@ -0,0 +1 @@
+export declare const markdownAccordion: import("styled-components").RuleSet<object>;

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.markdownAccordion = void 0;
+const styled_components_1 = require("styled-components");
+exports.markdownAccordion = (0, styled_components_1.css) `
+  /**
+  *  @tokens Markdown Accordion
+  */
+
+  --md-accordion-group-margin: var(--spacing-base) 0; // @presenter Spacing
+  --md-accordion-group-border: 1px solid var(--border-color-secondary); // @presenter Border
+  --md-accordion-group-border-radius: var(--border-radius-xl); // @presenter BorderRadius
+  --md-accordion-group-divider: 1px solid var(--border-color-secondary); // @presenter Border
+
+  --md-accordion-margin: var(--spacing-base) 0; // @presenter Spacing
+  --md-accordion-border: 1px solid var(--border-color-secondary); // @presenter Border
+  --md-accordion-border-radius: var(--border-radius-xl); // @presenter BorderRadius
+  --md-accordion-gap: var(--spacing-xs); // @presenter Spacing
+  --md-accordion-font-family: var(--font-family-base); // @presenter FontFamily
+
+  --md-accordion-chevron-icon-color: var(--text-color-primary); // @presenter Color
+  --md-accordion-chevron-icon-size: 16px;
+
+  --md-accordion-header-bg-color: var(--layer-color); // @presenter Color
+  --md-accordion-header-bg-color-hover: var(--layer-color-hover); // @presenter Color
+  --md-accordion-header-text-color: var(--text-color-primary); // @presenter Color
+  --md-accordion-header-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --md-accordion-header-line-height: var(--line-height-lg); // @presenter LineHeight
+  --md-accordion-header-font-size: var(--font-size-lg); // @presenter FontSize
+  --md-accordion-header-padding: var(--spacing-sm) var(--spacing-md); // @presenter Spacing
+
+  --md-accordion-body-bg-color: var(--bg-color); // @presenter Color
+  --md-accordion-body-text-color: var(--text-color-primary); // @presenter Color
+  --md-accordion-body-font-size: var(--font-size-base); // @presenter FontSize
+  --md-accordion-body-line-height: var(--line-height-base); // @presenter LineHeight
+  --md-accordion-body-padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md); // @presenter Spacing
+
+  // @tokens End
+`;
+//# sourceMappingURL=variables.js.map

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.68.1",
+  "version": "0.69.0-next.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -68,7 +68,7 @@
     "vitest": "4.1.10",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.14.0"
+    "@redocly/realm-asyncapi-sdk": "0.15.0-next.0"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",

package/src/components/Markdown/Markdown.tsx

@@ -7,6 +7,7 @@ import { markdownBaseTableCss } from '@redocly/theme/components/Markdown/styles/
 import { markdownLinksCss } from '@redocly/theme/components/Markdown/styles/links';
 import { headingAnchorCss } from '@redocly/theme/components/Markdown/styles/heading-anchor';
 import {
+  ACCORDION_SELECTOR,
   ANCHOR_CLASS,
   H1_CLASS,
   H2_CLASS,
@@ -172,7 +173,7 @@ export const Markdown = styled.main
     margin: var(--md-hr-margin-vertical) 0;
   }
 
-  details {
+  details:not(${ACCORDION_SELECTOR}) {
     margin: 1.125em 0;
 
     summary {

package/src/core/constants/accordion.ts

@@ -0,0 +1,4 @@
+export const ACCORDION_COMPONENT_NAME = 'Markdoc/Accordion/Accordion';
+export const ACCORDION_GROUP_COMPONENT_NAME = 'Markdoc/Accordion/AccordionGroup';
+
+export const ACCORDION_SELECTOR = `[data-component-name='${ACCORDION_COMPONENT_NAME}']`;

package/src/core/constants/index.ts

@@ -1,3 +1,4 @@
+export * from './accordion';
 export * from './common';
 export * from './environments';
 export * from './code-walkthrough';

package/src/core/styles/global.ts

@@ -28,6 +28,7 @@ import { code } from '@redocly/theme/components/CodeBlock/variables';
 import { productPicker } from '@redocly/theme/components/Product/variables';
 import { markdown } from '@redocly/theme/components/Markdown/variables';
 import { banner } from '@redocly/theme/components/Banner/variables';
+import { markdownAccordion } from '@redocly/theme/markdoc/components/Accordion/variables';
 import { markdownTabs } from '@redocly/theme/markdoc/components/Tabs/variables';
 import { markdownNumberedList } from '@redocly/theme/markdoc/components/NumberedList/variables';
 import { diagram } from '@redocly/theme/markdoc/components/Diagram/variables';
@@ -1352,6 +1353,7 @@ export const styles = css<{ palette?: string }>`
     ${loadProgressBar}
     ${logo}
     ${markdown}
+    ${markdownAccordion}
     ${markdownTabs}
     ${markdownNumberedList}
     ${diagram}

package/src/markdoc/components/Accordion/Accordion.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+import type { JSX, PropsWithChildren } from 'react';
+
+import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
+import { ACCORDION_COMPONENT_NAME } from '@redocly/theme/core/constants';
+
+export type AccordionProps = {
+  title: string;
+  expanded?: boolean;
+  className?: string;
+  'data-source'?: string;
+  'data-hash'?: string;
+};
+
+export function Accordion({
+  title,
+  expanded = false,
+  className,
+  children,
+  'data-source': dataSource,
+  'data-hash': dataHash,
+}: PropsWithChildren<AccordionProps>): JSX.Element {
+  return (
+    <AccordionWrapper
+      className={className}
+      open={expanded}
+      data-component-name={ACCORDION_COMPONENT_NAME}
+      data-source={dataSource}
+      data-hash={dataHash}
+    >
+      <AccordionSummary>
+        <ChevronRightIcon
+          color="--md-accordion-chevron-icon-color"
+          size="var(--md-accordion-chevron-icon-size)"
+        />
+        {title}
+      </AccordionSummary>
+      <AccordionBody>{children}</AccordionBody>
+    </AccordionWrapper>
+  );
+}
+
+const AccordionWrapper = styled.details`
+  margin: var(--md-accordion-margin);
+  border: var(--md-accordion-border);
+  border-radius: var(--md-accordion-border-radius);
+  font-family: var(--md-accordion-font-family);
+  overflow: hidden;
+
+  &[open] > summary svg {
+    transform: rotate(90deg);
+  }
+`;
+
+const AccordionSummary = styled.summary`
+  display: flex;
+  align-items: center;
+  gap: var(--md-accordion-gap);
+  cursor: pointer;
+  list-style: none;
+
+  background-color: var(--md-accordion-header-bg-color);
+  color: var(--md-accordion-header-text-color);
+  font-weight: var(--md-accordion-header-font-weight);
+  font-size: var(--md-accordion-header-font-size);
+  line-height: var(--md-accordion-header-line-height);
+  padding: var(--md-accordion-header-padding);
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &:hover {
+    background-color: var(--md-accordion-header-bg-color-hover);
+  }
+
+  &:focus-visible {
+    outline: none;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 2px;
+      border: 1px solid var(--button-border-color-focused);
+      border-radius: calc(var(--md-accordion-border-radius) - 2px);
+      pointer-events: none;
+    }
+  }
+
+  svg {
+    flex-shrink: 0;
+    transition: transform 0.15s ease-out;
+  }
+`;
+
+const showAccordionBody = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+const AccordionBody = styled.div`
+  padding: var(--md-accordion-body-padding);
+  background-color: var(--md-accordion-body-bg-color);
+  color: var(--md-accordion-body-text-color);
+  font-size: var(--md-accordion-body-font-size);
+  line-height: var(--md-accordion-body-line-height);
+
+  details[open] > & {
+    animation: ${showAccordionBody} 0.15s ease-out;
+  }
+
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+`;

package/src/markdoc/components/Accordion/AccordionGroup.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX, PropsWithChildren } from 'react';
+
+import { ACCORDION_GROUP_COMPONENT_NAME, ACCORDION_SELECTOR } from '@redocly/theme/core/constants';
+
+export type AccordionGroupProps = {
+  className?: string;
+};
+
+export function AccordionGroup({
+  className,
+  children,
+}: PropsWithChildren<AccordionGroupProps>): JSX.Element {
+  return (
+    <AccordionGroupWrapper
+      className={className}
+      data-component-name={ACCORDION_GROUP_COMPONENT_NAME}
+    >
+      {children}
+    </AccordionGroupWrapper>
+  );
+}
+
+const AccordionGroupWrapper = styled.div`
+  margin: var(--md-accordion-group-margin);
+  border: var(--md-accordion-group-border);
+  border-radius: var(--md-accordion-group-border-radius);
+  overflow: hidden;
+
+  & > ${ACCORDION_SELECTOR} {
+    margin: 0;
+    border: none;
+    border-radius: 0;
+  }
+
+  & > ${ACCORDION_SELECTOR} + ${ACCORDION_SELECTOR} {
+    border-top: var(--md-accordion-group-divider);
+  }
+`;

package/src/markdoc/components/Accordion/variables.ts

@@ -0,0 +1,37 @@
+import { css } from 'styled-components';
+
+export const markdownAccordion = css`
+  /**
+  *  @tokens Markdown Accordion
+  */
+
+  --md-accordion-group-margin: var(--spacing-base) 0; // @presenter Spacing
+  --md-accordion-group-border: 1px solid var(--border-color-secondary); // @presenter Border
+  --md-accordion-group-border-radius: var(--border-radius-xl); // @presenter BorderRadius
+  --md-accordion-group-divider: 1px solid var(--border-color-secondary); // @presenter Border
+
+  --md-accordion-margin: var(--spacing-base) 0; // @presenter Spacing
+  --md-accordion-border: 1px solid var(--border-color-secondary); // @presenter Border
+  --md-accordion-border-radius: var(--border-radius-xl); // @presenter BorderRadius
+  --md-accordion-gap: var(--spacing-xs); // @presenter Spacing
+  --md-accordion-font-family: var(--font-family-base); // @presenter FontFamily
+
+  --md-accordion-chevron-icon-color: var(--text-color-primary); // @presenter Color
+  --md-accordion-chevron-icon-size: 16px;
+
+  --md-accordion-header-bg-color: var(--layer-color); // @presenter Color
+  --md-accordion-header-bg-color-hover: var(--layer-color-hover); // @presenter Color
+  --md-accordion-header-text-color: var(--text-color-primary); // @presenter Color
+  --md-accordion-header-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --md-accordion-header-line-height: var(--line-height-lg); // @presenter LineHeight
+  --md-accordion-header-font-size: var(--font-size-lg); // @presenter FontSize
+  --md-accordion-header-padding: var(--spacing-sm) var(--spacing-md); // @presenter Spacing
+
+  --md-accordion-body-bg-color: var(--bg-color); // @presenter Color
+  --md-accordion-body-text-color: var(--text-color-primary); // @presenter Color
+  --md-accordion-body-font-size: var(--font-size-base); // @presenter FontSize
+  --md-accordion-body-line-height: var(--line-height-base); // @presenter LineHeight
+  --md-accordion-body-padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md); // @presenter Spacing
+
+  // @tokens End
+`;

package/src/markdoc/components/default.ts

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

package/src/markdoc/default.ts

@@ -8,6 +8,8 @@ export * from '@redocly/theme/markdoc/attributes/svg-content';
 /* Components */
 export * as components from '@redocly/theme/markdoc/components/default';
 /* Tags */
+import { accordion } from '@redocly/theme/markdoc/tags/accordion';
+import { accordionGroup } from '@redocly/theme/markdoc/tags/accordion-group';
 import { admonition } from '@redocly/theme/markdoc/tags/admonition';
 import { html } from '@redocly/theme/markdoc/tags/html';
 import { markdocExample } from '@redocly/theme/markdoc/tags/markdoc-example';
@@ -33,6 +35,8 @@ import { loginButton } from '@redocly/theme/markdoc/tags/login-button';
 import { diagram } from '@redocly/theme/markdoc/tags/diagram';
 
 export const tags = {
+  [accordion.tagName]: accordion.schema,
+  [accordionGroup.tagName]: accordionGroup.schema,
   [admonition.tagName]: admonition.schema,
   [debug.tagName]: debug.schema,
   [html.tagName]: html.schema,

package/src/markdoc/tags/accordion-group.ts

@@ -0,0 +1,8 @@
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+export const accordionGroup: MarkdocSchemaWrapper = {
+  schema: {
+    render: 'AccordionGroup',
+  },
+  tagName: 'accordion-group',
+};

package/src/markdoc/tags/accordion.ts

@@ -0,0 +1,12 @@
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+export const accordion: MarkdocSchemaWrapper = {
+  schema: {
+    render: 'Accordion',
+    attributes: {
+      title: { type: String, required: true },
+      expanded: { type: Boolean, default: false },
+    },
+  },
+  tagName: 'accordion',
+};