@adamosuiteservices/ui 2.18.6 → 2.19.1

package/docs/components/ui/kbd.md

@@ -25,7 +25,7 @@ import { Kbd, KbdGroup } from "@adamosuiteservices/ui/kbd";
 </KbdGroup>
 ```
 
-**Componentes**: 2 (Kbd, KbdGroup)
+**Components**: 2 (Kbd, KbdGroup)
 
 ## Props
 
@@ -41,7 +41,9 @@ import { Kbd, KbdGroup } from "@adamosuiteservices/ui/kbd";
 | Prop        | Type     | Description              |
 | ----------- | -------- | ------------------------ |
 | `className` | `string` | Additional CSS classes   |
-| ...props    | -        | All native `<div>` props |
+| ...props    | -        | All native `<kbd>` props |
+
+**Note**: Renders as a `<kbd>` element (semantic)
 
 ## Usage patterns
 
@@ -328,10 +330,10 @@ import { Icon } from "@adamosuiteservices/ui/icon";
 
 ### Kbd styles
 
-- **Background**: `bg-muted`
-- **Color**: `text-muted-foreground`
+- **Background**: `bg-accent`
+- **Color**: `text-accent-foreground`
 - **Height**: `h-5` (~20px)
-- **Min Width**: `min-w-5` (square mínimo)
+- **Min Width**: `min-w-5` (square minimum)
 - **Padding**: `px-1`
 - **Font**: `font-sans text-xs font-medium`
 - **Border**: `rounded-sm`
@@ -348,9 +350,8 @@ import { Icon } from "@adamosuiteservices/ui/icon";
 
 When inside Tooltip:
 
-- **Background**: `bg-background/20`
-- **Color**: `text-background`
-- **Dark mode**: `dark:bg-background/10`
+- **Background**: `bg-neutrals-0/20` (semi-transparent white)
+- **Color**: `text-neutrals-0` (white)
 
 ## Common symbols
 
@@ -425,7 +426,7 @@ When inside Tooltip:
 **Not visible in Tooltip**: Tooltip styles apply automatically  
 **Inconsistent spacing**: KbdGroup has `gap-1`, adjust with className if needed  
 **Selectable**: Verify it has `select-none` applied  
-**Background not visible**: Verify theme and color `bg-muted`  
+**Background not visible**: Verify theme and color `bg-accent`  
 **Too tall**: Fixed height `h-5`, don't change without adjusting padding
 
 ## References

package/docs/components/ui/label.md

@@ -19,7 +19,7 @@ import { Label } from "@adamosuiteservices/ui/label";
 <Input id="email" type="email" />
 ```
 
-**Componentes**: 1 (Label)
+**Components**: 1 (Label)
 
 ## Props
 
@@ -273,11 +273,11 @@ import { Checkbox } from "@adamosuiteservices/ui/checkbox";
 ## Base styles
 
 - **Display**: `flex items-center gap-2`
-- **Font**: `text-xs font-medium`
+- **Font**: `text-xs font-normal`
 - **Line height**: `leading-none`
 - **Select**: `select-none` (not selectable)
-- **Peer disabled**: `peer-disabled:cursor-not-allowed peer-disabled:opacity-50`
-- **Group disabled**: `group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50`
+- **Peer disabled**: `peer-disabled:cursor-not-allowed peer-disabled:text-disabled-foreground`
+- **Group disabled**: `group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:text-disabled-foreground`
 
 ## States
 
@@ -290,7 +290,7 @@ When the associated input (`peer`) is disabled:
 <Label htmlFor="disabled">Disabled field</Label>
 ```
 
-→ Label automáticamente `opacity-50` y `cursor-not-allowed`
+→ Label automatically applies `text-disabled-foreground` and `cursor-not-allowed`
 
 ### Disabled via group
 
@@ -303,7 +303,7 @@ When the container has `data-disabled`:
 </div>
 ```
 
-→ Label automáticamente `opacity-50` y `pointer-events-none`
+→ Label automatically applies `text-disabled-foreground` and `pointer-events-none`
 
 ## Accessibility
 

package/docs/components/ui/pagination.md

@@ -537,8 +537,8 @@ function App() {
 
 ### PaginationLink
 
-- **Active**: `isActive` → variant outline, `aria-current="page"`
-- **Inactive**: variant ghost
+- **Active**: `isActive` → `bg-accent` applied, `aria-current="page"`
+- **Inactive**: no background, variant `link-neutral`
 
 ### Disabled (previous/next)
 
@@ -562,7 +562,7 @@ className = "pointer-events-none opacity-50";
 ### PaginationLink
 
 - **Size default**: `size="icon"` (h-9 w-9)
-- **Variants**: ghost (inactive), outline (active)
+- **Variant**: `link-neutral` for all states; active adds `bg-accent`
 
 ### PaginationPrevious/Next
 

package/docs/components/ui/popover.md

@@ -11,6 +11,7 @@ The `Popover` component displays floating content anchored to a trigger element.
 ```typescript
 import {
   Popover,
+  PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
 } from "@adamosuiteservices/ui/popover";

package/docs/components/ui/progress.md

@@ -18,7 +18,7 @@ import { Progress } from "@adamosuiteservices/ui/progress";
 <Progress value={33} />
 ```
 
-**Componentes**: 1 (Progress)
+**Components**: 1 (Progress)
 
 ## Props
 
@@ -146,8 +146,8 @@ function App() {
 
 - **Height**: `h-2` default
 - **Border radius**: `rounded-full`
-- **Transition**: `transition-all` en indicator
-- **Transform**: `translateX` para animación
+- **Transition**: `transition-all` on indicator
+- **Transform**: `translateX` for animation
 
 ### Variant styles
 

package/docs/components/ui/radio-group.md

@@ -27,7 +27,7 @@ import { RadioGroup, RadioGroupItem } from "@adamosuiteservices/ui/radio-group";
 </RadioGroup>
 ```
 
-**Componentes**: 2 (RadioGroup, RadioGroupItem)
+**Components**: 2 (RadioGroup, RadioGroupItem)
 
 ## Props
 
@@ -56,6 +56,17 @@ import { RadioGroup, RadioGroupItem } from "@adamosuiteservices/ui/radio-group";
 
 **Note**: Accepts all Radix UI RadioGroup.Item props
 
+## States
+
+| State    | Styles                                                                          |
+| -------- | ------------------------------------------------------------------------------- |
+| Default  | `border-medium-border bg-background`                                            |
+| Hover    | `bg-muted`                                                                      |
+| Focus    | `border-primary ring-4 ring-primary/10`                                         |
+| Checked  | `border-primary` + white bg + primary dot (`text-[10px] text-primary`)          |
+| Disabled | `bg-accent border-medium-border opacity-100 cursor-not-allowed`                 |
+| Invalid  | `border-destructive` (ring only on focus-visible: `ring-4 ring-destructive/10`) |
+
 ## Usage patterns
 
 ### Basic
@@ -274,11 +285,12 @@ function App() {
 ## Base styles
 
 - **Size**: `size-5` (20px)
-- **Border**: `border-input` with `shadow-xs`
-- **Checked**: Icon `circle` with `text-primary`
-- **Focus**: `ring-ring/50` with `ring-[3px]`
-- **Invalid**: `border-destructive` with `ring-destructive/20`
-- **Spacing**: `gap-3` default between item and label
+- **Border**: `border-medium-border`, no shadow
+- **Checked**: Icon `circle` (filled) with `text-primary`, `border-primary`
+- **Focus**: `border-primary ring-4 ring-primary/10`
+- **Invalid**: `border-destructive` with `ring-4 ring-destructive/10` (on focus)
+- **Disabled**: `bg-accent border-medium-border opacity-100`
+- **Spacing**: `gap-3` default between items (RadioGroup uses `grid gap-3`)
 
 ## Accessibility
 

package/docs/components/ui/scroll-area.md

@@ -324,10 +324,10 @@ You can customize the scrollbar using Tailwind classes:
 
 The following `data-slot` attributes are available for CSS targeting:
 
-- `scroll-area` - Contenedor principal
-- `scroll-area-viewport` - Viewport del contenido
-- `scroll-area-scrollbar` - Scrollbar (vertical u horizontal)
-- `scroll-area-thumb` - Thumb del scrollbar
+- `scroll-area` - Main container
+- `scroll-area-viewport` - Content viewport
+- `scroll-area-scrollbar` - Scrollbar (vertical or horizontal)
+- `scroll-area-thumb` - Scrollbar thumb
 
 ### Usage example with data-slot
 

package/docs/components/ui/select.md

@@ -317,9 +317,7 @@ function App() {
 </Select>
 ```
 
-## Use cases### Configuración
-
-```tsx## Use cases
+## Use cases
 
 **Simple selection**: Choose one option from a long list
 **Forms**: Country, state, category, language
@@ -330,16 +328,17 @@ function App() {
 ## Base styles
 
 - **Trigger height**: `h-10` (default, 40px), `h-9` (sm, 36px)
-- **Item height**: `h-10` (40px) - consistent with trigger default
-- **Padding**: Trigger uses `px-3` (no vertical padding, height defines size)
-- **Item padding**: `px-3` horizontal, `pr-10` when with check icon
-- **Separators**: Border-bottom between items, removed on last item
+- **Item height**: `h-11` (44px)
+- **Padding**: Trigger uses `px-3`
+- **Item padding**: `pl-4 pr-10`
+- **Item gap**: `gap-3`
+- **Separators**: `border-b border-divider` between items, removed on last item
 - **Border radius**: Items have rounded corners on first (top) and last (bottom) to match container
-- **Border**: `border-input` with `shadow-xs`
-- **Focus**: `ring-ring/50` with `ring-[3px]`
-- **Content**: `bg-popover` with `shadow-md` and `border`
-- **Item hover**: `bg-accent text-accent-foreground`
-- **Check icon**: Icon `check` with `text-lg` on selected item
+- **Trigger border**: `border-input`, no shadow
+- **Focus (trigger)**: `border-primary-300 ring-4 ring-primary/10`
+- **Content**: `bg-popover` with `shadow-xs` and `border`
+- **Item focus/hover**: `bg-muted text-foreground`
+- **Check icon**: Icon `check` with `text-xl text-success` on selected item, positioned absolute right
 
 ## Accessibility
 
@@ -371,4 +370,7 @@ function App() {
 
 - **Radix UI Select**: <https://www.radix-ui.com/primitives/docs/components/select>
 - **shadcn/ui Select**: <https://ui.shadcn.com/docs/components/select>
+
+```
+
 ```

package/docs/components/ui/selectable-card.md

@@ -0,0 +1,204 @@
+# Selectable card component
+
+A pressable card that can be selected or deselected. Supports standalone toggle mode and group selection mode, with full disabled state propagation from `<fieldset disabled>`.
+
+## Description
+
+`SelectableCard` is a `<button>` styled as a card with `aria-pressed` semantics. It works standalone as a toggle, or inside `SelectableCardGroup` for single-selection radio-like behaviour. `SelectableCardTitle` and `SelectableCardDescription` are typographic sub-components that inherit the disabled state automatically.
+
+## Features
+
+- Standalone toggle mode (no group needed)
+- Group mode via `SelectableCardGroup` — single-selection, controlled or uncontrolled
+- `aria-pressed` for correct screen reader announcement
+- Selected state: primary gradient background + primary border
+- Disabled state propagates from `<fieldset disabled>` via `in-[fieldset:disabled]` selectors
+- `SelectableCardTitle` and `SelectableCardDescription` dim automatically when the card is disabled via `group-disabled:`
+
+## Import
+
+```typescript
+import {
+  SelectableCard,
+  SelectableCardGroup,
+  SelectableCardTitle,
+  SelectableCardDescription,
+  type SelectableCardProps,
+  type SelectableCardGroupProps,
+  type SelectableCardTitleProps,
+  type SelectableCardDescriptionProps,
+} from "@adamosuiteservices/ui/selectable-card";
+```
+
+## Basic usage
+
+```tsx
+<SelectableCard>
+  <SelectableCardTitle>Standard</SelectableCardTitle>
+  <SelectableCardDescription>
+    Up to 5 users and basic features.
+  </SelectableCardDescription>
+</SelectableCard>
+```
+
+## Standalone toggle
+
+The card manages its own selection state internally when neither `selected` nor a group is provided:
+
+```tsx
+<SelectableCard>
+  <SelectableCardTitle>Enable notifications</SelectableCardTitle>
+</SelectableCard>
+```
+
+Pass `selected` to control it externally:
+
+```tsx
+const [selected, setSelected] = useState(false);
+
+<SelectableCard selected={selected} onClick={() => setSelected((s) => !s)}>
+  <SelectableCardTitle>Enable notifications</SelectableCardTitle>
+</SelectableCard>;
+```
+
+## Group selection
+
+Wrap cards in `SelectableCardGroup` for single-selection behaviour. Each card requires a unique `value` prop:
+
+```tsx
+const [value, setValue] = useState("pro");
+
+<SelectableCardGroup value={value} onValueChange={setValue}>
+  <SelectableCard value="standard">
+    <SelectableCardTitle>Standard</SelectableCardTitle>
+    <SelectableCardDescription>Up to 5 users.</SelectableCardDescription>
+  </SelectableCard>
+  <SelectableCard value="pro">
+    <SelectableCardTitle>Pro</SelectableCardTitle>
+    <SelectableCardDescription>Unlimited users.</SelectableCardDescription>
+  </SelectableCard>
+</SelectableCardGroup>;
+```
+
+Uncontrolled group (manages selection internally):
+
+```tsx
+<SelectableCardGroup defaultValue="pro">
+  <SelectableCard value="standard">...</SelectableCard>
+  <SelectableCard value="pro">...</SelectableCard>
+</SelectableCardGroup>
+```
+
+## With icon and typography
+
+```tsx
+<SelectableCard>
+  <div className="adm:flex adm:flex-col adm:gap-2">
+    <SelectableCardTitle>Standard plan</SelectableCardTitle>
+    <div className="adm:flex adm:items-center adm:gap-2 adm:pl-2">
+      <Icon symbol="credit_card" className="adm:text-2xl" />
+      <SelectableCardDescription>
+        Up to 5 users and basic features.
+      </SelectableCardDescription>
+    </div>
+  </div>
+</SelectableCard>
+```
+
+## Inside a field
+
+```tsx
+<Field>
+  <FieldLegend variant="label">Choose a plan</FieldLegend>
+  <SelectableCardGroup value={value} onValueChange={setValue}>
+    <SelectableCard value="standard">...</SelectableCard>
+    <SelectableCard value="pro">...</SelectableCard>
+  </SelectableCardGroup>
+</Field>
+```
+
+## Props
+
+### SelectableCard
+
+| Prop        | Type       | Default | Description                                             |
+| ----------- | ---------- | ------- | ------------------------------------------------------- |
+| `value`     | `string`   | —       | Required when used inside `SelectableCardGroup`         |
+| `selected`  | `boolean`  | —       | Controlled selected state (standalone, outside a group) |
+| `disabled`  | `boolean`  | —       | Disables the card and applies disabled visual styles    |
+| `onClick`   | `function` | —       | Standard button click handler                           |
+| `className` | `string`   | —       | Additional CSS classes                                  |
+
+Accepts all `<button>` props.
+
+### SelectableCardGroup
+
+| Prop            | Type                      | Default | Description                                 |
+| --------------- | ------------------------- | ------- | ------------------------------------------- |
+| `value`         | `string`                  | —       | Controlled selected value                   |
+| `defaultValue`  | `string`                  | —       | Initial value for uncontrolled mode         |
+| `onValueChange` | `(value: string) => void` | —       | Called when the selected card changes       |
+| `disabled`      | `boolean`                 | —       | Disables all cards in the group             |
+| `className`     | `string`                  | —       | Additional CSS classes on the group wrapper |
+
+### SelectableCardTitle
+
+Small label above the main content (xs, normal weight, secondary color). Accepts all `<p>` props.
+
+### SelectableCardDescription
+
+Main content text (sm, semibold, foreground color). Accepts all `<p>` props.
+
+## Examples
+
+### Disabled state
+
+```tsx
+<SelectableCard disabled>
+  <SelectableCardTitle>Standard plan</SelectableCardTitle>
+  <SelectableCardDescription>
+    Unavailable in your region.
+  </SelectableCardDescription>
+</SelectableCard>
+```
+
+### Group with disabled card
+
+```tsx
+<SelectableCardGroup value={value} onValueChange={setValue}>
+  <SelectableCard value="standard">...</SelectableCard>
+  <SelectableCard value="enterprise" disabled>
+    ...
+  </SelectableCard>
+</SelectableCardGroup>
+```
+
+### Inside a disabled fieldset
+
+All cards inherit the disabled state without any extra props:
+
+```tsx
+<FieldSet disabled>
+  <FieldLegend>Choose a plan</FieldLegend>
+  <SelectableCardGroup defaultValue="pro">
+    <SelectableCard value="standard">...</SelectableCard>
+    <SelectableCard value="pro">...</SelectableCard>
+  </SelectableCardGroup>
+</FieldSet>
+```
+
+## Implementation notes
+
+- `SelectableCard` uses `data-state="selected" | "unselected"` and `aria-pressed` for both styling and accessibility.
+- When inside a `SelectableCardGroup`, the card reads from context — `group.value === value` determines selection.
+- When standalone with no `selected` prop, the card manages `internalSelected` state internally.
+- `SelectableCardTitle` and `SelectableCardDescription` use `adm:group-disabled:text-disabled-foreground` — the `adm:group` class on the parent `<button>` enables this inheritance.
+- Disabled via `<fieldset disabled>` uses `in-[fieldset:disabled]` selectors, which do not set the native `disabled` attribute on the button — `pointer-events-none` is applied instead.
+- Selected background is a horizontal gradient: `from-primary-50 to-white`.
+
+## Accessibility
+
+- `aria-pressed` correctly communicates toggle state to screen readers.
+- `disabled` cards are focusable by default in some browsers — use `<fieldset disabled>` at the group level to prevent all interaction cleanly.
+- Use `SelectableCardGroup` inside a `<fieldset>` with a `<legend>` (via `FieldLegend`) so screen readers announce the group label.
+- The card content is free-form — ensure it is descriptive enough to understand the option without visual context.

package/docs/components/ui/separator.md

@@ -148,7 +148,7 @@ const items = [
 ```tsx
 <Separator className="bg-muted" />           {/* Subtle */}
 <Separator className="bg-primary h-0.5" />  {/* Accent */}
-<Separator className="bg-border" />          {/* Default */}
+<Separator className="bg-divider" />         {/* Default */}
 ```
 
 ## Use cases
@@ -166,13 +166,13 @@ const items = [
 
 - **Height**: `h-px` (1px)
 - **Width**: `w-full`
-- **Color**: `bg-border`
+- **Color**: `bg-divider`
 
 ### Vertical styles
 
 - **Width**: `w-px` (1px)
 - **Height**: `h-full`
-- **Color**: `bg-border`
+- **Color**: `bg-divider`
 
 ## Accessibility
 
@@ -203,7 +203,7 @@ const items = [
 
 ## Troubleshooting
 
-**Not visible**: Verify `bg-border` or custom color applied  
+**Not visible**: Verify `bg-divider` or custom color applied  
 **Too tall/wide**: Horizontal uses `h-px`, vertical uses `w-px`  
 **Doesn't divide vertically**: Verify `orientation="vertical"` and container height  
 **Inconsistent spacing**: Use `my-*` or `mx-*` for uniform spacing

package/docs/components/ui/sheet.md

@@ -60,7 +60,7 @@ import {
 
 ### From right (default)
 
-Width: `w-11/12` on mobile, `max-w-sm` on desktop. Border radius: `rounded-2xl`. Padding: `p-8` (32px).
+Width: `w-11/12` on mobile, `max-w-xl` on desktop. Border radius: `rounded-2xl`. Individual sections (Header/Footer) have `p-8` (32px) padding.
 
 ```tsx
 <Sheet>
@@ -137,7 +137,7 @@ Width: `w-11/12` on mobile, `max-w-sm` on desktop. Border radius: `rounded-2xl`.
 
 ### SheetBody
 
-Container for the main sheet content with 32px horizontal padding (`px-8`).
+Container for the main sheet content with horizontal padding.
 
 ```tsx
 <SheetBody>
@@ -149,10 +149,28 @@ Container for the main sheet content with 32px horizontal padding (`px-8`).
 
 **Default styles**: `px-8` (32px horizontal padding)
 
+### SheetHeader
+
+Header section with padding.
+
+**Default styles**: `p-8` (32px padding), `flex flex-col gap-2`
+
+### SheetFooter
+
+Footer section with padding, typically for action buttons.
+
+**Default styles**: `p-8` (32px padding), `mt-auto flex flex-col gap-2`
+
+### SheetTitle
+
+Sheet title with semantic heading.
+
+**Default styles**: `text-sm leading-5 font-bold text-foreground`
+
 ## Spacing
 
 - **Content padding**: SheetHeader, SheetBody, SheetFooter use `p-8` or `px-8` (32px)
-- **Gap between sections**: `gap-8` (32px) between SheetHeader, SheetBody, and SheetFooter
+- **Gap between sections**: `gap-4` (16px) between SheetHeader, SheetBody, and SheetFooter
 
 ## Use cases
 

package/docs/components/ui/slider.md

@@ -308,7 +308,7 @@ function ColorPicker() {
 }
 ```
 
-### Con Gradiente Arcoíris
+### With rainbow gradient
 
 ```tsx
 function RainbowSlider() {
@@ -329,8 +329,8 @@ function RainbowSlider() {
 - **Track height**: `h-1.5` (horizontal), `w-1.5` (vertical)
 - **Track bg**: `bg-muted` (or custom gradient with `colorSlide` prop)
 - **Range bg**: `bg-primary` (transparent when using `colorSlide`)
-- **Thumb**: `size-4` with `border-primary`, `bg-white`, `shadow-sm`
-- **Thumb hover/focus**: `ring-4` with `ring-ring/50`
+- **Thumb**: `size-4` with `border-primary`, `bg-neutrals-0`, `shadow-sm`
+- **Thumb hover/focus**: `ring-4 ring-ring/50` on hover and focus-visible
 - **Vertical**: `min-h-44` default, `flex-col`
 - **Full gradient**: Rainbow of 6 colors (red → yellow → green → cyan → blue → red)
 - **Custom gradient**: Linear gradient between two specified colors

package/docs/components/ui/switch.md

@@ -359,19 +359,19 @@ function FeatureToggles() {
 
 ## Use cases
 
-**Settings**: On/off toggles para configuración  
-**Feature flags**: Activar/desactivar features  
-**Notifications**: Habilitar/deshabilitar notificaciones  
-**Privacy**: Controles de privacidad y permisos  
+**Settings**: On/off toggles for configuration  
+**Feature flags**: Enable/disable features  
+**Notifications**: Enable/disable notifications  
+**Privacy**: Privacy and permissions controls  
 **Device controls**: Wi-Fi, Bluetooth, Airplane mode  
-**Filters**: Mostrar/ocultar contenido
+**Filters**: Show/hide content
 
 ## Base styles
 
 - **Size**: `h-5 w-8`
 - **Checked bg**: `bg-primary`
 - **Unchecked bg**: `bg-input` (dark: `bg-input/80`)
-- **Thumb**: `size-4` with `bg-background`
+- **Thumb**: `size-4` with `bg-neutrals-0` (always white)
 - **Thumb checked**: `translate-x-[calc(100%-2px)]`
 - **Thumb unchecked**: `translate-x-0`
 - **Focus**: `ring-ring/50` with `ring-[3px]`
@@ -392,7 +392,7 @@ function FeatureToggles() {
 - **Data states**: `data-state="checked|unchecked"` for styles
 - **Controlled**: Use `checked` + `onCheckedChange`
 - **Uncontrolled**: Use `defaultChecked`
-- **Dark mode**: Thumb color changes automatically
+- **Thumb color**: Always white (`bg-neutrals-0`) for consistent contrast
 
 ## Troubleshooting
 

package/docs/components/ui/table.md

@@ -173,10 +173,13 @@ const invoices = [
 
 ## Base styles
 
-- **Container**: `rounded-xl border` with `overflow-x-auto`
-- **Head**: `bg-muted/50 text-muted-foreground text-xs uppercase`
-- **Row hover**: `hover:bg-muted/50`
-- **Cell**: `p-4 text-sm text-muted-foreground`
+- **Container**: `rounded-2xl border` with `overflow-x-auto`
+- **Head**: `h-16 p-4 bg-muted text-foreground text-xs font-semibold uppercase`
+- **Row**: `h-16 border-b border-divider` with `hover:bg-muted/50`
+- **Cell**: `p-4 text-sm text-foreground`
+- **Footer**: `bg-muted`
+
+**Note**: Table uses `border-divider` for internal row separators (lighter than `border`). Headers and cells use `text-foreground` instead of `text-muted-foreground` to match Figma design.
 
 ## References