@varlet/ui 3.5.1 → 3.5.2

package/es/date-picker/src/panel-header.mjs

@@ -0,0 +1,136 @@
+import VarButton from "../../button/index.mjs";
+import VarIcon from "../../icon/index.mjs";
+import { defineComponent, ref, computed, watch } from "vue";
+import { toNumber } from "@varlet/shared";
+import { createNamespace } from "../../utils/components.mjs";
+import { t } from "../../locale/index.mjs";
+import { injectLocaleProvider } from "../../locale-provider/provide.mjs";
+const { n } = createNamespace("date-picker-header");
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, withCtx as _withCtx, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, Transition as _Transition, createElementVNode as _createElementVNode } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  const _component_var_button = _resolveComponent("var-button");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n())
+    },
+    [
+      _createVNode(_component_var_button, {
+        class: _normalizeClass(_ctx.n("arrow")),
+        "var-date-picker-header-cover": "",
+        round: "",
+        text: "",
+        disabled: _ctx.disabled.left,
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.checkDate("prev"))
+      }, {
+        default: _withCtx(() => [
+          _createVNode(_component_var_icon, { name: "chevron-left" })
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["class", "disabled"]),
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("value")),
+          onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("check-panel"))
+        },
+        [
+          _createVNode(_Transition, {
+            name: `var-date-picker${_ctx.reverse ? "-reverse" : ""}-translatex`
+          }, {
+            default: _withCtx(() => [
+              (_openBlock(), _createElementBlock(
+                "div",
+                { key: _ctx.showDate },
+                _toDisplayString(_ctx.showDate),
+                1
+                /* TEXT */
+              ))
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["name"])
+        ],
+        2
+        /* CLASS */
+      ),
+      _createVNode(_component_var_button, {
+        class: _normalizeClass(_ctx.n("arrow")),
+        "var-date-picker-header-cover": "",
+        round: "",
+        text: "",
+        disabled: _ctx.disabled.right,
+        onClick: _cache[2] || (_cache[2] = ($event) => _ctx.checkDate("next"))
+      }, {
+        default: _withCtx(() => [
+          _createVNode(_component_var_icon, { name: "chevron-right" })
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["class", "disabled"])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name: "PanelHeader",
+  components: {
+    VarButton,
+    VarIcon
+  },
+  props: {
+    date: {
+      type: Object,
+      required: true
+    },
+    type: {
+      type: String,
+      default: "date"
+    },
+    disabled: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ["check-panel", "check-date"],
+  setup(props, { emit }) {
+    const reverse = ref(false);
+    const forwardOrBackNum = ref(0);
+    const { t: pt } = injectLocaleProvider();
+    const showDate = computed(() => {
+      var _a;
+      const { date, type } = props;
+      const { previewMonth, previewYear } = date;
+      if (type === "year") return previewYear;
+      if (type === "month") return toNumber(previewYear) + forwardOrBackNum.value;
+      const monthName = (_a = (pt || t)("datePickerMonthDict")) == null ? void 0 : _a[previewMonth].name;
+      return (pt || t)("lang") === "zh-CN" ? `${previewYear} ${monthName}` : `${monthName} ${previewYear}`;
+    });
+    const checkDate = (checkType) => {
+      if (checkType === "prev" && props.disabled.left || checkType === "next" && props.disabled.right) return;
+      emit("check-date", checkType);
+      reverse.value = checkType === "prev";
+      forwardOrBackNum.value += checkType === "prev" ? -1 : 1;
+    };
+    watch(
+      () => props.date,
+      () => {
+        forwardOrBackNum.value = 0;
+      }
+    );
+    return {
+      n,
+      reverse,
+      showDate,
+      checkDate
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/date-picker/src/year-picker-panel.mjs

@@ -0,0 +1,279 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import dayjs from "dayjs/esm/index.js";
+import {
+  defineComponent,
+  computed,
+  ref,
+  watch,
+  reactive
+} from "vue";
+import { toNumber } from "@varlet/shared";
+import VarButton from "../../button/index.mjs";
+import VarSticky from "../../sticky/index.mjs";
+import PanelHeader from "./panel-header.mjs";
+import { createNamespace } from "../../utils/components.mjs";
+import { onSmartMounted } from "@varlet/use";
+const { n, classes } = createNamespace("year-picker");
+const { n: nDate } = createNamespace("date-picker");
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, mergeProps as _mergeProps, normalizeClass as _normalizeClass, Transition as _Transition } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_panel_header = _resolveComponent("panel-header");
+  const _component_var_sticky = _resolveComponent("var-sticky");
+  const _component_var_button = _resolveComponent("var-button");
+  return _openBlock(), _createElementBlock("div", null, [
+    _createVNode(_component_var_sticky, { "css-mode": "" }, {
+      default: _withCtx(() => [
+        _createVNode(_component_panel_header, {
+          ref: "headerEl",
+          type: "year",
+          date: {
+            previewYear: `${_ctx.yearList[0]} ~ ${_ctx.yearList[_ctx.yearList.length - 1]}`
+          },
+          disabled: _ctx.panelBtnDisabled,
+          onCheckDate: _ctx.checkDate
+        }, null, 8, ["date", "disabled", "onCheckDate"])
+      ]),
+      _: 1
+      /* STABLE */
+    }),
+    _createVNode(_Transition, {
+      name: `${_ctx.nDate()}${_ctx.reverse ? "-reverse" : ""}-translatex`
+    }, {
+      default: _withCtx(() => [
+        (_openBlock(), _createElementBlock(
+          "ul",
+          {
+            ref: "panel",
+            class: _normalizeClass(_ctx.n()),
+            key: _ctx.panelKey
+          },
+          [
+            (_openBlock(true), _createElementBlock(
+              _Fragment,
+              null,
+              _renderList(_ctx.yearList, (year) => {
+                return _openBlock(), _createElementBlock("li", { key: year }, [
+                  _createVNode(_component_var_button, _mergeProps({
+                    type: "primary",
+                    "var-year-picker-cover": "",
+                    ripple: false,
+                    elevation: _ctx.componentProps.buttonElevation,
+                    ref_for: true
+                  }, __spreadValues({}, _ctx.buttonProps(`${year}`)), {
+                    onClick: (event) => _ctx.chooseYear(year, event)
+                  }), {
+                    default: _withCtx(() => [
+                      _createTextVNode(
+                        _toDisplayString(year),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  }, 1040, ["elevation", "onClick"])
+                ]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ],
+          2
+          /* CLASS */
+        ))
+      ]),
+      _: 1
+      /* STABLE */
+    }, 8, ["name"])
+  ]);
+}
+const __sfc__ = defineComponent({
+  name: "YearPickerPanel",
+  components: {
+    VarButton,
+    VarSticky,
+    PanelHeader
+  },
+  props: {
+    choose: {
+      type: Object,
+      required: true
+    },
+    current: {
+      type: String,
+      required: true
+    },
+    preview: {
+      type: String
+    },
+    componentProps: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ["choose-year"],
+  setup(props, { emit }) {
+    const [currentYear] = props.current.split("-");
+    const panel = ref();
+    const headerEl = ref(null);
+    const reverse = ref(false);
+    const panelKey = ref(0);
+    const page = ref(0);
+    const panelBtnDisabled = reactive({
+      left: false,
+      right: false
+    });
+    const yearList = computed(() => {
+      if (!props.preview) {
+        return [];
+      }
+      const startYear = Math.floor(toNumber(props.preview) / 100 + page.value) * 100;
+      return Array.from(Array(100), (_v, k) => Math.max(0, startYear) + k);
+    });
+    const shouldChoose = (val) => {
+      const {
+        choose: { chooseMonths, chooseDays, chooseYears, chooseRangeYear },
+        componentProps: { type, range }
+      } = props;
+      if (range) {
+        if (!chooseRangeYear.length) return false;
+        const isBeforeMax = dayjs(val).isSameOrBefore(dayjs(chooseRangeYear[1]), "year");
+        const isAfterMin = dayjs(val).isSameOrAfter(dayjs(chooseRangeYear[0]), "year");
+        return isBeforeMax && isAfterMin;
+      }
+      if (type === "year") return chooseYears.includes(val);
+      if (type === "month") return chooseMonths.some((value) => value.includes(val));
+      return chooseDays.some((value) => value.includes(val));
+    };
+    const inRange = (year) => {
+      const {
+        componentProps: { min, max }
+      } = props;
+      const isBeforeMax = max ? dayjs(year).isSameOrBefore(dayjs(max), "year") : true;
+      const isAfterMin = min ? dayjs(year).isSameOrAfter(dayjs(min), "year") : true;
+      return isBeforeMax && isAfterMin;
+    };
+    const buttonProps = (year) => {
+      const {
+        choose: { chooseYear: chooseYear2 },
+        componentProps: { allowedDates, color, multiple, range }
+      } = props;
+      const yearExist = () => {
+        if (range || multiple) return shouldChoose(year);
+        return chooseYear2 === year;
+      };
+      const computeDisabled = () => {
+        if (!inRange(year)) return true;
+        if (!allowedDates) return false;
+        return !allowedDates(year);
+      };
+      const disabled = computeDisabled();
+      const computeText = () => {
+        if (disabled) return true;
+        if (range || multiple) return !shouldChoose(year);
+        return chooseYear2 !== year;
+      };
+      const computeOutline = () => {
+        if (!(currentYear === year && props.componentProps.showCurrent)) return false;
+        if ((range || multiple) && disabled) return true;
+        if (range || multiple) return !shouldChoose(year);
+        return chooseYear2 !== currentYear;
+      };
+      const textColorOrCover = () => {
+        if (disabled) return "";
+        if (computeOutline()) return color != null ? color : "";
+        if (yearExist()) return "";
+        return `${nDate()}-color-cover`;
+      };
+      const isCover = textColorOrCover().startsWith(nDate());
+      return {
+        outline: computeOutline(),
+        text: computeText(),
+        color: !computeText() ? color : "",
+        textColor: isCover ? "" : textColorOrCover(),
+        [`${nDate()}-color-cover`]: isCover,
+        class: classes(n("button"), [disabled, n("button--disabled")]),
+        disabled
+      };
+    };
+    const chooseYear = (year, event) => {
+      const buttonEl = event.currentTarget;
+      if (buttonEl.classList.contains(n("button--disabled"))) return;
+      emit("choose-year", year);
+    };
+    const scrollToView = () => {
+      var _a;
+      const activeEl = (_a = panel.value.querySelector(".var-button--primary")) != null ? _a : panel.value.querySelector(".var-button--outline");
+      activeEl == null ? void 0 : activeEl.scrollIntoView({
+        block: "center"
+      });
+    };
+    const checkDate = (checkType) => {
+      const isPrevType = checkType === "prev";
+      reverse.value = isPrevType;
+      panelKey.value += isPrevType ? -1 : 1;
+      page.value += isPrevType ? -1 : 1;
+    };
+    const forwardRef = (checkType) => {
+      headerEl.value.checkDate(checkType);
+    };
+    onSmartMounted(scrollToView);
+    watch(
+      () => props.preview,
+      () => {
+        page.value = 0;
+      }
+    );
+    watch(
+      yearList,
+      (list) => {
+        const {
+          componentProps: { min, max }
+        } = props;
+        if (max)
+          panelBtnDisabled.right = !dayjs(`${toNumber(list[list.length - 1])}`).isSameOrBefore(dayjs(max), "year");
+        if (min) panelBtnDisabled.left = !dayjs(`${toNumber(list[0])}`).isSameOrAfter(dayjs(min), "year");
+        if (toNumber(list[0] <= 0)) panelBtnDisabled.left = false;
+      },
+      {
+        immediate: true
+      }
+    );
+    return {
+      n,
+      classes,
+      buttonProps,
+      panel,
+      headerEl,
+      yearList,
+      reverse,
+      panelKey,
+      panelBtnDisabled,
+      nDate,
+      checkDate,
+      chooseYear,
+      forwardRef,
+      toNumber
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/date-picker/style/index.mjs

@@ -0,0 +1,8 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../../ripple/ripple.css'
+import '../../button/button.css'
+import '../../sticky/sticky.css'
+import '../../icon/icon.css'
+import '../date-picker.css'
+import '../DatePickerSfc.css'

package/es/dialog/Dialog.mjs

@@ -0,0 +1,254 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import VarPopup from "../popup/index.mjs";
+import VarButton from "../button/index.mjs";
+import { props } from "./props.mjs";
+import { defineComponent, ref, watch } from "vue";
+import { t } from "../locale/index.mjs";
+import { createNamespace } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { call } from "@varlet/shared";
+import { injectLocaleProvider } from "../locale-provider/provide.mjs";
+const { name, n, classes } = createNamespace("dialog");
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_button = _resolveComponent("var-button");
+  const _component_var_popup = _resolveComponent("var-popup");
+  return _openBlock(), _createBlock(_component_var_popup, {
+    class: _normalizeClass(_ctx.n("popup")),
+    "var-dialog-cover": "",
+    show: _ctx.popupShow,
+    overlay: _ctx.overlay,
+    "overlay-class": _ctx.overlayClass,
+    "overlay-style": _ctx.overlayStyle,
+    "lock-scroll": _ctx.lockScroll,
+    "close-on-click-overlay": _ctx.popupCloseOnClickOverlay,
+    "close-on-key-escape": false,
+    teleport: _ctx.teleport,
+    onOpen: _ctx.onOpen,
+    onClose: _ctx.onClose,
+    onClosed: _ctx.onClosed,
+    onOpened: _ctx.onOpened,
+    onKeyEscape: _ctx.handleKeyEscape,
+    onRouteChange: _ctx.onRouteChange,
+    onClickOverlay: _ctx.handleClickOverlay
+  }, {
+    default: _withCtx(() => [
+      _createElementVNode(
+        "div",
+        _mergeProps({
+          class: _ctx.classes(_ctx.n("$--box"), _ctx.n(), _ctx.dialogClass),
+          style: __spreadValues({ width: _ctx.toSizeUnit(_ctx.width) }, _ctx.dialogStyle)
+        }, _ctx.$attrs),
+        [
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("title"))
+            },
+            [
+              _renderSlot(_ctx.$slots, "title", {}, () => {
+                var _a;
+                return [
+                  _createTextVNode(
+                    _toDisplayString((_a = _ctx.title) != null ? _a : (_ctx.pt ? _ctx.pt : _ctx.t)("dialogTitle")),
+                    1
+                    /* TEXT */
+                  )
+                ];
+              })
+            ],
+            2
+            /* CLASS */
+          ),
+          _createElementVNode(
+            "div",
+            {
+              class: _normalizeClass(_ctx.n("message")),
+              style: _normalizeStyle({ textAlign: _ctx.messageAlign })
+            },
+            [
+              _renderSlot(_ctx.$slots, "default", {}, () => [
+                _createTextVNode(
+                  _toDisplayString(_ctx.message),
+                  1
+                  /* TEXT */
+                )
+              ])
+            ],
+            6
+            /* CLASS, STYLE */
+          ),
+          _renderSlot(_ctx.$slots, "actions", {
+            slotClass: _ctx.n("actions"),
+            cancel: _ctx.cancel,
+            confirm: _ctx.confirm
+          }, () => [
+            _createElementVNode(
+              "div",
+              {
+                class: _normalizeClass(_ctx.n("actions"))
+              },
+              [
+                _ctx.cancelButton ? (_openBlock(), _createBlock(_component_var_button, {
+                  key: 0,
+                  class: _normalizeClass(_ctx.classes(_ctx.n("button"), _ctx.n("cancel-button"))),
+                  "var-dialog-cover": "",
+                  text: "",
+                  "text-color": _ctx.cancelButtonTextColor,
+                  color: _ctx.cancelButtonColor,
+                  onClick: _ctx.cancel
+                }, {
+                  default: _withCtx(() => {
+                    var _a;
+                    return [
+                      _createTextVNode(
+                        _toDisplayString((_a = _ctx.cancelButtonText) != null ? _a : (_ctx.pt ? _ctx.pt : _ctx.t)("dialogCancelButtonText")),
+                        1
+                        /* TEXT */
+                      )
+                    ];
+                  }),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["class", "text-color", "color", "onClick"])) : _createCommentVNode("v-if", true),
+                _ctx.confirmButton ? (_openBlock(), _createBlock(_component_var_button, {
+                  key: 1,
+                  class: _normalizeClass(_ctx.classes(_ctx.n("button"), _ctx.n("confirm-button"))),
+                  "var-dialog-cover": "",
+                  text: "",
+                  "text-color": _ctx.confirmButtonTextColor,
+                  color: _ctx.confirmButtonColor,
+                  onClick: _ctx.confirm
+                }, {
+                  default: _withCtx(() => {
+                    var _a;
+                    return [
+                      _createTextVNode(
+                        _toDisplayString((_a = _ctx.confirmButtonText) != null ? _a : (_ctx.pt ? _ctx.pt : _ctx.t)("dialogConfirmButtonText")),
+                        1
+                        /* TEXT */
+                      )
+                    ];
+                  }),
+                  _: 1
+                  /* STABLE */
+                }, 8, ["class", "text-color", "color", "onClick"])) : _createCommentVNode("v-if", true)
+              ],
+              2
+              /* CLASS */
+            )
+          ])
+        ],
+        16
+        /* FULL_PROPS */
+      )
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["class", "show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onKeyEscape", "onRouteChange", "onClickOverlay"]);
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarPopup,
+    VarButton
+  },
+  inheritAttrs: false,
+  props,
+  setup(props2) {
+    const popupShow = ref(false);
+    const popupCloseOnClickOverlay = ref(false);
+    const { t: pt } = injectLocaleProvider();
+    watch(
+      () => props2.show,
+      (newValue) => {
+        popupShow.value = newValue;
+      },
+      { immediate: true }
+    );
+    watch(
+      () => props2.closeOnClickOverlay,
+      (newValue) => {
+        if (props2.onBeforeClose != null) {
+          popupCloseOnClickOverlay.value = false;
+          return;
+        }
+        popupCloseOnClickOverlay.value = newValue;
+      },
+      { immediate: true }
+    );
+    function done() {
+      return call(props2["onUpdate:show"], false);
+    }
+    function handleClickOverlay() {
+      const { closeOnClickOverlay, onClickOverlay, onBeforeClose } = props2;
+      call(onClickOverlay);
+      if (!closeOnClickOverlay) {
+        return;
+      }
+      if (onBeforeClose != null) {
+        call(onBeforeClose, "close", done);
+        return;
+      }
+      call(props2["onUpdate:show"], false);
+    }
+    function confirm() {
+      const { onBeforeClose, onConfirm } = props2;
+      call(onConfirm);
+      if (onBeforeClose != null) {
+        call(onBeforeClose, "confirm", done);
+        return;
+      }
+      call(props2["onUpdate:show"], false);
+    }
+    function cancel() {
+      const { onBeforeClose, onCancel } = props2;
+      call(onCancel);
+      if (onBeforeClose != null) {
+        call(onBeforeClose, "cancel", done);
+        return;
+      }
+      call(props2["onUpdate:show"], false);
+    }
+    function handleKeyEscape() {
+      call(props2.onKeyEscape);
+      if (!props2.closeOnKeyEscape) {
+        return;
+      }
+      cancel();
+    }
+    return {
+      popupShow,
+      popupCloseOnClickOverlay,
+      pt,
+      t,
+      n,
+      classes,
+      handleClickOverlay,
+      confirm,
+      cancel,
+      toSizeUnit,
+      handleKeyEscape
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/dialog/dialog.css

@@ -0,0 +1 @@
+:root { --dialog-width: 280px; --dialog-border-radius: 3px; --dialog-title-padding: 20px 20px 0; --dialog-message-color: #888; --dialog-message-padding: 12px 20px; --dialog-message-line-height: 24px; --dialog-message-font-size: var(--font-size-md); --dialog-title-font-size: var(--font-size-lg); --dialog-actions-padding: 0 12px 12px; --dialog-button-margin-left: 6px; --dialog-title-color: #555; --dialog-confirm-button-color: var(--color-primary); --dialog-cancel-button-color: var(--color-primary); --dialog-background: var(--color-surface-container-low);}.var-dialog { width: var(--dialog-width); background: var(--dialog-background); transition: 0.25s background-color;}.var-dialog__popup[var-dialog-cover] { background: transparent; border-radius: var(--dialog-border-radius);}.var-dialog__title { font-size: var(--dialog-title-font-size); font-weight: 400; padding: var(--dialog-title-padding); color: var(--dialog-title-color);}.var-dialog__message { padding: var(--dialog-message-padding); color: var(--dialog-message-color); line-height: var(--dialog-message-line-height); font-size: var(--dialog-message-font-size); word-wrap: break-word;}.var-dialog__actions { display: flex; justify-content: flex-end; padding: var(--dialog-actions-padding);}.var-dialog__button[var-dialog-cover] { margin-left: var(--dialog-button-margin-left); background-color: transparent; box-shadow: none;}.var-dialog__button[var-dialog-cover]:active { box-shadow: none;}.var-dialog__confirm-button[var-dialog-cover] { color: var(--dialog-confirm-button-color);}.var-dialog__cancel-button[var-dialog-cover] { color: var(--dialog-cancel-button-color);}