@ceed/cds 1.34.1 → 1.36.0

package/dist/components/navigation/Breadcrumbs.md

@@ -81,10 +81,10 @@ Breadcrumbs are available in three sizes -- `sm`, `md`, and `lg` -- allowing you
 
 ```tsx
 <div>
-  <Breadcrumbs {...args} size="sm" />
-  <Breadcrumbs {...args} size="md" />
-  <Breadcrumbs {...args} size="lg" />
-</div>
+    <Breadcrumbs {...args} size="sm" />
+    <Breadcrumbs {...args} size="md" />
+    <Breadcrumbs {...args} size="lg" />
+  </div>
 ```
 
 ### Custom Separator

package/dist/components/navigation/Drawer.md

@@ -38,9 +38,7 @@ function MyComponent() {
       <Drawer open={open} onClose={() => setOpen(false)}>
         <Box sx={{ p: 2, backgroundColor: 'white', height: '100%' }}>
           <Typography level="title-lg">Drawer Content</Typography>
-          <Typography level="body-md">
-            Place your navigation, detail view, or form content here.
-          </Typography>
+          <Typography level="body-md">Place your navigation, detail view, or form content here.</Typography>
         </Box>
       </Drawer>
     </>
@@ -81,11 +79,18 @@ function NavigationDrawer({ open, onClose }) {
   return (
     <Drawer open={open} onClose={onClose} size="sm">
       <Box sx={{ p: 2, backgroundColor: 'white', height: '100%' }}>
-        <Typography level="title-lg" sx={{ mb: 2 }}>Menu</Typography>
+        <Typography level="title-lg" sx={{ mb: 2 }}>
+          Menu
+        </Typography>
         <List>
           {navItems.map((item) => (
             <ListItem key={item.path}>
-              <ListItemButton onClick={() => { navigate(item.path); onClose(); }}>
+              <ListItemButton
+                onClick={() => {
+                  navigate(item.path);
+                  onClose();
+                }}
+              >
                 <ListItemDecorator>{item.icon}</ListItemDecorator>
                 {item.label}
               </ListItemButton>
@@ -115,12 +120,12 @@ function DetailDrawer({ open, onClose, selectedItem }) {
       >
         <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
           <Typography level="title-lg">{selectedItem?.name}</Typography>
-          <IconButton onClick={onClose}><CloseIcon /></IconButton>
+          <IconButton onClick={onClose}>
+            <CloseIcon />
+          </IconButton>
         </Box>
         <Divider />
-        <Box sx={{ flex: 1, overflow: 'auto', mt: 2 }}>
-          {/* Detail content */}
-        </Box>
+        <Box sx={{ flex: 1, overflow: 'auto', mt: 2 }}>{/* Detail content */}</Box>
       </Box>
     </Drawer>
   );
@@ -142,7 +147,9 @@ function FormDrawer({ open, onClose, onSubmit }) {
           flexDirection: 'column',
         }}
       >
-        <Typography level="title-lg" sx={{ mb: 2 }}>Create New Item</Typography>
+        <Typography level="title-lg" sx={{ mb: 2 }}>
+          Create New Item
+        </Typography>
         <Divider />
         <Box sx={{ flex: 1, overflow: 'auto', my: 2 }}>
           <Stack gap={2}>
@@ -152,7 +159,9 @@ function FormDrawer({ open, onClose, onSubmit }) {
         </Box>
         <Divider />
         <Stack direction="row" gap={1} sx={{ mt: 2, justifyContent: 'flex-end' }}>
-          <Button variant="outlined" color="neutral" onClick={onClose}>Cancel</Button>
+          <Button variant="outlined" color="neutral" onClick={onClose}>
+            Cancel
+          </Button>
           <Button onClick={onSubmit}>Save</Button>
         </Stack>
       </Box>
@@ -165,16 +174,16 @@ function FormDrawer({ open, onClose, onSubmit }) {
 
 ### Key Props
 
-| Prop       | Type                                                           | Default                          | Description                                                                |                                                                                |
-| ---------- | -------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
-| `children` | `ReactNode`                                                    | -                                | Content rendered inside the drawer panel                                   |                                                                                |
-| `open`     | `boolean`                                                      | `false`                          | Controls whether the drawer is visible                                     |                                                                                |
-| `onClose`  | \`(event: React.SyntheticEvent                                 | Event, reason: string) => void\` | -                                                                          | Called when the drawer requests to close, such as backdrop click or Escape key |
-| `anchor`   | `'left' \| 'right' \| 'top' \| 'bottom'`                       | `'left'`                         | Edge of the screen from which the drawer slides in                         |                                                                                |
-| `size`     | `'sm' \| 'md' \| 'lg'`                                         | `'md'`                           | Preset drawer size used to control width or height depending on the anchor |                                                                                |
-| `variant`  | `'plain' \| 'soft' \| 'outlined' \| 'solid'`                   | `'plain'`                        | Visual style inherited from Joy UI Drawer                                  |                                                                                |
-| `color`    | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'`                      | Color scheme inherited from Joy UI Drawer                                  |                                                                                |
-| `sx`       | `SxProps`                                                      | -                                | Custom styles using the MUI system                                         |                                                                                |
+\| Prop       | Type                                                           | Default                         | Description                                                                |
+\| ---------- | -------------------------------------------------------------- | ------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
+\| `children` | `ReactNode`                                                    | -                               | Content rendered inside the drawer panel                                   |
+\| `open`     | `boolean`                                                      | `false`                         | Controls whether the drawer is visible                                     |
+\| `onClose`  | `(event: React.SyntheticEvent                                  | Event, reason: string) => void` | -                                                                          | Called when the drawer requests to close, such as backdrop click or Escape key |
+\| `anchor`   | `'left' \| 'right' \| 'top' \| 'bottom'`                       | `'left'`                        | Edge of the screen from which the drawer slides in                         |
+\| `size`     | `'sm' \| 'md' \| 'lg'`                                         | `'md'`                          | Preset drawer size used to control width or height depending on the anchor |
+\| `variant`  | `'plain' \| 'soft' \| 'outlined' \| 'solid'`                   | `'plain'`                       | Visual style inherited from Joy UI Drawer                                  |
+\| `color`    | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'`                     | Color scheme inherited from Joy UI Drawer                                  |
+\| `sx`       | `SxProps`                                                      | -                               | Custom styles using the MUI system                                         |
 
 > **Note**: Drawer also accepts Joy UI `DrawerProps` and Framer Motion props because the component is a thin wrapper around Joy UI Drawer with motion support.
 
@@ -195,7 +204,9 @@ function FormDrawer({ open, onClose, onSubmit }) {
 // ✅ Good: Close button inside the drawer
 <Drawer open={open} onClose={onClose}>
   <Box>
-    <IconButton onClick={onClose}><CloseIcon /></IconButton>
+    <IconButton onClick={onClose}>
+      <CloseIcon />
+    </IconButton>
     {/* Content */}
   </Box>
 </Drawer>
@@ -206,9 +217,7 @@ function FormDrawer({ open, onClose, onSubmit }) {
 ```tsx
 // ✅ Good: Styled content container
 <Drawer open={open}>
-  <Box sx={{ backgroundColor: 'white', height: '100%', boxShadow: 'md', p: 2 }}>
-    {/* Content */}
-  </Box>
+  <Box sx={{ backgroundColor: 'white', height: '100%', boxShadow: 'md', p: 2 }}>{/* Content */}</Box>
 </Drawer>
 ```