@signal9/era-ui 32.0.0 → 33.0.0
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/CHANGELOG.md +24 -0
- package/dist/dev/audit-overlay.svelte +2 -2
- package/dist/era-ui.css +1 -1
- package/dist/generated-docs/utilities.json +99 -99
- package/dist/os/pane.svelte +3 -13
- package/dist/styles/index.css +2 -956
- package/dist/styles/typography.css +1 -1
- package/dist/styles/utilities/geometry.css +188 -0
- package/dist/styles/utilities/interaction.css +334 -0
- package/dist/styles/utilities/materials.css +39 -0
- package/dist/styles/utilities/public.css +391 -0
- package/dist/styles/utilities.css +5 -0
- package/dist/ui/card/card.svelte +2 -52
- package/dist/ui/card/card.svelte.d.ts +0 -43
- package/dist/ui/card/variants.d.ts +44 -0
- package/dist/ui/card/variants.js +20 -0
- package/dist/ui/context-menu/context-menu-checkbox-item.svelte +2 -4
- package/dist/ui/context-menu/context-menu-group-heading.svelte +2 -5
- package/dist/ui/context-menu/context-menu-item.svelte +2 -8
- package/dist/ui/context-menu/context-menu-radio-item.svelte +2 -8
- package/dist/ui/context-menu/context-menu-separator.svelte +2 -5
- package/dist/ui/context-menu/context-menu-sub-trigger.svelte +2 -8
- package/dist/ui/dialog/dialog-header.svelte +1 -1
- package/dist/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte +2 -4
- package/dist/ui/dropdown-menu/dropdown-menu-group-heading.svelte +2 -5
- package/dist/ui/dropdown-menu/dropdown-menu-item.svelte +2 -8
- package/dist/ui/dropdown-menu/dropdown-menu-radio-item.svelte +2 -8
- package/dist/ui/dropdown-menu/dropdown-menu-separator.svelte +2 -5
- package/dist/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte +2 -8
- package/dist/ui/menu-recipes.d.ts +6 -0
- package/dist/ui/menu-recipes.js +6 -0
- package/dist/ui/menubar/menubar-checkbox-item.svelte +2 -9
- package/dist/ui/menubar/menubar-group-heading.svelte +2 -5
- package/dist/ui/menubar/menubar-item.svelte +2 -8
- package/dist/ui/menubar/menubar-radio-item.svelte +2 -8
- package/dist/ui/menubar/menubar-separator.svelte +2 -5
- package/dist/ui/menubar/menubar-sub-trigger.svelte +2 -8
- package/dist/ui/pane/pane-close.svelte +7 -26
- package/dist/ui/video-player/video-player.svelte +8 -8
- package/package.json +48 -12
- package/dist/docs/badge.md +0 -18
- package/dist/docs/bits-ui-audit.md +0 -58
- package/dist/docs/button.md +0 -19
- package/dist/docs/chip.md +0 -20
- package/dist/docs/component-docs-core.d.ts +0 -8
- package/dist/docs/component-docs-core.js +0 -73
- package/dist/docs/component-docs.d.ts +0 -2
- package/dist/docs/component-docs.js +0 -25
- package/dist/docs/component-source-scanners.d.ts +0 -18
- package/dist/docs/component-source-scanners.js +0 -46
- package/dist/docs/consumer-import.d.ts +0 -65
- package/dist/docs/consumer-import.js +0 -70
- package/dist/docs/css-utilities.d.ts +0 -58
- package/dist/docs/css-utilities.js +0 -317
- package/dist/docs/extract-props.d.ts +0 -13
- package/dist/docs/extract-props.js +0 -324
- package/dist/docs/generated-docs.d.ts +0 -6
- package/dist/docs/generated-docs.js +0 -30
- package/dist/docs/index.d.ts +0 -5
- package/dist/docs/index.js +0 -66
- package/dist/docs/notes.md +0 -83
- package/dist/docs/scroll-area.md +0 -7
- package/dist/docs/separator.md +0 -20
- package/dist/docs/table.md +0 -35
- package/dist/docs/utilities.d.ts +0 -4
- package/dist/docs/utilities.js +0 -15
- package/dist/generated-docs/accordion.md +0 -57
- package/dist/generated-docs/alert-dialog.md +0 -91
- package/dist/generated-docs/aspect-ratio.md +0 -17
- package/dist/generated-docs/avatar.md +0 -39
- package/dist/generated-docs/badge.md +0 -41
- package/dist/generated-docs/bar.md +0 -41
- package/dist/generated-docs/button-group.md +0 -19
- package/dist/generated-docs/button.md +0 -117
- package/dist/generated-docs/calendar.md +0 -126
- package/dist/generated-docs/card.md +0 -58
- package/dist/generated-docs/checkbox.md +0 -42
- package/dist/generated-docs/chip.md +0 -61
- package/dist/generated-docs/code-block.md +0 -20
- package/dist/generated-docs/collapsible.md +0 -30
- package/dist/generated-docs/combobox.md +0 -74
- package/dist/generated-docs/command-bar.md +0 -3
- package/dist/generated-docs/command.md +0 -126
- package/dist/generated-docs/context-menu.md +0 -104
- package/dist/generated-docs/copy-button.md +0 -29
- package/dist/generated-docs/cycle.md +0 -29
- package/dist/generated-docs/date-field.md +0 -49
- package/dist/generated-docs/date-picker.md +0 -180
- package/dist/generated-docs/date-range-field.md +0 -50
- package/dist/generated-docs/date-range-picker.md +0 -180
- package/dist/generated-docs/dialog.md +0 -94
- package/dist/generated-docs/draggable.md +0 -3
- package/dist/generated-docs/dropdown-menu.md +0 -104
- package/dist/generated-docs/file-upload.md +0 -18
- package/dist/generated-docs/getting-started.md +0 -3
- package/dist/generated-docs/input.md +0 -23
- package/dist/generated-docs/kv.md +0 -20
- package/dist/generated-docs/label.md +0 -17
- package/dist/generated-docs/link-preview.md +0 -40
- package/dist/generated-docs/llm-shell.md +0 -3
- package/dist/generated-docs/llms-full.txt +0 -5201
- package/dist/generated-docs/llms.txt +0 -138
- package/dist/generated-docs/logo.md +0 -24
- package/dist/generated-docs/manifest.json +0 -1685
- package/dist/generated-docs/measurements.md +0 -3
- package/dist/generated-docs/menu.md +0 -11
- package/dist/generated-docs/menubar.md +0 -104
- package/dist/generated-docs/meter.md +0 -101
- package/dist/generated-docs/mode.md +0 -24
- package/dist/generated-docs/nav.md +0 -73
- package/dist/generated-docs/navigation-menu.md +0 -11
- package/dist/generated-docs/notes.md +0 -87
- package/dist/generated-docs/os.md +0 -3
- package/dist/generated-docs/pagination.md +0 -55
- package/dist/generated-docs/pane.md +0 -34
- package/dist/generated-docs/pin-input.md +0 -31
- package/dist/generated-docs/popover.md +0 -43
- package/dist/generated-docs/progress.md +0 -17
- package/dist/generated-docs/radio-group.md +0 -31
- package/dist/generated-docs/range-calendar.md +0 -11
- package/dist/generated-docs/rating-group.md +0 -31
- package/dist/generated-docs/scroll-area.md +0 -65
- package/dist/generated-docs/select.md +0 -67
- package/dist/generated-docs/separator.md +0 -57
- package/dist/generated-docs/sheet.md +0 -11
- package/dist/generated-docs/skeleton.md +0 -18
- package/dist/generated-docs/slider.md +0 -71
- package/dist/generated-docs/spacing.md +0 -3
- package/dist/generated-docs/step.md +0 -51
- package/dist/generated-docs/surfaces.md +0 -3
- package/dist/generated-docs/switch.md +0 -18
- package/dist/generated-docs/table.md +0 -113
- package/dist/generated-docs/tabs.md +0 -48
- package/dist/generated-docs/text.md +0 -3
- package/dist/generated-docs/time-field.md +0 -49
- package/dist/generated-docs/time-range-field.md +0 -50
- package/dist/generated-docs/timeline.md +0 -32
- package/dist/generated-docs/todo.md +0 -3
- package/dist/generated-docs/toggle-group.md +0 -31
- package/dist/generated-docs/toggle.md +0 -20
- package/dist/generated-docs/toolbar.md +0 -11
- package/dist/generated-docs/tooltip.md +0 -40
- package/dist/generated-docs/tree.md +0 -36
- package/dist/generated-docs/utilities.md +0 -1236
- package/dist/generated-docs/video-player.md +0 -73
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
# Menubar
|
|
2
|
-
|
|
3
|
-
A horizontal bar of dropdown menus.
|
|
4
|
-
|
|
5
|
-
## Import
|
|
6
|
-
|
|
7
|
-
```ts
|
|
8
|
-
import * as Menubar from "@signal9/era-ui/menubar";
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
Composed from sub-components — compose explicitly at the call site:
|
|
12
|
-
|
|
13
|
-
- `Menubar.Root`
|
|
14
|
-
- `Menubar.Trigger`
|
|
15
|
-
- `Menubar.Content`
|
|
16
|
-
- `Menubar.Item`
|
|
17
|
-
- `Menubar.CheckboxItem`
|
|
18
|
-
- `Menubar.RadioItem`
|
|
19
|
-
- `Menubar.Separator`
|
|
20
|
-
- `Menubar.SubTrigger`
|
|
21
|
-
- `Menubar.SubContent`
|
|
22
|
-
- `Menubar.GroupHeading`
|
|
23
|
-
|
|
24
|
-
## Menubar.Root
|
|
25
|
-
|
|
26
|
-
Inherits all props from `Menubar.RootProps`.
|
|
27
|
-
|
|
28
|
-
| Prop | Type | Default | Notes |
|
|
29
|
-
|------|------|---------|-------|
|
|
30
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
31
|
-
| `value?` | `(forwarded)` | `''` | bindable |
|
|
32
|
-
|
|
33
|
-
## Menubar.Trigger
|
|
34
|
-
|
|
35
|
-
Inherits all props from `PartProps<Menubar.TriggerProps>`.
|
|
36
|
-
|
|
37
|
-
| Prop | Type | Default | Notes |
|
|
38
|
-
|------|------|---------|-------|
|
|
39
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
40
|
-
|
|
41
|
-
## Menubar.Content
|
|
42
|
-
|
|
43
|
-
Inherits all props from `OwnedPartProps<Menubar.ContentProps>`.
|
|
44
|
-
|
|
45
|
-
| Prop | Type | Default | Notes |
|
|
46
|
-
|------|------|---------|-------|
|
|
47
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
48
|
-
|
|
49
|
-
## Menubar.Item
|
|
50
|
-
|
|
51
|
-
Inherits all props from `PartProps<Menubar.ItemProps>`.
|
|
52
|
-
|
|
53
|
-
| Prop | Type | Default | Notes |
|
|
54
|
-
|------|------|---------|-------|
|
|
55
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
56
|
-
|
|
57
|
-
## Menubar.CheckboxItem
|
|
58
|
-
|
|
59
|
-
Inherits all props from `Menubar.CheckboxItemProps`.
|
|
60
|
-
|
|
61
|
-
| Prop | Type | Default | Notes |
|
|
62
|
-
|------|------|---------|-------|
|
|
63
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
64
|
-
| `checked?` | `(forwarded)` | `false` | bindable |
|
|
65
|
-
|
|
66
|
-
## Menubar.RadioItem
|
|
67
|
-
|
|
68
|
-
Inherits all props from `Menubar.RadioItemProps`.
|
|
69
|
-
|
|
70
|
-
| Prop | Type | Default | Notes |
|
|
71
|
-
|------|------|---------|-------|
|
|
72
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
73
|
-
|
|
74
|
-
## Menubar.Separator
|
|
75
|
-
|
|
76
|
-
Inherits all props from `Menubar.SeparatorProps`.
|
|
77
|
-
|
|
78
|
-
| Prop | Type | Default | Notes |
|
|
79
|
-
|------|------|---------|-------|
|
|
80
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
81
|
-
|
|
82
|
-
## Menubar.SubTrigger
|
|
83
|
-
|
|
84
|
-
Inherits all props from `OwnedPartProps<Menubar.SubTriggerProps>`.
|
|
85
|
-
|
|
86
|
-
| Prop | Type | Default | Notes |
|
|
87
|
-
|------|------|---------|-------|
|
|
88
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
89
|
-
|
|
90
|
-
## Menubar.SubContent
|
|
91
|
-
|
|
92
|
-
Inherits all props from `OwnedPartProps<Menubar.SubContentProps>`.
|
|
93
|
-
|
|
94
|
-
| Prop | Type | Default | Notes |
|
|
95
|
-
|------|------|---------|-------|
|
|
96
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
97
|
-
|
|
98
|
-
## Menubar.GroupHeading
|
|
99
|
-
|
|
100
|
-
Inherits all props from `Menubar.GroupHeadingProps`.
|
|
101
|
-
|
|
102
|
-
| Prop | Type | Default | Notes |
|
|
103
|
-
|------|------|---------|-------|
|
|
104
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
# Meter
|
|
2
|
-
|
|
3
|
-
Displays a value within a known range.
|
|
4
|
-
|
|
5
|
-
## Import
|
|
6
|
-
|
|
7
|
-
```ts
|
|
8
|
-
import { Meter } from "@signal9/era-ui/meter";
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Props
|
|
12
|
-
|
|
13
|
-
Inherits all props from `Meter.RootProps`.
|
|
14
|
-
|
|
15
|
-
| Prop | Type | Default | Notes |
|
|
16
|
-
|------|------|---------|-------|
|
|
17
|
-
| `tone?` | `'default' \| 'accent' \| 'destructive' \| 'success' \| 'warning' \| 'info'` | `'default'` | The band this reading falls in. Tone is the fill's colour only — the
|
|
18
|
-
track stays neutral, because the well belongs to the control and the
|
|
19
|
-
fill belongs to the value.
|
|
20
|
-
Tone carries no semantics on its own: a meter in the destructive band
|
|
21
|
-
still needs an accessible label saying what has run out. Pair it with
|
|
22
|
-
`aria-label` / a visible label, never rely on the hue alone. |
|
|
23
|
-
| `threshold?` | `number` | — | A BOUNDARY INSIDE THE RANGE — in the same units as `value`, not a
|
|
24
|
-
percentage. A quota with a soft limit before the hard one; a plan that
|
|
25
|
-
includes 30 hours of the 50 it bills against; a temperature that is
|
|
26
|
-
fine until it is not. The bar fills against `max`, and the mark says
|
|
27
|
-
where the number the reader is actually deciding about sits.
|
|
28
|
-
WHY THE MARK HAS NO COLOUR OF ITS OWN. It has to read against both
|
|
29
|
-
sides of itself: over the empty track before the value reaches it, and
|
|
30
|
-
over the fill afterwards. One token cannot do that — a colour tuned
|
|
31
|
-
against the track disappears into the fill the moment the value
|
|
32
|
-
crosses, which is exactly what a consumer hit hand-rolling this. So
|
|
33
|
-
the mark is painted in the colour of the side it is NOT on: the fill's
|
|
34
|
-
paint while the value is short of it, the track's fill once the value
|
|
35
|
-
has passed. That contrast is not a new promise — it is the meter's
|
|
36
|
-
own. A fill that did not stand out from its track would not be a
|
|
37
|
-
meter, so borrowing the pair is the one choice that cannot be wrong in
|
|
38
|
-
a theme, a tone, or a surface era has not seen.
|
|
39
|
-
IT IS DECORATION, and silent on purpose. There is no `role` and
|
|
40
|
-
nothing to announce: a screen reader gets `value`/`min`/`max` and the
|
|
41
|
-
meter's own accessible name, and a boundary it cannot position adds
|
|
42
|
-
nothing. If the threshold is part of the reading — it usually is —
|
|
43
|
-
put the figure in `aria-label` and in a caption, where it is a number
|
|
44
|
-
rather than a position.
|
|
45
|
-
PASS `aria-valuetext` IF YOUR STORED UNIT IS NOT YOUR DISPLAYED ONE.
|
|
46
|
-
`value`, `max` and `threshold` all have to sit in one unit for this
|
|
47
|
-
arithmetic to work, and `aria-valuenow` is `value` verbatim — so a bar
|
|
48
|
-
stored in minutes and read in hours announces "2640 of 3000", a figure
|
|
49
|
-
the customer was never quoted. Converting the props is not available
|
|
50
|
-
to you (it would move the mark), which makes `aria-valuetext` the only
|
|
51
|
-
lever; it passes through `restProps` onto the same element. Reported
|
|
52
|
-
by a consumer billing minutes and quoting hours.
|
|
53
|
-
Outside `[min, max]` it renders NOTHING rather than clamping to an
|
|
54
|
-
end, because a mark pinned to the edge of the bar would claim a
|
|
55
|
-
boundary that is not in the range. |
|
|
56
|
-
| `buffer?` | `number` | — | A REGION FROM `min` THAT IS A DIFFERENT KIND OF QUANTITY — painted
|
|
57
|
-
under the fill, over the track, in the same units as `value`.
|
|
58
|
-
The media player's buffered-progress shape, and the name is borrowed
|
|
59
|
-
from it, but the reading is more general: some of the range is already
|
|
60
|
-
accounted for. A plan whose first 30 of 50 hours are included in the
|
|
61
|
-
monthly minimum is not "24 hours into a bill", it is "24 of 30 hours
|
|
62
|
-
you have already paid for" — money spent against money that will be
|
|
63
|
-
spent, which is a distinction the bar could not draw.
|
|
64
|
-
NO COLOUR OF ITS OWN, for the reason `threshold` has none: it has to
|
|
65
|
-
be legible over the track while never competing with the fill that
|
|
66
|
-
crosses it, and a token tuned for one of those is wrong for the other.
|
|
67
|
-
It is the fill's own paint at 30%, so it cannot be wrong in a theme,
|
|
68
|
-
a tone or a surface era has not seen, and it is the same 30% Slider's
|
|
69
|
-
`progress` has used for a seek bar's buffer since it shipped.
|
|
70
|
-
UNDER the fill, so it disappears as the value consumes it. That is the
|
|
71
|
-
reading, not a limitation: once you are past your included hours, the
|
|
72
|
-
included region IS spent, and `threshold` is what goes on marking
|
|
73
|
-
where it ended.
|
|
74
|
-
CLAMPED to the range rather than dropped, which is where it differs
|
|
75
|
-
from `threshold`. A region can be honestly truncated — a buffer past
|
|
76
|
-
`max` means the whole visible bar is accounted for, and painting it
|
|
77
|
-
all says exactly that. A point cannot: a mark pinned to the edge would
|
|
78
|
-
claim a boundary that is not in the range, so an out-of-range
|
|
79
|
-
`threshold` renders nothing instead.
|
|
80
|
-
Silent, like the mark. `aria-valuetext` already carries the reading,
|
|
81
|
-
and a second region a screen reader cannot position adds nothing.
|
|
82
|
-
(Slider spells its equivalent `progress` and takes a 0–1 FRACTION.
|
|
83
|
-
Here every positional prop is in the value's own units — `value`,
|
|
84
|
-
`max`, `threshold`, `buffer` — because a component that mixed the two
|
|
85
|
-
would be a bug generator. The names differ because on a Meter
|
|
86
|
-
`progress` would be a synonym for `value`.) |
|
|
87
|
-
| `start?` | `Snippet` | — | Captions under the two ends of the bar — what the range MEANS.
|
|
88
|
-
A meter states a proportion and leaves the reader to work out what of.
|
|
89
|
-
"0m used" on the left and "50h before approval" on the right is not
|
|
90
|
-
decoration, it is the reading; every consumer of a bare meter ends up
|
|
91
|
-
hand-rolling the same flex row underneath it, which is where this came
|
|
92
|
-
from. `start` is left, `end` is right, either may stand alone.
|
|
93
|
-
NOT ANNOUNCED. They are captions, so a screen reader gets the meter's
|
|
94
|
-
value and its own `aria-label`, not these. If the range needs saying
|
|
95
|
-
out loud, say it in the label too — the same rule `tone` carries.
|
|
96
|
-
THE DOM IS UNCHANGED WITHOUT THEM. With neither snippet this renders
|
|
97
|
-
exactly the element it always did, so `class` still lands on the track
|
|
98
|
-
and the geometry audits still walk the same box. Passing one wraps the
|
|
99
|
-
track in a column, and `class` still lands on the track. |
|
|
100
|
-
| `end?` | `Snippet` | — | — |
|
|
101
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
# Mode
|
|
2
|
-
|
|
3
|
-
Scoped density / surface / corners override for any subtree.
|
|
4
|
-
|
|
5
|
-
## Import
|
|
6
|
-
|
|
7
|
-
```ts
|
|
8
|
-
import { Mode } from "@signal9/era-ui/mode";
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Props
|
|
12
|
-
|
|
13
|
-
Inherits all props from `HTMLAttributes<HTMLDivElement>`.
|
|
14
|
-
|
|
15
|
-
| Prop | Type | Default | Notes |
|
|
16
|
-
|------|------|---------|-------|
|
|
17
|
-
| `mode?` | `ProviderMode` | — | — |
|
|
18
|
-
| `surface?` | `Surface` | — | — |
|
|
19
|
-
| `corners?` | `Corners` | — | — |
|
|
20
|
-
| `font?` | `Font` | — | — |
|
|
21
|
-
| `motion?` | `Motion` | — | — |
|
|
22
|
-
| `primary?` | `string` | — | Any CSS color — sets --color-primary for this subtree. |
|
|
23
|
-
| `primaryFg?` | `string` | — | Foreground against `primary` — sets --color-primary-fg. |
|
|
24
|
-
| `children?` | `Snippet` | — | — |
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
# Nav
|
|
2
|
-
|
|
3
|
-
A navigation landmark and its items — the current one announces itself, and that announcement is what paints it.
|
|
4
|
-
|
|
5
|
-
## Import
|
|
6
|
-
|
|
7
|
-
```ts
|
|
8
|
-
import * as Nav from "@signal9/era-ui/nav";
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
Composed from sub-components — compose explicitly at the call site:
|
|
12
|
-
|
|
13
|
-
- `Nav.Bar`
|
|
14
|
-
- `Nav.Item`
|
|
15
|
-
|
|
16
|
-
## Nav.Bar
|
|
17
|
-
|
|
18
|
-
Inherits all props from `HTMLAttributes<HTMLElement>`.
|
|
19
|
-
|
|
20
|
-
| Prop | Type | Default | Notes |
|
|
21
|
-
|------|------|---------|-------|
|
|
22
|
-
| `ref?` | `HTMLElement \| null` | `null` | bindable |
|
|
23
|
-
| `size?` | `'chip' \| 'control' \| 'bar'` | `'bar'` | Height tier, exactly as Bar's — the geometry is Bar's, not a second copy. |
|
|
24
|
-
| `content?` | `BarContent` | — | Tier of the items inside, so the wall stays concentric to them. |
|
|
25
|
-
| `divider?` | `boolean` | `false` | Draw Bar's flush cap-a-panel rule beneath the bar. Off by default,
|
|
26
|
-
because a nav that sits in a page already has whatever separation the
|
|
27
|
-
layout gives it — and a link-variant nav in particular reads as text,
|
|
28
|
-
where an unasked-for rule is chrome. Turn it on rather than reaching for
|
|
29
|
-
a Separator underneath, so the line is the bar's own and stays with it. |
|
|
30
|
-
| `label?` | `string` | `'Main'` | The accessible name for this landmark. A page may hold several
|
|
31
|
-
navigations (primary, breadcrumb, pagination, footer) and a screen
|
|
32
|
-
reader lists them all by name — unnamed, they read as "navigation",
|
|
33
|
-
"navigation", "navigation". Defaults to "Main" rather than nothing so
|
|
34
|
-
the common case is named without anyone having to know this. |
|
|
35
|
-
| `children?` | `Snippet` | — | — |
|
|
36
|
-
|
|
37
|
-
## Nav.Item
|
|
38
|
-
|
|
39
|
-
Inherits all props from `HTMLAnchorAttributes`.
|
|
40
|
-
|
|
41
|
-
| Prop | Type | Default | Notes |
|
|
42
|
-
|------|------|---------|-------|
|
|
43
|
-
| `ref?` | `HTMLAnchorElement \| null` | `null` | bindable |
|
|
44
|
-
| `href` | `string` | — | — |
|
|
45
|
-
| `variant?` | `'filled' \| 'link'` | `'filled'` | `filled` (default) is a control on a rung — a bar of buttons. `link`
|
|
46
|
-
drops the chrome entirely and renders running text, for a primary nav
|
|
47
|
-
that should read as links rather than a row of raised keycaps. Existing
|
|
48
|
-
bars are byte-identical. |
|
|
49
|
-
| `currentCue?` | `'thickness' \| 'ink' \| 'none'` | `'thickness'` | WHAT MARKS THE CURRENT ITEM. `thickness` (default) is the three-state
|
|
50
|
-
decoration — portable across every theme and font because it is one
|
|
51
|
-
ink at three strengths. `ink` brightens the current item instead, and
|
|
52
|
-
is theme-dependent by construction: era's default themes point
|
|
53
|
-
--color-link at --color-bright, so its delta there is zero. `none`
|
|
54
|
-
silences era's cue entirely, for a consumer painting their own.
|
|
55
|
-
See navItemVariants above for the measurements behind each. |
|
|
56
|
-
| `current?` | `boolean` | `false` | Whether this item points at the page you are on.
|
|
57
|
-
There is deliberately no `active` prop beside this one. `active` would
|
|
58
|
-
be a second source of truth for one fact, and the two drift the moment
|
|
59
|
-
a route changes and someone updates the styling flag but not the
|
|
60
|
-
announcement — leaving a tab that LOOKS current to sighted users and
|
|
61
|
-
announces nothing to a screen reader, or the reverse. This sets
|
|
62
|
-
`aria-current="page"`, and the styling below keys off that attribute,
|
|
63
|
-
so the look and the announcement cannot disagree: there is one fact
|
|
64
|
-
and it is the accessible one. |
|
|
65
|
-
| `size?` | `'control' \| 'chip' \| 'pill' \| 'icon'` | `'control'` | Tier, matching Button's rungs so an item nests in a bar the same way. |
|
|
66
|
-
| `lead?` | `Snippet` | — | Icon before the label, outside it — same contract as Button's. |
|
|
67
|
-
| `trail?` | `Snippet` | — | Icon after the label, outside it. |
|
|
68
|
-
| `caps?` | `boolean` | `false` | The label is ALL CAPS or an initialism — trims to the cap band instead of
|
|
69
|
-
the x-height band. Same prop, same reason, same wording as Button's:
|
|
70
|
-
Nav.Item borrows Button's geometry and renders the identical label box,
|
|
71
|
-
so a nav of "API" / "SDK" / "CLI" links had the identical defect and no
|
|
72
|
-
way to reach it either. |
|
|
73
|
-
| `children?` | `Snippet` | — | — |
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
# Notes
|
|
2
|
-
|
|
3
|
-
A complete notes app — rich-text editor, slash commands, local persistence.
|
|
4
|
-
|
|
5
|
-
## Usage
|
|
6
|
-
|
|
7
|
-
**Notes is not published.** It lives in `src/apps/` in the era-ui repository,
|
|
8
|
-
outside the packaged `src/lib`, so there is no import path that reaches it — the
|
|
9
|
-
`@signal9/era-ui/apps` subpath was removed in v13.
|
|
10
|
-
|
|
11
|
-
A design system that also ships a note-taking application is two products in one
|
|
12
|
-
package: Notes alone brings fifteen TipTap packages, and its release cadence and
|
|
13
|
-
support expectations are nothing like a primitive's. It stays in the repo as a
|
|
14
|
-
reference implementation and a demo — read it, copy it, or lift it into the
|
|
15
|
-
product that renders it.
|
|
16
|
-
|
|
17
|
-
What era DOES publish is the part that generalises: `@signal9/era-ui/styles/prose`
|
|
18
|
-
is the document typography Notes uses, available to anyone building an editor.
|
|
19
|
-
|
|
20
|
-
Read as a reference, the integration is: a sidebar with filter, pin, and delete; a TipTap
|
|
21
|
-
document with a `/` command menu and a selection toolbar; and persistence to
|
|
22
|
-
`localStorage` under `era-ui:notes`.
|
|
23
|
-
|
|
24
|
-
## Peer dependencies
|
|
25
|
-
|
|
26
|
-
Install alongside the library (they are not bundled):
|
|
27
|
-
|
|
28
|
-
```
|
|
29
|
-
@tiptap/core @tiptap/pm @tiptap/starter-kit @tiptap/suggestion
|
|
30
|
-
@tiptap/extension-code-block-lowlight @tiptap/extension-details
|
|
31
|
-
@tiptap/extension-highlight @tiptap/extension-image
|
|
32
|
-
@tiptap/extension-placeholder @tiptap/extension-table
|
|
33
|
-
@tiptap/extension-task-item @tiptap/extension-task-list
|
|
34
|
-
@tiptap/extension-typography @tiptap/extension-unique-id
|
|
35
|
-
lowlight tiptap-markdown
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
## Props
|
|
39
|
-
|
|
40
|
-
| Prop | Type | Default | Notes |
|
|
41
|
-
| ------------ | ---------------- | ------------------ | ----------------------------------------------------------------- |
|
|
42
|
-
| `store` | `NotesStore` | created internally | Bring your own; when set, the host owns its lifecycle. |
|
|
43
|
-
| `adapter` | `NotesAdapter` | `localStorage` | Persistence for the internally-created store. |
|
|
44
|
-
| `storageKey` | `string` | `era-ui:notes` | Key for the default adapter. |
|
|
45
|
-
| `noteId` | `string \| null` | `null` | `$bindable` — the open note, for deep-linking or session restore. |
|
|
46
|
-
| `seed` | `NoteInit[]` | — | Created only when storage comes back empty (first-run sample). |
|
|
47
|
-
|
|
48
|
-
## Persistence
|
|
49
|
-
|
|
50
|
-
Persistence is one small interface, so server-backed hosting is a drop-in swap —
|
|
51
|
-
`load`/`save` may be sync or async:
|
|
52
|
-
|
|
53
|
-
```ts
|
|
54
|
-
import { Notes, NotesStore } from '$apps/index.js'; // in-repo; not published
|
|
55
|
-
|
|
56
|
-
const store = new NotesStore({
|
|
57
|
-
adapter: {
|
|
58
|
-
load: () => fetch('/api/notes').then((r) => r.json()),
|
|
59
|
-
save: (notes) => fetch('/api/notes', { method: 'PUT', body: JSON.stringify(notes) })
|
|
60
|
-
}
|
|
61
|
-
});
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
`NotesStore` is the reactive source of truth (`notes`, `ordered`, `loading`,
|
|
65
|
-
`status`, `lastError`) with `create` / `update` / `remove` / `togglePin` /
|
|
66
|
-
`setIcon` / `search` / `toMarkdown` / `flush`. Writes are debounced and
|
|
67
|
-
coalesced, so a burst of keystrokes costs one `save`.
|
|
68
|
-
|
|
69
|
-
## The heading index
|
|
70
|
-
|
|
71
|
-
Every document is also a tree. `buildGlobalTree()` walks heading structure,
|
|
72
|
-
`treeToText()` renders it as a table of contents a model can read, and
|
|
73
|
-
`extractSection(title, doc, headingId)` returns just the requested slice as
|
|
74
|
-
structure-preserving markdown — reasoning-based retrieval rather than
|
|
75
|
-
embeddings. Heading ids are stable (`@tiptap/extension-unique-id`), so a section
|
|
76
|
-
address survives edits above it.
|
|
77
|
-
|
|
78
|
-
## Notes
|
|
79
|
-
|
|
80
|
-
- Keyboard: `/` opens the command menu, `Mod-K` links a selection, `Mod-S`
|
|
81
|
-
flushes pending writes immediately.
|
|
82
|
-
- The slash menu and selection toolbar are real Svelte components mounted into
|
|
83
|
-
the document root, so they follow every axis — density tiers, surface chrome,
|
|
84
|
-
corners, motion, font — instead of carrying their own hardcoded styling.
|
|
85
|
-
- `@tiptap/extension-mathematics` is deliberately absent: it needs KaTeX's
|
|
86
|
-
stylesheet and fonts to render. Spread `noteExtensions` and add it yourself if
|
|
87
|
-
you want math.
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
# Pagination
|
|
2
|
-
|
|
3
|
-
Enables users to navigate through a series of pages.
|
|
4
|
-
|
|
5
|
-
## Import
|
|
6
|
-
|
|
7
|
-
```ts
|
|
8
|
-
import * as Pagination from "@signal9/era-ui/pagination";
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
Composed from sub-components — compose explicitly at the call site:
|
|
12
|
-
|
|
13
|
-
- `Pagination.Root`
|
|
14
|
-
- `Pagination.Page`
|
|
15
|
-
- `Pagination.PrevButton`
|
|
16
|
-
- `Pagination.NextButton`
|
|
17
|
-
|
|
18
|
-
## Pagination.Root
|
|
19
|
-
|
|
20
|
-
Inherits all props from `Pagination.RootProps`.
|
|
21
|
-
|
|
22
|
-
| Prop | Type | Default | Notes |
|
|
23
|
-
|------|------|---------|-------|
|
|
24
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
25
|
-
| `page?` | `(forwarded)` | `1` | bindable |
|
|
26
|
-
|
|
27
|
-
## Pagination.Page
|
|
28
|
-
|
|
29
|
-
Inherits all props from `WithoutChildrenOrChild<Pagination.PageProps>`.
|
|
30
|
-
Inherits all props from `Pick<ButtonVariants, 'tone' | 'size'>`.
|
|
31
|
-
|
|
32
|
-
| Prop | Type | Default | Notes |
|
|
33
|
-
|------|------|---------|-------|
|
|
34
|
-
| `children?` | `Snippet` | — | — |
|
|
35
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
36
|
-
|
|
37
|
-
## Pagination.PrevButton
|
|
38
|
-
|
|
39
|
-
Inherits all props from `WithoutChildrenOrChild<Pagination.PrevButtonProps>`.
|
|
40
|
-
Inherits all props from `Pick<ButtonVariants, 'tone' | 'size'>`.
|
|
41
|
-
|
|
42
|
-
| Prop | Type | Default | Notes |
|
|
43
|
-
|------|------|---------|-------|
|
|
44
|
-
| `children?` | `Snippet` | — | — |
|
|
45
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
46
|
-
|
|
47
|
-
## Pagination.NextButton
|
|
48
|
-
|
|
49
|
-
Inherits all props from `WithoutChildrenOrChild<Pagination.NextButtonProps>`.
|
|
50
|
-
Inherits all props from `Pick<ButtonVariants, 'tone' | 'size'>`.
|
|
51
|
-
|
|
52
|
-
| Prop | Type | Default | Notes |
|
|
53
|
-
|------|------|---------|-------|
|
|
54
|
-
| `children?` | `Snippet` | — | — |
|
|
55
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
# Pane
|
|
2
|
-
|
|
3
|
-
A draggable floating window with a handle bar.
|
|
4
|
-
|
|
5
|
-
## Import
|
|
6
|
-
|
|
7
|
-
```ts
|
|
8
|
-
import { Pane } from "@signal9/era-ui/pane";
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Props
|
|
12
|
-
|
|
13
|
-
Inherits all props from `HTMLAttributes<HTMLDivElement>`.
|
|
14
|
-
|
|
15
|
-
| Prop | Type | Default | Notes |
|
|
16
|
-
|------|------|---------|-------|
|
|
17
|
-
| `ref?` | `HTMLDivElement \| null` | `null` | bindable |
|
|
18
|
-
| `position?` | `{ x: number; y: number }` | `{ x: 0, y: 0 }` | bindable — Offset from the pane's layout position. Bindable and writable —
|
|
19
|
-
assign to move the pane programmatically (e.g. reset to 0,0). |
|
|
20
|
-
| `size?` | `{ width: number; height: number } \| null` | `null` | bindable — Explicit pixel size once resized (or a preset). `null` = auto. Bindable. |
|
|
21
|
-
| `resizable?` | `boolean` | `false` | Render a corner grip and allow the pane to be resized. |
|
|
22
|
-
| `title?` | `string` | — | Text shown in the handle bar. For richer chrome use `header`. |
|
|
23
|
-
| `icon?` | `Component<IconProps> \| null` | `AppPane` | Lucide icon rendered left of the title. Pass `null` to omit. |
|
|
24
|
-
| `disabled?` | `boolean` | `false` | Disables dragging (reactive). |
|
|
25
|
-
| `plugins?` | `DragPlugin[] \| (() => DragPlugin[])` | `[]` | Tier-2 neodrag plugins (`use`) appended to the drag. Tier-1 concerns
|
|
26
|
-
(axis/bounds/grid/threshold) are Pane.Root props — spread through
|
|
27
|
-
restProps or use Root directly for those. |
|
|
28
|
-
| `onDragStart?` | `(data: DragEventData) => void` | — | — |
|
|
29
|
-
| `onDrag?` | `(data: DragEventData) => void` | — | — |
|
|
30
|
-
| `onDragEnd?` | `(data: DragEventData) => void` | — | — |
|
|
31
|
-
| `onClose?` | `() => void` | — | When set, a close button renders at the right of the handle bar. |
|
|
32
|
-
| `header?` | `Snippet` | — | Extra handle-bar content, rendered after the title. |
|
|
33
|
-
| `center?` | `Snippet` | — | Content centred on the bar itself — Pane.Handle's three-track grid. |
|
|
34
|
-
| `children?` | `Snippet` | — | — |
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
# PIN Input
|
|
2
|
-
|
|
3
|
-
Enables users to input a sequence of one-character inputs.
|
|
4
|
-
|
|
5
|
-
## Import
|
|
6
|
-
|
|
7
|
-
```ts
|
|
8
|
-
import * as PinInput from "@signal9/era-ui/pin-input";
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
Composed from sub-components — compose explicitly at the call site:
|
|
12
|
-
|
|
13
|
-
- `PinInput.Root`
|
|
14
|
-
- `PinInput.Cell`
|
|
15
|
-
|
|
16
|
-
## PinInput.Root
|
|
17
|
-
|
|
18
|
-
Inherits all props from `PinInput.RootProps`.
|
|
19
|
-
|
|
20
|
-
| Prop | Type | Default | Notes |
|
|
21
|
-
|------|------|---------|-------|
|
|
22
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
23
|
-
| `value?` | `(forwarded)` | `''` | bindable |
|
|
24
|
-
|
|
25
|
-
## PinInput.Cell
|
|
26
|
-
|
|
27
|
-
Inherits all props from `WithoutChildrenOrChild<PinInput.CellProps>`.
|
|
28
|
-
|
|
29
|
-
| Prop | Type | Default | Notes |
|
|
30
|
-
|------|------|---------|-------|
|
|
31
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
# Popover
|
|
2
|
-
|
|
3
|
-
A floating panel anchored to a trigger.
|
|
4
|
-
|
|
5
|
-
## Import
|
|
6
|
-
|
|
7
|
-
```ts
|
|
8
|
-
import * as Popover from "@signal9/era-ui/popover";
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
Composed from sub-components — compose explicitly at the call site:
|
|
12
|
-
|
|
13
|
-
- `Popover.Trigger`
|
|
14
|
-
- `Popover.Content`
|
|
15
|
-
- `Popover.Close`
|
|
16
|
-
|
|
17
|
-
## Popover.Trigger
|
|
18
|
-
|
|
19
|
-
Inherits all props from `WithoutChildrenOrChild<Popover.TriggerProps>`.
|
|
20
|
-
Inherits all props from `ButtonVariants`.
|
|
21
|
-
|
|
22
|
-
| Prop | Type | Default | Notes |
|
|
23
|
-
|------|------|---------|-------|
|
|
24
|
-
| `children?` | `Snippet` | — | — |
|
|
25
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
26
|
-
|
|
27
|
-
## Popover.Content
|
|
28
|
-
|
|
29
|
-
Inherits all props from `PartProps<Popover.ContentProps>`.
|
|
30
|
-
|
|
31
|
-
| Prop | Type | Default | Notes |
|
|
32
|
-
|------|------|---------|-------|
|
|
33
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
34
|
-
|
|
35
|
-
## Popover.Close
|
|
36
|
-
|
|
37
|
-
Inherits all props from `WithoutChildrenOrChild<Popover.CloseProps>`.
|
|
38
|
-
Inherits all props from `Omit<ButtonVariants, 'active'>`.
|
|
39
|
-
|
|
40
|
-
| Prop | Type | Default | Notes |
|
|
41
|
-
|------|------|---------|-------|
|
|
42
|
-
| `children?` | `Snippet` | — | — |
|
|
43
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
# Progress
|
|
2
|
-
|
|
3
|
-
Shows the completion status of a task.
|
|
4
|
-
|
|
5
|
-
## Import
|
|
6
|
-
|
|
7
|
-
```ts
|
|
8
|
-
import { Progress } from "@signal9/era-ui/progress";
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Props
|
|
12
|
-
|
|
13
|
-
Inherits all props from `Progress.RootProps`.
|
|
14
|
-
|
|
15
|
-
| Prop | Type | Default | Notes |
|
|
16
|
-
|------|------|---------|-------|
|
|
17
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
# Radio Group
|
|
2
|
-
|
|
3
|
-
Groups radio items for single selection.
|
|
4
|
-
|
|
5
|
-
## Import
|
|
6
|
-
|
|
7
|
-
```ts
|
|
8
|
-
import * as RadioGroup from "@signal9/era-ui/radio-group";
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
Composed from sub-components — compose explicitly at the call site:
|
|
12
|
-
|
|
13
|
-
- `RadioGroup.Root`
|
|
14
|
-
- `RadioGroup.Item`
|
|
15
|
-
|
|
16
|
-
## RadioGroup.Root
|
|
17
|
-
|
|
18
|
-
Inherits all props from `RadioGroup.RootProps`.
|
|
19
|
-
|
|
20
|
-
| Prop | Type | Default | Notes |
|
|
21
|
-
|------|------|---------|-------|
|
|
22
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|
|
23
|
-
| `value?` | `(forwarded)` | `''` | bindable |
|
|
24
|
-
|
|
25
|
-
## RadioGroup.Item
|
|
26
|
-
|
|
27
|
-
Inherits all props from `RadioGroup.ItemProps`.
|
|
28
|
-
|
|
29
|
-
| Prop | Type | Default | Notes |
|
|
30
|
-
|------|------|---------|-------|
|
|
31
|
-
| `ref?` | `(forwarded)` | `null` | bindable |
|