kerfjs 5.0.0-beta.54 → 5.0.0-beta.55
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 +122 -0
- package/ai/manifest.json +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,128 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
|
6
6
|
|
|
7
7
|
## [Unreleased]
|
|
8
8
|
|
|
9
|
+
- **New `@kerfjs/ui` `PopupMenu` (`@kerfjs/ui/popup-menu`).** It renders a
|
|
10
|
+
trigger and typed commands, headings, and dividers over the Web Awesome
|
|
11
|
+
dropdown. Put it in a `single` `ToolbarControlGroup` with `nestedDropdown`, or
|
|
12
|
+
wrap it in a `PopupSurface`. Register it once with
|
|
13
|
+
`@kerfjs/ui/popup-menu/register`. It replaces hand-written `wa-dropdown`
|
|
14
|
+
markup, which the catalog discourages: the guidance, the toolbar demos, and
|
|
15
|
+
the Catalog's "Components" menu now use it. It also fixes two defects that
|
|
16
|
+
hand-written menus had:
|
|
17
|
+
- Icon-only triggers were unnamed, because a Web Awesome button ignores an
|
|
18
|
+
`aria-label` on its host. PopupMenu renders `label` as visually hidden text
|
|
19
|
+
inside the button.
|
|
20
|
+
- A keyboard choice (Enter or Space) never reached click-delegated
|
|
21
|
+
`data-action` handlers. PopupMenu's registration routes it through the
|
|
22
|
+
item's click.
|
|
23
|
+
- The UX catalog's application-layout demo no longer uses the discouraged
|
|
24
|
+
`wa-button-group`.
|
|
25
|
+
|
|
26
|
+
- **`@kerfjs/ui`'s `TokenSearchField` takes a `revision` prop for programmatic
|
|
27
|
+
text replacement.** The editor's text is DOM-owned, so a new `query` with the
|
|
28
|
+
same tokens was silently ignored, for example when reseeding a persistent
|
|
29
|
+
dialog's field on reopen. Changing `revision` rebuilds the editor from `query`
|
|
30
|
+
and `tokens`, so consumers no longer need to re-key a wrapper element.
|
|
31
|
+
|
|
32
|
+
- **`@kerfjs/ui`'s `TabBar` strip no longer scrolls vertically.** The strip set
|
|
33
|
+
only `overflow-x: auto`, so any vertical excess (consumer padding, focus-ring
|
|
34
|
+
insets, taller tabs under larger text) let it scroll up and down on touch. It
|
|
35
|
+
now scrolls only horizontally, and it takes a `min-height` so it grows to fit
|
|
36
|
+
taller tabs instead of clipping them.
|
|
37
|
+
|
|
38
|
+
- **The `@kerfjs/ui` desktop app-shell recipe is a `Workbench`.** The old
|
|
39
|
+
pane switcher that showed one pane at a time below desktop sizes is gone. The
|
|
40
|
+
navigation and inspector are now resizable Workbench rails with their own
|
|
41
|
+
toolbars, and their show toggles relocate into the work-area toolbar. On a
|
|
42
|
+
narrow container the rails overlay the task list one at a time. The
|
|
43
|
+
collapsible-sidebar recipe composes each panel's `toolbar` and uses
|
|
44
|
+
`CollapsiblePanelRelocated` for its restore controls.
|
|
45
|
+
|
|
46
|
+
- **`@kerfjs/ui`'s `CollapsiblePanel` composes a panel toolbar and relocates its
|
|
47
|
+
controls.** A panel takes the same `toolbar` roles as a `Workbench` panel
|
|
48
|
+
(`title`, `panelOnly`, `constant`, and a standard `toggle`) plus a `footer`,
|
|
49
|
+
and the new `CollapsiblePanelRelocated` renders a collapsed panel's constant
|
|
50
|
+
groups and toggle wherever the app's work-area toolbar holds them.
|
|
51
|
+
`wireSidebar` hands focus to that relocated toggle when the panel closes, even
|
|
52
|
+
when the app renders it a frame late. `collapsiblePanelToggleIcon` is
|
|
53
|
+
unchanged.
|
|
54
|
+
|
|
55
|
+
- **`@kerfjs/ui`'s `Catalog` is built on `Workbench` and dogfoods the package's
|
|
56
|
+
components.** The sidebar is a Workbench left rail with the standard toggle
|
|
57
|
+
(labels "Show/Hide {brand} catalog"), which moves into the entry toolbar while
|
|
58
|
+
collapsed; on a small screen the sidebar overlays the stage instead of the
|
|
59
|
+
former stacked two-column navigation, which is gone. The sidebar, sections,
|
|
60
|
+
footer, and example notes are `List` / `ListHeader` / `ListInsetText` / `Text`
|
|
61
|
+
compositions, and most catalog CSS (and every viewport media query in the
|
|
62
|
+
shell) is removed. New: `Catalog`'s `id`, `headerPlacement`, and
|
|
63
|
+
`footerPlacement`; `wireCatalog`'s `collapsed` and `id` options (the sidebar is
|
|
64
|
+
wired like a Workbench rail and an open overlay closes on a selection);
|
|
65
|
+
`Workbench`'s `mainHeader`, `mainFooter`, `mainHeaderPlacement`,
|
|
66
|
+
`mainFooterPlacement`, and `mainToolbar.responsive` / `responsiveAt`;
|
|
67
|
+
`ListInsetText`'s `rootAttributes`. `wireWorkbench` now also re-checks panel
|
|
68
|
+
breakpoints when the root font size changes, and hands focus to a panel's
|
|
69
|
+
relocated toggle when an unfocused click on its own toggle closes it (WebKit).
|
|
70
|
+
|
|
71
|
+
- **`@kerfjs/ui`'s `Workbench` rails overlay the work area on small screens by
|
|
72
|
+
default.** A rail's `responsiveOverlayAt` now defaults to `"narrow"` (704px
|
|
73
|
+
of Workbench width; the new `"never"` keeps it inline), so a sidebar covers
|
|
74
|
+
the work area and any open drawer instead of squeezing it, one at a time
|
|
75
|
+
with `wireWorkbench`. On a compact (448px) Workbench an open overlay rail
|
|
76
|
+
fills the width less a 44px dismiss strip
|
|
77
|
+
(`--kui-workbench-overlay-dismiss-margin`) on the side away from its edge;
|
|
78
|
+
the new per-rail `compactOverlay: "full"` fills it. The bottom drawer's
|
|
79
|
+
behavior is unchanged. `WorkbenchPanelToolbar` and the other panel-toolbar
|
|
80
|
+
types are now exported from `@kerfjs/ui/workbench`.
|
|
81
|
+
|
|
82
|
+
- **`@kerfjs/ui`'s `Workbench` composes panel toolbars and moves a closed
|
|
83
|
+
panel's controls into the work area.** A panel takes an optional `toolbar`
|
|
84
|
+
(`title`, `panelOnly`, `constant`, and a standard `toggle: { action, name }`
|
|
85
|
+
the Workbench renders) and `footer`; the Workbench takes `mainToolbar` and
|
|
86
|
+
`mainBottomToolbar`. While a panel is closed its constant groups and toggle
|
|
87
|
+
move to the work area — a left rail's lead the main toolbar, a right rail's
|
|
88
|
+
end it, a drawer's trail the bottom toolbar or float in a corner
|
|
89
|
+
`FloatingToolbar` — and its panel-only groups stay behind. `wireWorkbench`
|
|
90
|
+
keeps focus with the toggle as it moves. Panels without a `toolbar` render
|
|
91
|
+
exactly as before, and a region's only-child `Pane` or layout now fills it.
|
|
92
|
+
|
|
93
|
+
- **`@kerfjs/ui`'s list-detail dialog guidance is Workbench-shaped.** On roomy
|
|
94
|
+
devices the list is a full-height sidebar and the detail a full-height main
|
|
95
|
+
column, each a `Pane` with its own top `Toolbar`; the main column carries
|
|
96
|
+
the primary title, the close control (`data-dialog="close"` in a
|
|
97
|
+
`without-header` Web Awesome dialog), and the record actions, instead of a
|
|
98
|
+
dialog header spanning both columns. The recipe, `docs/recipes.md`, and the
|
|
99
|
+
shipped AI skill say so; compact devices keep the full-screen drill-down
|
|
100
|
+
sheet.
|
|
101
|
+
|
|
102
|
+
- **`@kerfjs/ui`'s `ToolbarControlGroup` centers a direct icon tile.** A
|
|
103
|
+
non-interactive icon placed directly in a group — a heading's identity
|
|
104
|
+
glyph — now takes an icon button's 40px slot and 16px visual, so it centers
|
|
105
|
+
in the group. It previously sat at the group's start edge, which pushed
|
|
106
|
+
apps to wrap it in a focusable `<button>` that did nothing.
|
|
107
|
+
|
|
108
|
+
- **`@kerfjs/ui`'s `Toolbar` keeps its controls in a top control band.** A
|
|
109
|
+
toolbar now reserves one 44px band at its top: each zone item no taller than
|
|
110
|
+
the band is centered in it by its own size, and a taller item — a wrapped
|
|
111
|
+
`ToolbarText` title, a multi-line search, a second trailing row — starts at
|
|
112
|
+
the band's top and grows down without moving the others. A wrapped title
|
|
113
|
+
centers its first line in the band, so trailing controls stay beside that
|
|
114
|
+
line instead of dropping to the middle of the whole title.
|
|
115
|
+
|
|
116
|
+
- **`@kerfjs/ui`'s segmented `TabBar` ends its strip concentric with the pill
|
|
117
|
+
track.** The first tab's leading corners, and with `allocation="fill"` the
|
|
118
|
+
last tab's trailing corners, now follow the track's curve instead of keeping
|
|
119
|
+
the small segment radius, and compact tabs are inset from the track's ends
|
|
120
|
+
by the same distance as from its top and bottom. Corners between tabs are
|
|
121
|
+
unchanged.
|
|
122
|
+
|
|
123
|
+
- **`@kerfjs/ui`'s `StateBanner` keeps its title, badge, and detail on one
|
|
124
|
+
baseline in Safari.** The truncating detail was a clipped `inline-block`,
|
|
125
|
+
which WebKit baselines at its bottom edge: the detail rose about 2px above
|
|
126
|
+
the title and pushed the title and badge down, so the banner's contents
|
|
127
|
+
looked vertically misaligned. The detail is now an inline flex wrapper
|
|
128
|
+
around a clipped inner `<span>`, which takes its text baseline in every
|
|
129
|
+
engine; truncation and the narrow-width detail line are unchanged.
|
|
130
|
+
|
|
9
131
|
- **`@kerfjs/ui`'s `wireTabBars` reveals a tab the application selects.** A
|
|
10
132
|
tab added and selected by the app in an overflowing `TabBar` stayed
|
|
11
133
|
off-screen, because the wiring revealed a selection only at wire-up, on
|
package/ai/manifest.json
CHANGED
package/package.json
CHANGED