@k2b/ui 0.9.1 → 0.11.0

package/dist/browser/inputs/markdown/MarkdownEditor.js

@@ -1,31 +1,31 @@
 import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
 import { spread as _$spread } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
-import { setProperty as _$setProperty } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
-import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<button type=button class=k2b-markdown-editor__tool tabindex=-1><i aria-hidden=true>`),
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
   _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-markdown-editor__placeholder aria-hidden=true>`),
   _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-markdown-editor__stats aria-hidden=true><span><!$><!/> <!$><!/></span><span><!$><!/> <!$><!/></span><span><!$><!/> <!$><!/>`),
   _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__status role=status><i class="ti ti-loader-2 k2b-spin"aria-hidden=true></i>Loading suggestions`),
   _tmpl$5 = /*#__PURE__*/_$template(`<div popover=manual class=k2b-autocomplete__options role=presentation><div class=k2b-autocomplete__listbox role=listbox><!$><!/><!$><!/><!$><!/>`),
   _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-markdown-editor role=group><!$><!/><div class=k2b-markdown-editor__surface><!$><!/><div class=k2b-markdown-editor__preview aria-hidden=true></div><textarea class=k2b-markdown-editor__input></textarea></div><!$><!/><!$><!/>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<button type=button class=k2b-markdown-editor__tool><i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<i class="ti ti-x"aria-hidden=true>`),
   _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__status data-error=true role=alert><i class="ti ti-alert-circle"aria-hidden=true></i><span></span><button type=button>`),
   _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-autocomplete__option role=option><span></span><!$><!/>`),
   _tmpl$0 = /*#__PURE__*/_$template(`<small>`);
 import { highlight } from "@k2b/stdlib";
 import { createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, untrack } from "solid-js";
+import { Tooltip } from "../../feedback/Tooltip";
 import { createFieldMeta, Field, fieldControlAria } from "../../internal/field";
 import { useUiMessages } from "../../intl/messages";
 import { abbreviations as abbreviationsCompletion, buildSuggestContext, collectKnownLabels, createCompletionBehaviorState, detectQuery, displayLabel, renderWithOverlay, resolveSuggestions } from "../completion";
@@ -150,10 +150,6 @@ export function MarkdownEditor(props) {
     const maxHeight = 260;
     const spaceBelow = window.innerHeight - rect.bottom;
     const openAbove = spaceBelow < maxHeight && rect.top > spaceBelow;
-    const width = Math.min(280, window.innerWidth - 16);
-    const left = Math.min(rect.left, window.innerWidth - width - 8);
-    dropdown.style.setProperty("left", `${Math.max(8, left)}px`, "important");
-    dropdown.style.setProperty("width", `${width}px`, "important");
     if (openAbove) {
       dropdown.style.setProperty("top", "auto", "important");
       dropdown.style.setProperty("bottom", `${window.innerHeight - rect.top + 4}px`, "important");
@@ -162,6 +158,11 @@ export function MarkdownEditor(props) {
       dropdown.style.setProperty("bottom", "auto", "important");
     }
     if (!dropdown.matches(":popover-open")) dropdown.showPopover();
+    // The list sizes to its suggestions in CSS; measured once shown, it is
+    // clamped into the viewport before the next paint.
+    const width = dropdown.getBoundingClientRect().width;
+    const left = Math.min(rect.left, window.innerWidth - width - 8);
+    dropdown.style.setProperty("left", `${Math.max(8, left)}px`, "important");
   };
   const isAbortError = error => error instanceof DOMException ? error.name === "AbortError" : Boolean(error && typeof error === "object" && "name" in error && error.name === "AbortError");
   const applySuggestionList = (context, suggestions) => {
@@ -402,28 +403,27 @@ export function MarkdownEditor(props) {
       return props.onSave;
     },
     get children() {
-      var _el$ = _$getNextElement(_tmpl$),
-        _el$2 = _el$.firstChild;
-      _el$.$$click = () => props.onSave?.();
-      _el$.$$mousedown = event => event.preventDefault();
-      _$effect(_p$ => {
-        var _v$ = messages().saveShortcut,
-          _v$2 = messages().save,
-          _v$3 = props.disabled || props.saveDisabled || props.saving,
-          _v$4 = props.saving ? "ti ti-loader-2 k2b-spin" : props.saved ? "ti ti-check" : "ti ti-device-floppy";
-        _v$ !== _p$.e && _$setAttribute(_el$, "title", _p$.e = _v$);
-        _v$2 !== _p$.t && _$setAttribute(_el$, "aria-label", _p$.t = _v$2);
-        _v$3 !== _p$.a && _$setProperty(_el$, "disabled", _p$.a = _v$3);
-        _v$4 !== _p$.o && _$className(_el$2, _p$.o = _v$4);
-        return _p$;
-      }, {
-        e: undefined,
-        t: undefined,
-        a: undefined,
-        o: undefined
+      return _$createComponent(Tooltip.Trigger, {
+        type: "button",
+        "class": "k2b-markdown-editor__tool",
+        get content() {
+          return messages().saveShortcut;
+        },
+        get ["aria-label"]() {
+          return messages().save;
+        },
+        tabIndex: -1,
+        get disabled() {
+          return props.disabled || props.saveDisabled || props.saving;
+        },
+        onMouseDown: event => event.preventDefault(),
+        onClick: () => props.onSave?.(),
+        get children() {
+          var _el$ = _$getNextElement(_tmpl$);
+          _$effect(() => _$className(_el$, props.saving ? "ti ti-loader-2 k2b-spin" : props.saved ? "ti ti-check" : "ti ti-device-floppy"));
+          return _el$;
+        }
       });
-      _$runHydrationEvents();
-      return _el$;
     }
   });
   return _$createComponent(Field, {
@@ -450,25 +450,25 @@ export function MarkdownEditor(props) {
       return props.disabled;
     },
     get children() {
-      var _el$3 = _$getNextElement(_tmpl$6),
-        _el$36 = _el$3.firstChild,
-        [_el$37, _co$1] = _$getNextMarker(_el$36.nextSibling),
-        _el$4 = _el$37.nextSibling,
-        _el$8 = _el$4.firstChild,
-        [_el$9, _co$] = _$getNextMarker(_el$8.nextSibling),
-        _el$6 = _el$9.nextSibling,
-        _el$7 = _el$6.nextSibling,
-        _el$38 = _el$4.nextSibling,
-        [_el$39, _co$10] = _$getNextMarker(_el$38.nextSibling),
-        _el$40 = _el$39.nextSibling,
-        [_el$41, _co$11] = _$getNextMarker(_el$40.nextSibling);
-      _el$3.$$keydown = event => {
+      var _el$2 = _$getNextElement(_tmpl$6),
+        _el$35 = _el$2.firstChild,
+        [_el$36, _co$1] = _$getNextMarker(_el$35.nextSibling),
+        _el$3 = _el$36.nextSibling,
+        _el$7 = _el$3.firstChild,
+        [_el$8, _co$] = _$getNextMarker(_el$7.nextSibling),
+        _el$5 = _el$8.nextSibling,
+        _el$6 = _el$5.nextSibling,
+        _el$37 = _el$3.nextSibling,
+        [_el$38, _co$10] = _$getNextMarker(_el$37.nextSibling),
+        _el$39 = _el$38.nextSibling,
+        [_el$40, _co$11] = _$getNextMarker(_el$39.nextSibling);
+      _el$2.$$keydown = event => {
         if (props.onSave && (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
           event.preventDefault();
           if (!props.disabled && !props.saveDisabled && !props.saving) props.onSave();
         }
       };
-      _$insert(_el$3, _$createComponent(Show, {
+      _$insert(_el$2, _$createComponent(Show, {
         get when() {
           return !props.noToolbar;
         },
@@ -485,68 +485,68 @@ export function MarkdownEditor(props) {
                   return props.onClose;
                 },
                 get children() {
-                  var _el$42 = _$getNextElement(_tmpl$7);
-                  _el$42.$$click = () => props.onClose?.();
-                  _$effect(_p$ => {
-                    var _v$12 = messages().close,
-                      _v$13 = messages().close,
-                      _v$14 = props.disabled ? 0 : -1;
-                    _v$12 !== _p$.e && _$setAttribute(_el$42, "title", _p$.e = _v$12);
-                    _v$13 !== _p$.t && _$setAttribute(_el$42, "aria-label", _p$.t = _v$13);
-                    _v$14 !== _p$.a && _$setAttribute(_el$42, "tabindex", _p$.a = _v$14);
-                    return _p$;
-                  }, {
-                    e: undefined,
-                    t: undefined,
-                    a: undefined
+                  return _$createComponent(Tooltip.Trigger, {
+                    type: "button",
+                    "class": "k2b-markdown-editor__tool",
+                    get content() {
+                      return messages().close;
+                    },
+                    get ["aria-label"]() {
+                      return messages().close;
+                    },
+                    get tabIndex() {
+                      return props.disabled ? 0 : -1;
+                    },
+                    onClick: () => props.onClose?.(),
+                    get children() {
+                      return _$getNextElement(_tmpl$7);
+                    }
                   });
-                  _$runHydrationEvents();
-                  return _el$42;
                 }
               })];
             }
           });
         }
-      }), _el$37, _co$1);
-      _$insert(_el$4, _$createComponent(Show, {
+      }), _el$36, _co$1);
+      _$insert(_el$3, _$createComponent(Show, {
         get when() {
           return _$memo(() => !!!localValue())() && props.placeholder;
         },
         get children() {
-          var _el$5 = _$getNextElement(_tmpl$2);
-          _$insert(_el$5, () => props.placeholder);
-          return _el$5;
+          var _el$4 = _$getNextElement(_tmpl$2);
+          _$insert(_el$4, () => props.placeholder);
+          return _el$4;
         }
-      }), _el$9, _co$);
+      }), _el$8, _co$);
       var _ref$ = preview;
-      typeof _ref$ === "function" ? _$use(_ref$, _el$6) : preview = _el$6;
-      _el$7.addEventListener("blur", event => {
+      typeof _ref$ === "function" ? _$use(_ref$, _el$5) : preview = _el$5;
+      _el$6.addEventListener("blur", event => {
         const next = event.relatedTarget;
         if (next && dropdown?.contains(next)) return;
         completionBehavior.reset();
         clearCompletion();
       });
-      _el$7.addEventListener("compositionend", () => setComposing(false));
-      _el$7.addEventListener("compositionstart", () => setComposing(true));
-      _el$7.addEventListener("scroll", event => {
+      _el$6.addEventListener("compositionend", () => setComposing(false));
+      _el$6.addEventListener("compositionstart", () => setComposing(true));
+      _el$6.addEventListener("scroll", event => {
         if (preview) {
           preview.scrollTop = event.currentTarget.scrollTop;
           preview.scrollLeft = event.currentTarget.scrollLeft;
         }
       });
-      _el$7.addEventListener("paste", event => {
+      _el$6.addEventListener("paste", event => {
         if (textarea && handleSmartPaste(event, textarea)) {
           event.preventDefault();
         }
       });
-      _el$7.$$keydown = onKeyDown;
-      _el$7.addEventListener("change", event => props.onValueCommit?.(event.currentTarget.value));
-      _el$7.$$input = onInput;
+      _el$6.$$keydown = onKeyDown;
+      _el$6.addEventListener("change", event => props.onValueCommit?.(event.currentTarget.value));
+      _el$6.$$input = onInput;
       _$use(element => {
         textarea = element;
         props.textareaRef?.(element);
-      }, _el$7);
-      _$spread(_el$7, _$mergeProps({
+      }, _el$6);
+      _$spread(_el$6, _$mergeProps({
         get id() {
           return meta.controlId;
         },
@@ -575,99 +575,99 @@ export function MarkdownEditor(props) {
           return _$memo(() => !!(dropdownOpen() && state()))() ? optionId(state().selectedIndex) : undefined;
         }
       }), false, false);
-      _$insert(_el$3, _$createComponent(Show, {
+      _$insert(_el$2, _$createComponent(Show, {
         get when() {
           return _$memo(() => !!(props.showStats ?? true))() && !props.disabled;
         },
         get children() {
-          var _el$0 = _$getNextElement(_tmpl$3),
-            _el$1 = _el$0.firstChild,
-            _el$11 = _el$1.firstChild,
-            [_el$12, _co$2] = _$getNextMarker(_el$11.nextSibling),
-            _el$10 = _el$12.nextSibling,
-            _el$13 = _el$10.nextSibling,
-            [_el$14, _co$3] = _$getNextMarker(_el$13.nextSibling),
-            _el$15 = _el$1.nextSibling,
-            _el$17 = _el$15.firstChild,
-            [_el$18, _co$4] = _$getNextMarker(_el$17.nextSibling),
-            _el$16 = _el$18.nextSibling,
-            _el$19 = _el$16.nextSibling,
-            [_el$20, _co$5] = _$getNextMarker(_el$19.nextSibling),
-            _el$21 = _el$15.nextSibling,
-            _el$23 = _el$21.firstChild,
-            [_el$24, _co$6] = _$getNextMarker(_el$23.nextSibling),
-            _el$22 = _el$24.nextSibling,
-            _el$25 = _el$22.nextSibling,
-            [_el$26, _co$7] = _$getNextMarker(_el$25.nextSibling);
-          _$insert(_el$1, () => stats().lines, _el$12, _co$2);
-          _$insert(_el$1, () => stats().lines === 1 ? "line" : "lines", _el$14, _co$3);
-          _$insert(_el$15, () => stats().words, _el$18, _co$4);
-          _$insert(_el$15, () => stats().words === 1 ? "word" : "words", _el$20, _co$5);
-          _$insert(_el$21, () => stats().chars, _el$24, _co$6);
-          _$insert(_el$21, () => stats().chars === 1 ? "char" : "chars", _el$26, _co$7);
-          _$effect(() => _$setAttribute(_el$0, "data-empty", stats().chars === 0 ? "true" : undefined));
-          return _el$0;
+          var _el$9 = _$getNextElement(_tmpl$3),
+            _el$0 = _el$9.firstChild,
+            _el$10 = _el$0.firstChild,
+            [_el$11, _co$2] = _$getNextMarker(_el$10.nextSibling),
+            _el$1 = _el$11.nextSibling,
+            _el$12 = _el$1.nextSibling,
+            [_el$13, _co$3] = _$getNextMarker(_el$12.nextSibling),
+            _el$14 = _el$0.nextSibling,
+            _el$16 = _el$14.firstChild,
+            [_el$17, _co$4] = _$getNextMarker(_el$16.nextSibling),
+            _el$15 = _el$17.nextSibling,
+            _el$18 = _el$15.nextSibling,
+            [_el$19, _co$5] = _$getNextMarker(_el$18.nextSibling),
+            _el$20 = _el$14.nextSibling,
+            _el$22 = _el$20.firstChild,
+            [_el$23, _co$6] = _$getNextMarker(_el$22.nextSibling),
+            _el$21 = _el$23.nextSibling,
+            _el$24 = _el$21.nextSibling,
+            [_el$25, _co$7] = _$getNextMarker(_el$24.nextSibling);
+          _$insert(_el$0, () => stats().lines, _el$11, _co$2);
+          _$insert(_el$0, () => stats().lines === 1 ? "line" : "lines", _el$13, _co$3);
+          _$insert(_el$14, () => stats().words, _el$17, _co$4);
+          _$insert(_el$14, () => stats().words === 1 ? "word" : "words", _el$19, _co$5);
+          _$insert(_el$20, () => stats().chars, _el$23, _co$6);
+          _$insert(_el$20, () => stats().chars === 1 ? "char" : "chars", _el$25, _co$7);
+          _$effect(() => _$setAttribute(_el$9, "data-empty", stats().chars === 0 ? "true" : undefined));
+          return _el$9;
         }
-      }), _el$39, _co$10);
-      _$insert(_el$3, _$createComponent(Show, {
+      }), _el$38, _co$10);
+      _$insert(_el$2, _$createComponent(Show, {
         get when() {
           return state() || loading() || completionError();
         },
         get children() {
-          var _el$27 = _$getNextElement(_tmpl$5),
-            _el$28 = _el$27.firstChild,
-            _el$30 = _el$28.firstChild,
-            [_el$31, _co$8] = _$getNextMarker(_el$30.nextSibling),
-            _el$32 = _el$31.nextSibling,
-            [_el$33, _co$9] = _$getNextMarker(_el$32.nextSibling),
-            _el$34 = _el$33.nextSibling,
-            [_el$35, _co$0] = _$getNextMarker(_el$34.nextSibling);
+          var _el$26 = _$getNextElement(_tmpl$5),
+            _el$27 = _el$26.firstChild,
+            _el$29 = _el$27.firstChild,
+            [_el$30, _co$8] = _$getNextMarker(_el$29.nextSibling),
+            _el$31 = _el$30.nextSibling,
+            [_el$32, _co$9] = _$getNextMarker(_el$31.nextSibling),
+            _el$33 = _el$32.nextSibling,
+            [_el$34, _co$0] = _$getNextMarker(_el$33.nextSibling);
           var _ref$2 = dropdown;
-          typeof _ref$2 === "function" ? _$use(_ref$2, _el$27) : dropdown = _el$27;
-          _$setAttribute(_el$28, "id", listboxId);
-          _$insert(_el$28, _$createComponent(Show, {
+          typeof _ref$2 === "function" ? _$use(_ref$2, _el$26) : dropdown = _el$26;
+          _$setAttribute(_el$27, "id", listboxId);
+          _$insert(_el$27, _$createComponent(Show, {
             get when() {
               return loading();
             },
             get children() {
               return _$getNextElement(_tmpl$4);
             }
-          }), _el$31, _co$8);
-          _$insert(_el$28, _$createComponent(Show, {
+          }), _el$30, _co$8);
+          _$insert(_el$27, _$createComponent(Show, {
             get when() {
               return completionError();
             },
             children: message => (() => {
-              var _el$43 = _$getNextElement(_tmpl$8),
-                _el$44 = _el$43.firstChild,
-                _el$45 = _el$44.nextSibling,
-                _el$46 = _el$45.nextSibling;
-              _$insert(_el$45, message);
-              _el$46.$$click = retryCompletion;
-              _el$46.$$mousedown = event => event.preventDefault();
-              _$insert(_el$46, () => messages().retry);
+              var _el$42 = _$getNextElement(_tmpl$8),
+                _el$43 = _el$42.firstChild,
+                _el$44 = _el$43.nextSibling,
+                _el$45 = _el$44.nextSibling;
+              _$insert(_el$44, message);
+              _el$45.$$click = retryCompletion;
+              _el$45.$$mousedown = event => event.preventDefault();
+              _$insert(_el$45, () => messages().retry);
               _$runHydrationEvents();
-              return _el$43;
+              return _el$42;
             })()
-          }), _el$33, _co$9);
-          _$insert(_el$28, _$createComponent(For, {
+          }), _el$32, _co$9);
+          _$insert(_el$27, _$createComponent(For, {
             get each() {
               return state()?.suggestions ?? [];
             },
             children: (suggestion, index) => // biome-ignore lint/a11y/useKeyWithClickEvents: the owning textarea handles keyboard activation through aria-activedescendant.
             (() => {
-              var _el$47 = _$getNextElement(_tmpl$9),
-                _el$48 = _el$47.firstChild,
-                _el$49 = _el$48.nextSibling,
-                [_el$50, _co$12] = _$getNextMarker(_el$49.nextSibling);
-              _el$47.$$click = () => {
+              var _el$46 = _$getNextElement(_tmpl$9),
+                _el$47 = _el$46.firstChild,
+                _el$48 = _el$47.nextSibling,
+                [_el$49, _co$12] = _$getNextMarker(_el$48.nextSibling);
+              _el$46.$$click = () => {
                 activateSuggestion(index());
                 textarea?.focus();
               };
-              _el$47.$$mousedown = event => {
+              _el$46.$$mousedown = event => {
                 event.preventDefault();
               };
-              _el$47.addEventListener("mouseenter", () => {
+              _el$46.addEventListener("mouseenter", () => {
                 const current = state();
                 if (current) {
                   setState({
@@ -676,59 +676,59 @@ export function MarkdownEditor(props) {
                   });
                 }
               });
-              _$insert(_el$48, () => displayLabel(suggestion, state().context.completion));
-              _$insert(_el$47, _$createComponent(Show, {
+              _$insert(_el$47, () => displayLabel(suggestion, state().context.completion));
+              _$insert(_el$46, _$createComponent(Show, {
                 get when() {
                   return suggestion.hint;
                 },
                 children: hint => (() => {
-                  var _el$51 = _$getNextElement(_tmpl$0);
-                  _$insert(_el$51, hint);
-                  return _el$51;
+                  var _el$50 = _$getNextElement(_tmpl$0);
+                  _$insert(_el$50, hint);
+                  return _el$50;
                 })()
-              }), _el$50, _co$12);
+              }), _el$49, _co$12);
               _$effect(_p$ => {
-                var _v$15 = optionId(index()),
-                  _v$16 = index() === state()?.selectedIndex;
-                _v$15 !== _p$.e && _$setAttribute(_el$47, "id", _p$.e = _v$15);
-                _v$16 !== _p$.t && _$setAttribute(_el$47, "aria-selected", _p$.t = _v$16);
+                var _v$0 = optionId(index()),
+                  _v$1 = index() === state()?.selectedIndex;
+                _v$0 !== _p$.e && _$setAttribute(_el$46, "id", _p$.e = _v$0);
+                _v$1 !== _p$.t && _$setAttribute(_el$46, "aria-selected", _p$.t = _v$1);
                 return _p$;
               }, {
                 e: undefined,
                 t: undefined
               });
               _$runHydrationEvents();
-              return _el$47;
+              return _el$46;
             })()
-          }), _el$35, _co$0);
+          }), _el$34, _co$0);
           _$effect(_p$ => {
-            var _v$5 = messages().completionSuggestions,
-              _v$6 = messages().suggestions;
-            _v$5 !== _p$.e && _$setAttribute(_el$27, "aria-label", _p$.e = _v$5);
-            _v$6 !== _p$.t && _$setAttribute(_el$28, "aria-label", _p$.t = _v$6);
+            var _v$ = messages().completionSuggestions,
+              _v$2 = messages().suggestions;
+            _v$ !== _p$.e && _$setAttribute(_el$26, "aria-label", _p$.e = _v$);
+            _v$2 !== _p$.t && _$setAttribute(_el$27, "aria-label", _p$.t = _v$2);
             return _p$;
           }, {
             e: undefined,
             t: undefined
           });
-          return _el$27;
+          return _el$26;
         }
-      }), _el$41, _co$11);
+      }), _el$40, _co$11);
       _$effect(_p$ => {
-        var _v$7 = props.label ? meta.labelId : undefined,
-          _v$8 = !props.label ? props["aria-label"] : undefined,
-          _v$9 = props.disabled ? "true" : undefined,
-          _v$0 = error() ? "true" : undefined,
-          _v$1 = props.variant === "default" ? undefined : props.variant,
-          _v$10 = props.fill ? "true" : undefined,
-          _v$11 = String(props.lines ?? 6);
-        _v$7 !== _p$.e && _$setAttribute(_el$3, "aria-labelledby", _p$.e = _v$7);
-        _v$8 !== _p$.t && _$setAttribute(_el$3, "aria-label", _p$.t = _v$8);
-        _v$9 !== _p$.a && _$setAttribute(_el$3, "data-disabled", _p$.a = _v$9);
-        _v$0 !== _p$.o && _$setAttribute(_el$3, "data-invalid", _p$.o = _v$0);
-        _v$1 !== _p$.i && _$setAttribute(_el$3, "data-variant", _p$.i = _v$1);
-        _v$10 !== _p$.n && _$setAttribute(_el$3, "data-fill", _p$.n = _v$10);
-        _v$11 !== _p$.s && _$setStyleProperty(_el$3, "--k2b-editor-lines", _p$.s = _v$11);
+        var _v$3 = props.label ? meta.labelId : undefined,
+          _v$4 = !props.label ? props["aria-label"] : undefined,
+          _v$5 = props.disabled ? "true" : undefined,
+          _v$6 = error() ? "true" : undefined,
+          _v$7 = props.variant === "default" ? undefined : props.variant,
+          _v$8 = props.fill ? "true" : undefined,
+          _v$9 = String(props.lines ?? 6);
+        _v$3 !== _p$.e && _$setAttribute(_el$2, "aria-labelledby", _p$.e = _v$3);
+        _v$4 !== _p$.t && _$setAttribute(_el$2, "aria-label", _p$.t = _v$4);
+        _v$5 !== _p$.a && _$setAttribute(_el$2, "data-disabled", _p$.a = _v$5);
+        _v$6 !== _p$.o && _$setAttribute(_el$2, "data-invalid", _p$.o = _v$6);
+        _v$7 !== _p$.i && _$setAttribute(_el$2, "data-variant", _p$.i = _v$7);
+        _v$8 !== _p$.n && _$setAttribute(_el$2, "data-fill", _p$.n = _v$8);
+        _v$9 !== _p$.s && _$setStyleProperty(_el$2, "--k2b-editor-lines", _p$.s = _v$9);
         return _p$;
       }, {
         e: undefined,
@@ -740,10 +740,10 @@ export function MarkdownEditor(props) {
         s: undefined
       });
       _$runHydrationEvents();
-      return _el$3;
+      return _el$2;
     }
   });
 }
 export { abbreviations } from "../completion";
-_$delegateEvents(["mousedown", "click", "keydown", "input"]);
+_$delegateEvents(["keydown", "input", "mousedown", "click"]);
 //# sourceMappingURL=MarkdownEditor.js.map