@malva-ui/core 0.1.13 → 0.1.14

package/styles/tokens.md

@@ -3,7 +3,7 @@
 
 # Malva UI design tokens
 
-Every public `--mlv-*` custom property the design system declares — 434 tokens, generated from `libs/styles/src/lib/*.scss`.
+Every public `--mlv-*` custom property the design system declares — 440 tokens, generated from `libs/styles/src/lib/*.scss`.
 
 **If a token is not in this file, it does not exist.** `var()` silently falls back
 when a custom property is undefined, so a misspelled token never errors — it just
@@ -55,11 +55,6 @@ Names that look right, resolve to nothing, and ship the fallback.
 `documentElement`. Tokens with no dark or high-contrast value inherit the light
 value in every mode.
 
-> **Known inconsistency.** 72 muted-tint tokens declare their dark values
-> under `[data-theme='dark']` rather than `[mlvTheme='dark']`, so they do **not** follow
-> `MlvThemeService`. The Dark column below reports the declared value; whether it
-> applies depends on which attribute the host sets.
-
 ## Tokens
 
 ### Color palettes
@@ -112,17 +107,17 @@ Raw ramps. Prefer a semantic token below; reach for a palette stop only when no
 | `--mlv-palette-neutral-800`   | `#262626` |
 | `--mlv-palette-neutral-900`   | `#171717` |
 | `--mlv-palette-neutral-950`   | `#0a0a0a` |
-| `--mlv-palette-primary-50`    | `#eef1fd` |
-| `--mlv-palette-primary-100`   | `#dce5fb` |
-| `--mlv-palette-primary-200`   | `#baccf7` |
-| `--mlv-palette-primary-300`   | `#8eaaf0` |
-| `--mlv-palette-primary-400`   | `#6887e4` |
-| `--mlv-palette-primary-500`   | `#526ed3` |
-| `--mlv-palette-primary-600`   | `#3c55bb` |
-| `--mlv-palette-primary-700`   | `#2d409c` |
-| `--mlv-palette-primary-800`   | `#22307b` |
-| `--mlv-palette-primary-900`   | `#18225a` |
-| `--mlv-palette-primary-950`   | `#0f1539` |
+| `--mlv-palette-primary-50`    | `#eceffc` |
+| `--mlv-palette-primary-100`   | `#dbe4f9` |
+| `--mlv-palette-primary-200`   | `#bacbf4` |
+| `--mlv-palette-primary-300`   | `#90aaeb` |
+| `--mlv-palette-primary-400`   | `#6c88dd` |
+| `--mlv-palette-primary-500`   | `#5770cb` |
+| `--mlv-palette-primary-600`   | `#4359b1` |
+| `--mlv-palette-primary-700`   | `#334393` |
+| `--mlv-palette-primary-800`   | `#273373` |
+| `--mlv-palette-primary-900`   | `#1b2454` |
+| `--mlv-palette-primary-950`   | `#111634` |
 | `--mlv-palette-secondary-50`  | `#f9f9f9` |
 | `--mlv-palette-secondary-100` | `#f3f3f3` |
 | `--mlv-palette-secondary-200` | `#ebebeb` |
@@ -179,6 +174,7 @@ Surface and fill colors. `-pale` variants are tinted backgrounds for inline stat
 | `--mlv-background-danger-1-hover`       | `color-mix(in srgb, var(--mlv-palette-danger-600) 85%, black)`                           | `color-mix(in srgb, var(--mlv-palette-danger-600) 80%, white)`                           | `#990000`                              |              |
 | `--mlv-background-danger-1-pale`        | `color-mix(in srgb, var(--mlv-palette-danger-500) 12%, white)`                           | `color-mix(in srgb, var(--mlv-palette-danger-500) 15%, var(--mlv-palette-neutral-900))`  | `#ffe0e0`                              |              |
 | `--mlv-background-danger-1-pale-hover`  | `color-mix(in srgb, var(--mlv-palette-danger-500) 20%, white)`                           | `color-mix(in srgb, var(--mlv-palette-danger-500) 25%, var(--mlv-palette-neutral-900))`  | `#ffc8c8`                              |              |
+| `--mlv-background-disabled`             | `var(--mlv-palette-neutral-200)`                                                         | `color-mix(in srgb, var(--mlv-palette-neutral-800) 60%, var(--mlv-palette-neutral-900))` | `#d0d0d0`                              |              |
 | `--mlv-background-info-1`               | `var(--mlv-palette-info-600)`                                                            | `var(--mlv-palette-info-600)`                                                            | `#003399`                              |              |
 | `--mlv-background-info-1-active`        | `color-mix(in srgb, var(--mlv-palette-info-600) 70%, black)`                             | `color-mix(in srgb, var(--mlv-palette-info-600) 65%, white)`                             | `#001155`                              |              |
 | `--mlv-background-info-1-hover`         | `color-mix(in srgb, var(--mlv-palette-info-600) 85%, black)`                             | `color-mix(in srgb, var(--mlv-palette-info-600) 80%, white)`                             | `#002277`                              |              |
@@ -186,11 +182,13 @@ Surface and fill colors. `-pale` variants are tinted backgrounds for inline stat
 | `--mlv-background-info-1-pale-hover`    | `color-mix(in srgb, var(--mlv-palette-info-500) 20%, white)`                             | `color-mix(in srgb, var(--mlv-palette-info-500) 25%, var(--mlv-palette-neutral-900))`    | `#c0e0ff`                              |              |
 | `--mlv-background-info-pale`            | `var(--mlv-background-info-1-pale)`                                                      | `var(--mlv-background-info-1-pale)`                                                      | `var(--mlv-background-info-1-pale)`    | alias        |
 | `--mlv-background-neutral-1`            | `var(--mlv-palette-neutral-100)`                                                         | `var(--mlv-palette-neutral-800)`                                                         | `#e8e8e8`                              |              |
-| `--mlv-background-neutral-1-active`     | `color-mix(in srgb, var(--mlv-palette-neutral-100) 50%, var(--mlv-palette-neutral-400))` | `color-mix(in srgb, var(--mlv-palette-neutral-800) 60%, white)`                          | `#b8b8b8`                              |              |
-| `--mlv-background-neutral-1-hover`      | `color-mix(in srgb, var(--mlv-palette-neutral-100) 70%, var(--mlv-palette-neutral-400))` | `color-mix(in srgb, var(--mlv-palette-neutral-800) 75%, white)`                          | `#d0d0d0`                              |              |
+| `--mlv-background-neutral-1-active`     | `var(--mlv-palette-neutral-200)`                                                         | `color-mix(in srgb, var(--mlv-palette-neutral-800) 88%, white)`                          | `#b8b8b8`                              |              |
+| `--mlv-background-neutral-1-hover`      | `color-mix(in srgb, var(--mlv-palette-neutral-100) 60%, var(--mlv-palette-neutral-200))` | `color-mix(in srgb, var(--mlv-palette-neutral-800) 94%, white)`                          | `#d0d0d0`                              |              |
 | `--mlv-background-neutral-2`            | `var(--mlv-palette-neutral-200)`                                                         | `var(--mlv-palette-neutral-700)`                                                         | `#d0d0d0`                              |              |
 | `--mlv-background-overlay`              | `rgba(0, 0, 0, 0.22)`                                                                    | —                                                                                        | —                                      |              |
 | `--mlv-background-raised`               | `#ffffff`                                                                                | `#1e1e1e`                                                                                | `#ffffff`                              | neutral ~850 |
+| `--mlv-background-selected`             | `var(--mlv-background-accent-1-pale)`                                                    | `var(--mlv-background-accent-1-pale)`                                                    | —                                      |              |
+| `--mlv-background-selected-hover`       | `var(--mlv-background-accent-1-pale-hover)`                                              | `var(--mlv-background-accent-1-pale-hover)`                                              | —                                      |              |
 | `--mlv-background-subtle`               | `var(--mlv-palette-neutral-100)`                                                         | `var(--mlv-palette-neutral-800)`                                                         | `#f5f5f5`                              |              |
 | `--mlv-background-success-1`            | `var(--mlv-palette-success-600)`                                                         | `var(--mlv-palette-success-600)`                                                         | `#006600`                              |              |
 | `--mlv-background-success-1-active`     | `color-mix(in srgb, var(--mlv-palette-success-600) 70%, black)`                          | `color-mix(in srgb, var(--mlv-palette-success-600) 65%, white)`                          | `#002200`                              |              |
@@ -210,13 +208,13 @@ Surface and fill colors. `-pale` variants are tinted backgrounds for inline stat
 
 Stepped surface colors. Identical in light mode; in dark mode each step is lighter than the last.
 
-| Token                  | Light                          | Dark                                                            | Notes        |
-| ---------------------- | ------------------------------ | --------------------------------------------------------------- | ------------ |
-| `--mlv-elevation-bg-1` | `var(--mlv-background-raised)` | `#1e1e1e`                                                       | neutral ~850 |
-| `--mlv-elevation-bg-2` | `var(--mlv-background-raised)` | `var(--mlv-palette-neutral-800)`                                |              |
-| `--mlv-elevation-bg-3` | `var(--mlv-background-raised)` | `#333333`                                                       | neutral ~750 |
-| `--mlv-elevation-bg-4` | `var(--mlv-background-raised)` | `var(--mlv-palette-neutral-700)`                                |              |
-| `--mlv-elevation-bg-5` | `var(--mlv-background-raised)` | `color-mix(in srgb, var(--mlv-palette-neutral-700) 75%, white)` |              |
+| Token                  | Light                          | Dark                                                            | Notes                                 |
+| ---------------------- | ------------------------------ | --------------------------------------------------------------- | ------------------------------------- |
+| `--mlv-elevation-bg-1` | `var(--mlv-background-base)`   | `#1e1e1e`                                                       | flush — canvas-level, border only     |
+| `--mlv-elevation-bg-2` | `var(--mlv-background-raised)` | `var(--mlv-palette-neutral-800)`                                | raised — card, dialog, drawer         |
+| `--mlv-elevation-bg-3` | `var(--mlv-background-raised)` | `#333333`                                                       | floating — popup, toast, form-control |
+| `--mlv-elevation-bg-4` | `var(--mlv-background-raised)` | `var(--mlv-palette-neutral-700)`                                | overlay — drawers, side overlays      |
+| `--mlv-elevation-bg-5` | `var(--mlv-background-raised)` | `color-mix(in srgb, var(--mlv-palette-neutral-700) 75%, white)` | switch-thumb only — never behind text |
 
 ### Text colors
 
@@ -224,10 +222,10 @@ Never use `--mlv-text-tertiary`, `--mlv-text-disabled` or `--mlv-text-placeholde
 
 | Token                            | Light                                                           | Dark                                                            | High contrast |
 | -------------------------------- | --------------------------------------------------------------- | --------------------------------------------------------------- | ------------- |
-| `--mlv-text-action`              | `var(--mlv-palette-primary-600)`                                | `var(--mlv-palette-primary-400)`                                | `#0000ee`     |
-| `--mlv-text-action-hover`        | `color-mix(in srgb, var(--mlv-palette-primary-600) 80%, black)` | `color-mix(in srgb, var(--mlv-palette-primary-400) 80%, white)` | `#0000bb`     |
+| `--mlv-text-action`              | `var(--mlv-palette-primary-600)`                                | `color-mix(in srgb, var(--mlv-palette-primary-300) 85%, white)` | `#0000ee`     |
+| `--mlv-text-action-hover`        | `color-mix(in srgb, var(--mlv-palette-primary-600) 80%, black)` | `color-mix(in srgb, var(--mlv-palette-primary-300) 65%, white)` | `#0000bb`     |
 | `--mlv-text-caption`             | `var(--mlv-palette-neutral-500)`                                | `var(--mlv-palette-neutral-400)`                                | `#444444`     |
-| `--mlv-text-disabled`            | `var(--mlv-palette-neutral-300)`                                | `var(--mlv-palette-neutral-600)`                                | `#666666`     |
+| `--mlv-text-disabled`            | `var(--mlv-palette-neutral-500)`                                | `var(--mlv-palette-neutral-500)`                                | `#666666`     |
 | `--mlv-text-error`               | `var(--mlv-palette-danger-600)`                                 | `var(--mlv-palette-danger-400)`                                 | `#cc0000`     |
 | `--mlv-text-heading`             | `var(--mlv-palette-neutral-950)`                                | `#ffffff`                                                       | `#000000`     |
 | `--mlv-text-hint`                | `var(--mlv-palette-neutral-500)`                                | `var(--mlv-palette-neutral-400)`                                | `#444444`     |
@@ -237,16 +235,17 @@ Never use `--mlv-text-tertiary`, `--mlv-text-disabled` or `--mlv-text-placeholde
 | `--mlv-text-negative`            | `var(--mlv-palette-danger-700)`                                 | `var(--mlv-palette-danger-400)`                                 | `#cc0000`     |
 | `--mlv-text-on-danger`           | `#ffffff`                                                       | `#ffffff`                                                       | `#ffffff`     |
 | `--mlv-text-on-info`             | `#ffffff`                                                       | `#ffffff`                                                       | `#ffffff`     |
+| `--mlv-text-on-selected`         | `var(--mlv-text-action)`                                        | `var(--mlv-text-action)`                                        | —             |
 | `--mlv-text-on-success`          | `#ffffff`                                                       | `#ffffff`                                                       | `#ffffff`     |
 | `--mlv-text-on-warning`          | `#ffffff`                                                       | `#ffffff`                                                       | `#ffffff`     |
 | `--mlv-text-placeholder`         | `var(--mlv-palette-neutral-400)`                                | `var(--mlv-palette-neutral-500)`                                | `#666666`     |
-| `--mlv-text-positive`            | `var(--mlv-palette-success-700)`                                | `var(--mlv-palette-success-400)`                                | `#006600`     |
+| `--mlv-text-positive`            | `var(--mlv-palette-success-800)`                                | `var(--mlv-palette-success-400)`                                | `#006600`     |
 | `--mlv-text-primary`             | `var(--mlv-palette-neutral-900)`                                | `#ffffff`                                                       | `#000000`     |
 | `--mlv-text-primary-on-accent-1` | `#ffffff`                                                       | `#ffffff`                                                       | `#ffffff`     |
 | `--mlv-text-primary-on-accent-2` | `#ffffff`                                                       | `#ffffff`                                                       | `#ffffff`     |
 | `--mlv-text-secondary`           | `var(--mlv-palette-neutral-600)`                                | `var(--mlv-palette-neutral-300)`                                | `#1a1a1a`     |
 | `--mlv-text-tertiary`            | `var(--mlv-palette-neutral-400)`                                | `var(--mlv-palette-neutral-500)`                                | `#333333`     |
-| `--mlv-text-warning`             | `var(--mlv-palette-warning-700)`                                | `var(--mlv-palette-warning-400)`                                | `#804000`     |
+| `--mlv-text-warning`             | `var(--mlv-palette-warning-800)`                                | `var(--mlv-palette-warning-400)`                                | `#804000`     |
 
 ### Border colors
 
@@ -286,16 +285,16 @@ Prefer the semantic aliases (`raised`, `floating`, `overlay`, `modal`) over the
 | `--mlv-radius-2xl`     | `1rem`                   | 16px  |
 | `--mlv-radius-3xl`     | `1.5rem`                 | 24px  |
 | `--mlv-radius-badge`   | `var(--mlv-radius-full)` |       |
-| `--mlv-radius-button`  | `var(--mlv-radius-m)`    |       |
+| `--mlv-radius-button`  | `var(--mlv-radius-l)`    |       |
 | `--mlv-radius-card`    | `var(--mlv-radius-xl)`   |       |
 | `--mlv-radius-dialog`  | `var(--mlv-radius-2xl)`  |       |
 | `--mlv-radius-full`    | `9999px`                 |       |
-| `--mlv-radius-input`   | `var(--mlv-radius-m)`    |       |
+| `--mlv-radius-input`   | `var(--mlv-radius-l)`    |       |
 | `--mlv-radius-l`       | `0.5rem`                 | 8px   |
 | `--mlv-radius-m`       | `0.375rem`               | 6px   |
-| `--mlv-radius-panel`   | `var(--mlv-radius-xl)`   |       |
+| `--mlv-radius-panel`   | `var(--mlv-radius-l)`    |       |
 | `--mlv-radius-s`       | `0.25rem`                | 4px   |
-| `--mlv-radius-tag`     | `var(--mlv-radius-s)`    |       |
+| `--mlv-radius-tag`     | `var(--mlv-radius-full)` |       |
 | `--mlv-radius-tooltip` | `var(--mlv-radius-m)`    |       |
 | `--mlv-radius-xl`      | `0.75rem`                | 12px  |
 | `--mlv-radius-xs`      | `0.125rem`               | 2px   |
@@ -310,97 +309,98 @@ Shared vocabulary for every popover that presents a list of rows (select, combob
 | `--mlv-popover-item-bg-hover`  | `var(--mlv-background-neutral-1)` |
 | `--mlv-popover-item-padding`   | `var(--mlv-spacing-2)`            |
 | `--mlv-popover-item-radius`    | `var(--mlv-radius-m)`             |
-| `--mlv-popover-surface-radius` | `var(--mlv-radius-l)`             |
+| `--mlv-popover-surface-radius` | `var(--mlv-radius-panel)`         |
 
 ### Typography
 
 Semantic scales are split into `-size`, `-weight`, `-line-height` and (headings only) `-letter-spacing`. There is no bare `--mlv-typography-body-m` / `--mlv-typography-ui-s` token.
 
-| Token                                        | Light                                                                                                           | Notes                                                            |
-| -------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
-| `--mlv-font-family-display`                  | `var(--mlv-font-family-sans)`                                                                                   |                                                                  |
-| `--mlv-font-family-mono`                     | `ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` |                                                                  |
-| `--mlv-font-family-sans`                     | `Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`  |                                                                  |
-| `--mlv-font-size-2xl`                        | `1.25rem`                                                                                                       | 20px                                                             |
-| `--mlv-font-size-3xl`                        | `1.25rem`                                                                                                       | 20px — mobile base; 24px at lg (intentionally matches 2xl on sm) |
-| `--mlv-font-size-4xl`                        | `1.5rem`                                                                                                        | 24px — mobile base; 30px at lg                                   |
-| `--mlv-font-size-5xl`                        | `1.75rem`                                                                                                       | 28px — mobile base; 36px at lg                                   |
-| `--mlv-font-size-6xl`                        | `2.25rem`                                                                                                       | 36px — mobile base; 48px at lg                                   |
-| `--mlv-font-size-l`                          | `1rem`                                                                                                          | 16px                                                             |
-| `--mlv-font-size-m`                          | `0.875rem`                                                                                                      | 14px                                                             |
-| `--mlv-font-size-s`                          | `0.75rem`                                                                                                       | 12px                                                             |
-| `--mlv-font-size-xl`                         | `1.125rem`                                                                                                      | 18px                                                             |
-| `--mlv-font-size-xs`                         | `0.6875rem`                                                                                                     | 11px                                                             |
-| `--mlv-font-weight-bold`                     | `700`                                                                                                           |                                                                  |
-| `--mlv-font-weight-medium`                   | `500`                                                                                                           |                                                                  |
-| `--mlv-font-weight-normal`                   | `400`                                                                                                           |                                                                  |
-| `--mlv-font-weight-semibold`                 | `600`                                                                                                           |                                                                  |
-| `--mlv-letter-spacing-normal`                | `0em`                                                                                                           |                                                                  |
-| `--mlv-letter-spacing-tight`                 | `-0.025em`                                                                                                      |                                                                  |
-| `--mlv-letter-spacing-wide`                  | `0.025em`                                                                                                       |                                                                  |
-| `--mlv-letter-spacing-wider`                 | `0.05em`                                                                                                        |                                                                  |
-| `--mlv-letter-spacing-widest`                | `0.1em`                                                                                                         |                                                                  |
-| `--mlv-line-height-loose`                    | `2`                                                                                                             |                                                                  |
-| `--mlv-line-height-normal`                   | `1.5`                                                                                                           |                                                                  |
-| `--mlv-line-height-relaxed`                  | `1.625`                                                                                                         |                                                                  |
-| `--mlv-line-height-snug`                     | `1.375`                                                                                                         |                                                                  |
-| `--mlv-line-height-tight`                    | `1.25`                                                                                                          |                                                                  |
-| `--mlv-typography-body-l-line-height`        | `var(--mlv-line-height-relaxed)`                                                                                |                                                                  |
-| `--mlv-typography-body-l-size`               | `var(--mlv-font-size-l)`                                                                                        |                                                                  |
-| `--mlv-typography-body-l-weight`             | `var(--mlv-font-weight-normal)`                                                                                 |                                                                  |
-| `--mlv-typography-body-m-line-height`        | `var(--mlv-line-height-normal)`                                                                                 |                                                                  |
-| `--mlv-typography-body-m-size`               | `var(--mlv-font-size-m)`                                                                                        |                                                                  |
-| `--mlv-typography-body-m-weight`             | `var(--mlv-font-weight-normal)`                                                                                 |                                                                  |
-| `--mlv-typography-body-s-line-height`        | `var(--mlv-line-height-normal)`                                                                                 |                                                                  |
-| `--mlv-typography-body-s-size`               | `var(--mlv-font-size-s)`                                                                                        |                                                                  |
-| `--mlv-typography-body-s-weight`             | `var(--mlv-font-weight-normal)`                                                                                 |                                                                  |
-| `--mlv-typography-caption-line-height`       | `var(--mlv-line-height-tight)`                                                                                  |                                                                  |
-| `--mlv-typography-caption-size`              | `var(--mlv-font-size-xs)`                                                                                       |                                                                  |
-| `--mlv-typography-caption-weight`            | `var(--mlv-font-weight-normal)`                                                                                 |                                                                  |
-| `--mlv-typography-code-family`               | `var(--mlv-font-family-mono)`                                                                                   |                                                                  |
-| `--mlv-typography-code-size`                 | `var(--mlv-font-size-m)`                                                                                        |                                                                  |
-| `--mlv-typography-code-weight`               | `var(--mlv-font-weight-normal)`                                                                                 |                                                                  |
-| `--mlv-typography-error-line-height`         | `var(--mlv-line-height-normal)`                                                                                 |                                                                  |
-| `--mlv-typography-error-size`                | `var(--mlv-font-size-s)`                                                                                        |                                                                  |
-| `--mlv-typography-error-weight`              | `var(--mlv-font-weight-normal)`                                                                                 |                                                                  |
-| `--mlv-typography-family-code`               | `var(--mlv-font-family-mono)`                                                                                   |                                                                  |
-| `--mlv-typography-family-heading`            | `var(--mlv-font-family-display)`                                                                                |                                                                  |
-| `--mlv-typography-family-text`               | `var(--mlv-font-family-sans)`                                                                                   |                                                                  |
-| `--mlv-typography-heading-h1-letter-spacing` | `var(--mlv-letter-spacing-tight)`                                                                               |                                                                  |
-| `--mlv-typography-heading-h1-line-height`    | `var(--mlv-line-height-tight)`                                                                                  |                                                                  |
-| `--mlv-typography-heading-h1-size`           | `var(--mlv-font-size-5xl)`                                                                                      |                                                                  |
-| `--mlv-typography-heading-h1-weight`         | `var(--mlv-font-weight-bold)`                                                                                   |                                                                  |
-| `--mlv-typography-heading-h2-letter-spacing` | `var(--mlv-letter-spacing-tight)`                                                                               |                                                                  |
-| `--mlv-typography-heading-h2-line-height`    | `var(--mlv-line-height-tight)`                                                                                  |                                                                  |
-| `--mlv-typography-heading-h2-size`           | `var(--mlv-font-size-4xl)`                                                                                      |                                                                  |
-| `--mlv-typography-heading-h2-weight`         | `var(--mlv-font-weight-bold)`                                                                                   |                                                                  |
-| `--mlv-typography-heading-h3-line-height`    | `var(--mlv-line-height-snug)`                                                                                   |                                                                  |
-| `--mlv-typography-heading-h3-size`           | `var(--mlv-font-size-3xl)`                                                                                      |                                                                  |
-| `--mlv-typography-heading-h3-weight`         | `var(--mlv-font-weight-semibold)`                                                                               |                                                                  |
-| `--mlv-typography-heading-h4-line-height`    | `var(--mlv-line-height-snug)`                                                                                   |                                                                  |
-| `--mlv-typography-heading-h4-size`           | `var(--mlv-font-size-2xl)`                                                                                      |                                                                  |
-| `--mlv-typography-heading-h4-weight`         | `var(--mlv-font-weight-semibold)`                                                                               |                                                                  |
-| `--mlv-typography-heading-h5-line-height`    | `var(--mlv-line-height-normal)`                                                                                 |                                                                  |
-| `--mlv-typography-heading-h5-size`           | `var(--mlv-font-size-xl)`                                                                                       |                                                                  |
-| `--mlv-typography-heading-h5-weight`         | `var(--mlv-font-weight-semibold)`                                                                               |                                                                  |
-| `--mlv-typography-heading-h6-line-height`    | `var(--mlv-line-height-normal)`                                                                                 |                                                                  |
-| `--mlv-typography-heading-h6-size`           | `var(--mlv-font-size-l)`                                                                                        |                                                                  |
-| `--mlv-typography-heading-h6-weight`         | `var(--mlv-font-weight-semibold)`                                                                               |                                                                  |
-| `--mlv-typography-hint-line-height`          | `var(--mlv-line-height-normal)`                                                                                 |                                                                  |
-| `--mlv-typography-hint-size`                 | `var(--mlv-font-size-s)`                                                                                        |                                                                  |
-| `--mlv-typography-hint-weight`               | `var(--mlv-font-weight-normal)`                                                                                 |                                                                  |
-| `--mlv-typography-label-line-height`         | `var(--mlv-line-height-tight)`                                                                                  |                                                                  |
-| `--mlv-typography-label-size`                | `var(--mlv-font-size-m)`                                                                                        |                                                                  |
-| `--mlv-typography-label-weight`              | `var(--mlv-font-weight-medium)`                                                                                 |                                                                  |
-| `--mlv-typography-ui-l-line-height`          | `var(--mlv-line-height-tight)`                                                                                  |                                                                  |
-| `--mlv-typography-ui-l-size`                 | `var(--mlv-font-size-l)`                                                                                        |                                                                  |
-| `--mlv-typography-ui-l-weight`               | `var(--mlv-font-weight-medium)`                                                                                 |                                                                  |
-| `--mlv-typography-ui-m-line-height`          | `var(--mlv-line-height-tight)`                                                                                  |                                                                  |
-| `--mlv-typography-ui-m-size`                 | `var(--mlv-font-size-m)`                                                                                        |                                                                  |
-| `--mlv-typography-ui-m-weight`               | `var(--mlv-font-weight-medium)`                                                                                 |                                                                  |
-| `--mlv-typography-ui-s-line-height`          | `var(--mlv-line-height-tight)`                                                                                  |                                                                  |
-| `--mlv-typography-ui-s-size`                 | `var(--mlv-font-size-s)`                                                                                        |                                                                  |
-| `--mlv-typography-ui-s-weight`               | `var(--mlv-font-weight-medium)`                                                                                 |                                                                  |
+| Token                                        | Light                                                                                                                                          | Notes                                                            |
+| -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
+| `--mlv-font-family-code`                     | `'Fira Code', 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` |                                                                  |
+| `--mlv-font-family-display`                  | `var(--mlv-font-family-sans)`                                                                                                                  |                                                                  |
+| `--mlv-font-family-mono`                     | `ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`                                |                                                                  |
+| `--mlv-font-family-sans`                     | `Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`                                 |                                                                  |
+| `--mlv-font-size-2xl`                        | `1.25rem`                                                                                                                                      | 20px                                                             |
+| `--mlv-font-size-3xl`                        | `1.25rem`                                                                                                                                      | 20px — mobile base; 24px at lg (intentionally matches 2xl on sm) |
+| `--mlv-font-size-4xl`                        | `1.5rem`                                                                                                                                       | 24px — mobile base; 30px at lg                                   |
+| `--mlv-font-size-5xl`                        | `1.75rem`                                                                                                                                      | 28px — mobile base; 36px at lg                                   |
+| `--mlv-font-size-6xl`                        | `2.25rem`                                                                                                                                      | 36px — mobile base; 48px at lg                                   |
+| `--mlv-font-size-l`                          | `1rem`                                                                                                                                         | 16px                                                             |
+| `--mlv-font-size-m`                          | `0.875rem`                                                                                                                                     | 14px                                                             |
+| `--mlv-font-size-s`                          | `0.75rem`                                                                                                                                      | 12px                                                             |
+| `--mlv-font-size-xl`                         | `1.125rem`                                                                                                                                     | 18px                                                             |
+| `--mlv-font-size-xs`                         | `0.6875rem`                                                                                                                                    | 11px                                                             |
+| `--mlv-font-weight-bold`                     | `700`                                                                                                                                          |                                                                  |
+| `--mlv-font-weight-medium`                   | `500`                                                                                                                                          |                                                                  |
+| `--mlv-font-weight-normal`                   | `400`                                                                                                                                          |                                                                  |
+| `--mlv-font-weight-semibold`                 | `600`                                                                                                                                          |                                                                  |
+| `--mlv-letter-spacing-normal`                | `0em`                                                                                                                                          |                                                                  |
+| `--mlv-letter-spacing-tight`                 | `-0.025em`                                                                                                                                     |                                                                  |
+| `--mlv-letter-spacing-wide`                  | `0.025em`                                                                                                                                      |                                                                  |
+| `--mlv-letter-spacing-wider`                 | `0.05em`                                                                                                                                       |                                                                  |
+| `--mlv-letter-spacing-widest`                | `0.1em`                                                                                                                                        |                                                                  |
+| `--mlv-line-height-loose`                    | `2`                                                                                                                                            |                                                                  |
+| `--mlv-line-height-normal`                   | `1.5`                                                                                                                                          |                                                                  |
+| `--mlv-line-height-relaxed`                  | `1.625`                                                                                                                                        |                                                                  |
+| `--mlv-line-height-snug`                     | `1.375`                                                                                                                                        |                                                                  |
+| `--mlv-line-height-tight`                    | `1.25`                                                                                                                                         |                                                                  |
+| `--mlv-typography-body-l-line-height`        | `var(--mlv-line-height-relaxed)`                                                                                                               |                                                                  |
+| `--mlv-typography-body-l-size`               | `var(--mlv-font-size-l)`                                                                                                                       |                                                                  |
+| `--mlv-typography-body-l-weight`             | `var(--mlv-font-weight-normal)`                                                                                                                |                                                                  |
+| `--mlv-typography-body-m-line-height`        | `var(--mlv-line-height-normal)`                                                                                                                |                                                                  |
+| `--mlv-typography-body-m-size`               | `var(--mlv-font-size-m)`                                                                                                                       |                                                                  |
+| `--mlv-typography-body-m-weight`             | `var(--mlv-font-weight-normal)`                                                                                                                |                                                                  |
+| `--mlv-typography-body-s-line-height`        | `var(--mlv-line-height-normal)`                                                                                                                |                                                                  |
+| `--mlv-typography-body-s-size`               | `var(--mlv-font-size-s)`                                                                                                                       |                                                                  |
+| `--mlv-typography-body-s-weight`             | `var(--mlv-font-weight-normal)`                                                                                                                |                                                                  |
+| `--mlv-typography-caption-line-height`       | `var(--mlv-line-height-tight)`                                                                                                                 |                                                                  |
+| `--mlv-typography-caption-size`              | `var(--mlv-font-size-xs)`                                                                                                                      |                                                                  |
+| `--mlv-typography-caption-weight`            | `var(--mlv-font-weight-normal)`                                                                                                                |                                                                  |
+| `--mlv-typography-code-family`               | `var(--mlv-font-family-code)`                                                                                                                  |                                                                  |
+| `--mlv-typography-code-size`                 | `var(--mlv-font-size-m)`                                                                                                                       |                                                                  |
+| `--mlv-typography-code-weight`               | `var(--mlv-font-weight-normal)`                                                                                                                |                                                                  |
+| `--mlv-typography-error-line-height`         | `var(--mlv-line-height-normal)`                                                                                                                |                                                                  |
+| `--mlv-typography-error-size`                | `var(--mlv-font-size-s)`                                                                                                                       |                                                                  |
+| `--mlv-typography-error-weight`              | `var(--mlv-font-weight-normal)`                                                                                                                |                                                                  |
+| `--mlv-typography-family-code`               | `var(--mlv-font-family-code)`                                                                                                                  |                                                                  |
+| `--mlv-typography-family-heading`            | `var(--mlv-font-family-display)`                                                                                                               |                                                                  |
+| `--mlv-typography-family-text`               | `var(--mlv-font-family-sans)`                                                                                                                  |                                                                  |
+| `--mlv-typography-heading-h1-letter-spacing` | `var(--mlv-letter-spacing-tight)`                                                                                                              |                                                                  |
+| `--mlv-typography-heading-h1-line-height`    | `var(--mlv-line-height-tight)`                                                                                                                 |                                                                  |
+| `--mlv-typography-heading-h1-size`           | `var(--mlv-font-size-5xl)`                                                                                                                     |                                                                  |
+| `--mlv-typography-heading-h1-weight`         | `var(--mlv-font-weight-bold)`                                                                                                                  |                                                                  |
+| `--mlv-typography-heading-h2-letter-spacing` | `var(--mlv-letter-spacing-tight)`                                                                                                              |                                                                  |
+| `--mlv-typography-heading-h2-line-height`    | `var(--mlv-line-height-tight)`                                                                                                                 |                                                                  |
+| `--mlv-typography-heading-h2-size`           | `var(--mlv-font-size-4xl)`                                                                                                                     |                                                                  |
+| `--mlv-typography-heading-h2-weight`         | `var(--mlv-font-weight-bold)`                                                                                                                  |                                                                  |
+| `--mlv-typography-heading-h3-line-height`    | `var(--mlv-line-height-snug)`                                                                                                                  |                                                                  |
+| `--mlv-typography-heading-h3-size`           | `var(--mlv-font-size-3xl)`                                                                                                                     |                                                                  |
+| `--mlv-typography-heading-h3-weight`         | `var(--mlv-font-weight-semibold)`                                                                                                              |                                                                  |
+| `--mlv-typography-heading-h4-line-height`    | `var(--mlv-line-height-snug)`                                                                                                                  |                                                                  |
+| `--mlv-typography-heading-h4-size`           | `var(--mlv-font-size-2xl)`                                                                                                                     |                                                                  |
+| `--mlv-typography-heading-h4-weight`         | `var(--mlv-font-weight-semibold)`                                                                                                              |                                                                  |
+| `--mlv-typography-heading-h5-line-height`    | `var(--mlv-line-height-normal)`                                                                                                                |                                                                  |
+| `--mlv-typography-heading-h5-size`           | `var(--mlv-font-size-xl)`                                                                                                                      |                                                                  |
+| `--mlv-typography-heading-h5-weight`         | `var(--mlv-font-weight-semibold)`                                                                                                              |                                                                  |
+| `--mlv-typography-heading-h6-line-height`    | `var(--mlv-line-height-normal)`                                                                                                                |                                                                  |
+| `--mlv-typography-heading-h6-size`           | `var(--mlv-font-size-l)`                                                                                                                       |                                                                  |
+| `--mlv-typography-heading-h6-weight`         | `var(--mlv-font-weight-semibold)`                                                                                                              |                                                                  |
+| `--mlv-typography-hint-line-height`          | `var(--mlv-line-height-normal)`                                                                                                                |                                                                  |
+| `--mlv-typography-hint-size`                 | `var(--mlv-font-size-s)`                                                                                                                       |                                                                  |
+| `--mlv-typography-hint-weight`               | `var(--mlv-font-weight-normal)`                                                                                                                |                                                                  |
+| `--mlv-typography-label-line-height`         | `var(--mlv-line-height-tight)`                                                                                                                 |                                                                  |
+| `--mlv-typography-label-size`                | `var(--mlv-font-size-m)`                                                                                                                       |                                                                  |
+| `--mlv-typography-label-weight`              | `var(--mlv-font-weight-medium)`                                                                                                                |                                                                  |
+| `--mlv-typography-ui-l-line-height`          | `var(--mlv-line-height-tight)`                                                                                                                 |                                                                  |
+| `--mlv-typography-ui-l-size`                 | `var(--mlv-font-size-l)`                                                                                                                       |                                                                  |
+| `--mlv-typography-ui-l-weight`               | `var(--mlv-font-weight-medium)`                                                                                                                |                                                                  |
+| `--mlv-typography-ui-m-line-height`          | `var(--mlv-line-height-tight)`                                                                                                                 |                                                                  |
+| `--mlv-typography-ui-m-size`                 | `var(--mlv-font-size-m)`                                                                                                                       |                                                                  |
+| `--mlv-typography-ui-m-weight`               | `var(--mlv-font-weight-medium)`                                                                                                                |                                                                  |
+| `--mlv-typography-ui-s-line-height`          | `var(--mlv-line-height-tight)`                                                                                                                 |                                                                  |
+| `--mlv-typography-ui-s-size`                 | `var(--mlv-font-size-s)`                                                                                                                       |                                                                  |
+| `--mlv-typography-ui-s-weight`               | `var(--mlv-font-weight-medium)`                                                                                                                |                                                                  |
 
 ### Spacing
 
@@ -425,63 +425,64 @@ Semantic scales are split into `-size`, `-weight`, `-line-height` and (headings
 
 ### Sizing
 
-`--mlv-padding-*` are `vertical horizontal` shorthand pairs, not single values.
-
-| Token               | Light                                         | Notes |
-| ------------------- | --------------------------------------------- | ----- |
-| `--mlv-height-2xl`  | `4.25rem`                                     | 68px  |
-| `--mlv-height-l`    | `3.25rem`                                     | 52px  |
-| `--mlv-height-m`    | `2.75rem`                                     | 44px  |
-| `--mlv-height-s`    | `2.5rem`                                      | 40px  |
-| `--mlv-height-xl`   | `3.75rem`                                     | 60px  |
-| `--mlv-height-xs`   | `2rem`                                        | 32px  |
-| `--mlv-padding-2xl` | `var(--mlv-spacing-3) var(--mlv-spacing-6)`   |       |
-| `--mlv-padding-l`   | `var(--mlv-spacing-3) var(--mlv-spacing-6)`   |       |
-| `--mlv-padding-m`   | `var(--mlv-spacing-2) var(--mlv-spacing-4)`   |       |
-| `--mlv-padding-s`   | `var(--mlv-spacing-1-5) var(--mlv-spacing-3)` |       |
-| `--mlv-padding-xl`  | `var(--mlv-spacing-3) var(--mlv-spacing-6)`   |       |
-| `--mlv-padding-xs`  | `var(--mlv-spacing-1) var(--mlv-spacing-2)`   |       |
+`--mlv-padding-*` are `vertical horizontal` shorthand pairs, not single values. `--mlv-icon-in-container-ratio` is the odd member out: a unitless multiplier for a container height (e.g. `calc(var(--mlv-btn-height) * var(--mlv-icon-in-container-ratio))`), not a length of its own.
+
+| Token                           | Light                                         | Notes                                    |
+| ------------------------------- | --------------------------------------------- | ---------------------------------------- |
+| `--mlv-height-2xl`              | `4.25rem`                                     | 68px — no consumer; do not introduce one |
+| `--mlv-height-l`                | `3.25rem`                                     | 52px                                     |
+| `--mlv-height-m`                | `2.75rem`                                     | 44px                                     |
+| `--mlv-height-s`                | `2.25rem`                                     | 36px                                     |
+| `--mlv-height-xl`               | `3.75rem`                                     | 60px                                     |
+| `--mlv-height-xs`               | `1.75rem`                                     | 28px                                     |
+| `--mlv-icon-in-container-ratio` | `0.45`                                        |                                          |
+| `--mlv-padding-2xl`             | `var(--mlv-spacing-3) var(--mlv-spacing-6)`   |                                          |
+| `--mlv-padding-l`               | `var(--mlv-spacing-3) var(--mlv-spacing-6)`   |                                          |
+| `--mlv-padding-m`               | `var(--mlv-spacing-2) var(--mlv-spacing-4)`   |                                          |
+| `--mlv-padding-s`               | `var(--mlv-spacing-1-5) var(--mlv-spacing-3)` |                                          |
+| `--mlv-padding-xl`              | `var(--mlv-spacing-3) var(--mlv-spacing-6)`   |                                          |
+| `--mlv-padding-xs`              | `var(--mlv-spacing-1) var(--mlv-spacing-2)`   |                                          |
 
 ### Motion
 
 `--mlv-transition-*` hold property _lists_, not full `transition` shorthands: `transition: var(--mlv-transition-colors) var(--mlv-duration-fast) var(--mlv-ease-default)`.
 
-| Token                           | Light                                                  | Notes                                     |
-| ------------------------------- | ------------------------------------------------------ | ----------------------------------------- |
-| `--mlv-duration-fast`           | `100ms`                                                |                                           |
-| `--mlv-duration-instant`        | `0ms`                                                  |                                           |
-| `--mlv-duration-normal`         | `200ms`                                                |                                           |
-| `--mlv-duration-slow`           | `300ms`                                                |                                           |
-| `--mlv-duration-slower`         | `400ms`                                                |                                           |
-| `--mlv-duration-sluggish`       | `600ms`                                                |                                           |
-| `--mlv-ease-bounce`             | `cubic-bezier(0.68, -0.55, 0.27, 1.55)`                | bouncy snap                               |
-| `--mlv-ease-default`            | `cubic-bezier(0.4, 0, 0.2, 1)`                         | material standard                         |
-| `--mlv-ease-drawer`             | `cubic-bezier(0.32, 0.72, 0, 1)`                       | iOS drawer curve                          |
-| `--mlv-ease-in`                 | `cubic-bezier(0.4, 0, 1, 1)`                           | accelerate — exit                         |
-| `--mlv-ease-in-out`             | `cubic-bezier(0.4, 0, 0.2, 1)`                         | smooth bidirectional                      |
-| `--mlv-ease-in-out-strong`      | `cubic-bezier(0.77, 0, 0.175, 1)`                      | strong bidirectional — on-screen movement |
-| `--mlv-ease-linear`             | `linear`                                               |                                           |
-| `--mlv-ease-out`                | `cubic-bezier(0, 0, 0.2, 1)`                           | decelerate — enter                        |
-| `--mlv-ease-out-strong`         | `cubic-bezier(0.23, 1, 0.32, 1)`                       | strong decelerate — UI enters             |
-| `--mlv-ease-spring`             | `cubic-bezier(0.34, 1.56, 0.64, 1)`                    | springy overshoot                         |
-| `--mlv-ease-spring-soft`        | `cubic-bezier(0.34, 1.2, 0.64, 1)`                     | subtle overshoot                          |
-| `--mlv-ease-spring-strong`      | `cubic-bezier(0.34, 1.9, 0.64, 1)`                     | pronounced overshoot                      |
-| `--mlv-spring-damping`          | `14`                                                   |                                           |
-| `--mlv-spring-damping-loose`    | `8`                                                    |                                           |
-| `--mlv-spring-damping-rigid`    | `22`                                                   |                                           |
-| `--mlv-spring-mass`             | `1`                                                    |                                           |
-| `--mlv-spring-stiffness`        | `200`                                                  |                                           |
-| `--mlv-spring-stiffness-soft`   | `120`                                                  |                                           |
-| `--mlv-spring-stiffness-strong` | `400`                                                  |                                           |
-| `--mlv-stagger-delay`           | `40ms`                                                 | per-item delay increment                  |
-| `--mlv-stagger-delay-fast`      | `20ms`                                                 | tighter stagger for dense lists           |
-| `--mlv-stagger-delay-slow`      | `80ms`                                                 | relaxed stagger for hero sections         |
-| `--mlv-stagger-index`           | `0`                                                    | override per list item                    |
-| `--mlv-transition-all`          | `all`                                                  |                                           |
-| `--mlv-transition-colors`       | `color, background-color, border-color, outline-color` |                                           |
-| `--mlv-transition-opacity`      | `opacity`                                              |                                           |
-| `--mlv-transition-shadow`       | `box-shadow`                                           |                                           |
-| `--mlv-transition-transform`    | `transform`                                            |                                           |
+| Token                           | Light                                                  | Notes                                         |
+| ------------------------------- | ------------------------------------------------------ | --------------------------------------------- |
+| `--mlv-duration-fast`           | `100ms`                                                |                                               |
+| `--mlv-duration-instant`        | `0ms`                                                  |                                               |
+| `--mlv-duration-normal`         | `200ms`                                                |                                               |
+| `--mlv-duration-slow`           | `300ms`                                                |                                               |
+| `--mlv-duration-slower`         | `400ms`                                                |                                               |
+| `--mlv-duration-sluggish`       | `600ms`                                                |                                               |
+| `--mlv-ease-bounce`             | `cubic-bezier(0.68, -0.55, 0.27, 1.55)`                | bouncy snap                                   |
+| `--mlv-ease-default`            | `cubic-bezier(0.4, 0, 0.2, 1)`                         | material standard                             |
+| `--mlv-ease-drawer`             | `cubic-bezier(0.32, 0.72, 0, 1)`                       | iOS drawer curve                              |
+| `--mlv-ease-in`                 | `cubic-bezier(0.4, 0, 1, 1)`                           | accelerate — exit                             |
+| `--mlv-ease-in-out`             | `var(--mlv-ease-default)`                              | smooth bidirectional — same curve, one source |
+| `--mlv-ease-in-out-strong`      | `cubic-bezier(0.77, 0, 0.175, 1)`                      | strong bidirectional — on-screen movement     |
+| `--mlv-ease-linear`             | `linear`                                               |                                               |
+| `--mlv-ease-out`                | `cubic-bezier(0, 0, 0.2, 1)`                           | decelerate — enter                            |
+| `--mlv-ease-out-strong`         | `cubic-bezier(0.23, 1, 0.32, 1)`                       | strong decelerate — UI enters                 |
+| `--mlv-ease-spring`             | `cubic-bezier(0.34, 1.56, 0.64, 1)`                    | standard overshoot                            |
+| `--mlv-ease-spring-soft`        | `cubic-bezier(0.34, 1.2, 0.64, 1)`                     | subtle overshoot                              |
+| `--mlv-ease-spring-strong`      | `cubic-bezier(0.34, 1.9, 0.64, 1)`                     | pronounced overshoot                          |
+| `--mlv-spring-damping`          | `14`                                                   |                                               |
+| `--mlv-spring-damping-loose`    | `8`                                                    |                                               |
+| `--mlv-spring-damping-rigid`    | `22`                                                   |                                               |
+| `--mlv-spring-mass`             | `1`                                                    |                                               |
+| `--mlv-spring-stiffness`        | `200`                                                  |                                               |
+| `--mlv-spring-stiffness-soft`   | `120`                                                  |                                               |
+| `--mlv-spring-stiffness-strong` | `400`                                                  |                                               |
+| `--mlv-stagger-delay`           | `40ms`                                                 | per-item delay increment                      |
+| `--mlv-stagger-delay-fast`      | `20ms`                                                 | tighter stagger for dense lists               |
+| `--mlv-stagger-delay-slow`      | `80ms`                                                 | relaxed stagger for hero sections             |
+| `--mlv-stagger-index`           | `0`                                                    | override per list item                        |
+| `--mlv-transition-all`          | `all`                                                  |                                               |
+| `--mlv-transition-colors`       | `color, background-color, border-color, outline-color` |                                               |
+| `--mlv-transition-opacity`      | `opacity`                                              |                                               |
+| `--mlv-transition-shadow`       | `box-shadow`                                           |                                               |
+| `--mlv-transition-transform`    | `transform`                                            |                                               |
 
 ### Z-index
 

package/table/README.md

@@ -0,0 +1,46 @@
+# @malva-ui/core/table
+
+Native table styling and responsive layout primitives for Malva UI. The table
+keeps the browser's semantic table structure and does not render or manage
+data; use `MlvDataTable` when those features are needed.
+
+## Usage
+
+```html
+<table mlvTable [bordered]="true" hoverable="row" [responsive]="true" [popIn]="true" mlvDensity="compact" aria-label="People">
+  <thead>
+    <tr>
+      <th scope="col">Name</th>
+      <th scope="col">Role</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr mlvTableRow main>
+      <td mlvTableCell data-label="Name">Ada Lovelace</td>
+      <td mlvTableCell data-label="Role">Engineer</td>
+    </tr>
+    <tr mlvTableRow secondary>
+      <td mlvTableCell colspan="2">Loves analytical engines.</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+`responsive` enables narrow-screen horizontal overflow. Add `popIn` and pair a
+`main` row with a `secondary` row to use the mobile stacked presentation. Put
+the most important, interactive content in the main row and supporting content
+in the secondary row. Add `data-label` to main-row cells so their labels remain
+visible when the header is visually collapsed on mobile.
+
+`hoverable` accepts `"row"`, `"cell"`, or `false`.
+
+For a secondary row, set `colspan` to the number of cells in its paired main
+row. `colspan` is a numeric HTML attribute, so percentage values are not valid.
+
+The table participates in the five-level Malva density system through
+`mlvDensity`: `tight`, `compact`, `comfortable`, `spacious`, or `airy`. Omit it
+to inherit the surrounding density context or the global default.
+
+## Running unit tests
+
+Run `yarn nx run core-table:vite:test --run` to execute the unit tests.