v1.0.0

Added

• modal: a bottom sheet (variant="drawer" side="bottom", or mobile="sheet" on phones) can be swiped down to close, as long as the backdrop may close it too (close-on-backdrop, without disable-close). It follows the finger and closes past a third of its height or on a flick, and springs back otherwise; a list scrolled down inside it scrolls back up first. A small handle at the top shows it can be dragged. The panel that slides carries a new data-modal-sheet hook.
• pagination (drawer, and the table's page sheet): the page sheet swipes down to close the same way, with the same handle.
• tooltip, tooltip-cursor: on a touch screen, a tap shows the tooltip on something a tap does nothing else to (plain text, an icon, a chart's bar), and the next tap anywhere hides it. On a button or a link the tap is still the button's or link's own. The cursor tooltip shows beside the finger.
• All widgets (base.css): tap-target and tap-target-y utilities. On a touch screen they make a small control take taps from at least 44px around it without drawing it any bigger: both ways for a control on its own, only in height for one in a row, where growing sideways would take its neighbour's taps. Mice and trackpads keep the drawn size.
• radio: variant="segmented" lays the options out as one track with the chosen one raised in it, for two to four short choices, like the tabs' segmented look. It's still a radio group: the arrow keys move the choice, it submits with the form, and wire:model, required, disabled options and errors work as before. Without variant, radios look as they did.
• field: visibleArea() and placeBeside() exports: the part of the window not covered by an on-screen keyboard, and where a popover goes beside its field within it, its scrolling part cut down to fit when neither side has room for all of it.
• color-picker: a new form control, <x-widget.color-picker>: a hex box that submits #rrggbb, the browser's own colour picker beside it (custom), and optional swatches as a radio group named for screen readers. A preview shows the colour with black or white text, whichever reads better. #ABC tidies to #aabbcc, and text that isn't a colour goes back to the last one, saying why. Works with wire:model.
• command: a new widget, a command palette. <x-widget.command> with <x-widget.command.group>s and <x-widget.command.item>s: Ctrl+K (Cmd+K on a Mac), its button or any data-command-open element opens a search box over the page that finds pages and actions as you type, by label or keywords, every word in any order. Up and Down move through it while focus stays in the box; Enter or a click opens an item's href, or clicks it, so wire:click works. suggest-url adds your app's results with the same answer the search widget's suggestions take; recent keeps the last five pages chosen, in this browser only. command-open and command-close events from Livewire.
• icon: 40 more icons, drawn in the set's own style. App and admin: archive, bell-off, chart-bar, database, folder, key, layout-dashboard, log-in, printer, user-plus. Commerce and money: banknote, coins, gift, package, percent, receipt, shopping-bag, shopping-cart, store, truck. Editing and files: clipboard, file-text, folder-open, grip-vertical, list, paperclip, redo, save, scissors, undo. Communication and media: at-sign, camera, headphones, megaphone, message-circle, mic, music, rss, thumbs-up, video. Any other icon still comes from Blade Icons when the app has it.
• popover: a new widget, <x-widget.popover>: a panel of anything beside a button (a note, a short form, a profile card, links), as a non-modal dialog on the native popover, so a table or a modal never clips it. It flips above when there's no room below; focus moves into it as it opens and back to the button as it closes; Esc, a click outside, Tab past its end or a data-popover-close button closes it. The trigger is text, an icon or your own markup; title, width and align set the rest. popover.open(), close() and toggle() from scripts, and popover-open / popover-close events from Livewire.
• slider: a new form control, <x-widget.slider>. One thumb is the native range input, restyled, keeping its keyboard and screen reader support; range puts two thumbs on one track for a span such as a price range, each a role="slider" that stops at the other, moved by the arrow keys, Page Up and Down, Home and End, dragging, or a press on the track. min, max and step, and a prefix or suffix on the value shown under the label and read out per thumb, in the page's number format. Range values submit as name[] and bind with wire:model (price.0, price.1). Right to left fills from the right. base.css gets two @source inline() ranges for where the fill starts.
• tags: a new form control, <x-widget.tags>: free-text tags in a field. Enter or a comma adds what's typed, a pasted list adds each item, leaving the box keeps what's left in it, Backspace removes the last tag and each tag has its own remove button. suggestions offers the browser's own list, max caps how many, the same tag in another case isn't added twice, and a screen reader hears each change. Submits as name[] and works with wire:model.
• tree: a new widget, <x-widget.tree> with <x-widget.tree.item>s: nodes that open and close, as an ARIA tree. Four looks: list (compact rows under indent guides, like a file explorer), cards (each node a card joined to its children by lines, like a referral network), org (top-down, like an org chart) and checkbox (ticking a parent ticks everything under it, a dash when only some is; the ticked values submit as name[] and bind with wire:model). A node with children-url fetches its children from your app as HTML the first time it opens, with a spinner meanwhile and a retry if it fails. The arrow keys move through it, Right and Left following the reading direction; a letter jumps to the next node starting with it. Nodes take a label, meta, an icon, an href and a details slot. Cards and org charts scroll sideways inside themselves. Its lines and indent are in base.css, from CSS variables you can set on one tree's class: --tree-line (colour), --tree-indent and --tree-gap. Each node renders only its tree's look, about 1.1 KB of HTML.

Changed

• modal, alert, toast, datepicker, date-range-picker: close buttons and the month arrows take taps from 44px around them on touch screens (tap-target). password, number, captcha, file-upload, select (clear), pagination (page numbers and arrows): the same, in height only (tap-target-y). Nothing looks different, and with a mouse nothing changes.
• price-roll: the change badge drops to the next line when a large price and its badge are wider than the screen, instead of running off a phone's edge.
• pagination (jump): the on-screen keyboard's return key reads Go.

Fixed

• modal, toast, pagination: in a page drawn under the notch and home indicator (viewport-fit=cover, as in NativePHP and home-screen web apps), drawers, full-screen dialogs, bottom sheets and toasts keep their content and close buttons clear of them. Ordinary pages look exactly as before: the extra space is env(safe-area-inset-*), which is 0 there.
• search, select, phone, datepicker, date-range-picker, time-picker: a list or calendar opened with the on-screen keyboard up no longer opens under it. It goes above the field when the keyboard leaves no room below, and moves back when the keyboard closes. Where neither side has room for the whole list (search, select, phone, time-picker's list), it takes the roomier side and scrolls in what's left, instead of running under the keyboard or off the screen.