@ckeditor/ckeditor5-ui 48.8.1-alpha.4 → 49.0.0-alpha.0

package/dist/button/listitembuttonview.d.ts

@@ -1,81 +1,80 @@
 /**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
+* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+*/
 /**
- * @module ui/button/listitembuttonview
- */
-import type { Locale } from '@ckeditor/ckeditor5-utils';
-import { type ButtonLabel } from './buttonlabel.js';
-import { type ViewCollection } from '../viewcollection.js';
-import { ButtonView } from './buttonview.js';
-import { View } from '../view.js';
-import '../../theme/components/button/listitembutton.css';
+* @module ui/button/listitembuttonview
+*/
+import type { Locale } from "@ckeditor/ckeditor5-utils";
+import { type ButtonLabel } from "./buttonlabel.js";
+import { type ViewCollection } from "../viewcollection.js";
+import { ButtonView } from "./buttonview.js";
+import { View } from "../view.js";
 /**
- * Button that is used as dropdown list item entry.
- */
+* Button that is used as dropdown list item entry.
+*/
 export declare class ListItemButtonView extends ButtonView {
-    /**
-     * Indicates whether the button view has reserved space for a check holder.
-     *
-     * @observable
-     */
-    hasCheckSpace: boolean;
-    /**
-     * The flag that indicates if the button should render a check holder.
-     *
-     * @internal
-     * @readonly
-     * @observable
-     */
-    _hasCheck: boolean;
-    /**
-     * Holds the view for the check icon of a button list item.
-     */
-    private readonly _checkIconHolderView;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale?: Locale, labelView?: ButtonLabel);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * Renders the check icon if the button is toggleable.
-     */
-    private _watchCheckIconHolderMount;
+	/**
+	* Indicates whether the button view has reserved space for a check holder.
+	*
+	* @observable
+	*/
+	hasCheckSpace: boolean;
+	/**
+	* The flag that indicates if the button should render a check holder.
+	*
+	* @internal
+	* @readonly
+	* @observable
+	*/
+	_hasCheck: boolean;
+	/**
+	* Holds the view for the check icon of a button list item.
+	*/
+	private readonly _checkIconHolderView;
+	/**
+	* @inheritDoc
+	*/
+	constructor(locale?: Locale, labelView?: ButtonLabel);
+	/**
+	* @inheritDoc
+	*/
+	override render(): void;
+	/**
+	* Renders the check icon if the button is toggleable.
+	*/
+	private _watchCheckIconHolderMount;
 }
 /**
- * @internal
- */
+* @internal
+*/
 export declare class CheckIconHolderView extends View {
-    /**
-     * Collection of child views.
-     */
-    readonly children: ViewCollection<View>;
-    /**
-     * Indicates whether the button is in the "on" state.
-     */
-    isOn: boolean;
-    /**
-     * The view for the check icon of the button list item.
-     */
-    private readonly _checkIconView;
-    /**
-     * @inheritDoc
-     */
-    constructor();
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * Renders the check icon if the button is toggleable.
-     */
-    private _watchCheckIconMount;
-    /**
-     * Creates a check icon view.
-     */
-    private _createCheckIconView;
+	/**
+	* Collection of child views.
+	*/
+	readonly children: ViewCollection<View>;
+	/**
+	* Indicates whether the button is in the "on" state.
+	*/
+	isOn: boolean;
+	/**
+	* The view for the check icon of the button list item.
+	*/
+	private readonly _checkIconView;
+	/**
+	* @inheritDoc
+	*/
+	constructor();
+	/**
+	* @inheritDoc
+	*/
+	override render(): void;
+	/**
+	* Renders the check icon if the button is toggleable.
+	*/
+	private _watchCheckIconMount;
+	/**
+	* Creates a check icon view.
+	*/
+	private _createCheckIconView;
 }

package/dist/button/switchbuttonview.d.ts

@@ -1,45 +1,44 @@
 /**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
+* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+*/
 /**
- * @module ui/button/switchbuttonview
- */
-import { View } from '../view.js';
-import { ButtonView } from './buttonview.js';
-import type { Locale } from '@ckeditor/ckeditor5-utils';
-import '../../theme/components/button/switchbutton.css';
+* @module ui/button/switchbuttonview
+*/
+import { View } from "../view.js";
+import { ButtonView } from "./buttonview.js";
+import type { Locale } from "@ckeditor/ckeditor5-utils";
 /**
- * The switch button view class.
- *
- * ```ts
- * const view = new SwitchButtonView();
- *
- * view.set( {
- * 	withText: true,
- * 	label: 'Switch me!'
- * } );
- *
- * view.render();
- *
- * document.body.append( view.element );
- * ```
- */
+* The switch button view class.
+*
+* ```ts
+* const view = new SwitchButtonView();
+*
+* view.set( {
+* 	withText: true,
+* 	label: 'Switch me!'
+* } );
+*
+* view.render();
+*
+* document.body.append( view.element );
+* ```
+*/
 export declare class SwitchButtonView extends ButtonView {
-    /**
-     * The toggle switch of the button.
-     */
-    readonly toggleSwitchView: View;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale?: Locale);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * Creates a toggle child view.
-     */
-    private _createToggleView;
+	/**
+	* The toggle switch of the button.
+	*/
+	readonly toggleSwitchView: View;
+	/**
+	* @inheritDoc
+	*/
+	constructor(locale?: Locale);
+	/**
+	* @inheritDoc
+	*/
+	override render(): void;
+	/**
+	* Creates a toggle child view.
+	*/
+	private _createToggleView;
 }

package/dist/collapsible/collapsibleview.d.ts

@@ -1,67 +1,66 @@
 /**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { View } from '../view.js';
-import { ButtonView } from '../button/buttonview.js';
-import { type ViewCollection } from '../viewcollection.js';
-import type { FocusableView } from '../focuscycler.js';
-import type { Locale } from '@ckeditor/ckeditor5-utils';
-import '../../theme/components/collapsible/collapsible.css';
+* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+*/
+import { View } from "../view.js";
+import { ButtonView } from "../button/buttonview.js";
+import { type ViewCollection } from "../viewcollection.js";
+import type { FocusableView } from "../focuscycler.js";
+import type { Locale } from "@ckeditor/ckeditor5-utils";
 /**
- * A collapsible UI component. Consists of a labeled button and a container which can be collapsed
- * by clicking the button. The collapsible container can be a host to other UI views.
- *
- * @internal
- */
+* A collapsible UI component. Consists of a labeled button and a container which can be collapsed
+* by clicking the button. The collapsible container can be a host to other UI views.
+*
+* @internal
+*/
 export declare class CollapsibleView extends View {
-    /**
-     * `true` when the container with {@link #children} is collapsed. `false` otherwise.
-     *
-     * @observable
-     */
-    isCollapsed: boolean;
-    /**
-     * The text label of the {@link #buttonView}.
-     *
-     * @observable
-     * @default 'Show more'
-     */
-    label: string;
-    /**
-     * The ID of the label inside the {@link #buttonView} that describes the collapsible
-     * container for assistive technologies. Set after the button was {@link #render rendered}.
-     *
-     * @internal
-     * @readonly
-     * @observable
-     */
-    _collapsibleAriaLabelUid: string | undefined;
-    /**
-     * The main button that, when clicked, collapses or expands the container with {@link #children}.
-     */
-    readonly buttonView: ButtonView;
-    /**
-     * A collection of the child views that can be collapsed by clicking the {@link #buttonView}.
-     */
-    readonly children: ViewCollection<FocusableView>;
-    /**
-     * Creates an instance of the collapsible view.
-     *
-     * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
-     * @param childViews An optional array of initial child views to be inserted into the collapsible.
-     */
-    constructor(locale: Locale, childViews?: Array<FocusableView>);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * Focuses the first focusable.
-     */
-    focus(): void;
-    /**
-     * Creates the main {@link #buttonView} of the collapsible.
-     */
-    private _createButtonView;
+	/**
+	* `true` when the container with {@link #children} is collapsed. `false` otherwise.
+	*
+	* @observable
+	*/
+	isCollapsed: boolean;
+	/**
+	* The text label of the {@link #buttonView}.
+	*
+	* @observable
+	* @default 'Show more'
+	*/
+	label: string;
+	/**
+	* The ID of the label inside the {@link #buttonView} that describes the collapsible
+	* container for assistive technologies. Set after the button was {@link #render rendered}.
+	*
+	* @internal
+	* @readonly
+	* @observable
+	*/
+	_collapsibleAriaLabelUid: string | undefined;
+	/**
+	* The main button that, when clicked, collapses or expands the container with {@link #children}.
+	*/
+	readonly buttonView: ButtonView;
+	/**
+	* A collection of the child views that can be collapsed by clicking the {@link #buttonView}.
+	*/
+	readonly children: ViewCollection<FocusableView>;
+	/**
+	* Creates an instance of the collapsible view.
+	*
+	* @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+	* @param childViews An optional array of initial child views to be inserted into the collapsible.
+	*/
+	constructor(locale: Locale, childViews?: Array<FocusableView>);
+	/**
+	* @inheritDoc
+	*/
+	override render(): void;
+	/**
+	* Focuses the first focusable.
+	*/
+	focus(): void;
+	/**
+	* Creates the main {@link #buttonView} of the collapsible.
+	*/
+	private _createButtonView;
 }

package/dist/colorgrid/colorgridview.d.ts

@@ -1,132 +1,131 @@
 /**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
+* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+*/
 /**
- * @module ui/colorgrid/colorgridview
- */
-import { View } from '../view.js';
-import { ColorTileView } from './colortileview.js';
-import { type DropdownPanelFocusable } from '../dropdown/dropdownpanelfocusable.js';
-import { type ViewCollection } from '../viewcollection.js';
-import { FocusTracker, KeystrokeHandler, type Locale } from '@ckeditor/ckeditor5-utils';
-import '../../theme/components/colorgrid/colorgrid.css';
+* @module ui/colorgrid/colorgridview
+*/
+import { View } from "../view.js";
+import { ColorTileView } from "./colortileview.js";
+import { type DropdownPanelFocusable } from "../dropdown/dropdownpanelfocusable.js";
+import { type ViewCollection } from "../viewcollection.js";
+import { FocusTracker, KeystrokeHandler, type Locale } from "@ckeditor/ckeditor5-utils";
 /**
- * A grid of {@link module:ui/colorgrid/colortileview~ColorTileView color tiles}.
- */
+* A grid of {@link module:ui/colorgrid/colortileview~ColorTileView color tiles}.
+*/
 export declare class ColorGridView extends View implements DropdownPanelFocusable {
-    /**
-     * A number of columns for the tiles grid.
-     */
-    readonly columns: number;
-    /**
-     * Collection of the child tile views.
-     */
-    readonly items: ViewCollection<ColorTileView>;
-    /**
-     * Tracks information about DOM focus in the grid.
-     */
-    readonly focusTracker: FocusTracker;
-    /**
-     * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    readonly keystrokes: KeystrokeHandler;
-    /**
-     * The color of the currently selected color tile in {@link #items}.
-     *
-     * @observable
-     */
-    selectedColor: string | undefined | null;
-    /**
-     * Creates an instance of a color grid containing {@link module:ui/colorgrid/colortileview~ColorTileView tiles}.
-     *
-     * @fires execute
-     * @param locale The localization services instance.
-     * @param options Component configuration
-     * @param options.colorDefinitions Array with definitions
-     * required to create the {@link module:ui/colorgrid/colortileview~ColorTileView tiles}.
-     * @param options.columns A number of columns to display the tiles.
-     */
-    constructor(locale?: Locale, options?: {
-        colorDefinitions?: Array<ColorDefinition>;
-        columns?: number;
-    });
-    /**
-     * Focuses the first focusable in {@link #items}.
-     */
-    focus(): void;
-    /**
-     * Focuses the last focusable in {@link #items}.
-     */
-    focusLast(): void;
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
+	/**
+	* A number of columns for the tiles grid.
+	*/
+	readonly columns: number;
+	/**
+	* Collection of the child tile views.
+	*/
+	readonly items: ViewCollection<ColorTileView>;
+	/**
+	* Tracks information about DOM focus in the grid.
+	*/
+	readonly focusTracker: FocusTracker;
+	/**
+	* Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	*/
+	readonly keystrokes: KeystrokeHandler;
+	/**
+	* The color of the currently selected color tile in {@link #items}.
+	*
+	* @observable
+	*/
+	selectedColor: string | undefined | null;
+	/**
+	* Creates an instance of a color grid containing {@link module:ui/colorgrid/colortileview~ColorTileView tiles}.
+	*
+	* @fires execute
+	* @param locale The localization services instance.
+	* @param options Component configuration
+	* @param options.colorDefinitions Array with definitions
+	* required to create the {@link module:ui/colorgrid/colortileview~ColorTileView tiles}.
+	* @param options.columns A number of columns to display the tiles.
+	*/
+	constructor(locale?: Locale, options?: {
+		colorDefinitions?: Array<ColorDefinition>;
+		columns?: number;
+	});
+	/**
+	* Focuses the first focusable in {@link #items}.
+	*/
+	focus(): void;
+	/**
+	* Focuses the last focusable in {@link #items}.
+	*/
+	focusLast(): void;
+	/**
+	* @inheritDoc
+	*/
+	override render(): void;
+	/**
+	* @inheritDoc
+	*/
+	override destroy(): void;
 }
 /**
- * A color definition used to create a {@link module:ui/colorgrid/colortileview~ColorTileView}.
- *
- * ```json
- * {
- * 	color: 'hsl(0, 0%, 75%)',
- * 	label: 'Light Grey',
- * 	options: {
- * 		hasBorder: true
- * 	}
- * }
- * ```
- */
+* A color definition used to create a {@link module:ui/colorgrid/colortileview~ColorTileView}.
+*
+* ```json
+* {
+* 	color: 'hsl(0, 0%, 75%)',
+* 	label: 'Light Grey',
+* 	options: {
+* 		hasBorder: true
+* 	}
+* }
+* ```
+*/
 export interface ColorDefinition {
-    /**
-     * String representing a color.
-     * It is used as value of background-color style in {@link module:ui/colorgrid/colortileview~ColorTileView}.
-     */
-    color: string;
-    /**
-     * String used as label for {@link module:ui/colorgrid/colortileview~ColorTileView}.
-     */
-    label: string;
-    /**
-     * Additional options passed to create a {@link module:ui/colorgrid/colortileview~ColorTileView}.
-     */
-    options: {
-        /**
-         * A flag that indicates if special a CSS class should be added
-         * to {@link module:ui/colorgrid/colortileview~ColorTileView}, which renders a border around it.
-         */
-        hasBorder: boolean;
-    };
+	/**
+	* String representing a color.
+	* It is used as value of background-color style in {@link module:ui/colorgrid/colortileview~ColorTileView}.
+	*/
+	color: string;
+	/**
+	* String used as label for {@link module:ui/colorgrid/colortileview~ColorTileView}.
+	*/
+	label: string;
+	/**
+	* Additional options passed to create a {@link module:ui/colorgrid/colortileview~ColorTileView}.
+	*/
+	options: {
+		/**
+		* A flag that indicates if special a CSS class should be added
+		* to {@link module:ui/colorgrid/colortileview~ColorTileView}, which renders a border around it.
+		*/
+		hasBorder: boolean;
+	};
 }
 /**
- * Fired when the `ColorTileView` for the picked item is executed.
- *
- * @eventName ~ColorGridView#execute
- * @param data Additional information about the event.
+* Fired when the `ColorTileView` for the picked item is executed.
+*
+* @eventName ~ColorGridView#execute
+* @param data Additional information about the event.
 */
 export type ColorGridViewExecuteEvent = {
-    name: 'execute';
-    args: [data: ColorGridViewExecuteEventData];
+	name: "execute";
+	args: [data: ColorGridViewExecuteEventData];
 };
 /**
- * The data of {@link ~ColorGridViewExecuteEvent execute event}.
- */
+* The data of {@link ~ColorGridViewExecuteEvent execute event}.
+*/
 export interface ColorGridViewExecuteEventData {
-    /**
-     * The value of the selected color ({@link module:ui/colorgrid/colorgridview~ColorDefinition#color `color.color`}).
-     */
-    value: string;
-    /**
-     * The `hasBorder` property of the selected color
-     * ({@link module:ui/colorgrid/colorgridview~ColorDefinition#options `color.options.hasBorder`}).
-     */
-    hasBorder: boolean;
-    /**
-     * The label of the selected color ({@link module:ui/colorgrid/colorgridview~ColorDefinition#label `color.label`})
-     */
-    label: string;
+	/**
+	* The value of the selected color ({@link module:ui/colorgrid/colorgridview~ColorDefinition#color `color.color`}).
+	*/
+	value: string;
+	/**
+	* The `hasBorder` property of the selected color
+	* ({@link module:ui/colorgrid/colorgridview~ColorDefinition#options `color.options.hasBorder`}).
+	*/
+	hasBorder: boolean;
+	/**
+	* The label of the selected color ({@link module:ui/colorgrid/colorgridview~ColorDefinition#label `color.label`})
+	*/
+	label: string;
 }

package/dist/colorgrid/colors.d.ts

@@ -0,0 +1,28 @@
+/**
+* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+*/
+/**
+* @module ui/colorgrid/colors
+*/
+import type { ColorOption } from "./utils.js";
+/**
+* The default color palette shared by every feature that displays a color grid: the font color,
+* the font background color, and the border and background colors of tables and table cells.
+*
+* It holds 12 hues in 10 shades each, from `50` to `900`, and fills a 12-column grid. Every row is one
+* shade and every column is one hue. The last column is a grey scale from white to black, matching the
+* lightness of each row.
+*
+* Shaded labels follow the `<hue> <shade>` pattern. {@link module:ui/colorgrid/utils~getLocalizedColorOptions}
+* translates the hue and keeps the shade number.
+*
+* @internal
+*/
+export declare const defaultColors: Array<ColorOption>;
+/**
+* The number of columns in the {@link module:ui/colorgrid/colors~defaultColors default color palette}.
+*
+* @internal
+*/
+export declare const defaultColorGridColumns = 12;