@golemui/gui-lit 1.1.0 → 1.1.1-rc.1

package/{markdown.element-p-kC47D7.js → markdown.element-FbtwdnAv.js}

@@ -1,21 +1,21 @@
-import { InputWidgetAdapter as S, formContext as V, inputContext as _ } from "@golemui/lit";
-import { LitElement as L, html as u, nothing as $ } from "lit";
-import { property as l, state as A, customElement as O } from "lit/decorators.js";
-import { classMap as y } from "lit/directives/class-map.js";
-import { G as T, b as I, c as M } from "./templates-Dk1jxLwS.js";
-import { styleMap as H } from "lit-html/directives/style-map.js";
+import { InputWidgetAdapter as V, formContext as S, inputContext as C } from "@golemui/lit";
+import { LitElement as k, html as u, nothing as y } from "lit";
+import { property as n, state as H, customElement as A } from "lit/decorators.js";
+import { classMap as $ } from "lit/directives/class-map.js";
+import { G as D, b as F, c as _ } from "./templates-Dmr34nwp.js";
+import { styleMap as T } from "lit-html/directives/style-map.js";
 import { ifDefined as x } from "lit/directives/if-defined.js";
 import "./markdown-text-X-BRJT6K.js";
-import { consume as B, provide as F } from "@lit/context";
+import { consume as I, provide as B } from "@lit/context";
 import "rxjs";
-var Z = Object.defineProperty, D = Object.getOwnPropertyDescriptor, r = (t, e, i, n) => {
-  for (var s = n > 1 ? void 0 : n ? D(e, i) : e, a = t.length - 1, d; a >= 0; a--)
-    (d = t[a]) && (s = (n ? d(e, i, s) : d(s)) || s);
-  return n && s && Z(e, i, s), s;
+var M = Object.defineProperty, Z = Object.getOwnPropertyDescriptor, o = (t, e, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? Z(e, i) : e, s = t.length - 1, d; s >= 0; s--)
+    (d = t[s]) && (a = (r ? d(e, i, a) : d(a)) || a);
+  return r && a && M(e, i, a), a;
 };
-let o = class extends L {
+let l = class extends k {
   constructor() {
-    super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = "en", this.errors = [], this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.hint = void 0, this.tools = void 0, this.placeholder = void 0, this.autocomplete = void 0, this.minimumHeight = void 0, this.autoGrow = !1, this.defaultOpenPreview = void 0, this.maxLength = void 0, this.headingTitle = void 0, this.boldTitle = void 0, this.italicTitle = void 0, this.strikethroughTitle = void 0, this.quoteTitle = void 0, this.linkTitle = void 0, this.orderedListTitle = void 0, this.unorderedListTitle = void 0, this.splitViewTitle = void 0, this.dependencies = void 0, this.splitViewActive = !1, this.activeFormats = {}, this.splitViewInitialized = !1, this.ariaController = new T(this, {
+    super(...arguments), this.uid = void 0, this.label = void 0, this.localeId = "en", this.errors = [], this.touched = !1, this.required = !1, this.disabled = !1, this.readOnly = !1, this.value = void 0, this.hint = void 0, this.tools = void 0, this.placeholder = void 0, this.autocomplete = void 0, this.minimumHeight = void 0, this.autoGrow = !1, this.defaultOpenPreview = void 0, this.maxLength = void 0, this.headingTitle = void 0, this.boldTitle = void 0, this.italicTitle = void 0, this.strikethroughTitle = void 0, this.quoteTitle = void 0, this.linkTitle = void 0, this.orderedListTitle = void 0, this.unorderedListTitle = void 0, this.splitViewTitle = void 0, this.toolbarAriaLabel = void 0, this.dependencies = void 0, this.splitViewActive = !1, this.activeFormats = {}, this.splitViewInitialized = !1, this.ariaController = new D(this, {
       getTargets: () => this.querySelectorAll(`textarea[id="${this.uid}"]`),
       getState: () => ({
         uid: this.uid,
@@ -24,7 +24,8 @@ let o = class extends L {
           errors: this.errors,
           readonly: this.readOnly,
           disabled: this.disabled,
-          touched: this.touched
+          touched: this.touched,
+          required: this.required
         }
       })
     });
@@ -66,40 +67,46 @@ let o = class extends L {
     };
     let i = u``;
     if (t.counterMode && t.maxLength) {
-      const s = {
+      const a = {
         "gui-markdown--counter": !0,
         "gui-markdown--counter__error": (t.value?.length ?? 0) > t.maxLength
-      }, a = t.counterMode === "current" ? u`<span>${t.value?.length ?? 0}</span>` : u`<span>${t.maxLength - (t.value?.length ?? 0)}</span>`;
-      i = u`<div class=${y(s)}>
-        ${a}
+      }, s = t.counterMode === "current" ? u`<span>${t.value?.length ?? 0}</span>` : u`<span>${t.maxLength - (t.value?.length ?? 0)}</span>`;
+      i = u`<div class=${$(a)}>
+        ${s}
         <span> / ${t.maxLength}</span>
       </div>`;
     }
-    const n = {
+    const r = {
       "min-height": `${t.minimumHeight}px`
     };
     return u`
-      ${I(this.uid, t)}
+      ${F(this.uid, t)}
 
       <div
-        class=${y({
+        class=${$({
       "gui-widget": !0,
       "gui-markdown--with-preview": this.splitViewActive
     })}
       >
-        <nav class="gui-markdown__toolbar">
-          <ul>
+        <nav
+          class="gui-markdown__toolbar"
+          role="toolbar"
+          aria-label=${this.toolbarAriaLabel ?? "Text formatting"}
+        >
+          <ul role="presentation">
             ${(this.tools ?? ["H", "B", "I", "S", "Q", "L", "|", "OL", "UL"]).map(
-      (s) => this.renderToolbarItem(s)
+      (a) => this.renderToolbarItem(a)
     )}
-            <li>
+            <li role="presentation">
               <button
                 type="button"
-                tabindex="0"
-                class=${y({
+                class=${$({
       "gui-markdown__toolbar-button": !0,
       "gui-markdown__toolbar-button--active": this.splitViewActive
     })}
+                ?disabled=${this.disabled}
+                aria-label=${this.splitViewTitle ?? "Split View"}
+                aria-pressed=${this.splitViewActive ? "true" : "false"}
                 @click=${this.splitView}
                 title=${this.splitViewTitle ?? "Split View"}
               >
@@ -108,6 +115,7 @@ let o = class extends L {
                   width="20"
                   height="20"
                   viewBox="0 0 256 256"
+                  aria-hidden="true"
                 >
                   <path
                     d="M200,40H56A16,16,0,0,0,40,56V200a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40ZM56,56h64V200H56ZM200,200H136V56h64V200Z"
@@ -121,13 +129,13 @@ let o = class extends L {
         <div class="gui-markdown__container">
           <textarea
             id=${x(this.uid)}
-            class=${y(e)}
-            style=${H(n)}
+            class=${$(e)}
+            style=${T(r)}
             ?required=${t.required}
             ?disabled=${t.disabled}
             ?readonly=${t.readonly}
             placeholder=${x(t.placeholder)}
-            autocomplete=${this.autocomplete || $}
+            autocomplete=${this.autocomplete || y}
             .value=${this.value || ""}
             @input=${this.valueChanged}
             @keyup=${this.detectFormats}
@@ -137,21 +145,21 @@ let o = class extends L {
 
           ${this.splitViewActive ? u`
                 <section
-                  data-cy=${x(this.uid ? `${this.uid}_markdown` : $)}
+                  data-cy=${x(this.uid ? `${this.uid}_markdown` : y)}
                   class="gui-markdown__preview"
-                  style=${H(n)}
+                  style=${T(r)}
                 >
                   <gui-markdown-text
                     .md=${this.value || ""}
                     .dependencies=${this.dependencies}
                   ></gui-markdown-text>
                 </section>
-              ` : $}
+              ` : y}
         </div>
       </div>
 
       <div class="gui-markdown--validation">
-        <div>${M(this.uid, t)}</div>
+        <div>${_(this.uid, t)}</div>
         ${i}
       </div>
     `;
@@ -160,24 +168,32 @@ let o = class extends L {
     if (!this.autoGrow) return;
     const t = this.querySelector(`textarea[id="${this.uid}"]`);
     if (!t) return;
-    const e = window.getComputedStyle(t), i = parseFloat(e.paddingTop), n = parseFloat(e.paddingBottom), s = i + n;
-    t.style.height = "auto", t.style.height = `${Math.max(this.minimumHeight ?? 120, t.scrollHeight - s)}px`;
+    const e = window.getComputedStyle(t), i = parseFloat(e.paddingTop), r = parseFloat(e.paddingBottom), a = i + r;
+    t.style.height = "auto", t.style.height = `${Math.max(this.minimumHeight ?? 120, t.scrollHeight - a)}px`;
   }
   splitView() {
-    this.splitViewActive = !this.splitViewActive;
+    this.disabled || (this.splitViewActive = !this.splitViewActive);
   }
   renderToolbarItem(t) {
     switch (t) {
       case "H":
-        return u`<li>
+        return u`<li role="presentation">
           <button
             type="button"
-            tabindex="0"
             class=${this.toolbarBtnClass("heading")}
+            ?disabled=${this.disabled || this.readOnly}
+            aria-label=${this.headingTitle ?? "Heading"}
+            aria-pressed=${this.activeFormats.heading ? "true" : "false"}
             @click=${this.applyFormat("# ", "", "heading")}
             title=${this.headingTitle ?? "Heading"}
           >
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 256 256"
+              aria-hidden="true"
+            >
               <path
                 d="M212,56V200a12,12,0,0,1-24,0V140H68v60a12,12,0,0,1-24,0V56a12,12,0,0,1,24,0v60H188V56a12,12,0,0,1,24,0Z"
               ></path>
@@ -185,15 +201,23 @@ let o = class extends L {
           </button>
         </li>`;
       case "B":
-        return u`<li>
+        return u`<li role="presentation">
           <button
             type="button"
-            tabindex="0"
             class=${this.toolbarBtnClass("bold")}
+            ?disabled=${this.disabled || this.readOnly}
+            aria-label=${this.boldTitle ?? "Bold"}
+            aria-pressed=${this.activeFormats.bold ? "true" : "false"}
             @click=${this.applyFormat("**", "**", "bold")}
             title=${this.boldTitle ?? "Bold"}
           >
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 256 256"
+              aria-hidden="true"
+            >
               <path
                 d="M185.08,114.46A48,48,0,0,0,148,36H80A12,12,0,0,0,68,48V200a12,12,0,0,0,12,12h80a52,52,0,0,0,25.08-97.54ZM92,60h56a24,24,0,0,1,0,48H92Zm68,128H92V132h68a28,28,0,0,1,0,56Z"
               ></path>
@@ -201,15 +225,23 @@ let o = class extends L {
           </button>
         </li>`;
       case "I":
-        return u`<li>
+        return u`<li role="presentation">
           <button
             type="button"
-            tabindex="0"
             class=${this.toolbarBtnClass("italic")}
+            ?disabled=${this.disabled || this.readOnly}
+            aria-label=${this.italicTitle ?? "Italic"}
+            aria-pressed=${this.activeFormats.italic ? "true" : "false"}
             @click=${this.applyFormat("_", "_", "italic")}
             title=${this.italicTitle ?? "Italic"}
           >
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 256 256"
+              aria-hidden="true"
+            >
               <path
                 d="M204,56a12,12,0,0,1-12,12H160.65l-40,120H144a12,12,0,0,1,0,24H64a12,12,0,0,1,0-24H95.35l40-120H112a12,12,0,0,1,0-24h80A12,12,0,0,1,204,56Z"
               ></path>
@@ -217,15 +249,23 @@ let o = class extends L {
           </button>
         </li>`;
       case "S":
-        return u`<li>
+        return u`<li role="presentation">
           <button
             type="button"
-            tabindex="0"
             class=${this.toolbarBtnClass("strikethrough")}
+            ?disabled=${this.disabled || this.readOnly}
+            aria-label=${this.strikethroughTitle ?? "Strikethrough"}
+            aria-pressed=${this.activeFormats.strikethrough ? "true" : "false"}
             @click=${this.applyFormat("~~", "~~", "strikethrough")}
             title=${this.strikethroughTitle ?? "Strikethrough"}
           >
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 256 256"
+              aria-hidden="true"
+            >
               <path
                 d="M224,128a8,8,0,0,1-8,8H175.93c9.19,7.11,16.07,17.2,16.07,32,0,13.34-7,25.7-19.75,34.79C160.33,211.31,144.61,216,128,216s-32.33-4.69-44.25-13.21C71,193.7,64,181.34,64,168a8,8,0,0,1,16,0c0,17.35,22,32,48,32s48-14.65,48-32c0-14.85-10.54-23.58-38.77-32H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM76.33,104a8,8,0,0,0,7.61-10.49A17.3,17.3,0,0,1,83.11,88c0-18.24,19.3-32,44.89-32,18.84,0,34.16,7.42,41,19.85a8,8,0,0,0,14-7.7C173.33,50.52,152.77,40,128,40,93.29,40,67.11,60.63,67.11,88a33.73,33.73,0,0,0,1.62,10.49A8,8,0,0,0,76.33,104Z"
               ></path>
@@ -233,15 +273,23 @@ let o = class extends L {
           </button>
         </li>`;
       case "Q":
-        return u`<li>
+        return u`<li role="presentation">
           <button
             type="button"
-            tabindex="0"
             class=${this.toolbarBtnClass("quote")}
+            ?disabled=${this.disabled || this.readOnly}
+            aria-label=${this.quoteTitle ?? "Quote"}
+            aria-pressed=${this.activeFormats.quote ? "true" : "false"}
             @click=${this.applyFormat("> ", "", "quote")}
             title=${this.quoteTitle ?? "Quote"}
           >
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 256 256"
+              aria-hidden="true"
+            >
               <path
                 d="M100,52H40A20,20,0,0,0,20,72v64a20,20,0,0,0,20,20H96v4a28,28,0,0,1-28,28,12,12,0,0,0,0,24,52.06,52.06,0,0,0,52-52V72A20,20,0,0,0,100,52Zm-4,80H44V76H96ZM216,52H156a20,20,0,0,0-20,20v64a20,20,0,0,0,20,20h56v4a28,28,0,0,1-28,28,12,12,0,0,0,0,24,52.06,52.06,0,0,0,52-52V72A20,20,0,0,0,216,52Zm-4,80H160V76h52Z"
               ></path>
@@ -249,15 +297,23 @@ let o = class extends L {
           </button>
         </li>`;
       case "L":
-        return u`<li>
+        return u`<li role="presentation">
           <button
             type="button"
-            tabindex="0"
             class=${this.toolbarBtnClass("link")}
+            ?disabled=${this.disabled || this.readOnly}
+            aria-label=${this.linkTitle ?? "Link"}
+            aria-pressed=${this.activeFormats.link ? "true" : "false"}
             @click=${this.applyFormat("[", "](url)", "link")}
             title=${this.linkTitle ?? "Link"}
           >
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 256 256"
+              aria-hidden="true"
+            >
               <path
                 d="M117.18,188.74a12,12,0,0,1,0,17l-5.12,5.12A58.26,58.26,0,0,1,70.6,228h0A58.62,58.62,0,0,1,29.14,127.92L63.89,93.17a58.64,58.64,0,0,1,98.56,28.11,12,12,0,1,1-23.37,5.44,34.65,34.65,0,0,0-58.22-16.58L46.11,144.89A34.62,34.62,0,0,0,70.57,204h0a34.41,34.41,0,0,0,24.49-10.14l5.11-5.12A12,12,0,0,1,117.18,188.74ZM226.83,45.17a58.65,58.65,0,0,0-82.93,0l-5.11,5.11a12,12,0,0,0,17,17l5.12-5.12a34.63,34.63,0,1,1,49,49L175.1,145.86A34.39,34.39,0,0,1,150.61,156h0a34.63,34.63,0,0,1-33.69-26.72,12,12,0,0,0-23.38,5.44A58.64,58.64,0,0,0,150.56,180h.05a58.28,58.28,0,0,0,41.47-17.17l34.75-34.75a58.62,58.62,0,0,0,0-82.91Z"
               ></path>
@@ -265,15 +321,23 @@ let o = class extends L {
           </button>
         </li>`;
       case "OL":
-        return u`<li>
+        return u`<li role="presentation">
           <button
             type="button"
-            tabindex="0"
             class=${this.toolbarBtnClass("orderedList")}
+            ?disabled=${this.disabled || this.readOnly}
+            aria-label=${this.orderedListTitle ?? "Ordered List"}
+            aria-pressed=${this.activeFormats.orderedList ? "true" : "false"}
             @click=${this.applyFormat("1. ", "", "orderedList")}
             title=${this.orderedListTitle ?? "Ordered List"}
           >
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 256 256"
+              aria-hidden="true"
+            >
               <path
                 d="M228,128a12,12,0,0,1-12,12H116a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128ZM116,76H216a12,12,0,0,0,0-24H116a12,12,0,0,0,0,24ZM216,180H116a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24ZM44,59.31V104a12,12,0,0,0,24,0V40A12,12,0,0,0,50.64,29.27l-16,8a12,12,0,0,0,9.36,22Zm39.73,96.86a27.7,27.7,0,0,0-11.2-18.63A28.89,28.89,0,0,0,32.9,143a27.71,27.71,0,0,0-4.17,7.54,12,12,0,0,0,22.55,8.21,4,4,0,0,1,.58-1,4.78,4.78,0,0,1,6.5-.82,3.82,3.82,0,0,1,1.61,2.6,3.63,3.63,0,0,1-.77,2.77l-.13.17L30.39,200.82A12,12,0,0,0,40,220H72a12,12,0,0,0,0-24H64l14.28-19.11A27.48,27.48,0,0,0,83.73,156.17Z"
               ></path>
@@ -281,15 +345,23 @@ let o = class extends L {
           </button>
         </li>`;
       case "UL":
-        return u`<li>
+        return u`<li role="presentation">
           <button
             type="button"
-            tabindex="0"
             class=${this.toolbarBtnClass("unorderedList")}
+            ?disabled=${this.disabled || this.readOnly}
+            aria-label=${this.unorderedListTitle ?? "Unordered List"}
+            aria-pressed=${this.activeFormats.unorderedList ? "true" : "false"}
             @click=${this.applyFormat("- ", "", "unorderedList")}
             title=${this.unorderedListTitle ?? "Unordered List"}
           >
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 256 256"
+              aria-hidden="true"
+            >
               <path
                 d="M76,64A12,12,0,0,1,88,52H216a12,12,0,0,1,0,24H88A12,12,0,0,1,76,64Zm140,52H88a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24Zm0,64H88a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24ZM44,112a16,16,0,1,0,16,16A16,16,0,0,0,44,112Zm0-64A16,16,0,1,0,60,64,16,16,0,0,0,44,48Zm0,128a16,16,0,1,0,16,16A16,16,0,0,0,44,176Z"
               ></path>
@@ -297,19 +369,25 @@ let o = class extends L {
           </button>
         </li>`;
       case "|":
-        return u`<li>
+        return u`<li role="presentation">
           <span class="gui-markdown__toolbar-separator">
-            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 256 256"
+              aria-hidden="true"
+            >
               <path d="M140,24V232a12,12,0,0,1-24,0V24a12,12,0,0,1,24,0Z"></path>
             </svg>
           </span>
         </li>`;
       default:
-        return $;
+        return y;
     }
   }
   toolbarBtnClass(t) {
-    return y({
+    return $({
       "gui-markdown__toolbar-button": !0,
       "gui-markdown__toolbar-button--disabled": this.disabled === !0 || this.readOnly === !0,
       "gui-markdown__toolbar-button--active": !!t && !!this.activeFormats[t]
@@ -318,29 +396,29 @@ let o = class extends L {
   detectFormats() {
     const t = this.querySelector(`textarea[id="${this.uid}"]`);
     if (!t) return;
-    const { selectionStart: e, value: i } = t, n = i.lastIndexOf(`
-`, e - 1) + 1, s = i.indexOf(`
-`, e), a = i.substring(n, s === -1 ? i.length : s);
+    const { selectionStart: e, value: i } = t, r = i.lastIndexOf(`
+`, e - 1) + 1, a = i.indexOf(`
+`, e), s = i.substring(r, a === -1 ? i.length : a);
     this.activeFormats = {
-      heading: /^#{1,6}\s/.test(a),
+      heading: /^#{1,6}\s/.test(s),
       bold: this.isInsideInlineFormat(i, e, "**"),
       italic: this.isInsideInlineFormat(i, e, "_"),
       strikethrough: this.isInsideInlineFormat(i, e, "~~"),
-      quote: a.startsWith("> "),
+      quote: s.startsWith("> "),
       link: this.isInsideLink(i, e),
-      orderedList: /^\d+\.\s/.test(a),
-      unorderedList: a.startsWith("- ")
+      orderedList: /^\d+\.\s/.test(s),
+      unorderedList: s.startsWith("- ")
     };
   }
   isInsideInlineFormat(t, e, i) {
-    const n = t.lastIndexOf(`
-`, e - 1) + 1, s = t.indexOf(`
-`, e), a = t.substring(n, s === -1 ? t.length : s), d = e - n;
+    const r = t.lastIndexOf(`
+`, e - 1) + 1, a = t.indexOf(`
+`, e), s = t.substring(r, a === -1 ? t.length : a), d = e - r;
     let h = 0;
-    for (; h < a.length; ) {
-      const g = a.indexOf(i, h);
+    for (; h < s.length; ) {
+      const g = s.indexOf(i, h);
       if (g === -1) break;
-      const p = a.indexOf(i, g + i.length);
+      const p = s.indexOf(i, g + i.length);
       if (p === -1) break;
       if (d >= g && d <= p + i.length)
         return !0;
@@ -350,69 +428,70 @@ let o = class extends L {
   }
   isInsideLink(t, e) {
     const i = t.lastIndexOf(`
-`, e - 1) + 1, n = t.indexOf(`
-`, e), s = t.substring(i, n === -1 ? t.length : n), a = e - i, d = /\[[^\]]*\]\([^)]*\)/g;
+`, e - 1) + 1, r = t.indexOf(`
+`, e), a = t.substring(i, r === -1 ? t.length : r), s = e - i, d = /\[[^\]]*\]\([^)]*\)/g;
     let h;
-    for (; (h = d.exec(s)) !== null; )
-      if (a >= h.index && a <= h.index + h[0].length)
+    for (; (h = d.exec(a)) !== null; )
+      if (s >= h.index && s <= h.index + h[0].length)
         return !0;
     return !1;
   }
   applyFormat(t, e = "", i = "") {
     return () => {
-      const n = this.querySelector(`textarea[id="${this.uid}"]`);
-      if (n) {
+      if (this.disabled || this.readOnly) return;
+      const r = this.querySelector(`textarea[id="${this.uid}"]`);
+      if (r) {
         if (i && this.activeFormats[i])
-          this.removeFormat(n, t, e, i);
+          this.removeFormat(r, t, e, i);
         else {
-          const { selectionStart: s, selectionEnd: a, value: d } = n, h = d.substring(s, a), g = d.substring(0, s), p = d.substring(a);
-          n.value = `${g}${t}${h}${e}${p}`, n.selectionStart = s + t.length, n.selectionEnd = s + t.length + h.length;
+          const { selectionStart: a, selectionEnd: s, value: d } = r, h = d.substring(a, s), g = d.substring(0, a), p = d.substring(s);
+          r.value = `${g}${t}${h}${e}${p}`, r.selectionStart = a + t.length, r.selectionEnd = a + t.length + h.length;
         }
-        n.focus(), n.dispatchEvent(new Event("input", { bubbles: !0 })), this.detectFormats();
+        r.focus(), r.dispatchEvent(new Event("input", { bubbles: !0 })), this.detectFormats();
       }
     };
   }
-  removeFormat(t, e, i, n) {
-    const { selectionStart: s, value: a } = t, d = a.lastIndexOf(`
-`, s - 1) + 1, h = a.indexOf(`
-`, s), g = a.substring(d, h === -1 ? a.length : h);
+  removeFormat(t, e, i, r) {
+    const { selectionStart: a, value: s } = t, d = s.lastIndexOf(`
+`, a - 1) + 1, h = s.indexOf(`
+`, a), g = s.substring(d, h === -1 ? s.length : h);
     if (i)
-      if (n === "link") {
-        const p = s - d, b = /\[([^\]]*)\]\([^)]*\)/g;
+      if (r === "link") {
+        const p = a - d, v = /\[([^\]]*)\]\([^)]*\)/g;
         let c;
-        for (; (c = b.exec(g)) !== null; )
+        for (; (c = v.exec(g)) !== null; )
           if (p >= c.index && p <= c.index + c[0].length) {
-            const v = c[1], m = d + c.index, w = m + c[0].length;
-            t.value = `${a.substring(0, m)}${v}${a.substring(w)}`, t.selectionStart = m, t.selectionEnd = m + v.length;
+            const b = c[1], m = d + c.index, w = m + c[0].length;
+            t.value = `${s.substring(0, m)}${b}${s.substring(w)}`, t.selectionStart = m, t.selectionEnd = m + b.length;
             break;
           }
       } else {
-        const p = s - d;
-        let b = 0;
-        for (; b < g.length; ) {
-          const c = g.indexOf(e, b);
+        const p = a - d;
+        let v = 0;
+        for (; v < g.length; ) {
+          const c = g.indexOf(e, v);
           if (c === -1) break;
-          const v = g.indexOf(i, c + e.length);
-          if (v === -1) break;
-          if (p >= c && p <= v + i.length) {
-            const m = g.substring(c + e.length, v), w = d + c, C = d + v + i.length;
-            t.value = `${a.substring(0, w)}${m}${a.substring(C)}`, t.selectionStart = w, t.selectionEnd = w + m.length;
+          const b = g.indexOf(i, c + e.length);
+          if (b === -1) break;
+          if (p >= c && p <= b + i.length) {
+            const m = g.substring(c + e.length, b), w = d + c, O = d + b + i.length;
+            t.value = `${s.substring(0, w)}${m}${s.substring(O)}`, t.selectionStart = w, t.selectionEnd = w + m.length;
             break;
           }
-          b = v + i.length;
+          v = b + i.length;
         }
       }
     else {
       let p = e;
-      if (n === "heading") {
+      if (r === "heading") {
         const m = g.match(/^#{1,6}\s/);
         m && (p = m[0]);
-      } else if (n === "orderedList") {
+      } else if (r === "orderedList") {
         const m = g.match(/^\d+\.\s/);
         m && (p = m[0]);
       }
-      const b = a.substring(0, d), c = g.substring(p.length), v = a.substring(h === -1 ? a.length : h);
-      t.value = `${b}${c}${v}`, t.selectionStart = Math.max(d, s - p.length), t.selectionEnd = t.selectionStart;
+      const v = s.substring(0, d), c = g.substring(p.length), b = s.substring(h === -1 ? s.length : h);
+      t.value = `${v}${c}${b}`, t.selectionStart = Math.max(d, a - p.length), t.selectionEnd = t.selectionStart;
     }
   }
   valueChanged(t) {
@@ -436,108 +515,111 @@ let o = class extends L {
     );
   }
 };
-r([
-  l({ type: String })
-], o.prototype, "uid", 2);
-r([
-  l({ type: String })
-], o.prototype, "label", 2);
-r([
-  l({ type: String, attribute: "locale-id" })
-], o.prototype, "localeId", 2);
-r([
-  l({ type: Array })
-], o.prototype, "errors", 2);
-r([
-  l({ type: Boolean })
-], o.prototype, "touched", 2);
-r([
-  l({ type: Boolean })
-], o.prototype, "required", 2);
-r([
-  l({ type: Boolean })
-], o.prototype, "disabled", 2);
-r([
-  l({ type: Boolean, attribute: "readonly" })
-], o.prototype, "readOnly", 2);
-r([
-  l({ type: String })
-], o.prototype, "value", 2);
-r([
-  l({ type: String })
-], o.prototype, "hint", 2);
-r([
-  l({ type: Array })
-], o.prototype, "tools", 2);
-r([
-  l({ type: String })
-], o.prototype, "placeholder", 2);
-r([
-  l({ type: String })
-], o.prototype, "autocomplete", 2);
-r([
-  l({ type: String, attribute: "countermode" })
-], o.prototype, "counterMode", 2);
-r([
-  l({ type: Number, attribute: "minimumheight" })
-], o.prototype, "minimumHeight", 2);
-r([
-  l({ type: Boolean, attribute: "autogrow" })
-], o.prototype, "autoGrow", 2);
-r([
-  l({ type: Boolean, attribute: "defaultopenpreview" })
-], o.prototype, "defaultOpenPreview", 2);
-r([
-  l({ type: Number, attribute: "maxlength" })
-], o.prototype, "maxLength", 2);
-r([
-  l({ type: String })
-], o.prototype, "headingTitle", 2);
-r([
-  l({ type: String })
-], o.prototype, "boldTitle", 2);
-r([
-  l({ type: String })
-], o.prototype, "italicTitle", 2);
-r([
-  l({ type: String })
-], o.prototype, "strikethroughTitle", 2);
-r([
-  l({ type: String })
-], o.prototype, "quoteTitle", 2);
-r([
-  l({ type: String })
-], o.prototype, "linkTitle", 2);
-r([
-  l({ type: String })
-], o.prototype, "orderedListTitle", 2);
-r([
-  l({ type: String })
-], o.prototype, "unorderedListTitle", 2);
-r([
-  l({ type: String })
-], o.prototype, "splitViewTitle", 2);
-r([
-  l({ type: Object })
-], o.prototype, "dependencies", 2);
-r([
-  A()
-], o.prototype, "splitViewActive", 2);
-r([
-  A()
-], o.prototype, "activeFormats", 2);
-o = r([
-  O("gui-markdown")
-], o);
-typeof customElements < "u" && !customElements.get("gui-markdown") && customElements.define("gui-markdown", o);
-var E = Object.defineProperty, q = Object.getOwnPropertyDescriptor, k = (t, e, i, n) => {
-  for (var s = n > 1 ? void 0 : n ? q(e, i) : e, a = t.length - 1, d; a >= 0; a--)
-    (d = t[a]) && (s = (n ? d(e, i, s) : d(s)) || s);
-  return n && s && E(e, i, s), s;
+o([
+  n({ type: String })
+], l.prototype, "uid", 2);
+o([
+  n({ type: String })
+], l.prototype, "label", 2);
+o([
+  n({ type: String, attribute: "locale-id" })
+], l.prototype, "localeId", 2);
+o([
+  n({ type: Array })
+], l.prototype, "errors", 2);
+o([
+  n({ type: Boolean })
+], l.prototype, "touched", 2);
+o([
+  n({ type: Boolean })
+], l.prototype, "required", 2);
+o([
+  n({ type: Boolean })
+], l.prototype, "disabled", 2);
+o([
+  n({ type: Boolean, attribute: "readonly" })
+], l.prototype, "readOnly", 2);
+o([
+  n({ type: String })
+], l.prototype, "value", 2);
+o([
+  n({ type: String })
+], l.prototype, "hint", 2);
+o([
+  n({ type: Array })
+], l.prototype, "tools", 2);
+o([
+  n({ type: String })
+], l.prototype, "placeholder", 2);
+o([
+  n({ type: String })
+], l.prototype, "autocomplete", 2);
+o([
+  n({ type: String, attribute: "countermode" })
+], l.prototype, "counterMode", 2);
+o([
+  n({ type: Number, attribute: "minimumheight" })
+], l.prototype, "minimumHeight", 2);
+o([
+  n({ type: Boolean, attribute: "autogrow" })
+], l.prototype, "autoGrow", 2);
+o([
+  n({ type: Boolean, attribute: "defaultopenpreview" })
+], l.prototype, "defaultOpenPreview", 2);
+o([
+  n({ type: Number, attribute: "maxlength" })
+], l.prototype, "maxLength", 2);
+o([
+  n({ type: String })
+], l.prototype, "headingTitle", 2);
+o([
+  n({ type: String })
+], l.prototype, "boldTitle", 2);
+o([
+  n({ type: String })
+], l.prototype, "italicTitle", 2);
+o([
+  n({ type: String })
+], l.prototype, "strikethroughTitle", 2);
+o([
+  n({ type: String })
+], l.prototype, "quoteTitle", 2);
+o([
+  n({ type: String })
+], l.prototype, "linkTitle", 2);
+o([
+  n({ type: String })
+], l.prototype, "orderedListTitle", 2);
+o([
+  n({ type: String })
+], l.prototype, "unorderedListTitle", 2);
+o([
+  n({ type: String })
+], l.prototype, "splitViewTitle", 2);
+o([
+  n({ type: String, attribute: "toolbar-aria-label" })
+], l.prototype, "toolbarAriaLabel", 2);
+o([
+  n({ type: Object })
+], l.prototype, "dependencies", 2);
+o([
+  H()
+], l.prototype, "splitViewActive", 2);
+o([
+  H()
+], l.prototype, "activeFormats", 2);
+l = o([
+  A("gui-markdown")
+], l);
+typeof customElements < "u" && !customElements.get("gui-markdown") && customElements.define("gui-markdown", l);
+var q = Object.defineProperty, E = Object.getOwnPropertyDescriptor, L = (t, e, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? E(e, i) : e, s = t.length - 1, d; s >= 0; s--)
+    (d = t[s]) && (a = (r ? d(e, i, a) : d(a)) || a);
+  return r && a && q(e, i, a), a;
 };
-let f = class extends L {
+let f = class extends k {
   constructor() {
-    super(...arguments), this.adapter = new S(), this.subscriptions = [];
+    super(...arguments), this.adapter = new V(), this.subscriptions = [];
   }
   createRenderRoot() {
     return this;
@@ -570,6 +652,16 @@ let f = class extends L {
         .minimumHeight=${this.adapter.templateData.minimumHeight}
         .autoGrow=${this.adapter.templateData.autoGrow}
         .tools=${this.adapter.templateData.tools}
+        .headingTitle=${this.adapter.templateData.headingTitle}
+        .boldTitle=${this.adapter.templateData.boldTitle}
+        .italicTitle=${this.adapter.templateData.italicTitle}
+        .strikethroughTitle=${this.adapter.templateData.strikethroughTitle}
+        .quoteTitle=${this.adapter.templateData.quoteTitle}
+        .linkTitle=${this.adapter.templateData.linkTitle}
+        .orderedListTitle=${this.adapter.templateData.orderedListTitle}
+        .unorderedListTitle=${this.adapter.templateData.unorderedListTitle}
+        .splitViewTitle=${this.adapter.templateData.splitViewTitle}
+        .toolbarAriaLabel=${this.adapter.templateData.toolbarAriaLabel}
         .defaultOpenPreview=${this.adapter.templateData.defaultOpenPreview}
         .maxLength=${this.adapter.templateData.validator?.maxLength}
         .dependencies=${this.adapter.templateData.deps}
@@ -586,15 +678,15 @@ let f = class extends L {
     super.disconnectedCallback(), this.adapter.destroy(), this.subscriptions.forEach((t) => t.unsubscribe());
   }
 };
-k([
-  B({ context: V }),
-  l({ attribute: !1 })
+L([
+  I({ context: S }),
+  n({ attribute: !1 })
 ], f.prototype, "formContext", 2);
-k([
-  F({ context: _ })
+L([
+  B({ context: C })
 ], f.prototype, "adapter", 2);
-f = k([
-  O("gui-markdown-input")
+f = L([
+  A("gui-markdown-input")
 ], f);
 export {
   f as MarkdownElement