luxen-ui 0.6.2 → 0.8.0

package/dist/templates/elements/dialog.md

@@ -6,10 +6,7 @@ outline: deep
 
 Dialogs display critical information or request user input in a modal overlay that blocks interaction with the rest of the page. Commonly used for confirmations, forms, and alerts.
 
-<ElementSpec
-  tag="l-dialog"
-  type="shadow"
-/>
+**`<l-dialog>`** — Custom Element · Shadow DOM
 
 ## Options
 
@@ -345,6 +342,42 @@ Add `autofocus` to any focusable element inside the dialog to focus it automatic
 </l-dialog>
 ```
 
+### Without footer
+
+Omit the `footer` slot and the footer row collapses — no empty space is reserved at the bottom.
+
+```html
+<button
+  type="button"
+  class="l-button"
+  command="--show"
+  commandfor="dialog-without-footer"
+>
+  Open dialog
+</button>
+
+<l-dialog
+  id="dialog-without-footer"
+  title="Release notes"
+>
+  <button
+    slot="close"
+    type="button"
+    class="l-close"
+    data-appearance="ring"
+    aria-label="Close"
+    command="--hide"
+    commandfor="dialog-without-footer"
+  ></button>
+  <article class="h-[340px]">
+    <p>
+      Leave out the <code>footer</code> slot and the footer row collapses — no empty padded band at
+      the bottom.
+    </p>
+  </article>
+</l-dialog>
+```
+
 ### Without header
 
 Add `without-header` to drop the header row entirely (title and close slot). Useful for confirmation prompts where the body already carries the heading. Provide an accessible heading inside the body and rely on `Escape` or a footer action to close.
@@ -417,27 +450,24 @@ Add `without-header` to drop the header row entirely (title and close slot). Use
 
 ### Criteria
 
-| Check | Description |
-|-------|-------------|
-| Role | Rendered as a native `<dialog>` in the shadow root — built-in `dialog` role and modal semantics |
-| Accessible name | The `title` property renders as an `<h2>` in the header, or provide a custom heading via `slot="title"` |
-| Focus management | Focus is trapped inside the modal; moves to the first focusable element on open |
-| Focus restoration | Focus returns to the trigger element when the dialog closes |
-| Close button | Consumer provides the close button via `slot="close"` with `aria-label="Close"` |
-| Motion | Respects `prefers-reduced-motion` |
+- **Role** — Rendered as a native `<dialog>` in the shadow root — built-in `dialog` role and modal semantics
+- **Accessible name** — The `title` property renders as an `<h2>` in the header, or provide a custom heading via `slot="title"`
+- **Focus management** — Focus is trapped inside the modal; moves to the first focusable element on open
+- **Focus restoration** — Focus returns to the trigger element when the dialog closes
+- **Close button** — Consumer provides the close button via `slot="close"` with `aria-label="Close"`
+- **Motion** — Respects `prefers-reduced-motion`
 
 ### Rules
+
 - Always set a meaningful `title` — it becomes the dialog heading and accessible name
 - Put the close button in `slot="close"` with `class="l-close"` and `command="--hide"` `commandfor="<id>"`
 - Use `command="--show"` and `command="--hide"` with `commandfor` pointing at the dialog id. The `--` prefix is mandatory for custom elements
 
 ### Keyboard interactions
 
-| Key | Description |
-|-----|-------------|
-| Escape | Closes the dialog |
-| Tab | Cycles focus through focusable elements inside the dialog |
-| Shift + Tab | Cycles focus backward through focusable elements inside the dialog |
+- `Escape` — Closes the dialog
+- `Tab` — Cycles focus through focusable elements inside the dialog
+- `Shift + Tab` — Cycles focus backward through focusable elements inside the dialog
 
 ## API reference
 
@@ -449,12 +479,10 @@ import 'luxen-ui/dialog';
 
 ### Attributes & Properties
 
-<ApiTable :data="[
-  { Attribute: 'title', Description: 'Dialog title rendered in the header as an `<h2>`' },
-  { Attribute: 'open', Description: 'Whether the dialog is open. Reflects to attribute' },
-  { Attribute: 'light-dismiss', Description: 'Close when the backdrop is clicked' },
-  { Attribute: 'without-header', Description: 'Hide the header entirely (title and close slot)' },
-]" />
+- **title**: `string` — Dialog title rendered in the header.
+- **open**: `boolean` (default: `false`) — Whether the dialog is open.
+- **light-dismiss**: `boolean` (default: `false`) — Close when the backdrop is clicked.
+- **without-header**: `boolean` (default: `false`) — Hide the header entirely (title and close slot).
 
 ### Commands
 
@@ -468,46 +496,37 @@ Open and close the dialog by toggling its `open` property, or via the [Invoker C
 > ```
 > 
 
-<ApiTable :data="[
-  { Command: '--show', Description: 'Sets `open = true`' },
-  { Command: '--hide', Description: 'Sets `open = false`' },
-]" />
+- `--show` — Sets `open = true`.
+- `--hide` — Sets `open = false`.
 
 ### Events
 
-<ApiTable :data="[
-  { Event: 'show', Description: 'Fired when the dialog opens' },
-  { Event: 'after-show', Description: 'Fired after the open animation completes' },
-  { Event: 'hide', Description: 'Fired when the dialog is about to close. Cancelable — call `event.preventDefault()` to keep it open' },
-  { Event: 'after-hide', Description: 'Fired after the close animation completes' },
-]" />
+- **show** — Fired when the dialog opens. Not cancelable.
+- **after-show** — Fired after the open animation completes.
+- **hide** (cancelable) — Fired when the dialog is about to close. Cancelable — call `event.preventDefault()` to keep it open.
+- **after-hide** — Fired after the close animation completes.
 
 ### Slots
 
-<ApiTable :data="[
-  { Slot: '(default)', Description: 'Body content' },
-  { Slot: 'title', Description: 'Custom heading element. Overrides the default `<h2>` rendered from the `title` property' },
-  { Slot: 'close', Description: 'Close button (typically `<button class=&quot;l-close&quot;>`)' },
-  { Slot: 'footer', Description: 'Footer actions' },
-]" />
+- **(default)** — Body content.
+- **title** — Custom heading element. Overrides the default `<h2>` rendered from the `title` property.
+- **close** — Close button (typically `<button class="l-close">`).
+- **footer** — Footer actions.
 
 ### CSS parts
 
-<ApiTable :data="[
-  { Part: 'dialog', Description: 'The native `<dialog>` element' },
-  { Part: 'header', Description: 'The header wrapper containing the title and close slot' },
-  { Part: 'title', Description: 'The dialog title heading' },
-  { Part: 'body', Description: 'The body wrapper around the default slot' },
-  { Part: 'footer', Description: 'The footer wrapper around the footer slot' },
-]" />
+- `dialog` — The native `<dialog>` element.
+- `header` — The header wrapper containing the title and close slot.
+- `title` — The dialog title heading.
+- `body` — The body wrapper around the default slot.
+- `footer` — The footer wrapper around the footer slot.
 
 ### CSS custom properties
 
-<ApiTable :data="[
-  { Name: '--width', Description: 'Dialog width. Default `31rem`' },
-  { Name: '--border-radius', Description: 'Border radius. Default `6px`' },
-  { Name: '--show-duration', Description: 'Open transition duration. Default `200ms`' },
-  { Name: '--hide-duration', Description: 'Close transition duration. Default `200ms`' },
-  { Name: '--backdrop', Description: 'Backdrop color' },
-  { Name: '--backdrop-blur', Description: 'Backdrop blur amount (any CSS length). Default `0`' },
-]" />
+- `--width` (default: `31rem`) — Dialog width.
+- `--border-radius` (default: `6px`) — Dialog border radius.
+- `--padding` (default: `1.5rem`) — Padding applied to the header, footer, and inline-padding of the body. Set to `0` to remove all internal spacing (e.g. for edge-to-edge media).
+- `--show-duration` (default: `200ms`) — Open transition duration.
+- `--hide-duration` (default: `200ms`) — Close transition duration.
+- `--backdrop` — Backdrop color.
+- `--backdrop-blur` (default: `0`) — Backdrop blur amount (any CSS length). `0` means no blur; set e.g. `4px` for a subtle frost.

package/dist/templates/elements/drawer.md

@@ -6,10 +6,7 @@ outline: deep
 
 Drawers display supplementary content in a panel that slides in from a screen edge. Commonly used for navigation menus, filters, and detail views without leaving the current page.
 
-<ElementSpec
-  tag="l-drawer"
-  type="shadow"
-/>
+**`<l-drawer>`** — Custom Element · Shadow DOM
 
 ## Options
 
@@ -314,27 +311,24 @@ Right-side filter panel with a footer for actions.
 
 ### Criteria
 
-| Check | Description |
-|-------|-------------|
-| Role | Rendered as a native `<dialog>` in the shadow root — built-in `dialog` role and modal semantics |
-| Accessible name | The `title` property is rendered as an `<h2>` inside the drawer header |
-| Focus management | Focus is trapped inside the modal; moves to the first focusable element on open |
-| Focus restoration | Focus returns to the trigger element when the drawer closes |
-| Close button | Consumer provides the close button via `slot="close"` with `aria-label="Close"` |
-| Motion | Slide animation respects `prefers-reduced-motion` |
+- **Role** — Rendered as a native `<dialog>` in the shadow root — built-in `dialog` role and modal semantics
+- **Accessible name** — The `title` property is rendered as an `<h2>` inside the drawer header
+- **Focus management** — Focus is trapped inside the modal; moves to the first focusable element on open
+- **Focus restoration** — Focus returns to the trigger element when the drawer closes
+- **Close button** — Consumer provides the close button via `slot="close"` with `aria-label="Close"`
+- **Motion** — Slide animation respects `prefers-reduced-motion`
 
 ### Rules
+
 - Always set a meaningful `title` — it becomes the drawer heading and accessible name
 - Put the close button in `slot="close"` with `class="l-close"` and `command="--hide"` `commandfor="<id>"`
 - Use `command="--show"` and `command="--hide"` with `commandfor` pointing at the drawer id. The `--` prefix is mandatory for custom elements
 
 ### Keyboard interactions
 
-| Key | Description |
-|-----|-------------|
-| Escape | Closes the drawer |
-| Tab | Cycles focus through focusable elements inside the drawer |
-| Shift + Tab | Cycles focus backward through focusable elements inside the drawer |
+- `Escape` — Closes the drawer
+- `Tab` — Cycles focus through focusable elements inside the drawer
+- `Shift + Tab` — Cycles focus backward through focusable elements inside the drawer
 
 ## API reference
 
@@ -346,12 +340,11 @@ import 'luxen-ui/drawer';
 
 ### Attributes & Properties
 
-<ApiTable :data="[
-  { Attribute: 'title', Description: 'Drawer title rendered in the header as an `<h2>`' },
-  { Attribute: 'open', Description: 'Whether the drawer is open. Reflects to attribute' },
-  { Attribute: 'light-dismiss', Description: 'Close when the backdrop is clicked' },
-  { Attribute: 'placement', Description: 'Edge the drawer slides from: `start` (default), `end`, or `bottom`' },
-]" />
+- **placement**: `'start' | 'end' | 'bottom' | undefined` — Edge the drawer slides in from. Defaults to the start (inline-start) edge.
+- **title**: `string` — Dialog title rendered in the header.
+- **open**: `boolean` (default: `false`) — Whether the dialog is open.
+- **light-dismiss**: `boolean` (default: `false`) — Close when the backdrop is clicked.
+- **without-header**: `boolean` (default: `false`) — Hide the header entirely (title and close slot).
 
 ### Commands
 
@@ -365,44 +358,38 @@ Open and close the drawer by toggling its `open` property, or via the [Invoker C
 > ```
 > 
 
-<ApiTable :data="[
-  { Command: '--show', Description: 'Sets `open = true`' },
-  { Command: '--hide', Description: 'Sets `open = false`' },
-]" />
+- `--show` — Sets `open = true`.
+- `--hide` — Sets `open = false`.
 
 ### Events
 
-<ApiTable :data="[
-  { Event: 'show', Description: 'Fired when the drawer opens' },
-  { Event: 'after-show', Description: 'Fired after the open animation completes' },
-  { Event: 'hide', Description: 'Fired when the drawer is about to close. Cancelable — call `event.preventDefault()` to keep it open' },
-  { Event: 'after-hide', Description: 'Fired after the close animation completes' },
-]" />
+- **show** — Fired when the drawer opens. Not cancelable.
+- **after-show** — Fired after the open animation completes.
+- **hide** (cancelable) — Fired when the drawer is about to close. Cancelable — call `event.preventDefault()` to keep it open.
+- **after-hide** — Fired after the close animation completes.
 
 ### Slots
 
-<ApiTable :data="[
-  { Slot: '(default)', Description: 'Body content' },
-  { Slot: 'close', Description: 'Close button (typically `<button class=&quot;l-close&quot;>`)' },
-  { Slot: 'footer', Description: 'Footer actions' },
-]" />
+- **(default)** — Body content.
+- **close** — Close button (typically `<button class="l-close">`).
+- **footer** — Footer actions.
+- **title** — Custom heading element. Overrides the default `<h2>` rendered from the `title` property.
 
 ### CSS parts
 
-<ApiTable :data="[
-  { Part: 'dialog', Description: 'The native `<dialog>` element' },
-  { Part: 'header', Description: 'The header wrapper containing the title and close slot' },
-  { Part: 'title', Description: 'The drawer title heading' },
-  { Part: 'body', Description: 'The body wrapper around the default slot' },
-  { Part: 'footer', Description: 'The footer wrapper around the footer slot' },
-]" />
+- `dialog` — The native `<dialog>` element.
+- `header` — The header wrapper containing the title and close slot.
+- `title` — The drawer title heading.
+- `body` — The body wrapper around the default slot.
+- `footer` — The footer wrapper around the footer slot.
 
 ### CSS custom properties
 
-<ApiTable :data="[
-  { Name: '--size', Description: 'Drawer size on the axis perpendicular to its edge (width for `start`/`end`, height for `bottom`). Default `320px`' },
-  { Name: '--border-radius', Description: 'Border radius on the inner edges. Default `0.75rem`' },
-  { Name: '--show-duration', Description: 'Open transition duration. Default `200ms`' },
-  { Name: '--hide-duration', Description: 'Close transition duration. Default `200ms`' },
-  { Name: '--backdrop', Description: 'Backdrop color' },
-]" />
+- `--size` (default: `320px`) — Drawer size on the axis perpendicular to its edge (width for `start`/`end`, height for `bottom`).
+- `--border-radius` (default: `6px`) — Drawer border radius on the inner edges.
+- `--show-duration` (default: `200ms`) — Open transition duration.
+- `--hide-duration` (default: `200ms`) — Close transition duration.
+- `--backdrop` — Backdrop color.
+- `--width` (default: `31rem`) — Dialog width.
+- `--padding` (default: `1.5rem`) — Padding applied to the header, footer, and inline-padding of the body. Set to `0` to remove all internal spacing (e.g. for edge-to-edge media).
+- `--backdrop-blur` (default: `0`) — Backdrop blur amount (any CSS length). `0` means no blur; set e.g. `4px` for a subtle frost.

package/dist/templates/elements/progress.md

@@ -6,10 +6,7 @@ outline: deep
 
 Progress bars are used to indicate the completion status of a task. Commonly used for file uploads, multi-step processes, and loading indicators with a known duration.
 
-<ElementSpec
-  tag="progress"
-  type="native"
-/>
+**`.l-progress`** — Native HTML Element
 
 ## Options
 
@@ -91,14 +88,13 @@ Add `data-orientation="vertical"` attribute.
 
 ### Criteria
 
-| Check | Description |
-|-------|-------------|
-| Role | Uses native `<progress>` — implicit `progressbar` role |
-| Accessible name | Must have an associated `<label>` or `aria-label` |
-| Color | Indicator and track colors meet non-text contrast ratio |
-| Motion | Indeterminate animation respects `prefers-reduced-motion` |
+- **Role** — Uses native `<progress>` — implicit `progressbar` role
+- **Accessible name** — Must have an associated `<label>` or `aria-label`
+- **Color** — Indicator and track colors meet non-text contrast ratio
+- **Motion** — Indeterminate animation respects `prefers-reduced-motion`
 
 ### Rules
+
 - Always pair the `<progress>` element with a visible `<label>` or `aria-label`
 - Set `value` for determinate progress; omit for indeterminate
 
@@ -112,22 +108,16 @@ Add `data-orientation="vertical"` attribute.
 
 ### Attributes & Properties
 
-<ApiTable :data="[
-  { Attribute: 'value', Description: 'Current progress between `0` and `1` (omit for indeterminate)' },
-  { Attribute: 'data-orientation=&quot;vertical&quot;', Description: 'Vertical orientation' },
-]" />
+- **value** — Current progress between `0` and `1` (omit for indeterminate).
+- **data-orientation** — vertical — Vertical orientation.
 
 ### CSS classes
 
-<ApiTable :data="[
-  { Class: '.l-progress', Description: 'Base progress bar style' },
-]" />
+- `.l-progress` — Base progress bar style.
 
 ### CSS custom properties
 
-<ApiTable :data="[
-  { Name: '--size', Description: 'Bar thickness (default: 4px)' },
-  { Name: '--track-color', Description: 'Track background color' },
-  { Name: '--indicator-color', Description: 'Fill/indicator color' },
-  { Name: '--indeterminate-animation', Description: 'Animation name for indeterminate state' },
-]" />
+- `--size` (default: `4px`) — Bar thickness.
+- `--track-color` — Track background color.
+- `--indicator-color` — Fill/indicator color.
+- `--indeterminate-animation` — Animation name for the indeterminate state.

package/dist/templates/elements/prose-editor.md

@@ -0,0 +1,211 @@
+---
+outline: deep
+---
+
+# Prose Editor
+
+A rich text editor built on [Tiptap](https://tiptap.dev) (ProseMirror). Form-associated — its value is the editor HTML, so it submits inside a `<form>` like a native field.
+
+```html
+<l-prose-editor placeholder="Write something…"></l-prose-editor>
+```
+
+The editable area renders in light DOM, so its content styles ship as a separate stylesheet you import once globally. See [Importing](#importing).
+
+**`<l-prose-editor>`** — Custom Element · Shadow DOM
+
+## Options
+
+### Basic
+
+The default toolbar covers headings, marks, lists, links, code, an emoji picker and undo/redo. Set initial content with `initial-html`.
+
+```html
+<l-prose-editor
+  placeholder="Write something…"
+  initial-html="<h2>Release notes</h2><p>This editor ships with a <strong>default</strong> toolbar covering headings, marks, lists, links and more.</p><ul><li>Built on Tiptap</li><li>Form-associated</li></ul>"
+></l-prose-editor>
+```
+
+### Toolbar preset
+
+Set `toolbar-preset="minimal"` for a compact bold/italic/underline toolbar.
+
+```html
+<l-prose-editor
+  toolbar-preset="minimal"
+  placeholder="Bold, italic, underline only…"
+></l-prose-editor>
+```
+
+### Custom toolbar
+
+Set `toolbar` to a comma-separated list of commands to build your own layout. Use `divider` to insert a separator.
+
+```html
+<l-prose-editor
+  toolbar="bold,italic,link,divider,bulletlist,orderedlist,divider,undo,redo"
+  placeholder="Custom toolbar…"
+></l-prose-editor>
+```
+
+Available commands: `heading-1`, `heading-2`, `heading-3`, `bold`, `italic`, `underline`, `strike`, `highlight`, `bulletlist`, `orderedlist`, `blockquote`, `code-block`, `horizontal-rule`, `link`, `emoji`, `attachment`, `undo`, `redo`, `divider`.
+
+### Toolbar placement
+
+Set `toolbar-placement="bottom"` to move the toolbar below the content.
+
+```html
+<l-prose-editor
+  toolbar-placement="bottom"
+  placeholder="Toolbar sits below the content…"
+></l-prose-editor>
+```
+
+## Examples
+
+### Form integration
+
+The editor participates in forms via its `name` attribute. The submitted value is the HTML string; `required` blocks submission while empty.
+
+```html
+<form
+  class="flex flex-col items-start gap-4"
+  onsubmit="
+    event.preventDefault();
+    const data = new FormData(event.target);
+    alert('description = ' + data.get('description'));
+  "
+>
+  <label class="flex w-full flex-col gap-1">
+    <span class="text-sm font-medium">Description</span>
+    <l-prose-editor
+      name="description"
+      required
+      toolbar-preset="minimal"
+      placeholder="Describe your product…"
+    ></l-prose-editor>
+  </label>
+  <button
+    type="submit"
+    class="l-button"
+    data-variant="primary"
+  >
+    Submit
+  </button>
+</form>
+```
+
+## Accessibility
+
+### Criteria
+
+- **Toolbar role** — The toolbar uses `role="toolbar"` with an accessible label
+- **Button state** — Each toolbar button exposes `aria-pressed` reflecting whether the mark/format is active
+- **Button label** — Icon-only buttons carry an `aria-label` and `title` describing the action
+- **Focus state** — Visible focus ring on toolbar buttons for keyboard users
+- **Form validation** — When `required`, an empty editor reports a `valueMissing` validation message to the form
+
+### Rules
+
+- Associate a visible `<label>` with the editor, or set `aria-label` on the host element
+- Keep custom toolbars logically ordered so keyboard users encounter commands in a predictable sequence
+
+### Keyboard interactions
+
+- `Tab` — Moves focus into the toolbar, then into the editable content
+- `Ctrl/Cmd + B` — Toggles bold
+- `Ctrl/Cmd + I` — Toggles italic
+- `Ctrl/Cmd + U` — Toggles underline
+- `Ctrl/Cmd + Z` — Undo
+- `Ctrl/Cmd + Shift + Z` — Redo
+- `Escape` — Closes the emoji picker when open
+
+## API reference
+
+### Importing
+
+Import the element and the content stylesheet once globally. The stylesheet styles the editable area, which renders in light DOM to avoid `contenteditable` caret bugs inside shadow trees.
+
+```js
+import 'luxen-ui/prose-editor';
+```
+
+```css
+@import 'luxen-ui/css/prose-editor';
+```
+
+### Attributes & Properties
+
+- **editor**: `Editor` — The Tiptap editor instance. Available after the first render.
+- **initial-html**: `string` — Initial HTML content.
+- **initial-json**: `string` — Initial content as a serialized ProseMirror JSON string.
+- **editor-class**: `string` (default: `'prose'`) — Class applied to the `.ProseMirror` editable element (e.g. for Tailwind Typography `prose`).
+- **toolbar**: `ToolbarCommandName[]` (default: `[]`) — Explicit list of toolbar commands. Overrides `toolbar-preset` when set.
+- **toolbar-preset**: `'default' | 'minimal'` (default: `'default'`) — Built-in toolbar layout used when `toolbar` is not set.
+- **toolbar-placement**: `'top' | 'bottom'` (default: `'top'`) — Where the toolbar sits relative to the content.
+- **autofocus**: `boolean` (default: `false`) — Focus the editor on creation.
+- **placeholder**: `string` — Placeholder shown when the editor is empty.
+- **validationTarget**: `HTMLElement | undefined`
+
+### Methods
+
+- **getHTML()** → `string` — Get the current content as an HTML string. Empty paragraph resolves to `''`.
+- **getJSON()** → `JSONContent` — Get the current content as ProseMirror JSON.
+- **clear()** — Remove all content.
+- **focus()**
+- **blur()**
+- **toggleBold()**
+- **toggleItalic()**
+- **toggleUnderline()**
+- **toggleStrike()**
+- **toggleHighlight()**
+- **toggleHeading(level: 1 | 2 | 3)**
+- **toggleBulletList()**
+- **toggleOrderedList()**
+- **toggleBlockquote()**
+- **toggleCodeBlock()**
+- **setHorizontalRule()**
+- **undo()**
+- **redo()**
+- **toggleLink()**
+- **formResetCallback()**
+
+### Events
+
+- **change** — Fired when the content changes. `detail` is `{ html, json }`.
+- **add-file** — Fired when the attachment toolbar button is clicked.
+
+### Slots
+
+- **toolbar-start** — Content placed before the generated toolbar buttons.
+- **toolbar-end** — Content placed after the generated toolbar buttons.
+
+### CSS Parts
+
+- `wrapper` — The editor frame wrapping the toolbar and content.
+- `toolbar` — The toolbar row.
+- `toolbar-button` — Any toolbar button.
+- `divider` — A toolbar divider.
+- `editor` — The container around the editable content.
+
+### CSS custom properties
+
+- `--border-color` — Color of the editor frame border.
+- `--border-width` — Width of the editor frame border.
+- `--border-radius` — Corner radius of the editor frame.
+- `--background` — Background color of the editor.
+- `--color` — Text color of the editor.
+- `--toolbar-background` — Background color of the toolbar.
+- `--toolbar-padding` — Padding around the toolbar.
+- `--toolbar-gap` — Gap between toolbar buttons.
+- `--toolbar-divider-color` — Color of toolbar dividers.
+- `--toolbar-button-size` — Size of toolbar buttons.
+- `--toolbar-button-radius` — Corner radius of toolbar buttons.
+- `--toolbar-button-color` — Icon color of inactive toolbar buttons.
+- `--toolbar-button-color-active` — Icon color of hovered/active toolbar buttons.
+- `--toolbar-button-background-hover` — Background of hovered toolbar buttons.
+- `--toolbar-button-background-active` — Background of active toolbar buttons.
+- `--content-padding` (default: `0.75rem 1rem`) — Padding inside the editable content region.
+- `--content-min-height` (default: `8rem`) — Minimum height of the editable content region.
+- `--placeholder-color` — Placeholder text color.