# @mielui/svelte 0.2.1 changelog

This document aggregates the release notes for this version. Review it before integrating or upgrading Mielui.

Large changes for this release have an LLM context page at [/changelog/0.2.1/llm.md](/changelog/0.2.1/llm.md).

## Breaking changes

- `Composer.Toolbar` renames and swaps its two looks. `variant` is now `'default' | 'inset'` and `chrome` is gone. The default joins the toolbar to the input on one surface. `variant="inset"` puts the input on its own inset surface with the toolbar in the frame under it, like an inset Card. To keep the look you had, add `variant="inset"` where you set nothing or `chrome`, and remove it where you set `inset`.
- `DataTable.ColumnHeader` sorts on click instead of opening a menu. Each click moves to the next state: ascending, descending, then unsorted. Shift-click adds the column to a multi-column sort. Three new optional labels cover its tooltips: `sortAscending`, `sortDescending` and `clearSorting`.
- Data Table's inset variant frames only the table and its footer. `DataTable.Toolbar` now floats above the frame instead of sitting inside it.
- `DropdownMenu.Item`, `ContextMenu.Item`, `ContextMenu.CheckboxItem`, `Select.Item` and `Combobox.Item` no longer accept `href`. These rows always rendered a button and ignored it. Navigate from `callback` instead.
- Surfaces are solid by default. Menus, dialogs, popovers, toasts and the Composer were frosted glass unless a theme said otherwise. To get glass back, set `--mielui-surface: glass` on `:root`, turn it on in Theme Studio, or pass `surface="glass"` to one component. Built-in presets that do not set a surface are solid now too.
- The default theme's font is Manrope instead of Inter. `ui.css` now imports `@fontsource/manrope`, and the package no longer depends on `@fontsource/inter`. To keep Inter, install `@fontsource/inter`, import its CSS, and set `--font-sans: 'Inter', sans-serif`.

## Features

- Card accepts `surface="glass"`, which frosts the card frame so a backdrop shows through while the content stays on a solid surface.
- Slider accepts `variant="field"`, a bar with the label and value inside that you drag anywhere to scrub, and `format` to control how the value reads.
- Slider's field variant takes `editable`, so people can click the value or press Enter and type an exact number, with `parse` for custom formats.
- Slider reports finished changes through `onValueCommit`, once per drag and after each keyboard or typed change.
- Hold Shift with an arrow key to move a Slider ten steps.
- Folder Card takes `onclick` without `href` to make the whole card a button, named by its title, with `disabled` to block it.
- Label takes `required` to show a required mark after its text. Input and Textarea show the same mark on their built-in label when they are required, and `Field.Label` shows it when `Field.Root` is required.
- `HoverCard.Content` accepts `sideOffset` to set the gap between the trigger and the card.
- Color Picker shows a pipette button that picks a color from anywhere on screen, in browsers with the EyeDropper API.
- Press 1 to 9 inside a Question to pick that option. Each option shows its number key.
- Add seven built-in theme presets: Honey, Forest, Ink, Ocean, Console, Ember, and Lilac.
- Add five theme presets from Sivir UI: Profitable, Raven, Clawd, Inspiration, and Government.
- Rework the Magic preset with cool gray surfaces and a brighter indigo, and the Bitsy preset with a coral accent on cream surfaces.
- Make the Open preset neutral monochrome with Geist Mono, and darken the Functional preset's text for contrast.
- Group the Studio settings into Color, Type, Shape, Surface, and Motion tabs.
- Show every Studio token inline as a row in place of the Advanced dialogs. Numeric settings are scrub fields you can drag or type into.
- Undo and redo any Studio edit, preset switch or reset from the top bar or with Cmd/Ctrl+Z and Shift+Cmd/Ctrl+Z.
- Click any element in the Studio preview to edit the tokens it uses, in a panel anchored to it.
- Export a Studio theme from a side sheet with CSS, JSON and CLI tabs.
- Copy a share link from the Studio that opens your theme for someone else.
- Reset a single Studio setting to the preset with the button that appears beside its label once it changes.
- Studio drafts take the name of the preset they start from.

## Fixes

- Drawer floats a small gap from the edge it opens from, with all corners rounded. Top and bottom drawers are centered at a readable width instead of spanning the viewport; `class` on `Drawer.Content` sizes the panel.
- Drawer footer actions line up with the panel's content instead of drifting past it.
- Opening a Drawer focuses the panel instead of its first control, so no control looks selected and touch keyboards stay closed. Use `onOpenAutoFocus` to focus something else.
- `Drawer.Handle` sits at the bottom of a top drawer and becomes a vertical bar on the inner edge of left and right drawers.
- Drawer no longer flashes back into view for a frame as it closes, and neither does its backdrop.
- Data Table, Composer, Toast and Code Block follow the single or double border setting. They kept a gutter in single mode before.
- Scroll Area contains overscroll only when its content overflows. An area with nothing to scroll no longer swallows the wheel, which also fixes a short Conversation blocking page scroll.
- Card no longer doubles the gap when a Footer follows a Header directly, and a Header that ends a card has no trailing margin.
- Glass cards frost dark in dark mode, where they used a pale white veil.
- Keep the divider between grouped controls visible after one of them is clicked. A focused control now rises above its neighbors only while its focus ring shows.
- Switch and Radio Group items without a description center inside their touch-height box on small screens. They sat at the top of it, out of line with neighboring controls.
- Radio Group leaves more room between options, so each description sits closer to its own label than to the next option.
- Composer's toolbar and send button use the small control size, so the strip under the input is shorter.
- Stop descenders such as g and p being cut off in Select triggers, in truncated text inside buttons, and in truncated menu, select, combobox and command rows.
- Classes passed to `Command.Header` now override its default padding and text color.
- Keep the Command search row at its full height when the results are long.
- Color Picker no longer outlines its color area when opened with the mouse. The focus ring shows for keyboard focus only.
- File Diff rows no longer draw a red or green bar on their leading edge; the tint and the plus or minus sign mark the change.
- File Diff added and removed rows keep their full tint in dark mode.
- Number Field steppers use minus and plus icons instead of text glyphs. Source-copy installs now need `@hugeicons/core-free-icons`.
- Opening Theme Studio no longer changes the default theme's colors. It applied its own defaults on top, which turned primary button text white and flattened input borders across the site.
- A theme applied on the Themes page stays applied when you open Theme Studio, which now opens on that theme. It used to put its old draft back.
- The default theme's primary button text is white in light mode and stays dark in dark mode. It was dark in both.

## Docs

- Redesign Docs and Studio as one app shell that fills the window: an icon rail, a collapsible sidebar and a full-width content column, divided by hairlines, with a slim status line under the content.
- Add page tabs to the docs top bar so several pages stay open at once. Each tab is as wide as its label and shows an icon for its component group or guide. Tabs persist across reloads, Cmd or Ctrl-click a sidebar link to open one in the background, and drag tabs or press Alt with an arrow key to reorder them.
- Show the package version, the install command for the current component, and previous and next links in the status line.
- Pin sidebar group labels while their group scrolls, mark pages that are open in another tab, and show the current page's position in the docs as a row of bars with the page count.
- Drag the edge of the docs or Studio sidebar to resize it. Each keeps its own width between visits, and a double click resets it.
- Redesign search as a compact palette with page icons, open tabs, and quick actions. It finds section headings and prop names, so "placement" or "closeDelay" lead to the right page.
- Show each page's breadcrumb, title, and summary at the top of the page. The top bar names the section you are reading and jumps back to its start.
- Give Blocks, AI components and Chart components their own catalog pages, like Inputs and the other component types.
- Fade and softly blur the edges of every scrolling region in Docs and Studio while more content lies beyond them.
- Open navigation and the Studio inspector in a sheet on small screens, and show Themes and Changelog without the docs sidebar.
- The docs site uses Manrope by default, matching the default theme.
- Add an Agent skill icon to the rail, under Changelog. The Agent skill page fills the panel without the docs sidebar.
- The changelog lists Docs notes last in each version. Every section is collapsible, and Docs starts collapsed.
- Rebuild the API reference as rows with each prop's name, type, description, and default, and describe every prop of every component.
- Explain every prop in prose on its component page, in 91 feature sections added to 62 pages, with 41 new live examples.
- Show each prop's description in the Markdown API tables used by Copy page and `llms.txt`.
- Move the copy button for example source into the preview's top bar, and keep links inside previews from leaving the page.
- Example previews, install commands, code blocks and API lists follow the theme's single or double border setting.
- Rewrite Card's examples as small realistic tasks: a project summary, notification settings, a revenue figure, an invitation, deploy details, a member list and a weekly digest.
- Add a Footer position section to the Card page, with a live example of `--mielui-inset-position` moving an inset card's footer to the top.
- Date Range Picker examples show the start field, end field and calendar button as separate controls. The two-month example no longer caps the range at 14 days, and length limits have their own example.
- Replace the single-element Avatar, Badge, and Toggle previews with small realistic examples, and add a Placement and timing section to the Hover Card page.
- Folder Card examples show paper sheets tucked into the folder that lift and fan out on hover and keyboard focus.
- Rewrite the Introduction, Installation, Agent skill, and Actions pages around label and value rows, and bring their Markdown versions in line.
- Show each component's summary under its catalog preview instead of behind a hover card.
- Add three live demos to the homepage under the hero: a coding agent workspace, a support chat, and an issue editor, each behind a tab.
- Rework the homepage hero preview: a composer with example prompts, notification settings, and a weekly visits chart with its total. It follows dark mode and keeps one height across tabs.
- Redesign the Themes page with a specimen of each preset's colors, type, and corners that follows light and dark mode.
- Add a search field to the Studio inspector that filters settings by name, and show each preset's brand color in the preset picker.
- Rebuild the Studio demos as composed cards in a centered grid. The AI tab shows the coding agent and chat demos, and the App preview is a sidebar app in one card.
- Simplify the Studio top bar: preview width and the glass backdrop sit behind one options button.
- In the Studio the top bar, the preview page and the sidebar share one background in both themes.