Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions apps/website/content/docs/grid/editing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,16 @@ if (editing?.status === "saving") {
the lifecycle for you.
</Callout>

## Default editor behavior

The default text editor handles commit, errors, and pending state for you — no wiring required:

- **Blur commits in place.** Clicking away from an open editor commits the current draft without moving focus. (`Enter` and `Tab` commit _and_ move; blur commits and stays put.)
- **Failures keep the editor open.** When `validate` rejects (returns a string) or `onCellEdit` throws, the editor stays open and renders the message inline below the field — so the user can fix the value and try again. Press `Enter` to retry a failed commit, or `Escape` to cancel.
- **Async work locks the field.** While an async `editable`, `validate`, or `onCellEdit` is in flight (the `checking`, `validating`, and `saving` phases), the input is read-only and marked `aria-busy="true"`, so the user can't edit a value mid-save.

For custom styling, two DOM hooks are exposed: the editing cell carries `data-pretable-edit-status` (the current [lifecycle phase](#lifecycle)), and the inline error element carries `data-pretable-edit-error`. The `@pretable/ui` skin styles both — the field outline turns `--pretable-text-error` while invalid, and the message renders in the same color.

## Keyboard

Editing reuses the focused cell from the [selection](/docs/grid/selection) model.
Expand Down
15 changes: 12 additions & 3 deletions apps/website/content/docs/theming/token-reference.mdx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
title: Token reference
description: "The 34-token --pretable-* surface, with shape, default, and purpose for each."
description: "The 36-token --pretable-* surface, with shape, default, and purpose for each."
nav: Theming
order: 8
---

Pretable's public theming surface is 34 CSS variables, all `--pretable-*` prefixed. Each theme defines all 34 at `:root`. Excel and Material 3 ship preset values; consumers override individual tokens at `:root` in their own stylesheet (see [Override tokens](/docs/theming/override-tokens)).
Pretable's public theming surface is 36 CSS variables, all `--pretable-*` prefixed. Each theme defines all 36 at `:root`. Excel and Material 3 ship preset values; consumers override individual tokens at `:root` in their own stylesheet (see [Override tokens](/docs/theming/override-tokens)).

> Two tokens — `--pretable-row-height` and `--pretable-header-height` — are read by the engine in JavaScript via the `useResolvedHeights` hook. The other 32 are CSS-only.
> Two tokens — `--pretable-row-height` and `--pretable-header-height` — are read by the engine in JavaScript via the `useResolvedHeights` hook. The other 34 are CSS-only.

## Surfaces (5)

Expand Down Expand Up @@ -44,6 +44,15 @@ Pretable's public theming surface is 34 CSS variables, all `--pretable-*` prefix
| `--pretable-text-selected` | Selected cell/row text color | color | `#1f1f1f` | `#1d192b` (`on-secondary-container`) |
| `--pretable-focus-ring` | Focus outline color (cell focus, kbd nav) | color | `#107c41` (Excel green) | `#6750a4` (`primary`) |

## Editing (2)

These tokens skin the inline cell editor (see [Editing](/docs/grid/editing)).

| Token | Description | Type | Excel | Material 3 (light) |
| ----------------------- | -------------------------------------------------- | ----- | --------- | ------------------- |
| `--pretable-edit-bg` | Editor field surface (matches the grid background) | color | `#ffffff` | `#fcfcfc` (`N99`) |
| `--pretable-text-error` | Invalid-input outline + inline error-message text | color | `#b91c1c` | `#b3261e` (`error`) |

## Accent (1)

| Token | Description | Type | Excel | Material 3 (light) |
Expand Down
Loading
Loading