@ceed/cds 1.34.0 → 1.35.0

package/dist/components/navigation/MenuButton.md

@@ -256,11 +256,15 @@ function ToolbarActions({ selectedItems, onAction }) {
 - **Use descriptive button text.** The button label should clearly indicate what kind of options the menu contains. Avoid vague labels like "More" or "Options" -- prefer specific labels like "Export Options" or "User Actions".
 
   ```tsx
-  {/* ✅ Good: Clear purpose */}
-  <MenuButton buttonText="Export Options" items={exportItems} />
-
-  {/* ❌ Avoid: Vague label */}
-  <MenuButton buttonText="More" items={items} />
+  {
+    /* ✅ Good: Clear purpose */
+  }
+  <MenuButton buttonText="Export Options" items={exportItems} />;
+
+  {
+    /* ❌ Avoid: Vague label */
+  }
+  <MenuButton buttonText="More" items={items} />;
   ```
 
 - **Keep the items list short and focused.** Aim for 3-7 items that are logically related. If you need more items or mixed content, switch to the Dropdown + Menu composition pattern.
@@ -276,14 +280,18 @@ function ToolbarActions({ selectedItems, onAction }) {
 - **Do not use MenuButton for form value selection.** MenuButton triggers actions -- it is not a Select replacement. For form inputs where the user picks a value, use the Select component.
 
   ```tsx
-  {/* ❌ Bad: Form selection */}
-  <MenuButton buttonText={selectedValue} items={options} />
-
-  {/* ✅ Good: Use Select for forms */}
+  {
+    /* ❌ Bad: Form selection */
+  }
+  <MenuButton buttonText={selectedValue} items={options} />;
+
+  {
+    /* ✅ Good: Use Select for forms */
+  }
   <Select value={selectedValue} onChange={handleChange}>
     <Option value="a">Option A</Option>
     <Option value="b">Option B</Option>
-  </Select>
+  </Select>;
   ```
 
 - **Use `placement` to prevent overflow.** When the trigger is near the right edge of the viewport, use `placement="bottom-end"` so the menu does not extend beyond the screen.

package/dist/components/navigation/NavigationGroup.md

@@ -19,14 +19,16 @@ import { NavigationGroup, NavigationItem } from '@ceed/cds';
 
 function Sidebar() {
   return (
-    <NavigationGroup
-      title="User Management"
-      startDecorator={<PeopleIcon />}
-      defaultExpanded={true}
-    >
-      <NavigationItem id="users" level={1}>All Users</NavigationItem>
-      <NavigationItem id="roles" level={1}>Roles</NavigationItem>
-      <NavigationItem id="permissions" level={1}>Permissions</NavigationItem>
+    <NavigationGroup title="User Management" startDecorator={<PeopleIcon />} defaultExpanded={true}>
+      <NavigationItem id="users" level={1}>
+        All Users
+      </NavigationItem>
+      <NavigationItem id="roles" level={1}>
+        Roles
+      </NavigationItem>
+      <NavigationItem id="permissions" level={1}>
+        Permissions
+      </NavigationItem>
     </NavigationGroup>
   );
 }
@@ -100,11 +102,7 @@ Icons work at any nesting level.
 function AdminNavigation() {
   return (
     <>
-      <NavigationGroup
-        title="User Management"
-        startDecorator={<PeopleIcon />}
-        defaultExpanded={true}
-      >
+      <NavigationGroup title="User Management" startDecorator={<PeopleIcon />} defaultExpanded={true}>
         <NavigationItem id="users" level={1}>
           All Users
         </NavigationItem>
@@ -116,10 +114,7 @@ function AdminNavigation() {
         </NavigationItem>
       </NavigationGroup>
 
-      <NavigationGroup
-        title="Content"
-        startDecorator={<ArticleIcon />}
-      >
+      <NavigationGroup title="Content" startDecorator={<ArticleIcon />}>
         <NavigationItem id="posts" level={1}>
           Posts
         </NavigationItem>
@@ -131,10 +126,7 @@ function AdminNavigation() {
         </NavigationItem>
       </NavigationGroup>
 
-      <NavigationGroup
-        title="Settings"
-        startDecorator={<SettingsIcon />}
-      >
+      <NavigationGroup title="Settings" startDecorator={<SettingsIcon />}>
         <NavigationItem id="general" level={1}>
           General
         </NavigationItem>
@@ -155,20 +147,12 @@ function AdminNavigation() {
 ```tsx
 function NestedNavigation() {
   return (
-    <NavigationGroup
-      title="E-commerce"
-      startDecorator={<ShoppingCartIcon />}
-      defaultExpanded={true}
-    >
+    <NavigationGroup title="E-commerce" startDecorator={<ShoppingCartIcon />} defaultExpanded={true}>
       <NavigationItem id="dashboard" level={1}>
         Dashboard
       </NavigationItem>
 
-      <NavigationGroup
-        title="Products"
-        level={1}
-        defaultExpanded={true}
-      >
+      <NavigationGroup title="Products" level={1} defaultExpanded={true}>
         <NavigationItem id="all-products" level={2}>
           All Products
         </NavigationItem>
@@ -180,10 +164,7 @@ function NestedNavigation() {
         </NavigationItem>
       </NavigationGroup>
 
-      <NavigationGroup
-        title="Orders"
-        level={1}
-      >
+      <NavigationGroup title="Orders" level={1}>
         <NavigationItem id="all-orders" level={2}>
           All Orders
         </NavigationItem>
@@ -247,11 +228,7 @@ function DocsSidebar({ sections, currentPath }) {
 NavigationGroup extends Joy UI's Accordion, so you can use additional Accordion props:
 
 ```tsx
-<NavigationGroup
-  title="Settings"
-  expanded={isExpanded}
-  onChange={(event, expanded) => setIsExpanded(expanded)}
->
+<NavigationGroup title="Settings" expanded={isExpanded} onChange={(event, expanded) => setIsExpanded(expanded)}>
   {/* Content */}
 </NavigationGroup>
 ```
@@ -366,11 +343,7 @@ function LazyNavigationGroup({ title, loadContent }) {
   };
 
   return (
-    <NavigationGroup
-      title={title}
-      expanded={expanded}
-      onChange={handleChange}
-    >
+    <NavigationGroup title={title} expanded={expanded} onChange={handleChange}>
       {content || <Skeleton />}
     </NavigationGroup>
   );
@@ -386,11 +359,7 @@ function SidebarNavigation() {
   const [expandedGroups, setExpandedGroups] = useState(['products']);
 
   const handleGroupChange = (groupId) => (event, isExpanded) => {
-    setExpandedGroups((prev) =>
-      isExpanded
-        ? [...prev, groupId]
-        : prev.filter((id) => id !== groupId)
-    );
+    setExpandedGroups((prev) => (isExpanded ? [...prev, groupId] : prev.filter((id) => id !== groupId)));
   };
 
   return (

package/dist/components/navigation/NavigationItem.md

@@ -248,9 +248,7 @@ NavigationItem includes built-in accessibility features:
 
 ```tsx
 // Selected state is announced
-<NavigationItem selected={true}>
-  Dashboard {/* Announced as "Dashboard, current page" */}
-</NavigationItem>
+<NavigationItem selected={true}>Dashboard {/* Announced as "Dashboard, current page" */}</NavigationItem>
 ```
 
 ## Best Practices
@@ -309,7 +307,9 @@ const handleClick = useCallback((id) => {
 }, []);
 
 // Pass stable handler to all items
-<NavigationItem id="item1" onClick={handleClick}>Item 1</NavigationItem>
+<NavigationItem id="item1" onClick={handleClick}>
+  Item 1
+</NavigationItem>;
 ```
 
 ### Avoid Inline Objects
@@ -318,11 +318,11 @@ Don't create new decorator elements on each render:
 
 ```tsx
 // ❌ Bad: New element created each render
-<NavigationItem startDecorator={<HomeIcon />}>Home</NavigationItem>
+<NavigationItem startDecorator={<HomeIcon />}>Home</NavigationItem>;
 
 // ✅ Good: Memoized or static
 const homeIcon = <HomeIcon />;
-<NavigationItem startDecorator={homeIcon}>Home</NavigationItem>
+<NavigationItem startDecorator={homeIcon}>Home</NavigationItem>;
 ```
 
 NavigationItem provides a foundational building block for sidebar navigation. Use it within Navigator for automatic item management, or combine it with NavigationGroup for custom hierarchical navigation structures.

package/dist/components/navigation/Navigator.md

@@ -161,12 +161,7 @@ function FileBrowser({ folders, onFolderSelect }) {
     });
   };
 
-  return (
-    <Navigator
-      items={buildNavigatorItems(folders)}
-      onSelect={onFolderSelect}
-    />
-  );
+  return <Navigator items={buildNavigatorItems(folders)} onSelect={onFolderSelect} />;
 }
 ```
 
@@ -225,11 +220,11 @@ Navigator uses a composition pattern with NavigationItem and NavigationGroup:
 
 ```tsx
 interface NavigatorItem {
-  id: string;                        // Unique identifier
-  type: 'item';                      // Indicates a navigation item
-  title: string | React.ReactNode;   // Display text or element
-  startDecorator?: React.ReactNode;  // Icon before title
-  selected?: boolean;                // Selection state
+  id: string; // Unique identifier
+  type: 'item'; // Indicates a navigation item
+  title: string | React.ReactNode; // Display text or element
+  startDecorator?: React.ReactNode; // Icon before title
+  selected?: boolean; // Selection state
 }
 ```
 
@@ -237,11 +232,11 @@ interface NavigatorItem {
 
 ```tsx
 interface NavigatorGroup {
-  type: 'group';                     // Indicates a group
-  title: string | React.ReactNode;   // Group title
-  startDecorator?: React.ReactNode;  // Icon before title
-  expanded?: boolean;                // Default expanded state
-  content: React.ReactNode;          // Content when expanded (usually nested Navigator)
+  type: 'group'; // Indicates a group
+  title: string | React.ReactNode; // Group title
+  startDecorator?: React.ReactNode; // Icon before title
+  expanded?: boolean; // Default expanded state
+  content: React.ReactNode; // Content when expanded (usually nested Navigator)
 }
 ```
 
@@ -314,7 +309,7 @@ const items = [
 // ❌ Bad: Inconsistent icons
 const items = [
   { id: 'home', type: 'item', title: 'Home', startDecorator: <HomeIcon /> },
-  { id: 'settings', type: 'item', title: 'Settings' },  // Missing icon
+  { id: 'settings', type: 'item', title: 'Settings' }, // Missing icon
 ];
 ```
 
@@ -358,17 +353,20 @@ function Sidebar() {
 When items are computed, memoize them to prevent unnecessary re-renders:
 
 ```tsx
-const items = useMemo(() => [
-  {
-    id: 'home',
-    type: 'item',
-    title: 'Home',
-    selected: currentPath === '/home',
-  },
-  // ... more items
-], [currentPath]);
-
-<Navigator items={items} onSelect={handleSelect} />
+const items = useMemo(
+  () => [
+    {
+      id: 'home',
+      type: 'item',
+      title: 'Home',
+      selected: currentPath === '/home',
+    },
+    // ... more items
+  ],
+  [currentPath],
+);
+
+<Navigator items={items} onSelect={handleSelect} />;
 ```
 
 ### Lazy Load Content

package/dist/components/navigation/Pagination.md

@@ -8,15 +8,15 @@ Pagination ships in two variants -- **standard** (clickable page numbers) and **
 
 ```tsx
 <Stack spacing={4}>
-  <Stack spacing={1}>
-    <div>Standard</div>
-    <Pagination {...args} variant="standard" />
-  </Stack>
-  <Stack spacing={1}>
-    <div>Compact</div>
-    <Pagination {...args} variant="compact" />
+    <Stack spacing={1}>
+      <div>Standard</div>
+      <Pagination {...args} variant="standard" />
+    </Stack>
+    <Stack spacing={1}>
+      <div>Compact</div>
+      <Pagination {...args} variant="compact" />
+    </Stack>
   </Stack>
-</Stack>
 ```
 
 | Field                        | Description | Default |
@@ -36,11 +36,7 @@ function DataList() {
   return (
     <>
       <ItemList items={items} page={page} pageSize={pageSize} />
-      <Pagination
-        rowCount={totalItems}
-        paginationModel={{ page, pageSize }}
-        onPageChange={setPage}
-      />
+      <Pagination rowCount={totalItems} paginationModel={{ page, pageSize }} onPageChange={setPage} />
     </>
   );
 }
@@ -54,19 +50,19 @@ Pagination is available in three sizes -- `sm`, `md`, and `lg` -- for both the s
 
 ```tsx
 <Stack spacing={4}>
-  <Stack spacing={2}>
-    <div>Standard</div>
-    <Pagination {...args} variant="standard" size="sm" />
-    <Pagination {...args} variant="standard" size="md" />
-    <Pagination {...args} variant="standard" size="lg" />
-  </Stack>
-  <Stack spacing={2}>
-    <div>Compact</div>
-    <Pagination {...args} variant="compact" size="sm" />
-    <Pagination {...args} variant="compact" size="md" />
-    <Pagination {...args} variant="compact" size="lg" />
+    <Stack spacing={2}>
+      <div>Standard</div>
+      <Pagination {...args} variant="standard" size="sm" />
+      <Pagination {...args} variant="standard" size="md" />
+      <Pagination {...args} variant="standard" size="lg" />
+    </Stack>
+    <Stack spacing={2}>
+      <div>Compact</div>
+      <Pagination {...args} variant="compact" size="sm" />
+      <Pagination {...args} variant="compact" size="md" />
+      <Pagination {...args} variant="compact" size="lg" />
+    </Stack>
   </Stack>
-</Stack>
 ```
 
 ### Page Positions
@@ -75,37 +71,61 @@ The component correctly handles the visual presentation when the user is at the
 
 ```tsx
 <Stack spacing={4}>
-  <Stack spacing={2}>
-    <div>Standard</div>
-    <Pagination {...args} variant="standard" defaultPaginationModel={{
-      page: 1,
-      pageSize: 1
-    }} />
-    <Pagination {...args} variant="standard" defaultPaginationModel={{
-      page: 10,
-      pageSize: 1
-    }} />
-    <Pagination {...args} variant="standard" defaultPaginationModel={{
-      page: 20,
-      pageSize: 1
-    }} />
-  </Stack>
-  <Stack spacing={2}>
-    <div>Compact</div>
-    <Pagination {...args} variant="compact" defaultPaginationModel={{
-      page: 1,
-      pageSize: 1
-    }} />
-    <Pagination {...args} variant="compact" defaultPaginationModel={{
-      page: 10,
-      pageSize: 1
-    }} />
-    <Pagination {...args} variant="compact" defaultPaginationModel={{
-      page: 20,
-      pageSize: 1
-    }} />
+    <Stack spacing={2}>
+      <div>Standard</div>
+      <Pagination
+        {...args}
+        variant="standard"
+        defaultPaginationModel={{
+          page: 1,
+          pageSize: 1
+        }}
+      />
+      <Pagination
+        {...args}
+        variant="standard"
+        defaultPaginationModel={{
+          page: 10,
+          pageSize: 1
+        }}
+      />
+      <Pagination
+        {...args}
+        variant="standard"
+        defaultPaginationModel={{
+          page: 20,
+          pageSize: 1
+        }}
+      />
+    </Stack>
+    <Stack spacing={2}>
+      <div>Compact</div>
+      <Pagination
+        {...args}
+        variant="compact"
+        defaultPaginationModel={{
+          page: 1,
+          pageSize: 1
+        }}
+      />
+      <Pagination
+        {...args}
+        variant="compact"
+        defaultPaginationModel={{
+          page: 10,
+          pageSize: 1
+        }}
+      />
+      <Pagination
+        {...args}
+        variant="compact"
+        defaultPaginationModel={{
+          page: 20,
+          pageSize: 1
+        }}
+      />
+    </Stack>
   </Stack>
-</Stack>
 ```
 
 ### Uncontrolled Mode
@@ -130,12 +150,12 @@ Pagination automatically adjusts when the total number of items changes. If the
 
 ```tsx
 <Stack gap={2}>
-  <Pagination {...args} rowCount={rowCount} />
-  <Stack direction="row" gap={2}>
-    <Button onClick={() => setRowCount(rowCount - 1)}>Decrease Row count</Button>
-    <Button onClick={() => setRowCount(rowCount + 1)}>Increase Row count</Button>
+    <Pagination {...args} rowCount={rowCount} />
+    <Stack direction="row" gap={2}>
+      <Button onClick={() => setRowCount(rowCount - 1)}>Decrease Row count</Button>
+      <Button onClick={() => setRowCount(rowCount + 1)}>Increase Row count</Button>
+    </Stack>
   </Stack>
-</Stack>
 ```
 
 ## Common Use Cases
@@ -153,14 +173,9 @@ function DataTable({ columns }) {
       <Table columns={columns} data={data} loading={isLoading} />
       <Stack direction="row" justifyContent="space-between" alignItems="center" mt={2}>
         <Typography level="body-sm">
-          Showing {(page - 1) * pageSize + 1}--{Math.min(page * pageSize, totalCount)} of{' '}
-          {totalCount}
+          Showing {(page - 1) * pageSize + 1}--{Math.min(page * pageSize, totalCount)} of {totalCount}
         </Typography>
-        <Pagination
-          rowCount={totalCount}
-          paginationModel={{ page, pageSize }}
-          onPageChange={setPage}
-        />
+        <Pagination rowCount={totalCount} paginationModel={{ page, pageSize }} onPageChange={setPage} />
       </Stack>
     </Box>
   );
@@ -180,7 +195,9 @@ function SearchResults({ query }) {
 
   return (
     <Stack spacing={2}>
-      <Typography level="body-sm">{totalCount} results for "{query}"</Typography>
+      <Typography level="body-sm">
+        {totalCount} results for "{query}"
+      </Typography>
       <ResultList results={results} />
       <Pagination
         rowCount={totalCount}
@@ -204,13 +221,7 @@ function URLPaginatedList() {
     setSearchParams({ page: String(newPage) });
   };
 
-  return (
-    <Pagination
-      rowCount={totalCount}
-      paginationModel={{ page, pageSize: 25 }}
-      onPageChange={handlePageChange}
-    />
-  );
+  return <Pagination rowCount={totalCount} paginationModel={{ page, pageSize: 25 }} onPageChange={handlePageChange} />;
 }
 ```
 

package/dist/components/navigation/Stepper.md

@@ -146,10 +146,7 @@ function FormWizard() {
       <Box sx={{ mt: 3 }}>
         {/* Step content rendered here based on activeStep */}
         <Stack direction="row" gap={1} sx={{ mt: 2 }}>
-          <Button
-            disabled={activeStep <= 1}
-            onClick={() => setActiveStep((prev) => prev - 1)}
-          >
+          <Button disabled={activeStep <= 1} onClick={() => setActiveStep((prev) => prev - 1)}>
             Back
           </Button>
           <Button onClick={() => setActiveStep((prev) => prev + 1)}>
@@ -193,14 +190,7 @@ function CompactProgress({ currentStep, totalSteps }) {
     indicatorContent: i + 1,
   }));
 
-  return (
-    <Stepper
-      steps={steps}
-      activeStep={currentStep}
-      orientation="horizontal"
-      stepOrientation="vertical"
-    />
-  );
+  return <Stepper steps={steps} activeStep={currentStep} orientation="horizontal" stepOrientation="vertical" />;
 }
 ```
 

package/dist/components/navigation/Tabs.md

@@ -43,21 +43,21 @@ Default horizontal tab navigation with tab panels.
 
 ```tsx
 <Tabs {...args}>
-  <TabList>
-    <Tab color={color} variant={variant}>
-      Tab1
-    </Tab>
-    <Tab color={color} variant={variant}>
-      Tab2
-    </Tab>
-    <Tab color={color} variant={variant}>
-      Tab3
-    </Tab>
-  </TabList>
-  <TabPanel value={0}>Tab list1</TabPanel>
-  <TabPanel value={1}>Tab list2</TabPanel>
-  <TabPanel value={2}>Tab list3</TabPanel>
-</Tabs>
+    <TabList>
+      <Tab color={color} variant={variant}>
+        Tab1
+      </Tab>
+      <Tab color={color} variant={variant}>
+        Tab2
+      </Tab>
+      <Tab color={color} variant={variant}>
+        Tab3
+      </Tab>
+    </TabList>
+    <TabPanel value={0}>Tab list1</TabPanel>
+    <TabPanel value={1}>Tab list2</TabPanel>
+    <TabPanel value={2}>Tab list3</TabPanel>
+  </Tabs>
 ```
 
 ### Variants
@@ -90,21 +90,21 @@ Add icons or other elements before or after the tab label using `startDecorator`
 
 ```tsx
 <Tabs {...args}>
-  <TabList>
-    <Tab startDecorator={<Call />} color={color} variant={variant}>
-      Tab1
-    </Tab>
-    <Tab endDecorator={<Sms />} color={color} variant={variant}>
-      Tab2
-    </Tab>
-    <Tab startDecorator={<Email />} endDecorator={<MoreVert />} color={color} variant={variant}>
-      Tab3
-    </Tab>
-  </TabList>
-  <TabPanel value={0}>Tab list1</TabPanel>
-  <TabPanel value={1}>Tab list2</TabPanel>
-  <TabPanel value={2}>Tab list3</TabPanel>
-</Tabs>
+    <TabList>
+      <Tab startDecorator={<Call />} color={color} variant={variant}>
+        Tab1
+      </Tab>
+      <Tab endDecorator={<Sms />} color={color} variant={variant}>
+        Tab2
+      </Tab>
+      <Tab startDecorator={<Email />} endDecorator={<MoreVert />} color={color} variant={variant}>
+        Tab3
+      </Tab>
+    </TabList>
+    <TabPanel value={0}>Tab list1</TabPanel>
+    <TabPanel value={1}>Tab list2</TabPanel>
+    <TabPanel value={2}>Tab list3</TabPanel>
+  </Tabs>
 ```
 
 ### Vertical Orientation
@@ -144,9 +144,15 @@ function SettingsPage() {
         <Tab startDecorator={<SecurityIcon />}>Security</Tab>
         <Tab startDecorator={<NotificationsIcon />}>Notifications</Tab>
       </TabList>
-      <TabPanel value={0}><ProfileSettings /></TabPanel>
-      <TabPanel value={1}><SecuritySettings /></TabPanel>
-      <TabPanel value={2}><NotificationSettings /></TabPanel>
+      <TabPanel value={0}>
+        <ProfileSettings />
+      </TabPanel>
+      <TabPanel value={1}>
+        <SecuritySettings />
+      </TabPanel>
+      <TabPanel value={2}>
+        <NotificationSettings />
+      </TabPanel>
     </Tabs>
   );
 }
@@ -165,9 +171,15 @@ function DashboardTabs() {
         <Tab value="week">This Week</Tab>
         <Tab value="month">This Month</Tab>
       </TabList>
-      <TabPanel value="day"><DailyStats /></TabPanel>
-      <TabPanel value="week"><WeeklyStats /></TabPanel>
-      <TabPanel value="month"><MonthlyStats /></TabPanel>
+      <TabPanel value="day">
+        <DailyStats />
+      </TabPanel>
+      <TabPanel value="week">
+        <WeeklyStats />
+      </TabPanel>
+      <TabPanel value="month">
+        <MonthlyStats />
+      </TabPanel>
     </Tabs>
   );
 }