@spaethtech/svelte-ui 0.20.1-dev.103.a762c22 → 0.20.1-dev.105.894ecae
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/components.md +12 -0
- package/package.json +1 -1
package/docs/components.md
CHANGED
|
@@ -17,6 +17,18 @@ Most sizeable/themeable components share two props (defined in `types/variants.t
|
|
|
17
17
|
- **`size`** — `sm` (24px), `md` (32px, **default**), `lg` (40px). Tied to the theme's
|
|
18
18
|
`--ui-height-sm` / `--ui-height` / `--ui-height-lg`.
|
|
19
19
|
|
|
20
|
+
## HTML attribute passthrough
|
|
21
|
+
|
|
22
|
+
Components forward the standard HTML attributes you pass — **`class`** (merged onto the root, appended
|
|
23
|
+
last so your classes win), **`data-*`** (e.g. a stable `data-testid` for e2e), **`aria-*`**, **`id`**,
|
|
24
|
+
**`title`**, and event handlers — onto their root element, typed against the matching `HTML*Attributes`.
|
|
25
|
+
So `<Badge data-testid="status" class="ml-2">` or `<Card onmouseenter={…}>` just work and type-check.
|
|
26
|
+
|
|
27
|
+
Exceptions: components that compute their own root **`style`** (themed `color-mix`, dimensions, drag
|
|
28
|
+
transforms — e.g. `Badge`, `Alert`, `Skeleton`, `DataTable`) do **not** accept a `style` override —
|
|
29
|
+
use `class`. Field-shaped components (`Input`, the specialized inputs, `Slider`, `TokenInput`,
|
|
30
|
+
`FileUpload`) route `class` to their outer field wrapper and land other attributes on the control.
|
|
31
|
+
|
|
20
32
|
## Field chrome (shared)
|
|
21
33
|
|
|
22
34
|
Every field-shaped component — `Input`, `Select`, `TextArea`, `Checkbox`, `Toggle` (and the
|