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

## Breaking changes

- Default to single borders, bottom inset strips, glass surfaces, half-strength edge highlights, and primary button borders, with surface shadows off and control and dialog shadows on.
- Use rounder default corners: 8, 10, 14, and 20px.
- Large controls are taller than medium ones, and icon buttons now match the medium button height.
- Menus, selects, comboboxes, popovers, hover cards, date-picker panels, and chart tooltips always use a single border, regardless of the border setting.
- Text fields, selection triggers, checkboxes, and radios are flat, with a hairline border and no embossed edge.
- Sheet and Drawer footers sit on the frame below the content in one row, with a ghost Close at the start; Sheet.Close defaults to ghost.
- Chart category inspection is one tab stop: arrow keys, Home, and End move between categories instead of Tab.
- Switch has one bindable state prop, `checked`. Replace `bind:switched` and `switched` with `bind:checked` and `checked`; the `SwitchState` type is removed.
- Toggle accepts `variant="outline"` only. Replace `variant="outlined"`.

## Features

- Add FolderCard, a folder-shaped card with a tinted or image cover, a title tab, an index, and an animated file count.
- Add Composer.Header for content above the input, and a chip variant for Attachment.List and Attachment.Item that shows files as compact pills with file-type icons or image thumbnails.
- Add an optional inset DataTable layout with compact filters and shared pagination inside the frame.
- Add an opt-in depth toolbar variant with raised keys and recessed selections; the default remains flat.
- Add `surface` to Drawer.Content, with the shared frame kept flush on the edge the drawer opens from.
- Add the Daydream preset with flat sage-gray cards, soft pink controls, and pastel chart colors in light and dark modes.
- Choose single or double borders across framed surfaces, including cards, dialogs, Notch, and Toast in themes and Studio.
- Choose the top or bottom position of inset strips, with local overrides for fixed headers.
- Customize five pastel chart colors in Studio; chart demos and default series share the same palette, with pink in Chart 2 and blue in Chart 3.
- Use number shuffle for changing numeric readouts in tables, charts, uploads, commands, Studio, and interactive examples.
- Organize Studio appearance and interaction settings, with toggle buttons for value choices and a compact Advanced colors action in the Color header.
- Preview glass against a colored Studio backdrop, with dropdown, popover, and hover-card examples.
- Use the theme storage helpers in `@mielui/svelte/themes/live` without SvelteKit; `@sveltejs/kit` is now an optional peer dependency.
- Translate or reword built-in text with an optional `labels` prop on Combobox, TagInput, FileUpload, DatePicker, DateRangePicker, Pagination, DataTable, ReorderList, FileDiff, CodeBlock, Markdown, Attachment, Tool, Reasoning, Message, Chart, PieChart, and Heatmap. Each exports a `<Name>Labels` type; English stays the default.
- Set `size` on ToggleGroup.Root to `sm`, `md`, or `lg`. Every item inherits it; the default stays `sm`.
- Render custom content in Combobox.Item by passing children; `label` still drives search and the trigger text.

## Fixes

- Keep toasts clickable and announced while a Dialog, Sheet, or Popover is open.
- Stop `Kbd shortcut="enter"` and `shortcut="space"` from taking the key away from a focused button, link, or menu item, so Enter on a focused Cancel no longer confirms.
- Fire Alt shortcuts in Kbd on macOS.
- Restore Checkbox and RadioGroup to their initial value when their form is reset.
- Show Button success and error status colors on every variant.
- Limit tall popovers to the viewport.
- Keep line breaks while ResponseStream is streaming, and expose its text to screen readers as text instead of an image.
- Wrap completed ResponseStream text on whole words.
- Let a deliberate upward scroll pause Conversation auto-follow, even close to the bottom.
- Stop Composer from submitting again on Enter while `status="submitting"`.
- Let text be dragged into fields inside Attachment.Root; only file drops are intercepted.
- Move Command arrow keys through filtered results in the order they are shown.
- Stack AlertDialog and Command correctly above a Dialog, with one scrim and the parent hidden from assistive technology.
- Apply the trigger-width minimum to DropdownMenu panels.
- Keep the Toast close button clear of its actions when the inset strip is on top.
- Give Tabs unique trigger and panel IDs for values that differ only by case, punctuation, or non-Latin characters.
- Wrap Pagination instead of overflowing narrow containers.
- Keep code clear of the CodeBlock overlay copy button.
- Show one focus ring in TagInput and NumberField: on the field while typing, on the tag or stepper otherwise.
- Align NumberField, TagInput, NativeSelect, and date picker triggers to the same height as Input.
- Mark invalid Checkbox and RadioGroup controls with an error border.
- Use one disabled opacity across Checkbox, RadioGroup, Switch, Slider, and Combobox, and stop a disabled Field from dimming its control twice.
- Respect a custom `aria-labelledby` on Select.Trigger.
- Give the primary Checkbox card a visible border when unchecked.
- Announce FileUpload status changes without reading every progress percentage.
- Keep a DataTable facet's operator when its value is cleared.
- Reject invalid characters visibly in the ColorPicker hex field, and include the current color in the trigger's accessible name.
- Show initially expanded ShowMore content in full before its first measurement.
- Name both line numbers correctly for screen readers in FileDiff rows.
- Expose the Spinner label to assistive technology.
- Keep the Table caption clear of the scroll area's rounded corner.
- Render Gauge when `strokeWidth` is at least half its size, and use the header weight for its value.
- Keep the Heatmap entrance from replaying when data changes, keep arrow keys in place at grid edges, and say "1 contribution".
- Animate PieChart slice dimming and use the shared focus ring on its legend.
- Mirror chevrons and use logical alignment in right-to-left layouts for menus, Tabs, Command, Breadcrumb, Pagination, Select, CodeBlock, Markdown tables, and ReorderList.
- Raise the Drawer handle contrast.
- Extend menu and Command separators across the full inner panel width, including submenus.
- Keep glass tooltips high contrast by retaining the solid tooltip colors with a hairline edge.
- Share one single-border tooltip surface across chart, pie, and heatmap tooltips, keep pie tooltips off the inspected slice, and follow the pointer without a trailing animation.
- Soften live chart highlights, add quiet intervals, and suppress them while inspecting values.
- Preserve continuous single-border outlines on tables and preview/code cards.
- Keep glass inset panels visually distinct while allowing backdrop colors through, and keep inset panels white in light glass mode.
- Align the Native Select chevron with other selection controls without a duplicate native arrow.
- Retain structural inset gutters on data tables, composers, toasts, and code/preview panels in single-border mode.
- Soften the dark glass composer input tint so backdrop color stays visible without a heavy grey fill.
- Preserve custom accessible labels on numbered data-table pagination.
- Avoid duration-formatting errors for tool status values with excessive decimal precision.
- Keep file diff signs attached to their animated counts, and keep filenames and change counts above the patch when the theme uses bottom inset strips.
- Show visible square boxes for unchecked checkboxes and radios in both themes.
- Align menu item labels and icons to the start instead of spreading them across the row.
- Highlight only one row at a time in Select.
- Make status text in badges, alerts, toasts, and forms meet text contrast in light mode.
- Make keyboard focus rings clearly visible in both themes.
- Separate dark-mode frames from their inner surfaces and give dark floating panels visible shadows.
- Keep Switch thumbs light in both themes so the off state is clear against the track.
- Show CodeBlock code when it is composed without tab triggers.
- Place Toast titles above their descriptions in the content area, with only actions in the footer.
- Render Fieldset legends and form section titles semibold, above field labels.
- Show muted placeholder text in empty DatePicker and DateRangePicker segments.
- Make pending TaskSteps labels and Markdown links meet text contrast.
- Share one close button across Dialog, Sheet, and Notch, aligned with the title.
- Use the 16px header size for AlertDialog, Sheet, Drawer, and Popover titles.
- Use the shared frame inset in Sheet and Notch.
- Give Reasoning, Tool, Accordion, and Collapsible one row style with a hover fill, rounded focus ring, and trailing chevron.
- Show failed tools with an alert icon and text, and keep tool names in the foreground color.
- Use the shared square checkbox and round radio in Question, with one error message and edge.
- Make the user message bubble visible in dark mode and use the body weight for message and streamed text.
- Remove the Conversation empty-state icon tile and keep the scroll button visible in dark mode.
- Use the primary color for Gauge `tone="primary"`.
- Remove heatmap cell outlines and raise chart axis and heatmap labels to 12px.
- Give every Badge variant the same compact pill height with a hairline border.
- Show the Alert icon and title above the description on one surface.
- Make H3 and Lead text one step larger than H4 and supporting text.
- Keep the selected segmented tab lighter than its track in dark mode.
- Remove faint column seams in inset Table and DataTable.
- Round the range calendar band at week edges and make it visible in dark mode.
- Render Breadcrumb as an ordered list with a rounded keyboard focus ring on its links.
- Size Tabs triggers and Toggle controls with the shared control heights, and show a focus ring on focused tab panels.
- Match the CodeBlock copy button to its tab height, remove the dark-mode ring around its tabs, and label trigger-less code panels as regions.
- Use the shared focus ring on Table scroll areas and remove the last-row border notch from row headers.
- Keep Combobox text clear of its chevron and match the chevron size to Select.
- Flatten the ColorPicker trigger and show preset names in the interface font.
- Give the Functional theme preset its own description.
- Keep generated dark-theme shadows consistent with the built-in stylesheet and respect reduced motion when heatmap tooltips move.
- Tighten menu highlight corners to fit their panel.
- Float Composer attachment chips above the frame, slim the bottom action strip, and shorten the initial input height while retaining automatic growth.
- Compact data-table filter popovers with denser option rows, smaller editor controls, and widths suited to each filter type.
- Remove gaps around edge-attached notch previews and the border along their attached edge.
- Preserve preset colors, typography, and token overrides when selecting or exporting a theme in Studio.
- Update vulnerable transitive dependencies.
- Style the Calendar month and year selects like other selection controls instead of showing the browser's native select.
- Name the single-date DatePicker panel "Choose date" instead of "Choose dates".
- Accept `aria-label` and `aria-labelledby` in the RadioGroup.Root, ToggleGroup.Root, and Select.Trigger prop types.

## Docs

- Redesign the landing page with a hero tinted by the active primary color, live component previews in the shared inset frame, and responsive navigation.
- Give Docs and Studio one shell: a black outer canvas, a rounded page frame holding the header and footer, nonmodal glass navigation and inspector panels that dock when pinned, and the page outline in the right column.
- Start with navigation closed on phones and tablets, show the current page name in the phone header, and scroll the sidebar to the current page.
- Remember pinned Docs and Studio sidebars independently across visits.
- Use the Breadcrumb component in the documentation header, with one control height, flat ghost actions, and 16px icons across header and footer.
- Open search in the standard Command palette, and include the Actions overview in search and page-to-page navigation.
- Show copying, copied, and failed states on Copy page without changing its size.
- Add a brief pixel reveal when moving between Home, Docs, and Studio, with reduced-motion support and interruptible navigation.
- Show pnpm, npm, Yarn, and Bun tabs for every install command in the guides.
- Replace manual-install file tabs with a searchable file picker and one code block with copy.
- Keep example source on the preview card surface, and size preview toolbar controls to the small control height.
- Stack each prop above its type in API tables on narrow screens, and keep long prop names on one line on wide ones.
- Give every component and action page the same spacing under its leading preview.
- Use the package import path, `@mielui/svelte/components/<name>`, in every usage snippet.
- Fix missing and extra spaces around inline code and links across the guides and component pages.
- Expand the introduction with a setup comparison, complete package quick start, and guidance for theming and component exploration.
- Say in the installation guide that the Mielui stylesheet already includes Tailwind.
- Update the Theming guide with current presets, the default chart palette, single-border floating panels, and the control, focus, and status-text tokens.
- Add an Actions overview and prop tables for Morph and Number shuffle.
- Render real components in catalog previews, add FolderCard to the catalog, and give each card one link.
- Show color swatches and a font sample for each theme, with details in the standard Dialog.
- Group the fonts page by category and mark the selected font with a check.
- Use one flat segmented control for Studio settings, with shared heights and labels across the inspector.
- Replace full-width gray bars in Studio's Charts and AI previews with section headings, and combine the App preview into one app header.
- Give Studio invoice notifications a separate action strip with a working View invoice action.
- Simplify documentation error pages and hide Copy page and page metadata when content cannot load.
- Give every page one title, add social-card titles and descriptions to the landing page, and refresh the social card image.
- Emit the production origin in the sitemap, `llms.txt`, and the Markdown guides.
- Load web fonts with preconnect instead of chained stylesheet imports.
- Align the agent skill's design guidance with the 0.2.0 defaults for glass surfaces, flat fields, and Toast layout.
- Document milestone-based releases spanning multiple feature and fix pull requests.
- Refresh the README screenshot to show the redesigned homepage.
- Add a Labels section to every component page that has built-in text, a sizes example for ToggleGroup, and custom item content for Combobox.