# @mielui/svelte 0.4.0 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.4.0/llm.md](/changelog/0.4.0/llm.md).

## Breaking changes

- The default theme is flat. Primary, secondary, and destructive buttons, switch and slider thumbs, checked checkboxes and radios, selected tabs, toggles, pagination pages, and calendar days take one solid fill held by a hairline, with no gradient, inner light, or drop shadow.
- `chrome.edgeHighlight` defaults to 0 instead of 0.33. Set it above 0 to light every filled control again; 0.33 restores the previous look.
- `chrome.controlShadows` defaults to off, so fields, outline buttons, keycaps, and toolbar keys are held by their hairline without an edge light or contact shadow.
- Flat filled controls change tone on hover at once and darken further on press, instead of fading in a light.
- The `glow` button variant stays lit in every theme, including flat ones. Add the new `mielui-glow-lit` class to light any other `.mielui-glow` control.
- The `glow` variant is now lit in Ink, Console, and Daydream, which set the edge highlight to 0.
- The Magic, Open, Functional, Honey, Forest, Ocean, Lilac, Profitable, Raven, Clawd, Inspiration, and Government presets now render flat. Bitsy and Ember keep their lit look.
- The `panel` button variant no longer carries a resting elevation.
- Tooltips wait 500ms for a resting pointer instead of 125ms. Keyboard focus opens them at once, and `delay` applies to the pointer only.
- The default radius scale is rounder: 10/12/16/20px, 28px plates and 14px controls, up from 8/10/14/18px, 26px and 12px. Pick the sharp scale or set the radius tokens to keep the old shape.
- The `glow` variant and `.mielui-glow-lit` light at 30% when the theme is flat, down from 33%.

## Features

- `@mielui/svelte` accepts SvelteKit 3 as a peer dependency, alongside SvelteKit 2. Mielui imports no SvelteKit runtime, so package installs work in either version.
- Source copied by the Mielui CLI still imports from `$lib/mielui`, which SvelteKit 3 no longer provides. In a SvelteKit 3 app, install the package or add a `$lib` alias until the CLI supports `#lib` imports.

## Fixes

- Fixed docs pages going partly or fully blank while scrolling the sidebar in Chrome. Pinned sidebar labels now fade without a blur.
- Component pages appear complete after an in-app link, so scrolling down quickly no longer reaches examples that are still loading.
- A docs page opened from an in-app link no longer flashes at the previous scroll position or jumps back to the top after scrolling starts.
- Scrolling the docs no longer restyles the whole page on every frame, so it stays smooth on long pages.
- An open docs tab picks up a new deploy on the next link instead of running the old version until a reload.
- Scrolling a docs page quickly in Chrome no longer leaves parts of it blank.
- The component catalog renders every preview with the page, so scrolling quickly no longer reaches empty cards that fill in afterwards.
- Hover colors on Button, Badge, table rows, calendar days, breadcrumbs, disclosure rows, and other hover-only controls change instantly instead of fading in.
- The press scale on buttons and menu items settles in 120ms instead of 160ms, and no longer delays hover colors.
- Closing a Sheet or Dialog while it opens, or reopening it while it closes, turns it around from where it is instead of jumping or snapping into place.
- Reopening a Popover, DropdownMenu, ContextMenu, HoverCard, or DatePicker while it closes turns it around from where it is instead of restarting its entrance.
- Clicking a DropdownMenu trigger while its menu closes reopens the menu instead of being swallowed.
- In light mode, checked Checkbox and Radio fills and the on Switch track are slightly darker, so the default brand color reaches 3:1 against the page.

## Docs

- Docs pages are prerendered and served as static files, so they no longer wait for a server render on a cold visit or after an in-app link.
- Docs pages load about a quarter less JavaScript up front. Search and notifications load once the page is idle, and Cmd/Ctrl+K still opens search right away.
- Google Fonts load only on Fonts, Theme Studio, and Themes, or when a saved font or theme uses them.
- The GitHub star count in the docs sidebar updates on each deploy.
- Docs sidebar links open on mouse press instead of release.
- The blurred fades at the page edges, under pinned sidebar labels, and under the catalog search row ease in instead of ending in a hard line.
- New homepage: a centered hero over a wall of live components that any built-in theme restyles in place, an index of every component group, side-by-side code and result for composed components, the live demos, and install steps.
- New docs layout: one borderless sidebar on the page color replaces the dark frame, icon rail, and panel.
- The sidebar holds the brand, GitHub, the theme toggle, and a search field at its top.
- Docs groups are marked with colored stickers in the sidebar, page headers, and previous and next links.
- Page headers show their group and a soft tint of its color instead of a breadcrumb.
- The docs, Themes, Fonts, and Theme Studio share the same sidebar, so the brand and search stay in one place.
- Theme Studio's settings moved to a panel on the right, so the docs sidebar stays on the left.
- Components, Theme Studio, Themes, and the Changelog are plain links at the top of the sidebar.
- The docs default to the system font; the font picker and live themes still change it.
- Moving between the homepage and the docs fades between pages and glides the logo, except under reduced motion.
- The docs use a near-black page with lighter cards in dark mode and a neutral grey page with white cards in light mode.
- The page outline at the right edge is larger and easier to hit.
- The tab dock at the bottom of docs pages is gone, along with Cmd/Ctrl-click to open a page in a background tab.
- The docs sidebar has a fixed width, and the article is centered on the window when there is room.
- Theme Studio's settings panel matches the sidebar: a sticker for the preset, sidebar-style group titles, and a slim export strip with the number of changes.
- Theme Studio opens on seven essential settings with no tabs. Every other setting sits under one All settings disclosure, grouped by tabs, and the settings search still finds all of them.
- The Studio preview tools and preview switch float as borderless clusters, like Copy page.
- The Themes page shows each theme as a tile with its specimen inside, a white Apply button, and a quieter Details button.
- The browser toolbar color follows the light or dark mode chosen on the site and any live theme, not only the system setting.
- Hover highlights in the docs sidebar, links, and page chrome appear instantly, and sidebar links give a slight press.
- A new Theme Studio draft starts on the default theme's fonts, so Font and Mono no longer show a reset button before anything changes.
- On phones, the docs navigation unfolds in place from a button named after the current page, and scrolls inside itself so part of the page stays in view.
- Opening Theme Studio without changing anything no longer replaces the site's colors and font on every page.
- The current page in the docs sidebar sits on a soft wash in the foreground color instead of a lit pill.
- Theme Studio's Edge highlight is off by default and turns on at 30%.
- The Form page shows how to enable remote functions in SvelteKit 3, in the `sveltekit()` plugin options in `vite.config.ts`.