**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](https://docs.wirekit.app/components/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 `label` is 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](https://docs.wirekit.app/components/otp-input#width-and-size) 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 above `lg`, so a theme that resizes its controls resizes these cells too, and groups, wrapping and `justify` work as they do in the other sizes. - **The [API map](https://docs.wirekit.app/ai-tooling) 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 to `register()` reads there which names a component needs, such as a dropdown's trigger and submenus. The [dependencies](https://docs.wirekit.app/dependencies#importing-only-the-components-you-use) page shows the command, and its size table is measured again. - **An [overflow nav](https://docs.wirekit.app/components/overflow-nav) entry takes `icon` and `after`.** The icon sits before the label and `after` after it, in the row and in the menu, both inside the link, so the row measures them with the entry. `after` takes text, an `Htmlable` such as a `view()`, 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-weight` sets the weight of a chosen entry** in a [segmented control](https://docs.wirekit.app/components/segmented-control), a [multi-select](https://docs.wirekit.app/components/multi-select) and a [bottom nav](https://docs.wirekit.app/components/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-transition` or `x-cloak`, renders with an empty value.** Blade passed it on as `true`, and the tag came out as `x-transition="x-transition"`, which Alpine reads as a list of transition classes and throws on, so the directives after it did not start. A bare `x-init`, `x-intersect` or `x-sort` named itself as an expression and failed when it ran. - **A [price](https://docs.wirekit.app/components/price) renders without the `intl` PHP 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 with `Class "NumberFormatter" not found`, product cards and pricing tiers included. It now falls back to `1,234.56 EUR` as 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:key` you 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](https://docs.wirekit.app/components/table), a stat that counts up and has an entrance animation, a pricing table with billing intervals and a toggle button with a tooltip or `optimistic`. After a row was removed, every field below it was rebuilt and lost its focus and state. An [OTP input](https://docs.wirekit.app/components/otp-input) rendered the key nowhere. The [integration guide](https://docs.wirekit.app/getting-started/integration#a-wirekey-on-a-wirekit-component) 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](https://docs.wirekit.app/components/replay-button) lost its replay, a [clipboard button](https://docs.wirekit.app/components/clipboard-button), a [dropdown](https://docs.wirekit.app/components/dropdown) and many more dropped yours, and a toggle button let yours replace its toggle. It reached an [inline edit](https://docs.wirekit.app/components/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](https://docs.wirekit.app/customization) page says which classes stay. - **A row you flash with [`x-wk-flash`](https://docs.wirekit.app/animations#flashing-a-row-that-changed) lights 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-floor` and 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 inside `data-wk-touch`. - **An `x-show` or `wire:show` you write on a component shows and hides the whole component**, the label, description and error of a field included, and an `x-transition`, `wire:transition`, or an `x-cloak` or `wire:cloak` beside 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](https://docs.wirekit.app/components/scroll-to-top) button, a [reading](https://docs.wirekit.app/components/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-model` on 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 an `x-model` on 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. With `APP_DEBUG` on, 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-model` binds as before; the [integration guide](https://docs.wirekit.app/getting-started/integration#an-x-model-on-a-wirekit-component) says where it binds. - **The X of a [clearable input](https://docs.wirekit.app/components/input#clearable--copyable) follows a value the server writes.** When your component emptied the property the field's `wire:model` binds, 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`, an `aria-label` or an `aria-labelledby` you 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](https://docs.wirekit.app/components/breadcrumb) or two [paginations](https://docs.wirekit.app/components/pagination) 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 own `aria-labelledby` won even without a duplicate. A form control with a visible `label` keeps that label as its name, so what a screen reader announces matches the text on screen. - **An `id` you write on a multi-select, a [tags input](https://docs.wirekit.app/components/tags-input) or an [inline edit](https://docs.wirekit.app/components/inline-edit) goes on its field, so a `