@ckeditor/ckeditor5-ui 41.3.0 → 41.4.0-alpha.0

package/src/arialiveannouncer.d.ts

@@ -2,9 +2,6 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-/**
- * @module ui/arialiveannouncer
- */
 import type { Editor } from '@ckeditor/ckeditor5-core';
 import type { Locale } from '@ckeditor/ckeditor5-utils';
 import type ViewCollection from './viewcollection.js';
@@ -30,9 +27,10 @@ export declare const AriaLiveAnnouncerPoliteness: {
  * 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 feature named `'Some feature'`, use the {@link #announce} method:
+ * To announce a state change to an editor use the {@link #announce} method:
+ *
  * ```ts
- * editor.ui.ariaLiveAnnouncer.announce( 'Some feature', 'Text of an announcement.' );
+ * editor.ui.ariaLiveAnnouncer.announce( 'Text of an announcement.' );
  * ```
  */
 export default class AriaLiveAnnouncer {
@@ -49,24 +47,19 @@ export default class AriaLiveAnnouncer {
      */
     constructor(editor: Editor);
     /**
-     * Sets an announcement text to an aria region associated with a specific editor feature. The text is then
-     * announced by a screen reader to the user.
-     *
-     * If the aria region of a given name does not exist, it will be created and can be re-used later. The name of the region
-     * groups announcements originating from a specific editor feature and does not get announced by a screen reader.
+     * Sets an announcement text to an aria region that is then announced by a screen reader to the user.
      *
-     * Using multiple regions allows for many announcements to be emitted in a short period of time. Changes to ARIA-live announcements
-     * are captured by a screen reader and read out in the order they were emitted.
+     * 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', 'Image uploaded.' );
-     * editor.ui.ariaLiveAnnouncer.announce( 'network', 'Connection lost. Reconnecting.' );
+     * editor.ui.ariaLiveAnnouncer.announce( 'Image uploaded.' );
+     * editor.ui.ariaLiveAnnouncer.announce( 'Connection lost. Reconnecting.' );
      * ```
      */
-    announce(regionName: string, announcementText: string, politeness?: typeof AriaLiveAnnouncerPoliteness[keyof typeof AriaLiveAnnouncerPoliteness]): void;
+    announce(announcement: string, attributes?: AriaLiveAnnouncerPolitenessValue | AriaLiveAnnounceConfig): void;
 }
 /**
  * The view that aggregates all `aria-live` regions.
@@ -79,20 +72,38 @@ export declare class AriaLiveAnnouncerView extends View {
     constructor(locale: Locale);
 }
 /**
- * The view that represents a single `aria-live` region (e.g. for a specific editor feature) and its text.
+ * The view that represents a single `aria-live`.
  */
 export declare class AriaLiveAnnouncerRegionView extends View {
     /**
-     * Current text of the region.
+     * Current politeness level of the region.
      */
-    text: string;
+    readonly politeness: AriaLiveAnnouncerPolitenessValue;
     /**
-     * Current politeness level of the region.
+     * DOM converter used to sanitize unsafe HTML passed to {@link #announce} method.
      */
-    politeness: typeof AriaLiveAnnouncerPoliteness[keyof typeof AriaLiveAnnouncerPoliteness];
+    private _domConverter;
     /**
-     * A unique name of the region, usually associated with a specific editor feature or system.
+     * Interval used to remove additions. It prevents accumulation of added nodes in region.
      */
-    regionName: string;
-    constructor(locale: Locale);
+    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();
 }
+type AriaLiveAnnouncerPolitenessValue = typeof AriaLiveAnnouncerPoliteness[keyof typeof AriaLiveAnnouncerPoliteness];
+type AriaLiveAppendContentAttributes = {
+    announcement: string;
+    isUnsafeHTML?: boolean;
+};
+type AriaLiveAnnounceConfig = {
+    politeness: AriaLiveAnnouncerPolitenessValue;
+    isUnsafeHTML?: boolean;
+};
+export {};

package/src/arialiveannouncer.js

@@ -24,9 +24,10 @@ export const AriaLiveAnnouncerPoliteness = {
  * 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 feature named `'Some feature'`, use the {@link #announce} method:
+ * To announce a state change to an editor use the {@link #announce} method:
+ *
  * ```ts
- * editor.ui.ariaLiveAnnouncer.announce( 'Some feature', 'Text of an announcement.' );
+ * editor.ui.ariaLiveAnnouncer.announce( 'Text of an announcement.' );
  * ```
  */
 export default class AriaLiveAnnouncer {
@@ -35,40 +36,50 @@ export default class AriaLiveAnnouncer {
      */
     constructor(editor) {
         this.editor = editor;
+        /**
+         * Some screen readers only look at changes in the aria-live region.
+         * They might not read a region that already has content when it is added.
+         * To stop this problem, make sure to set up regions for all politeness settings when the editor starts.
+         */
+        editor.once('ready', () => {
+            for (const politeness of Object.values(AriaLiveAnnouncerPoliteness)) {
+                this.announce('', politeness);
+            }
+        });
     }
     /**
-     * Sets an announcement text to an aria region associated with a specific editor feature. The text is then
-     * announced by a screen reader to the user.
+     * 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 given name does not exist, it will be created and can be re-used later. The name of the region
-     * groups announcements originating from a specific editor feature and does not get announced by a screen reader.
-     *
-     * Using multiple regions allows for many announcements to be emitted in a short period of time. Changes to ARIA-live announcements
-     * are captured by a screen reader and read out in the order they were emitted.
+     * 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', 'Image uploaded.' );
-     * editor.ui.ariaLiveAnnouncer.announce( 'network', 'Connection lost. Reconnecting.' );
+     * editor.ui.ariaLiveAnnouncer.announce( 'Image uploaded.' );
+     * editor.ui.ariaLiveAnnouncer.announce( 'Connection lost. Reconnecting.' );
      * ```
      */
-    announce(regionName, announcementText, politeness = AriaLiveAnnouncerPoliteness.POLITE) {
+    announce(announcement, attributes = AriaLiveAnnouncerPoliteness.POLITE) {
         const editor = this.editor;
+        if (!editor.ui.view) {
+            return;
+        }
         if (!this.view) {
             this.view = new AriaLiveAnnouncerView(editor.locale);
             editor.ui.view.body.add(this.view);
         }
-        let regionView = this.view.regionViews.find(view => view.regionName === regionName);
-        if (!regionView) {
-            regionView = new AriaLiveAnnouncerRegionView(this.view.locale);
-            this.view.regionViews.add(regionView);
+        const { politeness, isUnsafeHTML } = typeof attributes === 'string' ? {
+            politeness: attributes
+        } : attributes;
+        let politenessRegionView = this.view.regionViews.find(view => view.politeness === politeness);
+        if (!politenessRegionView) {
+            politenessRegionView = new AriaLiveAnnouncerRegionView(editor, politeness);
+            this.view.regionViews.add(politenessRegionView);
         }
-        regionView.set({
-            regionName,
-            text: announcementText,
-            politeness
+        politenessRegionView.announce({
+            announcement,
+            isUnsafeHTML
         });
     }
 }
@@ -92,25 +103,64 @@ export class AriaLiveAnnouncerView extends View {
     }
 }
 /**
- * The view that represents a single `aria-live` region (e.g. for a specific editor feature) and its text.
+ * The view that represents a single `aria-live`.
  */
 export class AriaLiveAnnouncerRegionView extends View {
-    constructor(locale) {
-        super(locale);
-        const bind = this.bindTemplate;
-        this.set('regionName', '');
-        this.set('text', '');
-        this.set('politeness', AriaLiveAnnouncerPoliteness.POLITE);
+    constructor(editor, politeness) {
+        super(editor.locale);
         this.setTemplate({
             tag: 'div',
             attributes: {
                 role: 'region',
-                'data-region': bind.to('regionName'),
-                'aria-live': bind.to('politeness')
+                'aria-live': politeness,
+                'aria-relevant': 'additions'
             },
             children: [
-                { text: bind.to('text') }
+                {
+                    tag: 'ul',
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-aria-live-region-list'
+                        ]
+                    }
+                }
             ]
         });
+        editor.on('destroy', () => {
+            if (this._pruneAnnouncementsInterval !== null) {
+                clearInterval(this._pruneAnnouncementsInterval);
+                this._pruneAnnouncementsInterval = null;
+            }
+        });
+        this.politeness = politeness;
+        this._domConverter = editor.data.htmlProcessor.domConverter;
+        this._pruneAnnouncementsInterval = setInterval(() => {
+            if (this.element && this._listElement.firstChild) {
+                this._listElement.firstChild.remove();
+            }
+        }, 5000);
+    }
+    /**
+     * Appends new announcement to region.
+     */
+    announce({ announcement, isUnsafeHTML }) {
+        if (!announcement.trim().length) {
+            return;
+        }
+        const messageListItem = document.createElement('li');
+        if (isUnsafeHTML) {
+            this._domConverter.setContentOf(messageListItem, announcement);
+        }
+        else {
+            messageListItem.innerText = announcement;
+        }
+        this._listElement.appendChild(messageListItem);
+    }
+    /**
+     * Return current announcements list HTML element.
+     */
+    get _listElement() {
+        return this.element.querySelector('ul');
     }
 }

package/src/colorpicker/colorpickerview.d.ts

@@ -6,9 +6,12 @@
  * @module ui/colorpicker/colorpickerview
  */
 import { type ColorPickerViewConfig } from './utils.js';
+import type { HexColor } from '@ckeditor/ckeditor5-core';
 import { type Locale } from '@ckeditor/ckeditor5-utils';
 import View from '../view.js';
+import type InputTextView from '../inputtext/inputtextview.js';
 import type ViewCollection from '../viewcollection.js';
+import LabeledFieldView from '../labeledfield/labeledfieldview.js';
 import { HexBase } from 'vanilla-colorful/lib/entrypoints/hex';
 import '../../theme/components/colorpicker/colorpicker.css';
 declare global {
@@ -98,6 +101,17 @@ export default class ColorPickerView extends View {
      * @private
      */
     private _createColorInput;
+    /**
+     * Validates the view and returns `false` when some fields are invalid.
+     */
+    isValid(): boolean;
+    /**
+     * Cleans up the supplementary error and information text of input inside the {@link #hexInputRow}
+     * bringing them back to the state when the form has been displayed for the first time.
+     *
+     * See {@link #isValid}.
+     */
+    resetValidationStatus(): void;
 }
 declare class SliderView extends View {
     /**
@@ -114,12 +128,21 @@ declare class ColorPickerInputRowView extends View {
      * A collection of row items (buttons, dropdowns, etc.).
      */
     readonly children: ViewCollection;
+    /**
+     * Hex input view element.
+     */
+    readonly inputView: LabeledFieldView<InputTextView>;
     /**
      * Creates an instance of the form row class.
      *
      * @param locale The locale instance.
+     * @param inputView Hex color input element.
+     */
+    constructor(locale: Locale, inputView: LabeledFieldView<InputTextView>);
+    /**
+     * Returns false if color input value is not in hex format.
      */
-    constructor(locale: Locale, children?: Array<View>);
+    getParsedColor(): HexColor | null;
 }
 /**
  * An event fired whenever the color was selected through the color picker palette
@@ -139,4 +162,12 @@ export type ColorPickerColorSelectedEvent = {
         }
     ];
 };
+/**
+ * Trim spaces from provided color and check if hex is valid.
+ *
+ * @param color Unsafe color string.
+ * @returns Null if provided color is not hex value.
+ * @export
+ */
+export declare function tryParseHexColor<S extends string>(color: S | null | undefined): HexColor<S> | null;
 export {};

package/src/colorpicker/colorpickerview.js

@@ -150,9 +150,8 @@ export default class ColorPickerView extends View {
      * @private
      */
     _createInputRow() {
-        const hashView = new HashView();
         const colorInput = this._createColorInput();
-        return new ColorPickerInputRowView(this.locale, [hashView, colorInput]);
+        return new ColorPickerInputRowView(this.locale, colorInput);
     }
     /**
      * Creates the input where user can type or paste the color in hex format.
@@ -180,22 +179,39 @@ export default class ColorPickerView extends View {
         labeledInput.fieldView.on('input', () => {
             const inputValue = labeledInput.fieldView.element.value;
             if (inputValue) {
-                // Trim the whitespace.
-                const trimmedValue = inputValue.trim();
-                // Drop the `#` from the beginning if present.
-                const hashlessInput = trimmedValue.startsWith('#') ? trimmedValue.substring(1) : trimmedValue;
-                // Check if it's a hex color (3,4,6 or 8 chars long and with proper characters).
-                const isValidHexColor = [3, 4, 6, 8].includes(hashlessInput.length) &&
-                    /(([0-9a-fA-F]{2}){3,4}|([0-9a-fA-F]){3,4})/.test(hashlessInput);
-                if (isValidHexColor) {
+                const maybeHexColor = tryParseHexColor(inputValue);
+                if (maybeHexColor) {
                     // If so, set the color.
                     // Otherwise, do nothing.
-                    this._debounceColorPickerEvent('#' + hashlessInput);
+                    this._debounceColorPickerEvent(maybeHexColor);
                 }
             }
         });
         return labeledInput;
     }
+    /**
+     * Validates the view and returns `false` when some fields are invalid.
+     */
+    isValid() {
+        const { t } = this.locale;
+        this.resetValidationStatus();
+        // One error per field is enough.
+        if (!this.hexInputRow.getParsedColor()) {
+            // Apply updated error.
+            this.hexInputRow.inputView.errorText = t('Please enter a valid color (e.g. "ff0000").');
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Cleans up the supplementary error and information text of input inside the {@link #hexInputRow}
+     * bringing them back to the state when the form has been displayed for the first time.
+     *
+     * See {@link #isValid}.
+     */
+    resetValidationStatus() {
+        this.hexInputRow.inputView.errorText = null;
+    }
 }
 // Converts any color format to a unified hex format.
 //
@@ -254,10 +270,15 @@ class ColorPickerInputRowView extends View {
      * Creates an instance of the form row class.
      *
      * @param locale The locale instance.
+     * @param inputView Hex color input element.
      */
-    constructor(locale, children) {
+    constructor(locale, inputView) {
         super(locale);
-        this.children = this.createCollection(children);
+        this.inputView = inputView;
+        this.children = this.createCollection([
+            new HashView(),
+            this.inputView
+        ]);
         this.setTemplate({
             tag: 'div',
             attributes: {
@@ -269,4 +290,32 @@ class ColorPickerInputRowView extends View {
             children: this.children
         });
     }
+    /**
+     * Returns false if color input value is not in hex format.
+     */
+    getParsedColor() {
+        return tryParseHexColor(this.inputView.fieldView.element.value);
+    }
+}
+/**
+ * Trim spaces from provided color and check if hex is valid.
+ *
+ * @param color Unsafe color string.
+ * @returns Null if provided color is not hex value.
+ * @export
+ */
+export function tryParseHexColor(color) {
+    if (!color) {
+        return null;
+    }
+    const hashLessColor = color.trim().replace(/^#/, '');
+    // Incorrect length.
+    if (![3, 4, 6, 8].includes(hashLessColor.length)) {
+        return null;
+    }
+    // Incorrect characters.
+    if (!/^(([0-9a-fA-F]{2}){3,4}|([0-9a-fA-F]){3,4})$/.test(hashLessColor)) {
+        return null;
+    }
+    return `#${hashLessColor}`;
 }

package/src/colorselector/colorpickerfragmentview.d.ts

@@ -101,6 +101,10 @@ export default class ColorPickerFragmentView extends View {
      * Focuses the color picker.
      */
     focus(): void;
+    /**
+     * Reset validation messages.
+     */
+    resetValidationStatus(): void;
     /**
      * When color picker is focused and "enter" is pressed it executes command.
      */

package/src/colorselector/colorpickerfragmentview.js

@@ -91,12 +91,18 @@ export default class ColorPickerFragmentView extends View {
     focus() {
         this.colorPickerView.focus();
     }
+    /**
+     * Reset validation messages.
+     */
+    resetValidationStatus() {
+        this.colorPickerView.resetValidationStatus();
+    }
     /**
      * When color picker is focused and "enter" is pressed it executes command.
      */
     _executeOnEnterPress() {
         this.keystrokes.set('enter', evt => {
-            if (this.isVisible && this.focusTracker.focusedElement !== this.cancelButtonView.element) {
+            if (this.isVisible && this.focusTracker.focusedElement !== this.cancelButtonView.element && this.colorPickerView.isValid()) {
                 this.fire('execute', {
                     value: this.selectedColor
                 });
@@ -176,10 +182,12 @@ export default class ColorPickerFragmentView extends View {
             label: t('Cancel')
         });
         saveButtonView.on('execute', () => {
-            this.fire('execute', {
-                source: 'colorPickerSaveButton',
-                value: this.selectedColor
-            });
+            if (this.colorPickerView.isValid()) {
+                this.fire('execute', {
+                    source: 'colorPickerSaveButton',
+                    value: this.selectedColor
+                });
+            }
         });
         cancelButtonView.on('execute', () => {
             this.fire('colorPicker:cancel');

package/src/colorselector/colorselectorview.js

@@ -176,6 +176,7 @@ export default class ColorSelectorView extends View {
         }
         this._isColorPickerFragmentVisible = true;
         this.colorPickerFragmentView.focus();
+        this.colorPickerFragmentView.resetValidationStatus();
         this._isColorGridsFragmentVisible = false;
     }
     /**

package/src/index.d.ts

@@ -5,6 +5,7 @@
 /**
  * @module ui
  */
+export { default as View, type UIViewRenderEvent } from './view.js';
 export { default as clickOutsideHandler } from './bindings/clickoutsidehandler.js';
 export { default as injectCssTransitionDisabler } from './bindings/injectcsstransitiondisabler.js';
 export { default as CssTransitionDisablerMixin, type ViewWithCssTransitionDisabler } from './bindings/csstransitiondisablermixin.js';
@@ -12,7 +13,7 @@ export { default as submitHandler } from './bindings/submithandler.js';
 export { default as addKeyboardHandlingForGrid } from './bindings/addkeyboardhandlingforgrid.js';
 export { default as AccessibilityHelp } from './editorui/accessibilityhelp/accessibilityhelp.js';
 export { default as BodyCollection } from './editorui/bodycollection.js';
-export { default as Button, type ButtonExecuteEvent } from './button/button.js';
+export type { default as Button, ButtonExecuteEvent } from './button/button.js';
 export type { default as ButtonLabel } from './button/buttonlabel.js';
 export { default as ButtonView } from './button/buttonview.js';
 export { default as ButtonLabelView } from './button/buttonlabelview.js';
@@ -60,7 +61,7 @@ export { default as StickyPanelView } from './panel/sticky/stickypanelview.js';
 export { default as AutocompleteView, type AutocompleteViewConfig, type AutocompleteResultsView } from './autocomplete/autocompleteview.js';
 export { default as SearchTextView, type SearchTextViewSearchEvent, type SearchTextViewConfig } from './search/text/searchtextview.js';
 export { default as SearchInfoView } from './search/searchinfoview.js';
-export { default as FilteredView, type FilteredViewExecuteEvent } from './search/filteredview.js';
+export type { default as FilteredView, FilteredViewExecuteEvent } from './search/filteredview.js';
 export { default as HighlightedTextView } from './highlightedtext/highlightedtextview.js';
 export { default as TooltipManager } from './tooltipmanager.js';
 export { default as Template, type TemplateDefinition } from './template.js';
@@ -71,7 +72,6 @@ export { default as ToolbarSeparatorView } from './toolbar/toolbarseparatorview.
 export { default as normalizeToolbarConfig } from './toolbar/normalizetoolbarconfig.js';
 export { default as BalloonToolbar, type BalloonToolbarShowEvent } from './toolbar/balloon/balloontoolbar.js';
 export { default as BlockToolbar } from './toolbar/block/blocktoolbar.js';
-export { default as View, type UIViewRenderEvent } from './view.js';
 export { default as ViewCollection } from './viewcollection.js';
 export { default as MenuBarView, type MenuBarConfig } from './menubar/menubarview.js';
 export { default as MenuBarMenuView } from './menubar/menubarmenuview.js';

package/src/index.js

@@ -5,6 +5,8 @@
 /**
  * @module ui
  */
+// This import must be at the top to ensure that `globals.css` is imported first
+export { default as View } from './view.js';
 export { default as clickOutsideHandler } from './bindings/clickoutsidehandler.js';
 export { default as injectCssTransitionDisabler } from './bindings/injectcsstransitiondisabler.js';
 export { default as CssTransitionDisablerMixin } from './bindings/csstransitiondisablermixin.js';
@@ -67,7 +69,6 @@ export { default as ToolbarSeparatorView } from './toolbar/toolbarseparatorview.
 export { default as normalizeToolbarConfig } from './toolbar/normalizetoolbarconfig.js';
 export { default as BalloonToolbar } from './toolbar/balloon/balloontoolbar.js';
 export { default as BlockToolbar } from './toolbar/block/blocktoolbar.js';
-export { default as View } from './view.js';
 export { default as ViewCollection } from './viewcollection.js';
 export { default as MenuBarView } from './menubar/menubarview.js';
 export { default as MenuBarMenuView } from './menubar/menubarmenuview.js';

package/src/toolbar/toolbarview.js

@@ -16,7 +16,6 @@ import { FocusTracker, KeystrokeHandler, Rect, ResizeObserver, global, isVisible
 import { icons } from '@ckeditor/ckeditor5-core';
 import { isObject } from 'lodash-es';
 import '../../theme/components/toolbar/toolbar.css';
-const { threeVerticalDots } = icons;
 export const NESTED_TOOLBAR_ICONS = {
     alignLeft: icons.alignLeft,
     bold: icons.bold,
@@ -336,7 +335,7 @@ export default class ToolbarView extends View {
         // Allow disabling icon by passing false.
         if (icon !== false) {
             // A pre-defined icon picked by name, SVG string, a fallback (default) icon.
-            dropdownView.buttonView.icon = NESTED_TOOLBAR_ICONS[icon] || icon || threeVerticalDots;
+            dropdownView.buttonView.icon = NESTED_TOOLBAR_ICONS[icon] || icon || icons.threeVerticalDots;
         }
         // If the icon is disabled, display the label automatically.
         else {
@@ -694,7 +693,7 @@ class DynamicGrouping {
             label: t('Show more items'),
             tooltip: true,
             tooltipPosition: locale.uiLanguageDirection === 'rtl' ? 'se' : 'sw',
-            icon: threeVerticalDots
+            icon: icons.threeVerticalDots
         });
         return dropdown;
     }

package/theme/components/arialiveannouncer/arialiveannouncer.css

@@ -8,3 +8,7 @@
 	left: -10000px;
 	top: -10000px;
 }
+
+.ck.ck-aria-live-region-list {
+	list-style-type: none;
+}

package/theme/components/tooltip/tooltip.css

@@ -3,6 +3,10 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+@import "../../mixins/_unselectable.css";
+
 .ck.ck-balloon-panel.ck-tooltip {
+	@mixin ck-unselectable;
+
 	z-index: calc( var(--ck-z-dialog) + 100 );
 }

package/theme/globals/globals.css

@@ -4,7 +4,6 @@
  */
 
 @import "./_hidden.css";
-@import "./_reset.css";
 @import "./_zindex.css";
 @import "./_transition.css";
 @import "./_poweredby.css";

package/theme/globals/_reset.css

@@ -1,13 +0,0 @@
-/*
- * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-.ck.ck-reset,
-.ck.ck-reset_all,
-.ck-reset_all *:not(.ck-reset_all-excluded *) {
-	box-sizing: border-box;
-	width: auto;
-	height: auto;
-	position: static;
-}