@prokodo/ui 0.1.11 → 0.1.12

package/README.md

@@ -186,6 +186,7 @@ export default function GalleryPage() {
 | Loading             |               ✅               |                 –                  |
 | Lottie              |               ❌               |                 ✅                 |
 | Map                 |               ❌               |                 ✅                 |
+| Pagination          |               ✅               |                 ✅                 |
 | PostItem            |               ✅               |                 ✅                 |
 | PostTeaser          |               ✅               |                 ✅                 |
 | PostWidget          |               ✅               |                 ✅                 |
@@ -204,6 +205,7 @@ export default function GalleryPage() {
 | Switch              |               ✅               |                 ✅                 |
 | Table               |               ✅               |                 –                  |
 | Teaser              |               ✅               |                 -                  |
+| Tooltip             |               ✅               |                 ✅                 |
 
 ## Since Next.js 16
 

package/dist/components/RTE/RTE.client.js

@@ -11,9 +11,20 @@ import { isString, isNull } from "../../helpers/validations.js";
 import styles from "./RTE.module.scss.js";
 import { ensureQuillSnowStyles } from "./RTE.styles.js";
 import cssText from "../../node_modules/.pnpm/quill@2.0.3/node_modules/quill/dist/quill.snow.css.js";
-import { cleanupQuill, addClasses, decorateToolbar } from "./RTE.utils.js";
+import { cleanupQuill, addClasses, decorateToolbar, syncPickerSelected } from "./RTE.utils.js";
 import { RTEView } from "./RTE.view.js";
 const bem = create(styles, "RTE");
+const ALLOWED_FORMATS = [
+  "header",
+  "bold",
+  "italic",
+  "underline",
+  "strike",
+  "list",
+  "link",
+  "code-block",
+  "image"
+];
 function RTEClient(props) {
   const {
     name,
@@ -126,7 +137,7 @@ function RTEClient(props) {
     const mountEl = mountRef.current;
     const surfaceEl = surfaceRef.current;
     async function init() {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c, _d, _e, _f;
       if (!mountEl || !surfaceEl) return;
       if (Boolean(disabled) || Boolean(readOnly)) return;
       cleanupQuill(surfaceEl, mountEl);
@@ -171,6 +182,7 @@ function RTEClient(props) {
       const opts = rteOptionsRef.current;
       const extraToolbar = rteToolbarRef.current;
       const baseToolbar = [
+        [{ header: [3, 4, false] }],
         ["bold", "italic", "underline", "strike"],
         [{ list: "ordered" }, { list: "bullet" }],
         ["link", "code-block", "image"],
@@ -181,6 +193,7 @@ function RTEClient(props) {
         ...opts,
         theme: "snow",
         placeholder: placeholder ?? "",
+        formats: ALLOWED_FORMATS,
         modules: {
           history: {
             delay: 1e3,
@@ -196,12 +209,40 @@ function RTEClient(props) {
         }
       });
       quillRef.current = q;
-      (_c = opts == null ? void 0 : opts.onInit) == null ? void 0 : _c.call(opts, q);
+      const Keyboard = q.getModule("keyboard");
+      (_c = Keyboard == null ? void 0 : Keyboard.addBinding) == null ? void 0 : _c.call(
+        Keyboard,
+        {
+          key: 13,
+          // Enter
+          shiftKey: false,
+          collapsed: true
+        },
+        (range, ctx) => {
+          var _a2;
+          const header = (_a2 = ctx == null ? void 0 : ctx.format) == null ? void 0 : _a2.header;
+          if (!header) return true;
+          q.insertText(range.index, "\n", "user");
+          q.formatLine(range.index + 1, 1, { header: false }, "user");
+          q.setSelection(range.index + 1, 0, "silent");
+          return false;
+        }
+      );
+      (_d = opts == null ? void 0 : opts.onInit) == null ? void 0 : _d.call(opts, q);
       addClasses(q.root, bem("editor"));
       const toolbarModule = q.getModule("toolbar");
       addClasses((toolbarModule == null ? void 0 : toolbarModule.container) ?? null, bem("toolbar"));
       const toolbarEl = (toolbarModule == null ? void 0 : toolbarModule.container) ?? null;
-      if (toolbarEl) decorateToolbar(toolbarEl);
+      if (toolbarEl) {
+        decorateToolbar(toolbarEl);
+        syncPickerSelected(toolbarEl);
+        const obs = new MutationObserver(() => syncPickerSelected(toolbarEl));
+        obs.observe(toolbarEl, {
+          subtree: true,
+          attributes: true,
+          attributeFilter: ["class"]
+        });
+      }
       const tooltipEl = q.container.querySelector(
         ".ql-tooltip"
       );
@@ -215,7 +256,7 @@ function RTEClient(props) {
       if (container && !container.style.height) container.style.height = "220px";
       if (htmlRef.current)
         q.clipboard.dangerouslyPasteHTML(htmlRef.current, "silent");
-      emitValidation(((_e = (_d = q.getText()) == null ? void 0 : _d.trim) == null ? void 0 : _e.call(_d)) ?? "");
+      emitValidation(((_f = (_e = q.getText()) == null ? void 0 : _e.trim) == null ? void 0 : _f.call(_e)) ?? "");
       q.on("text-change", (_d2, _o, source) => {
         if (source === "user") syncFromQuill();
       });

package/dist/components/RTE/RTE.css

@@ -151,6 +151,104 @@
   fill: var(--color-grey-900) !important;
   opacity: 0.7;
 }
+.prokodo-RTE__toolbar__picker__label {
+  position: relative;
+  padding-right: calc(0.5rem + 18px);
+}
+.prokodo-RTE__toolbar__picker__label::before {
+  content: "Normal";
+  color: var(--color-grey-900);
+  opacity: 0.85;
+  margin-right: 0.25rem;
+  white-space: nowrap;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__toolbar__picker__label::before {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__toolbar__picker__label::before {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-RTE__toolbar__picker__label[data-value="2"]::before {
+  content: "H2";
+}
+.prokodo-RTE__toolbar__picker__label[data-value="3"]::before {
+  content: "H3";
+}
+.prokodo-RTE__toolbar__picker__options {
+  margin-top: 0.25rem;
+  padding: 0.25rem;
+  border-radius: 14px;
+  background: var(--color-white) !important;
+  border-color: var(--color-grey-500) !important;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  min-width: 180px;
+  z-index: 20;
+}
+.prokodo-RTE__toolbar__picker__item {
+  border-radius: 12px;
+  padding: 0.25rem 0.5rem;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.prokodo-RTE__toolbar__picker__item::before {
+  content: "Normal";
+  color: var(--color-grey-900);
+  opacity: 0.85;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__toolbar__picker__item::before {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__toolbar__picker__item::before {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-RTE__toolbar__picker__item[data-value="2"]::before {
+  content: "H2";
+}
+.prokodo-RTE__toolbar__picker__item[data-value="3"]::before {
+  content: "H3";
+}
+.prokodo-RTE__toolbar__picker__item:hover {
+  background: var(--color-primary-50) !important;
+}
+.prokodo-RTE__toolbar__picker__item[data-selected=true] {
+  background: var(--color-primary-100) !important;
+}
+.prokodo-RTE__toolbar__picker__item:focus-visible {
+  outline: 2px solid var(--color-primary-100);
+  outline-offset: 2px;
+}
 .prokodo-RTE__resize {
   position: absolute;
   right: 0.5rem;
@@ -208,18 +306,18 @@
   }
 }
 .prokodo-RTE__editor p {
-  margin: 0 0 0.5rem 0;
+  margin: 0.75rem 0 !important;
 }
 .prokodo-RTE__editor p:last-child {
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
 }
 .prokodo-RTE__editor ul,
 .prokodo-RTE__editor ol {
-  margin: 0 0 0.5rem 1.25rem;
-  padding: 0;
+  margin: 0 0 0.5rem 1.25rem !important;
+  padding: 0 !important;
 }
 .prokodo-RTE__editor pre {
-  margin: 0.5rem 0;
+  margin: 0.5rem 0 !important;
   padding: 0.5rem;
   border-radius: 14px;
   overflow: auto;
@@ -227,7 +325,7 @@
 }
 .prokodo-RTE__editor code {
   background: rgba(0, 0, 0, 0.06);
-  padding: 0 6px;
+  padding: 0 6px !important;
   border-radius: 8px;
 }
 .prokodo-RTE__editor img {
@@ -237,6 +335,128 @@
   display: block;
   margin: 0.5rem 0;
 }
+.prokodo-RTE__editor h1,
+.prokodo-RTE__editor h2,
+.prokodo-RTE__editor h3,
+.prokodo-RTE__editor h4,
+.prokodo-RTE__editor h5,
+.prokodo-RTE__editor h6 {
+  margin: 1rem 0 0.5rem 0 !important;
+}
+.prokodo-RTE__editor > h1:first-child,
+.prokodo-RTE__editor > h2:first-child,
+.prokodo-RTE__editor > h3:first-child,
+.prokodo-RTE__editor > h4:first-child,
+.prokodo-RTE__editor > h5:first-child,
+.prokodo-RTE__editor > h6:first-child {
+  margin-top: 0 !important;
+}
+.prokodo-RTE__editor h1 {
+  font-weight: 900;
+  font-size: 1.75rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.6;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__editor h1 {
+    font-size: 2.25rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__editor h1 {
+    font-size: 2.75rem;
+  }
+}
+.prokodo-RTE__editor h2 {
+  font-weight: 700;
+  font-size: 1.5rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__editor h2 {
+    font-size: 1.75rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__editor h2 {
+    font-size: 2.25rem;
+  }
+}
+.prokodo-RTE__editor h3 {
+  font-weight: 500;
+  font-size: 1.5rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__editor h3 {
+    font-size: 1.5rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__editor h3 {
+    font-size: 1.75rem;
+  }
+}
+.prokodo-RTE__editor h4 {
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__editor h4 {
+    font-size: 1.5rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__editor h4 {
+    font-size: 1.5rem;
+  }
+}
+.prokodo-RTE__editor h5 {
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+.prokodo-RTE__editor h6 {
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
 .prokodo-RTE--disabled {
   opacity: 0.9;
 }

package/dist/components/RTE/RTE.module.css

@@ -151,6 +151,104 @@
   fill: var(--color-grey-900) !important;
   opacity: 0.7;
 }
+.prokodo-RTE__toolbar__picker__label {
+  position: relative;
+  padding-right: calc(0.5rem + 18px);
+}
+.prokodo-RTE__toolbar__picker__label::before {
+  content: "Normal";
+  color: var(--color-grey-900);
+  opacity: 0.85;
+  margin-right: 0.25rem;
+  white-space: nowrap;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__toolbar__picker__label::before {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__toolbar__picker__label::before {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-RTE__toolbar__picker__label[data-value="2"]::before {
+  content: "H2";
+}
+.prokodo-RTE__toolbar__picker__label[data-value="3"]::before {
+  content: "H3";
+}
+.prokodo-RTE__toolbar__picker__options {
+  margin-top: 0.25rem;
+  padding: 0.25rem;
+  border-radius: 14px;
+  background: var(--color-white) !important;
+  border-color: var(--color-grey-500) !important;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  min-width: 180px;
+  z-index: 20;
+}
+.prokodo-RTE__toolbar__picker__item {
+  border-radius: 12px;
+  padding: 0.25rem 0.5rem;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.prokodo-RTE__toolbar__picker__item::before {
+  content: "Normal";
+  color: var(--color-grey-900);
+  opacity: 0.85;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__toolbar__picker__item::before {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__toolbar__picker__item::before {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-RTE__toolbar__picker__item[data-value="2"]::before {
+  content: "H2";
+}
+.prokodo-RTE__toolbar__picker__item[data-value="3"]::before {
+  content: "H3";
+}
+.prokodo-RTE__toolbar__picker__item:hover {
+  background: var(--color-primary-50) !important;
+}
+.prokodo-RTE__toolbar__picker__item[data-selected=true] {
+  background: var(--color-primary-100) !important;
+}
+.prokodo-RTE__toolbar__picker__item:focus-visible {
+  outline: 2px solid var(--color-primary-100);
+  outline-offset: 2px;
+}
 .prokodo-RTE__resize {
   position: absolute;
   right: 0.5rem;
@@ -208,18 +306,18 @@
   }
 }
 .prokodo-RTE__editor p {
-  margin: 0 0 0.5rem 0;
+  margin: 0.75rem 0 !important;
 }
 .prokodo-RTE__editor p:last-child {
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
 }
 .prokodo-RTE__editor ul,
 .prokodo-RTE__editor ol {
-  margin: 0 0 0.5rem 1.25rem;
-  padding: 0;
+  margin: 0 0 0.5rem 1.25rem !important;
+  padding: 0 !important;
 }
 .prokodo-RTE__editor pre {
-  margin: 0.5rem 0;
+  margin: 0.5rem 0 !important;
   padding: 0.5rem;
   border-radius: 14px;
   overflow: auto;
@@ -227,7 +325,7 @@
 }
 .prokodo-RTE__editor code {
   background: rgba(0, 0, 0, 0.06);
-  padding: 0 6px;
+  padding: 0 6px !important;
   border-radius: 8px;
 }
 .prokodo-RTE__editor img {
@@ -237,6 +335,128 @@
   display: block;
   margin: 0.5rem 0;
 }
+.prokodo-RTE__editor h1,
+.prokodo-RTE__editor h2,
+.prokodo-RTE__editor h3,
+.prokodo-RTE__editor h4,
+.prokodo-RTE__editor h5,
+.prokodo-RTE__editor h6 {
+  margin: 1rem 0 0.5rem 0 !important;
+}
+.prokodo-RTE__editor > h1:first-child,
+.prokodo-RTE__editor > h2:first-child,
+.prokodo-RTE__editor > h3:first-child,
+.prokodo-RTE__editor > h4:first-child,
+.prokodo-RTE__editor > h5:first-child,
+.prokodo-RTE__editor > h6:first-child {
+  margin-top: 0 !important;
+}
+.prokodo-RTE__editor h1 {
+  font-weight: 900;
+  font-size: 1.75rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.6;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__editor h1 {
+    font-size: 2.25rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__editor h1 {
+    font-size: 2.75rem;
+  }
+}
+.prokodo-RTE__editor h2 {
+  font-weight: 700;
+  font-size: 1.5rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__editor h2 {
+    font-size: 1.75rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__editor h2 {
+    font-size: 2.25rem;
+  }
+}
+.prokodo-RTE__editor h3 {
+  font-weight: 500;
+  font-size: 1.5rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__editor h3 {
+    font-size: 1.5rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__editor h3 {
+    font-size: 1.75rem;
+  }
+}
+.prokodo-RTE__editor h4 {
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.5;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RTE__editor h4 {
+    font-size: 1.5rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RTE__editor h4 {
+    font-size: 1.5rem;
+  }
+}
+.prokodo-RTE__editor h5 {
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+.prokodo-RTE__editor h6 {
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
 .prokodo-RTE--disabled {
   opacity: 0.9;
 }

package/dist/components/RTE/RTE.module.scss.js

@@ -5,6 +5,9 @@ const styles = {
   "prokodo-RTE__toolbar__icon__part__stroke": "prokodo-RTE__toolbar__icon__part__stroke",
   "prokodo-RTE__toolbar__icon__part__stroke__miter": "prokodo-RTE__toolbar__icon__part__stroke__miter",
   "prokodo-RTE__toolbar__icon__part__fill": "prokodo-RTE__toolbar__icon__part__fill",
+  "prokodo-RTE__toolbar__picker__label": "prokodo-RTE__toolbar__picker__label",
+  "prokodo-RTE__toolbar__picker__options": "prokodo-RTE__toolbar__picker__options",
+  "prokodo-RTE__toolbar__picker__item": "prokodo-RTE__toolbar__picker__item",
   "prokodo-RTE__resize": "prokodo-RTE__resize",
   "prokodo-RTE__mount": "prokodo-RTE__mount",
   "prokodo-RTE__mount--disabled": "prokodo-RTE__mount--disabled",

package/dist/components/RTE/RTE.utils.js

@@ -31,8 +31,29 @@ function decorateToolbar(toolbarEl) {
       addClasses(el, bem("toolbar__icon__part__stroke__miter"));
     }
   });
+  toolbarEl.querySelectorAll(".ql-picker").forEach((picker) => {
+    addClasses(picker, bem("toolbar__picker"));
+    const label = picker.querySelector(".ql-picker-label");
+    const options = picker.querySelector(
+      ".ql-picker-options"
+    );
+    addClasses(label, bem("toolbar__picker__label"));
+    addClasses(options, bem("toolbar__picker__options"));
+    picker.querySelectorAll(".ql-picker-item").forEach((item) => {
+      addClasses(item, bem("toolbar__picker__item"));
+    });
+  });
 }
 __name(decorateToolbar, "decorateToolbar");
+function syncPickerSelected(toolbarEl) {
+  toolbarEl.querySelectorAll(".ql-picker-item").forEach((el) => {
+    const item = el;
+    const selected = item.classList.contains("ql-selected");
+    if (selected) item.setAttribute("data-selected", "true");
+    else item.removeAttribute("data-selected");
+  });
+}
+__name(syncPickerSelected, "syncPickerSelected");
 function cleanupQuill(surfaceEl, mountEl) {
   if (!surfaceEl || !mountEl) return;
   surfaceEl.querySelectorAll(":scope > .ql-toolbar").forEach((el) => el.remove());
@@ -47,5 +68,6 @@ export {
   addClasses,
   bem,
   cleanupQuill,
-  decorateToolbar
+  decorateToolbar,
+  syncPickerSelected
 };

package/dist/components/button/Button.css

@@ -255,6 +255,7 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   background: none;
 }
 .prokodo-Button--has-image, .prokodo-Button--has-icon {
+  display: flex;
   align-items: center;
 }
 .prokodo-Button--icon-only {