@ckeditor/ckeditor5-ui 49.0.0-alpha.0 → 49.0.0-alpha.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/editableui/editableuiview.d.ts +10 -0
  2. package/dist/index-editor.css +206 -211
  3. package/dist/index-editor.css.map +1 -1
  4. package/dist/index.css +206 -211
  5. package/dist/index.css.map +1 -1
  6. package/dist/index.js +2 -0
  7. package/dist/index.js.map +1 -1
  8. package/package.json +6 -6
package/dist/index-editor.css CHANGED
@@ -5,7 +5,7 @@
5
5
  :root, :host {
6
6
  --ck-color-base-foreground: #f7f7f7;
7
7
  --ck-color-base-background: #fff;
8
- --ck-color-base-border: #cbd2dd;
8
+ --ck-color-base-border: #c9d1dc;
9
9
  --ck-color-base-border-light: #e6ecf4;
10
10
  --ck-color-base-action: #4865d5;
11
11
  --ck-color-base-action-hover: #3454c5;
@@ -97,47 +97,6 @@
97
97
  --ck-color-focus-outer-shadow: var(--ck-color-interactive-focus-shadow);
98
98
  --ck-color-focus-disabled-shadow: var(--ck-color-interactive-focus-disabled-shadow);
99
99
  --ck-color-focus-error-shadow: var(--ck-color-interactive-focus-error-shadow);
100
- --ck-color-button-default-background: var(--ck-button-default-background-color);
101
- --ck-color-button-default-hover-background: var(--ck-button-default-hover-background-color);
102
- --ck-color-button-default-active-background: var(--ck-button-default-active-background-color);
103
- --ck-color-button-default-disabled-background: var(--ck-button-default-disabled-background-color);
104
- --ck-color-button-on-background: var(--ck-button-on-background-color);
105
- --ck-color-button-on-hover-background: var(--ck-button-on-hover-background-color);
106
- --ck-color-button-on-active-background: var(--ck-button-on-active-background-color);
107
- --ck-color-button-on-disabled-background: var(--ck-button-on-disabled-background-color);
108
- --ck-color-button-on-color: var(--ck-button-on-text-color);
109
- --ck-color-button-action-background: var(--ck-button-action-background-color);
110
- --ck-color-button-action-hover-background: var(--ck-button-action-hover-background-color);
111
- --ck-color-button-action-active-background: var(--ck-button-action-active-background-color);
112
- --ck-color-button-action-disabled-background: var(--ck-button-action-disabled-background-color);
113
- --ck-color-button-action-text: var(--ck-button-action-text-color);
114
- --ck-color-button-save: var(--ck-button-save-color);
115
- --ck-color-button-cancel: var(--ck-button-cancel-color);
116
- --ck-color-switch-button-off-background: var(--ck-switch-button-off-background-color);
117
- --ck-color-switch-button-off-hover-background: var(--ck-switch-button-off-hover-background-color);
118
- --ck-color-switch-button-on-background: var(--ck-switch-button-on-background-color);
119
- --ck-color-switch-button-on-hover-background: var(--ck-switch-button-on-hover-background-color);
120
- --ck-color-switch-button-inner-background: var(--ck-switch-button-inner-background-color);
121
- --ck-color-dropdown-panel-background: var(--ck-dropdown-panel-background-color);
122
- --ck-color-dropdown-panel-border: var(--ck-dropdown-panel-border-color);
123
- --ck-color-dialog-background: var(--ck-dialog-background-color);
124
- --ck-color-input-background: var(--ck-input-background-color);
125
- --ck-color-input-border: var(--ck-input-border-color);
126
- --ck-color-input-error-border: var(--ck-input-error-border-color);
127
- --ck-color-input-text: var(--ck-input-text-color);
128
- --ck-color-input-disabled-background: var(--ck-input-disabled-background-color);
129
- --ck-color-input-disabled-border: var(--ck-input-disabled-border-color);
130
- --ck-color-input-disabled-text: var(--ck-input-disabled-text-color);
131
- --ck-color-list-background: var(--ck-list-background-color);
132
- --ck-color-list-button-hover-background: var(--ck-list-button-hover-background-color);
133
- --ck-color-list-button-on-background: var(--ck-list-button-on-background-color);
134
- --ck-color-list-button-on-text: var(--ck-list-button-on-text-color);
135
- --ck-color-panel-background: var(--ck-balloon-panel-background-color);
136
- --ck-color-panel-border: var(--ck-balloon-panel-border-color);
137
- --ck-color-toolbar-background: var(--ck-toolbar-background-color);
138
- --ck-color-toolbar-border: var(--ck-toolbar-border-color);
139
- --ck-color-tooltip-background: var(--ck-tooltip-background-color);
140
- --ck-color-tooltip-text: var(--ck-tooltip-text-color);
141
100
  --ck-color-engine-placeholder-text: #707070;
142
101
  --ck-color-upload-bar-background: var(--ck-color-base-focus);
143
102
  --ck-color-link-default: #0000f0;
@@ -159,12 +118,12 @@
159
118
  --ck-font-size-base: 16px;
160
119
  --ck-line-height-base: 1.5;
161
120
  --ck-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
162
- --ck-font-size-xs: calc(.625 * var(--ck-font-size-base));
163
- --ck-font-size-sm: calc(.75 * var(--ck-font-size-base));
164
- --ck-font-size-md: calc(.875 * var(--ck-font-size-base));
165
- --ck-font-size-lg: calc(1.125 * var(--ck-font-size-base));
166
- --ck-font-size-xl: calc(1.25 * var(--ck-font-size-base));
167
- --ck-font-size-2xl: calc(1.5 * var(--ck-font-size-base));
121
+ --ck-font-size-xs: calc(.625 * var(--ck-font-size-normal, var(--ck-font-size-base)));
122
+ --ck-font-size-sm: calc(.75 * var(--ck-font-size-normal, var(--ck-font-size-base)));
123
+ --ck-font-size-md: calc(.875 * var(--ck-font-size-normal, var(--ck-font-size-base)));
124
+ --ck-font-size-lg: calc(1.125 * var(--ck-font-size-normal, var(--ck-font-size-base)));
125
+ --ck-font-size-xl: calc(1.25 * var(--ck-font-size-normal, var(--ck-font-size-base)));
126
+ --ck-font-size-2xl: calc(1.5 * var(--ck-font-size-normal, var(--ck-font-size-base)));
168
127
  --ck-font-weight-normal: 400;
169
128
  --ck-font-weight-medium: 500;
170
129
  --ck-font-weight-semibold: 600;
@@ -191,7 +150,7 @@
191
150
 
192
151
  .ck.ck-reset_all, .ck-reset_all :not(.ck-reset_all-excluded, .ck-reset_all-excluded *) {
193
152
  border-collapse: collapse;
194
- font: normal normal normal var(--ck-font-size-base)/var(--ck-line-height-base) var(--ck-font-face, var(--ck-font-family));
153
+ font: normal normal normal var(--ck-font-size-normal, var(--ck-font-size-base))/var(--ck-line-height-base) var(--ck-font-face, var(--ck-font-family));
195
154
  color: var(--ck-color-text);
196
155
  text-align: left;
197
156
  white-space: nowrap;
@@ -237,11 +196,11 @@
237
196
 
238
197
  :root, :host {
239
198
  --ck-radius-base: var(--ck-radius-unit, 8px);
240
- --ck-radius-xs: calc(var(--ck-radius-base) / 8);
241
- --ck-radius-sm: calc(var(--ck-radius-base) / 4);
242
- --ck-radius-md: calc(var(--ck-radius-base) / 2);
243
- --ck-radius-lg: calc(var(--ck-radius-base) * 1.5);
244
- --ck-radius-xl: calc(var(--ck-radius-base) * 2);
199
+ --ck-radius-xs: calc(var(--ck-border-radius, var(--ck-radius-base)) / 8);
200
+ --ck-radius-sm: calc(var(--ck-border-radius, var(--ck-radius-base)) / 4);
201
+ --ck-radius-md: calc(var(--ck-border-radius, var(--ck-radius-base)) / 2);
202
+ --ck-radius-lg: calc(var(--ck-border-radius, var(--ck-radius-base)) * 1.5);
203
+ --ck-radius-xl: calc(var(--ck-border-radius, var(--ck-radius-base)) * 2);
245
204
  --ck-radius-full: 50%;
246
205
  --ck-radius-corners: 0;
247
206
  }
@@ -254,7 +213,7 @@
254
213
  --ck-inset-shadow-sm: 0 1px 4px #0000000d, 0 2px 10px #0000000d inset;
255
214
  --ck-shadow-md: 0 1px 2px 1px var(--ck-color-shadow-drop);
256
215
  --ck-shadow-lg: 0 1px 4px #0000000d, 0 2px 10px #0000000d;
257
- --ck-shadow-xl: 0 16px 32px -4px #0000001a, 0 4px 16px #0000000d;
216
+ --ck-shadow-xl: 0 16px 32px -4px #0000001a, 0 4px 16px #0000001a;
258
217
  --ck-spacing-base: var(--ck-spacing-unit, 8px);
259
218
  --ck-spacing-2xs: calc(.125 * var(--ck-spacing-base));
260
219
  --ck-spacing-xs: calc(.25 * var(--ck-spacing-base));
@@ -262,13 +221,13 @@
262
221
  --ck-spacing-md: calc(.75 * var(--ck-spacing-base));
263
222
  --ck-spacing-lg: calc(1.5 * var(--ck-spacing-base));
264
223
  --ck-spacing-xl: calc(2 * var(--ck-spacing-base));
265
- --ck-spacing-ms: var(--ck-spacing-md);
266
- --ck-width-xs: calc(var(--ck-font-size-base) * 15);
267
- --ck-width-sm: calc(var(--ck-font-size-base) * 20);
268
- --ck-width-md: calc(var(--ck-font-size-base) * 25);
269
- --ck-width-lg: calc(var(--ck-font-size-base) * 30);
270
- --ck-width-xl: calc(var(--ck-font-size-base) * 35);
271
- --ck-width-2xl: calc(var(--ck-font-size-base) * 40);
224
+ --ck-spacing-ms: var(--ck-spacing-medium-small, var(--ck-spacing-md));
225
+ --ck-width-xs: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * 15);
226
+ --ck-width-sm: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * 20);
227
+ --ck-width-md: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * 25);
228
+ --ck-width-lg: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * 30);
229
+ --ck-width-xl: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * 35);
230
+ --ck-width-2xl: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * 40);
272
231
  --ck-font-weight-ui-default: var(--ck-font-weight-normal);
273
232
  --ck-font-weight-ui-strong: var(--ck-font-weight-semibold);
274
233
  --ck-font-weight-ui-heading: var(--ck-font-weight-semibold);
@@ -279,24 +238,24 @@
279
238
  --ck-font-size-control: var(--ck-font-size-md);
280
239
  --ck-toolbar-text-font-size: inherit;
281
240
  --ck-menubar-text-font-size: inherit;
282
- --ck-spacing-control-padding-block: var(--ck-spacing-sm);
241
+ --ck-spacing-control-padding-block: var(--ck-spacing-small, var(--ck-spacing-sm));
283
242
  --ck-spacing-control-padding-inline: var(--ck-spacing-standard, var(--ck-spacing-base));
284
243
  --ck-spacing-control-padding-inline-compact: var(--ck-spacing-small, var(--ck-spacing-sm));
285
244
  --ck-spacing-control-padding-inline-start-compact: var(--ck-spacing-tiny, var(--ck-spacing-xs));
286
- --ck-spacing-control-padding-block-compact: var(--ck-spacing-xs);
287
- --ck-spacing-control-icon-gap: var(--ck-spacing-md);
288
- --ck-spacing-padding-tight: var(--ck-spacing-xs);
289
- --ck-spacing-padding-compact: var(--ck-spacing-sm);
290
- --ck-spacing-padding-snug: var(--ck-spacing-md);
245
+ --ck-spacing-control-padding-block-compact: var(--ck-spacing-tiny, var(--ck-spacing-xs));
246
+ --ck-spacing-control-icon-gap: var(--ck-spacing-medium-small, var(--ck-spacing-md));
247
+ --ck-spacing-padding-tight: var(--ck-spacing-tiny, var(--ck-spacing-xs));
248
+ --ck-spacing-padding-compact: var(--ck-spacing-small, var(--ck-spacing-sm));
249
+ --ck-spacing-padding-snug: var(--ck-spacing-medium-small, var(--ck-spacing-md));
291
250
  --ck-spacing-padding: var(--ck-spacing-base);
292
- --ck-spacing-padding-comfortable: var(--ck-spacing-lg);
293
- --ck-spacing-padding-spacious: var(--ck-spacing-xl);
294
- --ck-spacing-gap-tight: var(--ck-spacing-xs);
295
- --ck-spacing-gap-compact: var(--ck-spacing-sm);
296
- --ck-spacing-gap-snug: var(--ck-spacing-md);
251
+ --ck-spacing-padding-comfortable: var(--ck-spacing-large, var(--ck-spacing-lg));
252
+ --ck-spacing-padding-spacious: var(--ck-spacing-extra-large, var(--ck-spacing-xl));
253
+ --ck-spacing-gap-tight: var(--ck-spacing-tiny, var(--ck-spacing-xs));
254
+ --ck-spacing-gap-compact: var(--ck-spacing-small, var(--ck-spacing-sm));
255
+ --ck-spacing-gap-snug: var(--ck-spacing-medium-small, var(--ck-spacing-md));
297
256
  --ck-spacing-gap: var(--ck-spacing-base);
298
- --ck-spacing-gap-comfortable: var(--ck-spacing-lg);
299
- --ck-spacing-gap-spacious: var(--ck-spacing-xl);
257
+ --ck-spacing-gap-comfortable: var(--ck-spacing-large, var(--ck-spacing-lg));
258
+ --ck-spacing-gap-spacious: var(--ck-spacing-extra-large, var(--ck-spacing-xl));
300
259
  --ck-border-width-control: var(--ck-border-width-thin);
301
260
  --ck-border-width-surface: var(--ck-border-width-thin);
302
261
  --ck-border-width-divider: var(--ck-border-width-thin);
@@ -307,7 +266,7 @@
307
266
  --ck-border-radius-control: var(--ck-radius-md);
308
267
  --ck-border-radius-control-small: var(--ck-radius-sm);
309
268
  --ck-border-radius-surface: var(--ck-border-radius, var(--ck-radius-base));
310
- --ck-border-radius-uniform: var(--ck-radius-base);
269
+ --ck-border-radius-uniform: var(--ck-border-radius, var(--ck-radius-base));
311
270
  --ck-border-radius-surface-attached: var(--ck-border-radius-surface);
312
271
  --ck-border-radius-surface-attached-top: 0 0 var(--ck-border-radius-surface-attached) var(--ck-border-radius-surface-attached);
313
272
  --ck-border-radius-surface-attached-bottom: var(--ck-border-radius-surface-attached) var(--ck-border-radius-surface-attached) 0 0;
@@ -321,7 +280,7 @@
321
280
  --ck-interactive-focus-shadow: var(--ck-focus-outer-shadow, var(--ck-focus-shadow));
322
281
  --ck-interactive-focus-disabled-shadow: var(--ck-focus-disabled-outer-shadow, var(--ck-focus-shadow-disabled));
323
282
  --ck-interactive-focus-error-shadow: var(--ck-focus-error-outer-shadow, var(--ck-focus-shadow-error));
324
- --ck-size-control-min-height: calc(var(--ck-font-size-base)*2);
283
+ --ck-size-control-min-height: var(--ck-ui-component-min-height, calc(var(--ck-font-size-normal, var(--ck-font-size-base))*2));
325
284
  --ck-width-balloon-form: min(var(--ck-width-md), 90vw);
326
285
  --ck-width-dialog: min(var(--ck-width-md), 90vw);
327
286
  --ck-width-dialog-lg: min(var(--ck-width-xl), 90vw);
@@ -388,7 +347,7 @@
388
347
  --ck-animation-timing-function-feedback: var(--ck-animation-ease-standard);
389
348
  --ck-animation-timing-function-progress: var(--ck-animation-ease-linear);
390
349
  --ck-animation-fill-mode-feedback: var(--ck-animation-fill-both);
391
- --ck-powered-by-font-size: calc(.5 * var(--ck-font-size-base));
350
+ --ck-powered-by-font-size: calc(.5 * var(--ck-font-size-normal, var(--ck-font-size-base)));
392
351
  --ck-powered-by-line-height: 1.35;
393
352
  --ck-powered-by-letter-spacing: -.2px;
394
353
  --ck-powered-by-padding-vertical: 2px;
@@ -402,8 +361,8 @@
402
361
  --ck-powered-by-border-color: var(--ck-color-focus-border);
403
362
  --ck-powered-by-svg-width: 53;
404
363
  --ck-powered-by-svg-height: 10;
405
- --ck-powered-by-icon-width: calc(var(--ck-font-size-base) * var(--ck-powered-by-svg-width) / 16);
406
- --ck-powered-by-icon-height: calc(var(--ck-font-size-base) * var(--ck-powered-by-svg-height) / 16);
364
+ --ck-powered-by-icon-width: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * var(--ck-powered-by-svg-width) / 16);
365
+ --ck-powered-by-icon-height: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * var(--ck-powered-by-svg-height) / 16);
407
366
  }
408
367
 
409
368
  .ck.ck-balloon-panel.ck-powered-by-balloon {
@@ -464,9 +423,9 @@
464
423
  }
465
424
 
466
425
  :root, :host {
467
- --ck-evaluation-badge-font-size: calc(var(--ck-font-size-base) * 7.5 / 13);
468
- --ck-evaluation-badge-line-height: calc(var(--ck-font-size-base) * 7.5 / 13);
469
- --ck-evaluation-badge-letter-spacing: calc(var(--ck-font-size-base) * -.2 / 13);
426
+ --ck-evaluation-badge-font-size: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * 7.5 / 13);
427
+ --ck-evaluation-badge-line-height: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * 7.5 / 13);
428
+ --ck-evaluation-badge-letter-spacing: calc(var(--ck-font-size-normal, var(--ck-font-size-base)) * -.2 / 13);
470
429
  --ck-evaluation-badge-padding-vertical: 2px;
471
430
  --ck-evaluation-badge-padding-horizontal: 4px;
472
431
  --ck-evaluation-badge-label-padding-inline: 2px;
@@ -521,33 +480,9 @@
521
480
  }
522
481
 
523
482
  :root, :host {
524
- --ck-spacing-extra-tiny: var(--ck-spacing-2xs);
525
- --ck-spacing-tiny: var(--ck-spacing-xs);
526
- --ck-spacing-small: var(--ck-spacing-sm);
527
- --ck-spacing-medium-small: var(--ck-spacing-md);
528
- --ck-spacing-medium: var(--ck-spacing-base);
529
- --ck-spacing-standard: var(--ck-spacing-base);
530
- --ck-spacing-large: var(--ck-spacing-lg);
531
- --ck-spacing-extra-large: var(--ck-spacing-xl);
532
- --ck-font-size-tiny: var(--ck-font-size-xs);
533
- --ck-font-size-small: var(--ck-font-size-sm);
534
- --ck-font-size-normal: var(--ck-font-size-base);
535
- --ck-font-size-big: var(--ck-font-size-xl);
536
- --ck-font-size-large: var(--ck-font-size-2xl);
537
- --ck-font-face: var(--ck-font-family);
538
- --ck-border-radius: var(--ck-radius-base);
539
- --ck-drop-shadow: var(--ck-shadow-md);
540
- --ck-drop-shadow-active: var(--ck-shadow-lg);
541
- --ck-inner-shadow: var(--ck-inset-shadow-sm);
542
483
  --ck-z-default: var(--ck-z-base);
543
484
  --ck-z-panel: var(--ck-z-overlay);
544
485
  --ck-z-dialog: var(--ck-z-modal);
545
- --ck-focus-outer-shadow-geometry: var(--ck-focus-shadow-geometry);
546
- --ck-focus-outer-shadow: var(--ck-focus-shadow);
547
- --ck-focus-disabled-outer-shadow: var(--ck-focus-shadow-disabled);
548
- --ck-focus-error-outer-shadow: var(--ck-focus-shadow-error);
549
- --ck-disabled-opacity: var(--ck-opacity-disabled);
550
- --ck-ui-component-min-height: var(--ck-size-min-height);
551
486
  --ck-responsive-form-padding: var(--ck-spacing-padding-comfortable);
552
487
  --ck-responsive-form-divider-border: var(--ck-border-divider);
553
488
  }
@@ -796,13 +731,13 @@
796
731
 
797
732
  & dl {
798
733
  --ck-divider-border-color: var(--ck-color-divider, #ccced1);
799
- border-top: var(--ck-accessibility-help-dialog-item-divider-width) solid var(--ck-divider-border-color);
734
+ border-top: var(--ck-accessibility-help-dialog-item-divider-width) solid var(--ck-accessibility-help-dialog-border-color, var(--ck-divider-border-color));
800
735
  border-bottom: none;
801
736
  grid-template-columns: 2fr 1fr;
802
737
  display: grid;
803
738
 
804
739
  & dt, & dd {
805
- border-bottom: var(--ck-accessibility-help-dialog-item-divider-width) solid var(--ck-divider-border-color);
740
+ border-bottom: var(--ck-accessibility-help-dialog-item-divider-width) solid var(--ck-accessibility-help-dialog-border-color, var(--ck-divider-border-color));
806
741
  padding: .4em 0;
807
742
  }
808
743
 
@@ -869,7 +804,7 @@
869
804
  --ck-button-focus-border-color: var(--ck-interactive-focus-border-color);
870
805
  --ck-button-opacity-disabled: var(--ck-disabled-opacity, var(--ck-opacity-disabled));
871
806
  --ck-button-standard-min-width: 60px;
872
- --ck-button-small-font-size: var(--ck-font-size-sm);
807
+ --ck-button-small-font-size: var(--ck-font-size-small, var(--ck-font-size-sm));
873
808
  --ck-button-small-min-width: 40px;
874
809
  --ck-button-small-padding: var(--ck-spacing-padding-tight) var(--ck-spacing-padding);
875
810
  --ck-button-small-icon-padding: 3px;
@@ -877,10 +812,10 @@
877
812
  }
878
813
 
879
814
  .ck.ck-button, :where(a).ck.ck-button {
880
- --ck-button-background: var(--ck-button-default-background-color);
881
- --ck-button-hover-background: var(--ck-button-default-hover-background-color);
882
- --ck-button-active-background: var(--ck-button-default-active-background-color);
883
- --ck-button-disabled-background: var(--ck-button-default-disabled-background-color);
815
+ --ck-button-background: var(--ck-color-button-default-background, var(--ck-button-default-background-color));
816
+ --ck-button-hover-background: var(--ck-color-button-default-hover-background, var(--ck-button-default-hover-background-color));
817
+ --ck-button-active-background: var(--ck-color-button-default-active-background, var(--ck-button-default-active-background-color));
818
+ --ck-button-disabled-background: var(--ck-color-button-default-disabled-background, var(--ck-button-default-disabled-background-color));
884
819
  background: var(--ck-button-background);
885
820
 
886
821
  &:not(.ck-disabled) {
@@ -918,7 +853,7 @@
918
853
 
919
854
  &:active, &:focus {
920
855
  border-color: var(--ck-button-focus-border-color);
921
- box-shadow: var(--ck-interactive-focus-shadow), 0 0;
856
+ box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
922
857
  outline: none;
923
858
  }
924
859
 
@@ -964,7 +899,7 @@
964
899
  background: var(--ck-button-disabled-background);
965
900
 
966
901
  &:active, &:focus {
967
- box-shadow: var(--ck-interactive-focus-disabled-shadow), 0 0;
902
+ box-shadow: var(--ck-focus-disabled-outer-shadow, var(--ck-interactive-focus-disabled-shadow)), 0 0;
968
903
  }
969
904
 
970
905
  & .ck-button__icon, & .ck-button__label {
@@ -1019,19 +954,19 @@
1019
954
  }
1020
955
 
1021
956
  &.ck-on {
1022
- --ck-button-background: var(--ck-button-on-background-color);
1023
- --ck-button-hover-background: var(--ck-button-on-hover-background-color);
1024
- --ck-button-active-background: var(--ck-button-on-active-background-color);
1025
- --ck-button-disabled-background: var(--ck-button-on-disabled-background-color);
1026
- color: var(--ck-button-on-text-color);
957
+ --ck-button-background: var(--ck-color-button-on-background, var(--ck-button-on-background-color));
958
+ --ck-button-hover-background: var(--ck-color-button-on-hover-background, var(--ck-button-on-hover-background-color));
959
+ --ck-button-active-background: var(--ck-color-button-on-active-background, var(--ck-button-on-active-background-color));
960
+ --ck-button-disabled-background: var(--ck-color-button-on-disabled-background, var(--ck-button-on-disabled-background-color));
961
+ color: var(--ck-color-button-on-color, var(--ck-button-on-text-color));
1027
962
  }
1028
963
 
1029
964
  &.ck-button-save {
1030
- color: var(--ck-button-save-color);
965
+ color: var(--ck-color-button-save, var(--ck-button-save-color));
1031
966
  }
1032
967
 
1033
968
  &.ck-button-cancel {
1034
- color: var(--ck-button-cancel-color);
969
+ color: var(--ck-color-button-cancel, var(--ck-button-cancel-color));
1035
970
  }
1036
971
 
1037
972
  [dir="ltr"] & {
@@ -1047,12 +982,12 @@
1047
982
  }
1048
983
 
1049
984
  &.ck-button-action {
1050
- --ck-button-background: var(--ck-button-action-background-color);
1051
- --ck-button-hover-background: var(--ck-button-action-hover-background-color);
1052
- --ck-button-active-background: var(--ck-button-action-active-background-color);
1053
- --ck-button-disabled-background: var(--ck-button-action-disabled-background-color);
985
+ --ck-button-background: var(--ck-color-button-action-background, var(--ck-button-action-background-color));
986
+ --ck-button-hover-background: var(--ck-color-button-action-hover-background, var(--ck-button-action-hover-background-color));
987
+ --ck-button-active-background: var(--ck-color-button-action-active-background, var(--ck-button-action-active-background-color));
988
+ --ck-button-disabled-background: var(--ck-color-button-action-disabled-background, var(--ck-button-action-disabled-background-color));
1054
989
  --ck-button-opacity-disabled: var(--ck-button-action-opacity-disabled);
1055
- color: var(--ck-button-action-text-color);
990
+ color: var(--ck-color-button-action-text, var(--ck-button-action-text-color));
1056
991
  }
1057
992
 
1058
993
  &.ck-button-bold {
@@ -1130,7 +1065,7 @@
1130
1065
  --ck-switch-button-toggle-inner-border-radius: calc(.9 * var(--ck-switch-button-toggle-border-radius));
1131
1066
  --ck-switch-button-off-background-color: var(--ck-color-text-secondary);
1132
1067
  --ck-switch-button-off-hover-background-color: var(--ck-color-base-text-light);
1133
- --ck-switch-button-on-background-color: var(--ck-button-action-background-color);
1068
+ --ck-switch-button-on-background-color: var(--ck-color-button-action-background, var(--ck-button-action-background-color));
1134
1069
  --ck-switch-button-on-hover-background-color: var(--ck-color-interactive-primary-surface-hover);
1135
1070
  --ck-switch-button-inner-background-color: var(--ck-color-surface-canvas);
1136
1071
  }
@@ -1158,7 +1093,7 @@
1158
1093
  outline var(--ck-transition-duration-control) var(--ck-transition-timing-function-control);
1159
1094
  border: var(--ck-border-width-control) solid transparent;
1160
1095
  width: var(--ck-switch-button-toggle-width, 2.61538em);
1161
- background: var(--ck-switch-button-off-background-color);
1096
+ background: var(--ck-color-switch-button-off-background, var(--ck-switch-button-off-background-color));
1162
1097
 
1163
1098
  [dir="ltr"] & {
1164
1099
  margin-left: auto;
@@ -1172,7 +1107,7 @@
1172
1107
  border-radius: var(--ck-switch-button-toggle-inner-border-radius);
1173
1108
  width: var(--ck-switch-button-toggle-inner-size, calc(1.07692em + 1px));
1174
1109
  height: var(--ck-switch-button-toggle-inner-size, calc(1.07692em + 1px));
1175
- background: var(--ck-switch-button-inner-background-color);
1110
+ background: var(--ck-color-switch-button-inner-background, var(--ck-switch-button-inner-background-color));
1176
1111
  transition: all var(--ck-transition-duration-control-emphasized) var(--ck-transition-timing-function-surface);
1177
1112
 
1178
1113
  @media (prefers-reduced-motion: reduce) {
@@ -1183,7 +1118,7 @@
1183
1118
  }
1184
1119
 
1185
1120
  &:hover {
1186
- background: var(--ck-switch-button-off-hover-background-color);
1121
+ background: var(--ck-color-switch-button-off-hover-background, var(--ck-switch-button-off-hover-background-color));
1187
1122
 
1188
1123
  & .ck-button__toggle__inner {
1189
1124
  box-shadow: var(--ck-switch-button-inner-hover-shadow, 0 0 0 5px #0000001a);
@@ -1211,10 +1146,10 @@
1211
1146
 
1212
1147
  &.ck-on {
1213
1148
  & .ck-button__toggle {
1214
- background: var(--ck-switch-button-on-background-color);
1149
+ background: var(--ck-color-switch-button-on-background, var(--ck-switch-button-on-background-color));
1215
1150
 
1216
1151
  &:hover {
1217
- background: var(--ck-switch-button-on-hover-background-color);
1152
+ background: var(--ck-color-switch-button-on-hover-background, var(--ck-switch-button-on-hover-background-color));
1218
1153
  }
1219
1154
 
1220
1155
  & .ck-button__toggle__inner {
@@ -1239,7 +1174,7 @@
1239
1174
  padding: var(--ck-list-item-button-padding);
1240
1175
 
1241
1176
  &, &.ck-on {
1242
- background: var(--ck-list-background-color);
1177
+ background: var(--ck-color-list-background, var(--ck-list-background-color));
1243
1178
  color: var(--ck-color-text);
1244
1179
  }
1245
1180
 
@@ -1254,7 +1189,7 @@
1254
1189
  }
1255
1190
 
1256
1191
  &:hover:not(.ck-disabled), &.ck-button.ck-on:hover, &.ck-on:not(.ck-list-item-button_toggleable), &.ck-on:hover {
1257
- background: var(--ck-list-button-hover-background-color);
1192
+ background: var(--ck-color-list-button-hover-background, var(--ck-list-button-hover-background-color));
1258
1193
 
1259
1194
  &:not(.ck-disabled) {
1260
1195
  color: var(--ck-color-text);
@@ -1584,7 +1519,7 @@
1584
1519
  .ck.ck-dialog {
1585
1520
  border-radius: var(--ck-dialog-border-radius);
1586
1521
  box-shadow: var(--ck-dialog-drop-shadow, var(--ck-dialog-shadow)), 0 0;
1587
- background: var(--ck-dialog-background-color);
1522
+ background: var(--ck-color-dialog-background, var(--ck-dialog-background-color));
1588
1523
  max-height: var(--ck-dialog-max-height);
1589
1524
  max-width: var(--ck-dialog-max-width);
1590
1525
  border: var(--ck-dialog-border);
@@ -1637,7 +1572,7 @@
1637
1572
  --ck-dropdown-panel-background-color: var(--ck-color-surface-container);
1638
1573
  --ck-dropdown-panel-border-color: var(--ck-color-border-container);
1639
1574
  --ck-dropdown-list-background-color: transparent;
1640
- --ck-dropdown-panel-border: var(--ck-border-width-surface) solid var(--ck-dropdown-panel-border-color);
1575
+ --ck-dropdown-panel-border: var(--ck-border-width-surface) solid var(--ck-color-dropdown-panel-border, var(--ck-dropdown-panel-border-color));
1641
1576
  }
1642
1577
 
1643
1578
  .ck.ck-dropdown {
@@ -1704,7 +1639,7 @@
1704
1639
  box-shadow: none;
1705
1640
 
1706
1641
  &:focus {
1707
- box-shadow: var(--ck-interactive-focus-shadow), 0 0;
1642
+ box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
1708
1643
  }
1709
1644
  }
1710
1645
 
@@ -1721,6 +1656,10 @@
1721
1656
  display: inline-block;
1722
1657
  }
1723
1658
 
1659
+ &.ck-dropdown__panel_fit-content {
1660
+ max-width: var(--ck-dropdown-max-width, none);
1661
+ }
1662
+
1724
1663
  &.ck-dropdown__panel_ne, &.ck-dropdown__panel_nw, &.ck-dropdown__panel_n, &.ck-dropdown__panel_nmw, &.ck-dropdown__panel_nme {
1725
1664
  bottom: 100%;
1726
1665
  }
@@ -1759,7 +1698,7 @@
1759
1698
  border-radius: var(--ck-dropdown-panel-border-radius);
1760
1699
  box-shadow: var(--ck-shadow-surface-floating), 0 0;
1761
1700
  padding: var(--ck-dropdown-panel-padding);
1762
- background: var(--ck-dropdown-panel-background-color);
1701
+ background: var(--ck-color-dropdown-panel-background, var(--ck-dropdown-panel-background-color));
1763
1702
  border: var(--ck-dropdown-panel-border);
1764
1703
  min-width: 100%;
1765
1704
  bottom: 0;
@@ -1837,11 +1776,11 @@
1837
1776
  border-radius: var(--ck-border-radius-control);
1838
1777
 
1839
1778
  & > .ck-splitbutton__action {
1840
- border-bottom-left-radius: 0;
1779
+ border-end-start-radius: var(--ck-dropdown-panel-uniform-button-border-radius, 0);
1841
1780
  }
1842
1781
 
1843
1782
  & > .ck-splitbutton__arrow {
1844
- border-bottom-right-radius: 0;
1783
+ border-end-end-radius: var(--ck-dropdown-panel-uniform-button-border-radius, 0);
1845
1784
  }
1846
1785
  }
1847
1786
 
@@ -1879,7 +1818,7 @@
1879
1818
  &.ck-splitbutton_flatten {
1880
1819
  &:hover, &.ck-splitbutton_open {
1881
1820
  & > .ck-splitbutton__action:not(.ck-disabled), & > .ck-splitbutton__arrow:not(.ck-disabled), & > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover) {
1882
- background-color: var(--ck-color-button-on-background);
1821
+ background-color: var(--ck-color-button-on-background, var(--ck-button-on-background-color));
1883
1822
 
1884
1823
  &:after {
1885
1824
  display: none;
@@ -1889,7 +1828,7 @@
1889
1828
 
1890
1829
  &.ck-splitbutton_open:hover {
1891
1830
  & > .ck-splitbutton__action:not(.ck-disabled), & > .ck-splitbutton__arrow:not(.ck-disabled), & > .ck-splitbutton__arrow:not(.ck-disabled):not(:hover) {
1892
- background-color: var(--ck-color-button-on-hover-background);
1831
+ background-color: var(--ck-color-button-on-hover-background, var(--ck-button-on-hover-background-color));
1893
1832
  }
1894
1833
  }
1895
1834
  }
@@ -1976,7 +1915,7 @@
1976
1915
  border-color: #0000;
1977
1916
 
1978
1917
  &:not(.ck-on) {
1979
- background: var(--ck-button-default-hover-background-color);
1918
+ background: var(--ck-color-button-default-hover-background, var(--ck-button-default-hover-background-color));
1980
1919
  }
1981
1920
  }
1982
1921
  }
@@ -1995,7 +1934,7 @@
1995
1934
  border-color: #0000;
1996
1935
 
1997
1936
  &:not(.ck-on) {
1998
- background: var(--ck-button-default-hover-background-color);
1937
+ background: var(--ck-color-button-default-hover-background, var(--ck-button-default-hover-background-color));
1999
1938
  }
2000
1939
  }
2001
1940
 
@@ -2059,7 +1998,7 @@
2059
1998
  .ck.ck-balloon-panel.ck-dropdown-menu__nested-menu__panel {
2060
1999
  border-radius: var(--ck-dropdown-menu-panel-border-radius);
2061
2000
  box-shadow: var(--ck-shadow-surface-floating), 0 0;
2062
- background: var(--ck-dropdown-panel-background-color);
2001
+ background: var(--ck-color-dropdown-panel-background, var(--ck-dropdown-panel-background-color));
2063
2002
  border: var(--ck-dropdown-panel-border);
2064
2003
  height: fit-content;
2065
2004
  max-width: var(--ck-dropdown-menu-menu-panel-max-width, 75vw);
@@ -2097,22 +2036,35 @@
2097
2036
 
2098
2037
  :root, :host {
2099
2038
  --ck-editor-editable-padding: 1em;
2039
+ --ck-editor-outer-radius: 0;
2040
+ --ck-editor-sticky-panel-outer-radius: 0;
2100
2041
  --ck-editor-frame-border-radius: 0;
2101
- --ck-editor-sticky-panel-border-radius: var(--ck-radius-md);
2042
+ --ck-editor-sticky-panel-border-radius: 0;
2102
2043
  --ck-editor-frame-border: var(--ck-border-width-surface) solid var(--ck-editor-frame-border-color);
2103
2044
  --ck-editor-frame-border-color: var(--ck-color-border-container);
2104
2045
  --ck-editor-editable-focus-border-color: var(--ck-interactive-focus-border-color);
2105
2046
  }
2106
2047
 
2048
+ .ck-rounded-corners {
2049
+ --ck-editor-outer-radius: var(--ck-rounded-corners-radius, var(--ck-radius-corners));
2050
+ --ck-editor-frame-border-radius: var(--ck-editor-outer-radius);
2051
+ --ck-editor-sticky-panel-border-radius: var(--ck-editor-outer-radius);
2052
+ }
2053
+
2107
2054
  .ck.ck-editor__top {
2108
2055
  & .ck-sticky-panel {
2109
2056
  & .ck-sticky-panel__content {
2110
- border-radius: var(--ck-sticky-panel-uniform-border-radius, var(--ck-editor-sticky-panel-border-radius));
2057
+ border-top-left-radius: var(--ck-editor-sticky-panel-border-radius);
2058
+ border-top-right-radius: var(--ck-editor-sticky-panel-border-radius);
2111
2059
  border: var(--ck-editor-frame-border);
2112
2060
  border-bottom-width: 0;
2061
+ border-bottom-right-radius: 0;
2062
+ border-bottom-left-radius: 0;
2113
2063
 
2114
2064
  &.ck-sticky-panel__content_sticky {
2115
2065
  border-bottom-width: var(--ck-border-width-surface);
2066
+ border-top-left-radius: var(--ck-editor-sticky-panel-outer-radius);
2067
+ border-top-right-radius: var(--ck-editor-sticky-panel-outer-radius);
2116
2068
  }
2117
2069
 
2118
2070
  & .ck-menu-bar {
@@ -2123,13 +2075,29 @@
2123
2075
  & .ck-toolbar {
2124
2076
  border: 0;
2125
2077
  }
2078
+
2079
+ & > * {
2080
+ border-radius: 0;
2081
+ }
2082
+
2083
+ & > :first-child {
2084
+ border-top-left-radius: calc(var(--ck-editor-sticky-panel-border-radius) - var(--ck-border-width-surface));
2085
+ border-top-right-radius: calc(var(--ck-editor-sticky-panel-border-radius) - var(--ck-border-width-surface));
2086
+ }
2087
+
2088
+ &.ck-sticky-panel__content_sticky > :first-child {
2089
+ border-top-left-radius: calc(var(--ck-editor-sticky-panel-outer-radius) - var(--ck-border-width-surface));
2090
+ border-top-right-radius: calc(var(--ck-editor-sticky-panel-outer-radius) - var(--ck-border-width-surface));
2091
+ }
2126
2092
  }
2127
2093
  }
2128
2094
  }
2129
2095
 
2130
- .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
2096
+ .ck.ck-editor__editable_root:not(.ck-editor__nested-editable) {
2131
2097
  border-radius: var(--ck-editor-frame-border-radius);
2098
+ }
2132
2099
 
2100
+ .ck.ck-editor__editable:not(.ck-editor__nested-editable) {
2133
2101
  &.ck-focused {
2134
2102
  border-color: var(--ck-editor-editable-focus-border-color);
2135
2103
  box-shadow: var(--ck-inner-shadow, var(--ck-inset-shadow-sm)), 0 0;
@@ -2170,13 +2138,29 @@
2170
2138
 
2171
2139
  .ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_n"] {
2172
2140
  &:after {
2173
- border-bottom-color: var(--ck-balloon-panel-background-color);
2141
+ border-bottom-color: var(--ck-color-panel-background, var(--ck-balloon-panel-background-color));
2174
2142
  }
2175
2143
  }
2176
2144
 
2177
2145
  .ck.ck-balloon-panel.ck-toolbar-container[class*="arrow_s"] {
2178
2146
  &:after {
2179
- border-top-color: var(--ck-balloon-panel-background-color);
2147
+ border-top-color: var(--ck-color-panel-background, var(--ck-balloon-panel-background-color));
2148
+ }
2149
+ }
2150
+
2151
+ .ck.ck-toolbar-container {
2152
+ & > .ck {
2153
+ border-radius: 0;
2154
+ }
2155
+
2156
+ & > .ck:first-child {
2157
+ border-top-left-radius: calc(var(--ck-balloon-panel-border-radius) - var(--ck-border-width-surface));
2158
+ border-top-right-radius: calc(var(--ck-balloon-panel-border-radius) - var(--ck-border-width-surface));
2159
+ }
2160
+
2161
+ & > .ck:last-child {
2162
+ border-bottom-left-radius: calc(var(--ck-balloon-panel-border-radius) - var(--ck-border-width-surface));
2163
+ border-bottom-right-radius: calc(var(--ck-balloon-panel-border-radius) - var(--ck-border-width-surface));
2180
2164
  }
2181
2165
  }
2182
2166
 
@@ -2240,7 +2224,7 @@
2240
2224
  --ck-form-header-padding-block: var(--ck-spacing-padding-compact);
2241
2225
  --ck-form-header-padding: var(--ck-spacing-padding-comfortable) var(--ck-spacing-padding-comfortable) var(--ck-spacing-padding-compact) var(--ck-spacing-padding-comfortable);
2242
2226
  --ck-form-header-with-back-button-padding-inline-start: var(--ck-spacing-padding-comfortable);
2243
- --ck-form-header-label-font-size: var(--ck-font-size-base);
2227
+ --ck-form-header-label-font-size: var(--ck-font-size-normal, var(--ck-font-size-base));
2244
2228
  }
2245
2229
 
2246
2230
  .ck.ck-form__header {
@@ -2317,7 +2301,7 @@
2317
2301
 
2318
2302
  :root, :host {
2319
2303
  --ck-input-width: 18em;
2320
- --ck-input-padding: var(--ck-spacing-padding-compact);
2304
+ --ck-input-padding: var(--ck-spacing-padding-compact) var(--ck-spacing-padding);
2321
2305
  --ck-input-font-size: var(--ck-font-size-control);
2322
2306
  --ck-input-border-radius: var(--ck-border-radius-control);
2323
2307
  --ck-input-background-color: var(--ck-color-surface-control);
@@ -2327,18 +2311,18 @@
2327
2311
  --ck-input-disabled-background-color: #f2f2f2;
2328
2312
  --ck-input-disabled-border-color: var(--ck-color-border-control);
2329
2313
  --ck-input-disabled-text-color: var(--ck-color-text-disabled);
2330
- --ck-input-border: var(--ck-border-width-control) solid var(--ck-input-border-color);
2314
+ --ck-input-border: var(--ck-border-width-control) solid var(--ck-color-input-border, var(--ck-input-border-color));
2331
2315
  --ck-input-focus-border-color: var(--ck-interactive-focus-border-color);
2332
2316
  --ck-input-text-width: var(--ck-input-width);
2333
2317
  }
2334
2318
 
2335
2319
  .ck.ck-input {
2336
2320
  border-radius: var(--ck-input-border-radius);
2337
- background: var(--ck-input-background-color);
2321
+ background: var(--ck-color-input-background, var(--ck-input-background-color));
2338
2322
  border: var(--ck-input-border);
2339
2323
  padding: var(--ck-input-padding);
2340
2324
  min-width: var(--ck-input-width);
2341
- color: var(--ck-input-text-color);
2325
+ color: var(--ck-color-input-text, var(--ck-input-text-color));
2342
2326
  font-size: var(--ck-input-font-size);
2343
2327
  min-height: var(--ck-size-control-min-height);
2344
2328
  transition: var(--ck-transition-control-fast);
@@ -2349,22 +2333,22 @@
2349
2333
 
2350
2334
  &:focus {
2351
2335
  border-color: var(--ck-input-focus-border-color);
2352
- box-shadow: var(--ck-interactive-focus-shadow), 0 0;
2336
+ box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
2353
2337
  outline: none;
2354
2338
  }
2355
2339
 
2356
2340
  &[readonly] {
2357
- border: var(--ck-border-width-control) solid var(--ck-input-disabled-border-color);
2358
- background: var(--ck-input-disabled-background-color);
2359
- color: var(--ck-input-disabled-text-color);
2341
+ border: var(--ck-border-width-control) solid var(--ck-color-input-disabled-border, var(--ck-input-disabled-border-color));
2342
+ background: var(--ck-color-input-disabled-background, var(--ck-input-disabled-background-color));
2343
+ color: var(--ck-color-input-disabled-text, var(--ck-input-disabled-text-color));
2360
2344
 
2361
2345
  &:focus {
2362
- box-shadow: var(--ck-interactive-focus-disabled-shadow), 0 0;
2346
+ box-shadow: var(--ck-focus-disabled-outer-shadow, var(--ck-interactive-focus-disabled-shadow)), 0 0;
2363
2347
  }
2364
2348
  }
2365
2349
 
2366
2350
  &.ck-error {
2367
- border-color: var(--ck-input-error-border-color);
2351
+ border-color: var(--ck-color-input-error-border, var(--ck-input-error-border-color));
2368
2352
  animation: ck-input-shake var(--ck-animation-duration-feedback) var(--ck-animation-timing-function-feedback) var(--ck-animation-fill-mode-feedback);
2369
2353
 
2370
2354
  @media (prefers-reduced-motion: reduce) {
@@ -2372,7 +2356,7 @@
2372
2356
  }
2373
2357
 
2374
2358
  &:focus {
2375
- box-shadow: var(--ck-interactive-focus-error-shadow), 0 0;
2359
+ box-shadow: var(--ck-focus-error-outer-shadow, var(--ck-interactive-focus-error-shadow)), 0 0;
2376
2360
  }
2377
2361
  }
2378
2362
  }
@@ -2414,7 +2398,7 @@
2414
2398
 
2415
2399
  :root, :host {
2416
2400
  --ck-labeled-field-label-background-color: var(--ck-color-surface-control);
2417
- --ck-labeled-field-label-start-gap: var(--ck-spacing-control-icon-gap);
2401
+ --ck-labeled-field-label-start-gap: var(--ck-spacing-padding);
2418
2402
  --ck-labeled-field-label-font-size: var(--ck-font-size-md);
2419
2403
  }
2420
2404
 
@@ -2482,16 +2466,16 @@
2482
2466
  }
2483
2467
 
2484
2468
  &.ck-disabled > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label, &.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
2485
- color: var(--ck-input-disabled-text-color);
2469
+ color: var(--ck-color-input-disabled-text, var(--ck-input-disabled-text-color));
2486
2470
  }
2487
2471
 
2488
2472
  &.ck-disabled.ck-labeled-field-view_empty:not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label, &.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder):not(.ck-error) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
2489
2473
  [dir="ltr"] & {
2490
- transform: translate(var(--ck-labeled-field-label-default-position-x, var(--ck-labeled-field-label-start-gap)), calc((var(--ck-size-control-min-height) - 1lh) / 2)) scale(1);
2474
+ transform: translate(var(--ck-labeled-field-label-default-position-x, var(--ck-labeled-field-label-start-gap)), var(--ck-labeled-field-label-default-position-y, calc((var(--ck-size-control-min-height) - 1lh) / 2))) scale(1);
2491
2475
  }
2492
2476
 
2493
2477
  [dir="rtl"] & {
2494
- transform: translate(calc(-1 * var(--ck-labeled-field-label-default-position-x, var(--ck-labeled-field-label-start-gap))), calc((var(--ck-size-control-min-height) - 1lh) / 2)) scale(1);
2478
+ transform: translate(calc(-1 * var(--ck-labeled-field-label-default-position-x, var(--ck-labeled-field-label-start-gap))), var(--ck-labeled-field-label-default-position-y, calc((var(--ck-size-control-min-height) - 1lh) / 2))) scale(1);
2495
2479
  }
2496
2480
 
2497
2481
  max-width: var(--ck-labeled-field-empty-unfocused-max-width, calc(100% - 2 * var(--ck-labeled-field-label-start-gap)));
@@ -2500,6 +2484,7 @@
2500
2484
  }
2501
2485
 
2502
2486
  & > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown > .ck.ck-button {
2487
+ padding-inline: var(--ck-spacing-padding);
2503
2488
  background: none;
2504
2489
  }
2505
2490
 
@@ -2533,16 +2518,16 @@
2533
2518
  --ck-list-separator-inline-margin: calc(-1 * var(--ck-spacing-padding-compact));
2534
2519
  --ck-list-border-radius: var(--ck-border-radius-surface);
2535
2520
  --ck-list-background-color: var(--ck-color-surface-control);
2536
- --ck-list-button-hover-background-color: var(--ck-button-default-hover-background-color);
2537
- --ck-list-button-on-background-color: var(--ck-button-on-text-color);
2521
+ --ck-list-button-hover-background-color: var(--ck-color-button-default-hover-background, var(--ck-button-default-hover-background-color));
2522
+ --ck-list-button-on-background-color: var(--ck-color-button-on-color, var(--ck-button-on-text-color));
2538
2523
  --ck-list-button-on-text-color: var(--ck-color-text-inverse);
2539
2524
  --ck-list-divider-color: var(--ck-color-divider);
2540
- --ck-list-group-label-font-size: var(--ck-font-size-sm);
2525
+ --ck-list-group-label-font-size: var(--ck-font-size-small, var(--ck-font-size-sm));
2541
2526
  }
2542
2527
 
2543
2528
  .ck.ck-list {
2544
2529
  border-radius: var(--ck-list-border-radius);
2545
- background: var(--ck-list-background-color);
2530
+ background: var(--ck-color-list-background, var(--ck-list-background-color));
2546
2531
  padding: var(--ck-list-padding);
2547
2532
  -webkit-user-select: none;
2548
2533
  user-select: none;
@@ -2585,7 +2570,7 @@
2585
2570
  }
2586
2571
 
2587
2572
  & .ck-button__label {
2588
- line-height: calc(var(--ck-line-height-base) * var(--ck-font-size-base));
2573
+ line-height: calc(var(--ck-line-height-base) * var(--ck-font-size-normal, var(--ck-font-size-base)));
2589
2574
  }
2590
2575
 
2591
2576
  &:active {
@@ -2593,15 +2578,15 @@
2593
2578
  }
2594
2579
 
2595
2580
  &.ck-on {
2596
- background: var(--ck-list-button-on-background-color);
2597
- color: var(--ck-list-button-on-text-color);
2581
+ background: var(--ck-color-list-button-on-background, var(--ck-list-button-on-background-color));
2582
+ color: var(--ck-color-list-button-on-text, var(--ck-list-button-on-text-color));
2598
2583
 
2599
2584
  &:active {
2600
2585
  box-shadow: none;
2601
2586
  }
2602
2587
 
2603
2588
  &:hover:not(.ck-disabled) {
2604
- background: var(--ck-list-button-on-background-color);
2589
+ background: var(--ck-color-list-button-on-background-focus, var(--ck-color-list-button-on-background, var(--ck-list-button-on-background-color)));
2605
2590
  }
2606
2591
 
2607
2592
  &:focus:not(.ck-disabled) {
@@ -2610,17 +2595,17 @@
2610
2595
  }
2611
2596
 
2612
2597
  &:hover:not(.ck-disabled) {
2613
- background: var(--ck-list-button-hover-background-color);
2598
+ background: var(--ck-color-list-button-hover-background, var(--ck-list-button-hover-background-color));
2614
2599
  }
2615
2600
  }
2616
2601
 
2617
2602
  & > .ck-button.ck-switchbutton {
2618
2603
  &.ck-on {
2619
- background: var(--ck-list-background-color);
2604
+ background: var(--ck-color-list-background, var(--ck-list-background-color));
2620
2605
  color: inherit;
2621
2606
 
2622
2607
  &:hover:not(.ck-disabled) {
2623
- background: var(--ck-list-button-hover-background-color);
2608
+ background: var(--ck-color-list-button-hover-background, var(--ck-list-button-hover-background-color));
2624
2609
  color: inherit;
2625
2610
  }
2626
2611
  }
@@ -2654,7 +2639,7 @@
2654
2639
 
2655
2640
  :root, :host {
2656
2641
  --ck-balloon-panel-border-radius: var(--ck-border-radius-surface);
2657
- --ck-balloon-panel-border: var(--ck-border-width-surface) solid var(--ck-balloon-panel-border-color);
2642
+ --ck-balloon-panel-border: var(--ck-balloon-border-width, var(--ck-border-width-surface)) solid var(--ck-color-panel-border, var(--ck-balloon-panel-border-color));
2658
2643
  --ck-balloon-panel-background-color: var(--ck-color-surface-container);
2659
2644
  --ck-balloon-panel-border-color: var(--ck-color-border-container);
2660
2645
  --ck-balloon-panel-arrow-display: none;
@@ -2666,7 +2651,7 @@
2666
2651
  .ck.ck-balloon-panel {
2667
2652
  border-radius: var(--ck-balloon-panel-border-radius);
2668
2653
  box-shadow: var(--ck-shadow-surface-floating), 0 0;
2669
- background: var(--ck-balloon-panel-background-color);
2654
+ background: var(--ck-color-panel-background, var(--ck-balloon-panel-background-color));
2670
2655
  border: var(--ck-balloon-panel-border);
2671
2656
  min-height: 15px;
2672
2657
  z-index: var(--ck-layer-panel);
@@ -2698,14 +2683,14 @@
2698
2683
  }
2699
2684
 
2700
2685
  &:before {
2701
- border-color: transparent transparent var(--ck-balloon-panel-border-color) transparent;
2702
- margin-top: calc(-1 * var(--ck-border-width-surface));
2686
+ border-color: transparent transparent var(--ck-color-panel-border, var(--ck-balloon-panel-border-color)) transparent;
2687
+ margin-top: calc(-1 * var(--ck-balloon-border-width, var(--ck-border-width-surface)));
2703
2688
  z-index: var(--ck-layer-balloon-arrow-back);
2704
2689
  }
2705
2690
 
2706
2691
  &:after {
2707
- border-color: transparent transparent var(--ck-balloon-panel-background-color) transparent;
2708
- margin-top: calc(var(--ck-balloon-arrow-offset) - var(--ck-border-width-surface));
2692
+ border-color: transparent transparent var(--ck-color-panel-background, var(--ck-balloon-panel-background-color)) transparent;
2693
+ margin-top: calc(var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width, var(--ck-border-width-surface)));
2709
2694
  z-index: var(--ck-layer-balloon-arrow-front);
2710
2695
  }
2711
2696
  }
@@ -2716,15 +2701,15 @@
2716
2701
  }
2717
2702
 
2718
2703
  &:before {
2719
- border-color: var(--ck-balloon-panel-border-color) transparent transparent;
2704
+ border-color: var(--ck-color-panel-border, var(--ck-balloon-panel-border-color)) transparent transparent;
2720
2705
  filter: drop-shadow(var(--ck-balloon-arrow-drop-shadow, 0 2px 2px var(--ck-color-shadow-drop)));
2721
- margin-bottom: calc(-1 * var(--ck-border-width-surface));
2706
+ margin-bottom: calc(-1 * var(--ck-balloon-border-width, var(--ck-border-width-surface)));
2722
2707
  z-index: var(--ck-layer-balloon-arrow-back);
2723
2708
  }
2724
2709
 
2725
2710
  &:after {
2726
- border-color: var(--ck-balloon-panel-background-color) transparent transparent transparent;
2727
- margin-bottom: calc(var(--ck-balloon-arrow-offset) - var(--ck-border-width-surface));
2711
+ border-color: var(--ck-color-panel-background, var(--ck-balloon-panel-background-color)) transparent transparent transparent;
2712
+ margin-bottom: calc(var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width, var(--ck-border-width-surface)));
2728
2713
  z-index: var(--ck-layer-balloon-arrow-front);
2729
2714
  }
2730
2715
  }
@@ -2735,13 +2720,13 @@
2735
2720
  }
2736
2721
 
2737
2722
  &:before {
2738
- border-color: transparent transparent transparent var(--ck-balloon-panel-border-color);
2739
- margin-right: calc(-1 * var(--ck-border-width-surface));
2723
+ border-color: transparent transparent transparent var(--ck-color-panel-border, var(--ck-balloon-panel-border-color));
2724
+ margin-right: calc(-1 * var(--ck-balloon-border-width, var(--ck-border-width-surface)));
2740
2725
  }
2741
2726
 
2742
2727
  &:after {
2743
- border-color: transparent transparent transparent var(--ck-balloon-panel-background-color);
2744
- margin-right: calc(var(--ck-balloon-arrow-offset) - var(--ck-border-width-surface));
2728
+ border-color: transparent transparent transparent var(--ck-color-panel-background, var(--ck-balloon-panel-background-color));
2729
+ margin-right: calc(var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width, var(--ck-border-width-surface)));
2745
2730
  }
2746
2731
  }
2747
2732
 
@@ -2751,13 +2736,13 @@
2751
2736
  }
2752
2737
 
2753
2738
  &:before {
2754
- border-color: transparent var(--ck-balloon-panel-border-color) transparent transparent;
2755
- margin-left: calc(-1 * var(--ck-border-width-surface));
2739
+ border-color: transparent var(--ck-color-panel-border, var(--ck-balloon-panel-border-color)) transparent transparent;
2740
+ margin-left: calc(-1 * var(--ck-balloon-border-width, var(--ck-border-width-surface)));
2756
2741
  }
2757
2742
 
2758
2743
  &:after {
2759
- border-color: transparent var(--ck-balloon-panel-background-color) transparent transparent;
2760
- margin-left: calc(var(--ck-balloon-arrow-offset) - var(--ck-border-width-surface));
2744
+ border-color: transparent var(--ck-color-panel-background, var(--ck-balloon-panel-background-color)) transparent transparent;
2745
+ margin-left: calc(var(--ck-balloon-arrow-offset) - var(--ck-balloon-border-width, var(--ck-border-width-surface)));
2761
2746
  }
2762
2747
  }
2763
2748
 
@@ -2859,7 +2844,7 @@
2859
2844
  }
2860
2845
 
2861
2846
  .ck .ck-balloon-rotator__navigation {
2862
- background: var(--ck-toolbar-background-color);
2847
+ background: var(--ck-color-toolbar-background, var(--ck-toolbar-background-color));
2863
2848
  border-bottom: var(--ck-border-divider);
2864
2849
  padding: 0 var(--ck-spacing-padding);
2865
2850
  border-radius: var(--ck-balloon-panel-border-radius) var(--ck-balloon-panel-border-radius) 0 0;
@@ -2896,7 +2881,7 @@
2896
2881
 
2897
2882
  .ck .ck-fake-panel div {
2898
2883
  box-shadow: var(--ck-shadow-surface-floating), 0 0;
2899
- background: var(--ck-balloon-panel-background-color);
2884
+ background: var(--ck-color-panel-background, var(--ck-balloon-panel-background-color));
2900
2885
  border: var(--ck-balloon-panel-border);
2901
2886
  border-radius: var(--ck-border-radius-surface);
2902
2887
  width: 100%;
@@ -2942,7 +2927,7 @@
2942
2927
  }
2943
2928
 
2944
2929
  :root, :host {
2945
- --ck-sticky-panel-uniform-border-radius: 0;
2930
+ --ck-sticky-panel-uniform-border-radius: initial;
2946
2931
  }
2947
2932
 
2948
2933
  .ck.ck-sticky-panel {
@@ -2965,7 +2950,7 @@
2965
2950
  --ck-autocomplete-results-max-height: 200px;
2966
2951
  --ck-autocomplete-results-uniform-border-radius: var(--ck-border-radius-uniform);
2967
2952
  --ck-autocomplete-results-border-radius: var(--ck-border-radius-surface-attached);
2968
- --ck-autocomplete-results-border: var(--ck-border-width-surface) solid var(--ck-dropdown-panel-border-color);
2953
+ --ck-autocomplete-results-border: var(--ck-border-width-surface) solid var(--ck-color-dropdown-panel-border, var(--ck-dropdown-panel-border-color));
2969
2954
  --ck-autocomplete-results-background-color: var(--ck-color-surface-container);
2970
2955
  }
2971
2956
 
@@ -3002,7 +2987,7 @@
3002
2987
  :root, :host {
3003
2988
  --ck-search-results-info-padding: var(--ck-spacing-gap) var(--ck-spacing-padding-comfortable);
3004
2989
  --ck-search-results-info-primary-font-size: var(--ck-font-size-md);
3005
- --ck-search-results-info-secondary-font-size: var(--ck-font-size-sm);
2990
+ --ck-search-results-info-secondary-font-size: var(--ck-font-size-small, var(--ck-font-size-sm));
3006
2991
  }
3007
2992
 
3008
2993
  .ck.ck-search {
@@ -3146,12 +3131,18 @@
3146
3131
  --ck-tooltip-border-radius: var(--ck-radius-md);
3147
3132
  --ck-tooltip-background-color: var(--ck-color-surface-inverse);
3148
3133
  --ck-tooltip-text-color: var(--ck-color-text-inverse);
3149
- --ck-tooltip-text-font-size: var(--ck-font-size-xs);
3134
+ --ck-tooltip-text-font-size: var(--ck-font-size-tiny, var(--ck-font-size-xs));
3135
+ --ck-tooltip-arrow-half-width: 4px;
3136
+ --ck-tooltip-arrow-height: 4px;
3137
+ --ck-tooltip-arrow-offset: 1px;
3150
3138
  }
3151
3139
 
3152
3140
  .ck.ck-balloon-panel.ck-tooltip {
3153
3141
  --ck-balloon-panel-border: var(--ck-tooltip-border);
3154
- --ck-balloon-panel-background-color: var(--ck-tooltip-background-color);
3142
+ --ck-balloon-panel-background-color: var(--ck-color-tooltip-background, var(--ck-tooltip-background-color));
3143
+ --ck-balloon-arrow-half-width: var(--ck-tooltip-arrow-half-width);
3144
+ --ck-balloon-arrow-height: var(--ck-tooltip-arrow-height);
3145
+ --ck-balloon-arrow-offset: var(--ck-tooltip-arrow-offset);
3155
3146
  padding: var(--ck-tooltip-padding);
3156
3147
  border-radius: var(--ck-tooltip-border-radius);
3157
3148
  z-index: var(--ck-layer-tooltip);
@@ -3163,7 +3154,7 @@
3163
3154
 
3164
3155
  & .ck-tooltip__text {
3165
3156
  font-size: var(--ck-tooltip-text-font-size);
3166
- color: var(--ck-tooltip-text-color);
3157
+ color: var(--ck-color-tooltip-text, var(--ck-tooltip-text-color));
3167
3158
  line-height: 1.5;
3168
3159
  }
3169
3160
 
@@ -3224,12 +3215,12 @@
3224
3215
  --ck-toolbar-vertical-button-border-radius: var(--ck-border-radius-control);
3225
3216
  --ck-toolbar-background-color: var(--ck-color-surface-container);
3226
3217
  --ck-toolbar-border-color: var(--ck-color-border-container);
3227
- --ck-toolbar-border: var(--ck-border-width-surface) solid var(--ck-toolbar-border-color);
3218
+ --ck-toolbar-border: var(--ck-border-width-surface) solid var(--ck-color-toolbar-border, var(--ck-toolbar-border-color));
3228
3219
  }
3229
3220
 
3230
3221
  .ck.ck-toolbar {
3231
3222
  border-radius: var(--ck-toolbar-border-radius);
3232
- background: var(--ck-toolbar-background-color);
3223
+ background: var(--ck-color-toolbar-background, var(--ck-toolbar-background-color));
3233
3224
  padding: var(--ck-toolbar-padding);
3234
3225
  border: var(--ck-toolbar-border);
3235
3226
  -webkit-user-select: none;
@@ -3543,7 +3534,7 @@
3543
3534
  .ck.ck-menu-bar__menu > .ck.ck-menu-bar__menu__panel {
3544
3535
  border-radius: var(--ck-menu-bar-panel-border-radius);
3545
3536
  box-shadow: var(--ck-shadow-surface-floating), 0 0;
3546
- background: var(--ck-dropdown-panel-background-color);
3537
+ background: var(--ck-color-dropdown-panel-background, var(--ck-dropdown-panel-background-color));
3547
3538
  border: var(--ck-dropdown-panel-border);
3548
3539
  height: fit-content;
3549
3540
  z-index: var(--ck-z-panel, var(--ck-z-overlay));
@@ -3551,6 +3542,10 @@
3551
3542
  position: absolute;
3552
3543
  bottom: 0;
3553
3544
 
3545
+ &.ck-menu-bar__menu__panel_fit-content {
3546
+ max-width: var(--ck-menu-bar-menu-max-width, none);
3547
+ }
3548
+
3554
3549
  &.ck-menu-bar__menu__panel_position_es, &.ck-menu-bar__menu__panel_position_se {
3555
3550
  border-radius: var(--ck-menu-bar-panel-uniform-border-radius, var(--ck-border-radius-surface-cut-top-left));
3556
3551
  }
@@ -3625,7 +3620,7 @@
3625
3620
  &:focus, &:active {
3626
3621
  z-index: var(--ck-layer-control-raised);
3627
3622
  border-color: var(--ck-menu-bar-item-focus-border-color);
3628
- box-shadow: var(--ck-interactive-focus-shadow), 0 0;
3623
+ box-shadow: var(--ck-focus-outer-shadow, var(--ck-interactive-focus-shadow)), 0 0;
3629
3624
  outline: none;
3630
3625
  position: relative;
3631
3626
  }
@@ -3684,7 +3679,7 @@
3684
3679
  --ck-tab-button-margin-block: var(--ck-tab-button-margin-gap);
3685
3680
  --ck-tab-button-margin-inline: var(--ck-tab-button-margin-bar);
3686
3681
  --ck-tab-button-icon-size: 20px;
3687
- --ck-tab-button-border-radius: var(--ck-radius-base);
3682
+ --ck-tab-button-border-radius: var(--ck-border-radius, var(--ck-radius-base));
3688
3683
  --ck-tab-button-border-width: var(--ck-border-width-control);
3689
3684
  --ck-tab-button-with-text-padding-inline: var(--ck-spacing-padding-compact);
3690
3685
  --ck-tab-button-background: transparent;
@@ -3839,7 +3834,7 @@
3839
3834
 
3840
3835
  &.ck-tab-panel_disabled {
3841
3836
  pointer-events: none;
3842
- opacity: var(--ck-disabled-opacity);
3837
+ opacity: var(--ck-disabled-opacity, var(--ck-opacity-disabled));
3843
3838
  }
3844
3839
  }
3845
3840