WireKit v2.61.0
Minor. A new status dot sits in the line beside a value, an OTP input takes an xl size, an overflow nav entry takes an icon and markup of your own, a new token sets the weight of a chosen entry, and the API map names the Alpine factories each component starts. Most of the fixes are about what you write on a component's tag: a key, a show, a listener, a role, a name or a style now reaches the element it is about, a directive written without a value no longer stops Alpine, and an x-model on a component with no value to hand over is dropped with a warning. On a touch screen the text floor no longer shrinks larger text, a clearable input's X follows the server, a flashed row fades out rather than in, a price renders without the intl extension, and the chosen or current entry of calendars, tabs, lists and steppers stays visible under forced colors.
Added
- A status dot sits in the line beside a value and carries a state in its color, in the intents a badge takes, such as a red dot beside a stock figure that has gone below zero. Its
labelis the name a screen reader reads and the text of a tooltip that opens on hover and on keyboard focus. A dot without a label is decorative and hidden from assistive technology, and inside a link or a button:focusable="false"leaves the tab stop to the control. The overflow nav and indicator pages draw their dots with it. - An OTP input takes
size="xl", 3.5rem cells with larger digits for a screen where the code is the only thing to enter, such as a PIN pad or a lock screen. It is one more step of the component heights abovelg, so a theme that resizes its controls resizes these cells too, and groups, wrapping andjustifywork as they do in the other sizes. - The API map names the Alpine factories each component starts, under
factories, the ones of the components it renders included. An application that imports components from the ES module by name and hands them toregister()reads there which names a component needs, such as a dropdown's trigger and submenus. The dependencies page shows the command, and its size table is measured again. - An overflow nav entry takes
iconandafter. The icon sits before the label andafterafter it, in the row and in the menu, both inside the link, so the row measures them with the entry.aftertakes text, anHtmlablesuch as aview(), or a closure that is called once for the row and once for the menu with'row'or'menu', so markup that carries an id renders it once in each place. An entry without either renders as before. --font-wk-selected-weightsets the weight of a chosen entry in a segmented control, a multi-select and a bottom nav, so a theme can change the weight without replacing the classes of the chosen state. It defaults to the heading weight, so nothing changes until a theme sets it. Each of the three keeps a mark that does not depend on the weight: a selected multi-select option now ends on a check, and a chosen segment carries a frame under forced colors.
Fixed
- An Alpine directive written without a value on a component, such as a bare
x-transitionorx-cloak, renders with an empty value. Blade passed it on astrue, and the tag came out asx-transition="x-transition", which Alpine reads as a list of transition classes and throws on, so the directives after it did not start. A barex-init,x-intersectorx-sortnamed itself as an expression and failed when it ran. - A price renders without the
intlPHP extension, and writes its change in the locale of its amount. WireKit does not require the extension, but without it every page that showed a price stopped withClass "NumberFormatter" not found, product cards and pricing tiers included. It now falls back to1,234.56 EURas WireKit's other number helpers do. With the extension, a percentage change reads-12,5 %in German instead of-12.5%, and an absolute change follows the locale as well. - A
wire:keyyou write on a component keys its outermost element. Livewire matches the top-level element of each iteration of a loop by its key. Most form controls handed the key to the field inside their wrapper, and so did the editor, multi-select, tags input, segmented control, status tiles, a logo cloud, a reading bookmark, a responsive table, a stat that counts up and has an entrance animation, a pricing table with billing intervals and a toggle button with a tooltip oroptimistic. After a row was removed, every field below it was rebuilt and lost its focus and state. An OTP input rendered the key nowhere. The integration guide says where a key you write goes. - A listener you write on a component runs beside the component's own listener for the same event. A listener is an attribute, and where a component listened to the same event on the element your attributes land on, one of the two was dropped: a replay button lost its replay, a clipboard button, a dropdown and many more dropped yours, and a toggle button let yours replace its toggle. It reached an inline edit with
control="number"too: leaving the number editor neither committed nor closed it. - The classes a component needs in order to work stay when you replace one of its class blocks with a string personalization. An overlay's position and layer, scrollbars and scroll fades, touch targets, the bottom nav's safe area, a carousel slide's width per view, a slider's track and the reading components' print rules sat inside the block and went with it. The customization page says which classes stay.
- A row you flash with
x-wk-flashlights up at once and fades back to its own background. It started without its tint, reached the tint only at the end of the flash and then dropped back at once, so a line added to a basket turned green late and lost the color abruptly. Under reduced motion the tint still appears at once, holds and ends at once. - On a touch screen, field text below 16px is lifted to 16px, and larger text keeps its size. The rule that keeps iOS from zooming into a field set every field, every button given
touch-text-floorand the rich-text editor to exactly 16px, so the digits of a large one-time code dropped from 20px to 16px, and every field on a page with a font scale above 1 shrank. It now lifts and never lowers, under a coarse pointer and insidedata-wk-touch. - An
x-showorwire:showyou write on a component shows and hides the whole component, the label, description and error of a field included, and anx-transition,wire:transition, or anx-cloakorwire:cloakbeside the show, goes to the same element. On the components the key entry above names, the directive hid the element inside alone. A scroll-to-top button, a reading table of contents and a reading spine show and hide themselves, and a show of yours was dropped as a second attribute of the same name, or toggled the element against the component's own condition; with one of yours they now sit in a wrapper that generates no box, and both conditions apply. - An
x-modelon a component that has no value to hand over is dropped, and a warning says so. Alpine gave such a binding the value of whichever field inside the component was edited last, so anx-modelon a calendar received the month, one on a date range one of its two dates, and one on a rating or a segmented control nothing. WithAPP_DEBUGon, or in the console, WireKit logs which component dropped it. On a field, and on the controls that hand their value to Alpine, such as a combobox or a slider,x-modelbinds as before; the integration guide says where it binds. - The X of a clearable input follows a value the server writes. When your component emptied the property the field's
wire:modelbinds, as a scan field does after each scan, the X stayed over the empty field until the next keystroke. It now hides, and it appears when the server writes a value in. - A
role, anaria-labelor anaria-labelledbyyou write on a component replaces the one the component gives that element. Where a component wrote its own beside yours, the tag carried the attribute twice and the browser kept the first, mostly the component's: two breadcrumbs or two paginations on one page could not be told apart by name, and on a range slider, a modal, a ticker, a kanban column and a message the component's ownaria-labelledbywon even without a duplicate. A form control with a visiblelabelkeeps that label as its name, so what a screen reader announces matches the text on screen. - An
idyou write on a multi-select, a tags input or an inline edit goes on its field, so a<label for>of yours names it. The first two rendered it nowhere and the inline edit gave its field{id}-control, while the multi-select's and the tags input's props tables called it the element id. The fallback name these fields carry when nothing else names them steps aside for your label, which it would otherwise have overridden. A test or a script that selected#{id}-inputor#{id}-controlon one of them selects#{id}now; without an id of yours the ids are as before. - An
x-refyou write reaches your component's$refson the components that kept it in an Alpine component of their own: an alert dialog, an assistant message, a bottom nav, a chart, a command palette, a conversation, a drawer, a FAB, a map, a page progress bar, the reading components, a reorder list, a replay button, a scroll-to-top button, a theme controller, a toast region and a tour. As on the components v2.60.0 changed, the name renders asx-wk-refthere. - An attribute a component sets from its own state renders once, and a live region's politeness and a phone field's
autocompleteare yours. Thetypeof a component's own fields and buttons, thetabindexof a scroll area, a combobox'saria-expandedandaria-controls, thearia-hiddenof a decorative element and a busy flag stood in the tag twice when you wrote one; the component's value stays. Youraria-liveon a spinner, a skeleton, a reading meta line or a chat marker, and yourautocompleteon a phone field, now replace the component's. A flag takes yourloadinganddecoding, so a flag above the fold can load eagerly, and keeps the size itssizegives it. - A
styleyou write on a reading table of contents or a sparkline joins the component's own inline style instead of replacing it: the table of contents lost its offset, and the sparkline its size and its clip. - An
x-inityou write on a wizard runs. The wizard started itself with anx-initof its own on the same element, and the browser kept that one. - Every attribute you write on an OTP input lands on one element. A
style,title,langorx-show, awire:keydown.enterand a listener forwirekit:otp-completereached nothing, so the listener never heard the completion. The binding andnamego to the hidden field,dusk,data-*andaria-labelto the group,aria-describedbyto the boxes, and the rest to the wrapper. - An
idyou write on a segmented control stands on one element, the radio group. Its hidden field repeated it. - A
classyou write on a scope switcher reaches its wrapper, so a layout class such asms-autoapplies. - Under forced colors, the chosen or current entry stays visible where a fill, a tint or a raised surface was its only mark, none of which that mode paints: a calendar's chosen day and range, the current page of a sidebar and an app rail, the chosen tab of tabs, the option the keyboard is on in a combobox, a multi-select, a scope switcher, a command palette and a sidebar in selection mode, the current step of a stepper, and the pressed or checked buttons of a data table's density toggle, an event calendar, a notification center's filters, a pricing table's interval toggle, a reaction and the editor toolbar. Each draws a frame in the system highlight color. A carousel's dots, which vanished there, show their edge, and the current one is filled. The classes these rules hang on are listed in the public CSS API.
- Under forced colors, a toggle's knob, a theme controller's switch and a progress track keep their edge with the Material and Minimal presets, which set the border width to
0px, and a pressed toggle button shows its focus outline. - The current step of a stepper is marked by more than its color: its label is set in the heading weight. Its circle differed from the next step's in color alone, and with the Material and Minimal presets only the number's color was left.
- The chosen option of a combobox carries a check. The list highlights the first free option when it opens, so nothing on screen said which one was chosen.
- A pressed command in the editor toolbar is told apart from a hovered one by an edge. It had exactly the hover paint, so every command under the pointer looked pressed.
- A carousel's slide dots reach 3:1 against the page, and the current one differs in shape: a dot that is not current is a ring, and the current one is filled in the accent color. A dot that was not current measured 1.29:1 against a light page.
- A theme controller's switch stays visible while it is off, and has the toggle's touch target. Its track had no edge and a fill of 1.09:1 against a light page, and the switch is off exactly while the page is light. It takes the toggle's paint now.
- With the Material and Minimal presets, the rule their pages give to restore a field's boundary also restores the edge of a checkbox, a radio, a toggle, the theme switch and a dropdown's radio items, through a new
wk-choice-frameclass on each. Without it an unchecked checkbox or radio was its fill alone. - The examples the MCP server hands out are Blade you can paste. A matrix or a list of states came out in the documentation's own notation, with placeholders such as
{intent}that threw once pasted, and a preview whose code the page shows without its demo frame is now handed out without that frame as well.
Documentation
- The integration guide says where the attributes you write on a component go: a
wire:key, anx-showwith its transitions, a listener, aroleor a name, the attributes a component keeps for itself, and which names an expression on a component reads. - The Material and Minimal pages give fields their boundary back without taking the field apart. Their examples replaced a field's classes and took its fill, text color, focus ring, width and disabled state with them. A rule on the frame classes now restores the width alone, and Minimal's panel example changes only the width.
- The personalization examples on the toast, carousel, action bar, data table and customization pages keep what their blocks carry. The toast example left toasts that could not be clicked, and the others dropped a slide's snapping, the safe-area lift, the frozen columns and a button's focus ring.
- The design-token tables of the component pages name the tokens the components read, for every size they come in. The OTP input's table described its default size alone and called the cell width fixed, and the input and select tables left out the
md-compactheight. - The tabs page gives
labelthe default it has,'Tabs'. - The carousel page describes the spacing of its indicator dots as it ships: they meet the spacing exception of WCAG 2.5.8.
Components
Every component this release changes, each linked to its page: Accordion · Action Bar · Alert Dialog · App Rail · Assistant Message · Attachment · Bento Grid · Bottom Nav · Branch Switcher · Breadcrumb · Button · Button Group · Calendar · Carousel · Chart · Chat Marker · Checkbox · Clipboard Button · Color Picker · Combobox · Command Palette · Context Menu · Conversation · Countdown · Data Table · Date Picker · Date Separator · Divider · Drawer · Dropdown · Editor · Event Calendar · FAB · Filter Builder · Flag · Hover Card · Image Compare · Image Gallery · Inline Edit · Input · Kanban · Logo Cloud · Main · Map · Menubar · Message · Message Group · Modal · Multi-Select · Navbar · Navigation Menu · Notification Center · Number Input · OTP Input · Overflow Nav · Page Progress · Pagination · Password Input · Phone · Price · Pricing Table · Profile · Progress · Progress Radial · QR Code · Quick Replies · Radio · Range Slider · Reaction · Reading · Reorder · Replay Button · Scope Switcher · Scroll Area · Scroll to Top · Segmented Control · Select · Sidebar · Skeleton · Slider · Spacer · Sparkline · Spinner · Stage Card · Stat · Status Dot · Status Tiles · Stepper · Sticky Panel · Swap · Table · Tabs · Tags Input · Team Section · Testimonial · Textarea · Theme Controller · Ticker · Time Picker · Timeline · Toast · Toggle · Toggle Button · Tool Call · Toolbar · Tooltip · Tour · Tree View · Wizard