@ceed/cds 1.34.1 → 1.36.0-next.1

package/dist/components/surfaces/Accordions.md

@@ -83,10 +83,10 @@ Available size options: `sm`, `md`, `lg`.
 
 ```tsx
 <>
-  <Accordions {...args} size="sm" />
-  <Accordions {...args} size="md" />
-  <Accordions {...args} size="lg" />
-</>
+    <Accordions {...args} size="sm" />
+    <Accordions {...args} size="md" />
+    <Accordions {...args} size="lg" />
+  </>
 ```
 
 ### Variants
@@ -95,23 +95,23 @@ Style variants: `plain`, `outlined`, `soft`, `solid`.
 
 ```tsx
 <>
-  <div>
-    <h3>Plain</h3>
-    <Accordions {...args} variant="plain" />
-  </div>
-  <div>
-    <h3>Outlined</h3>
-    <Accordions {...args} variant="outlined" />
-  </div>
-  <div>
-    <h3>Soft</h3>
-    <Accordions {...args} variant="soft" />
-  </div>
-  <div>
-    <h3>Solid</h3>
-    <Accordions {...args} variant="solid" />
-  </div>
-</>
+    <div>
+      <h3>Plain</h3>
+      <Accordions {...args} variant="plain" />
+    </div>
+    <div>
+      <h3>Outlined</h3>
+      <Accordions {...args} variant="outlined" />
+    </div>
+    <div>
+      <h3>Soft</h3>
+      <Accordions {...args} variant="soft" />
+    </div>
+    <div>
+      <h3>Solid</h3>
+      <Accordions {...args} variant="solid" />
+    </div>
+  </>
 ```
 
 ### Colors
@@ -120,27 +120,27 @@ Color options: `primary`, `neutral`, `danger`, `success`, `warning`.
 
 ```tsx
 <>
-  <div>
-    <h3>Primary</h3>
-    <Accordions {...args} color="primary" />
-  </div>
-  <div>
-    <h3>Neutral</h3>
-    <Accordions {...args} color="neutral" />
-  </div>
-  <div>
-    <h3>Danger</h3>
-    <Accordions {...args} color="danger" />
-  </div>
-  <div>
-    <h3>Success</h3>
-    <Accordions {...args} color="success" />
-  </div>
-  <div>
-    <h3>Warning</h3>
-    <Accordions {...args} color="warning" />
-  </div>
-</>
+    <div>
+      <h3>Primary</h3>
+      <Accordions {...args} color="primary" />
+    </div>
+    <div>
+      <h3>Neutral</h3>
+      <Accordions {...args} color="neutral" />
+    </div>
+    <div>
+      <h3>Danger</h3>
+      <Accordions {...args} color="danger" />
+    </div>
+    <div>
+      <h3>Success</h3>
+      <Accordions {...args} color="success" />
+    </div>
+    <div>
+      <h3>Warning</h3>
+      <Accordions {...args} color="warning" />
+    </div>
+  </>
 ```
 
 ### Removing Divider
@@ -183,8 +183,8 @@ function FAQAccordion() {
       summary: 'What payment methods do you accept?',
       details: (
         <Typography>
-          We accept Visa, MasterCard, American Express, and PayPal.
-          All payments are processed securely through our payment gateway.
+          We accept Visa, MasterCard, American Express, and PayPal. All payments are processed securely through our
+          payment gateway.
         </Typography>
       ),
     },
@@ -192,9 +192,8 @@ function FAQAccordion() {
       summary: 'How can I track my order?',
       details: (
         <Typography>
-          Once your order ships, you'll receive an email with a tracking
-          number. You can use this number on our website or the carrier's
-          site to track your package.
+          Once your order ships, you'll receive an email with a tracking number. You can use this number on our website
+          or the carrier's site to track your package.
         </Typography>
       ),
     },
@@ -235,18 +234,11 @@ function SettingsAccordion({ settings, onSettingChange }) {
         <Stack gap={2}>
           <FormControl>
             <FormLabel>Display Name</FormLabel>
-            <Input
-              value={settings.displayName}
-              onChange={(e) => onSettingChange('displayName', e.target.value)}
-            />
+            <Input value={settings.displayName} onChange={(e) => onSettingChange('displayName', e.target.value)} />
           </FormControl>
           <FormControl>
             <FormLabel>Email</FormLabel>
-            <Input
-              type="email"
-              value={settings.email}
-              onChange={(e) => onSettingChange('email', e.target.value)}
-            />
+            <Input type="email" value={settings.email} onChange={(e) => onSettingChange('email', e.target.value)} />
           </FormControl>
         </Stack>
       ),
@@ -258,16 +250,12 @@ function SettingsAccordion({ settings, onSettingChange }) {
           <Checkbox
             label="Email notifications"
             checked={settings.emailNotifications}
-            onChange={(e) =>
-              onSettingChange('emailNotifications', e.target.checked)
-            }
+            onChange={(e) => onSettingChange('emailNotifications', e.target.checked)}
           />
           <Checkbox
             label="Push notifications"
             checked={settings.pushNotifications}
-            onChange={(e) =>
-              onSettingChange('pushNotifications', e.target.checked)
-            }
+            onChange={(e) => onSettingChange('pushNotifications', e.target.checked)}
           />
           <Checkbox
             label="Weekly digest"
@@ -314,9 +302,7 @@ function ProductAccordion({ product }) {
   const productDetails = [
     {
       summary: 'Description',
-      details: (
-        <Typography>{product.description}</Typography>
-      ),
+      details: <Typography>{product.description}</Typography>,
     },
     {
       summary: 'Specifications',
@@ -345,15 +331,11 @@ function ProductAccordion({ product }) {
         <Stack gap={2}>
           <Box>
             <Typography level="title-sm">Shipping</Typography>
-            <Typography level="body-sm">
-              Free shipping on orders over $50. Standard delivery 3-5 days.
-            </Typography>
+            <Typography level="body-sm">Free shipping on orders over $50. Standard delivery 3-5 days.</Typography>
           </Box>
           <Box>
             <Typography level="title-sm">Returns</Typography>
-            <Typography level="body-sm">
-              30-day return policy. Items must be unused with original tags.
-            </Typography>
+            <Typography level="body-sm">30-day return policy. Items must be unused with original tags.</Typography>
           </Box>
         </Stack>
       ),
@@ -397,19 +379,13 @@ function NavigationAccordion() {
       details: (
         <List size="sm">
           <ListItem>
-            <ListItemButton onClick={() => navigate('/products/electronics')}>
-              Electronics
-            </ListItemButton>
+            <ListItemButton onClick={() => navigate('/products/electronics')}>Electronics</ListItemButton>
           </ListItem>
           <ListItem>
-            <ListItemButton onClick={() => navigate('/products/clothing')}>
-              Clothing
-            </ListItemButton>
+            <ListItemButton onClick={() => navigate('/products/clothing')}>Clothing</ListItemButton>
           </ListItem>
           <ListItem>
-            <ListItemButton onClick={() => navigate('/products/home')}>
-              Home & Garden
-            </ListItemButton>
+            <ListItemButton onClick={() => navigate('/products/home')}>Home & Garden</ListItemButton>
           </ListItem>
         </List>
       ),
@@ -419,14 +395,10 @@ function NavigationAccordion() {
       details: (
         <List size="sm">
           <ListItem>
-            <ListItemButton onClick={() => navigate('/services/consulting')}>
-              Consulting
-            </ListItemButton>
+            <ListItemButton onClick={() => navigate('/services/consulting')}>Consulting</ListItemButton>
           </ListItem>
           <ListItem>
-            <ListItemButton onClick={() => navigate('/services/support')}>
-              Support
-            </ListItemButton>
+            <ListItemButton onClick={() => navigate('/services/support')}>Support</ListItemButton>
           </ListItem>
         </List>
       ),
@@ -436,19 +408,13 @@ function NavigationAccordion() {
       details: (
         <List size="sm">
           <ListItem>
-            <ListItemButton onClick={() => navigate('/docs')}>
-              Documentation
-            </ListItemButton>
+            <ListItemButton onClick={() => navigate('/docs')}>Documentation</ListItemButton>
           </ListItem>
           <ListItem>
-            <ListItemButton onClick={() => navigate('/blog')}>
-              Blog
-            </ListItemButton>
+            <ListItemButton onClick={() => navigate('/blog')}>Blog</ListItemButton>
           </ListItem>
           <ListItem>
-            <ListItemButton onClick={() => navigate('/tutorials')}>
-              Tutorials
-            </ListItemButton>
+            <ListItemButton onClick={() => navigate('/tutorials')}>Tutorials</ListItemButton>
           </ListItem>
         </List>
       ),
@@ -473,17 +439,11 @@ function HelpAccordion() {
       details: (
         <Stack gap={2}>
           <Typography level="title-sm">Step 1: Create an Account</Typography>
-          <Typography level="body-sm">
-            Click the "Sign Up" button and fill in your details.
-          </Typography>
+          <Typography level="body-sm">Click the "Sign Up" button and fill in your details.</Typography>
           <Typography level="title-sm">Step 2: Verify Email</Typography>
-          <Typography level="body-sm">
-            Check your inbox for a verification email and click the link.
-          </Typography>
+          <Typography level="body-sm">Check your inbox for a verification email and click the link.</Typography>
           <Typography level="title-sm">Step 3: Complete Profile</Typography>
-          <Typography level="body-sm">
-            Add your profile picture and bio to personalize your account.
-          </Typography>
+          <Typography level="body-sm">Add your profile picture and bio to personalize your account.</Typography>
         </Stack>
       ),
     },
@@ -495,17 +455,13 @@ function HelpAccordion() {
             <Typography level="title-sm" color="danger">
               Can't log in?
             </Typography>
-            <Typography level="body-sm">
-              Try resetting your password or clearing your browser cache.
-            </Typography>
+            <Typography level="body-sm">Try resetting your password or clearing your browser cache.</Typography>
           </Box>
           <Box>
             <Typography level="title-sm" color="danger">
               Page not loading?
             </Typography>
-            <Typography level="body-sm">
-              Check your internet connection and try refreshing the page.
-            </Typography>
+            <Typography level="body-sm">Check your internet connection and try refreshing the page.</Typography>
           </Box>
         </Stack>
       ),
@@ -514,19 +470,11 @@ function HelpAccordion() {
       summary: 'Contact Support',
       details: (
         <Stack gap={2}>
-          <Typography level="body-sm">
-            Need more help? Reach out to our support team:
-          </Typography>
+          <Typography level="body-sm">Need more help? Reach out to our support team:</Typography>
           <Stack gap={1}>
-            <Typography level="body-sm">
-              📧 Email: support@example.com
-            </Typography>
-            <Typography level="body-sm">
-              💬 Live Chat: Available 9am-5pm EST
-            </Typography>
-            <Typography level="body-sm">
-              📞 Phone: 1-800-EXAMPLE
-            </Typography>
+            <Typography level="body-sm">📧 Email: support@example.com</Typography>
+            <Typography level="body-sm">💬 Live Chat: Available 9am-5pm EST</Typography>
+            <Typography level="body-sm">📞 Phone: 1-800-EXAMPLE</Typography>
           </Stack>
         </Stack>
       ),
@@ -571,18 +519,14 @@ function MultiSectionForm({ onSubmit }) {
               <FormLabel>First Name</FormLabel>
               <Input
                 value={formData.personal.firstName}
-                onChange={(e) =>
-                  updateField('personal', 'firstName', e.target.value)
-                }
+                onChange={(e) => updateField('personal', 'firstName', e.target.value)}
               />
             </FormControl>
             <FormControl sx={{ flex: 1 }}>
               <FormLabel>Last Name</FormLabel>
               <Input
                 value={formData.personal.lastName}
-                onChange={(e) =>
-                  updateField('personal', 'lastName', e.target.value)
-                }
+                onChange={(e) => updateField('personal', 'lastName', e.target.value)}
               />
             </FormControl>
           </Stack>
@@ -591,9 +535,7 @@ function MultiSectionForm({ onSubmit }) {
             <Input
               type="email"
               value={formData.personal.email}
-              onChange={(e) =>
-                updateField('personal', 'email', e.target.value)
-              }
+              onChange={(e) => updateField('personal', 'email', e.target.value)}
             />
           </FormControl>
         </Stack>
@@ -605,30 +547,18 @@ function MultiSectionForm({ onSubmit }) {
         <Stack gap={2}>
           <FormControl>
             <FormLabel>Street Address</FormLabel>
-            <Input
-              value={formData.address.street}
-              onChange={(e) =>
-                updateField('address', 'street', e.target.value)
-              }
-            />
+            <Input value={formData.address.street} onChange={(e) => updateField('address', 'street', e.target.value)} />
           </FormControl>
           <Stack direction="row" gap={2}>
             <FormControl sx={{ flex: 2 }}>
               <FormLabel>City</FormLabel>
-              <Input
-                value={formData.address.city}
-                onChange={(e) =>
-                  updateField('address', 'city', e.target.value)
-                }
-              />
+              <Input value={formData.address.city} onChange={(e) => updateField('address', 'city', e.target.value)} />
             </FormControl>
             <FormControl sx={{ flex: 1 }}>
               <FormLabel>ZIP Code</FormLabel>
               <Input
                 value={formData.address.zipCode}
-                onChange={(e) =>
-                  updateField('address', 'zipCode', e.target.value)
-                }
+                onChange={(e) => updateField('address', 'zipCode', e.target.value)}
               />
             </FormControl>
           </Stack>
@@ -644,9 +574,7 @@ function MultiSectionForm({ onSubmit }) {
             <Input
               placeholder="1234 5678 9012 3456"
               value={formData.payment.cardNumber}
-              onChange={(e) =>
-                updateField('payment', 'cardNumber', e.target.value)
-              }
+              onChange={(e) => updateField('payment', 'cardNumber', e.target.value)}
             />
           </FormControl>
           <Stack direction="row" gap={2}>
@@ -655,9 +583,7 @@ function MultiSectionForm({ onSubmit }) {
               <Input
                 placeholder="MM/YY"
                 value={formData.payment.expiry}
-                onChange={(e) =>
-                  updateField('payment', 'expiry', e.target.value)
-                }
+                onChange={(e) => updateField('payment', 'expiry', e.target.value)}
               />
             </FormControl>
             <FormControl sx={{ flex: 1 }}>
@@ -666,9 +592,7 @@ function MultiSectionForm({ onSubmit }) {
                 type="password"
                 placeholder="123"
                 value={formData.payment.cvv}
-                onChange={(e) =>
-                  updateField('payment', 'cvv', e.target.value)
-                }
+                onChange={(e) => updateField('payment', 'cvv', e.target.value)}
               />
             </FormControl>
           </Stack>
@@ -704,7 +628,7 @@ function MultiSectionForm({ onSubmit }) {
 
 ```tsx
 interface AccordionItem {
-  summary: string;    // Header text displayed when collapsed
+  summary: string; // Header text displayed when collapsed
   details: ReactNode; // Content shown when expanded
 }
 
@@ -803,7 +727,7 @@ Accordions includes built-in accessibility features:
 <Accordions
   items={[
     {
-      summary: 'Shipping Information',  // Announced as header
+      summary: 'Shipping Information', // Announced as header
       details: <Typography>Content...</Typography>,
     },
   ]}
@@ -969,10 +893,10 @@ const accordionItems = useMemo(
       details: <ExpensiveComponent data={data2} />,
     },
   ],
-  [data1, data2]
+  [data1, data2],
 );
 
-<Accordions items={accordionItems} />
+<Accordions items={accordionItems} />;
 ```
 
 ### Avoid Inline Functions in Items
@@ -984,7 +908,7 @@ const accordionItems = useMemo(
     summary: item.title,
     details: <Content data={item} />,
   }))}
-/>
+/>;
 
 // ✅ Good: Memoized transformation
 const items = useMemo(
@@ -993,9 +917,9 @@ const items = useMemo(
       summary: item.title,
       details: <Content data={item} />,
     })),
-  [data]
+  [data],
 );
-<Accordions items={items} />
+<Accordions items={items} />;
 ```
 
 ### Virtualize Long Lists
@@ -1012,20 +936,13 @@ function FilteredAccordions({ allItems }) {
   const [search, setSearch] = useState('');
 
   const filteredItems = useMemo(
-    () =>
-      allItems.filter((item) =>
-        item.summary.toLowerCase().includes(search.toLowerCase())
-      ),
-    [allItems, search]
+    () => allItems.filter((item) => item.summary.toLowerCase().includes(search.toLowerCase())),
+    [allItems, search],
   );
 
   return (
     <Stack gap={2}>
-      <Input
-        placeholder="Search..."
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-      />
+      <Input placeholder="Search..." value={search} onChange={(e) => setSearch(e.target.value)} />
       <Accordions items={filteredItems.slice(0, 10)} />
       {filteredItems.length > 10 && (
         <Typography level="body-sm" color="neutral">