@ckeditor/ckeditor5-theme-lark 44.3.0 → 45.0.0-alpha.1

package/dist/index.css

@@ -1718,6 +1718,17 @@ of the component, floating–point numbers have been used which, for the default
 		--ck-font-size-base: 15px;
 		font-weight: bold;
 	}
+/* Padding when back button is hidden */
+.ck.ck-form__header:has(.ck-button-back.ck-hidden) {
+		padding-inline: var(--ck-spacing-large) var(--ck-spacing-large);
+	}
+/* Padding when back button is visible */
+.ck.ck-form__header:has(.ck-button-back:not(.ck-hidden)) {
+		padding-inline: var(--ck-spacing-small) var(--ck-spacing-small);
+	}
+.ck.ck-form__header > .ck-button-back {
+		margin-inline-end: var(--ck-spacing-small);
+	}
 /*
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
@@ -1984,6 +1995,9 @@ of the component, floating–point numbers have been used which, for the default
 .ck.ck-labeled-field-view.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown + .ck-label {
 		max-width: calc(var(--ck-labeled-field-empty-unfocused-max-width) - var(--ck-dropdown-arrow-size) - var(--ck-spacing-standard));
 	}
+.ck.ck-labeled-field-view.ck-labeled-field-view_full-width {
+		flex-grow: 1;
+	}
 /*
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
@@ -2652,6 +2666,10 @@ of the component, floating–point numbers have been used which, for the default
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
 .ck-vertical-form > .ck-button:nth-last-child(2)::after {
 	border-right: 1px solid var(--ck-color-base-border);
 }
@@ -3120,6 +3138,40 @@ of the component, floating–point numbers have been used which, for the default
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
+:root {
+	--ck-bookmark-icon-hover-fill-color: var(--ck-color-widget-hover-border);
+	--ck-bookmark-icon-selected-fill-color: var(--ck-color-focus-border);
+	--ck-bookmark-icon-animation-duration: var(--ck-widget-handler-animation-duration);
+	--ck-bookmark-icon-animation-curve: var(--ck-widget-handler-animation-curve);
+}
+.ck .ck-bookmark.ck-widget {
+		display: inline-block;
+		outline: none;
+	}
+.ck .ck-bookmark.ck-widget .ck-bookmark__icon .ck-icon__fill {
+			transition: fill var(--ck-bookmark-icon-animation-duration) var(--ck-bookmark-icon-animation-curve);
+		}
+.ck .ck-bookmark.ck-widget:hover .ck-bookmark__icon .ck-icon__fill {
+				fill: var(--ck-bookmark-icon-hover-fill-color);
+			}
+.ck .ck-bookmark.ck-widget.ck-widget_selected .ck-bookmark__icon .ck-icon__fill {
+				fill: var(--ck-bookmark-icon-selected-fill-color);
+			}
+.ck .ck-bookmark.ck-widget.ck-widget_selected,
+		.ck .ck-bookmark.ck-widget.ck-widget_selected:hover {
+			outline: none;
+		}
+.ck .ck-bookmark.ck-widget .ck-bookmark__icon {
+			position: relative;
+			display: block;
+			/* To make it align with text baseline. */
+			top: -0.1em;
+		}
+.ck .ck-bookmark.ck-widget .ck-bookmark__icon .ck-icon {
+				height: 1.2em;
+				width: auto;
+				vertical-align: middle;
+			}
 /*
  * Classes used by the "fake visual selection" displayed in the content when an input
  * in the bookmark UI has focus (the browser does not render the native selection in this state).
@@ -3134,6 +3186,57 @@ of the component, floating–point numbers have been used which, for the default
 	margin-right: -1px;
 	outline: solid 1px hsla(0, 0%, 100%, .5);
 }
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+:root {
+	--ck-bookmark-form-width: 340px;
+}
+@media screen and (max-width: 600px) {
+	:root {
+		--ck-bookmark-form-width: 300px;
+	}
+	}
+.ck.ck-bookmark-form {
+	width: var(--ck-bookmark-form-width);
+}
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/**
+ * Makes element unselectable.
+ */
+.ck.ck-bookmark-balloon .ck.ck-toolbar > .ck-toolbar__items {
+			flex-wrap: nowrap;
+		}
+.ck.ck-bookmark-toolbar__preview {
+	padding: 0 var(--ck-spacing-medium);
+	max-width: var(--ck-input-width);
+	min-width: 3em;
+	font-weight: normal;
+	text-overflow: ellipsis;
+	text-align: center;
+	overflow: hidden;
+
+	-moz-user-select: none;
+
+	-webkit-user-select: none;
+
+	-ms-user-select: none;
+
+	user-select: none;
+	cursor: default;
+}
 /*
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
@@ -3836,6 +3939,44 @@ of the component, floating–point numbers have been used which, for the default
 	from { opacity: 0; }
 	to   { opacity: 1; }
 }
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+:root {
+	--ck-text-alternative-form-width: 340px;
+}
+@media screen and (max-width: 600px) {
+	:root {
+		--ck-text-alternative-form-width: 300px;
+	}
+	}
+.ck.ck-text-alternative-form.ck-responsive-form {
+		width: var(--ck-text-alternative-form-width);
+	}
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+:root {
+	--ck-image-custom-resize-form-width: 340px;
+}
+@media screen and (max-width: 600px) {
+	:root {
+		--ck-image-custom-resize-form-width: 300px;
+	}
+	}
+.ck.ck-image-custom-resize-form.ck-responsive-form {
+		width: var(--ck-image-custom-resize-form-width);
+	}
 /*
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
@@ -3871,87 +4012,52 @@ of the component, floating–point numbers have been used which, for the default
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-/**
- * Makes element unselectable.
- */
-/*
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/*
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * A visual style of focused element's border.
- */
-/*
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * A helper to combine multiple shadows.
- */
-/**
- * Gives an element a drop shadow so it looks like a floating panel.
- */
-/*
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-.ck.ck-link-actions .ck-button.ck-link-actions__preview {
-		padding-left: 0;
-		padding-right: 0;
+:root {
+	--ck-link-bookmark-icon-size: calc( var(--ck-icon-size) * 0.7); /* 0.7 = 14/20 cause default the icon size is 20px */
+}
+.ck.ck-toolbar.ck-link-toolbar > .ck-toolbar__items {
+		flex-wrap: nowrap;
 	}
-.ck.ck-link-actions .ck-button.ck-link-actions__preview .ck-button__label {
-			padding: 0 var(--ck-spacing-medium);
-			color: var(--ck-color-link-default);
-			text-overflow: ellipsis;
-			cursor: pointer;
-
-			/* Match the box model of the link editor form's input so the balloon
-			does not change width when moving between actions and the form. */
-			max-width: var(--ck-input-width);
-			min-width: 3em;
-			text-align: center;
-		}
-.ck.ck-link-actions .ck-button.ck-link-actions__preview .ck-button__label:hover {
-				text-decoration: underline;
-			}
-.ck.ck-link-actions .ck-button.ck-link-actions__preview,
-		.ck.ck-link-actions .ck-button.ck-link-actions__preview:hover,
-		.ck.ck-link-actions .ck-button.ck-link-actions__preview:focus,
-		.ck.ck-link-actions .ck-button.ck-link-actions__preview:active {
-			background: none;
-		}
-.ck.ck-link-actions .ck-button.ck-link-actions__preview:active {
-			box-shadow: none;
-		}
-.ck.ck-link-actions .ck-button.ck-link-actions__preview:focus .ck-button__label {
-				text-decoration: underline;
-			}
-[dir="ltr"] .ck.ck-link-actions .ck-button:not(:first-child) {
-			margin-left: var(--ck-spacing-standard);
-		}
-[dir="rtl"] .ck.ck-link-actions .ck-button:not(:last-child) {
-			margin-left: var(--ck-spacing-standard);
-		}
-@media screen and (max-width: 600px) {
-		.ck.ck-link-actions .ck-button.ck-link-actions__preview {
-			margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;
-		}
+a.ck.ck-button.ck-link-toolbar__preview {
+	padding: 0 var(--ck-spacing-medium);
+	color: var(--ck-color-link-default);
+	cursor: pointer;
+	justify-content: center;
+}
+a.ck.ck-button.ck-link-toolbar__preview .ck.ck-button__label {
+		text-overflow: ellipsis;
 
-			.ck.ck-link-actions .ck-button.ck-link-actions__preview .ck-button__label {
-				min-width: 0;
-				max-width: 100%;
-			}
-			[dir="ltr"] .ck.ck-link-actions .ck-button:not(.ck-link-actions__preview) {
-				margin-left: 0;
+		/* Match the box model of the link editor form's input so the balloon
+		does not change width when moving between actions and the form. */
+		max-width: var(--ck-input-width);
 	}
-
-			[dir="rtl"] .ck.ck-link-actions .ck-button:not(.ck-link-actions__preview) {
-				margin-left: 0;
+a.ck.ck-button.ck-link-toolbar__preview,
+	a.ck.ck-button.ck-link-toolbar__preview:hover,
+	a.ck.ck-button.ck-link-toolbar__preview:focus,
+	a.ck.ck-button.ck-link-toolbar__preview:active {
+		background: none;
+	}
+a.ck.ck-button.ck-link-toolbar__preview:active {
+		box-shadow: none;
+	}
+a.ck.ck-button.ck-link-toolbar__preview:hover,
+	a.ck.ck-button.ck-link-toolbar__preview:focus {
+		text-decoration: underline;
+	}
+a.ck.ck-button.ck-link-toolbar__preview.ck-button_with-text .ck.ck-icon.ck-button__icon {
+		width: var(--ck-link-bookmark-icon-size);
+		height: var(--ck-link-bookmark-icon-size);
+	}
+[dir="ltr"] a.ck.ck-button.ck-link-toolbar__preview.ck-button_with-text .ck.ck-icon.ck-button__icon {
+			margin-right: var(--ck-spacing-tiny);
+			margin-left: var(--ck-spacing-small);
+	}
+[dir="rtl"] a.ck.ck-button.ck-link-toolbar__preview.ck-button_with-text .ck.ck-icon.ck-button__icon {
+			margin-left: var(--ck-spacing-tiny);
+			margin-right: var(--ck-spacing-small);
 	}
+a.ck.ck-button.ck-link-toolbar__preview:has( .ck-icon ) {
+		padding-left: var(--ck-spacing-extra-tiny );
 	}
 /*
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
@@ -3962,48 +4068,50 @@ of the component, floating–point numbers have been used which, for the default
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 /*
- * Style link form differently when manual decorators are available.
- * See: https://github.com/ckeditor/ckeditor5-link/issues/186.
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-.ck.ck-link-form_layout-vertical {
-	padding: 0;
-	min-width: var(--ck-input-width);
+:root {
+	--ck-link-panel-width: 340px;
+	/* The height of the text inside the link providers list button. */
+	--ck-link-provider-list-item-text-height: calc(var(--ck-line-height-base) * var(--ck-font-size-base));
+	/* The height of the link providers list item contained paddings. */
+	--ck-link-provider-list-item-height: calc(var(--ck-link-provider-list-item-text-height) + var(--ck-spacing-small) + var(--ck-spacing-small));
 }
-.ck.ck-link-form_layout-vertical .ck-labeled-field-view {
-		margin: var(--ck-spacing-large) var(--ck-spacing-large) var(--ck-spacing-small);
+@media screen and (max-width: 600px) {
+	:root {
+		--ck-link-panel-width: 300px;
 	}
-.ck.ck-link-form_layout-vertical .ck-labeled-field-view .ck-input-text {
-			min-width: 0;
-			width: 100%;
-		}
-.ck.ck-link-form_layout-vertical > .ck-button {
-		padding: var(--ck-spacing-standard);
-		margin: 0;
-		width: 50%;
-		border-radius: 0;
 	}
-.ck.ck-link-form_layout-vertical > .ck-button:not(:focus) {
-			border-top: 1px solid var(--ck-color-base-border);
+/* Generic class that wraps each link balloon view. */
+.ck.ck-form.ck-link-form {
+	width: var(--ck-link-panel-width);
+	padding-bottom: 0;
+}
+@media screen and (max-width: 600px) {
+.ck.ck-form.ck-link-form.ck-responsive-form .ck-labeled-field-view {
+				margin: 0;
 		}
-[dir="ltr"] .ck.ck-link-form_layout-vertical > .ck-button {
-			margin-left: 0;
-	}
-[dir="rtl"] .ck.ck-link-form_layout-vertical > .ck-button {
-			margin-left: 0;
 	}
-[dir="rtl"] .ck.ck-link-form_layout-vertical > .ck-button:last-of-type {
-				border-right: 1px solid var(--ck-color-base-border);
-			}
-/* Using additional `.ck` class for stronger CSS specificity than `.ck.ck-link-form > :not(:first-child)`. */
-.ck.ck-link-form_layout-vertical .ck.ck-list {
-		margin: 0 var(--ck-spacing-large);
+.ck.ck-form.ck-link-form .ck-link-form__providers-list {
+		border-top: 1px solid var(--ck-color-base-border);
+
+		/* The list should be scrollable when there are more than 4 items. */
 	}
-.ck.ck-link-form_layout-vertical .ck.ck-list .ck-button.ck-switchbutton {
-			padding: 0;
-			width: 100%;
+.ck.ck-form.ck-link-form .ck-link-form__providers-list:has(.ck-list__item:nth-child(n + 5)) {
+			overflow: auto;
+			/* Scroll should appear when there are more than 5 item on the list.
+			* var(--ck-spacing-large) - is a form padding.
+			* 1px - is a border width. */
+			max-height: calc(var(--ck-link-provider-list-item-height) * 4 + var(--ck-spacing-large) + 1px);
 		}
-.ck.ck-link-form_layout-vertical .ck.ck-list .ck-button.ck-switchbutton:hover {
-				background: none;
+.ck.ck-form.ck-link-form .ck-link-form__providers-list .ck-link__button {
+			padding: var(--ck-spacing-small) var(--ck-spacing-large);
+			border-radius: 0;
+		}
+.ck.ck-form.ck-link-form .ck-link-form__providers-list .ck-link__button > .ck-button__label {
+				overflow: hidden;
+				text-overflow: ellipsis;
 			}
 /*
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
@@ -4044,6 +4152,67 @@ of the component, floating–point numbers have been used which, for the default
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+:root {
+	--ck-link-properties-width: 340px;
+}
+@media screen and (max-width: 600px) {
+	:root {
+		--ck-link-properties-width: 300px;
+	}
+	}
+.ck.ck-link-properties {
+	width: var(--ck-link-properties-width);
+}
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+:root {
+	--ck-link-providers-width: 340px;
+	--ck-link-list-view-max-height: 240px;
+	--ck-link-list-view-icon-size: calc( var(--ck-icon-size) * 0.8); /* 0.8 = 16/20 cause default the icon size is 20px */
+}
+@media screen and (max-width: 600px) {
+	:root {
+		--ck-link-providers-width: 300px;
+	}
+	}
+.ck.ck-link-providers {
+	width: var(--ck-link-providers-width);
+}
+.ck.ck-link-providers .ck-form__header__label {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+.ck.ck-link-providers > .ck-link-providers__list {
+		max-height: min( var(--ck-link-list-view-max-height), 40vh );
+	}
+.ck.ck-link-providers > .ck-link-providers__list .ck-button > .ck-icon {
+				width: var(--ck-link-list-view-icon-size);
+				height: var(--ck-link-list-view-icon-size);
+			}
+.ck.ck-link-providers > .ck-link-providers__list .ck-button > .ck-button__label {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+.ck.ck-link-providers .ck-link__empty-list-info {
+		padding: calc( 2 * var(--ck-spacing-large) ) var(--ck-spacing-medium);
+		text-align: center;
+		font-style: italic;
+	}
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
 /* When there are no list styles and there is no collapsible. */
 .ck.ck-list-properties.ck-list-properties_without-styles {
 		padding: var(--ck-spacing-large);
@@ -4606,45 +4775,14 @@ of the component, floating–point numbers have been used which, for the default
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-.ck.ck-form {
-	padding: 0 0 var(--ck-spacing-large);
-}
-.ck.ck-form:focus {
-		/* See: https://github.com/ckeditor/ckeditor5/issues/4773 */
-		outline: none;
-	}
-.ck.ck-form .ck.ck-input-text {
-		min-width: 100%;
-		width: 0;
-	}
-.ck.ck-form .ck.ck-dropdown {
-		min-width: 100%;
-	}
-.ck.ck-form .ck.ck-dropdown .ck-dropdown__button:not(:focus) {
-				border: 1px solid var(--ck-color-base-border);
-			}
-.ck.ck-form .ck.ck-dropdown .ck-dropdown__button .ck-button__label {
-				width: 100%;
-			}
-/*
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
 /*
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-.ck.ck-form__row {
-	padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0;
-
-	/* Ignore labels that work as fieldset legends */
-}
-[dir="ltr"] .ck.ck-form__row > *:not(.ck-label) + * {
-				margin-left: var(--ck-spacing-large);
-	}
-[dir="rtl"] .ck.ck-form__row > *:not(.ck-label) + * {
-				margin-right: var(--ck-spacing-large);
-	}
+/* Ignore labels that work as fieldset legends */
+.ck.ck-form__row > *:not(.ck-label) + * {
+			margin-inline-start: var(--ck-spacing-large);
+		}
 .ck.ck-form__row > .ck-label {
 		width: 100%;
 		min-width: 100%;
@@ -4884,6 +5022,134 @@ of the component, floating–point numbers have been used which, for the default
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
+:root {
+	--ck-table-layout-widget-type-around-button-size: 16px;
+	--ck-table-layout-widget-type-around-icon-width: 10px;
+	--ck-table-layout-widget-type-around-icon-height: 8px;
+	--ck-table-layout-widget-handler-icon-size: 10px;
+	--ck-table-layout-default-border-color: hsl(0, 0%, 83%);
+
+}
+.ck-editor__editable .table.layout-table > table {
+			width: 100%;
+			height: 100%;
+
+			/* Styles to make the layout table outline visible when the layout table is inside another layout table inside edge cells.
+			Currently, this solution works on every browser except Safari. */
+			overflow: clip;
+			overflow-clip-margin: var(--ck-widget-outline-thickness);
+
+			/* The default table layout style in the editing view when the border is unset. */
+		}
+.ck-editor__editable .table.layout-table > table:not(
+			[style*="border:"],
+			[style*="border-top"],
+			[style*="border-bottom"],
+			[style*="border-left"],
+			[style*="border-right"],
+			[style*="border-width"],
+			[style*="border-style"],
+			[style*="border-color"]) {
+				border-color: transparent;
+				border-width: 0;
+				outline: none;
+			}
+.ck-editor__editable .table.layout-table > table > tbody > tr > td {
+			box-shadow: revert;
+			padding: revert;
+			min-width: 2em;
+			/* To make the caret visible. */
+			text-indent: 1px;
+
+			/* Resets the `min-width` style attribute that was added by the content table style. */
+		}
+.ck-editor__editable .table.layout-table > table > tbody > tr > td[style^="width:"],
+			.ck-editor__editable .table.layout-table > table > tbody > tr > td[style*=" width:"],
+			.ck-editor__editable .table.layout-table > table > tbody > tr > td[style*=";width:"],
+			.ck-editor__editable .table.layout-table > table > tbody > tr > td[style*="'width:"] {
+				min-width: auto;
+			}
+/* Remove the default background color from the focused table cell. */
+.ck-editor__editable .table.layout-table > table > tbody > tr > td:focus {
+				background-color: transparent;
+			}
+/* The default table layout cell style in the editing view when the border is unset.
+			But it need to be more strict cause of style attributes like `border-collapse`, `border-spacing`, etc. */
+.ck-editor__editable .table.layout-table > table > tbody > tr > td:not(
+			[style*="border:"],
+			[style*="border-top"],
+			[style*="border-bottom"],
+			[style*="border-left"],
+			[style*="border-right"],
+			[style*="border-width"],
+			[style*="border-style"],
+			[style*="border-color"]) {
+				border-color: transparent;
+				/* Resetting `border-width` property to the user agent styles. */
+				border-width: 0;
+				outline: var(--ck-table-layout-default-border-color) 1px dashed;
+				outline-offset: -1px;
+			}
+.ck-editor__editable .table.layout-table > table > tbody > tr > td:not(
+			[style*="border:"],
+			[style*="border-top"],
+			[style*="border-bottom"],
+			[style*="border-left"],
+			[style*="border-right"],
+			[style*="border-width"],
+			[style*="border-style"],
+			[style*="border-color"]):focus {
+					outline: var(--ck-color-focus-border) 1px solid;
+				}
+/* Reset the `width` and `text-indent` of the bogus paragraph because <td> has 1px text indent. */
+.ck-editor__editable .table.layout-table > table > tbody > tr > td > .ck-table-bogus-paragraph {
+				width: calc(100% - 1px);
+				text-indent: 0;
+			}
+/* Widget type around overrides. */
+.ck-editor__editable .table.layout-table.ck-widget > .ck-widget__type-around {
+				--ck-widget-type-around-button-size: var(--ck-table-layout-widget-type-around-button-size);
+			}
+.ck-editor__editable .table.layout-table.ck-widget > .ck-widget__type-around > .ck-widget__type-around__button.ck-widget__type-around__button_before,
+					.ck-editor__editable .table.layout-table.ck-widget > .ck-widget__type-around > .ck-widget__type-around__button.ck-widget__type-around__button_after {
+						transform: translateY(0);
+					}
+.ck-editor__editable .table.layout-table.ck-widget > .ck-widget__type-around > .ck-widget__type-around__button.ck-widget__type-around__button_before {
+						margin-left: var(--ck-table-layout-widget-type-around-button-size);
+						left: min(10%, 30px);
+						border-radius: 0 0 100px 100px;
+					}
+.ck-editor__editable .table.layout-table.ck-widget > .ck-widget__type-around > .ck-widget__type-around__button.ck-widget__type-around__button_before::after {
+							border-radius: 0 0 100px 100px;
+						}
+.ck-editor__editable .table.layout-table.ck-widget > .ck-widget__type-around > .ck-widget__type-around__button.ck-widget__type-around__button_after {
+						border-radius: 100px 100px 0 0;
+					}
+.ck-editor__editable .table.layout-table.ck-widget > .ck-widget__type-around > .ck-widget__type-around__button.ck-widget__type-around__button_after::after {
+							border-radius: 100px 100px 0 0;
+						}
+.ck-editor__editable .table.layout-table.ck-widget > .ck-widget__type-around > .ck-widget__type-around__button svg {
+						width: var(--ck-table-layout-widget-type-around-icon-width);
+						height: var(--ck-table-layout-widget-type-around-icon-height);
+					}
+.ck-editor__editable .table.layout-table.ck-widget.ck-widget_with-selection-handle > .ck-widget__selection-handle {
+					--ck-widget-handler-icon-size: var(--ck-table-layout-widget-handler-icon-size);
+
+					transform: translateY(calc(0px - var(--ck-widget-outline-thickness)));
+					z-index: var(--ck-z-default);
+				}
+/* Show fake caret on border not above. */
+.ck-editor__editable .table.layout-table.ck-widget.ck-widget_type-around_show-fake-caret_before > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
+						top: 0;
+					}
+/* Show fake caret on border not below. */
+.ck-editor__editable .table.layout-table.ck-widget.ck-widget_type-around_show-fake-caret_after > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
+						bottom: 0;
+					}
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
 /*
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
@@ -4934,6 +5200,12 @@ of the component, floating–point numbers have been used which, for the default
 .ck .ck-widget:hover {
 		outline-color: var(--ck-color-widget-hover-border);
 	}
+/*
+	 * Hide the outline of all widget parents when the widget is being hovered.
+	 */
+.ck .ck-widget:has( .ck-widget:hover ) {
+		outline-color: transparent;
+	}
 .ck .ck-editor__nested-editable {
 	border: 1px solid transparent;
 
@@ -5027,6 +5299,11 @@ of the component, floating–point numbers have been used which, for the default
 .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected > .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator, .ck .ck-widget.ck-widget_with-selection-handle.ck-widget_selected:hover > .ck-widget__selection-handle .ck-icon .ck-icon__selected-indicator {
 				opacity: 1;
 			}
+/* Hide the selection handle on mouse hover over the widget of all the widget parents. */
+.ck .ck-widget.ck-widget_with-selection-handle:has( .ck-widget:hover ) > .ck-widget__selection-handle {
+		opacity: 0;
+		visibility: hidden;
+	}
 /* In a RTL environment, align the selection handler to the right side of the widget */
 /* stylelint-disable-next-line no-descending-specificity */
 .ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle {
@@ -5195,9 +5472,9 @@ of the component, floating–point numbers have been used which, for the default
 					}
 			}
 /*
-	 * Show type around buttons when the widget gets selected or being hovered.
+	 * Show type around buttons when the widget is being hovered.
 	 */
-.ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button, .ck .ck-widget:hover > .ck-widget__type-around > .ck-widget__type-around__button {
+.ck .ck-widget:hover > .ck-widget__type-around > .ck-widget__type-around__button {
 			opacity: 1;
 			pointer-events: auto;
 		}
@@ -5223,6 +5500,21 @@ of the component, floating–point numbers have been used which, for the default
 			border-radius: 100px;
 			background: linear-gradient(135deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,.3) 100%);
 		}
+/*
+		* Styles of the widget when the "fake caret" is blinking (e.g. upon keyboard navigation).
+		* Despite the widget being physically selected in the model, its outline should disappear.
+		*/
+.ck .ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_before,
+		.ck .ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_after {
+			outline-color: transparent;
+		}
+/*
+		* Show type around buttons when the widget gets selected.
+		*/
+.ck .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button {
+			opacity: 1;
+			pointer-events: auto;
+		}
 /*
 	 * Styles for the "before" button when the widget has a selection handle. Because some space
 	 * is consumed by the handle, the button must be moved slightly to the right to let it breathe.
@@ -5245,14 +5537,6 @@ of the component, floating–point numbers have been used which, for the default
 		outline: solid 1px hsla(0, 0%, 100%, .5);
 		background: var(--ck-color-base-text);
 	}
-/*
-	 * Styles of the widget when the "fake caret" is blinking (e.g. upon keyboard navigation).
-	 * Despite the widget being physically selected in the model, its outline should disappear.
-	 */
-.ck .ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_before,
-		.ck .ck-widget.ck-widget_selected.ck-widget_type-around_show-fake-caret_after {
-			outline-color: transparent;
-		}
 /*
 		 * When the "fake caret" is visible we simulate that the widget is not selected
 		 * (despite being physically selected), so the outline color should be for the
@@ -5284,6 +5568,13 @@ of the component, floating–point numbers have been used which, for the default
 .ck .ck-widget.ck-widget_type-around_show-fake-caret_before.ck-widget_selected.ck-widget_with-resizer > .ck-widget__resizer, .ck .ck-widget.ck-widget_type-around_show-fake-caret_after.ck-widget_selected.ck-widget_with-resizer > .ck-widget__resizer {
 			opacity: 0
 		}
+/*
+	 * Hide type around buttons of all widget parents when the widget is being hovered.
+	 */
+.ck .ck-widget:has( .ck-widget:hover ) > .ck-widget__type-around > .ck-widget__type-around__button {
+			opacity: 0;
+			pointer-events: none;
+		}
 /*
  * Styles for the "before" button when the widget has a selection handle in an RTL environment.
  * The selection handler is aligned to the right side of the widget so there is no need to create
@@ -5299,6 +5590,7 @@ of the component, floating–point numbers have been used which, for the default
  *
  * See https://github.com/ckeditor/ckeditor5/issues/7263.
  */
+/* stylelint-disable-next-line no-descending-specificity */
 .ck-editor__nested-editable.ck-editor__editable_selected .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button, .ck-editor__nested-editable.ck-editor__editable_selected .ck-widget:hover > .ck-widget__type-around > .ck-widget__type-around__button {
 				opacity: 0;
 				pointer-events: none;