@harbour-enterprises/superdoc 1.0.0-next.1 → 1.0.0-next.10

package/dist/super-editor/chunks/{toolbar-BNQDvBCn.js → toolbar-Zdgn--Js.js}

@@ -1,6 +1,6 @@
-import { computed, createElementBlock, openBlock, createElementVNode, createCommentVNode, normalizeClass, normalizeStyle, ref, withKeys, unref, withModifiers, createBlock, toDisplayString, withDirectives, vModelText, nextTick, getCurrentInstance, onMounted, onBeforeUnmount, createVNode, readonly, watch, reactive, onBeforeMount, inject, onActivated, onDeactivated, createTextVNode, Fragment, Comment, defineComponent, provide, h, Teleport, toRef, renderSlot, isVNode, shallowRef, watchEffect, mergeProps, Transition, vShow, cloneVNode, Text, renderList, withCtx } from "vue";
-import { p as process$1 } from "./converter-BS4FD8AG.js";
-import { _ as _export_sfc, u as useHighContrastMode, g as global$1 } from "./editor-BeacbTQe.js";
+import { ref, readonly, watch, computed, getCurrentInstance, onMounted, onBeforeUnmount, reactive, onBeforeMount, inject, onActivated, onDeactivated, createTextVNode, Fragment, Comment, defineComponent, provide, withDirectives, h, Teleport, toRef, nextTick, renderSlot, isVNode, shallowRef, watchEffect, mergeProps, Transition, vShow, cloneVNode, Text, markRaw, createElementBlock, openBlock, createElementVNode, createCommentVNode, normalizeClass, normalizeStyle, withKeys, unref, withModifiers, createBlock, toDisplayString, vModelText, createVNode, renderList, withCtx } from "vue";
+import { p as process$1 } from "./converter-BavE2jnW.js";
+import { g as global$1, _ as _export_sfc, u as useHighContrastMode } from "./editor-Cslr04KI.js";
 const sanitizeNumber = (value, defaultNumber) => {
   let sanitized = value.replace(/[^0-9.]/g, "");
   sanitized = parseFloat(sanitized);
@@ -155,378 +155,68 @@ const toolbarIcons = {
   paste: pasteIconSvg,
   strikethrough: strikethroughSvg
 };
-const _hoisted_1$4 = { class: "toolbar-icon" };
-const _hoisted_2$3 = ["innerHTML"];
-const _sfc_main$5 = {
-  __name: "ToolbarButtonIcon",
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    color: {
-      type: String,
-      default: null
-    },
-    icon: {
-      type: String,
-      default: null
+function plugin$1(options) {
+  let _bPrefix = ".";
+  let _ePrefix = "__";
+  let _mPrefix = "--";
+  let c2;
+  if (options) {
+    let t = options.blockPrefix;
+    if (t) {
+      _bPrefix = t;
+    }
+    t = options.elementPrefix;
+    if (t) {
+      _ePrefix = t;
+    }
+    t = options.modifierPrefix;
+    if (t) {
+      _mPrefix = t;
     }
-  },
-  setup(__props) {
-    const props = __props;
-    const getBarColor = computed(() => {
-      if (props.name === "color") return { backgroundColor: props.color || "#111111" };
-      if (props.name === "highlight") return { backgroundColor: props.color || "#D6D6D6" };
-    });
-    const hasColorBar = computed(() => {
-      return ["color", "highlight"].includes(props.name);
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
-        createElementVNode("div", {
-          class: normalizeClass(["toolbar-icon__icon", [`toolbar-icon__icon--${props.name}`]]),
-          innerHTML: __props.icon
-        }, null, 10, _hoisted_2$3),
-        hasColorBar.value ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: "color-bar",
-          style: normalizeStyle(getBarColor.value)
-        }, null, 4)) : createCommentVNode("", true)
-      ]);
-    };
   }
-};
-const ToolbarButtonIcon = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-6d7523ab"]]);
-const _hoisted_1$3 = ["role", "aria-label", "onKeydown"];
-const _hoisted_2$2 = ["data-item"];
-const _hoisted_3$2 = {
-  key: 1,
-  class: "button-label"
-};
-const _hoisted_4$1 = { key: 2 };
-const _hoisted_5 = ["onKeydown", "id"];
-const _hoisted_6 = ["placeholder", "onKeydown", "id"];
-const _hoisted_7 = ["innerHTML"];
-const _hoisted_8 = {
-  "aria-live": "polite",
-  class: "visually-hidden"
-};
-const _sfc_main$4 = {
-  __name: "ToolbarButton",
-  props: {
-    iconColor: {
-      type: String,
-      default: null
-    },
-    active: {
-      type: Boolean,
-      default: false
-    },
-    isNarrow: {
-      type: Boolean,
-      default: false
-    },
-    isWide: {
-      type: Boolean,
-      default: false
-    },
-    toolbarItem: {
-      type: Object,
-      required: true
-    },
-    defaultLabel: {
-      type: String,
-      default: null
-    },
-    isOverflowItem: {
-      type: Boolean,
-      default: false
+  const _plugin = {
+    install(instance) {
+      c2 = instance.c;
+      const ctx2 = instance.context;
+      ctx2.bem = {};
+      ctx2.bem.b = null;
+      ctx2.bem.els = null;
     }
-  },
-  emits: ["buttonClick", "textSubmit"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const props = __props;
-    const {
-      name,
-      active,
-      icon,
-      label,
-      hideLabel,
-      iconColor,
-      hasCaret,
-      disabled,
-      inlineTextInputVisible,
-      hasInlineTextInput,
-      minWidth,
-      style: style2,
-      attributes
-    } = props.toolbarItem;
-    const inlineTextInput = ref(label);
-    const inlineInput = ref(null);
-    const { isHighContrastMode } = useHighContrastMode();
-    const handleClick = () => {
-      if (hasInlineTextInput) {
-        nextTick(() => {
-          inlineInput.value?.focus();
-          inlineInput.value?.select();
-        });
+  };
+  function b(arg) {
+    let memorizedB;
+    let memorizedE;
+    return {
+      before(ctx2) {
+        memorizedB = ctx2.bem.b;
+        memorizedE = ctx2.bem.els;
+        ctx2.bem.els = null;
+      },
+      after(ctx2) {
+        ctx2.bem.b = memorizedB;
+        ctx2.bem.els = memorizedE;
+      },
+      $({ context, props }) {
+        arg = typeof arg === "string" ? arg : arg({ context, props });
+        context.bem.b = arg;
+        return `${(props === null || props === void 0 ? void 0 : props.bPrefix) || _bPrefix}${context.bem.b}`;
       }
-      emit("buttonClick");
-    };
-    const handleInputSubmit = () => {
-      const value = inlineTextInput.value;
-      const cleanValue = value.match(/^\d+(\.5)?$/) ? value : Math.floor(parseFloat(value)).toString();
-      emit("textSubmit", cleanValue);
-      inlineTextInput.value = cleanValue;
     };
-    const getStyle = computed(() => {
-      if (style2.value) return style2.value;
-      return {
-        minWidth: props.minWidth
-      };
-    });
-    const caretIcon = computed(() => {
-      return active.value ? toolbarIcons.dropdownCaretUp : toolbarIcons.dropdownCaretDown;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["toolbar-item", unref(attributes).className]),
-        style: normalizeStyle(getStyle.value),
-        role: __props.isOverflowItem ? "menuitem" : "button",
-        "aria-label": unref(attributes).ariaLabel,
-        onClick: handleClick,
-        onKeydown: withKeys(withModifiers(handleClick, ["stop"]), ["enter"]),
-        tabindex: "0"
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass(["toolbar-button", {
-            active: unref(active),
-            disabled: unref(disabled),
-            narrow: __props.isNarrow,
-            wide: __props.isWide,
-            "has-inline-text-input": unref(hasInlineTextInput),
-            "high-contrast": unref(isHighContrastMode)
-          }]),
-          "data-item": `btn-${unref(name) || ""}`
-        }, [
-          unref(icon) ? (openBlock(), createBlock(ToolbarButtonIcon, {
-            key: 0,
-            color: unref(iconColor),
-            class: "toolbar-icon",
-            icon: unref(icon),
-            name: unref(name)
-          }, null, 8, ["color", "icon", "name"])) : createCommentVNode("", true),
-          unref(label) && !unref(hideLabel) && !unref(inlineTextInputVisible) ? (openBlock(), createElementBlock("div", _hoisted_3$2, toDisplayString(unref(label)), 1)) : createCommentVNode("", true),
-          unref(inlineTextInputVisible) ? (openBlock(), createElementBlock("span", _hoisted_4$1, [
-            unref(name) === "fontSize" ? withDirectives((openBlock(), createElementBlock("input", {
-              key: 0,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inlineTextInput.value = $event),
-              onKeydown: withKeys(withModifiers(handleInputSubmit, ["prevent"]), ["enter"]),
-              type: "text",
-              class: normalizeClass(["button-text-input button-text-input--font-size", { "high-contrast": unref(isHighContrastMode) }]),
-              id: "inlineTextInput-" + unref(name),
-              autocomplete: "off",
-              ref_key: "inlineInput",
-              ref: inlineInput
-            }, null, 42, _hoisted_5)), [
-              [vModelText, inlineTextInput.value]
-            ]) : withDirectives((openBlock(), createElementBlock("input", {
-              key: 1,
-              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => inlineTextInput.value = $event),
-              placeholder: unref(label),
-              onKeydown: withKeys(withModifiers(handleInputSubmit, ["prevent"]), ["enter"]),
-              type: "text",
-              class: "button-text-input",
-              id: "inlineTextInput-" + unref(name),
-              autocomplete: "off",
-              ref_key: "inlineInput",
-              ref: inlineInput
-            }, null, 40, _hoisted_6)), [
-              [vModelText, inlineTextInput.value]
-            ])
-          ])) : createCommentVNode("", true),
-          unref(hasCaret) ? (openBlock(), createElementBlock("div", {
-            key: 3,
-            class: "dropdown-caret",
-            innerHTML: caretIcon.value,
-            style: normalizeStyle({ opacity: unref(disabled) ? 0.6 : 1 })
-          }, null, 12, _hoisted_7)) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_8, toDisplayString(`${unref(attributes).ariaLabel} ${unref(active) ? "selected" : "unset"}`), 1)
-        ], 10, _hoisted_2$2)
-      ], 46, _hoisted_1$3);
-    };
-  }
-};
-const ToolbarButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-ea93b080"]]);
-const _hoisted_1$2 = {
-  class: "toolbar-separator",
-  role: "separator",
-  "aria-label": "Toolbar separator"
-};
-const _sfc_main$3 = {
-  __name: "ToolbarSeparator",
-  props: {
-    active: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ["command"],
-  setup(__props, { emit: __emit }) {
-    const { isHighContrastMode } = useHighContrastMode();
-    const getSeparatorColor = () => {
-      if (isHighContrastMode.value) {
-        return "#000";
-      }
-      return "#dbdbdb";
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
-        createElementVNode("div", {
-          class: "separator-inner",
-          style: normalizeStyle({ backgroundColor: getSeparatorColor() })
-        }, null, 4)
-      ]);
-    };
-  }
-};
-const ToolbarSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-4ef9aa18"]]);
-const _hoisted_1$1 = { class: "overflow-menu" };
-const _hoisted_2$1 = { class: "overflow-menu-trigger" };
-const _hoisted_3$1 = {
-  key: 0,
-  class: "overflow-menu_items",
-  role: "group"
-};
-const _sfc_main$2 = {
-  __name: "OverflowMenu",
-  props: {
-    toolbarItem: {
-      type: Object,
-      required: true
-    },
-    overflowItems: {
-      type: Array,
-      required: true
-    }
-  },
-  emits: ["buttonClick", "close"],
-  setup(__props, { emit: __emit }) {
-    const { proxy } = getCurrentInstance();
-    const emit = __emit;
-    const props = __props;
-    const isOverflowMenuOpened = computed(() => props.toolbarItem.expand.value);
-    const hasOpenDropdown = ref(false);
-    const overflowToolbarItem = computed(() => ({
-      ...props.toolbarItem,
-      active: isOverflowMenuOpened.value
-    }));
-    const toggleOverflowMenu = () => {
-      emit("buttonClick", props.toolbarItem);
-    };
-    const handleCommand = ({ item, argument }) => {
-      proxy.$toolbar.emitCommand({ item, argument });
-    };
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        if (isOverflowMenuOpened.value && !hasOpenDropdown.value) {
-          e.preventDefault();
-          emit("close");
-        }
-      }
-    };
-    onMounted(() => {
-      document.addEventListener("keydown", handleKeyDown, true);
-    });
-    onBeforeUnmount(() => {
-      document.removeEventListener("keydown", handleKeyDown, true);
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$1, [
-        createElementVNode("div", _hoisted_2$1, [
-          createVNode(ToolbarButton, {
-            "toolbar-item": overflowToolbarItem.value,
-            onButtonClick: toggleOverflowMenu
-          }, null, 8, ["toolbar-item"])
-        ]),
-        isOverflowMenuOpened.value ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
-          createVNode(ButtonGroup, {
-            class: "superdoc-toolbar-overflow",
-            "toolbar-items": __props.overflowItems,
-            "from-overflow": "",
-            onCommand: handleCommand,
-            onDropdownUpdateShow: _cache[0] || (_cache[0] = ($event) => hasOpenDropdown.value = $event)
-          }, null, 8, ["toolbar-items"])
-        ])) : createCommentVNode("", true)
-      ]);
-    };
-  }
-};
-const OverflowMenu = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-ef28da92"]]);
-function plugin$1(options) {
-  let _bPrefix = ".";
-  let _ePrefix = "__";
-  let _mPrefix = "--";
-  let c2;
-  if (options) {
-    let t = options.blockPrefix;
-    if (t) {
-      _bPrefix = t;
-    }
-    t = options.elementPrefix;
-    if (t) {
-      _ePrefix = t;
-    }
-    t = options.modifierPrefix;
-    if (t) {
-      _mPrefix = t;
-    }
-  }
-  const _plugin = {
-    install(instance) {
-      c2 = instance.c;
-      const ctx2 = instance.context;
-      ctx2.bem = {};
-      ctx2.bem.b = null;
-      ctx2.bem.els = null;
-    }
-  };
-  function b(arg) {
-    let memorizedB;
-    let memorizedE;
-    return {
-      before(ctx2) {
-        memorizedB = ctx2.bem.b;
-        memorizedE = ctx2.bem.els;
-        ctx2.bem.els = null;
-      },
-      after(ctx2) {
-        ctx2.bem.b = memorizedB;
-        ctx2.bem.els = memorizedE;
-      },
-      $({ context, props }) {
-        arg = typeof arg === "string" ? arg : arg({ context, props });
-        context.bem.b = arg;
-        return `${(props === null || props === void 0 ? void 0 : props.bPrefix) || _bPrefix}${context.bem.b}`;
-      }
-    };
-  }
-  function e(arg) {
-    let memorizedE;
-    return {
-      before(ctx2) {
-        memorizedE = ctx2.bem.els;
-      },
-      after(ctx2) {
-        ctx2.bem.els = memorizedE;
-      },
-      $({ context, props }) {
-        arg = typeof arg === "string" ? arg : arg({ context, props });
-        context.bem.els = arg.split(",").map((v) => v.trim());
-        return context.bem.els.map((el) => `${(props === null || props === void 0 ? void 0 : props.bPrefix) || _bPrefix}${context.bem.b}${_ePrefix}${el}`).join(", ");
-      }
+  }
+  function e(arg) {
+    let memorizedE;
+    return {
+      before(ctx2) {
+        memorizedE = ctx2.bem.els;
+      },
+      after(ctx2) {
+        ctx2.bem.els = memorizedE;
+      },
+      $({ context, props }) {
+        arg = typeof arg === "string" ? arg : arg({ context, props });
+        context.bem.els = arg.split(",").map((v) => v.trim());
+        return context.bem.els.map((el) => `${(props === null || props === void 0 ? void 0 : props.bPrefix) || _bPrefix}${context.bem.b}${_ePrefix}${el}`).join(", ");
+      }
     };
   }
   function m(arg) {
@@ -4075,30 +3765,30 @@ const defaultClsPrefix = "n";
 function useConfig(props = {}, options = {
   defaultBordered: true
 }) {
-  const NConfigProvider = inject(configProviderInjectionKey, null);
+  const NConfigProvider2 = inject(configProviderInjectionKey, null);
   return {
     // NConfigProvider,
-    inlineThemeDisabled: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.inlineThemeDisabled,
-    mergedRtlRef: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef,
-    mergedComponentPropsRef: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef,
-    mergedBreakpointsRef: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedBreakpointsRef,
+    inlineThemeDisabled: NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.inlineThemeDisabled,
+    mergedRtlRef: NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedRtlRef,
+    mergedComponentPropsRef: NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedComponentPropsRef,
+    mergedBreakpointsRef: NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedBreakpointsRef,
     mergedBorderedRef: computed(() => {
       var _a, _b;
       const {
         bordered
       } = props;
       if (bordered !== void 0) return bordered;
-      return (_b = (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedBorderedRef.value) !== null && _a !== void 0 ? _a : options.defaultBordered) !== null && _b !== void 0 ? _b : true;
+      return (_b = (_a = NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedBorderedRef.value) !== null && _a !== void 0 ? _a : options.defaultBordered) !== null && _b !== void 0 ? _b : true;
     }),
-    mergedClsPrefixRef: NConfigProvider ? NConfigProvider.mergedClsPrefixRef : shallowRef(defaultClsPrefix),
-    namespaceRef: computed(() => NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedNamespaceRef.value)
+    mergedClsPrefixRef: NConfigProvider2 ? NConfigProvider2.mergedClsPrefixRef : shallowRef(defaultClsPrefix),
+    namespaceRef: computed(() => NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedNamespaceRef.value)
   };
 }
 function useThemeClass(componentName, hashRef, cssVarsRef, props) {
   if (!cssVarsRef) throwError("useThemeClass", "cssVarsRef is not passed");
-  const NConfigProvider = inject(configProviderInjectionKey, null);
-  const mergedThemeHashRef = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedThemeHashRef;
-  const styleMountTarget = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.styleMountTarget;
+  const NConfigProvider2 = inject(configProviderInjectionKey, null);
+  const mergedThemeHashRef = NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedThemeHashRef;
+  const styleMountTarget = NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.styleMountTarget;
   const themeClassRef = ref("");
   const ssrAdapter2 = useSsrAdapter();
   let renderCallback;
@@ -5443,7 +5133,7 @@ function useRtl(mountId, rtlStateRef, clsPrefixRef) {
     }
     return componentRtlState;
   });
-  const NConfigProvider = inject(configProviderInjectionKey, null);
+  const NConfigProvider2 = inject(configProviderInjectionKey, null);
   const mountStyle = () => {
     watchEffect(() => {
       const {
@@ -5463,7 +5153,7 @@ function useRtl(mountId, rtlStateRef, clsPrefixRef) {
           bPrefix: clsPrefix ? `.${clsPrefix}-` : void 0
         },
         ssr: ssrAdapter2,
-        parent: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.styleMountTarget
+        parent: NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.styleMountTarget
       });
     });
   };
@@ -5521,7 +5211,7 @@ function createTheme(theme) {
 }
 function useTheme(resolveId, mountId, style2, defaultTheme, props, clsPrefixRef) {
   const ssrAdapter2 = useSsrAdapter();
-  const NConfigProvider = inject(configProviderInjectionKey, null);
+  const NConfigProvider2 = inject(configProviderInjectionKey, null);
   if (style2) {
     const mountStyle = () => {
       const clsPrefix = clsPrefixRef === null || clsPrefixRef === void 0 ? void 0 : clsPrefixRef.value;
@@ -5533,15 +5223,15 @@ function useTheme(resolveId, mountId, style2, defaultTheme, props, clsPrefixRef)
         },
         anchorMetaName: cssrAnchorMetaName,
         ssr: ssrAdapter2,
-        parent: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.styleMountTarget
+        parent: NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.styleMountTarget
       });
-      if (!(NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.preflightStyleDisabled)) {
+      if (!(NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.preflightStyleDisabled)) {
         globalStyle.mount({
           id: "n-global",
           head: true,
           anchorMetaName: cssrAnchorMetaName,
           ssr: ssrAdapter2,
-          parent: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.styleMountTarget
+          parent: NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.styleMountTarget
         });
       }
     };
@@ -5573,11 +5263,11 @@ function useTheme(resolveId, mountId, style2, defaultTheme, props, clsPrefixRef)
         self: globalSelf = void 0,
         peers: globalPeers = {}
       } = {}
-    } = (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedThemeRef.value) || {};
+    } = (NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedThemeRef.value) || {};
     const {
       common: globalCommonOverrides = void 0,
       [resolveId]: globalSelfOverrides = {}
-    } = (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedThemeOverridesRef.value) || {};
+    } = (NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedThemeOverridesRef.value) || {};
     const {
       common: globalSelfCommonOverrides,
       peers: globalPeersOverrides = {}
@@ -8335,6 +8025,209 @@ const NPopover = defineComponent({
     });
   }
 });
+const configProviderProps = {
+  abstract: Boolean,
+  bordered: {
+    type: Boolean,
+    default: void 0
+  },
+  clsPrefix: String,
+  locale: Object,
+  dateLocale: Object,
+  namespace: String,
+  rtl: Array,
+  tag: {
+    type: String,
+    default: "div"
+  },
+  hljs: Object,
+  katex: Object,
+  theme: Object,
+  themeOverrides: Object,
+  componentOptions: Object,
+  icons: Object,
+  breakpoints: Object,
+  preflightStyleDisabled: Boolean,
+  styleMountTarget: Object,
+  inlineThemeDisabled: {
+    type: Boolean,
+    default: void 0
+  },
+  // deprecated
+  as: {
+    type: String,
+    validator: () => {
+      warn("config-provider", "`as` is deprecated, please use `tag` instead.");
+      return true;
+    },
+    default: void 0
+  }
+};
+const NConfigProvider = defineComponent({
+  name: "ConfigProvider",
+  alias: ["App"],
+  props: configProviderProps,
+  setup(props) {
+    const NConfigProvider2 = inject(configProviderInjectionKey, null);
+    const mergedThemeRef = computed(() => {
+      const {
+        theme
+      } = props;
+      if (theme === null) return void 0;
+      const inheritedTheme = NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedThemeRef.value;
+      return theme === void 0 ? inheritedTheme : inheritedTheme === void 0 ? theme : Object.assign({}, inheritedTheme, theme);
+    });
+    const mergedThemeOverridesRef = computed(() => {
+      const {
+        themeOverrides
+      } = props;
+      if (themeOverrides === null) return void 0;
+      if (themeOverrides === void 0) {
+        return NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedThemeOverridesRef.value;
+      } else {
+        const inheritedThemeOverrides = NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedThemeOverridesRef.value;
+        if (inheritedThemeOverrides === void 0) {
+          return themeOverrides;
+        } else {
+          return merge$1({}, inheritedThemeOverrides, themeOverrides);
+        }
+      }
+    });
+    const mergedNamespaceRef = useMemo(() => {
+      const {
+        namespace: namespace2
+      } = props;
+      return namespace2 === void 0 ? NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedNamespaceRef.value : namespace2;
+    });
+    const mergedBorderedRef = useMemo(() => {
+      const {
+        bordered
+      } = props;
+      return bordered === void 0 ? NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedBorderedRef.value : bordered;
+    });
+    const mergedIconsRef = computed(() => {
+      const {
+        icons
+      } = props;
+      return icons === void 0 ? NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedIconsRef.value : icons;
+    });
+    const mergedComponentPropsRef = computed(() => {
+      const {
+        componentOptions
+      } = props;
+      if (componentOptions !== void 0) return componentOptions;
+      return NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedComponentPropsRef.value;
+    });
+    const mergedClsPrefixRef = computed(() => {
+      const {
+        clsPrefix
+      } = props;
+      if (clsPrefix !== void 0) return clsPrefix;
+      if (NConfigProvider2) return NConfigProvider2.mergedClsPrefixRef.value;
+      return defaultClsPrefix;
+    });
+    const mergedRtlRef = computed(() => {
+      var _a;
+      const {
+        rtl
+      } = props;
+      if (rtl === void 0) {
+        return NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedRtlRef.value;
+      }
+      const rtlEnabledState = {};
+      for (const rtlInfo of rtl) {
+        rtlEnabledState[rtlInfo.name] = markRaw(rtlInfo);
+        (_a = rtlInfo.peers) === null || _a === void 0 ? void 0 : _a.forEach((peerRtlInfo) => {
+          if (!(peerRtlInfo.name in rtlEnabledState)) {
+            rtlEnabledState[peerRtlInfo.name] = markRaw(peerRtlInfo);
+          }
+        });
+      }
+      return rtlEnabledState;
+    });
+    const mergedBreakpointsRef = computed(() => {
+      return props.breakpoints || (NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedBreakpointsRef.value);
+    });
+    const inlineThemeDisabled = props.inlineThemeDisabled || (NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.inlineThemeDisabled);
+    const preflightStyleDisabled = props.preflightStyleDisabled || (NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.preflightStyleDisabled);
+    const styleMountTarget = props.styleMountTarget || (NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.styleMountTarget);
+    const mergedThemeHashRef = computed(() => {
+      const {
+        value: theme
+      } = mergedThemeRef;
+      const {
+        value: mergedThemeOverrides
+      } = mergedThemeOverridesRef;
+      const hasThemeOverrides = mergedThemeOverrides && Object.keys(mergedThemeOverrides).length !== 0;
+      const themeName = theme === null || theme === void 0 ? void 0 : theme.name;
+      if (themeName) {
+        if (hasThemeOverrides) {
+          return `${themeName}-${murmur2(JSON.stringify(mergedThemeOverridesRef.value))}`;
+        }
+        return themeName;
+      } else {
+        if (hasThemeOverrides) {
+          return murmur2(JSON.stringify(mergedThemeOverridesRef.value));
+        }
+        return "";
+      }
+    });
+    provide(configProviderInjectionKey, {
+      mergedThemeHashRef,
+      mergedBreakpointsRef,
+      mergedRtlRef,
+      mergedIconsRef,
+      mergedComponentPropsRef,
+      mergedBorderedRef,
+      mergedNamespaceRef,
+      mergedClsPrefixRef,
+      mergedLocaleRef: computed(() => {
+        const {
+          locale
+        } = props;
+        if (locale === null) return void 0;
+        return locale === void 0 ? NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedLocaleRef.value : locale;
+      }),
+      mergedDateLocaleRef: computed(() => {
+        const {
+          dateLocale
+        } = props;
+        if (dateLocale === null) return void 0;
+        return dateLocale === void 0 ? NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedDateLocaleRef.value : dateLocale;
+      }),
+      mergedHljsRef: computed(() => {
+        const {
+          hljs
+        } = props;
+        return hljs === void 0 ? NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedHljsRef.value : hljs;
+      }),
+      mergedKatexRef: computed(() => {
+        const {
+          katex
+        } = props;
+        return katex === void 0 ? NConfigProvider2 === null || NConfigProvider2 === void 0 ? void 0 : NConfigProvider2.mergedKatexRef.value : katex;
+      }),
+      mergedThemeRef,
+      mergedThemeOverridesRef,
+      inlineThemeDisabled: inlineThemeDisabled || false,
+      preflightStyleDisabled: preflightStyleDisabled || false,
+      styleMountTarget
+    });
+    return {
+      mergedClsPrefix: mergedClsPrefixRef,
+      mergedBordered: mergedBorderedRef,
+      mergedNamespace: mergedNamespaceRef,
+      mergedTheme: mergedThemeRef,
+      mergedThemeOverrides: mergedThemeOverridesRef
+    };
+  },
+  render() {
+    var _a, _b, _c, _d;
+    return !this.abstract ? h(this.as || this.tag, {
+      class: `${this.mergedClsPrefix || defaultClsPrefix}-config-provider`
+    }, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a)) : (_d = (_c = this.$slots).default) === null || _d === void 0 ? void 0 : _d.call(_c);
+  }
+});
 const commonVariables = {
   padding: "4px 0",
   optionIconSizeSmall: "14px",
@@ -9660,158 +9553,468 @@ const NDropdown = defineComponent({
       onUpdateShow: this.doUpdateShow,
       "onUpdate:show": void 0
     };
-    return h(NPopover, Object.assign({}, keep(this.$props, popoverPropKeys), popoverProps2), {
-      trigger: () => {
-        var _a, _b;
-        return (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a);
-      }
-    });
+    return h(NPopover, Object.assign({}, keep(this.$props, popoverPropKeys), popoverProps2), {
+      trigger: () => {
+        var _a, _b;
+        return (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a);
+      }
+    });
+  }
+});
+const messageApiInjectionKey = createInjectionKey("n-message-api");
+function useMessage() {
+  const api = inject(messageApiInjectionKey, null);
+  if (api === null) {
+    throwError("use-message", "No outer <n-message-provider /> founded. See prerequisite in https://www.naiveui.com/en-US/os-theme/components/message for more details. If you want to use `useMessage` outside setup, please check https://www.naiveui.com/zh-CN/os-theme/components/message#Q-&-A.");
+  }
+  return api;
+}
+function self$1(vars) {
+  const {
+    heightSmall,
+    heightMedium,
+    heightLarge,
+    borderRadius
+  } = vars;
+  return {
+    color: "#eee",
+    colorEnd: "#ddd",
+    borderRadius,
+    heightSmall,
+    heightMedium,
+    heightLarge
+  };
+}
+const skeletonLight = {
+  common: derived,
+  self: self$1
+};
+const style = c$1([cB("skeleton", `
+ height: 1em;
+ width: 100%;
+ transition:
+ --n-color-start .3s var(--n-bezier),
+ --n-color-end .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ animation: 2s skeleton-loading infinite cubic-bezier(0.36, 0, 0.64, 1);
+ background-color: var(--n-color-start);
+ `), c$1("@keyframes skeleton-loading", `
+ 0% {
+ background: var(--n-color-start);
+ }
+ 40% {
+ background: var(--n-color-end);
+ }
+ 80% {
+ background: var(--n-color-start);
+ }
+ 100% {
+ background: var(--n-color-start);
+ }
+ `)]);
+const skeletonProps = Object.assign(Object.assign({}, useTheme.props), {
+  text: Boolean,
+  round: Boolean,
+  circle: Boolean,
+  height: [String, Number],
+  width: [String, Number],
+  size: String,
+  repeat: {
+    type: Number,
+    default: 1
+  },
+  animated: {
+    type: Boolean,
+    default: true
+  },
+  sharp: {
+    type: Boolean,
+    default: true
+  }
+});
+const NSkeleton = defineComponent({
+  name: "Skeleton",
+  inheritAttrs: false,
+  props: skeletonProps,
+  setup(props) {
+    useHoudini();
+    const {
+      mergedClsPrefixRef
+    } = useConfig(props);
+    const themeRef = useTheme("Skeleton", "-skeleton", style, skeletonLight, props, mergedClsPrefixRef);
+    return {
+      mergedClsPrefix: mergedClsPrefixRef,
+      style: computed(() => {
+        var _a, _b;
+        const theme = themeRef.value;
+        const {
+          common: {
+            cubicBezierEaseInOut: cubicBezierEaseInOut2
+          }
+        } = theme;
+        const selfThemeVars = theme.self;
+        const {
+          color,
+          colorEnd,
+          borderRadius
+        } = selfThemeVars;
+        let sizeHeight;
+        const {
+          circle,
+          sharp,
+          round,
+          width,
+          height,
+          size: size2,
+          text,
+          animated
+        } = props;
+        if (size2 !== void 0) {
+          sizeHeight = selfThemeVars[createKey("height", size2)];
+        }
+        const mergedWidth = circle ? (_a = width !== null && width !== void 0 ? width : height) !== null && _a !== void 0 ? _a : sizeHeight : width;
+        const mergedHeight = (_b = circle ? width !== null && width !== void 0 ? width : height : height) !== null && _b !== void 0 ? _b : sizeHeight;
+        return {
+          display: text ? "inline-block" : "",
+          verticalAlign: text ? "-0.125em" : "",
+          borderRadius: circle ? "50%" : round ? "4096px" : sharp ? "" : borderRadius,
+          width: typeof mergedWidth === "number" ? pxfy(mergedWidth) : mergedWidth,
+          height: typeof mergedHeight === "number" ? pxfy(mergedHeight) : mergedHeight,
+          animation: !animated ? "none" : "",
+          "--n-bezier": cubicBezierEaseInOut2,
+          "--n-color-start": color,
+          "--n-color-end": colorEnd
+        };
+      })
+    };
+  },
+  render() {
+    const {
+      repeat: repeatProp,
+      style: style2,
+      mergedClsPrefix,
+      $attrs
+    } = this;
+    const child = h("div", mergeProps({
+      class: `${mergedClsPrefix}-skeleton`,
+      style: style2
+    }, $attrs));
+    if (repeatProp > 1) {
+      return h(Fragment, null, repeat(repeatProp, null).map((_) => [child, "\n"]));
+    }
+    return child;
+  }
+});
+const _hoisted_1$4 = { class: "toolbar-icon" };
+const _hoisted_2$3 = ["innerHTML"];
+const _sfc_main$5 = {
+  __name: "ToolbarButtonIcon",
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    color: {
+      type: String,
+      default: null
+    },
+    icon: {
+      type: String,
+      default: null
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const getBarColor = computed(() => {
+      if (props.name === "color") return { backgroundColor: props.color || "#111111" };
+      if (props.name === "highlight") return { backgroundColor: props.color || "#D6D6D6" };
+    });
+    const hasColorBar = computed(() => {
+      return ["color", "highlight"].includes(props.name);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+        createElementVNode("div", {
+          class: normalizeClass(["toolbar-icon__icon", [`toolbar-icon__icon--${props.name}`]]),
+          innerHTML: __props.icon
+        }, null, 10, _hoisted_2$3),
+        hasColorBar.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "color-bar",
+          style: normalizeStyle(getBarColor.value)
+        }, null, 4)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+};
+const ToolbarButtonIcon = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-6d7523ab"]]);
+const _hoisted_1$3 = ["role", "aria-label", "onKeydown"];
+const _hoisted_2$2 = ["data-item"];
+const _hoisted_3$2 = {
+  key: 1,
+  class: "button-label"
+};
+const _hoisted_4$1 = { key: 2 };
+const _hoisted_5 = ["onKeydown", "id"];
+const _hoisted_6 = ["placeholder", "onKeydown", "id"];
+const _hoisted_7 = ["innerHTML"];
+const _hoisted_8 = {
+  "aria-live": "polite",
+  class: "visually-hidden"
+};
+const _sfc_main$4 = {
+  __name: "ToolbarButton",
+  props: {
+    iconColor: {
+      type: String,
+      default: null
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
+    isNarrow: {
+      type: Boolean,
+      default: false
+    },
+    isWide: {
+      type: Boolean,
+      default: false
+    },
+    toolbarItem: {
+      type: Object,
+      required: true
+    },
+    defaultLabel: {
+      type: String,
+      default: null
+    },
+    isOverflowItem: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["buttonClick", "textSubmit"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const {
+      name,
+      active,
+      icon,
+      label,
+      hideLabel,
+      iconColor,
+      hasCaret,
+      disabled,
+      inlineTextInputVisible,
+      hasInlineTextInput,
+      minWidth,
+      style: style2,
+      attributes
+    } = props.toolbarItem;
+    const inlineTextInput = ref(label);
+    const inlineInput = ref(null);
+    const { isHighContrastMode } = useHighContrastMode();
+    const handleClick = () => {
+      if (hasInlineTextInput) {
+        nextTick(() => {
+          inlineInput.value?.focus();
+          inlineInput.value?.select();
+        });
+      }
+      emit("buttonClick");
+    };
+    const handleInputSubmit = () => {
+      const value = inlineTextInput.value;
+      const cleanValue = value.match(/^\d+(\.5)?$/) ? value : Math.floor(parseFloat(value)).toString();
+      emit("textSubmit", cleanValue);
+      inlineTextInput.value = cleanValue;
+    };
+    const getStyle = computed(() => {
+      if (style2.value) return style2.value;
+      return {
+        minWidth: props.minWidth
+      };
+    });
+    const caretIcon = computed(() => {
+      return active.value ? toolbarIcons.dropdownCaretUp : toolbarIcons.dropdownCaretDown;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["toolbar-item", unref(attributes).className]),
+        style: normalizeStyle(getStyle.value),
+        role: __props.isOverflowItem ? "menuitem" : "button",
+        "aria-label": unref(attributes).ariaLabel,
+        onClick: handleClick,
+        onKeydown: withKeys(withModifiers(handleClick, ["stop"]), ["enter"]),
+        tabindex: "0"
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(["toolbar-button", {
+            active: unref(active),
+            disabled: unref(disabled),
+            narrow: __props.isNarrow,
+            wide: __props.isWide,
+            "has-inline-text-input": unref(hasInlineTextInput),
+            "high-contrast": unref(isHighContrastMode)
+          }]),
+          "data-item": `btn-${unref(name) || ""}`
+        }, [
+          unref(icon) ? (openBlock(), createBlock(ToolbarButtonIcon, {
+            key: 0,
+            color: unref(iconColor),
+            class: "toolbar-icon",
+            icon: unref(icon),
+            name: unref(name)
+          }, null, 8, ["color", "icon", "name"])) : createCommentVNode("", true),
+          unref(label) && !unref(hideLabel) && !unref(inlineTextInputVisible) ? (openBlock(), createElementBlock("div", _hoisted_3$2, toDisplayString(unref(label)), 1)) : createCommentVNode("", true),
+          unref(inlineTextInputVisible) ? (openBlock(), createElementBlock("span", _hoisted_4$1, [
+            unref(name) === "fontSize" ? withDirectives((openBlock(), createElementBlock("input", {
+              key: 0,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inlineTextInput.value = $event),
+              onKeydown: withKeys(withModifiers(handleInputSubmit, ["prevent"]), ["enter"]),
+              type: "text",
+              class: normalizeClass(["button-text-input button-text-input--font-size", { "high-contrast": unref(isHighContrastMode) }]),
+              id: "inlineTextInput-" + unref(name),
+              autocomplete: "off",
+              ref_key: "inlineInput",
+              ref: inlineInput
+            }, null, 42, _hoisted_5)), [
+              [vModelText, inlineTextInput.value]
+            ]) : withDirectives((openBlock(), createElementBlock("input", {
+              key: 1,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => inlineTextInput.value = $event),
+              placeholder: unref(label),
+              onKeydown: withKeys(withModifiers(handleInputSubmit, ["prevent"]), ["enter"]),
+              type: "text",
+              class: "button-text-input",
+              id: "inlineTextInput-" + unref(name),
+              autocomplete: "off",
+              ref_key: "inlineInput",
+              ref: inlineInput
+            }, null, 40, _hoisted_6)), [
+              [vModelText, inlineTextInput.value]
+            ])
+          ])) : createCommentVNode("", true),
+          unref(hasCaret) ? (openBlock(), createElementBlock("div", {
+            key: 3,
+            class: "dropdown-caret",
+            innerHTML: caretIcon.value,
+            style: normalizeStyle({ opacity: unref(disabled) ? 0.6 : 1 })
+          }, null, 12, _hoisted_7)) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_8, toDisplayString(`${unref(attributes).ariaLabel} ${unref(active) ? "selected" : "unset"}`), 1)
+        ], 10, _hoisted_2$2)
+      ], 46, _hoisted_1$3);
+    };
   }
-});
-const messageApiInjectionKey = createInjectionKey("n-message-api");
-function useMessage() {
-  const api = inject(messageApiInjectionKey, null);
-  if (api === null) {
-    throwError("use-message", "No outer <n-message-provider /> founded. See prerequisite in https://www.naiveui.com/en-US/os-theme/components/message for more details. If you want to use `useMessage` outside setup, please check https://www.naiveui.com/zh-CN/os-theme/components/message#Q-&-A.");
-  }
-  return api;
-}
-function self$1(vars) {
-  const {
-    heightSmall,
-    heightMedium,
-    heightLarge,
-    borderRadius
-  } = vars;
-  return {
-    color: "#eee",
-    colorEnd: "#ddd",
-    borderRadius,
-    heightSmall,
-    heightMedium,
-    heightLarge
-  };
-}
-const skeletonLight = {
-  common: derived,
-  self: self$1
 };
-const style = c$1([cB("skeleton", `
- height: 1em;
- width: 100%;
- transition:
- --n-color-start .3s var(--n-bezier),
- --n-color-end .3s var(--n-bezier),
- background-color .3s var(--n-bezier);
- animation: 2s skeleton-loading infinite cubic-bezier(0.36, 0, 0.64, 1);
- background-color: var(--n-color-start);
- `), c$1("@keyframes skeleton-loading", `
- 0% {
- background: var(--n-color-start);
- }
- 40% {
- background: var(--n-color-end);
- }
- 80% {
- background: var(--n-color-start);
- }
- 100% {
- background: var(--n-color-start);
- }
- `)]);
-const skeletonProps = Object.assign(Object.assign({}, useTheme.props), {
-  text: Boolean,
-  round: Boolean,
-  circle: Boolean,
-  height: [String, Number],
-  width: [String, Number],
-  size: String,
-  repeat: {
-    type: Number,
-    default: 1
-  },
-  animated: {
-    type: Boolean,
-    default: true
+const ToolbarButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-ea93b080"]]);
+const _hoisted_1$2 = {
+  class: "toolbar-separator",
+  role: "separator",
+  "aria-label": "Toolbar separator"
+};
+const _sfc_main$3 = {
+  __name: "ToolbarSeparator",
+  props: {
+    active: {
+      type: Boolean,
+      default: false
+    }
   },
-  sharp: {
-    type: Boolean,
-    default: true
+  emits: ["command"],
+  setup(__props, { emit: __emit }) {
+    const { isHighContrastMode } = useHighContrastMode();
+    const getSeparatorColor = () => {
+      if (isHighContrastMode.value) {
+        return "#000";
+      }
+      return "#dbdbdb";
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+        createElementVNode("div", {
+          class: "separator-inner",
+          style: normalizeStyle({ backgroundColor: getSeparatorColor() })
+        }, null, 4)
+      ]);
+    };
   }
-});
-const NSkeleton = defineComponent({
-  name: "Skeleton",
-  inheritAttrs: false,
-  props: skeletonProps,
-  setup(props) {
-    useHoudini();
-    const {
-      mergedClsPrefixRef
-    } = useConfig(props);
-    const themeRef = useTheme("Skeleton", "-skeleton", style, skeletonLight, props, mergedClsPrefixRef);
-    return {
-      mergedClsPrefix: mergedClsPrefixRef,
-      style: computed(() => {
-        var _a, _b;
-        const theme = themeRef.value;
-        const {
-          common: {
-            cubicBezierEaseInOut: cubicBezierEaseInOut2
-          }
-        } = theme;
-        const selfThemeVars = theme.self;
-        const {
-          color,
-          colorEnd,
-          borderRadius
-        } = selfThemeVars;
-        let sizeHeight;
-        const {
-          circle,
-          sharp,
-          round,
-          width,
-          height,
-          size: size2,
-          text,
-          animated
-        } = props;
-        if (size2 !== void 0) {
-          sizeHeight = selfThemeVars[createKey("height", size2)];
+};
+const ToolbarSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-4ef9aa18"]]);
+const _hoisted_1$1 = { class: "overflow-menu" };
+const _hoisted_2$1 = { class: "overflow-menu-trigger" };
+const _hoisted_3$1 = {
+  key: 0,
+  class: "overflow-menu_items",
+  role: "group"
+};
+const _sfc_main$2 = {
+  __name: "OverflowMenu",
+  props: {
+    toolbarItem: {
+      type: Object,
+      required: true
+    },
+    overflowItems: {
+      type: Array,
+      required: true
+    }
+  },
+  emits: ["buttonClick", "close"],
+  setup(__props, { emit: __emit }) {
+    const { proxy } = getCurrentInstance();
+    const emit = __emit;
+    const props = __props;
+    const isOverflowMenuOpened = computed(() => props.toolbarItem.expand.value);
+    const hasOpenDropdown = ref(false);
+    const overflowToolbarItem = computed(() => ({
+      ...props.toolbarItem,
+      active: isOverflowMenuOpened.value
+    }));
+    const toggleOverflowMenu = () => {
+      emit("buttonClick", props.toolbarItem);
+    };
+    const handleCommand = ({ item, argument }) => {
+      proxy.$toolbar.emitCommand({ item, argument });
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        if (isOverflowMenuOpened.value && !hasOpenDropdown.value) {
+          e.preventDefault();
+          emit("close");
         }
-        const mergedWidth = circle ? (_a = width !== null && width !== void 0 ? width : height) !== null && _a !== void 0 ? _a : sizeHeight : width;
-        const mergedHeight = (_b = circle ? width !== null && width !== void 0 ? width : height : height) !== null && _b !== void 0 ? _b : sizeHeight;
-        return {
-          display: text ? "inline-block" : "",
-          verticalAlign: text ? "-0.125em" : "",
-          borderRadius: circle ? "50%" : round ? "4096px" : sharp ? "" : borderRadius,
-          width: typeof mergedWidth === "number" ? pxfy(mergedWidth) : mergedWidth,
-          height: typeof mergedHeight === "number" ? pxfy(mergedHeight) : mergedHeight,
-          animation: !animated ? "none" : "",
-          "--n-bezier": cubicBezierEaseInOut2,
-          "--n-color-start": color,
-          "--n-color-end": colorEnd
-        };
-      })
+      }
+    };
+    onMounted(() => {
+      document.addEventListener("keydown", handleKeyDown, true);
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("keydown", handleKeyDown, true);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createElementVNode("div", _hoisted_2$1, [
+          createVNode(ToolbarButton, {
+            "toolbar-item": overflowToolbarItem.value,
+            onButtonClick: toggleOverflowMenu
+          }, null, 8, ["toolbar-item"])
+        ]),
+        isOverflowMenuOpened.value ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+          createVNode(ButtonGroup, {
+            class: "superdoc-toolbar-overflow",
+            "toolbar-items": __props.overflowItems,
+            "from-overflow": "",
+            onCommand: handleCommand,
+            onDropdownUpdateShow: _cache[0] || (_cache[0] = ($event) => hasOpenDropdown.value = $event)
+          }, null, 8, ["toolbar-items"])
+        ])) : createCommentVNode("", true)
+      ]);
     };
-  },
-  render() {
-    const {
-      repeat: repeatProp,
-      style: style2,
-      mergedClsPrefix,
-      $attrs
-    } = this;
-    const child = h("div", mergeProps({
-      class: `${mergedClsPrefix}-skeleton`,
-      style: style2
-    }, $attrs));
-    if (repeatProp > 1) {
-      return h(Fragment, null, repeat(repeatProp, null).map((_) => [child, "\n"]));
-    }
-    return child;
   }
-});
+};
+const OverflowMenu = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-ef28da92"]]);
 const _hoisted_1 = ["onKeydown", "tabindex", "data-item-id"];
 const _hoisted_2 = { key: 0 };
 const _hoisted_3 = { key: 0 };
@@ -9827,6 +10030,16 @@ const _sfc_main$1 = {
       type: Array,
       default: () => []
     },
+    /**
+     * The font-family to use for UI elements like dropdowns and tooltips.
+     * This ensures consistent typography across toolbar UI components.
+     * @type {string}
+     * @default 'Arial, Helvetica, sans-serif'
+     */
+    uiFontFamily: {
+      type: String,
+      default: "Arial, Helvetica, sans-serif"
+    },
     position: {
       type: String,
       default: "left"
@@ -10019,6 +10232,7 @@ const _sfc_main$1 = {
               options: dropdownOptions(item),
               trigger: item.disabled.value ? null : "click",
               show: item.expand.value,
+              "content-style": { fontFamily: props.uiFontFamily },
               size: "medium",
               placement: "bottom-start",
               class: normalizeClass(["toolbar-button toolbar-dropdown sd-editor-toolbar-dropdown", { "high-contrast": unref(isHighContrastMode) }]),
@@ -10026,14 +10240,16 @@ const _sfc_main$1 = {
               onUpdateShow: handleDropdownUpdateShow,
               style: normalizeStyle(item.dropdownStyles.value),
               "menu-props": () => ({
-                role: "menu"
+                role: "menu",
+                style: { fontFamily: props.uiFontFamily }
               }),
               "node-props": (option) => getDropdownAttributes(option, item)
             }, {
               default: withCtx(() => [
                 createVNode(unref(NTooltip), {
                   trigger: "hover",
-                  disabled: !item.tooltip?.value
+                  disabled: !item.tooltip?.value,
+                  "content-style": { fontFamily: props.uiFontFamily }
                 }, {
                   trigger: withCtx(() => [
                     createVNode(ToolbarButton, {
@@ -10050,13 +10266,14 @@ const _sfc_main$1 = {
                     ])
                   ]),
                   _: 2
-                }, 1032, ["disabled"])
+                }, 1032, ["disabled", "content-style"])
               ]),
               _: 2
-            }, 1032, ["options", "trigger", "show", "class", "onSelect", "style", "node-props"])) : isButton(item) ? (openBlock(), createBlock(unref(NTooltip), {
+            }, 1032, ["options", "trigger", "show", "content-style", "class", "onSelect", "style", "menu-props", "node-props"])) : isButton(item) ? (openBlock(), createBlock(unref(NTooltip), {
               key: 2,
               trigger: "hover",
-              class: "sd-editor-toolbar-tooltip"
+              class: "sd-editor-toolbar-tooltip",
+              "content-style": { fontFamily: props.uiFontFamily }
             }, {
               trigger: withCtx(() => [
                 createVNode(ToolbarButton, {
@@ -10073,7 +10290,7 @@ const _sfc_main$1 = {
                 ])) : createCommentVNode("", true)
               ]),
               _: 2
-            }, 1024)) : createCommentVNode("", true),
+            }, 1032, ["content-style"])) : createCommentVNode("", true),
             isOverflow(item) && __props.overflowItems.length ? (openBlock(), createBlock(OverflowMenu, {
               key: 3,
               "toolbar-item": item,
@@ -10087,13 +10304,21 @@ const _sfc_main$1 = {
     };
   }
 };
-const ButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-c80a1e51"]]);
+const ButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-f732136c"]]);
+const DEFAULT_UI_FONT_FAMILY = "Arial, Helvetica, sans-serif";
 const _sfc_main = {
   __name: "Toolbar",
   emits: ["command", "toggle", "select"],
   setup(__props, { emit: __emit }) {
     const { proxy } = getCurrentInstance();
     let toolbarKey = ref(1);
+    const uiFontFamily = computed(() => {
+      const configured = proxy?.$toolbar?.config?.uiDisplayFallbackFont;
+      if (typeof configured === "string" && configured.trim()) {
+        return configured.trim();
+      }
+      return DEFAULT_UI_FONT_FAMILY;
+    });
     const showLeftSide = proxy.$toolbar.config?.toolbarGroups?.includes("left");
     const showRightSide = proxy.$toolbar.config?.toolbarGroups?.includes("right");
     const excludeButtonsList = proxy.$toolbar.config?.toolbarButtonsExclude || [];
@@ -10140,37 +10365,48 @@ const _sfc_main = {
         "aria-label": "Toolbar",
         "data-editor-ui-surface": ""
       }, [
-        unref(showLeftSide) ? (openBlock(), createBlock(ButtonGroup, {
-          key: 0,
-          tabindex: "0",
-          "toolbar-items": getFilteredItems("left"),
-          position: "left",
-          onCommand: handleCommand,
-          onItemClicked: restoreSelection,
-          class: "superdoc-toolbar-group-side"
-        }, null, 8, ["toolbar-items"])) : createCommentVNode("", true),
-        createVNode(ButtonGroup, {
-          tabindex: "0",
-          "toolbar-items": getFilteredItems("center"),
-          "overflow-items": unref(proxy).$toolbar.overflowItems,
-          position: "center",
-          onCommand: handleCommand,
-          onItemClicked: restoreSelection
-        }, null, 8, ["toolbar-items", "overflow-items"]),
-        unref(showRightSide) ? (openBlock(), createBlock(ButtonGroup, {
-          key: 1,
-          tabindex: "0",
-          "toolbar-items": getFilteredItems("right"),
-          position: "right",
-          onCommand: handleCommand,
-          onItemClicked: restoreSelection,
-          class: "superdoc-toolbar-group-side"
-        }, null, 8, ["toolbar-items"])) : createCommentVNode("", true)
+        createVNode(unref(NConfigProvider), {
+          abstract: "",
+          "preflight-style-disabled": ""
+        }, {
+          default: withCtx(() => [
+            unref(showLeftSide) ? (openBlock(), createBlock(ButtonGroup, {
+              key: 0,
+              tabindex: "0",
+              "toolbar-items": getFilteredItems("left"),
+              "ui-font-family": uiFontFamily.value,
+              position: "left",
+              onCommand: handleCommand,
+              onItemClicked: restoreSelection,
+              class: "superdoc-toolbar-group-side"
+            }, null, 8, ["toolbar-items", "ui-font-family"])) : createCommentVNode("", true),
+            createVNode(ButtonGroup, {
+              tabindex: "0",
+              "toolbar-items": getFilteredItems("center"),
+              "overflow-items": unref(proxy).$toolbar.overflowItems,
+              "ui-font-family": uiFontFamily.value,
+              position: "center",
+              onCommand: handleCommand,
+              onItemClicked: restoreSelection
+            }, null, 8, ["toolbar-items", "overflow-items", "ui-font-family"]),
+            unref(showRightSide) ? (openBlock(), createBlock(ButtonGroup, {
+              key: 1,
+              tabindex: "0",
+              "toolbar-items": getFilteredItems("right"),
+              "ui-font-family": uiFontFamily.value,
+              position: "right",
+              onCommand: handleCommand,
+              onItemClicked: restoreSelection,
+              class: "superdoc-toolbar-group-side"
+            }, null, 8, ["toolbar-items", "ui-font-family"])) : createCommentVNode("", true)
+          ]),
+          _: 1
+        })
       ]);
     };
   }
 };
-const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3f5ec271"]]);
+const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c7a72aa9"]]);
 export {
   NSkeleton as N,
   Toolbar as T,