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

package/LICENSE.md

@@ -21,7 +21,7 @@ The following libraries are included in CKEditor 5 under the [MIT license](
 * @types/color-convert - Copyright (c) Microsoft Corporation.
 * color-convert - Copyright (c) 2011-2016 Heather Arthur <fayearthur@gmail.com> and Copyright (c) 2016-2021 Josh Junon <josh@junon.me>.
 * color-parse - Copyright (c) 2015 Dmitry Ivanov.
-* es-toolkit - Copyright (c) 2024 Viva Republica, Inc and Copyright OpenJS Foundation and other contributors.
+* es-toolkit - Copyright (c) 2024 Viva Republica, Inc.
 * vanilla-colorful - Copyright (c) 2020 Serhii Kulykov <iamkulykov@gmail.com>.
 
 Trademarks

package/dist/arialiveannouncer.d.ts

@@ -1,108 +1,107 @@
 /**
- * @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 type { Editor } from '@ckeditor/ckeditor5-core';
-import type { Locale } from '@ckeditor/ckeditor5-utils';
-import { type ViewCollection } from './viewcollection.js';
-import { View } from './view.js';
-import '../theme/components/arialiveannouncer/arialiveannouncer.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 type { Editor } from "@ckeditor/ckeditor5-core";
+import type { Locale } from "@ckeditor/ckeditor5-utils";
+import { type ViewCollection } from "./viewcollection.js";
+import { View } from "./view.js";
 /**
- * The politeness level of an `aria-live` announcement.
- *
- * Available keys are:
- * * `AriaLiveAnnouncerPoliteness.POLITE`,
- * * `AriaLiveAnnouncerPoliteness.ASSERTIVE`
- *
- * [Learn more](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Politeness_levels).
- */
+* The politeness level of an `aria-live` announcement.
+*
+* Available keys are:
+* * `AriaLiveAnnouncerPoliteness.POLITE`,
+* * `AriaLiveAnnouncerPoliteness.ASSERTIVE`
+*
+* [Learn more](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Politeness_levels).
+*/
 export declare const AriaLiveAnnouncerPoliteness: {
-    readonly POLITE: "polite";
-    readonly ASSERTIVE: "assertive";
+	readonly POLITE: "polite";
+	readonly ASSERTIVE: "assertive";
 };
 /**
- * An accessibility helper that manages all ARIA live regions associated with an editor instance. ARIA live regions announce changes
- * to the state of the editor features.
- *
- * These announcements are consumed and propagated by screen readers and give users a better understanding of the current
- * state of the editor.
- *
- * To announce a state change to an editor use the {@link #announce} method:
- *
- * ```ts
- * editor.ui.ariaLiveAnnouncer.announce( 'Text of an announcement.' );
- * ```
- */
+* An accessibility helper that manages all ARIA live regions associated with an editor instance. ARIA live regions announce changes
+* to the state of the editor features.
+*
+* These announcements are consumed and propagated by screen readers and give users a better understanding of the current
+* state of the editor.
+*
+* To announce a state change to an editor use the {@link #announce} method:
+*
+* ```ts
+* editor.ui.ariaLiveAnnouncer.announce( 'Text of an announcement.' );
+* ```
+*/
 export declare class AriaLiveAnnouncer {
-    /**
-     * The editor instance.
-     */
-    readonly editor: Editor;
-    /**
-     * The view that aggregates all `aria-live` regions.
-     */
-    view?: AriaLiveAnnouncerView;
-    /**
-     * @inheritDoc
-     */
-    constructor(editor: Editor);
-    /**
-     * Sets an announcement text to an aria region that is then announced by a screen reader to the user.
-     *
-     * If the aria region of a specified politeness does not exist, it will be created and can be re-used later.
-     *
-     * The default announcement politeness level is `'polite'`.
-     *
-     * ```ts
-     * // Most screen readers will queue announcements from multiple aria-live regions and read them out in the order they were emitted.
-     * editor.ui.ariaLiveAnnouncer.announce( 'Image uploaded.' );
-     * editor.ui.ariaLiveAnnouncer.announce( 'Connection lost. Reconnecting.' );
-     * ```
-     */
-    announce(announcement: string, attributes?: AriaLiveAnnouncerPolitenessValue | AriaLiveAnnounceConfig): void;
+	/**
+	* The editor instance.
+	*/
+	readonly editor: Editor;
+	/**
+	* The view that aggregates all `aria-live` regions.
+	*/
+	view?: AriaLiveAnnouncerView;
+	/**
+	* @inheritDoc
+	*/
+	constructor(editor: Editor);
+	/**
+	* Sets an announcement text to an aria region that is then announced by a screen reader to the user.
+	*
+	* If the aria region of a specified politeness does not exist, it will be created and can be re-used later.
+	*
+	* The default announcement politeness level is `'polite'`.
+	*
+	* ```ts
+	* // Most screen readers will queue announcements from multiple aria-live regions and read them out in the order they were emitted.
+	* editor.ui.ariaLiveAnnouncer.announce( 'Image uploaded.' );
+	* editor.ui.ariaLiveAnnouncer.announce( 'Connection lost. Reconnecting.' );
+	* ```
+	*/
+	announce(announcement: string, attributes?: AriaLiveAnnouncerPolitenessValue | AriaLiveAnnounceConfig): void;
 }
 /**
- * The view that aggregates all `aria-live` regions.
- */
+* The view that aggregates all `aria-live` regions.
+*/
 export declare class AriaLiveAnnouncerView extends View {
-    /**
-     * A collection of all views that represent individual `aria-live` regions.
-     */
-    readonly regionViews: ViewCollection<AriaLiveAnnouncerRegionView>;
-    constructor(locale: Locale);
+	/**
+	* A collection of all views that represent individual `aria-live` regions.
+	*/
+	readonly regionViews: ViewCollection<AriaLiveAnnouncerRegionView>;
+	constructor(locale: Locale);
 }
 /**
- * The view that represents a single `aria-live`.
- */
+* The view that represents a single `aria-live`.
+*/
 export declare class AriaLiveAnnouncerRegionView extends View {
-    /**
-     * Current politeness level of the region.
-     */
-    readonly politeness: AriaLiveAnnouncerPolitenessValue;
-    /**
-     * DOM converter used to sanitize unsafe HTML passed to {@link #announce} method.
-     */
-    private _domConverter;
-    /**
-     * Interval used to remove additions. It prevents accumulation of added nodes in region.
-     */
-    private _pruneAnnouncementsInterval;
-    constructor(editor: Editor, politeness: AriaLiveAnnouncerPolitenessValue);
-    /**
-     * Appends new announcement to region.
-     */
-    announce({ announcement, isUnsafeHTML }: AriaLiveAppendContentAttributes): void;
-    /**
-     * Return current announcements list HTML element.
-     */
-    private get _listElement();
+	/**
+	* Current politeness level of the region.
+	*/
+	readonly politeness: AriaLiveAnnouncerPolitenessValue;
+	/**
+	* DOM converter used to sanitize unsafe HTML passed to {@link #announce} method.
+	*/
+	private _domConverter;
+	/**
+	* Interval used to remove additions. It prevents accumulation of added nodes in region.
+	*/
+	private _pruneAnnouncementsInterval;
+	constructor(editor: Editor, politeness: AriaLiveAnnouncerPolitenessValue);
+	/**
+	* Appends new announcement to region.
+	*/
+	announce({ announcement, isUnsafeHTML }: AriaLiveAppendContentAttributes): void;
+	/**
+	* Return current announcements list HTML element.
+	*/
+	private get _listElement();
 }
 export type AriaLiveAnnouncerPolitenessValue = typeof AriaLiveAnnouncerPoliteness[keyof typeof AriaLiveAnnouncerPoliteness];
 export type AriaLiveAppendContentAttributes = {
-    announcement: string;
-    isUnsafeHTML?: boolean;
+	announcement: string;
+	isUnsafeHTML?: boolean;
 };
 export type AriaLiveAnnounceConfig = {
-    politeness: AriaLiveAnnouncerPolitenessValue;
-    isUnsafeHTML?: boolean;
+	politeness: AriaLiveAnnouncerPolitenessValue;
+	isUnsafeHTML?: boolean;
 };

package/dist/augmentation.d.ts

@@ -1,88 +1,88 @@
 /**
- * @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 type { BalloonToolbar, BlockToolbar, ContextualBalloon, Notification, Dialog, AccessibilityHelp } from './index.js';
-import type { ToolbarConfig } from '@ckeditor/ckeditor5-core';
-declare module '@ckeditor/ckeditor5-core' {
-    interface EditorConfig {
-        /**
-         * Contextual toolbar configuration. Used by the {@link module:ui/toolbar/balloon/balloontoolbar~BalloonToolbar}
-         * feature.
-         *
-         * ## Configuring toolbar items
-         *
-         * ```ts
-         * const config = {
-         * 	balloonToolbar: [ 'bold', 'italic', 'undo', 'redo' ]
-         * };
-         * ```
-         *
-         * You can also use `'|'` to create a separator between groups of items:
-         *
-         * ```ts
-         * const config = {
-         * 	balloonToolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
-         * };
-         * ```
-         *
-         * Read also about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
-         *
-         * ## Configuring items grouping
-         *
-         * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
-         *
-         * ```ts
-         * const config = {
-         * 	balloonToolbar: {
-         * 		items: [ 'bold', 'italic', 'undo', 'redo' ],
-         * 		shouldNotGroupWhenFull: true
-         * 	},
-         * };
-         * ```
-         */
-        balloonToolbar?: ToolbarConfig;
-        /**
-         * The block toolbar configuration. Used by the {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}
-         * feature.
-         *
-         * ```ts
-         * const config = {
-         * 	blockToolbar: [ 'paragraph', 'heading1', 'heading2', 'bulletedList', 'numberedList' ]
-         * };
-         * ```
-         *
-         * You can also use `'|'` to create a separator between groups of items:
-         *
-         * ```ts
-         * const config = {
-         * 	blockToolbar: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ]
-         * };
-         * ```
-         *
-         * ## Configuring items grouping
-         *
-         * You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
-         *
-         * ```ts
-         * const config = {
-         * 	blockToolbar: {
-         * 		items: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ],
-         * 		shouldNotGroupWhenFull: true
-         * 	},
-         * };
-         * ```
-         *
-         * Read more about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
-         */
-        blockToolbar?: ToolbarConfig;
-    }
-    interface PluginsMap {
-        [BalloonToolbar.pluginName]: BalloonToolbar;
-        [BlockToolbar.pluginName]: BlockToolbar;
-        [ContextualBalloon.pluginName]: ContextualBalloon;
-        [Dialog.pluginName]: Dialog;
-        [Notification.pluginName]: Notification;
-        [AccessibilityHelp.pluginName]: AccessibilityHelp;
-    }
+* @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 type { BalloonToolbar, BlockToolbar, ContextualBalloon, Notification, Dialog, AccessibilityHelp } from "./index.js";
+import type { ToolbarConfig } from "@ckeditor/ckeditor5-core";
+declare module "@ckeditor/ckeditor5-core" {
+	interface EditorConfig {
+		/**
+		* Contextual toolbar configuration. Used by the {@link module:ui/toolbar/balloon/balloontoolbar~BalloonToolbar}
+		* feature.
+		*
+		* ## Configuring toolbar items
+		*
+		* ```ts
+		* const config = {
+		* 	balloonToolbar: [ 'bold', 'italic', 'undo', 'redo' ]
+		* };
+		* ```
+		*
+		* You can also use `'|'` to create a separator between groups of items:
+		*
+		* ```ts
+		* const config = {
+		* 	balloonToolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
+		* };
+		* ```
+		*
+		* Read also about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
+		*
+		* ## Configuring items grouping
+		*
+		* You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
+		*
+		* ```ts
+		* const config = {
+		* 	balloonToolbar: {
+		* 		items: [ 'bold', 'italic', 'undo', 'redo' ],
+		* 		shouldNotGroupWhenFull: true
+		* 	},
+		* };
+		* ```
+		*/
+		balloonToolbar?: ToolbarConfig;
+		/**
+		* The block toolbar configuration. Used by the {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}
+		* feature.
+		*
+		* ```ts
+		* const config = {
+		* 	blockToolbar: [ 'paragraph', 'heading1', 'heading2', 'bulletedList', 'numberedList' ]
+		* };
+		* ```
+		*
+		* You can also use `'|'` to create a separator between groups of items:
+		*
+		* ```ts
+		* const config = {
+		* 	blockToolbar: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ]
+		* };
+		* ```
+		*
+		* ## Configuring items grouping
+		*
+		* You can prevent automatic items grouping by setting the `shouldNotGroupWhenFull` option:
+		*
+		* ```ts
+		* const config = {
+		* 	blockToolbar: {
+		* 		items: [ 'paragraph', 'heading1', 'heading2', '|', 'bulletedList', 'numberedList' ],
+		* 		shouldNotGroupWhenFull: true
+		* 	},
+		* };
+		* ```
+		*
+		* Read more about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
+		*/
+		blockToolbar?: ToolbarConfig;
+	}
+	interface PluginsMap {
+		[BalloonToolbar.pluginName]: BalloonToolbar;
+		[BlockToolbar.pluginName]: BlockToolbar;
+		[ContextualBalloon.pluginName]: ContextualBalloon;
+		[Dialog.pluginName]: Dialog;
+		[Notification.pluginName]: Notification;
+		[AccessibilityHelp.pluginName]: AccessibilityHelp;
+	}
 }

package/dist/autocomplete/autocompleteview.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/autocomplete/autocompleteview
+* @module ui/autocomplete/autocompleteview
 */
-import { type PositioningFunction, type Locale } from '@ckeditor/ckeditor5-utils';
-import { SearchTextView, type SearchTextViewConfig } from '../search/text/searchtextview.js';
-import { type SearchResultsView } from '../search/searchresultsview.js';
-import { type InputBase } from '../input/inputbase.js';
-import '../../theme/components/autocomplete/autocomplete.css';
+import { type PositioningFunction, type Locale } from "@ckeditor/ckeditor5-utils";
+import { SearchTextView, type SearchTextViewConfig } from "../search/text/searchtextview.js";
+import { type SearchResultsView } from "../search/searchresultsview.js";
+import { type InputBase } from "../input/inputbase.js";
 /**
- * The autocomplete component's view class. It extends the {@link module:ui/search/text/searchtextview~SearchTextView} class
- * with a floating {@link #resultsView} that shows up when the user starts typing and hides when they blur
- * the component.
- */
+* The autocomplete component's view class. It extends the {@link module:ui/search/text/searchtextview~SearchTextView} class
+* with a floating {@link #resultsView} that shows up when the user starts typing and hides when they blur
+* the component.
+*/
 export declare class AutocompleteView<TQueryFieldView extends InputBase<HTMLInputElement | HTMLTextAreaElement>> extends SearchTextView<TQueryFieldView> {
-    /**
-     * The configuration of the autocomplete view.
-     */
-    protected _config: AutocompleteViewConfig<TQueryFieldView>;
-    resultsView: AutocompleteResultsView;
-    /**
-     * @inheritDoc
-     */
-    constructor(locale: Locale, config: AutocompleteViewConfig<TQueryFieldView>);
-    /**
-     * Updates the position of the results view on demand.
-     */
-    private _updateResultsViewWidthAndPosition;
-    /**
-     * Updates the visibility of the results view on demand.
-     */
-    private _updateResultsVisibility;
-    /**
-     * Positions for the autocomplete results view. Two positions are defined by default:
-     * * `s` - below the search field,
-     * * `n` - above the search field.
-     */
-    static defaultResultsPositions: Array<PositioningFunction>;
-    /**
-     * A function used to calculate the optimal position for the dropdown panel.
-     */
-    private static _getOptimalPosition;
+	/**
+	* The configuration of the autocomplete view.
+	*/
+	protected override _config: AutocompleteViewConfig<TQueryFieldView>;
+	resultsView: AutocompleteResultsView;
+	/**
+	* @inheritDoc
+	*/
+	constructor(locale: Locale, config: AutocompleteViewConfig<TQueryFieldView>);
+	/**
+	* Updates the position of the results view on demand.
+	*/
+	private _updateResultsViewWidthAndPosition;
+	/**
+	* Updates the visibility of the results view on demand.
+	*/
+	private _updateResultsVisibility;
+	/**
+	* Positions for the autocomplete results view. Two positions are defined by default:
+	* * `s` - below the search field,
+	* * `n` - above the search field.
+	*/
+	static defaultResultsPositions: Array<PositioningFunction>;
+	/**
+	* A function used to calculate the optimal position for the dropdown panel.
+	*/
+	private static _getOptimalPosition;
 }
 /**
- * An interface describing additional properties of the floating search results view used by the autocomplete plugin.
- */
+* An interface describing additional properties of the floating search results view used by the autocomplete plugin.
+*/
 export interface AutocompleteResultsView extends SearchResultsView {
-    /**
-     * Controls the visibility of the results view.
-     *
-     * @observable
-     */
-    isVisible: boolean;
-    /**
-     * Controls the position (CSS class suffix) of the results view.
-     *
-     * @internal
-    */
-    _position?: string;
-    /**
-     * The observable property determining the CSS width of the results view.
-     *
-     * @internal
-     */
-    _width: number;
+	/**
+	* Controls the visibility of the results view.
+	*
+	* @observable
+	*/
+	isVisible: boolean;
+	/**
+	* Controls the position (CSS class suffix) of the results view.
+	*
+	* @internal
+	*/
+	_position?: string;
+	/**
+	* The observable property determining the CSS width of the results view.
+	*
+	* @internal
+	*/
+	_width: number;
 }
 export interface AutocompleteViewConfig<TConfigInputCreator extends InputBase<HTMLInputElement | HTMLTextAreaElement>> extends SearchTextViewConfig<TConfigInputCreator> {
-    /**
-     * When set `true`, the query view will be reset when the autocomplete view loses focus.
-     */
-    resetOnBlur?: boolean;
-    /**
-     * Minimum number of characters that need to be typed before the search is performed.
-     *
-     * @default 0
-     */
-    queryMinChars?: number;
+	/**
+	* When set `true`, the query view will be reset when the autocomplete view loses focus.
+	*/
+	resetOnBlur?: boolean;
+	/**
+	* Minimum number of characters that need to be typed before the search is performed.
+	*
+	* @default 0
+	*/
+	queryMinChars?: number;
 }