@vaadin/rich-text-editor 24.8.0-alpha9 → 25.0.0-alpha2

package/README.md

@@ -28,29 +28,6 @@ Once installed, import the component in your application:
 import '@vaadin/rich-text-editor';
 ```
 
-## Themes
-
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/rich-text-editor/vaadin-rich-text-editor.js) of the package uses the Lumo theme.
-
-To use the Material theme, import the component from the `theme/material` folder:
-
-```js
-import '@vaadin/rich-text-editor/theme/material/vaadin-rich-text-editor.js';
-```
-
-You can also import the Lumo version of the component explicitly:
-
-```js
-import '@vaadin/rich-text-editor/theme/lumo/vaadin-rich-text-editor.js';
-```
-
-Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/rich-text-editor/src/vaadin-rich-text-editor.js';
-```
-
 ## Contributing
 
 Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/rich-text-editor",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -35,30 +35,27 @@
     "Vaadin",
     "vaadin-rich-text-editor",
     "web-components",
-    "web-component",
-    "polymer"
+    "web-component"
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.8.0-alpha9",
-    "@vaadin/component-base": "24.8.0-alpha9",
-    "@vaadin/confirm-dialog": "24.8.0-alpha9",
-    "@vaadin/overlay": "24.8.0-alpha9",
-    "@vaadin/text-field": "24.8.0-alpha9",
-    "@vaadin/tooltip": "24.8.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9",
+    "@vaadin/button": "25.0.0-alpha2",
+    "@vaadin/component-base": "25.0.0-alpha2",
+    "@vaadin/confirm-dialog": "25.0.0-alpha2",
+    "@vaadin/overlay": "25.0.0-alpha2",
+    "@vaadin/text-field": "25.0.0-alpha2",
+    "@vaadin/tooltip": "25.0.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/a11y-base": "24.8.0-alpha9",
-    "@vaadin/chai-plugins": "24.8.0-alpha9",
-    "@vaadin/test-runner-commands": "24.8.0-alpha9",
-    "@vaadin/testing-helpers": "^1.1.0",
-    "gulp": "^4.0.2",
-    "gulp-cli": "^2.3.0",
+    "@vaadin/a11y-base": "25.0.0-alpha2",
+    "@vaadin/chai-plugins": "25.0.0-alpha2",
+    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/testing-helpers": "^2.0.0",
+    "gulp": "^5.0.0",
+    "gulp-cli": "^3.0.0",
     "gulp-iconfont": "^11.0.0",
     "sinon": "^18.0.0"
   },
@@ -67,5 +64,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
+  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
 }

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

@@ -8,7 +8,7 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css } from 'lit';
 
 export const contentStyles = css`
   [part='content'] {
@@ -113,6 +113,3 @@ export const contentStyles = css`
     text-align: right;
   }
 `;
-
-// Register a module with ID for backwards compatibility.
-registerStyles('', contentStyles, { moduleId: 'vaadin-rich-text-editor-content-styles' });

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

@@ -8,7 +8,7 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css } from 'lit';
 
 const template = document.createElement('template');
 
@@ -88,6 +88,3 @@ export const iconsStyles = css`
     content: var(--vaadin-rte-icons-redo);
   }
 `;
-
-// Register a module with ID for backwards compatibility.
-registerStyles('', iconsStyles, { moduleId: 'vaadin-rich-text-editor-icons' });

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

@@ -8,19 +8,16 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { css, html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
 import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { RichTextEditorPopupMixin } from './vaadin-rich-text-editor-popup-mixin.js';
 
-registerStyles('vaadin-rich-text-editor-popup-overlay', [overlayStyles], {
-  moduleId: 'vaadin-rich-text-editor-popup-overlay-styles',
-});
-
 /**
  * An element used internally by `<vaadin-rich-text-editor>`. Not intended to be used separately.
  *
@@ -29,30 +26,40 @@ registerStyles('vaadin-rich-text-editor-popup-overlay', [overlayStyles], {
  * @mixes RichTextEditorPopupMixin
  * @private
  */
-class RichTextEditorPopup extends RichTextEditorPopupMixin(PolymerElement) {
+class RichTextEditorPopup extends RichTextEditorPopupMixin(PolylitMixin(LitElement)) {
   static get is() {
     return 'vaadin-rich-text-editor-popup';
   }
 
-  static get template() {
+  static get styles() {
+    return css`
+      :host {
+        display: none;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
     return html`
-      <style>
-        :host {
-          display: none;
-        }
-      </style>
       <vaadin-rich-text-editor-popup-overlay
-        renderer="[[renderer]]"
-        opened="{{opened}}"
-        position-target="[[target]]"
+        .renderer="${this.renderer}"
+        .opened="${this.opened}"
+        .positionTarget="${this.target}"
         no-vertical-overlap
         horizontal-align="start"
         vertical-align="top"
-        on-vaadin-overlay-escape-press="_onOverlayEscapePress"
         focus-trap
+        @opened-changed="${this._onOpenedChanged}"
+        @vaadin-overlay-escape-press="${this._onOverlayEscapePress}"
       ></vaadin-rich-text-editor-popup-overlay>
     `;
   }
+
+  /** @private */
+  _onOpenedChanged(event) {
+    this.opened = event.detail.value;
+  }
 }
 
 defineCustomElement(RichTextEditorPopup);
@@ -70,12 +77,19 @@ export { RichTextEditorPopup };
  * @mixes PositionMixin
  * @private
  */
-class RichTextEditorPopupOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolymerElement)))) {
+class RichTextEditorPopupOverlay extends PositionMixin(
+  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))),
+) {
   static get is() {
     return 'vaadin-rich-text-editor-popup-overlay';
   }
 
-  static get template() {
+  static get styles() {
+    return overlayStyles;
+  }
+
+  /** @protected */
+  render() {
     return html`
       <div id="backdrop" part="backdrop" hidden></div>
       <div part="overlay" id="overlay">

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

@@ -8,7 +8,7 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css } from 'lit';
 import { iconsStyles } from './vaadin-rich-text-editor-icons.js';
 
 export const buttonsStyles = css`
@@ -178,6 +178,3 @@ export const buttonsStyles = css`
 `;
 
 export const toolbarStyles = [iconsStyles, buttonsStyles];
-
-// Register a module with ID for backwards compatibility.
-registerStyles('', toolbarStyles, { moduleId: 'vaadin-rich-text-editor-toolbar-styles' });

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

@@ -13,16 +13,14 @@ import '@vaadin/confirm-dialog/src/vaadin-confirm-dialog.js';
 import '@vaadin/text-field/src/vaadin-text-field.js';
 import '@vaadin/tooltip/src/vaadin-tooltip.js';
 import './vaadin-rich-text-editor-popup.js';
-import './vaadin-rich-text-editor-toolbar-styles.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
 import { richTextEditorStyles } from './vaadin-rich-text-editor-styles.js';
 
-registerStyles('vaadin-rich-text-editor', richTextEditorStyles, { moduleId: 'vaadin-rich-text-editor-styles' });
-
 /**
  * `<vaadin-rich-text-editor>` is a Web Component for rich text editing.
  * It provides a set of toolbar controls to apply formatting on the content,
@@ -101,37 +99,60 @@ registerStyles('vaadin-rich-text-editor', richTextEditorStyles, { moduleId: 'vaa
  * @mixes RichTextEditorMixin
  * @mixes ThemableMixin
  */
-class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(PolymerElement))) {
-  static get template() {
+class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-rich-text-editor';
+  }
+
+  static get cvdlName() {
+    return 'vaadin-rich-text-editor';
+  }
+
+  static get styles() {
+    return richTextEditorStyles;
+  }
+
+  /** @protected */
+  render() {
     return html`
       <div class="vaadin-rich-text-editor-container">
         <!-- Create toolbar container -->
         <div part="toolbar" role="toolbar">
           <span part="toolbar-group toolbar-group-history">
             <!-- Undo and Redo -->
-            <button id="btn-undo" type="button" part="toolbar-button toolbar-button-undo" on-click="_undo"></button>
-            <vaadin-tooltip for="btn-undo" text="[[__effectiveI18n.undo]]"></vaadin-tooltip>
+            <button
+              id="btn-undo"
+              type="button"
+              part="toolbar-button toolbar-button-undo"
+              @click="${this._undo}"
+            ></button>
+            <vaadin-tooltip for="btn-undo" .text="${this.__effectiveI18n.undo}"></vaadin-tooltip>
 
-            <button id="btn-redo" type="button" part="toolbar-button toolbar-button-redo" on-click="_redo"></button>
-            <vaadin-tooltip for="btn-redo" text="[[__effectiveI18n.redo]]"></vaadin-tooltip>
+            <button
+              id="btn-redo"
+              type="button"
+              part="toolbar-button toolbar-button-redo"
+              @click="${this._redo}"
+            ></button>
+            <vaadin-tooltip for="btn-redo" .text="${this.__effectiveI18n.redo}"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-emphasis">
             <!-- Bold -->
             <button id="btn-bold" class="ql-bold" part="toolbar-button toolbar-button-bold"></button>
-            <vaadin-tooltip for="btn-bold" text="[[__effectiveI18n.bold]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-bold" .text="${this.__effectiveI18n.bold}"></vaadin-tooltip>
 
             <!-- Italic -->
             <button id="btn-italic" class="ql-italic" part="toolbar-button toolbar-button-italic"></button>
-            <vaadin-tooltip for="btn-italic" text="[[__effectiveI18n.italic]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-italic" .text="${this.__effectiveI18n.italic}"></vaadin-tooltip>
 
             <!-- Underline -->
             <button id="btn-underline" class="ql-underline" part="toolbar-button toolbar-button-underline"></button>
-            <vaadin-tooltip for="btn-underline" text="[[__effectiveI18n.underline]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-underline" .text="${this.__effectiveI18n.underline}"></vaadin-tooltip>
 
             <!-- Strike -->
             <button id="btn-strike" class="ql-strike" part="toolbar-button toolbar-button-strike"></button>
-            <vaadin-tooltip for="btn-strike" text="[[__effectiveI18n.strike]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-strike" .text="${this.__effectiveI18n.strike}"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-style">
@@ -140,17 +161,17 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               id="btn-color"
               type="button"
               part="toolbar-button toolbar-button-color"
-              on-click="__onColorClick"
+              @click="${this.__onColorClick}"
             ></button>
-            <vaadin-tooltip for="btn-color" text="[[__effectiveI18n.color]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-color" .text="${this.__effectiveI18n.color}"></vaadin-tooltip>
             <!-- Background -->
             <button
               id="btn-background"
               type="button"
               part="toolbar-button toolbar-button-background"
-              on-click="__onBackgroundClick"
+              @click="${this.__onBackgroundClick}"
             ></button>
-            <vaadin-tooltip for="btn-background" text="[[__effectiveI18n.background]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-background" .text="${this.__effectiveI18n.background}"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-heading">
@@ -162,7 +183,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               value="1"
               part="toolbar-button toolbar-button-h1"
             ></button>
-            <vaadin-tooltip for="btn-h1" text="[[__effectiveI18n.h1]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-h1" .text="${this.__effectiveI18n.h1}"></vaadin-tooltip>
             <button
               id="btn-h2"
               type="button"
@@ -170,7 +191,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               value="2"
               part="toolbar-button toolbar-button-h2"
             ></button>
-            <vaadin-tooltip for="btn-h2" text="[[__effectiveI18n.h2]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-h2" .text="${this.__effectiveI18n.h2}"></vaadin-tooltip>
             <button
               id="btn-h3"
               type="button"
@@ -178,7 +199,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               value="3"
               part="toolbar-button toolbar-button-h3"
             ></button>
-            <vaadin-tooltip for="btn-h3" text="[[__effectiveI18n.h3]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-h3" .text="${this.__effectiveI18n.h3}"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-glyph-transformation">
@@ -189,14 +210,14 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               value="sub"
               part="toolbar-button toolbar-button-subscript"
             ></button>
-            <vaadin-tooltip for="btn-subscript" text="[[__effectiveI18n.subscript]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-subscript" .text="${this.__effectiveI18n.subscript}"></vaadin-tooltip>
             <button
               id="btn-superscript"
               class="ql-script"
               value="super"
               part="toolbar-button toolbar-button-superscript"
             ></button>
-            <vaadin-tooltip for="btn-superscript" text="[[__effectiveI18n.superscript]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-superscript" text="${this.__effectiveI18n.superscript}"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-list">
@@ -208,7 +229,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               value="ordered"
               part="toolbar-button toolbar-button-list-ordered"
             ></button>
-            <vaadin-tooltip for="btn-ol" text="[[__effectiveI18n.listOrdered]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-ol" text="${this.__effectiveI18n.listOrdered}"></vaadin-tooltip>
             <button
               id="btn-ul"
               type="button"
@@ -216,7 +237,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               value="bullet"
               part="toolbar-button toolbar-button-list-bullet"
             ></button>
-            <vaadin-tooltip for="btn-ul" text="[[__effectiveI18n.listBullet]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-ul" text="${this.__effectiveI18n.listBullet}"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-alignment">
@@ -228,7 +249,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               value=""
               part="toolbar-button toolbar-button-align-left"
             ></button>
-            <vaadin-tooltip for="btn-left" text="[[__effectiveI18n.alignLeft]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-left" .text="${this.__effectiveI18n.alignLeft}"></vaadin-tooltip>
             <button
               id="btn-center"
               type="button"
@@ -236,7 +257,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               value="center"
               part="toolbar-button toolbar-button-align-center"
             ></button>
-            <vaadin-tooltip for="btn-center" text="[[__effectiveI18n.alignCenter]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-center" .text="${this.__effectiveI18n.alignCenter}"></vaadin-tooltip>
             <button
               id="btn-right"
               type="button"
@@ -244,7 +265,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               value="right"
               part="toolbar-button toolbar-button-align-right"
             ></button>
-            <vaadin-tooltip for="btn-right" text="[[__effectiveI18n.alignRight]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-right" .text="${this.__effectiveI18n.alignRight}"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-rich-text">
@@ -253,18 +274,18 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               id="btn-image"
               type="button"
               part="toolbar-button toolbar-button-image"
-              on-touchend="_onImageTouchEnd"
-              on-click="_onImageClick"
+              @touchend="${this._onImageTouchEnd}"
+              @click="${this._onImageClick}"
             ></button>
-            <vaadin-tooltip for="btn-image" text="[[__effectiveI18n.image]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-image" .text="${this.__effectiveI18n.image}"></vaadin-tooltip>
             <!-- Link -->
             <button
               id="btn-link"
               type="button"
               part="toolbar-button toolbar-button-link"
-              on-click="_onLinkClick"
+              @click="${this._onLinkClick}"
             ></button>
-            <vaadin-tooltip for="btn-link" text="[[__effectiveI18n.link]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-link" .text="${this.__effectiveI18n.link}"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-block">
@@ -275,7 +296,7 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               class="ql-blockquote"
               part="toolbar-button toolbar-button-blockquote"
             ></button>
-            <vaadin-tooltip for="btn-blockquote" text="[[__effectiveI18n.blockquote]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-blockquote" .text="${this.__effectiveI18n.blockquote}"></vaadin-tooltip>
             <!-- Code block -->
             <button
               id="btn-code"
@@ -283,20 +304,20 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
               class="ql-code-block"
               part="toolbar-button toolbar-button-code-block"
             ></button>
-            <vaadin-tooltip for="btn-code" text="[[__effectiveI18n.codeBlock]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-code" .text="${this.__effectiveI18n.codeBlock}"></vaadin-tooltip>
           </span>
 
           <span part="toolbar-group toolbar-group-format">
             <!-- Clean -->
             <button id="btn-clean" type="button" class="ql-clean" part="toolbar-button toolbar-button-clean"></button>
-            <vaadin-tooltip for="btn-clean" text="[[__effectiveI18n.clean]]"></vaadin-tooltip>
+            <vaadin-tooltip for="btn-clean" .text="${this.__effectiveI18n.clean}"></vaadin-tooltip>
           </span>
 
           <input
             id="fileInput"
             type="file"
             accept="image/png, image/gif, image/jpeg, image/bmp, image/x-icon"
-            on-change="_uploadImage"
+            @change="${this._uploadImage}"
           />
         </div>
 
@@ -305,59 +326,73 @@ class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(Poly
         <div class="announcer" aria-live="polite"></div>
       </div>
 
-      <vaadin-confirm-dialog id="linkDialog" opened="{{_linkEditing}}" header="[[__effectiveI18n.linkDialogTitle]]">
+      <vaadin-confirm-dialog
+        id="linkDialog"
+        .opened="${this._linkEditing}"
+        .header="${this.__effectiveI18n.linkDialogTitle}"
+        @opened-changed="${this._onLinkEditingChanged}"
+      >
         <vaadin-text-field
           id="linkUrl"
-          value="{{_linkUrl}}"
+          .value="${this._linkUrl}"
           style="width: 100%;"
-          on-keydown="_onLinkKeydown"
+          @keydown="${this._onLinkKeydown}"
+          @value-changed="${this._onLinkUrlChanged}"
         ></vaadin-text-field>
-        <vaadin-button id="confirmLink" slot="confirm-button" theme="primary" on-click="_onLinkEditConfirm">
-          [[__effectiveI18n.ok]]
+        <vaadin-button id="confirmLink" slot="confirm-button" theme="primary" @click="${this._onLinkEditConfirm}">
+          ${this.__effectiveI18n.ok}
         </vaadin-button>
         <vaadin-button
           id="removeLink"
           slot="reject-button"
           theme="error"
-          on-click="_onLinkEditRemove"
-          hidden$="[[!_linkRange]]"
+          @click="${this._onLinkEditRemove}"
+          ?hidden="${!this._linkRange}"
         >
-          [[__effectiveI18n.remove]]
+          ${this.__effectiveI18n.remove}
         </vaadin-button>
-        <vaadin-button id="cancelLink" slot="cancel-button" on-click="_onLinkEditCancel">
-          [[__effectiveI18n.cancel]]
+        <vaadin-button id="cancelLink" slot="cancel-button" @click="${this._onLinkEditCancel}">
+          ${this.__effectiveI18n.cancel}
         </vaadin-button>
       </vaadin-confirm-dialog>
 
       <vaadin-rich-text-editor-popup
         id="colorPopup"
-        colors="[[colorOptions]]"
-        opened="{{_colorEditing}}"
-        on-color-selected="__onColorSelected"
+        .colors="${this.colorOptions}"
+        .opened="${this._colorEditing}"
+        @color-selected="${this.__onColorSelected}"
+        @opened-changed="${this.__onColorEditingChanged}"
       ></vaadin-rich-text-editor-popup>
 
       <vaadin-rich-text-editor-popup
         id="backgroundPopup"
-        colors="[[colorOptions]]"
-        opened="{{_backgroundEditing}}"
-        on-color-selected="__onBackgroundSelected"
+        .colors="${this.colorOptions}"
+        .opened="${this._backgroundEditing}"
+        @color-selected="${this.__onBackgroundSelected}"
+        @opened-changed="${this.__onBackgroundEditingChanged}"
       ></vaadin-rich-text-editor-popup>
     `;
   }
 
-  static get is() {
-    return 'vaadin-rich-text-editor';
+  /** @private */
+  __onBackgroundEditingChanged(event) {
+    this._backgroundEditing = event.detail.value;
   }
 
-  static get cvdlName() {
-    return 'vaadin-rich-text-editor';
+  /** @private */
+  __onColorEditingChanged(event) {
+    this._colorEditing = event.detail.value;
   }
 
-  /**
-   * Fired when the user commits a value change.
-   *
-   * @event change
-   */
+  /** @private */
+  _onLinkEditingChanged(event) {
+    this._linkEditing = event.detail.value;
+  }
+
+  /** @private */
+  _onLinkUrlChanged(event) {
+    this._linkUrl = event.detail.value;
+  }
 }
 
 defineCustomElement(RichTextEditor);

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/rich-text-editor",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -100,10 +100,6 @@
               }
             ],
             "events": [
-              {
-                "name": "change",
-                "description": "Fired when the user commits a value change."
-              },
               {
                 "name": "value-changed",
                 "description": "Fired when the `value` property changes."

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/rich-text-editor",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -54,13 +54,6 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": "@change",
-              "description": "Fired when the user commits a value change.",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": "@value-changed",
               "description": "Fired when the `value` property changes.",

package/src/vaadin-lit-rich-text-editor-popup.js

@@ -1,91 +0,0 @@
-/**
- * @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, html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { RichTextEditorPopupMixin } from './vaadin-rich-text-editor-popup-mixin.js';
-
-/**
- * An element used internally by `<vaadin-rich-text-editor>`. Not intended to be used separately.
- * @private
- */
-class RichTextEditorPopup extends RichTextEditorPopupMixin(PolylitMixin(LitElement)) {
-  static get is() {
-    return 'vaadin-rich-text-editor-popup';
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: none;
-      }
-    `;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <vaadin-rich-text-editor-popup-overlay
-        .renderer="${this.renderer}"
-        .opened="${this.opened}"
-        .positionTarget="${this.target}"
-        no-vertical-overlap
-        horizontal-align="start"
-        vertical-align="top"
-        focus-trap
-        @opened-changed="${this._onOpenedChanged}"
-        @vaadin-overlay-escape-press="${this._onOverlayEscapePress}"
-      ></vaadin-rich-text-editor-popup-overlay>
-    `;
-  }
-
-  /** @private */
-  _onOpenedChanged(event) {
-    this.opened = event.detail.value;
-  }
-}
-
-defineCustomElement(RichTextEditorPopup);
-
-export { RichTextEditorPopup };
-
-/**
- * An element used internally by `<vaadin-rich-text-editor>`. Not intended to be used separately.
- * @private
- */
-class RichTextEditorPopupOverlay extends PositionMixin(
-  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))),
-) {
-  static get is() {
-    return 'vaadin-rich-text-editor-popup-overlay';
-  }
-
-  static get styles() {
-    return overlayStyles;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div id="backdrop" part="backdrop" hidden></div>
-      <div part="overlay" id="overlay">
-        <div part="content" id="content"><slot></slot></div>
-      </div>
-    `;
-  }
-}
-
-defineCustomElement(RichTextEditorPopupOverlay);

package/src/vaadin-lit-rich-text-editor.d.ts

@@ -1,11 +0,0 @@
-/**
- * @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.
- */
-export * from './vaadin-rich-text-editor.js';

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

@@ -1,330 +0,0 @@
-/**
- * @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 '@vaadin/button/src/vaadin-lit-button.js';
-import '@vaadin/confirm-dialog/src/vaadin-lit-confirm-dialog.js';
-import '@vaadin/text-field/src/vaadin-lit-text-field.js';
-import '@vaadin/tooltip/src/vaadin-lit-tooltip.js';
-import './vaadin-lit-rich-text-editor-popup.js';
-import { html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { RichTextEditorMixin } from './vaadin-rich-text-editor-mixin.js';
-import { richTextEditorStyles } from './vaadin-rich-text-editor-styles.js';
-
-/**
- * LitElement based version of `<vaadin-rich-text-editor>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- */
-class RichTextEditor extends RichTextEditorMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-rich-text-editor';
-  }
-
-  static get cvdlName() {
-    return 'vaadin-rich-text-editor';
-  }
-
-  static get styles() {
-    return richTextEditorStyles;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div class="vaadin-rich-text-editor-container">
-        <!-- Create toolbar container -->
-        <div part="toolbar" role="toolbar">
-          <span part="toolbar-group toolbar-group-history">
-            <!-- Undo and Redo -->
-            <button
-              id="btn-undo"
-              type="button"
-              part="toolbar-button toolbar-button-undo"
-              @click="${this._undo}"
-            ></button>
-            <vaadin-tooltip for="btn-undo" .text="${this.__effectiveI18n.undo}"></vaadin-tooltip>
-
-            <button
-              id="btn-redo"
-              type="button"
-              part="toolbar-button toolbar-button-redo"
-              @click="${this._redo}"
-            ></button>
-            <vaadin-tooltip for="btn-redo" .text="${this.__effectiveI18n.redo}"></vaadin-tooltip>
-          </span>
-
-          <span part="toolbar-group toolbar-group-emphasis">
-            <!-- Bold -->
-            <button id="btn-bold" class="ql-bold" part="toolbar-button toolbar-button-bold"></button>
-            <vaadin-tooltip for="btn-bold" .text="${this.__effectiveI18n.bold}"></vaadin-tooltip>
-
-            <!-- Italic -->
-            <button id="btn-italic" class="ql-italic" part="toolbar-button toolbar-button-italic"></button>
-            <vaadin-tooltip for="btn-italic" .text="${this.__effectiveI18n.italic}"></vaadin-tooltip>
-
-            <!-- Underline -->
-            <button id="btn-underline" class="ql-underline" part="toolbar-button toolbar-button-underline"></button>
-            <vaadin-tooltip for="btn-underline" .text="${this.__effectiveI18n.underline}"></vaadin-tooltip>
-
-            <!-- Strike -->
-            <button id="btn-strike" class="ql-strike" part="toolbar-button toolbar-button-strike"></button>
-            <vaadin-tooltip for="btn-strike" .text="${this.__effectiveI18n.strike}"></vaadin-tooltip>
-          </span>
-
-          <span part="toolbar-group toolbar-group-style">
-            <!-- Color -->
-            <button
-              id="btn-color"
-              type="button"
-              part="toolbar-button toolbar-button-color"
-              @click="${this.__onColorClick}"
-            ></button>
-            <vaadin-tooltip for="btn-color" .text="${this.__effectiveI18n.color}"></vaadin-tooltip>
-            <!-- Background -->
-            <button
-              id="btn-background"
-              type="button"
-              part="toolbar-button toolbar-button-background"
-              @click="${this.__onBackgroundClick}"
-            ></button>
-            <vaadin-tooltip for="btn-background" .text="${this.__effectiveI18n.background}"></vaadin-tooltip>
-          </span>
-
-          <span part="toolbar-group toolbar-group-heading">
-            <!-- Header buttons -->
-            <button
-              id="btn-h1"
-              type="button"
-              class="ql-header"
-              value="1"
-              part="toolbar-button toolbar-button-h1"
-            ></button>
-            <vaadin-tooltip for="btn-h1" .text="${this.__effectiveI18n.h1}"></vaadin-tooltip>
-            <button
-              id="btn-h2"
-              type="button"
-              class="ql-header"
-              value="2"
-              part="toolbar-button toolbar-button-h2"
-            ></button>
-            <vaadin-tooltip for="btn-h2" .text="${this.__effectiveI18n.h2}"></vaadin-tooltip>
-            <button
-              id="btn-h3"
-              type="button"
-              class="ql-header"
-              value="3"
-              part="toolbar-button toolbar-button-h3"
-            ></button>
-            <vaadin-tooltip for="btn-h3" .text="${this.__effectiveI18n.h3}"></vaadin-tooltip>
-          </span>
-
-          <span part="toolbar-group toolbar-group-glyph-transformation">
-            <!-- Subscript and superscript -->
-            <button
-              id="btn-subscript"
-              class="ql-script"
-              value="sub"
-              part="toolbar-button toolbar-button-subscript"
-            ></button>
-            <vaadin-tooltip for="btn-subscript" .text="${this.__effectiveI18n.subscript}"></vaadin-tooltip>
-            <button
-              id="btn-superscript"
-              class="ql-script"
-              value="super"
-              part="toolbar-button toolbar-button-superscript"
-            ></button>
-            <vaadin-tooltip for="btn-superscript" text="${this.__effectiveI18n.superscript}"></vaadin-tooltip>
-          </span>
-
-          <span part="toolbar-group toolbar-group-list">
-            <!-- List buttons -->
-            <button
-              id="btn-ol"
-              type="button"
-              class="ql-list"
-              value="ordered"
-              part="toolbar-button toolbar-button-list-ordered"
-            ></button>
-            <vaadin-tooltip for="btn-ol" text="${this.__effectiveI18n.listOrdered}"></vaadin-tooltip>
-            <button
-              id="btn-ul"
-              type="button"
-              class="ql-list"
-              value="bullet"
-              part="toolbar-button toolbar-button-list-bullet"
-            ></button>
-            <vaadin-tooltip for="btn-ul" text="${this.__effectiveI18n.listBullet}"></vaadin-tooltip>
-          </span>
-
-          <span part="toolbar-group toolbar-group-alignment">
-            <!-- Align buttons -->
-            <button
-              id="btn-left"
-              type="button"
-              class="ql-align"
-              value=""
-              part="toolbar-button toolbar-button-align-left"
-            ></button>
-            <vaadin-tooltip for="btn-left" .text="${this.__effectiveI18n.alignLeft}"></vaadin-tooltip>
-            <button
-              id="btn-center"
-              type="button"
-              class="ql-align"
-              value="center"
-              part="toolbar-button toolbar-button-align-center"
-            ></button>
-            <vaadin-tooltip for="btn-center" .text="${this.__effectiveI18n.alignCenter}"></vaadin-tooltip>
-            <button
-              id="btn-right"
-              type="button"
-              class="ql-align"
-              value="right"
-              part="toolbar-button toolbar-button-align-right"
-            ></button>
-            <vaadin-tooltip for="btn-right" .text="${this.__effectiveI18n.alignRight}"></vaadin-tooltip>
-          </span>
-
-          <span part="toolbar-group toolbar-group-rich-text">
-            <!-- Image -->
-            <button
-              id="btn-image"
-              type="button"
-              part="toolbar-button toolbar-button-image"
-              @touchend="${this._onImageTouchEnd}"
-              @click="${this._onImageClick}"
-            ></button>
-            <vaadin-tooltip for="btn-image" .text="${this.__effectiveI18n.image}"></vaadin-tooltip>
-            <!-- Link -->
-            <button
-              id="btn-link"
-              type="button"
-              part="toolbar-button toolbar-button-link"
-              @click="${this._onLinkClick}"
-            ></button>
-            <vaadin-tooltip for="btn-link" .text="${this.__effectiveI18n.link}"></vaadin-tooltip>
-          </span>
-
-          <span part="toolbar-group toolbar-group-block">
-            <!-- Blockquote -->
-            <button
-              id="btn-blockquote"
-              type="button"
-              class="ql-blockquote"
-              part="toolbar-button toolbar-button-blockquote"
-            ></button>
-            <vaadin-tooltip for="btn-blockquote" .text="${this.__effectiveI18n.blockquote}"></vaadin-tooltip>
-            <!-- Code block -->
-            <button
-              id="btn-code"
-              type="button"
-              class="ql-code-block"
-              part="toolbar-button toolbar-button-code-block"
-            ></button>
-            <vaadin-tooltip for="btn-code" .text="${this.__effectiveI18n.codeBlock}"></vaadin-tooltip>
-          </span>
-
-          <span part="toolbar-group toolbar-group-format">
-            <!-- Clean -->
-            <button id="btn-clean" type="button" class="ql-clean" part="toolbar-button toolbar-button-clean"></button>
-            <vaadin-tooltip for="btn-clean" .text="${this.__effectiveI18n.clean}"></vaadin-tooltip>
-          </span>
-
-          <input
-            id="fileInput"
-            type="file"
-            accept="image/png, image/gif, image/jpeg, image/bmp, image/x-icon"
-            @change="${this._uploadImage}"
-          />
-        </div>
-
-        <div part="content"></div>
-
-        <div class="announcer" aria-live="polite"></div>
-      </div>
-
-      <vaadin-confirm-dialog
-        id="linkDialog"
-        .opened="${this._linkEditing}"
-        .header="${this.__effectiveI18n.linkDialogTitle}"
-        @opened-changed="${this._onLinkEditingChanged}"
-      >
-        <vaadin-text-field
-          id="linkUrl"
-          .value="${this._linkUrl}"
-          style="width: 100%;"
-          @keydown="${this._onLinkKeydown}"
-          @value-changed="${this._onLinkUrlChanged}"
-        ></vaadin-text-field>
-        <vaadin-button id="confirmLink" slot="confirm-button" theme="primary" @click="${this._onLinkEditConfirm}">
-          ${this.__effectiveI18n.ok}
-        </vaadin-button>
-        <vaadin-button
-          id="removeLink"
-          slot="reject-button"
-          theme="error"
-          @click="${this._onLinkEditRemove}"
-          ?hidden="${!this._linkRange}"
-        >
-          ${this.__effectiveI18n.remove}
-        </vaadin-button>
-        <vaadin-button id="cancelLink" slot="cancel-button" @click="${this._onLinkEditCancel}">
-          ${this.__effectiveI18n.cancel}
-        </vaadin-button>
-      </vaadin-confirm-dialog>
-
-      <vaadin-rich-text-editor-popup
-        id="colorPopup"
-        .colors="${this.colorOptions}"
-        .opened="${this._colorEditing}"
-        @color-selected="${this.__onColorSelected}"
-        @opened-changed="${this.__onColorEditingChanged}"
-      ></vaadin-rich-text-editor-popup>
-
-      <vaadin-rich-text-editor-popup
-        id="backgroundPopup"
-        .colors="${this.colorOptions}"
-        .opened="${this._backgroundEditing}"
-        @color-selected="${this.__onBackgroundSelected}"
-        @opened-changed="${this.__onBackgroundEditingChanged}"
-      ></vaadin-rich-text-editor-popup>
-    `;
-  }
-
-  /** @private */
-  __onBackgroundEditingChanged(event) {
-    this._backgroundEditing = event.detail.value;
-  }
-
-  /** @private */
-  __onColorEditingChanged(event) {
-    this._colorEditing = event.detail.value;
-  }
-
-  /** @private */
-  _onLinkEditingChanged(event) {
-    this._linkEditing = event.detail.value;
-  }
-
-  /** @private */
-  _onLinkUrlChanged(event) {
-    this._linkUrl = event.detail.value;
-  }
-}
-
-defineCustomElement(RichTextEditor);
-
-export { RichTextEditor };

package/theme/lumo/vaadin-lit-rich-text-editor.d.ts

@@ -1,6 +0,0 @@
-import '@vaadin/button/theme/lumo/vaadin-button-styles.js';
-import '@vaadin/confirm-dialog/theme/lumo/vaadin-confirm-dialog-styles.js';
-import '@vaadin/text-field/theme/lumo/vaadin-text-field-styles.js';
-import '@vaadin/tooltip/theme/lumo/vaadin-tooltip-styles.js';
-import './vaadin-rich-text-editor-styles.js';
-import '../../src/vaadin-lit-rich-text-editor.js';

package/theme/lumo/vaadin-lit-rich-text-editor.js

@@ -1,6 +0,0 @@
-import '@vaadin/button/theme/lumo/vaadin-button-styles.js';
-import '@vaadin/confirm-dialog/theme/lumo/vaadin-confirm-dialog-styles.js';
-import '@vaadin/text-field/theme/lumo/vaadin-text-field-styles.js';
-import '@vaadin/tooltip/theme/lumo/vaadin-tooltip-styles.js';
-import './vaadin-rich-text-editor-styles.js';
-import '../../src/vaadin-lit-rich-text-editor.js';

package/theme/material/vaadin-lit-rich-text-editor.d.ts

@@ -1,6 +0,0 @@
-import '@vaadin/button/theme/material/vaadin-button-styles.js';
-import '@vaadin/confirm-dialog/theme/material/vaadin-confirm-dialog-styles.js';
-import '@vaadin/text-field/theme/material/vaadin-text-field-styles.js';
-import '@vaadin/tooltip/theme/material/vaadin-tooltip-styles.js';
-import './vaadin-rich-text-editor-styles.js';
-import '../../src/vaadin-lit-rich-text-editor.js';

package/theme/material/vaadin-lit-rich-text-editor.js

@@ -1,6 +0,0 @@
-import '@vaadin/button/theme/material/vaadin-button-styles.js';
-import '@vaadin/confirm-dialog/theme/material/vaadin-confirm-dialog-styles.js';
-import '@vaadin/text-field/theme/material/vaadin-text-field-styles.js';
-import '@vaadin/tooltip/theme/material/vaadin-tooltip-styles.js';
-import './vaadin-rich-text-editor-styles.js';
-import '../../src/vaadin-lit-rich-text-editor.js';

package/theme/material/vaadin-rich-text-editor-styles.d.ts

@@ -1 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';

package/theme/material/vaadin-rich-text-editor-styles.js

@@ -1,143 +0,0 @@
-import '@vaadin/vaadin-material-styles/color.js';
-import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
-import { typography } from '@vaadin/vaadin-material-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const popupOverlay = css`
-  [part='overlay'] {
-    margin: 0.25rem 0;
-  }
-
-  [part='content'] {
-    padding: 0.25rem;
-    max-width: calc(7 * (var(--_button-size) + var(--_button-margin) * 2));
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    --_button-size: 1.25rem;
-    --_button-margin: 3px;
-  }
-
-  [part='content'] ::slotted(button) {
-    border: none;
-    width: var(--_button-size);
-    height: var(--_button-size);
-    margin: var(--_button-margin);
-  }
-`;
-
-registerStyles('vaadin-rich-text-editor-popup-overlay', [overlay, popupOverlay], {
-  moduleId: 'material-rich-text-editor-popup-overlay',
-});
-
-const richTextEditor = css`
-  :host {
-    background-color: var(--material-background-color);
-    min-height: 288px;
-  }
-
-  [part='toolbar'] {
-    background-color: var(--material-secondary-background-color);
-    padding: 0;
-    border: 0;
-    overflow: hidden;
-  }
-
-  [part~='toolbar-group'] {
-    margin: 8px 0;
-    padding: 0 8px;
-  }
-
-  [part~='toolbar-group'] + [part~='toolbar-group'] {
-    box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.1);
-  }
-
-  [part~='toolbar-button'] {
-    border-radius: 3px;
-    color: var(--material-secondary-text-color);
-    font-family: 'vaadin-rte-icons', var(--material-font-family);
-    font-weight: 600;
-    margin: -4px 2px;
-  }
-
-  [part~='toolbar-button']:hover {
-    background-color: transparent;
-    color: inherit;
-  }
-
-  [part~='toolbar-button'][aria-expanded='true'] {
-    outline: -webkit-focus-ring-color auto 1px;
-  }
-
-  [part~='toolbar-button'][on] {
-    background-color: rgba(0, 0, 0, 0.1);
-    color: inherit;
-  }
-
-  @media (hover: none) {
-    [part~='toolbar-button']:hover {
-      color: var(--material-secondary-text-color);
-    }
-  }
-
-  /* SVG icons */
-  [part~='toolbar-button-undo']::before,
-  [part~='toolbar-button-redo']::before,
-  [part~='toolbar-button-list-ordered']::before,
-  [part~='toolbar-button-list-bullet']::before,
-  [part~='toolbar-button-align-left']::before,
-  [part~='toolbar-button-align-center']::before,
-  [part~='toolbar-button-align-right']::before,
-  [part~='toolbar-button-image']::before,
-  [part~='toolbar-button-link']::before,
-  [part~='toolbar-button-clean']::before {
-    font-size: 24px;
-    font-weight: 400;
-  }
-
-  /* Text icons */
-  [part~='toolbar-button-bold']::before,
-  [part~='toolbar-button-italic']::before,
-  [part~='toolbar-button-underline']::before,
-  [part~='toolbar-button-strike']::before {
-    font-size: 20px;
-  }
-
-  [part~='toolbar-button-background']::before {
-    background-color: var(--material-secondary-background-color);
-  }
-
-  [part~='toolbar-button-background']::after {
-    inset: 0.25rem;
-  }
-
-  /* TODO unsupported selector */
-  [part='content'] > .ql-editor {
-    padding: 0 16px;
-    line-height: inherit;
-  }
-
-  /* Theme variants */
-  :host(:not([theme~='no-border'])) {
-    border: 1px solid rgba(0, 0, 0, 0.12);
-  }
-
-  :host(:not([theme~='no-border']):not([readonly])) [part='content'] {
-    border-top: 1px solid rgba(0, 0, 0, 0.12);
-  }
-
-  /* Content */
-  b,
-  strong {
-    font-weight: 600;
-  }
-
-  code,
-  pre {
-    background-color: var(--material-secondary-background-color);
-  }
-`;
-
-registerStyles('vaadin-rich-text-editor', [typography, richTextEditor], {
-  moduleId: 'material-rich-text-editor',
-});

package/theme/material/vaadin-rich-text-editor.d.ts

@@ -1,6 +0,0 @@
-import '@vaadin/button/theme/material/vaadin-button.js';
-import '@vaadin/confirm-dialog/theme/material/vaadin-confirm-dialog.js';
-import '@vaadin/text-field/theme/material/vaadin-text-field.js';
-import '@vaadin/tooltip/theme/material/vaadin-tooltip.js';
-import './vaadin-rich-text-editor-styles.js';
-import '../../src/vaadin-rich-text-editor.js';

package/theme/material/vaadin-rich-text-editor.js

@@ -1,6 +0,0 @@
-import '@vaadin/button/theme/material/vaadin-button.js';
-import '@vaadin/confirm-dialog/theme/material/vaadin-confirm-dialog.js';
-import '@vaadin/text-field/theme/material/vaadin-text-field.js';
-import '@vaadin/tooltip/theme/material/vaadin-tooltip.js';
-import './vaadin-rich-text-editor-styles.js';
-import '../../src/vaadin-rich-text-editor.js';

package/vaadin-lit-rich-text-editor.d.ts

@@ -1 +0,0 @@
-export * from './src/vaadin-rich-text-editor.js';

package/vaadin-lit-rich-text-editor.js

@@ -1,2 +0,0 @@
-import './theme/lumo/vaadin-lit-rich-text-editor.js';
-export * from './src/vaadin-lit-rich-text-editor.js';