Migration 0.20 to 0.22

Every component is a separate definition with its own dependencies and strings; the Vue and React adapters wrap a component only when it is imported. A Vue app with only UiButton dropped from 32 KB to 4.7 KB gzip. Named imports (import { UiButton } from "@ziyarago/ui/vue") get the full benefit. app.use(ui) still registers every core component and so keeps all of them in the bundle.

package.json now lists as side-effectful only the CSS files, src/i18n/index.js and src/i18n/components/index.js. Everything else can be dropped by the bundler when unused. Do not override sideEffects for @ziyarago/ui in your bundler config, and do not deep-import files from src/ for their side effects.

New defineUiComponent(name, def) in the Vue and React adapters wraps ONE definition and registers it; defineUiComponents(defs) still works. @ziyarago/ui/internal exports every built-in <Name>Def (and pageDefinition), so a package declares deps: () => ({ Button: ButtonDef }). @ziyarago/ui/internal is semi-internal and can change in a minor release.

In @ziyarago/ui-pro 0.22 each export is /*#__PURE__*/ defineUiComponent(...). Importing the package registers nothing by itself. app.use(ui) sees the core components plus only the Pro components that are imported in the bundle. A Pro tag that was never imported is not registered. The Nuxt module and the Vite resolver generate the import per tag, so they are not affected.

The Pro tarball has the same version as the core and its peer range for @ziyarago/ui starts at the exact core version it was built against and ends before the next minor (for 0.22.1: >=0.22.1 <0.23.0). Update both packages together. Pro sideEffects shrank to the CSS files and languages/index.js.

Server HTML of core and Pro components carries classes and data-zg-p attributes instead of style="...". The rules live in csp.css and csp-pro.css, which are part of @ziyarago/ui/style.css, so the stylesheet must be loaded. Percentages are rounded in data-zg-p for the server HTML and set exactly after mount. Values outside the finite sets (for example gap="1.5rem") and a style prop you pass yourself are still inline. See the CSP checklist in Integration.

The font files were removed from the package for licence reasons. In RTL the Arabic stack falls back to a system font until you self-host Thmanyah; @ziyarago/ui/thmanyah.css gives ready @font-face rules for /fonts/thmanyah/. See Fonts.

Documented callbacks without arguments (Modal, Drawer, Alert, Snackbar, Chip, Tag, ConfirmDialog and more) are called without the DOM event. If your handler read the first argument, it is undefined now.

About 100 icons the components use are built in and need no request. Other icon names are still fetched from unpkg: self-host with setIconBase or register with registerIcons. Small font subsets are emitted as files, not data: URIs.

Select, Combobox, MultiSelect, DatePicker, Dropdown, Menu, ContextMenu, Popover, Popconfirm and Pro GroupedSelect, TreeSelect, NotificationBell render in document.body with position: fixed. In tests query the list by role=listbox or aria-controls, not inside the component root.

Visual fixes for chat height, ImageUpload text, Kanban badges and AuthShowcase contrast. Pro 0.22.1 also fixes the visible name of TreeSelect and GroupedSelect when the selected label is null.