@ckeditor/ckeditor5-ai 49.0.0-alpha.1 → 49.0.0-alpha.2

package/dist/index-editor.css

@@ -85,7 +85,7 @@
   }
 
   & .ck-ai-form-content {
-    padding: var(--ck-spacing-large, var(--ck-spacing-padding-comfortable));
+    padding: var(--ck-spacing-padding-comfortable);
     width: 100%;
 
     & .ck-input {
@@ -101,7 +101,7 @@
 
       &:focus {
         border: var(--ck-focus-ring);
-        box-shadow: var(--ck-focus-outer-shadow, var(--ck-focus-shadow)), 0 0;
+        box-shadow: var(--ck-focus-shadow), 0 0;
         outline: none;
       }
     }
@@ -118,7 +118,7 @@
       & .ck-ai-form__content-field {
         white-space: normal;
         width: 100%;
-        padding: var(--ck-spacing-tiny, var(--ck-spacing-padding-tight)) var(--ck-spacing-medium, var(--ck-spacing-padding));
+        padding: var(--ck-spacing-padding-tight) var(--ck-spacing-padding);
         min-height: calc(var(--ck-line-height-base) * var(--ck-font-size-base));
         box-sizing: content-box;
 
@@ -138,11 +138,11 @@
 
       & .ck-spinner-container {
         [dir="ltr"] & {
-          margin-right: var(--ck-spacing-medium, var(--ck-spacing-gap));
+          margin-right: var(--ck-spacing-gap);
         }
 
         [dir="rtl"] & {
-          margin-left: var(--ck-spacing-medium, var(--ck-spacing-gap));
+          margin-left: var(--ck-spacing-gap);
         }
       }
 
@@ -171,8 +171,8 @@
     }
 
     & .ck-ai-form__toolbar {
-      margin-top: var(--ck-spacing-medium, var(--ck-spacing-gap));
-      margin-bottom: calc(2 * var(--ck-spacing-medium, var(--ck-spacing-gap)));
+      margin-top: var(--ck-spacing-gap);
+      margin-bottom: calc(2 * var(--ck-spacing-gap));
       border: none;
       padding: 0;
     }
@@ -196,11 +196,11 @@
 
       & > .ck.ck-ai-form__submit {
         [dir="ltr"] & {
-          margin-left: var(--ck-spacing-medium, var(--ck-spacing-gap));
+          margin-left: var(--ck-spacing-gap);
         }
 
         [dir="rtl"] & {
-          margin-right: var(--ck-spacing-medium, var(--ck-spacing-gap));
+          margin-right: var(--ck-spacing-gap);
         }
 
         border-color: var(--ck-ai-form-submit-button-border-color);
@@ -212,19 +212,19 @@
       }
 
       & > .ck-labeled-field-view .ck-ai-form__toggle-history {
-        font-size: var(--ck-font-size-tiny, var(--ck-font-size-xs));
+        font-size: var(--ck-font-size-xs);
         position: absolute;
 
         [dir="ltr"] & {
-          right: var(--ck-spacing-medium, var(--ck-spacing-base));
+          right: var(--ck-spacing-base);
         }
 
         [dir="rtl"] & {
-          left: var(--ck-spacing-medium, var(--ck-spacing-base));
+          left: var(--ck-spacing-base);
         }
 
-        bottom: var(--ck-spacing-small, var(--ck-spacing-sm));
-        top: var(--ck-spacing-small, var(--ck-spacing-sm));
+        bottom: var(--ck-spacing-sm);
+        top: var(--ck-spacing-sm);
         min-height: unset;
         min-width: unset;
         padding: 4px;
@@ -258,7 +258,7 @@
         & > .ck-button {
           min-height: auto;
           font-size: var(--ck-ai-form-history-font-size);
-          margin: var(--ck-spacing-medium, var(--ck-spacing-gap)) 0 0;
+          margin: var(--ck-spacing-gap) 0 0;
           background: none;
           grid-area: 1 / 2 / 2 / 3;
           justify-self: start;
@@ -290,11 +290,11 @@
   }
 
   & .ck-ai-form__error {
-    padding: var(--ck-spacing-medium, var(--ck-spacing-padding));
+    padding: var(--ck-spacing-padding);
     background-color: var(--ck-ai-form-error-background);
     color: var(--ck-color-base-text);
     border-radius: var(--ck-border-radius-control);
-    margin-bottom: var(--ck-spacing-medium, var(--ck-spacing-gap));
+    margin-bottom: var(--ck-spacing-gap);
     justify-content: center;
     align-items: center;
     display: flex;
@@ -370,7 +370,7 @@
   }
 
   100% {
-    box-shadow: var(--ck-focus-outer-shadow, var(--ck-focus-shadow));
+    box-shadow: var(--ck-focus-shadow);
     border: var(--ck-focus-ring);
   }
 }
@@ -390,7 +390,7 @@
 
   & .ck-ai-suggestion__header {
     border-radius: var(--ck-radius-base);
-    padding: var(--ck-spacing-padding) var(--ck-spacing-large, var(--ck-spacing-padding-comfortable));
+    padding: var(--ck-spacing-padding) var(--ck-spacing-padding-comfortable);
     border-bottom: 1px solid var(--ck-color-base-border);
     z-index: 1;
     border-bottom-right-radius: 0;
@@ -411,7 +411,7 @@
     & > .ck-icon {
       width: 14px;
       height: 14px;
-      margin-right: var(--ck-spacing-medium, var(--ck-spacing-gap));
+      margin-right: var(--ck-spacing-gap);
       color: var(--ck-color-base-text);
     }
 
@@ -423,7 +423,7 @@
 
       & .ck-button__label {
         font-size: var(--ck-ai-chat-suggestion-container-header-font-size);
-        margin-right: var(--ck-spacing-standard, var(--ck-spacing-gap));
+        margin-right: var(--ck-spacing-gap);
       }
 
       & .ck-button__toggle {
@@ -437,8 +437,8 @@
   }
 
   & .ck-ai-suggestion__body {
-    gap: var(--ck-spacing-large, var(--ck-spacing-gap-comfortable));
-    border-radius: var(--ck-rounded-corners-radius, var(--ck-radius-corners));
+    gap: var(--ck-spacing-gap-comfortable);
+    border-radius: var(--ck-radius-corners);
     background: var(--ck-ai-chat-feed-item-background-color);
     border-top-left-radius: 0;
     border-top-right-radius: 0;
@@ -446,7 +446,7 @@
     display: flex;
 
     & .ck-ai-suggestion__body__content-parts {
-      gap: var(--ck-spacing-large, var(--ck-spacing-gap-comfortable));
+      gap: var(--ck-spacing-gap-comfortable);
       flex-direction: column;
       display: flex;
 
@@ -455,7 +455,7 @@
         padding-top: calc(var(--ck-ai-skeleton-gap) + var(--ck-spacing-gap-comfortable));
         padding-bottom: calc(var(--ck-ai-skeleton-gap) + var(--ck-spacing-gap-comfortable));
         background-color: var(--ck-color-base-background);
-        border-radius: var(--ck-rounded-corners-radius, var(--ck-radius-corners));
+        border-radius: var(--ck-radius-corners);
         align-items: flex-start;
         transition-delay: 0s;
         position: static;
@@ -474,7 +474,7 @@
   }
 
   & .ck-ai-suggestion__body, & .ck-ai-suggestion__changes {
-    padding: var(--ck-spacing-large, var(--ck-spacing-padding-comfortable)) var(--ck-spacing-medium, var(--ck-spacing-padding));
+    padding: var(--ck-spacing-padding-comfortable) var(--ck-spacing-padding);
   }
 }
 
@@ -581,7 +581,7 @@
 
       & p {
         background-color: var(--ck-ai-chat-feed-item-secondary-background-color);
-        padding: var(--ck-spacing-standard, var(--ck-spacing-padding));
+        padding: var(--ck-spacing-padding);
         border-radius: var(--ck-ai-border-radius);
         width: max-content;
         max-width: 100%;
@@ -596,12 +596,10 @@
     }
 
     &.ck-ai-chat__feed__ai-suggestion {
-      margin: 0 var(--ck-spacing-standard, var(--ck-spacing-gap));
+      margin: 0 var(--ck-spacing-gap);
 
       & .ck-ai-chat__feed__ai-suggestion__actions {
-        --ck-rounded-corners-radius: 2px;
-        --ck-radius-corners: 2px;
-        gap: var(--ck-spacing-standard, var(--ck-spacing-gap));
+        gap: var(--ck-spacing-gap);
         flex-direction: row;
         width: fit-content;
         display: flex;
@@ -676,14 +674,14 @@
     }
 
     & .ck-ai-chat__feed__context-chips {
-      margin-bottom: var(--ck-spacing-medium-small, var(--ck-spacing-gap-snug));
+      margin-bottom: var(--ck-spacing-gap-snug);
       justify-content: flex-end;
       display: flex;
     }
 
     & .ck-ai-web-sources {
-      gap: var(--ck-spacing-standard, var(--ck-spacing-gap));
-      padding: var(--ck-spacing-medium, var(--ck-spacing-padding)) 0 0;
+      gap: var(--ck-spacing-gap);
+      padding: var(--ck-spacing-padding) 0 0;
       grid-template-columns: repeat(3, 1fr);
       display: grid;
 
@@ -694,7 +692,7 @@
         line-height: 1.4em;
 
         & > .ck-icon {
-          margin-right: var(--ck-spacing-medium-small, var(--ck-spacing-gap-snug));
+          margin-right: var(--ck-spacing-gap-snug);
           color: var(--ck-ai-chat-feed-web-sources-header-icon-color);
           height: var(--ck-ai-chat-feed-web-sources-header-icon-size);
           width: var(--ck-ai-chat-feed-web-sources-header-icon-size);
@@ -709,7 +707,7 @@
       }
 
       & > .ck-ai-web-source {
-        padding: var(--ck-spacing-medium, var(--ck-spacing-padding)) var(--ck-spacing-large, var(--ck-spacing-padding-comfortable));
+        padding: var(--ck-spacing-padding) var(--ck-spacing-padding-comfortable);
         background-color: var(--ck-color-base-background);
         border: 0;
         border-radius: 50px;
@@ -723,7 +721,7 @@
         }
 
         & .ck-ai-web-source__image, & .ck-button__icon {
-          margin-right: var(--ck-spacing-medium, var(--ck-spacing-gap));
+          margin-right: var(--ck-spacing-gap);
           color: var(--ck-ai-chat-feed-web-sources-header-icon-color);
           width: 16px;
           height: 16px;
@@ -741,14 +739,14 @@
 
         & .ck-ai-web-source__title {
           align-items: center;
-          gap: var(--ck-spacing-small, var(--ck-spacing-gap-compact));
+          gap: var(--ck-spacing-gap-compact);
           display: flex;
         }
       }
     }
 
     & > .ck-ai-web-sources {
-      padding: var(--ck-spacing-extra-large, var(--ck-spacing-padding-spacious)) 0 var(--ck-spacing-medium, var(--ck-spacing-padding)) 0;
+      padding: var(--ck-spacing-padding-spacious) 0 var(--ck-spacing-padding) 0;
     }
   }
 
@@ -757,7 +755,7 @@
     display: flex;
 
     & .ck.ck-ai-dots-loader {
-      margin-inline: var(--ck-spacing-large, var(--ck-spacing-gap-comfortable)) var(--ck-spacing-medium, var(--ck-spacing-gap));
+      margin-inline: var(--ck-spacing-gap-comfortable) var(--ck-spacing-gap);
     }
 
     & .ck.ck-ai-chat__loader-text {
@@ -790,18 +788,18 @@
 }
 
 .ck-ai-web-source__tooltip-balloon {
-  border-radius: var(--ck-rounded-corners-radius, var(--ck-radius-corners));
+  border-radius: var(--ck-radius-corners);
 
   & .ck-ai-web-source__tooltip {
-    font-size: var(--ck-font-size-tiny, var(--ck-font-size-xs));
+    font-size: var(--ck-font-size-xs);
     line-height: var(--ck-line-height-base);
     width: 214px;
     padding: .8em;
 
     & .ck-ai-web-source__tooltip-row {
       align-items: center;
-      gap: var(--ck-spacing-medium-small, var(--ck-spacing-gap-snug));
-      margin-bottom: var(--ck-spacing-medium-small, var(--ck-spacing-gap-snug));
+      gap: var(--ck-spacing-gap-snug);
+      margin-bottom: var(--ck-spacing-gap-snug);
       display: flex;
 
       &:last-child {
@@ -810,7 +808,7 @@
     }
 
     & .ck-ai-web-source__tooltip-image, & .ck-ai-web-source__tooltip-title, & .ck-ai-web-source__tooltip-url {
-      font-size: var(--ck-font-size-tiny, var(--ck-font-size-xs));
+      font-size: var(--ck-font-size-xs);
       line-height: var(--ck-line-height-base);
     }
 
@@ -879,7 +877,7 @@
 }
 
 .ck-ai-chat-content {
-  font-family: var(--ck-font-face, var(--ck-font-family));
+  font-family: var(--ck-font-family);
   font-size: var(--ck-ai-chat-content-font-size);
   line-height: var(--ck-ai-chat-content-line-height);
   color: var(--ck-ai-chat-content-text-color);
@@ -1256,7 +1254,7 @@
 
   & .ck-ai-chat__prompt-submit-button {
     height: auto;
-    margin-left: var(--ck-spacing-medium, var(--ck-spacing-gap));
+    margin-left: var(--ck-spacing-gap);
     font-size: var(--ck-ai-chat-prompt-submit-button-font-size);
     align-self: flex-end;
 
@@ -1299,7 +1297,7 @@
 
   & p {
     white-space: normal;
-    padding: var(--ck-spacing-large, var(--ck-spacing-padding-comfortable));
+    padding: var(--ck-spacing-padding-comfortable);
     line-height: 1.4;
 
     & button.ck-ai-chat-controls__start-new-chat-button {
@@ -1424,9 +1422,9 @@
     }
 
     & .ck-button {
-      --ck-ui-component-min-height: var(--ck-ai-chat-context-chip-icon-font-size);
       --ck-size-control-min-height: var(--ck-ai-chat-context-chip-icon-font-size);
       --ck-size-min-height: var(--ck-ai-chat-context-chip-icon-font-size);
+      --ck-button-hover-background: var(--ck-color-interactive-hover-surface-strong);
       max-width: var(--ck-ai-chat-context-chip-icon-font-size);
       max-height: var(--ck-ai-chat-context-chip-icon-font-size);
       margin-inline-start: var(--ck-spacing-gap-tight);
@@ -1495,7 +1493,6 @@
 }
 
 .ck-ai-chat-controls-button:not(.ck-button_small) {
-  --ck-ui-component-min-height: var(--ck-ai-chat-controls-button-min-height);
   --ck-size-min-height: var(--ck-ai-chat-controls-button-min-height);
   --ck-size-control-min-height: var(--ck-ai-chat-controls-button-min-height);
 }
@@ -1518,6 +1515,7 @@
   --ck-button-border: var(--ck-ai-chat-border-width) solid var(--ck-ai-chat-main-border-color);
   --ck-button-border-radius: var(--ck-ai-border-radius);
   --ck-button-default-background-color: var(--ck-ai-chat-user-context-background-color);
+  --ck-button-default-hover-background-color: var(--ck-color-interactive-hover-surface-strong);
   --ck-button-on-text-color: var(--ck-color-base-text);
   color: var(--ck-color-base-text);
   font-weight: var(--ck-font-weight-medium);
@@ -1779,7 +1777,7 @@
 .ck.ck-ai-suggestion__body__content-part {
   border-radius: var(--ck-ai-suggestion-content-part-radius);
   border: 1px solid var(--ck-color-base-border);
-  padding: var(--ck-spacing-large, var(--ck-spacing-padding-comfortable));
+  padding: var(--ck-spacing-padding-comfortable);
   background: var(--ck-color-base-background);
   padding-top: 0;
   animation: .2s ease-out ck-ai-suggestion-content-part-fade-in;
@@ -1873,7 +1871,7 @@
   padding: 0;
 
   & .ck-toolbar__items {
-    gap: var(--ck-spacing-medium, var(--ck-spacing-gap));
+    gap: var(--ck-spacing-gap);
   }
 
   & .ck-button {
@@ -1919,7 +1917,7 @@ div.ck.ck-ai-suggestion__content-part-state {
   height: var(--ck-ai-chat-balloon-height);
 
   & .ck.ck-form__header {
-    gap: var(--ck-spacing-standard, var(--ck-spacing-gap));
+    gap: var(--ck-spacing-gap);
 
     & .ck-ai-chat-balloon-header-separator {
       height: var(--ck-icon-size);
@@ -1972,7 +1970,7 @@ div.ck.ck-ai-suggestion__content-part-state {
   --ck-ai-tabs-overlay-height: 100%;
   --ck-ai-tabs-overlay-width: 500px;
   --ck-ai-tabs-overlay-width-maximized: 50%;
-  --ck-ai-tabs-overlay-z-index: calc(var(--ck-z-dialog, var(--ck-z-modal)) - 1);
+  --ck-ai-tabs-overlay-z-index: calc(var(--ck-z-modal) - 1);
 }
 
 .ck.ck-tabs.ck-ai-tabs {
@@ -2126,7 +2124,7 @@ div.ck.ck-ai-suggestion__content-part-state {
 }
 
 :root, :host {
-  --ck-ai-skeleton-z-index: calc(var(--ck-z-default) + 1);
+  --ck-ai-skeleton-z-index: calc(var(--ck-z-base) + 1);
   --ck-ai-core-skeleton-gradient-edge-color: var(--ck-ai-skeleton-base-color);
   --ck-ai-core-skeleton-gradient-mid-color: var(--ck-ai-skeleton-flash-color);
   --ck-ai-skeleton-item-background: linear-gradient(90deg,
@@ -2520,6 +2518,15 @@ div.ck.ck-ai-suggestion__content-part-state {
     color: var(--ck-ai-quick-actions-button-text-color);
   }
 
+  & .ck.ck-button:not(.ck-dropdown__button) {
+    box-shadow: none;
+    border-color: #0000;
+
+    &:focus:not(.ck-disabled) {
+      background: var(--ck-list-button-hover-background-color);
+    }
+  }
+
   & .ck-ai-quick-actions-search > .ck-search__query_with-icon {
     padding: var(--ck-spacing-padding-spacious)
 			var(--ck-spacing-padding-comfortable)
@@ -2603,7 +2610,7 @@ div.ck.ck-ai-suggestion__content-part-state {
   }
 
   & .ck.ck-button.ck-disabled {
-    opacity: var(--ck-disabled-opacity);
+    opacity: var(--ck-opacity-disabled);
   }
 
   & .ck-list__item:last-child > .ck.ck-button:not(.ck-list-item-button) {
@@ -2774,13 +2781,12 @@ div.ck.ck-ai-suggestion__content-part-state {
     margin: var(--ck-spacing-gap-comfortable) var(--ck-spacing-gap-comfortable) 0;
 
     & .ck-ai-suggestion__error-text {
-      --ck-border-radius: 4px;
       font-size: var(--ck-font-size-md);
       background-color: var(--ck-ai-notification-error-background-color);
       border: 1px solid var(--ck-ai-notification-error-border-color);
       color: var(--ck-ai-notification-text-color);
-      padding: var(--ck-spacing-medium, var(--ck-spacing-padding));
-      border-radius: var(--ck-border-radius, var(--ck-radius-base));
+      padding: var(--ck-spacing-padding);
+      border-radius: var(--ck-radius-base);
       line-height: 1.5em;
       display: block;
     }
@@ -2878,7 +2884,7 @@ div.ck.ck-ai-suggestion__content-part-state {
   background: var(--ck-ai-selection-color, var(--ck-ai-balloon-fake-selection-background-color));
 }
 
-.ck .ck-widget.ck-fake-ai-selection {
+.ck .ck-widget.ck-fake-ai-selection:not(.ck-fake-ai-selection-context) {
   outline-color: var(--ck-ai-selection-color, var(--ck-ai-balloon-fake-selection-outline-color));
 }
 
@@ -2886,7 +2892,7 @@ div.ck.ck-ai-suggestion__content-part-state {
   background: none;
 }
 
-.ck.ck-editor__editable .ck-widget.ck-fake-ai-selection-context {
+.ck.ck-editor__editable .ck-widget.ck-fake-ai-selection-context:not(.ck-widget_selected) {
   outline-color: #0000;
 }
 
@@ -2894,7 +2900,7 @@ div.ck.ck-ai-suggestion__content-part-state {
   background: var(--ck-ai-balloon-fake-selection-background-color);
 }
 
-.ck.ck-editor__editable:not(:focus) .ck-widget.ck-fake-ai-selection-context {
+.ck.ck-editor__editable:not(:focus) .ck-widget.ck-fake-ai-selection-context:not(.ck-widget_selected) {
   outline-color: var(--ck-ai-balloon-fake-selection-outline-color);
 }
 
@@ -3061,10 +3067,10 @@ div.ck.ck-ai-suggestion__content-part-state {
 .ck.ck-ai-notification {
   justify-content: space-between;
   align-items: flex-start;
-  gap: var(--ck-spacing-medium, var(--ck-spacing-gap));
+  gap: var(--ck-spacing-gap);
   width: fit-content;
   font-size: var(--ck-ai-notification-font-size);
-  padding: var(--ck-spacing-standard, var(--ck-spacing-padding));
+  padding: var(--ck-spacing-padding);
   border-radius: var(--ck-ai-border-radius);
   display: flex;
 
@@ -3092,7 +3098,6 @@ div.ck.ck-ai-suggestion__content-part-state {
 
     &.ck-ai-notification_error__dismiss-button {
       --ck-icon-font-size: .666em;
-      --ck-ui-component-min-height: 16px;
       --ck-size-min-height: 16px;
       flex-shrink: 0;
       padding: 0;
@@ -3113,7 +3118,7 @@ div.ck.ck-ai-suggestion__content-part-state {
 .ck.ck-button {
   &.ck-ai-button-stop-generating {
     min-height: 22px;
-    padding: 0 var(--ck-spacing-medium, var(--ck-spacing-padding)) 0 var(--ck-spacing-small, var(--ck-spacing-padding-compact));
+    padding: 0 var(--ck-spacing-padding) 0 var(--ck-spacing-padding-compact);
 
     & .ck.ck-icon.ck-button__icon {
       width: 14px;
@@ -3404,7 +3409,7 @@ div.ck.ck-ai-suggestion__content-part-state {
   box-sizing: border-box;
   width: var(--ck-ai-dots-loader-width);
   height: var(--ck-ai-dots-loader-height);
-  padding: var(--ck-spacing-small, var(--ck-spacing-padding-compact)) var(--ck-spacing-medium-small, var(--ck-spacing-padding-snug));
+  padding: var(--ck-spacing-padding-compact) var(--ck-spacing-padding-snug);
   border-radius: var(--ck-ai-dots-loader-border-radius);
   background-color: var(--ck-ai-dots-loader-background-color);
   flex-shrink: 0;
@@ -4319,7 +4324,7 @@ div.ck.ck-ai-suggestion__content-part-state {
         border-radius: var(--ck-radius-base);
         padding: var(--ck-spacing-padding-comfortable);
 
-        & .ck-ai_review__check-list-item-description:empty, & .ck-ai_review__check-list-item-icon-wrapper {
+        & .ck-ai_review__check-list-item-description:empty {
           display: none;
         }
       }