@qingmingmu/components 0.1.0-beta.0

package/es/components/dialog/index.d.mts

@@ -0,0 +1,131 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+export { c as createFocusTrap, g as getFocusable, l as lockBodyScroll, u as unlockBodyScroll } from '../../shared/components.B_aXqCE8.mjs';
+
+/**
+ * QmDialog 组件类型定义（组件体系设计 §6.4：类型先行）
+ * 03-T2：受控 v-model 开合 / 模态遮罩 / 尺寸 / 可访问性完整
+ */
+
+/** 关闭原因契约（task-02 §4：便于业务区分） */
+type DialogCloseReason = 'esc' | 'overlay' | 'close-btn' | 'ok' | 'cancel';
+/** 对话框尺寸（§6.3：small | medium | large） */
+type DialogSize = 'small' | 'medium' | 'large';
+/** props 声明 */
+declare const dialogProps: {
+    /** 受控 v-model：是否显示 */
+    readonly modelValue: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 标题（也可用 header 插槽） */
+    readonly title: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /** 尺寸：small / medium / large */
+    readonly size: {
+        readonly type: PropType<DialogSize>;
+        readonly default: "medium";
+    };
+    /** 自定义宽度（覆盖 size），如 '500px' / '80%' */
+    readonly width: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /** 点击遮罩是否关闭 */
+    readonly closeOnClickOverlay: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /** 按 Esc 是否关闭 */
+    readonly closeOnEsc: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /** Teleport 目标，默认 body */
+    readonly appendTo: {
+        readonly type: StringConstructor;
+        readonly default: "body";
+    };
+    /** 是否显示关闭按钮 */
+    readonly showClose: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /** 关闭时销毁子元素（v-if 控制） */
+    readonly destroyOnClose: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 是否显示遮罩 */
+    readonly modal: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+};
+/** emits 声明 */
+interface DialogEmits {
+    'update:modelValue': [value: boolean];
+    'open': [];
+    'close': [reason: DialogCloseReason];
+}
+
+/**
+ * QmDialog.open 命令式打开（03-T4 §3.5）
+ *
+ * 契约：
+ *   const reason = await openDialog({ title: '删除确认', content: '...' })
+ *   // reason: 'esc' | 'overlay' | 'close-btn' | 'ok' | 'cancel'
+ *
+ * 实现：
+ * - 复用受控 QmDialog 组件渲染（焦点陷阱/遮罩/滚动锁定/关闭原因全部复用 03-T2）；
+ * - 动态挂载到 body：createApp 挂到独立容器，关闭离开动画完成后卸载应用、移除容器（无泄漏）；
+ * - 默认渲染「取消 / 确定」底部按钮，点击分别以 cancel / ok 原因 resolve。
+ */
+
+/** openDialog 入参 */
+interface OpenDialogOptions {
+    /** 标题 */
+    title?: string;
+    /** 正文（纯文本） */
+    content?: string;
+    /** 尺寸 */
+    size?: DialogSize;
+    /** 自定义宽度 */
+    width?: string;
+    /** 确定按钮文案，默认「确定」 */
+    okText?: string;
+    /** 取消按钮文案，默认「取消」 */
+    cancelText?: string;
+    /** 是否显示取消按钮，默认 true */
+    showCancel?: boolean;
+    /** 点击遮罩是否关闭，默认 true */
+    closeOnClickOverlay?: boolean;
+    /** Esc 是否关闭，默认 true */
+    closeOnEsc?: boolean;
+}
+/**
+ * 命令式打开对话框。
+ * @returns Promise，resolve 为关闭原因
+ */
+declare function openDialog(options?: OpenDialogOptions): Promise<DialogCloseReason>;
+
+declare const QmDialogNamespace: {
+    new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<Record<string, unknown>>, Record<string, unknown>, unknown, vue.ComputedOptions, vue.MethodOptions, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<Record<string, unknown>>, Record<string, unknown>, {}, vue.ComputedOptions, vue.MethodOptions, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & vue.ComponentOptionsBase<Readonly<Record<string, unknown>>, Record<string, unknown>, unknown, vue.ComputedOptions, vue.MethodOptions, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+    open: typeof openDialog;
+};
+
+export { QmDialogNamespace as default, dialogProps, openDialog };
+export type { DialogCloseReason, DialogEmits, DialogSize, OpenDialogOptions };

package/es/components/dialog/index.d.ts

@@ -0,0 +1,133 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+export { c as createFocusTrap, g as getFocusable, l as lockBodyScroll, u as unlockBodyScroll } from '../../shared/components.B_aXqCE8.js';
+
+/**
+ * QmDialog 组件类型定义（组件体系设计 §6.4：类型先行）
+ * 03-T2：受控 v-model 开合 / 模态遮罩 / 尺寸 / 可访问性完整
+ */
+
+/** 关闭原因契约（task-02 §4：便于业务区分） */
+type DialogCloseReason = 'esc' | 'overlay' | 'close-btn' | 'ok' | 'cancel';
+/** 对话框尺寸（§6.3：small | medium | large） */
+type DialogSize = 'small' | 'medium' | 'large';
+/** props 声明 */
+declare const dialogProps: {
+    /** 受控 v-model：是否显示 */
+    readonly modelValue: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 标题（也可用 header 插槽） */
+    readonly title: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /** 尺寸：small / medium / large */
+    readonly size: {
+        readonly type: PropType<DialogSize>;
+        readonly default: "medium";
+    };
+    /** 自定义宽度（覆盖 size），如 '500px' / '80%' */
+    readonly width: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /** 点击遮罩是否关闭 */
+    readonly closeOnClickOverlay: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /** 按 Esc 是否关闭 */
+    readonly closeOnEsc: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /** Teleport 目标，默认 body */
+    readonly appendTo: {
+        readonly type: StringConstructor;
+        readonly default: "body";
+    };
+    /** 是否显示关闭按钮 */
+    readonly showClose: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /** 关闭时销毁子元素（v-if 控制） */
+    readonly destroyOnClose: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 是否显示遮罩 */
+    readonly modal: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+};
+/** emits 声明 */
+interface DialogEmits {
+    'update:modelValue': [value: boolean];
+    'open': [];
+    'close': [reason: DialogCloseReason];
+}
+
+/**
+ * QmDialog.open 命令式打开（03-T4 §3.5）
+ *
+ * 契约：
+ *   const reason = await openDialog({ title: '删除确认', content: '...' })
+ *   // reason: 'esc' | 'overlay' | 'close-btn' | 'ok' | 'cancel'
+ *
+ * 实现：
+ * - 复用受控 QmDialog 组件渲染（焦点陷阱/遮罩/滚动锁定/关闭原因全部复用 03-T2）；
+ * - 动态挂载到 body：createApp 挂到独立容器，关闭离开动画完成后卸载应用、移除容器（无泄漏）；
+ * - 默认渲染「取消 / 确定」底部按钮，点击分别以 cancel / ok 原因 resolve。
+ */
+
+/** openDialog 入参 */
+interface OpenDialogOptions {
+    /** 标题 */
+    title?: string;
+    /** 正文（纯文本） */
+    content?: string;
+    /** 尺寸 */
+    size?: DialogSize;
+    /** 自定义宽度 */
+    width?: string;
+    /** 确定按钮文案，默认「确定」 */
+    okText?: string;
+    /** 取消按钮文案，默认「取消」 */
+    cancelText?: string;
+    /** 是否显示取消按钮，默认 true */
+    showCancel?: boolean;
+    /** 点击遮罩是否关闭，默认 true */
+    closeOnClickOverlay?: boolean;
+    /** Esc 是否关闭，默认 true */
+    closeOnEsc?: boolean;
+}
+/**
+ * 命令式打开对话框。
+ * @returns Promise，resolve 为关闭原因
+ */
+declare function openDialog(options?: OpenDialogOptions): Promise<DialogCloseReason>;
+
+declare const QmDialogNamespace: {
+    new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<Record<string, unknown>>, Record<string, unknown>, unknown, vue.ComputedOptions, vue.MethodOptions, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<Record<string, unknown>>, Record<string, unknown>, {}, vue.ComputedOptions, vue.MethodOptions, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & vue.ComponentOptionsBase<Readonly<Record<string, unknown>>, Record<string, unknown>, unknown, vue.ComputedOptions, vue.MethodOptions, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+    open: typeof openDialog;
+};
+
+// @ts-ignore
+export = QmDialogNamespace;
+export { dialogProps, openDialog };
+export type { DialogCloseReason, DialogEmits, DialogSize, OpenDialogOptions };

package/es/components/dialog/index.mjs

@@ -0,0 +1,269 @@
+import { defineComponent, useId, ref, computed, onMounted, nextTick, onBeforeUnmount, watch, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, renderSlot, toDisplayString, createCommentVNode, reactive, createApp, h } from 'vue';
+import { I as Icon } from '../../shared/components.D3on6_fI.mjs';
+import { a as useDialog, l as lockBodyScroll } from '../../shared/components.B5WOm7ey.mjs';
+export { c as createFocusTrap, g as getFocusable, u as unlockBodyScroll } from '../../shared/components.B5WOm7ey.mjs';
+import { _ as _export_sfc } from '../../shared/components.pcqpp-6-.mjs';
+import '@qingmingmu/icons';
+
+const dialogProps = {
+  /** 受控 v-model：是否显示 */
+  modelValue: { type: Boolean, default: false },
+  /** 标题（也可用 header 插槽） */
+  title: { type: String, default: "" },
+  /** 尺寸：small / medium / large */
+  size: { type: String, default: "medium" },
+  /** 自定义宽度（覆盖 size），如 '500px' / '80%' */
+  width: { type: String, default: "" },
+  /** 点击遮罩是否关闭 */
+  closeOnClickOverlay: { type: Boolean, default: true },
+  /** 按 Esc 是否关闭 */
+  closeOnEsc: { type: Boolean, default: true },
+  /** Teleport 目标，默认 body */
+  appendTo: { type: String, default: "body" },
+  /** 是否显示关闭按钮 */
+  showClose: { type: Boolean, default: true },
+  /** 关闭时销毁子元素（v-if 控制） */
+  destroyOnClose: { type: Boolean, default: false },
+  /** 是否显示遮罩 */
+  modal: { type: Boolean, default: true }
+};
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmDialog" },
+  __name: "dialog",
+  props: dialogProps,
+  emits: ["update:modelValue", "open", "close"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const uid = useId();
+    const titleId = `qm-dialog-title-${uid}`;
+    const mounted = ref(false);
+    const panelRef = ref(null);
+    let mouseDownInside = false;
+    const visible = computed(() => props.modelValue);
+    const widthStyle = computed(() => props.width ? { width: props.width } : void 0);
+    const { close, handleKeydown, trap, dispose } = useDialog({
+      modelValue: visible,
+      closeOnEsc: computed(() => props.closeOnEsc),
+      panelRef,
+      emitClose: (reason) => {
+        emit("update:modelValue", false);
+        emit("close", reason);
+      }
+    });
+    function handleAfterLeave() {
+      unlock();
+    }
+    let finalized = false;
+    function unlock() {
+      if (finalized)
+        return;
+      finalized = true;
+      dispose();
+      trap.restore();
+    }
+    function handleOverlayMouseDown(event) {
+      mouseDownInside = panelRef.value?.contains(event.target) ?? false;
+    }
+    function handleOverlayClick(event) {
+      if (mouseDownInside)
+        return;
+      if (props.closeOnClickOverlay && event.target === event.currentTarget)
+        close("overlay");
+    }
+    function handleOpen() {
+      emit("open");
+    }
+    onMounted(() => {
+      mounted.value = true;
+      if (visible.value) {
+        lockBodyScroll();
+        trap.record();
+        nextTick(() => trap.focusFirst());
+      }
+    });
+    onBeforeUnmount(() => {
+      unlock();
+    });
+    watch(
+      visible,
+      (val) => {
+        if (val) {
+          finalized = false;
+          handleOpen();
+        } else {
+          unlock();
+        }
+      },
+      { immediate: true }
+    );
+    const __returned__ = { props, emit, uid, titleId, mounted, panelRef, get mouseDownInside() {
+      return mouseDownInside;
+    }, set mouseDownInside(v) {
+      mouseDownInside = v;
+    }, visible, widthStyle, close, handleKeydown, trap, dispose, handleAfterLeave, get finalized() {
+      return finalized;
+    }, set finalized(v) {
+      finalized = v;
+    }, unlock, handleOverlayMouseDown, handleOverlayClick, handleOpen, get QmIcon() {
+      return Icon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = ["aria-labelledby", "aria-label"];
+const _hoisted_2 = { class: "qm-dialog__header" };
+const _hoisted_3 = { class: "qm-dialog__body" };
+const _hoisted_4 = {
+	key: 0,
+	class: "qm-dialog__footer"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createBlock(Teleport, {
+		to: _ctx.appendTo,
+		disabled: !$setup.mounted
+	}, [createVNode(Transition, {
+		name: "qm-dialog",
+		onAfterLeave: $setup.handleAfterLeave
+	}, {
+		default: withCtx(() => [$setup.visible ? (openBlock(), createElementBlock(
+			"div",
+			{
+				key: 0,
+				class: normalizeClass(["qm-dialog-overlay", { "qm-dialog-overlay--transparent": !_ctx.modal }]),
+				onMousedown: $setup.handleOverlayMouseDown,
+				onClick: $setup.handleOverlayClick,
+				onKeydown: _cache[1] || (_cache[1] = (...args) => $setup.handleKeydown && $setup.handleKeydown(...args))
+			},
+			[createElementVNode("div", {
+				ref: "panelRef",
+				class: normalizeClass(["qm-dialog", [`qm-dialog--${_ctx.size}`]]),
+				style: normalizeStyle($setup.widthStyle),
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": _ctx.title ? $setup.titleId : undefined,
+				"aria-label": _ctx.title ? undefined : "对话框",
+				tabindex: "-1"
+			}, [
+				createElementVNode("header", _hoisted_2, [renderSlot(_ctx.$slots, "header", { title: _ctx.title }, () => [_ctx.title ? (openBlock(), createElementBlock(
+					"h2",
+					{
+						key: 0,
+						id: $setup.titleId,
+						class: "qm-dialog__title"
+					},
+					toDisplayString(_ctx.title),
+					1
+					/* TEXT */
+				)) : createCommentVNode("v-if", true)]), _ctx.showClose ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					class: "qm-dialog__close",
+					"aria-label": "关闭",
+					onClick: _cache[0] || (_cache[0] = ($event) => $setup.close("close-btn"))
+				}, [createVNode($setup["QmIcon"], {
+					name: "close",
+					class: "qm-dialog__close-icon",
+					style: { "font-size": "14px" }
+				})])) : createCommentVNode("v-if", true)]),
+				createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "default")]),
+				_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4, [renderSlot(_ctx.$slots, "footer", { close: $setup.close })])) : createCommentVNode("v-if", true)
+			], 14, _hoisted_1)],
+			34
+			/* CLASS, NEED_HYDRATION */
+		)) : createCommentVNode("v-if", true)]),
+		_: 3
+	})], 8, ["to", "disabled"]);
+}
+const Dialog = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\dialog\\dialog.vue"]]);
+
+function openDialog(options = {}) {
+  const {
+    title = "",
+    content = "",
+    size = "medium",
+    width = "",
+    okText = "\u786E\u5B9A",
+    cancelText = "\u53D6\u6D88",
+    showCancel = true,
+    closeOnClickOverlay = true,
+    closeOnEsc = true
+  } = options;
+  return new Promise((resolve) => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const state = reactive({ modelValue: true });
+    let settled = false;
+    const settle = (reason) => {
+      if (settled)
+        return;
+      settled = true;
+      state.modelValue = false;
+      resolve(reason);
+    };
+    const app = createApp({
+      render() {
+        return h(
+          Dialog,
+          {
+            "modelValue": state.modelValue,
+            title,
+            size,
+            width,
+            closeOnClickOverlay,
+            closeOnEsc,
+            "onUpdate:modelValue": (v) => {
+              state.modelValue = v;
+            },
+            "onClose": (reason) => {
+              settle(reason);
+            }
+          },
+          {
+            default: () => h("p", null, content),
+            footer: () => [
+              showCancel ? h(
+                "button",
+                {
+                  class: "qm-dialog__imperative-btn",
+                  onClick: () => settle("cancel")
+                },
+                cancelText
+              ) : null,
+              h(
+                "button",
+                {
+                  class: "qm-dialog__imperative-btn qm-dialog__imperative-btn--primary",
+                  onClick: () => settle("ok")
+                },
+                okText
+              )
+            ]
+          }
+        );
+      }
+    });
+    app.mount(container);
+    const stop = watch(
+      () => state.modelValue,
+      async (visible) => {
+        if (visible)
+          return;
+        stop();
+        await nextTick();
+        setTimeout(() => {
+          app.unmount();
+          container.remove();
+        }, 300);
+      }
+    );
+  });
+}
+
+const QmDialogNamespace = Object.assign(Dialog, { open: openDialog });
+
+export { QmDialogNamespace as default, dialogProps, lockBodyScroll, openDialog };

package/es/components/dialog/style/index.js

@@ -0,0 +1,4 @@
+// 样式入口（组件体系设计 §6.4）：import 编译产物 CSS。
+// 发布形态：与 es/components/dialog/style.css 同目录，由 resolver 按需注入；
+// 源码开发场景由 Vite 直接编译 index.scss（play 沙箱）。
+import './style.css'

package/es/components/dialog/style.css

@@ -0,0 +1,157 @@
+@charset "UTF-8";
+.qm-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--qm-dialog-overlay-z-index);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--qm-dialog-overlay-bg);
+  backdrop-filter: var(--qm-dialog-overlay-backdrop-filter, none);
+}
+.qm-dialog-overlay--transparent {
+  background-color: transparent;
+  backdrop-filter: none;
+}
+
+.qm-dialog {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  max-width: var(--qm-dialog-max-width);
+  max-height: calc(100vh - 2 * var(--qm-dialog-margin));
+  margin: var(--qm-dialog-margin);
+  overflow: hidden;
+  color: var(--qm-dialog-foreground);
+  outline: none;
+  background-color: var(--qm-dialog-bg);
+  background-image: var(--qm-dialog-bg-image, none);
+  border: 1px solid var(--qm-dialog-border);
+  border-radius: var(--qm-dialog-border-radius);
+  box-shadow: var(--qm-dialog-box-shadow);
+  backdrop-filter: var(--qm-dialog-backdrop-filter, none);
+}
+.qm-dialog--small {
+  width: var(--qm-dialog-width-small);
+}
+.qm-dialog--medium {
+  width: var(--qm-dialog-width-medium);
+}
+.qm-dialog--large {
+  width: var(--qm-dialog-width-large);
+}
+.qm-dialog__header {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--qm-dialog-header-padding);
+  border-bottom: var(--qm-dialog-header-border-bottom);
+}
+.qm-dialog {
+  /* 青冥品牌装饰：标题区山形云纹分隔线（叠加在 border-bottom 上） */
+}
+.qm-dialog__header::after {
+  position: absolute;
+  right: 20px;
+  bottom: -1px;
+  left: 20px;
+  height: 2px;
+  pointer-events: none;
+  content: "";
+  background: var(--qm-dialog-header-decoration);
+}
+.qm-dialog__title {
+  margin: 0;
+  font-size: var(--qm-dialog-title-font-size);
+  font-weight: var(--qm-dialog-title-font-weight);
+  color: var(--qm-dialog-title-color);
+}
+.qm-dialog__close {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--qm-dialog-close-size);
+  height: var(--qm-dialog-close-size);
+  padding: 0;
+  color: var(--qm-dialog-close-color);
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  border-radius: var(--qm-dialog-close-border-radius);
+  /* 统一走 QmIcon：颜色随按钮 hover 联动 */
+}
+.qm-dialog__close .qm-icon {
+  color: inherit;
+}
+.qm-dialog__close:hover {
+  color: var(--qm-dialog-close-hover-color);
+  background-color: var(--qm-dialog-close-hover-bg);
+}
+.qm-dialog__close:focus-visible {
+  box-shadow: var(--qm-dialog-focus-ring);
+}
+.qm-dialog__body {
+  flex: 1;
+  padding: var(--qm-dialog-body-padding);
+  overflow-y: auto;
+  font-size: var(--qm-dialog-body-font-size);
+  line-height: var(--qm-dialog-body-line-height);
+  color: var(--qm-dialog-body-color);
+}
+.qm-dialog__footer {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--qm-dialog-footer-gap);
+  align-items: center;
+  justify-content: flex-end;
+  padding: var(--qm-dialog-footer-padding);
+  border-top: var(--qm-dialog-footer-border-top);
+}
+.qm-dialog:focus-visible {
+  box-shadow: var(--qm-dialog-focus-ring);
+}
+
+.qm-dialog-enter-active,
+.qm-dialog-leave-active {
+  transition: opacity var(--qm-dialog-transition), transform var(--qm-dialog-transition);
+}
+.qm-dialog-enter-active .qm-dialog,
+.qm-dialog-leave-active .qm-dialog {
+  transition: transform var(--qm-dialog-transition), opacity var(--qm-dialog-transition);
+}
+
+.qm-dialog-enter-from,
+.qm-dialog-leave-to {
+  opacity: var(--qm-dialog-enter-opacity);
+}
+.qm-dialog-enter-from .qm-dialog,
+.qm-dialog-leave-to .qm-dialog {
+  opacity: var(--qm-dialog-enter-opacity);
+  transform: scale(var(--qm-dialog-enter-scale));
+}
+
+.qm-dialog__imperative-btn {
+  padding: 6px 16px;
+  font-size: var(--qm-dialog-body-font-size);
+  cursor: pointer;
+  background-color: var(--qm-dialog-bg);
+  border: 1px solid var(--qm-dialog-border);
+  border-radius: var(--qm-dialog-close-border-radius);
+  transition: background-color var(--qm-dialog-transition), color var(--qm-dialog-transition);
+}
+.qm-dialog__imperative-btn:hover {
+  background-color: var(--qm-dialog-close-hover-bg);
+}
+.qm-dialog__imperative-btn--primary {
+  color: var(--qm-dialog-bg);
+  background-color: var(--qm-dialog-foreground);
+  border-color: var(--qm-dialog-foreground);
+}
+.qm-dialog__imperative-btn--primary:hover {
+  background-color: var(--qm-dialog-close-hover-color);
+  border-color: var(--qm-dialog-close-hover-color);
+}