WireKit v2.43.0
A minor release that spans the catalog rather than one corner of it. Five components gain an opt-in capability — a sticky header whose bound is yours to set, a stepper you can walk back through, a theme control that names the mode it is in, a code region you can name, and slot attributes that reach the cluster they belong to — and wirekit:verify learns to report which ApexCharts version you have. The fixes reach further than the shells: a module drawn as a button sat ten pixels off the axis of the ones beside it, a navigation column that remembers its width painted the seed before the value it remembered, surface="soft" had no hover state at all — and it is the surface most of an application's buttons use — and wirekit:verify reported a filled icons.aliases as missing, so using the feature is what turned the check red. Everything under Added is additive — an unset prop resolves to what it resolved to before, so a call that renders today renders the same after the upgrade.
Added
php artisan wirekit:verifynames the ApexCharts version you have, and whether the adapter is tested against it. WireKit ships adapter glue rather than the chart library, so the version is yours to pick and nothing in the package pins it — which left the question "may we move to the new major?" unanswerable from the outside. The check now reads the installed version (falling back to the declared range), reports it against the tested majors, and warns rather than fails on one outside that set, because an unmeasured major is not a broken one. The range is 5, 6 and 7, verified in a real browser against 5.16.0, 6.10.0 and 7.1.0. See Chart.shell-barforwards the attributes of itsstartandendslots to the cluster that holds them. Writing<x-slot:start class="lg:hidden">now hides the whole cluster rather than only its contents. Hiding the control alone left the wrapper behind as a zero-width flex item, which still took the bar's gap on both sides — so everything after it carried an indent nothing in the markup accounted for. See Shell Bar.tabletakessticky-header-max, so how tall a sticky-header table may grow is the call site's decision.sticky-headerneeds a bounded body to mean anything at all: the wrapper already scrolls on both axes, so a heading measured against a box that never scrolls vertically never sticks. That bound was a fixed24rem, which a five-row table reserves and then never uses — a box taller than its own content, and visibly worse than the plain table it replaced. It now takes any CSS length, and it reaches the element as an inlinemax-heightrather than as a utility class, socalc(100vh - 4rem)works exactly as written, with nothing to escape and nothing your build has to have seen first. The default is still24rem, so no table that renders today moves. See Table.- A completed
stepperstep can carryhreforwire:click, and becomes a real link or button. A stepper looks like the way back, so a finished step that does not answer a click costs the reader a click and a guess about the state of the page. Only steps beforecurrentbecome operable: one at or after it stays presentational even when you give it a destination, because a jump forward is a permission only your flow can grant — a clickable skip in a checkout walks around the validation the steps exist for. A stepper built from plain strings renders as it always has: no tag, no class, no attribute added. See Stepper. theme-controllerhas a fourth variant,menu— a trigger that names the mode currently on, with a menu of all three. The other three each answer only half of "which mode is on right now": the icon button shows a glyph that may mean the state you are in or the one a click would produce, which are opposites, and it cannot saysystemat all; the switch says which of two and has the same missing third state; theselectsays all three in words, but a native<option>takes no markup and so can never carry an icon. The menu trigger shows the active mode's icon and its name, the panel lists all three with theirs, andhide-labeldrops back to the glyph alone where the name is a line too wide. See Theme Controller.code-blocktakeslabel, which names its scrollable code region. That region is a landmark, and landmarks have to be distinguishable. The name is derived from the language when you set none, which reads well on a page carrying one or two blocks and stops helping the moment it carries twenty of the same language — reported from an audit log rendering one diff per table row, where the name meant to tell the regions apart is the thing that makes them identical. Name a block after what it holds rather than after what it is: "Change 4471" locates it, where the language alone only repeats what the whole page already is. See Code Block.
Fixed
php artisan wirekit:verifynames translation keys that mean something different in your catalog than in WireKit. The catalog is one flat namespace and your translations are layered on top on purpose — but an ordinary English word can carry two meanings, and then your wording wins inside a WireKit component that was written for the other one. Nothing throws; only the text is wrong, in a component you may not have reached yet. The check reports only keys a shipped component actually renders, because re-wording anything else is exactly what the app-wins rule is for. See Chart for how to run the check as part of a build gate.- Nine component options the components read are finally in the published config stub, and two of them now actually work.
vendor:publishhands youconfig/wirekit.phpto learn what is configurable, so an option missing from it is one nobody can find. Two were worse than missing:table.head.variantanddropdown.panel.widthwere declared under a flat dotted key, whichconfig()never reaches — they read as configurable and resolved to their default whatever you set. Both keep their previous value, so nothing renders differently; they simply respond now.table's new bound is spelledsticky-header-maxto match its siblings. surface="soft"answers the pointer. It was the only one of the five surfaces with no hover state, and it is the surface secondary actions use — so it is the majority of the buttons in an application, and an element that does not answer the pointer reads as not clickable. See Button.- The console shell's two navigation columns are no longer a pair of nameless landmarks. Both are layout; the landmark is the
<nav>inside each, which already carries its own name. Each slot's attributes now reach its column, so an application that wants a real landmark there can say so. See App Shell. - A line or area chart's tooltip names the point again instead of counting it. Given
:labels, the underlying library rewrites the axis into a numeric one and moves your strings aside, which left the header showing the data-point index —15where a date belonged. It is the normal case fortype="line"with labels, and a quiet one: the chart draws, the console stays silent, and only hovering shows it. If you worked around this by passing{x, y}objects, that keeps working and you can drop it. See Chart. wirekit:verifyno longer reports a filledicons.aliasesas a missing option. The config-drift check filtered one direction and not the other, so using the feature is what turned a green check red — and the remedy it printed would have overwritten the aliases it was complaining about.- An
app-rail.itemrendered withas="button"sits on the same axis as its neighbors. Its inline padding was being reset away, so a module drawn as a button stood ten pixels to the left of the ones around it. See App Rail. - A
sidebarorapp-railwithpersistpaints the width it remembers. The stored state lives in the reader's browser, so the first paint used to show the seed and the column corrected itself a frame later — visible as the navigation being briefly collapsed and then snapping open. Both columns now emit a small nonced script that applies the remembered width before anything is painted; where a Content-Security-Policy refuses it, or the browser has site storage switched off, the previous behavior is unchanged. See Sidebar.
Documentation
- Each of the five application-shell blueprints carries a preview with every zone filled — a brand row, labeled groups, a nested collapsible section, an unread count, the collapse control, an account menu, both header clusters and a page footer. The other previews on those pages each hold one decision still so it can be read; this one is the starting point to copy. See Rail Shell.
- The multi-column shell shows which column gives way. Three columns and one window mean something has to yield, and the shell does not decide which: one preview hands the control to the list column, the other leaves the list alone and collapses a detail column on the far side of the reading area. See Multi-Column Shell.