Skip to content

v0.2.0

Choose a tag to compare

View all tags
@mielsense mielsense released this 05 Oct 21:59
· 19 commits to main since this release
v0.2.0
891d7be
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

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
Assets 2
Loading