@signal9/era-ui 26.1.0 → 27.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.
Files changed (34) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/docs/consumer-import.d.ts +28 -0
  3. package/dist/docs/consumer-import.js +28 -0
  4. package/dist/era-ui.css +1 -1
  5. package/dist/generated-docs/accordion.md +1 -1
  6. package/dist/generated-docs/alert-dialog.md +11 -1
  7. package/dist/generated-docs/combobox.md +1 -1
  8. package/dist/generated-docs/context-menu.md +13 -3
  9. package/dist/generated-docs/date-picker.md +1 -1
  10. package/dist/generated-docs/date-range-picker.md +1 -1
  11. package/dist/generated-docs/dialog.md +11 -1
  12. package/dist/generated-docs/dropdown-menu.md +14 -4
  13. package/dist/generated-docs/link-preview.md +11 -1
  14. package/dist/generated-docs/llms-full.txt +246 -25
  15. package/dist/generated-docs/llms.txt +2 -2
  16. package/dist/generated-docs/manifest.json +72 -18
  17. package/dist/generated-docs/menubar.md +4 -3
  18. package/dist/generated-docs/meter.md +6 -0
  19. package/dist/generated-docs/nav.md +61 -0
  20. package/dist/generated-docs/select.md +2 -2
  21. package/dist/generated-docs/step.md +2 -2
  22. package/dist/generated-docs/timeline.md +32 -0
  23. package/dist/generated-docs/todo.md +3 -0
  24. package/dist/generated-docs/toggle-group.md +1 -0
  25. package/dist/generated-docs/tooltip.md +11 -1
  26. package/dist/generated-docs/tree.md +36 -0
  27. package/dist/generated-docs/utilities.json +5 -1
  28. package/dist/generated-docs/utilities.md +3 -2
  29. package/dist/ui/nav/nav-item.svelte +13 -1
  30. package/dist/ui/nav/nav-item.svelte.d.ts +15 -3
  31. package/package.json +6 -5
  32. package/skill/SKILL.md +13 -4
  33. package/dist/docs/llms-txt.d.ts +0 -2
  34. package/dist/docs/llms-txt.js +0 -100
@@ -8,6 +8,14 @@
8
8
  "sections": [],
9
9
  "file": "getting-started.md"
10
10
  },
11
+ {
12
+ "slug": "todo",
13
+ "title": "Todo",
14
+ "summary": "An agent's plan board — a collapsible checklist whose header still shows the active item.",
15
+ "tokenEstimate": 25,
16
+ "sections": [],
17
+ "file": "todo.md"
18
+ },
11
19
  {
12
20
  "slug": "spacing",
13
21
  "title": "Spacing",
@@ -44,7 +52,7 @@
44
52
  "slug": "utilities",
45
53
  "title": "Utilities",
46
54
  "summary": "The CSS classes era ships alongside the components — links, ink-centred text, shimmer, hidden scrollbars.",
47
- "tokenEstimate": 12355,
55
+ "tokenEstimate": 12389,
48
56
  "sections": [
49
57
  "Overview",
50
58
  "era-interactive",
@@ -79,7 +87,7 @@
79
87
  "bg-well · text-well · border-well · bg-elevated · text-elevated · border-elevated · bg-highlight · text-highlight · … (12 in all)",
80
88
  "p-gutter · px-gutter · py-gutter · gap-gutter · p-panel · px-panel · py-panel · gap-panel · … (24 in all)",
81
89
  "p-inset-pill · px-inset-pill · py-inset-pill · gap-inset-pill · p-inset-chip · px-inset-chip · py-inset-chip · gap-inset-chip · … (12 in all)",
82
- "p-icon-inset-pill · px-icon-inset-pill · py-icon-inset-pill · gap-icon-inset-pill · p-icon-inset-chip · px-icon-inset-chip · py-icon-inset-chip · gap-icon-inset-chip · … (32 in all)",
90
+ "p-icon-inset-pill · px-icon-inset-pill · py-icon-inset-pill · gap-icon-inset-pill · p-icon-inset-chip · px-icon-inset-chip · py-icon-inset-chip · gap-icon-inset-chip · … (36 in all)",
83
91
  "p-glyph-icon · px-glyph-icon · py-glyph-icon · gap-glyph-icon · p-glyph-pill · px-glyph-pill · py-glyph-pill · gap-glyph-pill",
84
92
  "bg-field · text-field · border-field · bg-field-highlight · text-field-highlight · border-field-highlight",
85
93
  "ease-base",
@@ -183,6 +191,18 @@
183
191
  ],
184
192
  "file": "bar.md"
185
193
  },
194
+ {
195
+ "slug": "nav",
196
+ "title": "Nav",
197
+ "summary": "A navigation landmark and its items — the current one announces itself, and that announcement is what paints it.",
198
+ "tokenEstimate": 739,
199
+ "sections": [
200
+ "Import",
201
+ "Nav.Bar",
202
+ "Nav.Item"
203
+ ],
204
+ "file": "nav.md"
205
+ },
186
206
  {
187
207
  "slug": "button",
188
208
  "title": "Button",
@@ -346,7 +366,7 @@
346
366
  "slug": "accordion",
347
367
  "title": "Accordion",
348
368
  "summary": "Collapsible content sections.",
349
- "tokenEstimate": 309,
369
+ "tokenEstimate": 311,
350
370
  "sections": [
351
371
  "Import",
352
372
  "Accordion.Root",
@@ -361,9 +381,10 @@
361
381
  "slug": "alert-dialog",
362
382
  "title": "Alert Dialog",
363
383
  "summary": "A modal confirmation before destructive actions.",
364
- "tokenEstimate": 522,
384
+ "tokenEstimate": 585,
365
385
  "sections": [
366
386
  "Import",
387
+ "AlertDialog.Root",
367
388
  "AlertDialog.Trigger",
368
389
  "AlertDialog.Content",
369
390
  "AlertDialog.Overlay",
@@ -425,7 +446,7 @@
425
446
  "slug": "combobox",
426
447
  "title": "Combobox",
427
448
  "summary": "Search and select from a filtered list of options.",
428
- "tokenEstimate": 415,
449
+ "tokenEstimate": 416,
429
450
  "sections": [
430
451
  "Import",
431
452
  "Combobox.Input",
@@ -472,7 +493,7 @@
472
493
  "slug": "step",
473
494
  "title": "Step",
474
495
  "summary": "Expandable inline step — tool calls, thinking, agent actions.",
475
- "tokenEstimate": 316,
496
+ "tokenEstimate": 318,
476
497
  "sections": [
477
498
  "Import",
478
499
  "Step.Root",
@@ -486,9 +507,10 @@
486
507
  "slug": "context-menu",
487
508
  "title": "Context Menu",
488
509
  "summary": "Options and actions triggered by right-click.",
489
- "tokenEstimate": 579,
510
+ "tokenEstimate": 644,
490
511
  "sections": [
491
512
  "Import",
513
+ "ContextMenu.Root",
492
514
  "ContextMenu.Trigger",
493
515
  "ContextMenu.Content",
494
516
  "ContextMenu.Item",
@@ -519,7 +541,7 @@
519
541
  "slug": "date-picker",
520
542
  "title": "Date Picker",
521
543
  "summary": "Date input with a calendar popover.",
522
- "tokenEstimate": 1100,
544
+ "tokenEstimate": 1101,
523
545
  "sections": [
524
546
  "Import",
525
547
  "DatePicker.Root",
@@ -561,7 +583,7 @@
561
583
  "slug": "date-range-picker",
562
584
  "title": "Date Range Picker",
563
585
  "summary": "Date range input with a calendar popover.",
564
- "tokenEstimate": 1173,
586
+ "tokenEstimate": 1174,
565
587
  "sections": [
566
588
  "Import",
567
589
  "DateRangePicker.Root",
@@ -589,9 +611,10 @@
589
611
  "slug": "dialog",
590
612
  "title": "Dialog",
591
613
  "summary": "A modal window for content or user input.",
592
- "tokenEstimate": 578,
614
+ "tokenEstimate": 637,
593
615
  "sections": [
594
616
  "Import",
617
+ "Dialog.Root",
595
618
  "Dialog.Trigger",
596
619
  "Dialog.Content",
597
620
  "Dialog.Overlay",
@@ -606,9 +629,10 @@
606
629
  "slug": "dropdown-menu",
607
630
  "title": "Dropdown Menu",
608
631
  "summary": "A menu of selectable items.",
609
- "tokenEstimate": 585,
632
+ "tokenEstimate": 652,
610
633
  "sections": [
611
634
  "Import",
635
+ "DropdownMenu.Root",
612
636
  "DropdownMenu.Trigger",
613
637
  "DropdownMenu.Content",
614
638
  "DropdownMenu.Item",
@@ -663,9 +687,10 @@
663
687
  "slug": "link-preview",
664
688
  "title": "Link Preview",
665
689
  "summary": "Shows rich preview content when hovering a link.",
666
- "tokenEstimate": 169,
690
+ "tokenEstimate": 232,
667
691
  "sections": [
668
692
  "Import",
693
+ "LinkPreview.Root",
669
694
  "LinkPreview.Trigger",
670
695
  "LinkPreview.Content"
671
696
  ],
@@ -707,7 +732,7 @@
707
732
  "slug": "menubar",
708
733
  "title": "Menubar",
709
734
  "summary": "A horizontal bar of dropdown menus.",
710
- "tokenEstimate": 598,
735
+ "tokenEstimate": 613,
711
736
  "sections": [
712
737
  "Import",
713
738
  "Menubar.Root",
@@ -727,7 +752,7 @@
727
752
  "slug": "meter",
728
753
  "title": "Meter",
729
754
  "summary": "Displays a value within a known range.",
730
- "tokenEstimate": 72,
755
+ "tokenEstimate": 188,
731
756
  "sections": [
732
757
  "Import",
733
758
  "Props"
@@ -843,7 +868,7 @@
843
868
  "slug": "select",
844
869
  "title": "Select",
845
870
  "summary": "A dropdown select menu.",
846
- "tokenEstimate": 373,
871
+ "tokenEstimate": 376,
847
872
  "sections": [
848
873
  "Import",
849
874
  "Select.Trigger",
@@ -935,7 +960,7 @@
935
960
  "slug": "toggle-group",
936
961
  "title": "Toggle Group",
937
962
  "summary": "A set of toggle buttons with single or multiple selection.",
938
- "tokenEstimate": 164,
963
+ "tokenEstimate": 178,
939
964
  "sections": [
940
965
  "Import",
941
966
  "ToggleGroup.Root",
@@ -943,6 +968,30 @@
943
968
  ],
944
969
  "file": "toggle-group.md"
945
970
  },
971
+ {
972
+ "slug": "timeline",
973
+ "title": "Timeline",
974
+ "summary": "A staged progress bar where each segment's width is how long that step took.",
975
+ "tokenEstimate": 203,
976
+ "sections": [
977
+ "Import",
978
+ "Timeline.Root",
979
+ "Timeline.Step"
980
+ ],
981
+ "file": "timeline.md"
982
+ },
983
+ {
984
+ "slug": "tree",
985
+ "title": "Tree",
986
+ "summary": "A disclosure hierarchy with real tree semantics — roving focus, and selection separate from expansion.",
987
+ "tokenEstimate": 303,
988
+ "sections": [
989
+ "Import",
990
+ "Tree.Root",
991
+ "Tree.Item"
992
+ ],
993
+ "file": "tree.md"
994
+ },
946
995
  {
947
996
  "slug": "toolbar",
948
997
  "title": "Toolbar",
@@ -968,9 +1017,10 @@
968
1017
  "slug": "tooltip",
969
1018
  "title": "Tooltip",
970
1019
  "summary": "Supplementary info on hover or focus.",
971
- "tokenEstimate": 154,
1020
+ "tokenEstimate": 214,
972
1021
  "sections": [
973
1022
  "Import",
1023
+ "Tooltip.Root",
974
1024
  "Tooltip.Trigger",
975
1025
  "Tooltip.Content"
976
1026
  ],
@@ -1400,6 +1450,10 @@
1400
1450
  "px-pill-inset-control",
1401
1451
  "py-pill-inset-control",
1402
1452
  "gap-pill-inset-control",
1453
+ "p-pill-inset-bar",
1454
+ "px-pill-inset-bar",
1455
+ "py-pill-inset-bar",
1456
+ "gap-pill-inset-bar",
1403
1457
  "p-chip-inset-control",
1404
1458
  "px-chip-inset-control",
1405
1459
  "py-chip-inset-control",
@@ -1412,7 +1466,7 @@
1412
1466
  "file": "index.css",
1413
1467
  "useCase": "the concentric inset for a nested pair — (h-container − h-child)/2, the gap that makes a child control sit evenly inside its container, and the radius step that keeps their corners concentric. Named for the pair it joins: gap-icon-inset-control seats an icon in a control.",
1414
1468
  "description": "",
1415
- "css": "@theme inline {\n\t--spacing-icon-inset-pill: var(--era-icon-inset-pill);\n\t--spacing-icon-inset-chip: var(--era-icon-inset-chip);\n\t--spacing-icon-inset-control: var(--era-icon-inset-control);\n\t--spacing-icon-inset-bar: var(--era-icon-inset-bar);\n\t--spacing-pill-inset-chip: var(--era-pill-inset-chip);\n\t--spacing-pill-inset-control: var(--era-pill-inset-control);\n\t--spacing-chip-inset-control: var(--era-chip-inset-control);\n\t--spacing-chip-inset-bar: var(--era-chip-inset-bar);\n}"
1469
+ "css": "@theme inline {\n\t--spacing-icon-inset-pill: var(--era-icon-inset-pill);\n\t--spacing-icon-inset-chip: var(--era-icon-inset-chip);\n\t--spacing-icon-inset-control: var(--era-icon-inset-control);\n\t--spacing-icon-inset-bar: var(--era-icon-inset-bar);\n\t--spacing-pill-inset-chip: var(--era-pill-inset-chip);\n\t--spacing-pill-inset-control: var(--era-pill-inset-control);\n\t--spacing-pill-inset-bar: var(--era-pill-inset-bar);\n\t--spacing-chip-inset-control: var(--era-chip-inset-control);\n\t--spacing-chip-inset-bar: var(--era-chip-inset-bar);\n}"
1416
1470
  },
1417
1471
  {
1418
1472
  "name": "p-glyph-icon",
@@ -28,6 +28,7 @@ Inherits all props from `Menubar.RootProps`.
28
28
  | Prop | Type | Default | Notes |
29
29
  |------|------|---------|-------|
30
30
  | `ref?` | `(forwarded)` | `null` | bindable |
31
+ | `value?` | `(forwarded)` | `''` | bindable |
31
32
 
32
33
  ## Menubar.Trigger
33
34
 
@@ -39,7 +40,7 @@ Inherits all props from `PartProps<Menubar.TriggerProps>`.
39
40
 
40
41
  ## Menubar.Content
41
42
 
42
- Inherits all props from `PartProps<Menubar.ContentProps>`.
43
+ Inherits all props from `OwnedPartProps<Menubar.ContentProps>`.
43
44
 
44
45
  | Prop | Type | Default | Notes |
45
46
  |------|------|---------|-------|
@@ -80,7 +81,7 @@ Inherits all props from `Menubar.SeparatorProps`.
80
81
 
81
82
  ## Menubar.SubTrigger
82
83
 
83
- Inherits all props from `PartProps<Menubar.SubTriggerProps>`.
84
+ Inherits all props from `OwnedPartProps<Menubar.SubTriggerProps>`.
84
85
 
85
86
  | Prop | Type | Default | Notes |
86
87
  |------|------|---------|-------|
@@ -88,7 +89,7 @@ Inherits all props from `PartProps<Menubar.SubTriggerProps>`.
88
89
 
89
90
  ## Menubar.SubContent
90
91
 
91
- Inherits all props from `PartProps<Menubar.SubContentProps>`.
92
+ Inherits all props from `OwnedPartProps<Menubar.SubContentProps>`.
92
93
 
93
94
  | Prop | Type | Default | Notes |
94
95
  |------|------|---------|-------|
@@ -14,4 +14,10 @@ Inherits all props from `Meter.RootProps`.
14
14
 
15
15
  | Prop | Type | Default | Notes |
16
16
  |------|------|---------|-------|
17
+ | `tone?` | `'default' \| 'accent' \| 'destructive' \| 'success' \| 'warning'` | `'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. |
17
23
  | `ref?` | `(forwarded)` | `null` | bindable |
@@ -0,0 +1,61 @@
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?` | `'tier' \| 'pill'` | `'tier'` | 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
+ | `current?` | `boolean` | `false` | Whether this item points at the page you are on.
50
+ There is deliberately no `active` prop beside this one. `active` would
51
+ be a second source of truth for one fact, and the two drift the moment
52
+ a route changes and someone updates the styling flag but not the
53
+ announcement — leaving a tab that LOOKS current to sighted users and
54
+ announces nothing to a screen reader, or the reverse. This sets
55
+ `aria-current="page"`, and the styling below keys off that attribute,
56
+ so the look and the announcement cannot disagree: there is one fact
57
+ and it is the accessible one. |
58
+ | `size?` | `'control' \| 'chip' \| 'pill' \| 'icon'` | `'control'` | Tier, matching Button's rungs so an item nests in a bar the same way. |
59
+ | `lead?` | `Snippet` | — | Icon before the label, outside it — same contract as Button's. |
60
+ | `trail?` | `Snippet` | — | Icon after the label, outside it. |
61
+ | `children?` | `Snippet` | — | — |
@@ -19,7 +19,7 @@ Composed from sub-components — compose explicitly at the call site:
19
19
 
20
20
  ## Select.Trigger
21
21
 
22
- Inherits all props from `PartProps<Select.TriggerProps>`.
22
+ Inherits all props from `OwnedPartProps<Select.TriggerProps>`.
23
23
 
24
24
  | Prop | Type | Default | Notes |
25
25
  |------|------|---------|-------|
@@ -36,7 +36,7 @@ Inherits all props from `WithoutChildrenOrChild<Select.ValueProps>`.
36
36
 
37
37
  ## Select.Content
38
38
 
39
- Inherits all props from `PartProps<Select.ContentProps>`.
39
+ Inherits all props from `OwnedPartProps<Select.ContentProps>`.
40
40
 
41
41
  | Prop | Type | Default | Notes |
42
42
  |------|------|---------|-------|
@@ -27,7 +27,7 @@ Inherits all props from `Collapsible.RootProps`.
27
27
 
28
28
  ## Step.Summary
29
29
 
30
- Inherits all props from `PartProps<Collapsible.TriggerProps>`.
30
+ Inherits all props from `OwnedPartProps<Collapsible.TriggerProps>`.
31
31
 
32
32
  | Prop | Type | Default | Notes |
33
33
  |------|------|---------|-------|
@@ -35,7 +35,7 @@ Inherits all props from `PartProps<Collapsible.TriggerProps>`.
35
35
 
36
36
  ## Step.Content
37
37
 
38
- Inherits all props from `PartProps<Collapsible.ContentProps>`.
38
+ Inherits all props from `OwnedPartProps<Collapsible.ContentProps>`.
39
39
 
40
40
  | Prop | Type | Default | Notes |
41
41
  |------|------|---------|-------|
@@ -0,0 +1,32 @@
1
+ # Timeline
2
+
3
+ A staged progress bar where each segment's width is how long that step took.
4
+
5
+ ## Import
6
+
7
+ ```ts
8
+ import * as Timeline from "@signal9/era-ui/timeline";
9
+ ```
10
+
11
+ Composed from sub-components — compose explicitly at the call site:
12
+
13
+ - `Timeline.Root`
14
+ - `Timeline.Step`
15
+
16
+ ## Timeline.Root
17
+
18
+ | Prop | Type | Default | Notes |
19
+ |------|------|---------|-------|
20
+ | `steps?` | `TimelineStep[]` | `[]` | — |
21
+ | `tick?` | `number` | `100` | Live counter interval in ms. 0 stops the clock (the counter freezes). |
22
+ | `showClock?` | `boolean` | `true` | — |
23
+ | `children?` | `Snippet` | — | — |
24
+ | `class?` | `string` | — | — |
25
+
26
+ ## Timeline.Step
27
+
28
+ | Prop | Type | Default | Notes |
29
+ |------|------|---------|-------|
30
+ | `step` | `TimelineStep` | — | — |
31
+ | `showClock?` | `boolean` | `true` | — |
32
+ | `class?` | `string` | — | — |
@@ -0,0 +1,3 @@
1
+ # Todo
2
+
3
+ An agent's plan board — a collapsible checklist whose header still shows the active item.
@@ -19,6 +19,7 @@ Inherits all props from `PartProps<ToggleGroup.RootProps>`.
19
19
 
20
20
  | Prop | Type | Default | Notes |
21
21
  |------|------|---------|-------|
22
+ | `variant?` | `ToggleGroupVariant` | `'plain'` | — |
22
23
  | `ref?` | `(forwarded)` | `null` | bindable |
23
24
 
24
25
  ## ToggleGroup.Item
@@ -10,9 +10,19 @@ import * as Tooltip from "@signal9/era-ui/tooltip";
10
10
 
11
11
  Composed from sub-components — compose explicitly at the call site:
12
12
 
13
+ - `Tooltip.Root`
13
14
  - `Tooltip.Trigger`
14
15
  - `Tooltip.Content`
15
16
 
17
+ ## Tooltip.Root
18
+
19
+ Inherits all props from `Tooltip.RootProps`.
20
+
21
+ | Prop | Type | Default | Notes |
22
+ |------|------|---------|-------|
23
+ | `children?` | `Snippet` | — | — |
24
+ | `open?` | `(forwarded)` | `false` | bindable |
25
+
16
26
  ## Tooltip.Trigger
17
27
 
18
28
  Inherits all props from `Tooltip.TriggerProps`.
@@ -23,7 +33,7 @@ Inherits all props from `Tooltip.TriggerProps`.
23
33
 
24
34
  ## Tooltip.Content
25
35
 
26
- Inherits all props from `PartProps<Tooltip.ContentProps>`.
36
+ Inherits all props from `OwnedPartProps<Tooltip.ContentProps>`.
27
37
 
28
38
  | Prop | Type | Default | Notes |
29
39
  |------|------|---------|-------|
@@ -0,0 +1,36 @@
1
+ # Tree
2
+
3
+ A disclosure hierarchy with real tree semantics — roving focus, and selection separate from expansion.
4
+
5
+ ## Import
6
+
7
+ ```ts
8
+ import * as Tree from "@signal9/era-ui/tree";
9
+ ```
10
+
11
+ Composed from sub-components — compose explicitly at the call site:
12
+
13
+ - `Tree.Root`
14
+ - `Tree.Item`
15
+
16
+ ## Tree.Root
17
+
18
+ Inherits all props from `HTMLAttributes<HTMLUListElement>`.
19
+
20
+ | Prop | Type | Default | Notes |
21
+ |------|------|---------|-------|
22
+ | `ref?` | `HTMLUListElement \| null` | `null` | bindable |
23
+ | `nodes?` | `TreeNode[]` | `[]` | — |
24
+ | `expanded?` | `string[]` | `[]` | bindable — Controlled: bind it, or drive it from the URL. |
25
+ | `selected?` | `string \| null` | `null` | bindable |
26
+ | `label?` | `string` | `'Tree'` | Accessible name for the tree landmark. |
27
+ | `item?` | `Snippet<[FlatNode]>` | — | Render your own row. Omitted, the default row is used. |
28
+ | `trailing?` | `Snippet<[FlatNode]>` | — | End-of-row slot on the default row — a count badge, a status dot. |
29
+
30
+ ## Tree.Item
31
+
32
+ | Prop | Type | Default | Notes |
33
+ |------|------|---------|-------|
34
+ | `item` | `FlatNode` | — | — |
35
+ | `trailing?` | `Snippet<[FlatNode]>` | — | Rendered at the end of the row — a count badge, a status dot. |
36
+ | `class?` | `string` | — | — |
@@ -422,6 +422,10 @@
422
422
  "px-pill-inset-control",
423
423
  "py-pill-inset-control",
424
424
  "gap-pill-inset-control",
425
+ "p-pill-inset-bar",
426
+ "px-pill-inset-bar",
427
+ "py-pill-inset-bar",
428
+ "gap-pill-inset-bar",
425
429
  "p-chip-inset-control",
426
430
  "px-chip-inset-control",
427
431
  "py-chip-inset-control",
@@ -434,7 +438,7 @@
434
438
  "file": "index.css",
435
439
  "useCase": "the concentric inset for a nested pair — (h-container − h-child)/2, the gap that makes a child control sit evenly inside its container, and the radius step that keeps their corners concentric. Named for the pair it joins: gap-icon-inset-control seats an icon in a control.",
436
440
  "description": "",
437
- "css": "@theme inline {\n\t--spacing-icon-inset-pill: var(--era-icon-inset-pill);\n\t--spacing-icon-inset-chip: var(--era-icon-inset-chip);\n\t--spacing-icon-inset-control: var(--era-icon-inset-control);\n\t--spacing-icon-inset-bar: var(--era-icon-inset-bar);\n\t--spacing-pill-inset-chip: var(--era-pill-inset-chip);\n\t--spacing-pill-inset-control: var(--era-pill-inset-control);\n\t--spacing-chip-inset-control: var(--era-chip-inset-control);\n\t--spacing-chip-inset-bar: var(--era-chip-inset-bar);\n}"
441
+ "css": "@theme inline {\n\t--spacing-icon-inset-pill: var(--era-icon-inset-pill);\n\t--spacing-icon-inset-chip: var(--era-icon-inset-chip);\n\t--spacing-icon-inset-control: var(--era-icon-inset-control);\n\t--spacing-icon-inset-bar: var(--era-icon-inset-bar);\n\t--spacing-pill-inset-chip: var(--era-pill-inset-chip);\n\t--spacing-pill-inset-control: var(--era-pill-inset-control);\n\t--spacing-pill-inset-bar: var(--era-pill-inset-bar);\n\t--spacing-chip-inset-control: var(--era-chip-inset-control);\n\t--spacing-chip-inset-bar: var(--era-chip-inset-bar);\n}"
438
442
  },
439
443
  {
440
444
  "name": "p-glyph-icon",
@@ -92,7 +92,7 @@ source uses it where a name exists.
92
92
  | `bg-well` `text-well` `border-well` `bg-elevated` `text-elevated` `border-elevated` `bg-highlight` `text-highlight` `border-highlight` `bg-overlay` `text-overlay` `border-overlay` | — |
93
93
  | `p-gutter` `px-gutter` `py-gutter` `gap-gutter` `p-panel` `px-panel` `py-panel` `gap-panel` `p-card` `px-card` `py-card` `gap-card` `p-content` `px-content` `py-content` `gap-content` `p-menu` `px-menu` `py-menu` `gap-menu` `p-field` `px-field` `py-field` `gap-field` | — |
94
94
  | `p-inset-pill` `px-inset-pill` `py-inset-pill` `gap-inset-pill` `p-inset-chip` `px-inset-chip` `py-inset-chip` `gap-inset-chip` `p-inset-control` `px-inset-control` `py-inset-control` `gap-inset-control` | text-symmetric content padding — (tier − text)/2, the inset that vertically centres body text in its tier; px-inset-control is a text button's side padding, p-inset-control a code block's. |
95
- | `p-icon-inset-pill` `px-icon-inset-pill` `py-icon-inset-pill` `gap-icon-inset-pill` `p-icon-inset-chip` `px-icon-inset-chip` `py-icon-inset-chip` `gap-icon-inset-chip` `p-icon-inset-control` `px-icon-inset-control` `py-icon-inset-control` `gap-icon-inset-control` `p-icon-inset-bar` `px-icon-inset-bar` `py-icon-inset-bar` `gap-icon-inset-bar` `p-pill-inset-chip` `px-pill-inset-chip` `py-pill-inset-chip` `gap-pill-inset-chip` `p-pill-inset-control` `px-pill-inset-control` `py-pill-inset-control` `gap-pill-inset-control` `p-chip-inset-control` `px-chip-inset-control` `py-chip-inset-control` `gap-chip-inset-control` `p-chip-inset-bar` `px-chip-inset-bar` `py-chip-inset-bar` `gap-chip-inset-bar` | the concentric inset for a nested pair — (h-container − h-child)/2, the gap that makes a child control sit evenly inside its container, and the radius step that keeps their corners concentric. Named for the pair it joins: gap-icon-inset-control seats an icon in a control. |
95
+ | `p-icon-inset-pill` `px-icon-inset-pill` `py-icon-inset-pill` `gap-icon-inset-pill` `p-icon-inset-chip` `px-icon-inset-chip` `py-icon-inset-chip` `gap-icon-inset-chip` `p-icon-inset-control` `px-icon-inset-control` `py-icon-inset-control` `gap-icon-inset-control` `p-icon-inset-bar` `px-icon-inset-bar` `py-icon-inset-bar` `gap-icon-inset-bar` `p-pill-inset-chip` `px-pill-inset-chip` `py-pill-inset-chip` `gap-pill-inset-chip` `p-pill-inset-control` `px-pill-inset-control` `py-pill-inset-control` `gap-pill-inset-control` `p-pill-inset-bar` `px-pill-inset-bar` `py-pill-inset-bar` `gap-pill-inset-bar` `p-chip-inset-control` `px-chip-inset-control` `py-chip-inset-control` `gap-chip-inset-control` `p-chip-inset-bar` `px-chip-inset-bar` `py-chip-inset-bar` `gap-chip-inset-bar` | the concentric inset for a nested pair — (h-container − h-child)/2, the gap that makes a child control sit evenly inside its container, and the radius step that keeps their corners concentric. Named for the pair it joins: gap-icon-inset-control seats an icon in a control. |
96
96
  | `p-glyph-icon` `px-glyph-icon` `py-glyph-icon` `gap-glyph-icon` `p-glyph-pill` `px-glyph-pill` `py-glyph-pill` `gap-glyph-pill` | the glyph size for a tier — the INK inside the box, not the box (size-glyph-pill is the dismiss × in a pill, size-pill is the pill). |
97
97
  | `bg-field` `text-field` `border-field` `bg-field-highlight` `text-field-highlight` `border-field-highlight` | the recessed field fill — bg-field is a text input's resting well, bg-field-highlight its focused/hovered face. |
98
98
  | `ease-base` | — |
@@ -966,7 +966,7 @@ Declared in `index.css`.
966
966
  }
967
967
  ```
968
968
 
969
- ## p-icon-inset-pill · px-icon-inset-pill · py-icon-inset-pill · gap-icon-inset-pill · p-icon-inset-chip · px-icon-inset-chip · py-icon-inset-chip · gap-icon-inset-chip · … (32 in all)
969
+ ## p-icon-inset-pill · px-icon-inset-pill · py-icon-inset-pill · gap-icon-inset-pill · p-icon-inset-chip · px-icon-inset-chip · py-icon-inset-chip · gap-icon-inset-chip · … (36 in all)
970
970
 
971
971
  **Use it for:** the concentric inset for a nested pair — (h-container − h-child)/2, the gap that makes a child control sit evenly inside its container, and the radius step that keeps their corners concentric. Named for the pair it joins: gap-icon-inset-control seats an icon in a control.
972
972
 
@@ -980,6 +980,7 @@ Declared in `index.css`.
980
980
  --spacing-icon-inset-bar: var(--era-icon-inset-bar);
981
981
  --spacing-pill-inset-chip: var(--era-pill-inset-chip);
982
982
  --spacing-pill-inset-control: var(--era-pill-inset-control);
983
+ --spacing-pill-inset-bar: var(--era-pill-inset-bar);
983
984
  --spacing-chip-inset-control: var(--era-chip-inset-control);
984
985
  --spacing-chip-inset-bar: var(--era-chip-inset-bar);
985
986
  }
@@ -23,13 +23,25 @@
23
23
  * a theme gives links: decoration WEIGHT (2px, which no other state uses) and
24
24
  * font weight. Both survive every theme, and hover keeps its own meaning for
25
25
  * the items that are not current.
26
+ *
27
+ * THE FONT WEIGHT IS 600, NOT 500, AND THAT IS THE WHOLE POINT OF IT. era's
28
+ * default font axis is mono, and in a monospace face 400 -> 500 is very
29
+ * nearly nothing: the glyphs keep their advance width, so there is no shape
30
+ * change to notice and only a trace more ink. Rendered at 8x in the shipped
31
+ * stack, 400 and 500 are hard to tell apart and 600 is unmistakable. At 500
32
+ * the "two axes" were one axis for most consumers, since most of them are on
33
+ * the default. Reported by a consumer running a mono nav, who could see the
34
+ * decoration doing all the work.
35
+ *
36
+ * 600 costs no layout: measured across weights, the advance width is
37
+ * identical in mono, so the bar does not reflow when the route changes.
26
38
  */
27
39
  export const navItemVariants = tv({
28
40
  variants: {
29
41
  variant: {
30
42
  filled:
31
43
  'no-underline aria-[current=page]:bg-fill aria-[current=page]:text-bright aria-[current=page]:shadow-pressed aria-[current=page]:hover:shadow-pressed',
32
- link: 'aria-[current=page]:font-medium aria-[current=page]:decoration-2 aria-[current=page]:[text-decoration-color:currentColor]'
44
+ link: 'aria-[current=page]:font-semibold aria-[current=page]:decoration-2 aria-[current=page]:[text-decoration-color:currentColor]'
33
45
  }
34
46
  },
35
47
  defaultVariants: { variant: 'filled' }
@@ -20,21 +20,33 @@
20
20
  * a theme gives links: decoration WEIGHT (2px, which no other state uses) and
21
21
  * font weight. Both survive every theme, and hover keeps its own meaning for
22
22
  * the items that are not current.
23
+ *
24
+ * THE FONT WEIGHT IS 600, NOT 500, AND THAT IS THE WHOLE POINT OF IT. era's
25
+ * default font axis is mono, and in a monospace face 400 -> 500 is very
26
+ * nearly nothing: the glyphs keep their advance width, so there is no shape
27
+ * change to notice and only a trace more ink. Rendered at 8x in the shipped
28
+ * stack, 400 and 500 are hard to tell apart and 600 is unmistakable. At 500
29
+ * the "two axes" were one axis for most consumers, since most of them are on
30
+ * the default. Reported by a consumer running a mono nav, who could see the
31
+ * decoration doing all the work.
32
+ *
33
+ * 600 costs no layout: measured across weights, the advance width is
34
+ * identical in mono, so the bar does not reflow when the route changes.
23
35
  */
24
36
  export declare const navItemVariants: import("tailwind-variants").TVReturnType<{
25
37
  variant: {
26
38
  filled: "no-underline aria-[current=page]:bg-fill aria-[current=page]:text-bright aria-[current=page]:shadow-pressed aria-[current=page]:hover:shadow-pressed";
27
- link: "aria-[current=page]:font-medium aria-[current=page]:decoration-2 aria-[current=page]:[text-decoration-color:currentColor]";
39
+ link: "aria-[current=page]:font-semibold aria-[current=page]:decoration-2 aria-[current=page]:[text-decoration-color:currentColor]";
28
40
  };
29
41
  }, undefined, undefined, {
30
42
  variant: {
31
43
  filled: "no-underline aria-[current=page]:bg-fill aria-[current=page]:text-bright aria-[current=page]:shadow-pressed aria-[current=page]:hover:shadow-pressed";
32
- link: "aria-[current=page]:font-medium aria-[current=page]:decoration-2 aria-[current=page]:[text-decoration-color:currentColor]";
44
+ link: "aria-[current=page]:font-semibold aria-[current=page]:decoration-2 aria-[current=page]:[text-decoration-color:currentColor]";
33
45
  };
34
46
  }, undefined, import("tailwind-variants").TVReturnTypeLike<{
35
47
  variant: {
36
48
  filled: "no-underline aria-[current=page]:bg-fill aria-[current=page]:text-bright aria-[current=page]:shadow-pressed aria-[current=page]:hover:shadow-pressed";
37
- link: "aria-[current=page]:font-medium aria-[current=page]:decoration-2 aria-[current=page]:[text-decoration-color:currentColor]";
49
+ link: "aria-[current=page]:font-semibold aria-[current=page]:decoration-2 aria-[current=page]:[text-decoration-color:currentColor]";
38
50
  };
39
51
  }, undefined>>;
40
52
  import type { Snippet } from 'svelte';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@signal9/era-ui",
3
- "version": "26.1.0",
3
+ "version": "27.0.0",
4
4
  "scripts": {
5
5
  "dev": "vite dev --host",
6
6
  "build": "vite build && npm run prepack",
@@ -25,15 +25,16 @@
25
25
  "check:classes": "node --experimental-strip-types scripts/check-classes.ts",
26
26
  "check:twmerge": "node --experimental-strip-types scripts/check-twmerge.ts",
27
27
  "build:llm-docs": "node --experimental-strip-types scripts/build-llm-docs.ts",
28
- "prebuild": "npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:package-name && npm run check:double-edge && npm run build:llm-docs",
29
- "validate": "npm run check && npm run lint && npm run format:check && npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:package-name && npm run check:double-edge",
28
+ "prebuild": "npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:install && npm run check:double-edge && npm run build:llm-docs",
29
+ "validate": "npm run check && npm run lint && npm run format:check && npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run check:eslint-rules && npm run check:install && npm run check:double-edge",
30
30
  "test": "npm run test:visual",
31
31
  "check:doc-tokens": "node --experimental-strip-types scripts/check-doc-tokens.ts",
32
32
  "check:audit-controls": "node --experimental-strip-types scripts/check-audit-controls.ts",
33
33
  "check:specimen-coverage": "node --experimental-strip-types scripts/check-specimen-coverage.ts",
34
34
  "check:eslint-rules": "node --experimental-strip-types scripts/check-eslint-rules.ts",
35
- "check:package-name": "node --experimental-strip-types scripts/check-package-name.ts",
36
- "check:double-edge": "node --experimental-strip-types scripts/check-double-edge.ts"
35
+ "check:install": "node --experimental-strip-types scripts/check-install.ts",
36
+ "check:double-edge": "node --experimental-strip-types scripts/check-double-edge.ts",
37
+ "verify:published": "node scripts/verify-published.mjs"
37
38
  },
38
39
  "files": [
39
40
  "dist",