# What's new

> What's new in AstrolUI for .NET 10: lighter and faster, notification and modal services, automatic mode, accessibility and migration guide.

Source page: https://doc.astrolui.com/whats-new

This release of **AstrolUI for .NET 10** is a full overhaul of **Astrol.Component.Basic** and its dependencies, focused on **performance**, **size**, **user experience** and **accessibility**. The **astrol-*** icon names do not change. Some changes break the previous API: the steps to migrate your projects are at the end of this page.

## 1. Lighter and faster

- **Global CSS**: from 220 KB in 4 chained files (with bootstrap) to **68 KB in a single file** (15 KB compressed).
- **interact.js** (126 KB) is no longer loaded: drag and resize are native and only downloaded when used.
- **Icons**: a **24 KB** core with the component icons and the most common ones; the rest (145 KB) is only downloaded when a page uses one.
- **On-demand JavaScript**: each component (modal, combo, editor…) loads its module only when it appears.
- **NuGet package** for Basic: from 1,921 KB to **347 KB**, now including the new components (tabs, checkbox, radio, dropdown, tooltip, alerts and badges). Details for each package in [Installation](/basic-component/installation).
- **Grid**: no longer copies the data or uses one component per cell. With 2,000 rows, re-rendering the page goes from 16 ms to **0.9 ms**, sorting from 476 ms to **47 ms** and filtering from 379 ms to **36 ms**.

## 2. New

- **IAstrolToast**: notifications from code (**Toast.Success("Saved")**), rendered by Blazor, pausing on hover and following the theme. [See Notification](/basic-component/notification).
- **IAstrolModal**: **await Modal.ConfirmAsync(...)** and **await Modal.ShowAsync<Component>(...)** with a result, without **@ref**. [See Confirm](/basic-component/confirm).
- **Automatic mode**: the theme follows the operating system light or dark mode and changes live; notifications and browser controls follow the theme too. [See Layout menu](/basic-component/layout-menu).
- **Grid**: typed **Field** and nested paths, **Format**, **Virtualize**, and column width is kept when paging. [See Grid](/basic-component/grid).
- **ComboBox**: **Display="p => p.Name"** and **@bind-Value**; opens upwards when there is no room and works inside grids and modals. [See ComboBox](/form/combo-box).
- **Modal** as a native **<dialog>**: always on top, Esc and focus handled by the browser.
- **Texts in the app language** (English or Spanish) and **AstrolText.Resolver** to translate into other languages.
- **GetColorContrast()**: picks the text color with the best contrast over a background.

```csharp
// Program.cs
builder.Services.AddAstrolBasic();

// Page or component
@inject IAstrolToast Toast
@inject IAstrolModal Modal

if (await Modal.ConfirmAsync("Are you sure?", "The item will be deleted."))
{
    await Delete(item);
    Toast.Success("Deleted");
}

var result = await Modal.ShowAsync<EditUser>("Edit", new Dictionary<string, object?> { ["Id"] = 5 });
if (!result.Cancelled) { var user = result.GetData<User>(); }
```

## 3. Accessibility and user experience

- Every control can be used with the **keyboard**: real buttons in modals, menu, paging, sortable headers and filters; the menu uses real links (Ctrl+click opens a new tab).
- **Visible focus** with the theme color when navigating with Tab.
- Screen reader labels (**aria-label**, **aria-sort**, **aria-expanded**, table roles, alerts).
- Respects the operating system **reduce motion** setting.
- **Security**: notifications and menu names are plain text by default (no HTML injection).

## 4. How to migrate a project

- **Program.cs**: replace **services.AddScoped<AstrolJSInterop>()** with **services.AddAstrolBasic()** (**using Astrol.Component.Basic;**).
- **index.html / _Host.cshtml**:
  - Remove **_content/Astrol.Component.Basic/js/interact.min.js** (if you use **Board**, change it to **_content/Astrol.Component.Board/js/interact.min.js**).
  - RichText paths move from **Astrol.Component.Basic** to **Astrol.Component.RichText**.
  - If your app uses **bootstrap** classes, reference bootstrap yourself.
  - Remove standalone links to **fontello.min.css** and **animation.min.css**: they are now inside **astrol-basic.min.css**.
- **Notifications with HTML**: they are now plain text. Replace **<br />** with **\n** or use **AllowHtml = true** with trusted content. Same for **MenuItem.Name** (**NameIsHtml = true**).
- **ConvertByteToMB()** now returns MB (it returned KB); use **ConvertBytesToKB()** for KB.
- **Grid**: if you used **<Columns Context="x">**, move **Context** to each **<Column>**; the **Load** parameter is gone.
- **Themes without AstrolLayoutMenu**: add **data-aui-color** and **data-aui-mode** where you set the class (e.g. **green-dark-mode**).
- **Custom CSS** on internal elements (**.head-astrol-modal i**, **.page-item a**, **#_pageInput**…): they are now buttons with classes; review your selectors.
- **Optional**: move from **jsI.Notification(...)** to **IAstrolToast** and from **<AstrolConfirm @ref>** to **IAstrolModal.ConfirmAsync**.

The full guide, with every change, how to detect it (regular expressions) and before/after examples, is in the repository at **docs/refactor/MIGRATION.md**; it is written so an AI can also apply it to your project.

```csharp
// ---- before ----
services.AddScoped<AstrolJSInterop>();
await jsI.Notification("Saved <br/> successfully".NotificationSuccess());
var ok = await _conf.Confirmation("Are you sure?", "Message"); // <AstrolConfirm @ref="_conf" />

// ---- now ----
services.AddAstrolBasic();
Toast.Success("Saved\nsuccessfully");
var ok = await Modal.ConfirmAsync("Are you sure?", "Message");
```

```html
<!-- before -->
<script src="_content/Astrol.Component.Basic/js/interact.min.js"></script>
<script src="_content/Astrol.Component.Basic/js/astrol-rich-text.min.js"></script>

<!-- now: interact is no longer needed (except with Board); RichText in its own package -->
<script src="_content/Astrol.Component.RichText/js/astrol-rich-text.min.js"></script>
```