@chromvoid/uikit 0.1.0 → 0.2.0

package/specs/components/guidance-panel.md

@@ -0,0 +1,92 @@
+# cv-guidance-panel
+
+Product-agnostic guidance body layout for coach marks, inline hints, warnings, and blocked-action explanations. It owns only visual structure and styling; app-layer guidance state, overlay semantics, progress, dismiss, snooze, and completion live outside UIKit.
+
+## Anatomy
+
+```
+<cv-guidance-panel> (host)
+└── <section part="base" role="note">
+    ├── <header part="header">
+    │   ├── <span part="icon">
+    │   │   └── <slot name="icon">
+    │   ├── <div part="title">
+    │   │   └── <slot name="title">
+    │   └── <div part="progress">
+    │       └── <slot name="progress">
+    ├── <div part="body">
+    │   └── <slot>
+    └── <div part="actions">
+        └── <slot name="actions">
+```
+
+## Attributes
+
+| Attribute | Type   | Default         | Description                                                              |
+| --------- | ------ | --------------- | ------------------------------------------------------------------------ |
+| `variant` | String | `"coach-mark"`  | Visual variant: `"coach-mark"` \| `"hint"` \| `"warning"` \| `"blocked"` |
+| `density` | String | `"comfortable"` | Spacing density: `"comfortable"` \| `"compact"`                          |
+
+## Slots
+
+| Slot        | Description                                                          |
+| ----------- | -------------------------------------------------------------------- |
+| `icon`      | Optional leading visual.                                             |
+| `title`     | Guidance title exposed through the stable `title` part.              |
+| `(default)` | Main body content.                                                   |
+| `actions`   | Optional action controls supplied by the app host or owning surface. |
+| `progress`  | Optional progress text or indicator, such as `1 / 4`.                |
+
+## CSS Parts
+
+| Part       | Element     | Description                               |
+| ---------- | ----------- | ----------------------------------------- |
+| `base`     | `<section>` | Outer neutral content container.          |
+| `header`   | `<header>`  | Layout row for icon, title, and progress. |
+| `icon`     | `<span>`    | Wrapper around the `icon` slot.           |
+| `title`    | `<div>`     | Wrapper around the `title` slot.          |
+| `progress` | `<div>`     | Wrapper around the `progress` slot.       |
+| `body`     | `<div>`     | Wrapper around the default slot.          |
+| `actions`  | `<div>`     | Wrapper around the `actions` slot.        |
+
+## CSS Custom Properties
+
+| Property                                     | Default                                     | Description                          |
+| -------------------------------------------- | ------------------------------------------- | ------------------------------------ |
+| `--cv-guidance-panel-background`             | `var(--cv-color-surface-elevated, #1d2432)` | Base background.                     |
+| `--cv-guidance-panel-border-color`           | `var(--cv-color-border, #2a3245)`           | Base border color.                   |
+| `--cv-guidance-panel-border-radius`          | `var(--cv-radius-md, 8px)`                  | Base border radius.                  |
+| `--cv-guidance-panel-color`                  | `var(--cv-color-text, #e8ecf6)`             | Host text color.                     |
+| `--cv-guidance-panel-body-color`             | `var(--cv-color-text-muted, #bac4d8)`       | Body text color.                     |
+| `--cv-guidance-panel-title-color`            | `var(--cv-color-text-strong, currentColor)` | Title text color.                    |
+| `--cv-guidance-panel-icon-color`             | `currentColor`                              | Icon color before variant overrides. |
+| `--cv-guidance-panel-padding-inline`         | `var(--cv-space-4, 16px)`                   | Horizontal padding.                  |
+| `--cv-guidance-panel-padding-block`          | `var(--cv-space-4, 16px)`                   | Vertical padding.                    |
+| `--cv-guidance-panel-gap`                    | `var(--cv-space-3, 12px)`                   | Main layout gap.                     |
+| `--cv-guidance-panel-actions-gap`            | `var(--cv-space-2, 8px)`                    | Gap between action controls.         |
+| `--cv-guidance-panel-compact-padding-inline` | `var(--cv-space-3, 12px)`                   | Compact horizontal padding.          |
+| `--cv-guidance-panel-compact-padding-block`  | `var(--cv-space-3, 12px)`                   | Compact vertical padding.            |
+| `--cv-guidance-panel-compact-gap`            | `var(--cv-space-2, 8px)`                    | Compact main layout gap.             |
+
+## Accessibility
+
+`cv-guidance-panel` renders neutral supplementary content with `role="note"` on `part="base"`. It does not set dialog, popover, modal, live-region, focus-trap, dismiss, snooze, or completion semantics. `app-guidance-host` or the owning surface decides whether the panel appears inside a popover, bottom sheet, inline region, or another accessible container.
+
+## Usage
+
+```html
+<cv-guidance-panel variant="coach-mark" density="comfortable">
+  <cv-icon slot="icon" name="sparkles"></cv-icon>
+  <span slot="title">Create your first item</span>
+  <p>Start with a password, note, file, or passkey.</p>
+  <span slot="progress">1 / 4</span>
+  <div slot="actions">
+    <cv-button>Start</cv-button>
+    <cv-button variant="ghost">Later</cv-button>
+  </div>
+</cv-guidance-panel>
+```
+
+## Boundaries
+
+The component must not import WebView app state, navigation, module access, i18n data, guidance registry, or guidance model modules. It is a dumb visual primitive that renders slots and reflected presentation attributes.

package/specs/components/input.md

@@ -38,6 +38,7 @@ Single-line text input control supporting text-like types, clearable behavior, a
 | `password-toggle` | Boolean     | `false`      | yes      | Shows a password visibility toggle (only effective when `type="password"`) |
 | `size`            | String      | `"medium"`   | yes      | Component size: `small` \| `medium` \| `large`                             |
 | `variant`         | String      | `"outlined"` | yes      | Visual variant: `outlined` \| `filled`                                     |
+| `preset`          | String      | —            | yes      | Semantic preset: `search-mobile`                                           |
 | `name`            | String      | `""`         | no       | Name for form association                                                  |
 
 ## Variants
@@ -55,6 +56,12 @@ Single-line text input control supporting text-like types, clearable behavior, a
 | `medium` | `36px`              | `var(--cv-space-3, 12px)`   | `var(--cv-font-size-base, 14px)` |
 | `large`  | `42px`              | `var(--cv-space-4, 16px)`   | `var(--cv-font-size-md, 16px)`   |
 
+## Presets
+
+| Preset          | Description                                                                  |
+| --------------- | ---------------------------------------------------------------------------- |
+| `search-mobile` | Mobile search/input density with 42px height, 14px radius, and search tokens |
+
 ## Slots
 
 | Slot                 | Description                                        |

package/specs/components/menu.md

@@ -337,6 +337,7 @@ Split-button mode (`[split]`):
 | `split`           | Boolean | `false`     | Enables split-button mode with separate action and dropdown areas |
 | `size`            | String  | `"medium"`  | Size: `small` \| `medium` \| `large`                              |
 | `variant`         | String  | `"default"` | Visual variant: `default` \| `primary` \| `danger` \| `ghost`     |
+| `preset`          | String  | —           | Semantic preset: `icon-overflow`                                  |
 | `close-on-select` | Boolean | `true`      | Close the menu after an item is selected                          |
 | `aria-label`      | String  | `""`        | Accessible label for the trigger/dropdown                         |
 
@@ -357,6 +358,12 @@ Split-button mode (`[split]`):
 | `danger`  | Danger-tinted background and border    |
 | `ghost`   | Transparent background and border      |
 
+#### Presets
+
+| Preset          | Description                                                            |
+| --------------- | ---------------------------------------------------------------------- |
+| `icon-overflow` | Zero-gap icon overflow trigger with standardized menu offset and width |
+
 #### Slots
 
 | Slot        | Description                                   |
@@ -392,6 +399,7 @@ Split-button mode (`[split]`):
 | `--cv-menu-button-font-size`            | `inherit`                  | Font size of button content           |
 | `--cv-menu-button-menu-offset`          | `var(--cv-space-1, 4px)`   | Gap between trigger and menu popup    |
 | `--cv-menu-button-menu-min-inline-size` | `max(180px, 100%)`         | Minimum inline size of the menu popup |
+| `--cv-menu-button-menu-max-inline-size` | `calc(100vw - 16px)`       | Maximum inline size of the menu popup |
 | `--cv-menu-button-menu-z-index`         | `20`                       | Z-index of the menu popup             |
 
 #### Events

package/specs/components/option.md

@@ -45,15 +45,15 @@ Individual selectable option for use as a direct child of `cv-listbox` or `cv-li
 
 ## CSS Custom Properties
 
-| Property                          | Default                                                                  | Description                                                          |
-| --------------------------------- | ------------------------------------------------------------------------ | -------------------------------------------------------------------- |
-| `--cv-option-padding-block`       | `var(--cv-space-2, 8px)`                                                 | Vertical padding inside `[part="base"]`.                             |
-| `--cv-option-padding-inline`      | `var(--cv-space-3, 12px)`                                                | Horizontal padding inside `[part="base"]`.                           |
-| `--cv-option-border-radius`       | `var(--cv-radius-sm, 6px)`                                               | Border radius of `[part="base"]`.                                    |
-| `--cv-option-active-background`   | `color-mix(in oklab, var(--cv-color-primary, #65d7ff) 22%, transparent)` | Background applied when the option is active (highlighted).          |
-| `--cv-option-selected-background` | `color-mix(in oklab, var(--cv-color-primary, #65d7ff) 34%, transparent)` | Background applied when the option is selected.                      |
-| `--cv-option-disabled-opacity`    | `0.55`                                                                   | Opacity applied when the option is disabled.                         |
-| `--cv-option-focus-outline-color` | `var(--cv-color-primary, #65d7ff)`                                       | Outline color for `:focus-visible` (roving-tabindex focus strategy). |
+| Property                          | Default                            | Description                                                          |
+| --------------------------------- | ---------------------------------- | -------------------------------------------------------------------- |
+| `--cv-option-padding-block`       | `var(--cv-space-2, 8px)`           | Vertical padding inside `[part="base"]`.                             |
+| `--cv-option-padding-inline`      | `var(--cv-space-3, 12px)`          | Horizontal padding inside `[part="base"]`.                           |
+| `--cv-option-border-radius`       | `var(--cv-radius-sm, 6px)`         | Border radius of `[part="base"]`.                                    |
+| `--cv-option-active-background`   | `var(--cv-color-primary-ring)`     | Background applied when the option is active (highlighted).          |
+| `--cv-option-selected-background` | `var(--cv-color-primary-border)`   | Background applied when the option is selected.                      |
+| `--cv-option-disabled-opacity`    | `0.55`                             | Opacity applied when the option is disabled.                         |
+| `--cv-option-focus-outline-color` | `var(--cv-color-primary, #65d7ff)` | Outline color for `:focus-visible` (roving-tabindex focus strategy). |
 
 Additionally, component styles depend on theme tokens through fallback values:
 

package/specs/components/progress.md

@@ -22,6 +22,7 @@ A read-only indicator that communicates determinate or indeterminate loading/com
 | `min`           | Number  | `0`     | Minimum boundary                                                                    |
 | `max`           | Number  | `100`   | Maximum boundary                                                                    |
 | `indeterminate` | Boolean | `false` | Switches to indeterminate (animated) mode                                           |
+| `tone`          | String  | —       | Semantic tone: `upload` \| `queued` \| `success` \| `danger` \| `warning`           |
 | `value-text`    | String  | —       | Static override for `aria-valuetext`; takes precedence over the percentage fallback |
 | `aria-label`    | String  | —       | Accessible label passed through to headless                                         |
 
@@ -39,6 +40,16 @@ A read-only indicator that communicates determinate or indeterminate loading/com
 | `indicator` | `<div>`  | Filled portion representing current progress             |
 | `label`     | `<span>` | Content overlay inside indicator; wraps the default slot |
 
+## Tones
+
+| Tone      | Description                      |
+| --------- | -------------------------------- |
+| `upload`  | Primary upload/transfer progress |
+| `queued`  | Muted queued progress            |
+| `success` | Success/completed progress       |
+| `danger`  | Failed/error progress            |
+| `warning` | Paused/warning progress          |
+
 ## CSS Custom Properties
 
 | Property                        | Default                            | Description                           |

package/specs/components/sidebar.md

@@ -70,18 +70,18 @@ When `scrollspyRoot` is `null`, `cv-sidebar` resolves section targets in the hos
 
 ## CSS Custom Properties
 
-| Property                           | Default                                       |
-| ---------------------------------- | --------------------------------------------- |
-| `--cv-sidebar-inline-size`         | `280px`                                       |
-| `--cv-sidebar-rail-inline-size`    | `56px`                                        |
-| `--cv-sidebar-z-index`             | `30`                                          |
-| `--cv-sidebar-background`          | `var(--cv-color-surface, #141923)`            |
-| `--cv-sidebar-border-color`        | `var(--cv-color-border, #2a3245)`             |
-| `--cv-sidebar-padding-block`       | `var(--cv-space-3, 12px)`                     |
-| `--cv-sidebar-padding-inline`      | `var(--cv-space-3, 12px)`                     |
-| `--cv-sidebar-overlay-color`       | `color-mix(in oklab, black 56%, transparent)` |
-| `--cv-sidebar-transition-duration` | `var(--cv-duration-normal, 200ms)`            |
-| `--cv-sidebar-transition-easing`   | `var(--cv-easing-standard, ease)`             |
+| Property                           | Default                            |
+| ---------------------------------- | ---------------------------------- |
+| `--cv-sidebar-inline-size`         | `280px`                            |
+| `--cv-sidebar-rail-inline-size`    | `56px`                             |
+| `--cv-sidebar-z-index`             | `30`                               |
+| `--cv-sidebar-background`          | `var(--cv-color-surface, #141923)` |
+| `--cv-sidebar-border-color`        | `var(--cv-color-border, #2a3245)`  |
+| `--cv-sidebar-padding-block`       | `var(--cv-space-3, 12px)`          |
+| `--cv-sidebar-padding-inline`      | `var(--cv-space-3, 12px)`          |
+| `--cv-sidebar-overlay-color`       | `var(--cv-color-overlay)`          |
+| `--cv-sidebar-transition-duration` | `var(--cv-duration-normal, 200ms)` |
+| `--cv-sidebar-transition-easing`   | `var(--cv-easing-standard, ease)`  |
 
 ## Events
 

package/specs/components/table.md

@@ -52,19 +52,19 @@ Data table for displaying structured tabular content with optional sorting, row
 
 ## CSS Custom Properties
 
-| Property                                 | Default                                                                  | Description                                    |
-| ---------------------------------------- | ------------------------------------------------------------------------ | ---------------------------------------------- |
-| `--cv-table-border-radius`               | `var(--cv-radius-md, 10px)`                                              | Border radius of the table container           |
-| `--cv-table-border-color`                | `var(--cv-color-border, #2a3245)`                                        | Border color of the table and cells            |
-| `--cv-table-background`                  | `var(--cv-color-surface, #141923)`                                       | Table background color                         |
-| `--cv-table-header-background`           | `color-mix(in oklab, var(--cv-color-surface, #141923) 82%, transparent)` | Header row background                          |
-| `--cv-table-stripe-background`           | `color-mix(in oklab, var(--cv-color-surface, #141923) 90%, transparent)` | Background for alternating rows when `striped` |
-| `--cv-table-row-selected-background`     | `color-mix(in oklab, var(--cv-color-primary, #65d7ff) 12%, transparent)` | Background for selected rows                   |
-| `--cv-table-cell-padding-block`          | `var(--cv-space-2, 8px)`                                                 | Vertical cell padding                          |
-| `--cv-table-cell-padding-inline`         | `var(--cv-space-3, 12px)`                                                | Horizontal cell padding                        |
-| `--cv-table-compact-cell-padding-block`  | `var(--cv-space-1, 4px)`                                                 | Vertical cell padding in compact mode          |
-| `--cv-table-compact-cell-padding-inline` | `var(--cv-space-2, 8px)`                                                 | Horizontal cell padding in compact mode        |
-| `--cv-table-focus-outline-color`         | `var(--cv-color-primary, #65d7ff)`                                       | Focus ring color for grid navigation           |
+| Property                                 | Default                                          | Description                                    |
+| ---------------------------------------- | ------------------------------------------------ | ---------------------------------------------- |
+| `--cv-table-border-radius`               | `var(--cv-radius-md, 10px)`                      | Border radius of the table container           |
+| `--cv-table-border-color`                | `var(--cv-color-border, #2a3245)`                | Border color of the table and cells            |
+| `--cv-table-background`                  | `var(--cv-color-surface, #141923)`               | Table background color                         |
+| `--cv-table-header-background`           | `var(--cv-color-surface-glass-strong)`           | Header row background                          |
+| `--cv-table-stripe-background`           | `var(--cv-color-surface-secondary-glass-strong)` | Background for alternating rows when `striped` |
+| `--cv-table-row-selected-background`     | `var(--cv-color-primary-surface)`                | Background for selected rows                   |
+| `--cv-table-cell-padding-block`          | `var(--cv-space-2, 8px)`                         | Vertical cell padding                          |
+| `--cv-table-cell-padding-inline`         | `var(--cv-space-3, 12px)`                        | Horizontal cell padding                        |
+| `--cv-table-compact-cell-padding-block`  | `var(--cv-space-1, 4px)`                         | Vertical cell padding in compact mode          |
+| `--cv-table-compact-cell-padding-inline` | `var(--cv-space-2, 8px)`                         | Horizontal cell padding in compact mode        |
+| `--cv-table-focus-outline-color`         | `var(--cv-color-primary, #65d7ff)`               | Focus ring color for grid navigation           |
 
 Additionally, component styles depend on theme tokens through fallback values:
 

package/specs/components/theme.md

@@ -69,7 +69,7 @@ The provider defines the full design token surface. All tokens use the `--cv-` p
 | `--cv-color-text-strong`       | `#f5f7fc`                                                                   | `#0e1219`                                                                   | Emphasized text                |
 | `--cv-color-text-strongest`    | `#ffffff`                                                                   | `#000000`                                                                   | Maximum contrast text          |
 | `--cv-color-border`            | `#2a3245`                                                                   | `#d0d5de`                                                                   | Default border color           |
-| `--cv-color-border-muted`      | `color-mix(in oklab, var(--cv-color-border) 55%, transparent)`              | `color-mix(in oklab, var(--cv-color-border) 55%, transparent)`              | Subtle border                  |
+| `--cv-color-border-muted`      | `hwb(214 17.3% 63.5% / 0.52)`                                               | `hwb(216 9.8% 72.5% / 0.08)`                                                | Subtle border                  |
 | `--cv-color-border-strong`     | `color-mix(in oklab, var(--cv-color-border) 82%, white 18%)`                | `color-mix(in oklab, var(--cv-color-border) 82%, black 18%)`                | Strong border                  |
 | `--cv-color-border-accent`     | `color-mix(in oklab, var(--cv-color-primary) 35%, var(--cv-color-border))`  | `color-mix(in oklab, var(--cv-color-primary) 35%, var(--cv-color-border))`  | Accent-tinted border           |
 | `--cv-color-brand`             | `var(--cv-color-primary)`                                                   | _(inherits)_                                                                | Alias: brand color             |
@@ -101,7 +101,7 @@ The provider defines the full design token surface. All tokens use the `--cv-` p
 | `--cv-color-focus`             | `var(--cv-color-primary)`                                                   | _(inherits)_                                                                | Focus indicator color          |
 | `--cv-color-focus-ring`        | `var(--cv-color-primary)`                                                   | _(inherits)_                                                                | Focus ring color               |
 | `--cv-color-hover`             | `color-mix(in oklab, var(--cv-color-primary) 10%, var(--cv-color-surface))` | `color-mix(in oklab, var(--cv-color-primary) 8%, var(--cv-color-surface))`  | General hover state            |
-| `--cv-color-active`            | `color-mix(in oklab, var(--cv-color-primary) 18%, transparent)`             | `color-mix(in oklab, var(--cv-color-primary) 14%, transparent)`             | General active / pressed state |
+| `--cv-color-active`            | `hwb(186 0% 0% / 0.18)`                                                     | `hwb(186 0% 20% / 0.14)`                                                    | General active / pressed state |
 | `--cv-color-selected`          | `color-mix(in oklab, var(--cv-color-primary) 16%, var(--cv-color-surface))` | `color-mix(in oklab, var(--cv-color-primary) 12%, var(--cv-color-surface))` | Selected item background       |
 | `--cv-color-overlay`           | `rgba(4, 7, 13, 0.72)`                                                      | `rgba(15, 20, 30, 0.38)`                                                    | Modal / overlay backdrop       |
 
@@ -167,17 +167,17 @@ The provider defines the full design token surface. All tokens use the `--cv-` p
 
 ### Shadow tokens
 
-| Property           | Dark value                                                            | Light value                                                           | Description        |
-| ------------------ | --------------------------------------------------------------------- | --------------------------------------------------------------------- | ------------------ |
-| `--cv-shadow-sm`   | `0 2px 8px rgba(0, 0, 0, 0.24)`                                       | `0 2px 8px rgba(0, 0, 0, 0.08)`                                       | Small shadow       |
-| `--cv-shadow-md`   | `0 8px 28px rgba(0, 0, 0, 0.32)`                                      | `0 8px 28px rgba(0, 0, 0, 0.12)`                                      | Medium shadow      |
-| `--cv-shadow-lg`   | `0 16px 48px rgba(0, 0, 0, 0.38)`                                     | `0 16px 48px rgba(0, 0, 0, 0.14)`                                     | Large shadow       |
-| `--cv-shadow-xl`   | `0 24px 64px rgba(0, 0, 0, 0.42)`                                     | `0 24px 64px rgba(0, 0, 0, 0.16)`                                     | Extra-large shadow |
-| `--cv-shadow-glow` | `0 0 40px color-mix(in oklab, var(--cv-color-cyan) 15%, transparent)` | `0 0 40px color-mix(in oklab, var(--cv-color-cyan) 10%, transparent)` | Glow effect        |
-| `--cv-shadow-1`    | `var(--cv-shadow-sm)`                                                 | `var(--cv-shadow-sm)`                                                 | Alias: level 1     |
-| `--cv-shadow-2`    | `var(--cv-shadow-md)`                                                 | `var(--cv-shadow-md)`                                                 | Alias: level 2     |
-| `--cv-shadow-3`    | `var(--cv-shadow-lg)`                                                 | `var(--cv-shadow-lg)`                                                 | Alias: level 3     |
-| `--cv-shadow-4`    | `var(--cv-shadow-xl)`                                                 | `var(--cv-shadow-xl)`                                                 | Alias: level 4     |
+| Property           | Dark value                              | Light value                             | Description        |
+| ------------------ | --------------------------------------- | --------------------------------------- | ------------------ |
+| `--cv-shadow-sm`   | `0 2px 8px rgba(0, 0, 0, 0.24)`         | `0 2px 8px rgba(0, 0, 0, 0.08)`         | Small shadow       |
+| `--cv-shadow-md`   | `0 8px 28px rgba(0, 0, 0, 0.32)`        | `0 8px 28px rgba(0, 0, 0, 0.12)`        | Medium shadow      |
+| `--cv-shadow-lg`   | `0 16px 48px rgba(0, 0, 0, 0.38)`       | `0 16px 48px rgba(0, 0, 0, 0.14)`       | Large shadow       |
+| `--cv-shadow-xl`   | `0 24px 64px rgba(0, 0, 0, 0.42)`       | `0 24px 64px rgba(0, 0, 0, 0.16)`       | Extra-large shadow |
+| `--cv-shadow-glow` | `0 0 40px var(--cv-color-primary-ring)` | `0 0 40px var(--cv-color-primary-ring)` | Glow effect        |
+| `--cv-shadow-1`    | `var(--cv-shadow-sm)`                   | `var(--cv-shadow-sm)`                   | Alias: level 1     |
+| `--cv-shadow-2`    | `var(--cv-shadow-md)`                   | `var(--cv-shadow-md)`                   | Alias: level 2     |
+| `--cv-shadow-3`    | `var(--cv-shadow-lg)`                   | `var(--cv-shadow-lg)`                   | Alias: level 3     |
+| `--cv-shadow-4`    | `var(--cv-shadow-xl)`                   | `var(--cv-shadow-xl)`                   | Alias: level 4     |
 
 ### Motion tokens
 

package/specs/components/treegrid.md

@@ -223,14 +223,14 @@ Additionally, component styles depend on theme tokens:
 
 #### Visual States
 
-| Host selector                         | Description                                                                 |
-| ------------------------------------- | --------------------------------------------------------------------------- |
-| `:host([hidden])`                     | `display: none`                                                             |
-| `:host(:focus-visible) [part="row"]`  | `outline: 2px solid var(--cv-color-primary)` at `outline-offset: -2px`      |
-| `:host([active]) [part="row"]`        | Primary-tinted background (`color-mix(in oklab, primary 18%, transparent)`) |
-| `:host([selected]) [part="row"]`      | Same primary-tinted background as `[active]`                                |
-| `:host([disabled]) [part="row"]`      | `opacity: 0.55`                                                             |
-| `:host([disabled]) [part="children"]` | `opacity: 0.55`                                                             |
+| Host selector                         | Description                                                            |
+| ------------------------------------- | ---------------------------------------------------------------------- |
+| `:host([hidden])`                     | `display: none`                                                        |
+| `:host(:focus-visible) [part="row"]`  | `outline: 2px solid var(--cv-color-primary)` at `outline-offset: -2px` |
+| `:host([active]) [part="row"]`        | Primary-tinted background (`var(--cv-color-active)`)                   |
+| `:host([selected]) [part="row"]`      | Same primary-tinted background as `[active]`                           |
+| `:host([disabled]) [part="row"]`      | `opacity: 0.55`                                                        |
+| `:host([disabled]) [part="children"]` | `opacity: 0.55`                                                        |
 
 ---
 
@@ -343,13 +343,13 @@ Additionally, component styles depend on theme tokens:
 
 #### Visual States
 
-| Host selector           | Description                                                                 |
-| ----------------------- | --------------------------------------------------------------------------- |
-| `:host`                 | `display: block`                                                            |
-| `:host([active])`       | `background: color-mix(in oklab, var(--cv-color-primary) 16%, transparent)` |
-| `:host([selected])`     | `font-weight: 600`                                                          |
-| `:host([disabled])`     | `opacity: 0.55`                                                             |
-| `:host(:focus-visible)` | `outline: 2px solid var(--cv-color-primary)` at `outline-offset: -2px`      |
+| Host selector           | Description                                                            |
+| ----------------------- | ---------------------------------------------------------------------- |
+| `:host`                 | `display: block`                                                       |
+| `:host([active])`       | `background: var(--cv-color-selected)`                                 |
+| `:host([selected])`     | `font-weight: 600`                                                     |
+| `:host([disabled])`     | `opacity: 0.55`                                                        |
+| `:host(:focus-visible)` | `outline: 2px solid var(--cv-color-primary)` at `outline-offset: -2px` |
 
 ## Out of Scope
 

package/specs/components/treeview.md

@@ -237,16 +237,16 @@ Additionally, component styles depend on theme tokens:
 
 #### Visual States
 
-| Host selector                         | Description                                                                 |
-| ------------------------------------- | --------------------------------------------------------------------------- |
-| `:host`                               | `display: block`, `outline: none`                                           |
-| `:host([hidden])`                     | `display: none`                                                             |
-| `:host([active]) [part="row"]`        | `background: color-mix(in oklab, var(--cv-color-primary) 22%, transparent)` |
-| `:host([selected]) [part="row"]`      | `background: color-mix(in oklab, var(--cv-color-primary) 30%, transparent)` |
-| `:host([disabled]) [part="row"]`      | `opacity: 0.55`                                                             |
-| `:host([expanded]) [part="children"]` | Visible (default); children hidden only when `[expanded]` is absent         |
-| `:host([branch]) [part="toggle"]`     | Toggle button rendered and visible                                          |
-| `:host(:focus-visible) [part="row"]`  | `outline: 2px solid var(--cv-color-primary)` at `outline-offset: 1px`       |
+| Host selector                         | Description                                                           |
+| ------------------------------------- | --------------------------------------------------------------------- |
+| `:host`                               | `display: block`, `outline: none`                                     |
+| `:host([hidden])`                     | `display: none`                                                       |
+| `:host([active]) [part="row"]`        | `background: var(--cv-color-primary-ring)`                            |
+| `:host([selected]) [part="row"]`      | `background: var(--cv-color-primary-border)`                          |
+| `:host([disabled]) [part="row"]`      | `opacity: 0.55`                                                       |
+| `:host([expanded]) [part="children"]` | Visible (default); children hidden only when `[expanded]` is absent   |
+| `:host([branch]) [part="toggle"]`     | Toggle button rendered and visible                                    |
+| `:host(:focus-visible) [part="row"]`  | `outline: 2px solid var(--cv-color-primary)` at `outline-offset: 1px` |
 
 #### Events