@cdx-ui/components 0.2.4 → 0.3.0

package/docs/components/menu/content.md

@@ -24,7 +24,7 @@ export default function MenuBasicDemo() {
     <Box className="items-start gap-2">
       <Menu>
         <Menu.Trigger asChild>
-          <Button color="action" variant="outline">
+          <Button variant="outline">
             <Button.Label>Everyday Checking</Button.Label>
             <Button.Icon as={KeyboardArrowDown} position="trailing" />
           </Button>
@@ -73,7 +73,7 @@ export default function MenuCheckboxItemsDemo() {
   return (
     <Menu>
       <Menu.Trigger asChild>
-        <Button color="action" variant="outline">
+        <Button variant="outline">
           <Button.Label>Account view · {enabledCount} enabled</Button.Label>
           <Button.Icon as={KeyboardArrowDown} position="trailing" />
         </Button>
@@ -122,7 +122,7 @@ export default function MenuRadioItemsDemo() {
   return (
     <Menu>
       <Menu.Trigger asChild>
-        <Button color="action" variant="outline">
+        <Button variant="outline">
           <Button.Label>{selectedLabel}</Button.Label>
           <Button.Icon as={KeyboardArrowDown} position="trailing" />
         </Button>
@@ -183,7 +183,7 @@ import { Menu } from '@cdx-ui/components';
 
 export default function MenuWithShortcutsDemo() {
   return (
-    <Menu.Content accessibilityLabel="Edit menu" className="w-56">
+    <Menu.Content accessibilityLabel="Edit menu" className="w-full max-w-56">
       <Menu.Item onPress={() => undefined}>
         <Menu.ItemLabel>Undo</Menu.ItemLabel>
         <Menu.ItemShortcut>⌘Z</Menu.ItemShortcut>
@@ -211,7 +211,7 @@ import { Delete, Edit } from '@cdx-ui/icons';
 
 export default function MenuDestructiveDemo() {
   return (
-    <Menu.Content accessibilityLabel="Account actions" className="w-56">
+    <Menu.Content accessibilityLabel="Account actions" className="w-full max-w-56">
       <Menu.Item onPress={() => undefined}>
         <Menu.ItemIcon as={Edit} />
         <Menu.ItemLabel>Edit nickname</Menu.ItemLabel>
@@ -235,7 +235,7 @@ import { Menu } from '@cdx-ui/components';
 
 export default function MenuSectionsDemo() {
   return (
-    <Menu.Content accessibilityLabel="Account filters" className="w-56">
+    <Menu.Content accessibilityLabel="Account filters" className="w-full max-w-56">
       <Menu.SectionLabel>Status</Menu.SectionLabel>
       <Menu.Item onPress={() => undefined}>
         <Menu.ItemLabel>Active</Menu.ItemLabel>
@@ -266,7 +266,7 @@ import { Edit, Person } from '@cdx-ui/icons';
 
 export default function MenuInsetDemo() {
   return (
-    <Menu.Content accessibilityLabel="Profile actions" className="w-56">
+    <Menu.Content accessibilityLabel="Profile actions" className="w-full max-w-56">
       <Menu.Item onPress={() => undefined}>
         <Menu.ItemIcon as={Person} />
         <Menu.ItemLabel>View profile</Menu.ItemLabel>
@@ -295,11 +295,11 @@ export default function MenuGroupHeaderDemo() {
   const [showPending, setShowPending] = useState(true);
 
   return (
-    <Menu.Content accessibilityLabel="Transaction filters" className="w-72">
+    <Menu.Content accessibilityLabel="Transaction filters" className="w-full max-w-72">
       <Menu.GroupHeader>
         <Menu.ItemLabel>Filter by</Menu.ItemLabel>
         <Menu.ItemAction>
-          <Button variant="ghost" color="action" size="small" onPress={() => setShowPending(false)}>
+          <Button variant="ghost" size="small" onPress={() => setShowPending(false)}>
             <Button.Label>Clear</Button.Label>
           </Button>
         </Menu.ItemAction>
@@ -328,7 +328,7 @@ export default function MenuItemControlDemo() {
   const [status, setStatus] = useState('open');
 
   return (
-    <Menu.Content accessibilityLabel="Transaction filters" className="w-64">
+    <Menu.Content accessibilityLabel="Transaction filters" className="w-full max-w-64">
       <Menu.SectionLabel>Activity</Menu.SectionLabel>
       <Menu.CheckboxItem isChecked={pending} onChange={setPending}>
         <Menu.ItemControl />
@@ -372,7 +372,7 @@ export default function MenuItemCountDemo() {
   const [categories, setCategories] = useState<Record<string, boolean>>({ admin: true });
 
   return (
-    <Menu.Content accessibilityLabel="Categories" className="w-64">
+    <Menu.Content accessibilityLabel="Categories" className="w-full max-w-64">
       {CATEGORIES.map((category) => (
         <Menu.CheckboxItem
           key={category.id}
@@ -408,19 +408,18 @@ export default function MenuItemActionDemo() {
     <Box className="items-start gap-2">
       <Menu>
         <Menu.Trigger asChild>
-          <Button color="action" variant="outline">
+          <Button variant="outline">
             <Button.Label>Everyday Checking</Button.Label>
             <Button.Icon as={KeyboardArrowDown} position="trailing" />
           </Button>
         </Menu.Trigger>
-        <Menu.Popup className="w-72">
+        <Menu.Popup className="w-full max-w-72">
           <Menu.Content accessibilityLabel="Everyday Checking actions">
             <Menu.Item onPress={() => setResult('Opening account details')}>
               <Menu.ItemLabel>View details</Menu.ItemLabel>
               <Menu.ItemAction>
                 <Button
                   variant="ghost"
-                  color="action"
                   size="small"
                   onPress={() => setResult('Copied account number')}
                 >
@@ -491,17 +490,17 @@ export default function MenuWithFiltersDemo() {
   return (
     <Menu>
       <Menu.Trigger asChild>
-        <Button color="action" variant="outline">
+        <Button variant="outline">
           <Button.Label>Catalog filters</Button.Label>
           <Button.Icon as={KeyboardArrowDown} position="trailing" />
         </Button>
       </Menu.Trigger>
-      <Menu.Popup className="w-72">
+      <Menu.Popup className="w-full max-w-72">
         <Menu.Content accessibilityLabel="Catalog filters">
           <Menu.GroupHeader>
             <Menu.ItemLabel>Filter by</Menu.ItemLabel>
             <Menu.ItemAction>
-              <Button variant="ghost" color="action" size="small" onPress={clearFilters}>
+              <Button variant="ghost" size="small" onPress={clearFilters}>
                 <Button.Label>Clear filters</Button.Label>
               </Button>
             </Menu.ItemAction>
@@ -583,7 +582,7 @@ export default function MenuScrollableDemo() {
   return (
     <Menu>
       <Menu.Trigger asChild>
-        <Button color="action" variant="outline">
+        <Button variant="outline">
           <Button.Label>Statement · {selectedPeriod}</Button.Label>
           <Button.Icon as={KeyboardArrowDown} position="trailing" />
         </Button>
@@ -611,7 +610,7 @@ export default function MenuScrollableDemo() {
 Use `asChild` to open a menu from any pressable component, such as a button, chip, or icon button.
 
 ```tsx
-import { Box, Button, Card, Chip, IconButton, Menu, Text } from '@cdx-ui/components';
+import { Box, Button, Card, Chip, IconButton, ListItem, Menu, Text } from '@cdx-ui/components';
 import { AccountBalance, KeyboardArrowDown, MoreHoriz } from '@cdx-ui/icons';
 
 export default function MenuCustomTriggersDemo() {
@@ -623,7 +622,7 @@ export default function MenuCustomTriggersDemo() {
         </Text>
         <Menu>
           <Menu.Trigger asChild>
-            <Button color="action">
+            <Button>
               <Button.Label>Move money</Button.Label>
               <Button.Icon as={KeyboardArrowDown} position="trailing" />
             </Button>
@@ -676,31 +675,39 @@ export default function MenuCustomTriggersDemo() {
         <Text color="secondary" size="sm">
           Card management
         </Text>
-        <Card className="flex-row items-center justify-between px-2 py-1">
-          <Text>Cash Rewards ••1842</Text>
-          <Menu placement="bottom-end">
-            <Menu.Trigger asChild>
-              <IconButton
-                as={MoreHoriz}
-                variant="ghost"
-                size="small"
-                accessibilityLabel="Cash Rewards card actions"
-              />
-            </Menu.Trigger>
-            <Menu.Popup>
-              <Menu.Content accessibilityLabel="Cash Rewards card actions">
-                <Menu.Item onPress={() => undefined}>
-                  <Menu.ItemLabel>Lock card</Menu.ItemLabel>
-                </Menu.Item>
-                <Menu.Item onPress={() => undefined}>
-                  <Menu.ItemLabel>Replace card</Menu.ItemLabel>
-                </Menu.Item>
-                <Menu.Item color="danger" onPress={() => undefined}>
-                  <Menu.ItemLabel>Report lost or stolen</Menu.ItemLabel>
-                </Menu.Item>
-              </Menu.Content>
-            </Menu.Popup>
-          </Menu>
+        <Card fullBleed>
+          <Card.Content>
+            <ListItem showSeparator={false}>
+              <ListItem.Content>
+                <ListItem.Title>Cash Rewards ••1842</ListItem.Title>
+              </ListItem.Content>
+              <ListItem.TrailingSlot>
+                <Menu placement="bottom-end">
+                  <Menu.Trigger asChild>
+                    <IconButton
+                      as={MoreHoriz}
+                      variant="ghost"
+                      size="small"
+                      accessibilityLabel="Cash Rewards card actions"
+                    />
+                  </Menu.Trigger>
+                  <Menu.Popup>
+                    <Menu.Content accessibilityLabel="Cash Rewards card actions">
+                      <Menu.Item onPress={() => undefined}>
+                        <Menu.ItemLabel>Lock card</Menu.ItemLabel>
+                      </Menu.Item>
+                      <Menu.Item onPress={() => undefined}>
+                        <Menu.ItemLabel>Replace card</Menu.ItemLabel>
+                      </Menu.Item>
+                      <Menu.Item color="danger" onPress={() => undefined}>
+                        <Menu.ItemLabel>Report lost or stolen</Menu.ItemLabel>
+                      </Menu.Item>
+                    </Menu.Content>
+                  </Menu.Popup>
+                </Menu>
+              </ListItem.TrailingSlot>
+            </ListItem>
+          </Card.Content>
         </Card>
       </Box>
     </Box>
@@ -745,7 +752,7 @@ function PlacementMenu({ placement }: PlacementMenuProps) {
   return (
     <Menu placement={placement}>
       <Menu.Trigger asChild>
-        <Button variant="outline" color="action" size="small">
+        <Button variant="outline" size="small">
           <Button.Label>{placement}</Button.Label>
         </Button>
       </Menu.Trigger>
@@ -807,7 +814,7 @@ function AutomaticPlacementMenu({ placement }: Readonly<{ placement: AutomaticPl
   return (
     <Menu placement={placement}>
       <Menu.Trigger asChild>
-        <Button variant="outline" color="action" size="small">
+        <Button variant="outline" size="small">
           <Button.Label>{placement}</Button.Label>
         </Button>
       </Menu.Trigger>
@@ -847,7 +854,7 @@ import { Menu } from '@cdx-ui/components';
 
 export default function MenuDisabledDemo() {
   return (
-    <Menu.Content accessibilityLabel="Account actions" className="w-64">
+    <Menu.Content accessibilityLabel="Account actions" className="w-full max-w-64">
       <Menu.Item onPress={() => undefined}>
         <Menu.ItemLabel>Edit</Menu.ItemLabel>
       </Menu.Item>
@@ -934,12 +941,12 @@ export default function MenuCustomItemsDemo() {
   return (
     <Menu>
       <Menu.Trigger asChild>
-        <Button color="action" variant="outline">
+        <Button variant="outline">
           <Button.Label>From {selectedAccount.name}</Button.Label>
           <Button.Icon as={KeyboardArrowDown} position="trailing" />
         </Button>
       </Menu.Trigger>
-      <Menu.Popup className="w-80">
+      <Menu.Popup className="w-full max-w-80">
         <Menu.Content accessibilityLabel="Funding account">
           <Menu.RadioGroup
             value={selectedAccountId}

package/docs/components/month-calendar/content.md

@@ -57,6 +57,8 @@ export default function MonthCalendarDisabledDemo() {
 
 By default, `MonthCalendar` renders a year header — tap it to switch to the year picker, or use the previous/next controls to shift the visible year — followed by a twelve-month grid. `locale` defaults to `en-US` and controls month formatting.
 
+The year picker replaces the month grid with a scrolling list of years at the same height and opens scrolled to the visible year. It lists the years from `minValue` to `maxValue`; a side with no bound extends 100 years before or after the current year.
+
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `className?` | `string` | — | — |

package/docs/components/range-calendar/content.md

@@ -38,7 +38,7 @@ export default function RangeCalendarBasicDemo() {
 
 ## Date limits
 
-Set `minValue` and `maxValue` to restrict which days can be selected.
+Set `minValue` and `maxValue` to restrict which days can be selected. The bounds also set the year picker's range: it lists every year from the `minValue` year to the `maxValue` year, and a side with no bound extends 100 years from today.
 
 ```tsx
 import { useState } from 'react';
@@ -94,6 +94,8 @@ export default function RangeCalendarDisabledDemo() {
 
 By default, `RangeCalendar` renders a month header with previous/next navigation and a year drill-down, followed by the day grid. Selecting a day while a range is empty or complete starts a new range; the second tap completes it, and an inverted selection is normalized so the earlier day becomes the start. `locale` defaults to `en-US` and controls weekday and month formatting.
 
+The year drill-down replaces the day grid with a scrolling list of years at the same height, scrolled to the visible year when it opens. It lists the years from `minValue` to `maxValue`; a side with no bound extends 100 years before or after the current year. Selecting a year keeps the visible month, moved inside the bounds when the chosen year is a boundary year, and returns to the day grid.
+
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the calendar's own styles. |

package/docs/components/reorderable-list/content.md

@@ -1,4 +1,4 @@
-# ReorderableList (https://design.candescent.com/docs/components/reorderable-list)
+# Reorderable List (https://design.candescent.com/docs/components/reorderable-list)
 
 Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/layout-reorderablelist--default)
 
@@ -66,7 +66,7 @@ export default function ReorderableListBasicDemo() {
               <ListItem showSeparator={index < contacts.length - 1}>
                 <ListItem.DragHandle accessibilityLabel={`Reorder ${item.name}`} />
                 <ListItem.LeadingSlot>
-                  <Avatar size="md">
+                  <Avatar>
                     <Avatar.Text>{item.name}</Avatar.Text>
                   </Avatar>
                 </ListItem.LeadingSlot>
@@ -249,7 +249,9 @@ export default function ReorderableListRemovableDemo() {
               )}
             />
           ) : (
-            <Text className="body-sm text-content-secondary p-4">No payees left.</Text>
+            <Text size="sm" color="secondary" className="m-4">
+              No payees left.
+            </Text>
           )}
         </Card.Content>
       </Card>

package/docs/components/scoped-theme/content.md

@@ -1,4 +1,4 @@
-# ScopedTheme (https://design.candescent.com/docs/components/scoped-theme)
+# Scoped Theme (https://design.candescent.com/docs/components/scoped-theme)
 
 Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/theming-scopedtheme--default)
 

package/docs/components/scroll-shadow/content.md

@@ -1,4 +1,4 @@
-# ScrollShadow (https://design.candescent.com/docs/components/scroll-shadow)
+# Scroll Shadow (https://design.candescent.com/docs/components/scroll-shadow)
 
 Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/layout-scrollshadow--default)
 
@@ -165,6 +165,7 @@ export default function ScrollShadowHorizontalDemo() {
 
 ```tsx
 import {
+  Box,
   Card,
   QuickActionButton,
   ScrollShadow,
@@ -192,21 +193,23 @@ export default function ScrollShadowSurfacesDemo() {
             {surface}
           </Text>
           <Card fullBleed className={className}>
-            <Card.Content className="py-5">
-              <ScrollShadow surface={surface} size="large">
-                <ScrollView
-                  horizontal
-                  showsHorizontalScrollIndicator={false}
-                  contentContainerClassName="gap-4 px-5"
-                >
-                  {QUICK_ACTIONS.map((action) => (
-                    <QuickActionButton key={action.label}>
-                      <QuickActionButton.Icon as={action.icon} />
-                      <QuickActionButton.Label>{action.label}</QuickActionButton.Label>
-                    </QuickActionButton>
-                  ))}
-                </ScrollView>
-              </ScrollShadow>
+            <Card.Content>
+              <Box className="py-5">
+                <ScrollShadow surface={surface} size="large">
+                  <ScrollView
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    contentContainerClassName="gap-4 px-5"
+                  >
+                    {QUICK_ACTIONS.map((action) => (
+                      <QuickActionButton key={action.label}>
+                        <QuickActionButton.Icon as={action.icon} />
+                        <QuickActionButton.Label>{action.label}</QuickActionButton.Label>
+                      </QuickActionButton>
+                    ))}
+                  </ScrollView>
+                </ScrollShadow>
+              </Box>
             </Card.Content>
           </Card>
         </VStack>
@@ -432,16 +435,18 @@ export default function ScrollShadowStylingDemo() {
           edgeClassName=&quot;w-24&quot;
         </Text>
         <Card fullBleed>
-          <Card.Content className="py-5">
-            <ScrollShadow surface="primary" edgeClassName="w-24">
-              <ScrollView
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                contentContainerClassName="px-5"
-              >
-                <CategoryPicker />
-              </ScrollView>
-            </ScrollShadow>
+          <Card.Content>
+            <Box className="py-5">
+              <ScrollShadow surface="primary" edgeClassName="w-24">
+                <ScrollView
+                  horizontal
+                  showsHorizontalScrollIndicator={false}
+                  contentContainerClassName="px-5"
+                >
+                  <CategoryPicker />
+                </ScrollView>
+              </ScrollShadow>
+            </Box>
           </Card.Content>
         </Card>
       </VStack>
@@ -451,16 +456,18 @@ export default function ScrollShadowStylingDemo() {
           edgeClassName=&quot;opacity-85&quot;
         </Text>
         <Card fullBleed>
-          <Card.Content className="py-5">
-            <ScrollShadow surface="primary" size="small" edgeClassName="opacity-85">
-              <ScrollView
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                contentContainerClassName="px-5"
-              >
-                <CategoryPicker />
-              </ScrollView>
-            </ScrollShadow>
+          <Card.Content>
+            <Box className="py-5">
+              <ScrollShadow surface="primary" size="small" edgeClassName="opacity-85">
+                <ScrollView
+                  horizontal
+                  showsHorizontalScrollIndicator={false}
+                  contentContainerClassName="px-5"
+                >
+                  <CategoryPicker />
+                </ScrollView>
+              </ScrollShadow>
+            </Box>
           </Card.Content>
         </Card>
       </VStack>

package/docs/components/select/content.md

@@ -40,16 +40,16 @@ export default function SelectBasicDemo() {
 Use the default size for most forms and `small` for compact layouts.
 
 ```tsx
-import { Select, Text, View, type SelectProps } from '@cdx-ui/components';
+import { Box, Select, Text, type SelectProps } from '@cdx-ui/components';
 import { accounts } from './_data';
 
 const sizes = ['default', 'small'] as const satisfies readonly NonNullable<SelectProps['size']>[];
 
 export default function SelectSizesDemo() {
   return (
-    <View className="w-full gap-4">
+    <Box className="w-full gap-4">
       {sizes.map((size) => (
-        <View key={size} className="gap-2">
+        <Box key={size} className="gap-2">
           <Text size="sm" color="secondary">
             {size}
           </Text>
@@ -70,9 +70,9 @@ export default function SelectSizesDemo() {
               ))}
             </Select.Content>
           </Select>
-        </View>
+        </Box>
       ))}
-    </View>
+    </Box>
   );
 }
 ```
@@ -123,7 +123,7 @@ export default function SelectCustomTriggerDemo() {
         asChild
         indicator={<Button.Icon as={KeyboardArrowDown} position="trailing" />}
       >
-        <Button variant="outline" color="action">
+        <Button variant="outline">
           <Button.Label>Filter accounts</Button.Label>
         </Button>
       </Select.Trigger>
@@ -132,7 +132,7 @@ export default function SelectCustomTriggerDemo() {
           <Select.Item
             key={account.value}
             value={account.value}
-            indicator={<Icon as={CheckCircle} color="action" className="size-5" />}
+            indicator={<Icon as={CheckCircle} color="action" />}
           >
             <Select.ItemLabel>{account.label}</Select.ItemLabel>
           </Select.Item>
@@ -143,6 +143,79 @@ export default function SelectCustomTriggerDemo() {
 }
 ```
 
+## Custom value display
+
+Pass children to `Select.Value` to replace the default label. Read the selected option from your own state, and render the placeholder by leaving the children empty when nothing is selected.
+
+```tsx
+import { useState } from 'react';
+import { Select, Text } from '@cdx-ui/components';
+import { accountDetails } from './_data';
+
+export default function SelectCustomValueDemo() {
+  const [value, setValue] = useState<string>();
+  const selected = accountDetails.find((account) => account.value === value);
+
+  return (
+    <Select
+      items={accountDetails}
+      value={value}
+      onValueChange={setValue}
+      accessibilityLabel="Account"
+      className="w-full"
+    >
+      <Select.Trigger>
+        <Select.Value placeholder="Select an account…">
+          {selected && (
+            <>
+              {selected.label} <Text color="secondary">{selected.mask}</Text>
+            </>
+          )}
+        </Select.Value>
+      </Select.Trigger>
+      <Select.Content>
+        {accountDetails.map((account) => (
+          <Select.Item key={account.value} value={account.value}>
+            <Select.ItemLabel>{account.label}</Select.ItemLabel>
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select>
+  );
+}
+```
+
+## Custom item display
+
+Compose any content inside `Select.Item` to show more than a label, such as a secondary line. Keep `Select.ItemLabel` for the primary text so the selected state and keyboard navigation stay in sync.
+
+```tsx
+import { Select, Text, VStack } from '@cdx-ui/components';
+import { accountDetails } from './_data';
+
+export default function SelectCustomItemDemo() {
+  return (
+    <Select items={accountDetails} accessibilityLabel="Account" className="w-full">
+      <Select.Trigger>
+        <Select.Value placeholder="Select an account…" />
+      </Select.Trigger>
+      <Select.Content>
+        {accountDetails.map((account) => (
+          <Select.Item key={account.value} value={account.value}>
+            <VStack className="flex-1">
+              <Select.ItemLabel>{account.label}</Select.ItemLabel>
+              <Text size="sm" color="secondary">
+                {account.mask} · {account.balance}
+              </Text>
+            </VStack>
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select>
+  );
+}
+```
+
 ## Placement
 
 The default placement is `bottom-start`. Choose a side alone to center the overlay, or append `-start` or `-end` to align it with the corresponding edge of the trigger. The requested side is preferred rather than guaranteed: when the overlay would overflow the viewport it still flips to the opposite side and shifts along the cross axis.

package/docs/components/skeleton/content.md

@@ -14,7 +14,7 @@ import { Skeleton } from '@cdx-ui/components';
 import { Skeleton } from '@cdx-ui/components';
 
 export default function SkeletonBasicDemo() {
-  return <Skeleton className="h-5 w-[200px]" />;
+  return <Skeleton className="h-5 w-50" />;
 }
 ```
 
@@ -27,7 +27,7 @@ import { Box, Skeleton } from '@cdx-ui/components';
 
 export default function SkeletonTextLinesDemo() {
   return (
-    <Box className="w-[280px] gap-2">
+    <Box className="w-70 gap-2">
       <Skeleton className="h-4 w-full" />
       <Skeleton className="h-4 w-4/5" />
       <Skeleton className="h-4 w-3/5" />
@@ -48,7 +48,7 @@ export default function SkeletonAvatarDemo() {
     <HStack space="md" className="items-center">
       <Skeleton className="h-10 w-10 rounded-full" />
       <VStack space="sm">
-        <Skeleton className="h-3.5 w-[120px]" />
+        <Skeleton className="h-3.5 w-30" />
         <Skeleton className="h-3 w-20" />
       </VStack>
     </HStack>
@@ -77,11 +77,12 @@ export default function SkeletonCardDemo() {
       </Card.Header>
       <Card.Content className="gap-3">
         <Skeleton className="h-3.5 w-full" />
-        <Skeleton className="h-3.5 w-[90%]" />
-        <Skeleton className="h-3.5 w-[70%]" />
+        <Skeleton className="h-3.5 w-9/10" />
+        <Skeleton className="h-3.5 w-7/10" />
       </Card.Content>
       <Card.Footer>
-        <Skeleton className="h-11 w-full rounded-[var(--border-radius-button)]" />
+        {/* TODO(forge-ui): Skeleton has no button shape that follows the theme's button radius; using the default radius. */}
+        <Skeleton className="h-11 w-full" />
       </Card.Footer>
     </Card>
   );

package/docs/components/table/content.md

@@ -276,7 +276,7 @@ const categories = [
 
 export default function TableMobileSpendingBreakdownDemo() {
   return (
-    <Card className="w-full max-w-sm overflow-hidden">
+    <Card className="w-full max-w-sm">
       <Card.Stripe />
       <Card.Header>
         <Heading size="sm">Spending this month</Heading>
@@ -340,7 +340,7 @@ const spendingDays = [
 
 export default function TableMobileSpendingComparisonDemo() {
   return (
-    <Card className="w-full max-w-sm overflow-hidden">
+    <Card className="w-full max-w-sm">
       <Card.Stripe />
       <Card.Header className="flex-row items-center justify-between">
         <Heading size="sm">Spending patterns</Heading>