@vaadin/rich-text-editor 25.0.0-alpha1 → 25.0.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/rich-text-editor",
-  "version": "25.0.0-alpha1",
+  "version": "25.0.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -19,12 +19,8 @@
   "main": "vaadin-rich-text-editor.js",
   "module": "vaadin-rich-text-editor.js",
   "type": "module",
-  "scripts": {
-    "icons": "gulp icons --gulpfile gulpfile.cjs"
-  },
   "files": [
     "src",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "vendor",
@@ -39,24 +35,21 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/button": "25.0.0-alpha1",
-    "@vaadin/component-base": "25.0.0-alpha1",
-    "@vaadin/confirm-dialog": "25.0.0-alpha1",
-    "@vaadin/overlay": "25.0.0-alpha1",
-    "@vaadin/text-field": "25.0.0-alpha1",
-    "@vaadin/tooltip": "25.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
+    "@vaadin/button": "25.0.0-alpha11",
+    "@vaadin/component-base": "25.0.0-alpha11",
+    "@vaadin/confirm-dialog": "25.0.0-alpha11",
+    "@vaadin/overlay": "25.0.0-alpha11",
+    "@vaadin/text-field": "25.0.0-alpha11",
+    "@vaadin/tooltip": "25.0.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha11",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/a11y-base": "25.0.0-alpha1",
-    "@vaadin/chai-plugins": "25.0.0-alpha1",
-    "@vaadin/test-runner-commands": "25.0.0-alpha1",
-    "@vaadin/testing-helpers": "^1.1.0",
-    "gulp": "^5.0.0",
-    "gulp-cli": "^3.0.0",
-    "gulp-iconfont": "^11.0.0",
+    "@vaadin/a11y-base": "25.0.0-alpha11",
+    "@vaadin/chai-plugins": "25.0.0-alpha11",
+    "@vaadin/test-runner-commands": "25.0.0-alpha11",
+    "@vaadin/testing-helpers": "^2.0.0",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha11",
     "sinon": "^18.0.0"
   },
   "cvdlName": "vaadin-rich-text-editor",
@@ -64,5 +57,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
+  "gitHead": "abfd315ba5a7484a613e0768635a4e8fe945a44b"
 }

package/src/styles/vaadin-rich-text-editor-base-icons.js

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { css } from 'lit';
+
+export const icons = css`
+  :host {
+    --_vaadin-icon-align-center: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 10H6M21 6H3M21 14H3M18 18H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+    --_vaadin-icon-align-left: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 10H3M20 6H3M20 14H3M16 18H3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+    --_vaadin-icon-align-right: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 10H8M21 6H4M21 14H4M21 18H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+    --_vaadin-icon-background: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.6 12L12 9.4L8 13.4L10.575 16L14.6 12ZM13.425 8L16 10.575L20 6.6L17.4 4L13.425 8ZM11.325 7.275L16.725 12.675L12 17.425C11.6 17.825 11.1292 18.025 10.5875 18.025C10.0458 18.025 9.575 17.825 9.175 17.425L8.5 18H3.5L6.65 14.875C6.25 14.475 6.04167 13.9958 6.025 13.4375C6.00833 12.8792 6.2 12.4 6.6 12L11.325 7.275ZM11.325 7.275L16 2.6C16.4 2.2 16.8708 2 17.4125 2C17.9542 2 18.425 2.2 18.825 2.6L21.425 5.175C21.825 5.575 22.025 6.04583 22.025 6.5875C22.025 7.12917 21.825 7.6 21.425 8L16.725 12.675L11.325 7.275Z" fill="currentColor"/></svg>');
+    --_vaadin-icon-bold: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linejoin="round" d="M6.75 3.744h-.753v8.25h7.125a4.125 4.125 0 0 0 0-8.25H6.75Zm0 0v.38m0 16.122h6.747a4.5 4.5 0 0 0 0-9.001h-7.5v9h.753Zm0 0v-.37m0-15.751h6a3.75 3.75 0 1 1 0 7.5h-6m0-7.5v7.5m0 0v8.25m0-8.25h6.375a4.125 4.125 0 0 1 0 8.25H6.75m.747-15.38h4.875a3.375 3.375 0 0 1 0 6.75H7.497v-6.75Zm0 7.5h5.25a3.75 3.75 0 0 1 0 7.5h-5.25v-7.5Z" /></svg>');
+    --_vaadin-icon-clear: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="m528-546-93-93-121-121h486v120H568l-40 94ZM792-56 460-388l-80 188H249l119-280L56-792l56-56 736 736-56 56Z"/></svg>');
+    --_vaadin-icon-code: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 18L22 12L16 6M8 6L2 12L8 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+    --_vaadin-icon-color: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 17L10.75 3H13.25L18.5 17H16.1L14.85 13.4H9.2L7.9 17H5.5ZM9.9 11.4H14.1L12.05 5.6H11.95L9.9 11.4Z" fill="currentColor"/></svg>');
+    --_vaadin-icon-color-underline: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 24V20H22V24H2Z" fill="currentColor"/></svg>');
+    --_vaadin-icon-h1: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501m4.501-8.627 2.25-1.5v10.126m0 0h-2.25m2.25 0h2.25" /></svg>');
+    --_vaadin-icon-h2: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 19.5H16.5v-1.609a2.25 2.25 0 0 1 1.244-2.012l2.89-1.445c.651-.326 1.116-.955 1.116-1.683 0-.498-.04-.987-.118-1.463-.135-.825-.835-1.422-1.668-1.489a15.202 15.202 0 0 0-3.464.12M2.243 4.492v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501" /></svg>');
+    --_vaadin-icon-h3: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M20.905 14.626a4.52 4.52 0 0 1 .738 3.603c-.154.695-.794 1.143-1.504 1.208a15.194 15.194 0 0 1-3.639-.104m4.405-4.707a4.52 4.52 0 0 0 .738-3.603c-.154-.696-.794-1.144-1.504-1.209a15.19 15.19 0 0 0-3.639.104m4.405 4.708H18M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501" /></svg>');
+    --_vaadin-icon-italic: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5.248 20.246H9.05m0 0h3.696m-3.696 0 5.893-16.502m0 0h-3.697m3.697 0h3.803" /></svg>');
+    --_vaadin-icon-list-number: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.242 5.992h12m-12 6.003H20.24m-12 5.999h12M4.117 7.495v-3.75H2.99m1.125 3.75H2.99m1.125 0H5.24m-1.92 2.577a1.125 1.125 0 1 1 1.591 1.59l-1.83 1.83h2.16M2.99 15.745h1.125a1.125 1.125 0 0 1 0 2.25H3.74m0-.002h.375a1.125 1.125 0 0 1 0 2.25H2.99" /></svg>');
+    --_vaadin-icon-list-bullet: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" /></svg>');
+    --_vaadin-icon-quote: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/></svg>');
+    --_vaadin-icon-strikethrough: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 12a8.912 8.912 0 0 1-.318-.079c-1.585-.424-2.904-1.247-3.76-2.236-.873-1.009-1.265-2.19-.968-3.301.59-2.2 3.663-3.29 6.863-2.432A8.186 8.186 0 0 1 16.5 5.21M6.42 17.81c.857.99 2.176 1.812 3.761 2.237 3.2.858 6.274-.23 6.863-2.431.233-.868.044-1.779-.465-2.617M3.75 12h16.5" /></svg>');
+    --_vaadin-icon-subscript: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M760-160v-80q0-17 11.5-28.5T800-280h80v-40H760v-40h120q17 0 28.5 11.5T920-320v40q0 17-11.5 28.5T880-240h-80v40h120v40H760Zm-525-80 185-291-172-269h106l124 200h4l123-200h107L539-531l186 291H618L482-457h-4L342-240H235Z"/></svg>');
+    --_vaadin-icon-superscript: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M760-600v-80q0-17 11.5-28.5T800-720h80v-40H760v-40h120q17 0 28.5 11.5T920-760v40q0 17-11.5 28.5T880-680h-80v40h120v40H760ZM235-160l185-291-172-269h106l124 200h4l123-200h107L539-451l186 291H618L482-377h-4L342-160H235Z"/></svg>');
+    --_vaadin-icon-underline: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M17.995 3.744v7.5a6 6 0 1 1-12 0v-7.5m-2.25 16.502h16.5" /></svg>');
+  }
+`;

package/src/styles/vaadin-rich-text-editor-base-styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import type { CSSResult } from 'lit';
+
+export const richTextEditorStyles: CSSResult;

package/src/styles/vaadin-rich-text-editor-base-styles.js

@@ -0,0 +1,346 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { css } from 'lit';
+import { icons } from './vaadin-rich-text-editor-base-icons.js';
+
+const base = css`
+  :host {
+    background: var(--vaadin-rich-text-editor-background, var(--vaadin-background-color));
+    border: var(--vaadin-input-field-border-width, 1px) solid
+      var(--vaadin-input-field-border-color, var(--vaadin-border-color-strong));
+    border-radius: var(--vaadin-input-field-border-radius, var(--vaadin-radius-m));
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  :host(:focus-within) {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    outline-offset: -1px;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  .announcer {
+    clip: rect(0, 0, 0, 0);
+    position: fixed;
+  }
+
+  input[type='file'] {
+    display: none;
+  }
+
+  .vaadin-rich-text-editor-container {
+    display: flex;
+    flex: auto;
+    flex-direction: column;
+    max-height: inherit;
+    min-height: inherit;
+  }
+`;
+
+export const content = css`
+  [part='content'] {
+    box-sizing: border-box;
+    display: flex;
+    flex: auto;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+  }
+
+  /*
+    Quill core styles.
+    CSS selectors removed: margin & padding reset, check list, indentation, video, colors, ordered & unordered list, h1-6, anchor
+  */
+  .ql-clipboard {
+    height: 1px;
+    left: -100000px;
+    overflow-y: hidden;
+    position: absolute;
+    top: 50%;
+  }
+
+  .ql-clipboard p {
+    margin: 0;
+    padding: 0;
+  }
+
+  .ql-editor {
+    box-sizing: border-box;
+    color: var(--vaadin-rich-text-editor-editor-color, var(--vaadin-color));
+    flex: 1;
+    font-size: var(--vaadin-rich-text-editor-editor-font-size, inherit);
+    height: 100%;
+    line-height: var(--vaadin-rich-text-editor-editor-line-height, inherit);
+    outline: none;
+    overflow-y: auto;
+    padding: var(--vaadin-rich-text-editor-editor-padding, var(--vaadin-padding-container));
+    tab-size: 4;
+    -moz-tab-size: 4;
+    text-align: left;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+
+  .ql-editor > * {
+    cursor: text;
+  }
+
+  .ql-align-left {
+    text-align: left;
+  }
+
+  .ql-direction-rtl {
+    direction: rtl;
+    text-align: inherit;
+  }
+
+  .ql-align-center {
+    text-align: center;
+  }
+
+  .ql-align-justify {
+    text-align: justify;
+  }
+
+  .ql-align-right {
+    text-align: right;
+  }
+  /* quill core end */
+
+  blockquote {
+    border-inline-start: 4px solid var(--vaadin-border-color);
+    margin: var(--vaadin-padding-container);
+    padding-inline-start: var(--vaadin-padding);
+  }
+
+  code,
+  pre {
+    background-color: var(--vaadin-background-container);
+    border-radius: var(--vaadin-radius-s);
+  }
+
+  pre {
+    white-space: pre-wrap;
+    margin-block: var(--vaadin-padding);
+    padding: var(--vaadin-padding-container);
+  }
+
+  code {
+    padding: 0.125rem 0.25rem;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  /* RTL specific styles */
+  :host([dir='rtl']) .ql-editor {
+    direction: rtl;
+    text-align: right;
+  }
+`;
+
+const toolbar = css`
+  [part='toolbar'] {
+    background-color: var(--vaadin-rich-text-editor-toolbar-background, var(--vaadin-background-container));
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    gap: var(--vaadin-rich-text-editor-toolbar-gap, var(--vaadin-gap-container-inline));
+    padding: var(--vaadin-rich-text-editor-toolbar-padding, var(--vaadin-padding));
+  }
+
+  [part~='toolbar-group'] {
+    display: flex;
+  }
+
+  [part~='toolbar-button'] {
+    background: var(--vaadin-rich-text-editor-toolbar-button-background, var(--vaadin-background-container));
+    border: var(--vaadin-rich-text-editor-toolbar-button-border-width, 1px) solid
+      var(--vaadin-rich-text-editor-toolbar-button-border-color, transparent);
+    border-radius: var(--vaadin-rich-text-editor-toolbar-button-border-radius, var(--vaadin-radius-m));
+    color: var(--vaadin-rich-text-editor-toolbar-button-text-color, var(--vaadin-color));
+    cursor: var(--vaadin-clickable-cursor);
+    flex-shrink: 0;
+    font-family: var(--vaadin-rich-text-editor-toolbar-button-font-family, inherit);
+    font-size: var(--vaadin-rich-text-editor-toolbar-button-font-size, inherit);
+    font-weight: var(--vaadin-rich-text-editor-toolbar-button-font-weight, 500);
+    height: var(--vaadin-rich-text-editor-toolbar-button-height, auto);
+    line-height: var(--vaadin-rich-text-editor-toolbar-button-line-height, inherit);
+    padding: var(--vaadin-rich-text-editor-toolbar-button-padding, var(--vaadin-padding-container));
+    position: relative;
+  }
+
+  [part~='toolbar-button']::before {
+    background: currentcolor;
+    content: '';
+    display: block;
+    height: var(--vaadin-icon-size, 1lh);
+    width: var(--vaadin-icon-size, 1lh);
+  }
+
+  [part~='toolbar-button']:focus {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    outline-offset: 1px;
+    z-index: 1;
+  }
+
+  [part~='toolbar-button'][on],
+  [part~='toolbar-button'][aria-expanded='true'] {
+    --vaadin-rich-text-editor-toolbar-button-background: var(--vaadin-background-container-strong);
+  }
+
+  [part~='toolbar-button-undo']::before {
+    mask-image: var(--_vaadin-icon-undo);
+  }
+
+  [part~='toolbar-button-redo']::before {
+    mask-image: var(--_vaadin-icon-redo);
+  }
+
+  [part~='toolbar-button-bold']::before {
+    mask-image: var(--_vaadin-icon-bold);
+  }
+
+  [part~='toolbar-button-italic']::before {
+    mask-image: var(--_vaadin-icon-italic);
+  }
+
+  [part~='toolbar-button-underline']::before {
+    mask-image: var(--_vaadin-icon-underline);
+  }
+
+  [part~='toolbar-button-strike']::before {
+    mask-image: var(--_vaadin-icon-strikethrough);
+  }
+
+  [part~='toolbar-button-color']::before {
+    mask-image: var(--_vaadin-icon-color);
+  }
+
+  [part~='toolbar-button-color']::after {
+    background-color: var(--_color-value, currentColor);
+  }
+
+  [part~='toolbar-button-background']::before {
+    mask-image: var(--_vaadin-icon-background);
+  }
+
+  [part~='toolbar-button-background']::after {
+    background-color: var(--_background-value, currentColor);
+  }
+
+  [part~='toolbar-button-color']::after,
+  [part~='toolbar-button-background']::after {
+    bottom: 50%;
+    content: '';
+    display: block;
+    height: var(--vaadin-icon-size, 1lh);
+    mask-image: var(--_vaadin-icon-color-underline);
+    position: absolute;
+    transform: translateY(50%);
+    width: var(--vaadin-icon-size, 1lh);
+  }
+
+  [part~='toolbar-button-h1']::before {
+    mask-image: var(--_vaadin-icon-h1);
+  }
+
+  [part~='toolbar-button-h2']::before {
+    mask-image: var(--_vaadin-icon-h2);
+  }
+
+  [part~='toolbar-button-h3']::before {
+    mask-image: var(--_vaadin-icon-h3);
+  }
+
+  [part~='toolbar-button-subscript']::before {
+    mask-image: var(--_vaadin-icon-subscript);
+  }
+
+  [part~='toolbar-button-superscript']::before {
+    mask-image: var(--_vaadin-icon-superscript);
+  }
+
+  [part~='toolbar-button-list-ordered']::before {
+    mask-image: var(--_vaadin-icon-list-number);
+  }
+
+  [part~='toolbar-button-list-bullet']::before {
+    mask-image: var(--_vaadin-icon-list-bullet);
+  }
+
+  [part~='toolbar-button-align-left']::before {
+    mask-image: var(--_vaadin-icon-align-left);
+  }
+
+  [part~='toolbar-button-align-center']::before {
+    mask-image: var(--_vaadin-icon-align-center);
+  }
+
+  [part~='toolbar-button-align-right']::before {
+    mask-image: var(--_vaadin-icon-align-right);
+  }
+
+  [part~='toolbar-button-image']::before {
+    mask-image: var(--_vaadin-icon-image);
+  }
+
+  [part~='toolbar-button-link']::before {
+    mask-image: var(--_vaadin-icon-link);
+  }
+
+  [part~='toolbar-button-blockquote']::before {
+    mask-image: var(--_vaadin-icon-quote);
+  }
+
+  [part~='toolbar-button-code-block']::before {
+    mask-image: var(--_vaadin-icon-code);
+  }
+
+  [part~='toolbar-button-clean']::before {
+    mask-image: var(--_vaadin-icon-clear);
+  }
+
+  @media (forced-colors: active) {
+    [part~='toolbar-button']::before {
+      background: CanvasText;
+    }
+
+    [part~='toolbar-button'][on] {
+      background: Highlight;
+    }
+
+    [part~='toolbar-button'][on]::before {
+      background: HighlightText;
+    }
+  }
+`;
+
+const states = css`
+  :host([readonly]) [part='toolbar'] {
+    display: none;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+    opacity: 0.5;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+`;
+
+export const richTextEditorStyles = [icons, base, content, toolbar, states];

package/src/styles/vaadin-rich-text-editor-popup-overlay-base-styles.js

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { css } from 'lit';
+import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
+
+export const richTextEditorPopupOverlay = css`
+  [part='overlay'] {
+    padding: var(--vaadin-rich-text-editor-overlay-padding, var(--vaadin-padding-container));
+  }
+
+  [part='content'] {
+    display: grid;
+    gap: var(--vaadin-rich-text-editor-overlay-gap, var(--vaadin-gap-container-inline));
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+
+  [part='content'] ::slotted(button) {
+    border: var(--vaadin-rich-text-editor-overlay-color-option-border-width, 1px) solid
+      var(--vaadin-rich-text-editor-overlay-color-option-border-color, transparent);
+    border-radius: var(--vaadin-rich-text-editor-overlay-color-option-border-radius, 9999px);
+    cursor: var(--vaadin-clickable-cursor);
+    font-size: var(--vaadin-rich-text-editor-overlay-color-option-font-size, inherit);
+    height: var(--vaadin-rich-text-editor-overlay-color-option-height, 1lh);
+    line-height: var(--vaadin-rich-text-editor-overlay-color-option-line-height, inherit);
+    padding: var(--vaadin-rich-text-editor-overlay-color-option-padding, 0);
+    width: var(--vaadin-rich-text-editor-overlay-color-option-width, 1lh);
+  }
+
+  [part='content'] ::slotted(button:focus-visible) {
+    outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+    outline-offset: 1px;
+  }
+`;
+
+export const richTextEditorPopupOverlayStyles = [overlayStyles, richTextEditorPopupOverlay];

package/src/vaadin-rich-text-editor-mixin.js

@@ -10,7 +10,6 @@
  */
 import '../vendor/vaadin-quill.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
-import { isFirefox } from '@vaadin/component-base/src/browser-utils.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 
@@ -177,7 +176,7 @@ export const RichTextEditorMixin = (superClass) =>
               '#ffffff', '#facccc', '#ffebcc', '#ffffcc', '#cce8cc', '#cce0f5', '#ebd6ff',
               '#bbbbbb', '#f06666', '#ffc266', '#ffff66', '#66b966', '#66a3e0', '#c285ff',
               '#888888', '#a10000', '#b26b00', '#b2b200', '#006100', '#0047b2', '#6b24b2',
-              '#444444', '#5c0000', '#663d00', '#666600', '#003700', '#002966', '#3d1466'
+              '#444444', '#5c0000', '#663d00', '#666600', '#003700', '#002966', '#3d1466',
             ];
           },
         },
@@ -352,11 +351,6 @@ export const RichTextEditorMixin = (superClass) =>
       this.__patchToolbar();
       this.__patchKeyboard();
 
-      /* c8 ignore next 3 */
-      if (isFirefox) {
-        this.__patchFirefoxFocus();
-      }
-
       this.__setDirection(this.__dir);
 
       const editorContent = editor.querySelector('.ql-editor');
@@ -422,13 +416,32 @@ export const RichTextEditorMixin = (superClass) =>
       // Flush pending htmlValue only once the editor is fully initialized
       this.__flushPendingHtmlValue();
 
-      this.$.backgroundPopup.target = this.shadowRoot.querySelector('#btn-background');
-      this.$.colorPopup.target = this.shadowRoot.querySelector('#btn-color');
+      this.querySelector('[slot="color-popup"]').target = this.shadowRoot.querySelector('#btn-color');
+      this.querySelector('[slot="background-popup"]').target = this.shadowRoot.querySelector('#btn-background');
+
+      // Set up tooltip to show when hovering or focusing toolbar buttons
+      this._tooltip = document.createElement('vaadin-tooltip');
+      this._tooltip.slot = 'tooltip';
+      // Create dummy aria target, as toolbar buttons already have aria-label, and also cannot be linked with the
+      // tooltip being in the light DOM
+      this._tooltip.ariaTarget = document.createElement('div');
+      this.append(this._tooltip);
+
+      const buttons = this.shadowRoot.querySelectorAll('[part~="toolbar-button"]');
+      buttons.forEach((button) => {
+        button.addEventListener('mouseenter', this.__showTooltip.bind(this));
+        button.addEventListener('focusin', this.__showTooltip.bind(this));
+      });
+    }
 
-      requestAnimationFrame(() => {
-        this.$.linkDialog.$.dialog.$.overlay.addEventListener('vaadin-overlay-open', () => {
-          this.$.linkUrl.focus();
-        });
+    /** @private */
+    __showTooltip(event) {
+      const target = event.target;
+      this._tooltip.target = target;
+      this._tooltip.text = target.ariaLabel;
+      this._tooltip._stateController.open({
+        focus: event.type === 'focusin',
+        hover: event.type === 'mouseenter',
       });
     }
 
@@ -512,69 +525,6 @@ export const RichTextEditorMixin = (superClass) =>
       this._toolbarState = STATE.DEFAULT;
     }
 
-    /** @private */
-    __createFakeFocusTarget() {
-      const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
-      const elem = document.createElement('textarea');
-      // Reset box model
-      elem.style.border = '0';
-      elem.style.padding = '0';
-      elem.style.margin = '0';
-      // Move element out of screen horizontally
-      elem.style.position = 'absolute';
-      elem.style[isRTL ? 'right' : 'left'] = '-9999px';
-      // Move element to the same position vertically
-      const yPosition = window.pageYOffset || document.documentElement.scrollTop;
-      elem.style.top = `${yPosition}px`;
-      return elem;
-    }
-
-    /** @private */
-    __patchFirefoxFocus() {
-      // In Firefox 63+ with native Shadow DOM, when moving focus out of
-      // contenteditable and back again within same shadow root, cursor
-      // disappears. See https://bugzilla.mozilla.org/show_bug.cgi?id=1496769
-      const editorContent = this.shadowRoot.querySelector('.ql-editor');
-      let isFake = false;
-
-      const focusFake = () => {
-        isFake = true;
-        this.__fakeTarget = this.__createFakeFocusTarget();
-        document.body.appendChild(this.__fakeTarget);
-        // Let the focus step out of shadow root!
-        this.__fakeTarget.focus();
-        return new Promise((resolve) => {
-          setTimeout(resolve);
-        });
-      };
-
-      const focusBack = (offsetNode, offset) => {
-        this._editor.focus();
-        if (offsetNode) {
-          this._editor.selection.setNativeRange(offsetNode, offset);
-        }
-        document.body.removeChild(this.__fakeTarget);
-        delete this.__fakeTarget;
-        isFake = false;
-      };
-
-      editorContent.addEventListener('mousedown', (e) => {
-        if (!this._editor.hasFocus()) {
-          const { x, y } = e;
-          const { offset, offsetNode } = document.caretPositionFromPoint(x, y);
-          focusFake().then(() => {
-            focusBack(offsetNode, offset);
-          });
-        }
-      });
-
-      editorContent.addEventListener('focusin', () => {
-        if (isFake === false) {
-          focusFake().then(() => focusBack());
-        }
-      });
-    }
-
     /** @private */
     __patchToolbar() {
       const toolbar = this._editor.getModule('toolbar');
@@ -721,7 +671,8 @@ export const RichTextEditorMixin = (superClass) =>
       if (e.keyCode === 13) {
         e.preventDefault();
         e.stopPropagation();
-        this.$.confirmLink.click();
+        this._onLinkEditConfirm();
+        this._closeLinkDialog();
       }
     }
 
@@ -868,10 +819,7 @@ export const RichTextEditorMixin = (superClass) =>
         timeOut.after(timeout),
         () => {
           const formatting = Array.from(this.shadowRoot.querySelectorAll('[part="toolbar"] .ql-active'))
-            .map((button) => {
-              const tooltip = this.shadowRoot.querySelector(`[for="${button.id}"]`);
-              return tooltip.text;
-            })
+            .map((button) => button.getAttribute('aria-label'))
             .join(', ');
           announcer.textContent = formatting;
         },