From 67b741e45f92fefe8aa155d5d13e60a63677696b Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 26 Feb 2024 19:53:01 -0300
Subject: [PATCH 1/3] change the design of the disclosure and summary elements

---
 .../src/modules/components/MarkdownElement.js | 42 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index bb9a42b4d40ac5..ad770f0186b160 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -464,14 +464,46 @@ const Root = styled('div')(
       boxShadow: `inset 0 -2px 0 var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
     },
     '& details': {
+      width: '100%',
+      padding: theme.spacing(1),
       marginBottom: theme.spacing(1.5),
-      padding: theme.spacing(0.5, 0, 0.5, 1),
+      overflow: 'clip',
+      border: '1px solid',
+      borderColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
+      borderRadius: `var(--muidocs-shape-borderRadius, ${
+        theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
+      }px)`,
       '& pre': {
         marginTop: theme.spacing(1),
       },
     },
     '& summary': {
       cursor: 'pointer',
+      padding: theme.spacing(1),
+      borderRadius: 6,
+      listStyleType: 'none',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      transition: theme.transitions.create(['background'], {
+        duration: theme.transitions.duration.shortest,
+      }),
+      ':after': {
+        content: '""',
+        maskImage: `url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='black' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")`,
+        display: 'inline-flex',
+        width: '1em',
+        height: '1em',
+        color: 'inherit',
+        backgroundColor: 'currentColor',
+      },
+      '&:hover': {
+        backgroundColor: `var(--muidocs-palette-grey-100, ${lightTheme.palette.grey[50]})`,
+      },
+    },
+    '& details[open] > summary::after': {
+      content: '""',
+      maskImage: `url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 10L8 6L4 10' stroke='black' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")`,
     },
     '& .MuiCode-root': {
       direction: 'ltr /*! @noflip */',
@@ -720,6 +752,14 @@ const Root = styled('div')(
         border: `1px solid var(--muidocs-palette-primaryDark-600, ${darkTheme.palette.primaryDark[600]})`,
         boxShadow: `inset 0 -2px 0 var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`,
       },
+      '& details': {
+        borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
+      },
+      '& summary': {
+        '&:hover': {
+          backgroundColor: `var(--muidocs-palette-primaryDark-800, ${darkTheme.palette.primaryDark[800]})`,
+        },
+      },
     },
   }),
 );

From 6ea6d62683beeaf0e3143ccfae936d14b1faee9c Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 26 Feb 2024 19:53:15 -0300
Subject: [PATCH 2/3] add an example in the markdown experiments page

---
 docs/pages/experiments/docs/markdown.md | 31 +++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/docs/pages/experiments/docs/markdown.md b/docs/pages/experiments/docs/markdown.md
index 34743e2cdebc16..b43e2cbca07e7f 100644
--- a/docs/pages/experiments/docs/markdown.md
+++ b/docs/pages/experiments/docs/markdown.md
@@ -41,6 +41,37 @@ https://spec.commonmark.org/0.30/#links
 
 - Link [with a title](#link 'Stay on the same page').
 
+## Disclosure element
+
+<details>
+<summary>Primary</summary>
+
+```js
+const primary = {
+  50: '#F4FAFF',
+  100: '#DDF1FF',
+  200: '#ADDBFF',
+};
+
+extendTheme({
+  colorSchemes: {
+    light: {
+      palette: {
+        primary: {
+          ...primary,
+          plainColor: `var(--joy-palette-primary-600)`,
+          plainHoverBg: `var(--joy-palette-primary-100)`,
+          plainActiveBg: `var(--joy-palette-primary-200)`,
+          plainDisabledColor: `var(--joy-palette-primary-200)`,
+        },
+      },
+    },
+  },
+});
+```
+
+</details>
+
 ## kbd tag
 
 Make sure to include the `class="key"` declaration in each individual `kbd` element.

From fa4e165ee8bea0fed0d3284a0754ee0164c1f0e4 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 27 Feb 2024 11:35:45 -0300
Subject: [PATCH 3/3] remove unnecessary overflow property

---
 docs/src/modules/components/MarkdownElement.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index ad770f0186b160..1aa21d2713d59a 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -467,7 +467,6 @@ const Root = styled('div')(
       width: '100%',
       padding: theme.spacing(1),
       marginBottom: theme.spacing(1.5),
-      overflow: 'clip',
       border: '1px solid',
       borderColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`,
       borderRadius: `var(--muidocs-shape-borderRadius, ${