Update the package and run the migration that ships with it. It renames identifiers only and never touches strings, comments or templates.

ng update @kikita-labs/ui
  • ng update runs rename-symbols-v2 for every workspace that moves from 1.x to 2.x. It reads every TypeScript file that imports from @kikita-labs/ui.
  • It renames named imports (including import type and import { Old as Local }), every use of the renamed binding, export { Old } of such a binding, re-exports, namespace members and import(...) types.
  • It skips node_modules, dist and .angular, and a second run changes nothing. When the new name is already declared in the same file the symbol is left alone and a warning names the file; rename it by hand.
  • Names used through a dynamic import (const { KuiButtonDirective } = await import(...)) are not seen; search for them with the git grep command above.
  • Selectors, inputs, outputs, exportAs names, CSS custom properties and CSS class names do not change, so templates and styles need no edit.

An Angular class is named for what it is, not for the construct that declares it. There are no compatibility aliases: the old names no longer exist in 2.0.

  • KuiSeparatorDirective is now KuiSeparator, KuiTabsComponent is KuiTabs and KuiToastService is KuiToast, as in Angular 20+, Angular Material and the CDK.
  • A class name is the PascalCase of its selector: button[kuiButton] is KuiButton and kui-tabs is KuiTabs. A pipe keeps its suffix (KuiComboboxHighlightPipe).
  • Providers follow the provideX convention: kuiProvideLocale is provideKuiLocale. kuiToast(), kuiDialog(), kuiDrawer(), kuiConfirm() and kuiMediaViewer() are unchanged.
  • The migration also maps names that only existed in 2.0 prereleases. The chart legend data type KuiChartLegendItem became KuiChartLegendEntry, and the template directive KuiChartLegendItemDirective took the plain name KuiChartLegendItem.
NameTypeDefaultDescription
KuiButtonDirectiveKuiButton — A directive loses its suffix.
KuiTabsComponentKuiTabs — A component loses its suffix.
KuiToastServiceKuiToast — A service loses its suffix; kuiToast() still returns it.
KuiSelectCellComponentKuiSelectCell — Table selection parts are renamed the same way.
kuiProvideLocaleprovideKuiLocale — Returns Provider[] and accepts a Signal.

The full table of the 74 renamed names in the library migration guide

Component defaults moved from six injection tokens to one mechanism, KuiDefaults. A nested provider now merges with its parent per property.

NameTypeDefaultDescription
KUI_BUTTON_OPTIONS, KUI_FIELD_OPTIONS, KUI_SELECT_OPTIONSprovideKuiDefaults({ button, field, select }) — The injection tokens are removed.
KUI_COMBOBOX_OPTIONS, KUI_TOOLTIP_OPTIONS, KUI_TOAST_OPTIONSprovideKuiDefaults({ combobox, tooltip, toast }) — The injection tokens are removed.
kuiProvideButtonOptions, kuiProvideFieldOptions, kuiProvideSelectOptionsprovideKuiDefaults — Deprecated, forward to provideKuiDefaults, removed in 3.0.
kuiProvideComboboxOptions, kuiProvideTooltipOptions, provideKuiToastOptionsprovideKuiDefaults — Deprecated, forward to provideKuiDefaults, removed in 3.0.
provideKikitaUi({ tooltip })provideKikitaUi({ defaults: { tooltip } }) — Deprecated.
KikitaUiDefaultsKuiComponentDefaults — Deprecated alias, removed in 3.0.
KuiButtonOptions as { button, iconButton }KuiButtonProviderOptions — KuiButtonOptions now describes one button.
  • In 1.x the field, select, combobox and button helpers replaced the whole parent object, so a subtree that set one property dropped the rest. In 2.0 each property resolves on its own.
  • The global control size is reactive: changing defaults.size updates components that are already rendered. Providing KIKITA_UI_OPTIONS directly no longer sets the default size; use provideKuiDefaults({ size }) for a subtree.
  • Inputs that now resolve through the defaults (Popover, Menu, Dropdown, Calendar, Carousel, Pagination and others) are undefined when omitted. Their rendered default is unchanged, but code that reads such an input back must read the resolved value.
  • KuiStepperContext.linear is effectiveLinear, KuiTreeContext.mode is effectiveMode and KuiSplitterContext.orientation is effectiveOrientation.

All text the library owns is a typed message with an English default.

  • provideKuiLocale returns Provider[] (it returned one Provider), so spread it where you used it as a single entry. It accepts a Signal and works for a subtree.
  • A requested locale is checked against the runtime Intl and falls back to en-US. LOCALE_ID is not read implicitly; use provideKikitaUi({ locale: () => inject(LOCALE_ID) }).
  • On the server KUI_LOCALE follows the request Accept-Language and the browser reuses it through TransferState. A cache in front of the server must send Vary: Accept-Language, or the application can pin a locale with provideKuiLocale.
  • The library ships English only. Translate with provideKikitaUi({ messages }), provideKuiMessages or the messages input of the components that have one. Inputs that carried an English default (ariaLabel of Pagination, Carousel, Menu, Popover, Tree and OTP Input, closeLabel of Alert, label of Avatar Group and Loader, placeholder of Command Palette and Date Picker, errorLabel of Tab) are undefined when omitted; the rendered text is unchanged.
  • Date Picker formats and parses the numeric layout of the locale (10/03/2026 in en-US, 03.10.2026 in ru-RU). Set format="dd.MM.yyyy" or defaults.datePicker.format to keep the old layout.
  • Time Picker defaults to the hour cycle of the locale (12h in en-US). Set format="24h" or defaults.timePicker.format to keep the old default.
  • Calendar and Calendar Range name each day button with its full localized date and take the first day and the weekend from the locale. Tests that look up a day button by its bare number must use the full date as the accessible name.
  • The default chart valueFormat is the compact notation of the locale, File Upload sizes use Intl units (2.5 MB) and Pagination, Carousel, Media Viewer and OTP positions are formatted with the locale.
  • Removed internals: KUI_CALENDAR_NAVIGATION_LABELS and the Date Picker formatDisplayDate and parseDisplayDate helpers.

Structural icons are replaceable data, and the Lucide set is read at a pinned version.

  • Structural icons (close, clear, chevrons, status marks and similar) are drawn by one renderer and can be replaced through defaults.icons and per-component slots. Default shapes, sizes and weights are unchanged.
  • The default Lucide set is read at a pinned lucide-static version (1.51.0, it was the floating @1) and converted to glyph data instead of being inserted as trusted HTML. Allow connect-src https://cdn.jsdelivr.net in a Content Security Policy, or serve the files yourself with createKuiLucideResolver({ baseUrl }).
  • A name that is not a Lucide kebab-case name resolves to nothing without a request. KuiIconSource is still the markup string type; resolvers and registries may also return KuiIconGlyph.
  • The internal kui-chrome-icon-paths.util module is removed.

Behaviour that differs from 1.x. Each item names the component, so search this list for the ones you use.

  • OTP Input: the readOnly input is readonly, the name the Signal Forms contract binds. Rename it in templates; there is no alias.
  • Toast: the region is a manual popover in the browser top layer and sits above open dialogs and drawers. defaults.toast.position and maxVisible follow runtime changes, and a persistent signal that turns false resumes the time left.
  • Select: an input[kuiSelect] bound with [formField] shows aria-invalid only after the field is touched, and a multiple Select keeps its panel open when an option is chosen with Enter or Space.
  • Required state:kui-field exposes its required state as aria-required on the controls that support it, so snapshot tests of the rendered markup change.
  • Calendar and Calendar Range: the markup is a full ARIA grid with role="gridcell" elements inside role="row" weeks, and aria-selected is on the gridcell. CSS that targets .kui-calendar-grid > .kui-calendar-day must target .kui-calendar-day or the new .kui-calendar-week and .kui-calendar-cell wrappers.
  • Splitter: the role="separator" is an inner element of kui-splitter-gutter and the collapse button is its sibling. The gutter host carries no role, aria-* or tabindex; style it through data-kui-orientation, data-kui-disabled and data-kui-dragging. Each pane renders its generated id.
  • File Upload: the "Choose file" label and the native file input are aria-hidden; the dropzone is the only interactive element. Carousel: the slide track is a tab stop while draggable is true.
  • Focus and disabled: every focusable part draws a solid 2px outline in --kui-color-focus, a ring drawn only with box-shadow is gone and --kui-input-focus-ring defaults to none. Every disabled control dims to --kui-opacity-disabled (0.5).
  • Dropdown: closing a panel after a selection returns focus to the control, and Escape returns it to the field control. KuiDropdown.setAnchor takes an optional third argument naming the focus-return element.
  • Coercion: static numeric attributes of Progress, Avatar, Avatar Group, Time Picker, Pagination, OTP Input, Splitter Pane, Carousel, Dropdown, Menu and Popover are coerced, and an invalid value falls back to a safe default instead of reaching ARIA or CSS.
  • Inputs:type="number" fields built with kuiInput no longer show the browser arrows (use kuiNumberInput for step buttons) and type="search" fields no longer show the browser clear cross.
  • Command Palette: command ids must be stable, unique and non-empty; development builds report empty, whitespace-containing and duplicate ids. It focuses its search input after render instead of in a microtask. kuiAutoFocus is new, and OTP Input autoFocus focuses the first cell that can take focus.

Style delivery changed, and field and icon now need the shared stylesheet like every other component.

  • Each primitive stylesheet lives beside its component. @kikita-labs/ui/styles and kikita-ui.css are still the only public style paths.
  • kui-field and kui-icon styles moved from component-scoped files into the kui.components layer, so both need kikita-ui.css (ng add installs it). An unlayered application rule overrides them without raising specificity.
  • Controls no longer import kui-field; they inject the internal KUI_FIELD token. KuiField.getDropdown(), getCalendar() and getTimePickerPanel() now find the part anywhere inside the field.
  • theme-default.css is part of @kikita-labs/ui/styles, so the default theme works from CSS alone. The generated theme sheet sits in the kui.tokens layer, declared before kui.base and kui.components, so a variable you write outside any layer wins regardless of source order.
  • provideKikitaUi() sets data-kui-density on <html> from seeds.density, on the server too, unless the page already set it. Right-to-left layouts are not supported in 2.0.

Token names are kept with the exceptions below. Colour tokens have their own table on the Theming page.

  • 322 component tokens that only mapped a role onto a semantic or base token (for example --kui-card-bg, --kui-btn-solid-bg, --kui-input-height) are no longer defined by the generated stylesheet or returned in createKuiTheme().component. Each component states the default as a fallback chain in its own CSS, so an override on any ancestor reaches it. Reading one with getComputedStyle now returns an empty string unless it is set.
  • Components no longer declare 123 of their public tokens on their element (such as --kui-alert-radius, --kui-badge-height, --kui-carousel-dot-bg); per-variant defaults live in private --_kui-* variables and the public token wins at any level.
  • The Button aliases --kui-btn-bg, --kui-btn-color, --kui-btn-focus-ring and related, and the legacy Select tokens --kui-select-bg, --kui-select-border and related, are removed. Button and Icon Button read the canonical --kui-btn-solid-* and --kui-btn-soft-* tokens, so a token set on an ancestor restyles Button in that scope.
  • Hooks that used to be defined on :root as literals (--kui-btn-focus-ring-w, --kui-btn-disabled-opacity, --kui-dialog-backdrop and others) are not generated any more. Set the shared token instead: --kui-focus-ring-width, --kui-focus-ring-offset, --kui-opacity-disabled, --kui-color-scrim, --kui-font-weight-semibold.
  • seeds.neutral now drives the surface, border, text, skeleton and scrollbar roles; --kui-neutral-1 to -12 are two scales, one per mode, and theme.palettes.neutral is the light scale. The default warning seed is oklch(0.56 0.15 65) and the default info seed is oklch(0.53 0.14 215); pass your own seeds to keep other colours.
  • Text on solid fills is white on every default accent in both modes and interactive control borders are stronger at rest. Use --kui-color-<role>-on-fill, -text and -indicator in your own CSS. --kui-color-on-fill and --kui-color-primary-focus-ring still exist but are deprecated and removed in 3.0.
  • Hover and pressed fills of list options, menu items, calendar days, tabs and ghost buttons read --kui-color-state-hover and --kui-color-state-active. Line heights follow the type roles and --kui-line-height-control.
  • Windows High Contrast: forced-colors.css, imported last by kikita-ui.css, states checked controls, Slider, Progress, selected cells, Tabs, Segmented, pressed Chip and Stepper with system colours.

The four charts changed their keyboard model, tooltip data and sizing.

  • Arrow keys move DOM focus, and Up and Down move between series while Left and Right move along a series; before, every arrow moved along one flat list.
  • KuiChartPoint.x and y passed to a tooltip formatter are data units (they were SVG pixels), and r is passed. The default scatter text is {series}: ({x}, {y}). Bubble r is in CSS pixels and the consumer owns clamping.
  • Line and bar charts measure their container, so axis text keeps a fixed pixel size (13px by default, it was 11px scaled with the viewBox). Set --kui-chart-axis-text-font-size to change it.
  • Every tooltip closes on Escape; [kuiTooltip] tooltips also stay open while the pointer is on them. --kui-chart-legend-swatch-radius is gone (the swatch is a marker shape); use --kui-chart-legend-swatch-size.

Work through these checks in order after the automatic migration.

  • Run ng update @kikita-labs/ui, then the git grep command from the first section; it must return nothing.
  • Replace every KUI_*_OPTIONS token and kuiProvide*Options call with provideKuiDefaults.
  • Rename readOnly to readonly on kui-otp-input.
  • Search your styles for removed tokens and for selectors that depend on the old Calendar or Splitter markup.
  • If you render on the server, check that your cache sends Vary: Accept-Language.
  • Rebuild, run your unit and browser tests and review screenshot diffs before accepting new baselines: disabled opacity, focus outlines, warning and info colours, line heights and tooltip timing changed on purpose.