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

package/LICENSE.md

@@ -18,7 +18,7 @@ Where not otherwise indicated, all CKEditor 5 content is authored by CKSour
 
 The following libraries are included in CKEditor 5 under the [MIT license](https://opensource.org/licenses/MIT):
 
-* es-toolkit - Copyright (c) 2024 Viva Republica, Inc and Copyright OpenJS Foundation and other contributors.
+* es-toolkit - Copyright (c) 2024 Viva Republica, Inc.
 
 Trademarks
 ----------

package/dist/augmentation.d.ts

@@ -1,24 +1,24 @@
 /**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import type { StyleConfig, StyleCommand, Style, StyleEditing, StyleUI, StyleUtils } from './index.js';
-declare module '@ckeditor/ckeditor5-core' {
-    interface PluginsMap {
-        [Style.pluginName]: Style;
-        [StyleEditing.pluginName]: StyleEditing;
-        [StyleUI.pluginName]: StyleUI;
-        [StyleUtils.pluginName]: StyleUtils;
-    }
-    interface CommandsMap {
-        style: StyleCommand;
-    }
-    interface EditorConfig {
-        /**
-         * The configuration of the {@link module:style/style~Style} feature.
-         *
-         * Read more in {@link module:style/styleconfig~StyleConfig}.
-         */
-        style?: StyleConfig;
-    }
+* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+*/
+import type { StyleConfig, StyleCommand, Style, StyleEditing, StyleUI, StyleUtils } from "./index.js";
+declare module "@ckeditor/ckeditor5-core" {
+	interface PluginsMap {
+		[Style.pluginName]: Style;
+		[StyleEditing.pluginName]: StyleEditing;
+		[StyleUI.pluginName]: StyleUI;
+		[StyleUtils.pluginName]: StyleUtils;
+	}
+	interface CommandsMap {
+		style: StyleCommand;
+	}
+	interface EditorConfig {
+		/**
+		* The configuration of the {@link module:style/style~Style} feature.
+		*
+		* Read more in {@link module:style/styleconfig~StyleConfig}.
+		*/
+		style?: StyleConfig;
+	}
 }

package/dist/index-content.css

@@ -2,3 +2,6 @@
  * @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
  */
+
+
+/*# sourceMappingURL=index-content.css.map */

package/dist/index-content.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index-content.css"],"names":[],"mappings":";;;;;;AAEA,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC","file":"index-content.css.map","sourcesContent":["\n\n/*# sourceMappingURL=index-content.css.map */"]}

package/dist/index-editor.css

@@ -2,129 +2,134 @@
  * @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.ck-dropdown.ck-style-dropdown.ck-style-dropdown_multiple-active > .ck-button > .ck-button__label{
-  font-style:italic;
-}
-
-:root{
-  --ck-style-panel-button-width:120px;
-  --ck-style-panel-button-height:80px;
-  --ck-style-panel-button-label-background:#f0f0f0;
-  --ck-style-panel-button-hover-label-background:#ebebeb;
-  --ck-style-panel-button-hover-border-color:#b3b3b3;
-  --ck-style-panel-columns:3;
-}
-
-.ck.ck-style-panel .ck-style-grid{
-  row-gap:var(--ck-spacing-large);
-  column-gap:var(--ck-spacing-large);
-  grid-template-columns:repeat(var(--ck-style-panel-columns),auto);
-  display:grid;
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button{
-  --ck-color-button-default-hover-background:var(--ck-color-base-background);
-  --ck-color-button-default-active-background:var(--ck-color-base-background);
-  width:var(--ck-style-panel-button-width);
-  height:var(--ck-style-panel-button-height);
-  justify-content:space-between;
-  padding:0;
-  display:flex;
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(:focus){
-  border:1px solid var(--ck-color-base-border);
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-button__label{
-  width:100%;
-  height:22px;
-  padding:0 var(--ck-spacing-medium);
-  text-overflow:ellipsis;
-  flex-shrink:0;
-  line-height:22px;
-  overflow:hidden;
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview{
-  opacity:.9;
-  width:100%;
-  padding:var(--ck-spacing-medium);
-  background:var(--ck-color-base-background);
-  border:2px solid var(--ck-color-base-background);
-  flex-grow:1;
-  flex-basis:100%;
-  place-content:center flex-start;
-  align-items:center;
-  display:flex;
-  overflow:hidden;
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled{
-  --ck-color-button-default-disabled-background:var(--ck-color-base-foreground);
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled:not(:focus){
-  border-color:var(--ck-style-panel-button-label-background);
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled .ck-style-grid__button__preview{
-  opacity:.4;
-  border-color:var(--ck-color-base-foreground);
-  filter:saturate(.3);
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-on{
-  border-color:var(--ck-color-base-active);
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-on .ck-button__label{
-  box-shadow:0 -1px 0 var(--ck-color-base-active);
-  z-index:1;
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-on:hover{
-  border-color:var(--ck-color-base-active-focus);
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(.ck-on) .ck-button__label{
-  background:var(--ck-style-panel-button-label-background);
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(.ck-on):hover .ck-button__label{
-  background:var(--ck-style-panel-button-hover-label-background);
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button:hover:not(.ck-disabled):not(.ck-on){
-  border-color:var(--ck-style-panel-button-hover-border-color);
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button:hover:not(.ck-disabled):not(.ck-on) .ck-style-grid__button__preview{
-  opacity:1;
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button{
-  flex-direction:column;
-}
-
-.ck.ck-style-panel .ck-style-grid{
-  justify-content:start;
-}
-
-.ck.ck-style-panel .ck-style-panel__style-group > .ck-label{
-  margin:var(--ck-spacing-large) 0;
-}
-
-.ck.ck-style-panel .ck-style-panel__style-group:first-child > .ck-label{
-  margin-top:0;
-}
-
-:root{
-  --ck-style-panel-max-height:470px;
-}
-
-.ck.ck-style-panel{
-  padding:var(--ck-spacing-large);
-  max-height:var(--ck-style-panel-max-height);
-  overflow-y:auto;
-}
+.ck.ck-dropdown.ck-style-dropdown.ck-style-dropdown_multiple-active > .ck-button > .ck-button__label {
+  font-style: italic;
+}
+
+:root, :host {
+  --ck-style-panel-button-width: 120px;
+  --ck-style-panel-button-height: 80px;
+  --ck-style-panel-button-label-background: var(--ck-color-base-hover);
+  --ck-style-panel-button-hover-label-background: #ebebeb;
+  --ck-style-panel-button-hover-border-color: #b3b3b3;
+  --ck-style-panel-columns: 3;
+}
+
+.ck.ck-style-panel .ck-style-grid {
+  row-gap: var(--ck-spacing-large, var(--ck-spacing-lg));
+  column-gap: var(--ck-spacing-large, var(--ck-spacing-lg));
+  grid-template-columns: repeat(var(--ck-style-panel-columns),auto);
+  display: grid;
+
+  & .ck-style-grid__button {
+    --ck-color-button-default-hover-background: var(--ck-color-base-background);
+    --ck-color-button-default-active-background: var(--ck-color-base-background);
+    width: var(--ck-style-panel-button-width);
+    height: var(--ck-style-panel-button-height);
+    justify-content: space-between;
+    padding: 0;
+    display: flex;
+
+    &:not(:focus) {
+      border: 1px solid var(--ck-color-base-border);
+    }
+
+    & .ck-button__label {
+      width: 100%;
+      height: 22px;
+      padding: 0 var(--ck-spacing-medium, var(--ck-spacing-base));
+      text-overflow: ellipsis;
+      flex-shrink: 0;
+      line-height: 22px;
+      overflow: hidden;
+    }
+
+    & .ck-style-grid__button__preview {
+      opacity: .9;
+      width: 100%;
+      padding: var(--ck-spacing-medium, var(--ck-spacing-base));
+      background: var(--ck-color-base-background);
+      border: 2px solid var(--ck-color-base-background);
+      box-sizing: border-box;
+      flex-grow: 1;
+      flex-basis: 100%;
+      place-content: center flex-start;
+      align-items: center;
+      display: flex;
+      overflow: hidden;
+    }
+
+    &.ck-disabled {
+      --ck-color-button-default-disabled-background: var(--ck-color-base-foreground);
+
+      &:not(:focus) {
+        border-color: var(--ck-style-panel-button-label-background);
+      }
+
+      & .ck-style-grid__button__preview {
+        opacity: .4;
+        border-color: var(--ck-color-base-foreground);
+        filter: saturate(.3);
+      }
+    }
+
+    &.ck-on {
+      border-color: var(--ck-color-base-active);
+
+      & .ck-button__label {
+        box-shadow: 0 -1px 0 var(--ck-color-base-active);
+        z-index: 1;
+      }
+
+      &:hover {
+        border-color: var(--ck-color-base-active-focus);
+      }
+    }
+
+    &:not(.ck-on) {
+      & .ck-button__label {
+        background: var(--ck-style-panel-button-label-background);
+      }
+
+      &:hover .ck-button__label {
+        background: var(--ck-style-panel-button-hover-label-background);
+      }
+    }
+
+    &:hover:not(.ck-disabled):not(.ck-on) {
+      border-color: var(--ck-style-panel-button-hover-border-color);
+
+      & .ck-style-grid__button__preview {
+        opacity: 1;
+      }
+    }
+
+    flex-direction: column;
+  }
+
+  justify-content: start;
+}
+
+.ck.ck-style-panel .ck-style-panel__style-group {
+  & > .ck-label {
+    margin: var(--ck-spacing-large, var(--ck-spacing-lg)) 0;
+  }
+
+  &:first-child {
+    & > .ck-label {
+      margin-top: 0;
+    }
+  }
+}
+
+:root, :host {
+  --ck-style-panel-max-height: 470px;
+}
+
+.ck.ck-style-panel {
+  padding: var(--ck-spacing-large, var(--ck-spacing-lg));
+  max-height: var(--ck-style-panel-max-height);
+  overflow-y: auto;
+}
+
+/*# sourceMappingURL=index-editor.css.map */

package/dist/index-editor.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../theme/style.css","index-editor.css","../theme/stylegrid.css","../theme/stylegroup.css","../theme/stylepanel.css"],"names":[],"mappings":"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","file":"index-editor.css.map","sourcesContent":["/*\n * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options\n */\n\n.ck.ck-dropdown.ck-style-dropdown.ck-style-dropdown_multiple-active > .ck-button > .ck-button__label {\n\tfont-style: italic;\n}\n",".ck.ck-dropdown.ck-style-dropdown.ck-style-dropdown_multiple-active > .ck-button > .ck-button__label {\n  font-style: italic;\n}\n\n:root, :host {\n  --ck-style-panel-button-width: 120px;\n  --ck-style-panel-button-height: 80px;\n  --ck-style-panel-button-label-background: var(--ck-color-base-hover);\n  --ck-style-panel-button-hover-label-background: #ebebeb;\n  --ck-style-panel-button-hover-border-color: #b3b3b3;\n  --ck-style-panel-columns: 3;\n}\n\n.ck.ck-style-panel .ck-style-grid {\n  row-gap: var(--ck-spacing-large, var(--ck-spacing-lg));\n  column-gap: var(--ck-spacing-large, var(--ck-spacing-lg));\n  grid-template-columns: repeat(var(--ck-style-panel-columns),auto);\n  display: grid;\n\n  & .ck-style-grid__button {\n    --ck-color-button-default-hover-background: var(--ck-color-base-background);\n    --ck-color-button-default-active-background: var(--ck-color-base-background);\n    width: var(--ck-style-panel-button-width);\n    height: var(--ck-style-panel-button-height);\n    justify-content: space-between;\n    padding: 0;\n    display: flex;\n\n    &:not(:focus) {\n      border: 1px solid var(--ck-color-base-border);\n    }\n\n    & .ck-button__label {\n      width: 100%;\n      height: 22px;\n      padding: 0 var(--ck-spacing-medium, var(--ck-spacing-base));\n      text-overflow: ellipsis;\n      flex-shrink: 0;\n      line-height: 22px;\n      overflow: hidden;\n    }\n\n    & .ck-style-grid__button__preview {\n      opacity: .9;\n      width: 100%;\n      padding: var(--ck-spacing-medium, var(--ck-spacing-base));\n      background: var(--ck-color-base-background);\n      border: 2px solid var(--ck-color-base-background);\n      box-sizing: border-box;\n      flex-grow: 1;\n      flex-basis: 100%;\n      place-content: center flex-start;\n      align-items: center;\n      display: flex;\n      overflow: hidden;\n    }\n\n    &.ck-disabled {\n      --ck-color-button-default-disabled-background: var(--ck-color-base-foreground);\n\n      &:not(:focus) {\n        border-color: var(--ck-style-panel-button-label-background);\n      }\n\n      & .ck-style-grid__button__preview {\n        opacity: .4;\n        border-color: var(--ck-color-base-foreground);\n        filter: saturate(.3);\n      }\n    }\n\n    &.ck-on {\n      border-color: var(--ck-color-base-active);\n\n      & .ck-button__label {\n        box-shadow: 0 -1px 0 var(--ck-color-base-active);\n        z-index: 1;\n      }\n\n      &:hover {\n        border-color: var(--ck-color-base-active-focus);\n      }\n    }\n\n    &:not(.ck-on) {\n      & .ck-button__label {\n        background: var(--ck-style-panel-button-label-background);\n      }\n\n      &:hover .ck-button__label {\n        background: var(--ck-style-panel-button-hover-label-background);\n      }\n    }\n\n    &:hover:not(.ck-disabled):not(.ck-on) {\n      border-color: var(--ck-style-panel-button-hover-border-color);\n\n      & .ck-style-grid__button__preview {\n        opacity: 1;\n      }\n    }\n\n    flex-direction: column;\n  }\n\n  justify-content: start;\n}\n\n.ck.ck-style-panel .ck-style-panel__style-group {\n  & > .ck-label {\n    margin: var(--ck-spacing-large, var(--ck-spacing-lg)) 0;\n  }\n\n  &:first-child {\n    & > .ck-label {\n      margin-top: 0;\n    }\n  }\n}\n\n:root, :host {\n  --ck-style-panel-max-height: 470px;\n}\n\n.ck.ck-style-panel {\n  padding: var(--ck-spacing-large, var(--ck-spacing-lg));\n  max-height: var(--ck-style-panel-max-height);\n  overflow-y: auto;\n}\n\n/*# sourceMappingURL=index-editor.css.map */","/*\n * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options\n */\n\n:root,\n:host {\n\t--ck-style-panel-button-width: 120px;\n\t--ck-style-panel-button-height: 80px;\n\t--ck-style-panel-button-label-background: var(--ck-color-base-hover);\n\t--ck-style-panel-button-hover-label-background: hsl(0, 0%, 92.1%);\n\t--ck-style-panel-button-hover-border-color: hsl(0, 0%, 70%);\n\t--ck-style-panel-columns: 3;\n}\n\n.ck.ck-style-panel .ck-style-grid {\n\trow-gap: var(--ck-spacing-large, var(--ck-spacing-lg));\n\tcolumn-gap: var(--ck-spacing-large, var(--ck-spacing-lg));\n\tdisplay: grid;\n\tgrid-template-columns: repeat(var(--ck-style-panel-columns),auto);\n\n\t& .ck-style-grid__button {\n\t\t--ck-color-button-default-hover-background: var(--ck-color-base-background);\n\t\t--ck-color-button-default-active-background: var(--ck-color-base-background);\n\n\t\tpadding: 0;\n\t\twidth: var(--ck-style-panel-button-width);\n\t\theight: var(--ck-style-panel-button-height);\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\n\t\t/* Let default .ck-button :focus styles apply */\n\t\t&:not(:focus) {\n\t\t\tborder: 1px solid var(--ck-color-base-border);\n\t\t}\n\n\t\t& .ck-button__label {\n\t\t\theight: 22px;\n\t\t\tline-height: 22px;\n\t\t\twidth: 100%;\n\t\t\tpadding: 0 var(--ck-spacing-medium, var(--ck-spacing-base));\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\tflex-shrink: 0;\n\t\t}\n\n\t\t& .ck-style-grid__button__preview {\n\t\t\twidth: 100%;\n\t\t\toverflow: hidden;\n\t\t\topacity: .9;\n\n\t\t\tpadding: var(--ck-spacing-medium, var(--ck-spacing-base));\n\t\t\tbackground: var(--ck-color-base-background);\n\t\t\tborder: 2px solid var(--ck-color-base-background);\n\t\t\tdisplay: flex;\n\t\t\talign-content: center;\n\t\t\tjustify-content: flex-start;\n\t\t\talign-items: center;\n\t\t\tflex-grow: 1;\n\t\t\tflex-basis: 100%;\n\n\t\t\t/* This element carries `.ck-reset_all-excluded`, so it no longer inherits `box-sizing`\n\t\t\tfrom the global reset. Set it explicitly, since the layout below relies on border-box. */\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\t&.ck-disabled {\n\t\t\t--ck-color-button-default-disabled-background: var(--ck-color-base-foreground);\n\n\t\t\t/* Let default .ck-button :focus styles apply */\n\t\t\t&:not(:focus) {\n\t\t\t\tborder-color: var(--ck-style-panel-button-label-background);\n\t\t\t}\n\n\t\t\t& .ck-style-grid__button__preview {\n\t\t\t\topacity: .4;\n\n\t\t\t\tborder-color: var(--ck-color-base-foreground);\n\t\t\t\tfilter: saturate(.3);\n\t\t\t}\n\t\t}\n\n\t\t&.ck-on {\n\t\t\tborder-color: var(--ck-color-base-active);\n\n\t\t\t& .ck-button__label {\n\t\t\t\tbox-shadow: 0 -1px 0 var(--ck-color-base-active);\n\t\t\t\tz-index: 1; /* Stay on top of the preview with the shadow. */\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: var(--ck-color-base-active-focus);\n\t\t\t}\n\t\t}\n\n\t\t&:not(.ck-on) {\n\t\t\t& .ck-button__label {\n\t\t\t\tbackground: var(--ck-style-panel-button-label-background);\n\t\t\t}\n\n\t\t\t&:hover .ck-button__label {\n\t\t\t\tbackground: var(--ck-style-panel-button-hover-label-background);\n\t\t\t}\n\t\t}\n\n\t\t&:hover:not(.ck-disabled):not(.ck-on) {\n\t\t\tborder-color: var(--ck-style-panel-button-hover-border-color);\n\n\t\t\t& .ck-style-grid__button__preview {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\t\tflex-direction: column\n\t}\n\tjustify-content: start\n}\n","/*\n * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options\n */\n\n.ck.ck-style-panel .ck-style-panel__style-group {\n\t& > .ck-label {\n\t\tmargin: var(--ck-spacing-large, var(--ck-spacing-lg)) 0;\n\t}\n\n\t&:first-child {\n\t\t& > .ck-label {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n}\n","/*\n * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options\n */\n\n:root,\n:host {\n\t--ck-style-panel-max-height: 470px;\n}\n\n.ck.ck-style-panel {\n\tpadding: var(--ck-spacing-large, var(--ck-spacing-lg));\n\toverflow-y: auto;\n\tmax-height: var(--ck-style-panel-max-height);\n}\n"]}

package/dist/index.css

@@ -6,125 +6,128 @@
   font-style: italic;
 }
 
-:root {
+:root, :host {
   --ck-style-panel-button-width: 120px;
   --ck-style-panel-button-height: 80px;
-  --ck-style-panel-button-label-background: #f0f0f0;
+  --ck-style-panel-button-label-background: var(--ck-color-base-hover);
   --ck-style-panel-button-hover-label-background: #ebebeb;
   --ck-style-panel-button-hover-border-color: #b3b3b3;
   --ck-style-panel-columns: 3;
 }
 
 .ck.ck-style-panel .ck-style-grid {
-  row-gap: var(--ck-spacing-large);
-  column-gap: var(--ck-spacing-large);
+  row-gap: var(--ck-spacing-large, var(--ck-spacing-lg));
+  column-gap: var(--ck-spacing-large, var(--ck-spacing-lg));
   grid-template-columns: repeat(var(--ck-style-panel-columns),auto);
   display: grid;
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button {
-  --ck-color-button-default-hover-background: var(--ck-color-base-background);
-  --ck-color-button-default-active-background: var(--ck-color-base-background);
-  width: var(--ck-style-panel-button-width);
-  height: var(--ck-style-panel-button-height);
-  justify-content: space-between;
-  padding: 0;
-  display: flex;
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(:focus) {
-  border: 1px solid var(--ck-color-base-border);
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-button__label {
-  width: 100%;
-  height: 22px;
-  padding: 0 var(--ck-spacing-medium);
-  text-overflow: ellipsis;
-  flex-shrink: 0;
-  line-height: 22px;
-  overflow: hidden;
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button .ck-style-grid__button__preview {
-  opacity: .9;
-  width: 100%;
-  padding: var(--ck-spacing-medium);
-  background: var(--ck-color-base-background);
-  border: 2px solid var(--ck-color-base-background);
-  flex-grow: 1;
-  flex-basis: 100%;
-  place-content: center flex-start;
-  align-items: center;
-  display: flex;
-  overflow: hidden;
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled {
-  --ck-color-button-default-disabled-background: var(--ck-color-base-foreground);
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled:not(:focus) {
-  border-color: var(--ck-style-panel-button-label-background);
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-disabled .ck-style-grid__button__preview {
-  opacity: .4;
-  border-color: var(--ck-color-base-foreground);
-  filter: saturate(.3);
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-on {
-  border-color: var(--ck-color-base-active);
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-on .ck-button__label {
-  box-shadow: 0 -1px 0 var(--ck-color-base-active);
-  z-index: 1;
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button.ck-on:hover {
-  border-color: var(--ck-color-base-active-focus);
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(.ck-on) .ck-button__label {
-  background: var(--ck-style-panel-button-label-background);
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button:not(.ck-on):hover .ck-button__label {
-  background: var(--ck-style-panel-button-hover-label-background);
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button:hover:not(.ck-disabled):not(.ck-on) {
-  border-color: var(--ck-style-panel-button-hover-border-color);
-}
-
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button:hover:not(.ck-disabled):not(.ck-on) .ck-style-grid__button__preview {
-  opacity: 1;
-}
 
-.ck.ck-style-panel .ck-style-grid .ck-style-grid__button {
-  flex-direction: column;
-}
+  & .ck-style-grid__button {
+    --ck-color-button-default-hover-background: var(--ck-color-base-background);
+    --ck-color-button-default-active-background: var(--ck-color-base-background);
+    width: var(--ck-style-panel-button-width);
+    height: var(--ck-style-panel-button-height);
+    justify-content: space-between;
+    padding: 0;
+    display: flex;
+
+    &:not(:focus) {
+      border: 1px solid var(--ck-color-base-border);
+    }
+
+    & .ck-button__label {
+      width: 100%;
+      height: 22px;
+      padding: 0 var(--ck-spacing-medium, var(--ck-spacing-base));
+      text-overflow: ellipsis;
+      flex-shrink: 0;
+      line-height: 22px;
+      overflow: hidden;
+    }
+
+    & .ck-style-grid__button__preview {
+      opacity: .9;
+      width: 100%;
+      padding: var(--ck-spacing-medium, var(--ck-spacing-base));
+      background: var(--ck-color-base-background);
+      border: 2px solid var(--ck-color-base-background);
+      box-sizing: border-box;
+      flex-grow: 1;
+      flex-basis: 100%;
+      place-content: center flex-start;
+      align-items: center;
+      display: flex;
+      overflow: hidden;
+    }
+
+    &.ck-disabled {
+      --ck-color-button-default-disabled-background: var(--ck-color-base-foreground);
+
+      &:not(:focus) {
+        border-color: var(--ck-style-panel-button-label-background);
+      }
+
+      & .ck-style-grid__button__preview {
+        opacity: .4;
+        border-color: var(--ck-color-base-foreground);
+        filter: saturate(.3);
+      }
+    }
+
+    &.ck-on {
+      border-color: var(--ck-color-base-active);
+
+      & .ck-button__label {
+        box-shadow: 0 -1px 0 var(--ck-color-base-active);
+        z-index: 1;
+      }
+
+      &:hover {
+        border-color: var(--ck-color-base-active-focus);
+      }
+    }
+
+    &:not(.ck-on) {
+      & .ck-button__label {
+        background: var(--ck-style-panel-button-label-background);
+      }
+
+      &:hover .ck-button__label {
+        background: var(--ck-style-panel-button-hover-label-background);
+      }
+    }
+
+    &:hover:not(.ck-disabled):not(.ck-on) {
+      border-color: var(--ck-style-panel-button-hover-border-color);
+
+      & .ck-style-grid__button__preview {
+        opacity: 1;
+      }
+    }
+
+    flex-direction: column;
+  }
 
-.ck.ck-style-panel .ck-style-grid {
   justify-content: start;
 }
 
-.ck.ck-style-panel .ck-style-panel__style-group > .ck-label {
-  margin: var(--ck-spacing-large) 0;
-}
+.ck.ck-style-panel .ck-style-panel__style-group {
+  & > .ck-label {
+    margin: var(--ck-spacing-large, var(--ck-spacing-lg)) 0;
+  }
 
-.ck.ck-style-panel .ck-style-panel__style-group:first-child > .ck-label {
-  margin-top: 0;
+  &:first-child {
+    & > .ck-label {
+      margin-top: 0;
+    }
+  }
 }
 
-:root {
+:root, :host {
   --ck-style-panel-max-height: 470px;
 }
 
 .ck.ck-style-panel {
-  padding: var(--ck-spacing-large);
+  padding: var(--ck-spacing-large, var(--ck-spacing-lg));
   max-height: var(--ck-style-panel-max-height);
   overflow-y: auto;
 }