@ckeditor/ckeditor5-table 48.8.1-alpha.4 → 49.0.0-alpha.1

package/dist/index.css

@@ -2,218 +2,130 @@
  * @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
  */
-.ck-content .table th {
-  text-align: start;
-}
-
-.ck-content[dir="rtl"] .table th {
-  text-align: right;
-}
-
-.ck-content[dir="ltr"] .table th {
-  text-align: left;
-}
-
-.ck-content figure.table:not(.layout-table) {
-  display: table;
-}
-
-.ck-content figure.table:not(.layout-table) > table {
-  width: 100%;
-  height: 100%;
-}
-
-.ck-content .table:not(.layout-table) {
-  margin: .9em auto;
-}
-
-.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  border: 1px double #b3b3b3;
-}
-
-:is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > th {
-  background: #0000000d;
-  font-weight: bold;
-}
-
-:is(:is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > td, :is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > th) > p:first-of-type {
-  margin-top: 0;
-}
-
-:is(:is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > td, :is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > th) > p:last-of-type {
-  margin-bottom: 0;
-}
-
-:is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > td, :is(:is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > thead, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tfoot, :is(.ck-content table.table:not(.layout-table), .ck-content figure.table:not(.layout-table) > table) > tbody) > tr > th {
-  border: 1px solid #bfbfbf;
-  min-width: 2em;
-  padding: .4em;
-}
-
-@media print {
-  .ck-content figure.table:not(.layout-table) {
-    width: fit-content;
-    height: fit-content;
-  }
-
-  .ck-content figure.table:not(.layout-table) > table {
-    height: initial;
-  }
-}
-
 .ck-editor__editable .ck-table-bogus-paragraph {
   width: 100%;
   display: inline-block;
 }
 
-:root {
+:root, :host {
   --ck-color-table-focused-cell-background: #9ec9fa4d;
   --ck-table-content-default-border-color: #d4d4d4;
   --ck-table-border-none-helper-line-color: #d4d4d4;
   --ck-table-border-none-helper-line-style: dashed;
-  --ck-table-border-none-helper-line-width: 1px;
-}
-
-.ck-widget.table table[style*="border:none"], .ck-widget.table table[style*="border-style:none"], .ck-widget.table table[style*="border:0"], .ck-widget.table table[style*="border-width:0"] {
-  outline: var(--ck-table-content-default-border-color) 1px dashed;
+  --ck-table-border-none-helper-line-width: var(--ck-border-width-thin);
 }
 
-:is(.ck-widget.table td, .ck-widget.table th).ck-editor__nested-editable {
-  outline: unset;
-}
+.ck-widget.table {
+  & table[style*="border:none"], & table[style*="border-style:none"], & table[style*="border:0"], & table[style*="border-width:0"] {
+    outline: var(--ck-table-content-default-border-color) 1px dashed;
+  }
 
-:is(.ck-widget.table td, .ck-widget.table th).ck-editor__nested-editable:not(.ck-editor__editable_selected).ck-editor__nested-editable_focused, :is(.ck-widget.table td, .ck-widget.table th).ck-editor__nested-editable:not(.ck-editor__editable_selected):focus {
-  background: var(--ck-color-table-focused-cell-background);
-  outline: 1px solid var(--ck-color-focus-border);
-  outline-offset: -1px;
+  & td, & th {
+    &.ck-editor__nested-editable {
+      outline: unset;
+
+      &:not(.ck-editor__editable_selected) {
+        &.ck-editor__nested-editable_focused, &:focus {
+          background: var(--ck-color-table-focused-cell-background);
+          outline: 1px solid var(--ck-color-focus-border, var(--ck-color-interactive-focus-border));
+          outline-offset: -1px;
+        }
+      }
+    }
+  }
 }
 
 :where(.ck.ck-editor__editable.ck-table-show-hidden-borders .ck-widget.table) {
   --ck-table-border-none-helper-line: var(--ck-table-border-none-helper-line-width)
 		var(--ck-table-border-none-helper-line-style)
 		var(--ck-table-border-none-helper-line-color);
-}
-
-:where(.ck.ck-editor__editable.ck-table-show-hidden-borders .ck-widget.table) :where(td, th):where([style*="border:none"], [style*="border:0"], [style*="border-style:none"], [style*="border-width:0"]) {
-  border: var(--ck-table-border-none-helper-line) !important;
-}
 
-:where(.ck.ck-editor__editable.ck-table-show-hidden-borders .ck-widget.table) :where(table, td, th):where([style*="border-top-style:none"], [style*="border-top-width:0"]) {
-  border-top: var(--ck-table-border-none-helper-line) !important;
-}
-
-:where(.ck.ck-editor__editable.ck-table-show-hidden-borders .ck-widget.table) :where(table, td, th):where([style*="border-right-style:none"], [style*="border-right-width:0"]) {
-  border-right: var(--ck-table-border-none-helper-line) !important;
-}
-
-:where(.ck.ck-editor__editable.ck-table-show-hidden-borders .ck-widget.table) :where(table, td, th):where([style*="border-bottom-style:none"], [style*="border-bottom-width:0"]) {
-  border-bottom: var(--ck-table-border-none-helper-line) !important;
-}
-
-:where(.ck.ck-editor__editable.ck-table-show-hidden-borders .ck-widget.table) :where(table, td, th):where([style*="border-left-style:none"], [style*="border-left-width:0"]) {
-  border-left: var(--ck-table-border-none-helper-line) !important;
-}
-
-.ck.ck-table-cell-properties-form {
-  width: 320px;
-}
-
-.ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__padding-row {
-  align-self: flex-end;
-  width: 25%;
-  padding: 0;
-}
-
-.ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar {
-  margin-top: var(--ck-spacing-standard);
-  background: none;
-}
-
-.ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar.ck-table-cell-properties-form__horizontal-alignment-toolbar {
-  --ck-table-form-dimensions-input-width: calc(var(--ck-table-form-default-input-width) * 2 + var(--ck-spacing-large));
-  width: var(--ck-table-form-dimensions-input-width);
-  max-width: var(--ck-table-form-dimensions-input-width);
-  min-width: var(--ck-table-form-dimensions-input-width);
-  padding: 0;
-}
-
-.ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar.ck-table-cell-properties-form__vertical-alignment-toolbar {
-  flex-grow: 1;
-}
-
-.ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:first-of-type {
-  flex-grow: .57;
-}
-
-.ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar:last-of-type {
-  flex-grow: .43;
-}
-
-.ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row .ck.ck-toolbar .ck-button {
-  flex-grow: 1;
-}
-
-.ck.ck-table-cell-properties-form .ck-form__row.ck-table-cell-properties-form__alignment-row {
-  flex-wrap: wrap;
-}
-
-.ck.ck-table-cell-properties-form .ck-form__row.ck-table-form__border-row .ck-labeled-field-view > .ck-label {
-  font-size: var(--ck-font-size-tiny);
-  text-align: center;
-}
+  & :where(td, th):where([style*="border:none"], [style*="border:0"], [style*="border-style:none"], [style*="border-width:0"]) {
+    border: var(--ck-table-border-none-helper-line) !important;
+  }
 
-.ck.ck-table-cell-properties-form .ck-form__row.ck-table-form__border-row .ck-table-form__border-style, .ck.ck-table-cell-properties-form .ck-form__row.ck-table-form__border-row .ck-table-form__border-width {
-  width: 80px;
-  min-width: 80px;
-  max-width: 80px;
-}
+  & :where(table, td, th) {
+    &:where([style*="border-top-style:none"], [style*="border-top-width:0"]) {
+      border-top: var(--ck-table-border-none-helper-line) !important;
+    }
 
-.ck.ck-table-cell-properties-form .ck-form__row.ck-table-form__dimensions-row {
-  --ck-table-form-dimensions-input-width: calc(var(--ck-table-form-default-input-width) * 2 + var(--ck-spacing-large));
-  width: var(--ck-table-form-dimensions-input-width);
-  max-width: var(--ck-table-form-dimensions-input-width);
-  min-width: var(--ck-table-form-dimensions-input-width);
-  padding: 0;
-}
+    &:where([style*="border-right-style:none"], [style*="border-right-width:0"]) {
+      border-right: var(--ck-table-border-none-helper-line) !important;
+    }
 
-.ck.ck-table-cell-properties-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimensions-row__width, .ck.ck-table-cell-properties-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimensions-row__height {
-  width: var(--ck-table-form-default-input-width);
-  min-width: var(--ck-table-form-default-input-width);
-  max-width: var(--ck-table-form-default-input-width);
-  margin: 0;
-}
-
-.ck.ck-table-cell-properties-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimension-operator {
-  width: 0;
-  height: var(--ck-ui-component-min-height);
-  line-height: var(--ck-ui-component-min-height);
-  margin: 0 var(--ck-spacing-small);
-  align-self: flex-end;
-  display: inline-block;
-  position: relative;
-  left: -.5ch;
-  overflow: visible;
-}
+    &:where([style*="border-bottom-style:none"], [style*="border-bottom-width:0"]) {
+      border-bottom: var(--ck-table-border-none-helper-line) !important;
+    }
 
-.ck.ck-table-cell-properties-form .ck-form__row.ck-form__row.ck-table-form__action-row > .ck.ck-button {
-  flex-grow: initial;
+    &:where([style*="border-left-style:none"], [style*="border-left-width:0"]) {
+      border-left: var(--ck-table-border-none-helper-line) !important;
+    }
+  }
 }
 
-.ck.ck-table-cell-properties-form .ck-form__row.ck-form__row.ck-table-form__action-row > .ck.ck-button .ck-button__label {
-  color: currentColor;
+:root, :host {
+  --ck-table-cell-properties-width: var(--ck-width-balloon-form);
 }
 
-.ck.ck-table-cell-properties-form .ck-form__row.ck-table-form__cell-type-row {
-  --ck-table-form-dimensions-input-width: calc(var(--ck-table-form-default-input-width) * 2 + var(--ck-spacing-large));
-  width: var(--ck-table-form-dimensions-input-width);
-  max-width: var(--ck-table-form-dimensions-input-width);
-  min-width: var(--ck-table-form-dimensions-input-width);
-  padding: 0;
+.ck.ck-table-cell-properties-form {
+  width: var(--ck-table-cell-properties-width);
+
+  & .ck-form__row {
+    &.ck-table-cell-properties-form__padding-row {
+      --ck-table-cell-properties-padding-width: calc((100% - 2 * var(--ck-spacing-large, var(--ck-spacing-lg))) / 3);
+      width: var(--ck-table-cell-properties-padding-width);
+      max-width: var(--ck-table-cell-properties-padding-width);
+      min-width: var(--ck-table-cell-properties-padding-width);
+      align-self: flex-end;
+      padding: 0;
+    }
+
+    &.ck-table-cell-properties-form__alignment-row {
+      & .ck.ck-toolbar {
+        margin-top: var(--ck-spacing-standard, var(--ck-spacing-base));
+        background: none;
+
+        &.ck-table-cell-properties-form__horizontal-alignment-toolbar {
+          --ck-table-cell-properties-horizontal-alignment-width: calc((100% - 2 * var(--ck-spacing-large, var(--ck-spacing-lg))) / 3 * 2 + var(--ck-spacing-large, var(--ck-spacing-lg)));
+          width: var(--ck-table-cell-properties-horizontal-alignment-width);
+          max-width: var(--ck-table-cell-properties-horizontal-alignment-width);
+          min-width: var(--ck-table-cell-properties-horizontal-alignment-width);
+          padding: 0;
+        }
+
+        &.ck-table-cell-properties-form__vertical-alignment-toolbar, & .ck-button {
+          flex-grow: 1;
+        }
+      }
+
+      flex-wrap: wrap;
+    }
+
+    &.ck-form__row.ck-table-form__action-row {
+      & > .ck.ck-button {
+        flex-grow: initial;
+
+        & .ck-button__label {
+          color: currentColor;
+        }
+      }
+    }
+
+    &.ck-table-form__cell-type-row {
+      --ck-table-form-cell-type-width: calc((100% - 2 * var(--ck-spacing-large, var(--ck-spacing-lg))) / 3 * 2 + var(--ck-spacing-large, var(--ck-spacing-lg)));
+      width: var(--ck-table-form-cell-type-width);
+      max-width: var(--ck-table-form-cell-type-width);
+      min-width: var(--ck-table-form-cell-type-width);
+      padding: 0;
+
+      & .ck-dropdown {
+        width: 100%;
+      }
+    }
+  }
 }
 
-:root {
+:root, :host {
   --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;
@@ -221,274 +133,375 @@
   --ck-table-layout-default-border-color: #d4d4d4;
 }
 
-.ck-content table.table.layout-table, .ck-content figure.table.layout-table {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.ck-content table.table.layout-table, .ck-content figure.table.layout-table > table {
-  border-spacing: 0;
-}
-
-.ck-editor__editable .table.layout-table > table {
-  border-collapse: revert;
-  width: 100%;
-  height: 100%;
-}
-
-.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-width: 0;
-  border-color: #0000;
-  outline: none;
-}
-
-.ck-editor__editable .table.layout-table > table > tbody > tr > td {
-  box-shadow: revert;
-  padding: revert;
-  text-indent: 1px;
-  border-color: var(--ck-table-layout-default-border-color);
-  border-style: dashed;
-  min-width: 2em;
-}
-
-.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;
-}
-
-.ck-editor__editable .table.layout-table > table > tbody > tr > td:focus {
-  background-color: #0000;
-}
-
-.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"]) {
-  outline: var(--ck-table-layout-default-border-color) 1px dashed;
-  outline-offset: -1px;
-  border-width: 0;
-  border-color: #0000;
-}
-
-.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;
-}
-
-.ck-editor__editable .table.layout-table > table > tbody > tr > td > .ck-table-bogus-paragraph {
-  text-indent: 0;
-  width: calc(100% - 1px);
-}
-
-.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 {
-  z-index: 2;
-  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);
-  border-radius: 0 0 100px 100px;
-  left: min(10%, 30px);
-}
-
-.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 {
+    & > table {
+      border-collapse: revert;
+      width: 100%;
+      height: 100%;
+
+      &: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-width: 0;
+        border-color: #0000;
+        outline: none;
+      }
+    }
+
+    & > table > tbody > tr > td {
+      box-shadow: revert;
+      padding: revert;
+      text-indent: 1px;
+      border-color: var(--ck-table-layout-default-border-color);
+      border-style: dashed;
+      min-width: 2em;
+
+      &[style^="width:"], &[style*=" width:"], &[style*=";width:"] {
+        min-width: auto;
+      }
+
+      &:focus {
+        background-color: #0000;
+      }
+
+      &:not([style*="border:"], [style*="border-top"], [style*="border-bottom"], [style*="border-left"], [style*="border-right"], [style*="border-width"], [style*="border-style"], [style*="border-color"]) {
+        outline: var(--ck-table-layout-default-border-color) 1px dashed;
+        outline-offset: -1px;
+        border-width: 0;
+        border-color: #0000;
+
+        &:focus {
+          outline: var(--ck-color-focus-border, var(--ck-color-interactive-focus-border)) 1px solid;
+        }
+      }
+
+      & > .ck-table-bogus-paragraph {
+        text-indent: 0;
+        width: calc(100% - 1px);
+      }
+    }
+
+    &.ck-widget {
+      & > .ck-widget__type-around {
+        --ck-widget-type-around-button-size: var(--ck-table-layout-widget-type-around-button-size);
+
+        & > .ck-widget__type-around__button {
+          &.ck-widget__type-around__button_before, &.ck-widget__type-around__button_after {
+            z-index: 2;
+            transform: translateY(0);
+          }
+
+          &.ck-widget__type-around__button_before {
+            margin-left: var(--ck-table-layout-widget-type-around-button-size);
+            border-radius: 0 0 100px 100px;
+            left: min(10%, 30px);
+
+            &:after {
+              border-radius: 0 0 100px 100px;
+            }
+          }
+
+          &.ck-widget__type-around__button_after {
+            border-radius: 100px 100px 0 0;
+
+            &:after {
+              border-radius: 100px 100px 0 0;
+            }
+          }
+
+          & svg {
+            width: var(--ck-table-layout-widget-type-around-icon-width);
+            height: var(--ck-table-layout-widget-type-around-icon-height);
+          }
+        }
+      }
+
+      &.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: 3;
+        }
+      }
+
+      &.ck-widget_type-around_show-fake-caret_before {
+        & > .ck-widget__type-around {
+          & > .ck-widget__type-around__fake-caret {
+            top: 0;
+          }
+        }
+      }
+
+      &.ck-widget_type-around_show-fake-caret_after {
+        & > .ck-widget__type-around {
+          & > .ck-widget__type-around__fake-caret {
+            bottom: 0;
+          }
+        }
+      }
+
+      &:hover {
+        z-index: var(--ck-z-default, var(--ck-z-base));
+      }
+
+      &:hover > .ck-widget__selection-handle {
+        opacity: .75;
+        visibility: visible;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+
+      &:has(.ck-widget.table:hover) > .ck-widget__selection-handle {
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      &.ck-widget_selected {
+        z-index: var(--ck-z-default, var(--ck-z-base));
+      }
+    }
+
+    margin: 0;
+    display: table;
+  }
 
-.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_inline {
+    & > .ck-widget.ck-widget_with-selection-handle.layout-table {
+      &:first-child {
+        margin-top: var(--ck-spacing-large, var(--ck-spacing-lg));
+      }
 
-.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: 3;
-}
-
-.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;
+      &:last-child, &:nth-last-child(2):has( + .ck-fake-selection-container) {
+        margin-bottom: var(--ck-spacing-large, var(--ck-spacing-lg));
+      }
+    }
+  }
 }
 
-.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;
+:root, :host {
+  --ck-table-scroll-widget-type-around-icon-width: 10px;
+  --ck-table-scroll-widget-type-around-icon-height: 8px;
 }
 
-.ck-editor__editable .table.layout-table.ck-widget:hover {
-  z-index: var(--ck-z-default);
-}
+.ck.ck-editor__editable figure.table.ck-table-overflowing {
+  flex-direction: column;
+  max-width: 100%;
+  margin-right: 0;
+  display: flex;
+  overflow: scroll clip;
 
-.ck-editor__editable .table.layout-table.ck-widget:hover > .ck-widget__selection-handle {
-  opacity: .75;
-  visibility: visible;
+  & > figcaption {
+    box-sizing: border-box;
+    order: -1;
+    align-self: flex-start;
+  }
 }
 
-.ck-editor__editable .table.layout-table.ck-widget:hover > .ck-widget__selection-handle:hover {
-  opacity: 1;
-}
+.ck.ck-editor__editable figure.table.ck-table-overflowing.ck-widget {
+  --ck-table-scroll-offset: 0px;
 
-.ck-editor__editable .table.layout-table.ck-widget:has(.ck-widget.table:hover) > .ck-widget__selection-handle {
-  opacity: 0;
-  visibility: hidden;
-}
+  & > table > :is(tbody, thead, tfoot) > tr > :is(td, th):last-of-type {
+    --ck-table-column-resizer-position-offset: 0;
+    --ck-table-column-resizer-width: 3.5px;
+  }
 
-.ck-editor__editable .table.layout-table.ck-widget.ck-widget_selected {
-  z-index: var(--ck-z-default);
-}
+  &.ck-widget_with-selection-handle > .ck-widget__selection-handle {
+    --ck-widget-handler-icon-size: 10px;
+    transform: translate(var(--ck-table-scroll-offset), calc(0px - var(--ck-widget-outline-thickness)));
+    z-index: 3;
+  }
 
-.ck-editor__editable .table.layout-table {
-  margin: 0;
-  display: table;
-}
+  & > .ck-widget__type-around {
+    --ck-widget-type-around-button-size: 16px;
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+
+    & > .ck-widget__type-around__button {
+      &.ck-widget__type-around__button_before, &.ck-widget__type-around__button_after {
+        transform: translate(var(--ck-table-scroll-offset), 0);
+        z-index: 2;
+      }
+
+      &.ck-widget__type-around__button_before {
+        margin-left: var(--ck-widget-type-around-button-size);
+        border-radius: 0 0 100px 100px;
+        left: min(10%, 30px);
+
+        &:after {
+          border-radius: 0 0 100px 100px;
+        }
+      }
+
+      &.ck-widget__type-around__button_after {
+        bottom: calc(-.5 * var(--ck-widget-outline-thickness));
+        border-radius: 100px 100px 0 0;
+        right: min(10%, 30px);
+
+        &:after {
+          border-radius: 100px 100px 0 0;
+        }
+      }
+
+      & svg {
+        width: var(--ck-table-scroll-widget-type-around-icon-width);
+        height: var(--ck-table-scroll-widget-type-around-icon-height);
+      }
+    }
+  }
 
-.ck-editor__editable.ck-editor__editable_inline > .ck-widget.ck-widget_with-selection-handle.layout-table:first-child {
-  margin-top: var(--ck-spacing-large);
-}
+  &.ck-widget_type-around_show-fake-caret_before {
+    & > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
+      top: 0;
+    }
+  }
 
-.ck-editor__editable.ck-editor__editable_inline > .ck-widget.ck-widget_with-selection-handle.layout-table:last-child, .ck-editor__editable.ck-editor__editable_inline > .ck-widget.ck-widget_with-selection-handle.layout-table:nth-last-child(2):has( + .ck-fake-selection-container) {
-  margin-bottom: var(--ck-spacing-large);
+  &.ck-widget_type-around_show-fake-caret_after {
+    & > .ck-widget__type-around > .ck-widget__type-around__fake-caret {
+      bottom: 0;
+    }
+  }
 }
 
-.ck.ck-form__row > :not(.ck-label) + * {
-  margin-inline-start: var(--ck-spacing-large);
-}
+.ck.ck-form__row {
+  & > :not(.ck-label) {
+    & + * {
+      margin-inline-start: var(--ck-spacing-large, var(--ck-spacing-lg));
+    }
+  }
 
-.ck.ck-form__row > .ck-label {
-  width: 100%;
-  min-width: 100%;
-}
+  & > .ck-label {
+    width: 100%;
+    min-width: 100%;
+  }
 
-.ck.ck-form__row.ck-table-form__action-row {
-  margin-top: var(--ck-spacing-large);
-  justify-content: flex-end;
-}
+  &.ck-table-form__action-row {
+    justify-content: flex-end;
 
-.ck.ck-form__row.ck-table-form__action-row .ck-button-save, .ck.ck-form__row.ck-table-form__action-row .ck-button-cancel {
-  justify-content: center;
+    & .ck-button-save, & .ck-button-cancel {
+      justify-content: center;
+    }
+  }
 }
 
-:root {
+:root, :host {
   --ck-table-properties-error-arrow-size: 6px;
   --ck-table-properties-min-error-width: 150px;
 }
 
 .ck.ck-table-form {
   --ck-table-form-default-input-width: 80px;
-}
-
-.ck.ck-table-form .ck-form__row.ck-table-form__border-row .ck-labeled-field-view > .ck-label {
-  font-size: var(--ck-font-size-tiny);
-  text-align: center;
-}
-
-.ck.ck-table-form .ck-form__row.ck-table-form__border-row .ck-table-form__border-style, .ck.ck-table-form .ck-form__row.ck-table-form__border-row .ck-table-form__border-width {
-  width: var(--ck-table-form-default-input-width);
-  min-width: var(--ck-table-form-default-input-width);
-  max-width: var(--ck-table-form-default-input-width);
-}
-
-.ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row {
-  --ck-table-form-dimensions-input-width: calc(var(--ck-table-form-default-input-width) * 2 + var(--ck-spacing-large));
-  width: var(--ck-table-form-dimensions-input-width);
-  max-width: var(--ck-table-form-dimensions-input-width);
-  min-width: var(--ck-table-form-dimensions-input-width);
-  padding: 0;
-}
-
-.ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimensions-row__width, .ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimensions-row__height {
-  width: var(--ck-table-form-default-input-width);
-  min-width: var(--ck-table-form-default-input-width);
-  max-width: var(--ck-table-form-default-input-width);
-  margin: 0;
-}
-
-.ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row .ck-table-form__dimension-operator {
-  width: 0;
-  height: var(--ck-ui-component-min-height);
-  line-height: var(--ck-ui-component-min-height);
-  margin: 0 var(--ck-spacing-small);
-  align-self: flex-end;
-  display: inline-block;
-  position: relative;
-  left: -.5ch;
-  overflow: visible;
-}
-
-.ck.ck-table-form .ck-form__row.ck-table-form__border-row, .ck.ck-table-form .ck-form__row.ck-table-form__background-row, .ck.ck-table-form .ck-form__row.ck-table-form__cell-type-row {
-  flex-wrap: wrap;
-}
-
-.ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row, .ck.ck-table-form .ck-form__row.ck-table-form__cell-type-row {
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-:is(.ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row, .ck.ck-table-form .ck-form__row.ck-table-form__cell-type-row) .ck-labeled-field-view {
-  flex-direction: column-reverse;
-  align-items: center;
-  display: flex;
-}
-
-:is(.ck.ck-table-form .ck-form__row.ck-table-form__dimensions-row, .ck.ck-table-form .ck-form__row.ck-table-form__cell-type-row) .ck-labeled-field-view .ck.ck-dropdown {
-  flex-grow: 0;
-}
-
-.ck.ck-table-form .ck-form__row:not(.ck-table-form__action-row) > :not(.ck-label, .ck-table-form__dimension-operator) {
-  flex-grow: 1;
-}
-
-.ck.ck-table-form .ck.ck-labeled-field-view {
-  padding-top: var(--ck-spacing-standard);
-}
-
-.ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status {
-  border-radius: var(--ck-rounded-corners-radius);
-  background: var(--ck-color-base-error);
-  color: var(--ck-color-base-background);
-  padding: var(--ck-spacing-small) var(--ck-spacing-medium);
-  min-width: var(--ck-table-properties-min-error-width);
-  text-align: center;
-  left: 50%;
-  bottom: calc(-1 * var(--ck-table-properties-error-arrow-size));
-  animation: .15s both ck-table-form-labeled-view-status-appear;
-  position: absolute;
-  transform: translate(-50%, 100%);
-}
-
-.ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status:after {
-  border-color: transparent transparent var(--ck-color-base-error) transparent;
-  border-width: 0 var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size);
-  content: "";
-  top: calc(-1 * var(--ck-table-properties-error-arrow-size));
-  border-style: solid;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status {
-    animation: none;
+  & .ck-form__row {
+    &.ck-table-form__border-row {
+      & .ck-table-form__border-style, & .ck-table-form__border-width, & .ck-table-form__border-color {
+        width: calc((100% - 2 * var(--ck-spacing-large, var(--ck-spacing-lg))) / 3);
+        flex: none;
+        min-width: 0;
+      }
+
+      & .ck-table-form__border-style .ck-dropdown {
+        width: 100%;
+      }
+    }
+
+    &.ck-table-form__dimensions-row {
+      --ck-table-form-dimensions-input-width: calc((100% - 2 * var(--ck-spacing-large, var(--ck-spacing-lg))) / 3 * 2 + var(--ck-spacing-large, var(--ck-spacing-lg)));
+      width: var(--ck-table-form-dimensions-input-width);
+      max-width: var(--ck-table-form-dimensions-input-width);
+      min-width: var(--ck-table-form-dimensions-input-width);
+      padding: 0;
+
+      & .ck-table-form__dimensions-row__width, & .ck-table-form__dimensions-row__height {
+        flex: 1 1 0;
+        margin: 0;
+      }
+
+      & .ck-table-form__dimension-operator {
+        width: 0;
+        height: var(--ck-size-control-min-height);
+        line-height: var(--ck-size-control-min-height);
+        margin: 0 calc(var(--ck-spacing-large, var(--ck-spacing-lg)) / 2);
+        align-self: flex-end;
+        display: inline-block;
+        position: relative;
+        left: -.5ch;
+        overflow: visible;
+      }
+    }
+
+    &.ck-table-form__background-row {
+      --ck-table-form-background-width: calc((100% - 2 * var(--ck-spacing-large, var(--ck-spacing-lg))) / 3);
+      width: var(--ck-table-form-background-width);
+      max-width: var(--ck-table-form-background-width);
+      min-width: var(--ck-table-form-background-width);
+    }
+
+    &.ck-table-form__border-row, &.ck-table-form__background-row, &.ck-table-form__cell-type-row {
+      flex-wrap: wrap;
+    }
+
+    &.ck-table-form__dimensions-row, &.ck-table-form__cell-type-row {
+      flex-wrap: wrap;
+      align-items: center;
+
+      & .ck-labeled-field-view {
+        flex-direction: column-reverse;
+        align-items: center;
+        display: flex;
+
+        & .ck.ck-dropdown {
+          flex-grow: 0;
+        }
+      }
+    }
+
+    &:not(.ck-table-form__action-row) > :not(.ck-label, .ck-table-form__dimension-operator) {
+      flex-grow: 1;
+    }
   }
-}
-
-.ck.ck-table-form .ck.ck-labeled-field-view .ck.ck-labeled-field-view__status {
-  z-index: 1;
-}
-
-.ck.ck-table-form .ck.ck-labeled-field-view .ck-input.ck-error:not(:focus) + .ck.ck-labeled-field-view__status {
-  display: none;
-}
 
-.ck.ck-table-form .ck.ck-labeled-field-view {
-  position: relative;
+  & .ck.ck-labeled-field-view {
+    padding-top: var(--ck-spacing-standard, var(--ck-spacing-base));
+
+    & .ck.ck-labeled-field-view__status {
+      border-radius: var(--ck-rounded-corners-radius, var(--ck-radius-corners));
+      background: var(--ck-color-base-error);
+      color: var(--ck-color-base-background);
+      padding: var(--ck-spacing-small, var(--ck-spacing-sm)) var(--ck-spacing-medium, var(--ck-spacing-base));
+      min-width: var(--ck-table-properties-min-error-width);
+      text-align: center;
+      left: 50%;
+      bottom: calc(-1 * var(--ck-table-properties-error-arrow-size));
+      animation: .15s both ck-table-form-labeled-view-status-appear;
+      position: absolute;
+      transform: translate(-50%, 100%);
+
+      &:after {
+        border-color: transparent transparent var(--ck-color-base-error) transparent;
+        border-width: 0 var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size) var(--ck-table-properties-error-arrow-size);
+        content: "";
+        top: calc(-1 * var(--ck-table-properties-error-arrow-size));
+        border-style: solid;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+
+      z-index: 1;
+    }
+
+    & .ck-input.ck-error:not(:focus) + .ck.ck-labeled-field-view__status {
+      display: none;
+    }
+
+    position: relative;
+  }
 }
 
 @keyframes ck-table-form-labeled-view-status-appear {
@@ -501,122 +514,88 @@
   }
 }
 
-.ck.ck-table-properties-form {
-  width: 320px;
-}
-
-.ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row {
-  flex-wrap: wrap;
-  flex-basis: 0;
-  align-content: baseline;
-  align-self: flex-end;
+:root, :host {
+  --ck-table-properties-width: var(--ck-width-balloon-form);
 }
 
-.ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar {
-  margin-top: var(--ck-spacing-standard);
-  background: none;
-}
-
-.ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar .ck-toolbar__items > * {
-  flex: 1;
-}
-
-.ck.ck-table-properties-form .ck-form__row.ck-table-properties-form__alignment-row .ck.ck-toolbar .ck-toolbar__items {
-  flex-wrap: nowrap;
+.ck.ck-table-properties-form {
+  width: var(--ck-table-properties-width);
+
+  & .ck-form__row {
+    &.ck-table-properties-form__alignment-row {
+      flex-wrap: wrap;
+      flex-basis: 0;
+      align-content: baseline;
+      align-self: flex-end;
+
+      & .ck.ck-toolbar {
+        margin-top: var(--ck-spacing-standard);
+        background: none;
+
+        & .ck-toolbar__items > * {
+          flex: 1;
+        }
+      }
+
+      & .ck.ck-toolbar .ck-toolbar__items {
+        flex-wrap: nowrap;
+      }
+    }
+  }
 }
 
-:root {
+:root, :host {
   --ck-content-table-style-spacing: 1.5em;
 }
 
-.ck-content .table.table-style-align-left {
-  float: left;
-  margin-right: var(--ck-content-table-style-spacing);
-}
-
-.ck-content .table.table-style-align-right {
-  float: right;
-  margin-left: var(--ck-content-table-style-spacing);
-}
+.ck-editor__editable {
+  & .table.layout-table {
+    &.table-style-align-center {
+      margin-left: auto;
+      margin-right: auto;
+    }
 
-.ck-content .table.table-style-align-center {
-  margin-left: auto;
-  margin-right: auto;
-}
+    &.table-style-align-left {
+      margin-right: var(--ck-content-table-style-spacing);
+    }
 
-.ck-content .table.table-style-block-align-left {
-  margin-left: 0;
-  margin-right: auto;
-}
+    &.table-style-align-right {
+      margin-left: var(--ck-content-table-style-spacing);
+    }
 
-.ck-content .table.table-style-block-align-right {
-  margin-left: auto;
-  margin-right: 0;
-}
-
-.ck-editor__editable .table.layout-table.table-style-align-center {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.ck-editor__editable .table.layout-table.table-style-align-left {
-  margin-right: var(--ck-content-table-style-spacing);
-}
+    &.table-style-block-align-left {
+      margin-left: 0;
+      margin-right: auto;
+    }
 
-.ck-editor__editable .table.layout-table.table-style-align-right {
-  margin-left: var(--ck-content-table-style-spacing);
-}
-
-.ck-editor__editable .table.layout-table.table-style-block-align-left {
-  margin-left: 0;
-  margin-right: auto;
-}
-
-.ck-editor__editable .table.layout-table.table-style-block-align-right {
-  margin-left: auto;
-  margin-right: 0;
+    &.table-style-block-align-right {
+      margin-left: auto;
+      margin-right: 0;
+    }
+  }
 }
 
-:root {
+:root, :host {
   --ck-content-color-table-caption-background: #f7f7f7;
-  --ck-content-color-table-caption-text: #333;
   --ck-color-table-caption-highlighted-background: #fd0;
 }
 
-.ck-content .table > figcaption, .ck-content figure.table > table > caption {
-  caption-side: top;
-  word-break: normal;
-  overflow-wrap: anywhere;
-  text-align: center;
-  color: var(--ck-content-color-table-caption-text);
-  background-color: var(--ck-content-color-table-caption-background);
-  outline-offset: -1px;
-  padding: .6em;
-  font-size: .75em;
-  display: table-caption;
-}
-
-@media (forced-colors: active) {
-  .ck-content .table > figcaption, .ck-content figure.table > table > caption {
-    background-color: unset;
-    color: unset;
+.ck.ck-editor__editable .table > figcaption, .ck.ck-editor__editable figure.table > table > caption {
+  @media (forced-colors: none) {
+    &.table__caption_highlighted {
+      animation: .6s ease-out ck-table-caption-highlight;
+    }
   }
-}
 
-@media (forced-colors: none) {
-  :is(.ck.ck-editor__editable .table > figcaption, .ck.ck-editor__editable figure.table > table > caption).table__caption_highlighted {
-    animation: .6s ease-out ck-table-caption-highlight;
+  &.ck-placeholder:before {
+    padding-left: inherit;
+    padding-right: inherit;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 }
 
-:is(.ck.ck-editor__editable .table > figcaption, .ck.ck-editor__editable figure.table > table > caption).ck-placeholder:before {
-  padding-left: inherit;
-  padding-right: inherit;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
 @keyframes ck-table-caption-highlight {
   0% {
     background-color: var(--ck-color-table-caption-highlighted-background);
@@ -627,50 +606,44 @@
   }
 }
 
-:root {
+:root, :host {
   --ck-table-selected-cell-background: #9ecffa4d;
 }
 
-.ck.ck-editor__editable .table table :where(td, th).ck-editor__editable_selected {
-  caret-color: #0000;
-  box-shadow: unset;
-  position: relative;
-}
+.ck.ck-editor__editable .table table {
+  & :where(td, th).ck-editor__editable_selected {
+    caret-color: #0000;
+    box-shadow: unset;
+    position: relative;
 
-.ck.ck-editor__editable .table table :where(td, th).ck-editor__editable_selected:after {
-  content: "";
-  pointer-events: none;
-  background-color: var(--ck-table-selected-cell-background);
-  position: absolute;
-  inset: 0;
-}
+    &:after {
+      content: "";
+      pointer-events: none;
+      background-color: var(--ck-table-selected-cell-background);
+      position: absolute;
+      inset: 0;
+    }
 
-.ck.ck-editor__editable .table table :where(td, th).ck-editor__editable_selected ::selection, .ck.ck-editor__editable .table table :where(td, th).ck-editor__editable_selected:focus {
-  background-color: #0000;
-}
+    &:focus, & ::selection {
+      background-color: #0000;
+    }
 
-.ck.ck-editor__editable .table table :where(td, th).ck-editor__editable_selected .ck-widget {
-  outline: unset;
-}
+    & .ck-widget {
+      outline: unset;
 
-.ck.ck-editor__editable .table table :where(td, th).ck-editor__editable_selected .ck-widget > .ck-widget__selection-handle {
-  display: none;
+      & > .ck-widget__selection-handle {
+        display: none;
+      }
+    }
+  }
 }
 
-:root {
+:root, :host {
   --ck-color-table-column-resizer-hover: var(--ck-color-base-active);
   --ck-table-column-resizer-width: 7px;
   --ck-table-column-resizer-position-offset: calc(var(--ck-table-column-resizer-width) * -.5 - .5px);
 }
 
-.ck-content .table .ck-table-resized {
-  table-layout: fixed;
-}
-
-.ck-content .table td, .ck-content .table th {
-  overflow-wrap: break-word;
-}
-
 .ck.ck-editor__editable .table td, .ck.ck-editor__editable .table th {
   position: relative;
 }
@@ -681,8 +654,9 @@
   right: var(--ck-table-column-resizer-position-offset);
   width: var(--ck-table-column-resizer-width);
   cursor: col-resize;
+  -webkit-user-select: none;
   user-select: none;
-  z-index: var(--ck-z-default);
+  z-index: var(--ck-z-default, var(--ck-z-base));
   position: absolute;
 }
 
@@ -700,121 +674,137 @@
   right: unset;
 }
 
-[dir="ltr"] :is(.ck.ck-input-color > .ck.ck-input-text) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-[dir="rtl"] :is(.ck.ck-input-color > .ck.ck-input-text) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.ck.ck-input-color > .ck.ck-input-text:focus {
-  z-index: 0;
-}
-
-.ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button {
-  padding: 0;
-  display: flex;
-}
-
-[dir="ltr"] :is(.ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-[dir="ltr"] :is(.ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button):not(:focus) {
-  border-left: 1px solid #0000;
+.ck-table-column-resize__resizing-cursor, .ck-table-column-resize__resizing-cursor * {
+  cursor: col-resize !important;
 }
 
-[dir="rtl"] :is(.ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+:root, :host {
+  --ck-input-color-preview-border-radius: 0;
 }
 
-[dir="rtl"] :is(.ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button):not(:focus) {
-  border-right: 1px solid #0000;
-}
+.ck.ck-input-color {
+  & > .ck.ck-input-text {
+    [dir="ltr"] & {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    [dir="rtl"] & {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &:focus {
+      z-index: 0;
+    }
+  }
 
-.ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button.ck-disabled {
-  background: var(--ck-color-input-disabled-background);
-}
+  & > .ck.ck-dropdown {
+    & > .ck.ck-button.ck-input-color__button {
+      height: 100%;
+      padding: 0;
+      display: flex;
+
+      [dir="ltr"] & {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+
+        &:not(:focus) {
+          border-left: 1px solid #0000;
+        }
+      }
+
+      [dir="rtl"] & {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+
+        &:not(:focus) {
+          border-right: 1px solid #0000;
+        }
+      }
+
+      &.ck-disabled {
+        background: var(--ck-color-input-disabled-background);
+      }
+
+      & > .ck.ck-input-color__button__preview {
+        border-radius: var(--ck-input-color-preview-border-radius);
+        border: 1px solid var(--ck-color-input-border);
+        width: 20px;
+        height: 20px;
+        position: relative;
+        overflow: hidden;
+
+        & > .ck.ck-input-color__button__preview__no-color-indicator {
+          transform-origin: 50%;
+          background: red;
+          border-radius: 2px;
+          width: 8%;
+          height: 150%;
+          display: block;
+          position: absolute;
+          top: -30%;
+          left: 50%;
+          transform: rotate(45deg);
+        }
+      }
+    }
+  }
 
-.ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview {
-  border-radius: var(--ck-rounded-corners-radius);
-  border: 1px solid var(--ck-color-input-border);
-  width: 20px;
-  height: 20px;
-  position: relative;
-  overflow: hidden;
-}
+  & .ck.ck-input-color__remove-color {
+    width: 100%;
+    padding: calc(var(--ck-spacing-standard, var(--ck-spacing-base)) / 2) var(--ck-spacing-standard, var(--ck-spacing-base));
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
 
-.ck.ck-input-color > .ck.ck-dropdown > .ck.ck-button.ck-input-color__button > .ck.ck-input-color__button__preview > .ck.ck-input-color__button__preview__no-color-indicator {
-  transform-origin: 50%;
-  background: red;
-  border-radius: 2px;
-  width: 8%;
-  height: 150%;
-  display: block;
-  position: absolute;
-  top: -30%;
-  left: 50%;
-  transform: rotate(45deg);
-}
+    &:not(:focus) {
+      border-bottom: 1px solid var(--ck-color-input-border);
+    }
 
-.ck.ck-input-color .ck.ck-input-color__remove-color {
-  width: 100%;
-  padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard);
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
+    [dir="ltr"] & {
+      border-top-right-radius: 0;
+    }
 
-.ck.ck-input-color .ck.ck-input-color__remove-color:not(:focus) {
-  border-bottom: 1px solid var(--ck-color-input-border);
-}
-
-[dir="ltr"] :is(.ck.ck-input-color .ck.ck-input-color__remove-color) {
-  border-top-right-radius: 0;
-}
-
-[dir="rtl"] :is(.ck.ck-input-color .ck.ck-input-color__remove-color) {
-  border-top-left-radius: 0;
-}
+    [dir="rtl"] & {
+      border-top-left-radius: 0;
+    }
 
-.ck.ck-input-color .ck.ck-input-color__remove-color .ck.ck-icon {
-  margin-right: var(--ck-spacing-standard);
-}
+    & .ck.ck-icon {
+      margin-right: var(--ck-spacing-standard, var(--ck-spacing-base));
 
-[dir="rtl"] :is(.ck.ck-input-color .ck.ck-input-color__remove-color .ck.ck-icon) {
-  margin-right: 0;
-  margin-left: var(--ck-spacing-standard);
-}
+      [dir="rtl"] & {
+        margin-right: 0;
+        margin-left: var(--ck-spacing-standard, var(--ck-spacing-base));
+      }
+    }
+  }
 
-.ck.ck-input-color {
   flex-direction: row-reverse;
   width: 100%;
   display: flex;
-}
 
-.ck.ck-input-color > input.ck.ck-input-text {
-  flex-grow: 1;
-  min-width: auto;
-}
+  & > input.ck.ck-input-text {
+    flex-grow: 1;
+    min-width: auto;
+  }
 
-.ck.ck-input-color > div.ck.ck-dropdown {
-  min-width: auto;
-}
+  & > div.ck.ck-dropdown {
+    min-width: auto;
 
-.ck.ck-input-color > div.ck.ck-dropdown > .ck-input-color__button .ck-dropdown__arrow {
-  display: none;
+    & > .ck-input-color__button .ck-dropdown__arrow {
+      display: none;
+    }
+  }
 }
 
-:root {
-  --ck-insert-table-dropdown-padding: 10px;
-  --ck-insert-table-dropdown-box-height: 11px;
-  --ck-insert-table-dropdown-box-width: 12px;
+:root, :host {
+  --ck-insert-table-dropdown-padding: var(--ck-spacing-padding);
+  --ck-insert-table-dropdown-box-height: 16px;
+  --ck-insert-table-dropdown-box-width: 16px;
   --ck-insert-table-dropdown-box-margin: 1px;
+  --ck-insert-table-dropdown-box-border-radius: var(--ck-radius-xs);
+  --ck-insert-table-dropdown-label-font-size: var(--ck-font-size-sm);
+  --ck-insert-table-dropdown-label-padding: var(--ck-spacing-padding-compact) 0;
 }
 
 .ck .ck-insert-table-dropdown__grid {
@@ -826,31 +816,172 @@
 
 .ck .ck-insert-table-dropdown__label, .ck[dir="rtl"] .ck-insert-table-dropdown__label {
   text-align: center;
+  font-size: var(--ck-insert-table-dropdown-label-font-size);
+  padding: var(--ck-insert-table-dropdown-label-padding);
 }
 
 .ck .ck-insert-table-dropdown-grid-box {
   min-width: var(--ck-insert-table-dropdown-box-width);
   min-height: var(--ck-insert-table-dropdown-box-height);
   margin: var(--ck-insert-table-dropdown-box-margin);
-  border: 1px solid var(--ck-color-base-border);
-  border-radius: 1px;
+  border: var(--ck-border-width-thin) solid var(--ck-color-base-border);
+  border-radius: var(--ck-insert-table-dropdown-box-border-radius);
   outline: none;
   transition: none;
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .ck .ck-insert-table-dropdown-grid-box {
+  @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
+
+  &:focus {
+    box-shadow: none;
+  }
+
+  &.ck-on {
+    border-color: var(--ck-color-focus-border, var(--ck-color-interactive-focus-border));
+    background: var(--ck-color-focus-outer-shadow, var(--ck-focus-shadow));
+  }
+}
+
+:root, :host {
+  --ck-content-table-style-spacing: 1.5em;
+  --ck-content-color-table-caption-background: #f7f7f7;
+  --ck-content-color-table-caption-text: #333;
+}
+
+.ck-content {
+  & .table th {
+    text-align: start;
+  }
+
+  &[dir="rtl"] .table th {
+    text-align: right;
+  }
+
+  &[dir="ltr"] .table th {
+    text-align: left;
+  }
+
+  & figure.table:not(.layout-table) {
+    display: table;
+
+    & > table {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  & .table:not(.layout-table) {
+    margin: .9em auto;
+  }
+
+  & table.table:not(.layout-table), & figure.table:not(.layout-table) > table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    border: 1px double #b3b3b3;
+
+    & > thead, & > tfoot, & > tbody {
+      & > tr {
+        & > th {
+          background: #0000000d;
+          font-weight: bold;
+        }
+
+        & > td, & > th {
+          & > p:first-of-type {
+            margin-top: 0;
+          }
+
+          & > p:last-of-type {
+            margin-bottom: 0;
+          }
+
+          border: 1px solid #bfbfbf;
+          min-width: 2em;
+          padding: .4em;
+        }
+      }
+    }
+  }
+}
+
+@media print {
+  .ck-content figure.table {
+    &:not(.layout-table) {
+      width: fit-content;
+      height: fit-content;
+    }
+
+    &:not(.layout-table) > table {
+      height: initial;
+    }
+  }
+}
+
+.ck-content {
+  & table.table.layout-table, & figure.table.layout-table {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  & table.table.layout-table, & figure.table.layout-table > table {
+    border-spacing: 0;
+  }
+}
+
+.ck-content {
+  & .table {
+    &.table-style-align-left {
+      float: left;
+      margin-right: var(--ck-content-table-style-spacing);
+    }
+
+    &.table-style-align-right {
+      float: right;
+      margin-left: var(--ck-content-table-style-spacing);
+    }
+
+    &.table-style-align-center {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    &.table-style-block-align-left {
+      margin-left: 0;
+      margin-right: auto;
+    }
+
+    &.table-style-block-align-right {
+      margin-left: auto;
+      margin-right: 0;
+    }
+  }
 }
 
-.ck .ck-insert-table-dropdown-grid-box:focus {
-  box-shadow: none;
+.ck-content .table > figcaption, .ck-content figure.table > table > caption {
+  caption-side: top;
+  word-break: normal;
+  overflow-wrap: anywhere;
+  text-align: center;
+  color: var(--ck-content-color-table-caption-text);
+  background-color: var(--ck-content-color-table-caption-background);
+  outline-offset: -1px;
+  padding: .6em;
+  font-size: .75em;
+  display: table-caption;
+
+  @media (forced-colors: active) {
+    background-color: unset;
+    color: unset;
+  }
+}
+
+.ck-content .table .ck-table-resized {
+  table-layout: fixed;
 }
 
-.ck .ck-insert-table-dropdown-grid-box.ck-on {
-  border-color: var(--ck-color-focus-border);
-  background: var(--ck-color-focus-outer-shadow);
+.ck-content .table td, .ck-content .table th {
+  overflow-wrap: break-word;
 }
 
 /*# sourceMappingURL=index.css.map */