v0.4.0

Upgrading with a coding agent? Point it at the LLM upgrade notes.

Breaking

• 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 and docs

• 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 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.

v0.3.0

Upgrading with a coding agent? Point it at the LLM upgrade notes.

Breaking

• The default theme is redesigned. Surfaces are white plates on a grey stage, every neutral is derived from the foreground color, every control shares one radius, and filled buttons are lit. Explicit themes keep their colors, and every theme picks up the new shapes and motion.
• The default fonts are Inter Tight and Geist Mono instead of Manrope and JetBrains Mono. ui.css imports them from @fontsource/inter-tight and @fontsource/geist-mono, and the package no longer depends on the old two.
• Text weight stops at 500. font-semibold and font-bold resolve to 500, and --font-weight-header is 500. Build hierarchy from size and color, or set --font-weight-semibold and --font-weight-bold back to 600 and 700.
• --color-border, --color-border-strong, and --color-input are translucent mixes of the foreground instead of opaque greys. A theme that sets foundation.border keeps its own color.
• Two-layer surfaces swap their layers. The frame is now the card color and the inner surface is the page background, so content in an inset Card, a Dialog, a CodeBlock, or a Composer sits on the recessed stage color with white fields on top.
• The default edge highlight is 33% instead of 50%. Borders stay single and cards and menus stay without shadows, as before.
• The radius scale changes. --radius-xl is 18px instead of 20px, plates use the new --radius-2xl (26px), and controls use the new --radius-control: 4px in the sharp scale, 12px in the default scale, and a pill in the rounded scale. Buttons were 14px before.
• Primary, secondary, and destructive buttons are lit like glow. Outline is flat: a hairline on the field color with no inset shading.
• The primary button's text is dark on the default brand in light mode as well as dark, so it passes contrast. --color-on-primary is #21151e in both.
• Text fields, native selects, select and combobox triggers, and number fields take --radius-control like buttons. Textarea and TagInput use --radius-xl.
• The focus ring is 3px at half the primary color instead of 2px at 80%.
• Menus, selects, and popovers spring open in 220ms from their trigger's side and close on a 100ms fade. Dialogs pop from 96% scale in 400ms and leave in 150ms. The blur on both is gone. --motion-duration-panel-in, --motion-duration-modal-in, and the menu and modal offset tokens have new defaults.
• ToggleGroup sits in a segmented track, so it is two spacing units taller and wider. Its selected item is a lit fill that glides between items.
• Table's default variant has no outer frame or header fill. variant="inset" and DataTable put the header and footer on the frame and the rows on a recessed surface.
• Alert is one notice strip. Status variants tint the icon only, with no colored fill or border.
• ScrollArea no longer shows chevrons at an edge with more content. showCues fades the edge instead, and the thumb stays hidden until hover, focus, or scroll.
• Composer is a recessed frame holding a white writing surface. Its focus ring shows only while the textarea is focused.
• The default Toolbar paints a grey track behind its keys.
• Badges take --radius-control instead of a pill, and status variants have no colored border.
• Tag Input renders its tags as secondary badges instead of outline badges.
• The Checkbox card row (variant="card", formerly primary) no longer tints with the primary color.
• Collapsible content is muted and inset to line up with its trigger text.
• Breadcrumb items are padded, so the trail's text starts one item padding further in.
• Tooltips reposition instantly when the pointer moves to the next trigger instead of gliding there.
• Switch thumbs no longer stretch while pressed.
• Calendar, RangeCalendar, DatePicker, DateRangePicker, and OTPField parts expose their DOM node as bind:element, like every other component. bind:ref on those parts no longer works. HugeiconsIcon's ref prop is element too.
• The exported PopoverState type loses focusedInside, trigger, focusedElement, onclick, and hovering. Nothing read them.
• closeMenuLayers is no longer exported from @mielui/svelte/utils. No component used it.
• The internal overlay module no longer exports useOverlay, OverlayOptions, or parentOverlayDepth. Dialog and Sheet stopped using them when Bits UI took over focus and dismissal.
• Tabs, CodeBlock, FileDiff, and the labels of every family share state under private keys. Code that read them with getContext('tabs') or a similar string key gets undefined.
• Button takes a labels object (ButtonLabels) instead of loadingLabel, successLabel, and errorLabel. Menu items, select and combobox options, dialog buttons, Form.Submit, and other parts built on Button follow.
• CopyButton takes labels instead of label and copiedLabel. CodeBlock.Copy drops both props and reads copy and copied from the labels on CodeBlock.
• ShowMore takes labels (more, less, region) instead of moreLabel, lessLabel, and label.
• Command.Content drops label. Name the palette with labels.palette on Command.Root.
• TaskSteps takes labels instead of label. The same object translates the summary sentence.
• FolderCard.Count drops unit. Set the count text with labels.count on FolderCard.Root, which now says "1 file" for one.
• DataTable's labels.rows and labels.selected return the whole phrase and receive the counts, so a translation can place the number. selected also receives the total.
• Composer.Root drops errorMessage, and Composer.Submit drops label, queueLabel, stopLabel, and loadingLabel. Pass labels to Composer.Root instead.
• Question.Root drops errorMessage, and Question.Submit drops label and loadingLabel. Use labels.submitError, labels.submit, and labels.submitting on Question.Root.
• Conversation.ScrollButton drops label. Pass labels to Conversation.Root instead.
• Reasoning's labels.thought applies only without a duration. With a duration, labels.thoughtFor sets the whole status line.
• AccordionContext, AlertDialogState, CollapsibleState, ContextMenuCheckboxItemState, TabsState, and ToggleGroupContext are no longer exported.
• ContextMenu.Item and DropdownMenu.Item accept only variant="destructive". Menu rows no longer accept size or unstyled, which they ignored.
• DropdownMenu.SubTrigger no longer accepts Button props it ignored, such as icon, variant, size, and unstyled.
• Select.Trigger no longer accepts icon, Select.Item no longer accepts unstyled, Select.Value accepts only placeholder and class, and Slider no longer accepts children. None of them were used.
• DatePicker.Root renders a wrapping div so it can expose bind:element.
• Dialog and Alert Dialog no longer accept orientation, and DialogOrientation is no longer exported. size on Content is now the only width control, and it accepts a new xs step.
• Popover and Combobox no longer accept stateKey or state_key, and Dialog.Content no longer accepts role, contentClass, or panelIdPrefix. Combobox Content no longer accepts focusTrap, which it ignored.
• Select.Item and Combobox.Item no longer accept variant, size, or unstyled, which they ignored.
• TagInput's requiredMessage is replaced by labels.required.
• AlertDialog.Exit is renamed AlertDialog.Close, matching Dialog.
• Sheet.Header takes showClose in place of close, matching Dialog.Content.
• TagInput takes invalid and issues in place of error, matching Field.Root.
• Hover Card takes placement on Root in place of side and align on Content, and delay in place of openDelay, matching Popover and Tooltip.
• Checkbox's variant="primary" is renamed variant="card".
• Spinner's curved is renamed eased.

Features

• Composer has a Footer part: a strip on the frame under the writing surface for hints, connected apps, or message-wide settings.
• Button has a glow variant: a lit fill for a page's headline action, with --mielui-glow-color and --mielui-glow-light to change its color and brightness.
• ui.css ships four class contracts: mielui-plate for a resting surface, mielui-float-frame for a floating panel, mielui-glow for the lit fill of filled actions, and mielui-glow-neutral for the white selected fill on a track.
• --color-wash is the one hover and selected-row fill.
• --mielui-glow-ring sets the outer edge of a lit control.
• Four spring curves are theme tokens: --ease-spring-panel, --ease-spring-layout, --ease-spring-pop, and --ease-spring-flick, with --motion-duration-spring, --motion-duration-pop, and --motion-duration-flick. springEase in @mielui/svelte/transition builds the same curves for Svelte transitions.
• Plates and frames use continuous-curvature corners where the browser supports corner-shape: squircle.
• The theme's edge highlight now scales the light on every lit control.
• Tabs, ToggleGroup, Toggle, and Pagination mark selection with a lit fill. Tabs and ToggleGroup indicators glide between items.
• Switch and Slider thumbs, the checked Checkbox and Radio, and the selected Calendar day are lit.
• DropdownMenu.Item and ContextMenu.Item render variant="destructive" as an error-colored row with a tinted highlight. Radio items show a dot.
• A direct button or link inside Alert becomes its one action, at the end on wide layouts and last when stacked.
• SkeletonSwap lines sweep out of phase, and arriving content sharpens from a slight blur.
• Composer's send button becomes a lit stop control while streaming.
• Reasoning's label shimmers while thinking.
• Chart, pie, and heatmap tooltips and the crosshair follow the pointer on the layout spring.
• Calendar days take the control radius with a dot under today, and...

v0.2.1

Breaking

• 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 and docs

See the full notes at https://ui.miel.my/docs/changelog, including the agent notes for upgrading.

npm install @mielui/svelte@0.2.1

v0.2.0

Breaking

• 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 and docs

See the full notes at https://ui.miel.my/docs/changelog, including the agent notes for upgrading.

npm install @mielui/svelte@0.2.0

v0.1.1

Mielui v0.1.1 adds forms, date controls, data tables, charts, file uploads, and Notch notifications. It also fixes keyboard navigation, overlay focus, interrupted animations, and state handling across the library.

New in this release:

• Field, Fieldset, and Form components with accessible errors and SvelteKit remote-form examples.
• Calendar, Range Calendar, Date Picker, Date Range Picker, Number Field, and OTP Field.
• Data Table with sorting, filtering, row selection, and pagination.
• Bar, line, area, mixed, pie, and donut charts, plus composable Heatmap and Gauge loading and empty states.
• File Upload with validation, progress, cancellation, and retries.
• Notch activities and notifications with peek mode, detached actions, and swipe dismissal.
• Multiple selection in Select and Combobox, range sliders, and keyboard navigation in Toolbar.
• Morph, Shimmer, and Number shuffle actions.
• Theme Studio preset exports that work with mielui init --preset and mielui add theme.

The interaction fixes cover nested dialog focus and dismissal, submenu Escape handling, tab selection after removal or disabling, and toast timers during keyboard interaction. Async controls preserve drafts and ignore obsolete completions. Motion respects reduced-motion preferences and disabled theme animation settings.

Docs now include searchable component catalogs, prop tables for exported parts, manual installation instructions, and more working examples. The CLI honors the consumer’s package manager and retains license and attribution notices when copying source.

If you’re upgrading from an earlier checkout, review these changes:

• Svelte 5.56 or newer is required.
• Modal is now Dialog, including its imports, types, and CLI command.
• Shortcut is now Kbd.
• Standalone Toast usage moves to Toast.Root and its composable parts. Toast progress bars are removed.
• Fullscreen Nav is removed. Use Sheet with navigation links.
• Reorder List dragging starts from its handle.
• Alert announcements are opt-in, and Breadcrumb current-page state must be explicit.
• Card titles default to level-two headings. Gauge defaults to 120px; set its size explicitly for compact layouts.
• Mode-specific values and element attributes have stricter types.

Install the package:

npm install @mielui/svelte@0.1.1

Documentation · Detailed migration notes