@varlet/ui 2.21.0 → 2.22.0-alpha.1705845515578

package/es/index-bar/IndexBar.mjs

@@ -36,7 +36,7 @@ import { props } from "./props.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { onSmartMounted } from "@varlet/use";
 const { name, n, classes } = createNamespace("index-bar");
-import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
 const _hoisted_1 = ["onClick"];
 function __render__(_ctx, _cache) {
@@ -64,7 +64,15 @@ function __render__(_ctx, _cache) {
                 class: _normalizeClass(_ctx.classes(_ctx.n("anchor-item"), [_ctx.active === anchorName, _ctx.n("anchor-item--active")])),
                 style: _normalizeStyle({ color: _ctx.active === anchorName && _ctx.highlightColor ? _ctx.highlightColor : void 0 }),
                 onClick: ($event) => _ctx.anchorClick({ anchorName, manualCall: true })
-              }, _toDisplayString(anchorName), 15, _hoisted_1);
+              }, [
+                _renderSlot(_ctx.$slots, "anchor-name", { anchorName }, () => [
+                  _createTextVNode(
+                    _toDisplayString(anchorName),
+                    1
+                    /* TEXT */
+                  )
+                ])
+              ], 14, _hoisted_1);
             }),
             128
             /* KEYED_FRAGMENT */

package/es/index.bundle.mjs

@@ -262,7 +262,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '2.21.0'
+const version = '2.22.0-alpha.1705845515578'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -174,7 +174,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '2.21.0'
+const version = '2.22.0-alpha.1705845515578'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/locale/fa-IR.d.ts

@@ -0,0 +1,5 @@
+import type { Pack } from '../../types'
+
+declare const faIR: Pack
+
+export default faIR

package/es/locale/fa-IR.mjs

@@ -0,0 +1,108 @@
+var stdin_default = {
+  // Dialog
+  dialogTitle: "\u0627\u0634\u0627\u0631\u0647",
+  dialogConfirmButtonText: "\u062A\u0627\u06CC\u06CC\u062F",
+  dialogCancelButtonText: "\u0644\u063A\u0648",
+  // ActionSheet
+  actionSheetTitle: "\u0627\u0646\u062A\u062E\u0627\u0628 \u06CC\u06A9 \u0645\u0648\u0631\u062F",
+  // List
+  listLoadingText: "\u062F\u0631 \u062D\u0627\u0644 \u0628\u0627\u0631\u06AF\u0632\u0627\u0631\u06CC",
+  listFinishedText: "\u0645\u0648\u0631\u062F \u062F\u06CC\u06AF\u0631\u06CC \u0648\u062C\u0648\u062F \u0646\u062F\u0627\u0631\u062F",
+  listErrorText: "\u0628\u0627\u0631\u06AF\u0632\u0627\u0631\u06CC \u0646\u0627\u0645\u0648\u0641\u0642",
+  // Picker
+  pickerTitle: "\u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F",
+  pickerConfirmButtonText: "\u062A\u0627\u06CC\u06CC\u062F",
+  pickerCancelButtonText: "\u0644\u063A\u0648",
+  // date-picker
+  datePickerMonthDict: {
+    "01": {
+      name: "\u0698\u0627\u0646\u0648\u06CC\u0647",
+      abbr: "JAN"
+    },
+    "02": {
+      name: "\u0641\u0648\u0631\u06CC\u0647",
+      abbr: "FEB"
+    },
+    "03": {
+      name: "\u0645\u0627\u0631\u0633",
+      abbr: "MAR"
+    },
+    "04": {
+      name: "\u0622\u0648\u0631\u06CC\u0644",
+      abbr: "APR"
+    },
+    "05": {
+      name: "\u0645\u0647",
+      abbr: "MAY"
+    },
+    "06": {
+      name: "\u0698\u0648\u0626\u0646",
+      abbr: "JUN"
+    },
+    "07": {
+      name: "\u062C\u0648\u0644\u0627\u06CC",
+      abbr: "JUL"
+    },
+    "08": {
+      name: "\u0622\u06AF\u0648\u0633\u062A",
+      abbr: "AUG"
+    },
+    "09": {
+      name: "\u0633\u067E\u062A\u0627\u0645\u0628\u0631",
+      abbr: "SEP"
+    },
+    "10": {
+      name: "\u0627\u0648\u06A9\u062A\u0628\u0631",
+      abbr: "OCT"
+    },
+    "11": {
+      name: "\u0646\u0648\u0627\u0645\u0628\u0631",
+      abbr: "NOV"
+    },
+    "12": {
+      name: "\u062F\u0633\u0627\u0645\u0628\u0631",
+      abbr: "DEC"
+    }
+  },
+  datePickerWeekDict: {
+    "0": {
+      name: "\u06CC\u06A9\u0634\u0646\u0628\u0647",
+      abbr: "S"
+    },
+    "1": {
+      name: "\u062F\u0648\u0634\u0646\u0628\u0647",
+      abbr: "M"
+    },
+    "2": {
+      name: "\u0633\u0647\u200C\u0634\u0646\u0628\u0647",
+      abbr: "T"
+    },
+    "3": {
+      name: "\u0686\u0647\u0627\u0631\u0634\u0646\u0628\u0647",
+      abbr: "W"
+    },
+    "4": {
+      name: "\u067E\u0646\u062C\u0634\u0646\u0628\u0647",
+      abbr: "T"
+    },
+    "5": {
+      name: "\u062C\u0645\u0639\u0647",
+      abbr: "F"
+    },
+    "6": {
+      name: "\u0634\u0646\u0628\u0647",
+      abbr: "S"
+    }
+  },
+  datePickerSelected: " \u0627\u0646\u062A\u062E\u0627\u0628 \u0634\u062F\u0647",
+  datePickerHint: "\u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0627\u0631\u06CC\u062E",
+  // pagination
+  paginationItem: "",
+  paginationPage: "\u0635\u0641\u062D\u0647",
+  paginationJump: "\u0628\u0631\u0648 \u0628\u0647",
+  // time-picker
+  timePickerHint: "\u0627\u0646\u062A\u062E\u0627\u0628 \u0632\u0645\u0627\u0646"
+};
+export {
+  stdin_default as default
+};

package/es/locale/index.mjs

@@ -18,6 +18,7 @@ import zhCN from "./zh-CN.mjs";
 import enUS from "./en-US.mjs";
 import zhTW from "./zh-TW.mjs";
 import zhHK from "./zh-HK.mjs";
+import faIR from "./fa-IR.mjs";
 import { ref } from "vue";
 function useLocale() {
   const packs2 = {};
@@ -58,6 +59,7 @@ var stdin_default = {
   enUS,
   zhTW,
   zhHK,
+  faIR,
   packs,
   pack,
   add,

package/es/picker/Picker.mjs

@@ -232,18 +232,9 @@ const __sfc__ = defineComponent({
     const columnHeight = computed(() => optionCount.value * optionHeight.value);
     const { prevY, moveY, dragging, startTouch, moveTouch, endTouch } = useTouch();
     let prevIndexes = [];
-    buildScrollColumns();
-    watch(() => props2.columns, buildScrollColumns, { deep: true });
-    watch(
-      () => modelValue.value,
-      () => {
-        if (props2.cascade && props2.modelValue.length) {
-          buildScrollColumns();
-        } else {
-          updateScrollColumnsIndex();
-        }
-      }
-    );
+    initScrollColumns();
+    watch(() => props2.columns, initScrollColumns, { deep: true });
+    watch(() => modelValue.value, initScrollColumns);
     function getOptionKey(key) {
       const keyMap = {
         text: props2.textKey,
@@ -260,7 +251,7 @@ const __sfc__ = defineComponent({
       prevIndexes = [...indexes];
     }
     function normalizeNormalMode(columns) {
-      return columns.map((column) => {
+      return columns.map((column, idx) => {
         const scrollColumn = {
           id: sid++,
           prevY: 0,
@@ -274,6 +265,9 @@ const __sfc__ = defineComponent({
           scrollEl: null,
           scrolling: false
         };
+        const value = modelValue.value[idx];
+        const index = scrollColumn.column.findIndex((option) => value === getValue(option));
+        scrollColumn.index = index === -1 ? 0 : index;
         scrollTo(scrollColumn);
         return scrollColumn;
       });
@@ -283,7 +277,7 @@ const __sfc__ = defineComponent({
       createChildren(scrollColumns2, column);
       return scrollColumns2;
     }
-    function createChildren(scrollColumns2, children) {
+    function createChildren(scrollColumns2, children, syncModelValue = true) {
       var _a;
       if (children.length) {
         const scrollColumn = {
@@ -300,31 +294,30 @@ const __sfc__ = defineComponent({
           scrolling: false
         };
         scrollColumns2.push(scrollColumn);
-        if (props2.modelValue.length) {
-          const index = children.findIndex((option) => modelValue.value[scrollColumns2.length - 1] === getValue(option));
+        if (syncModelValue) {
+          const value = modelValue.value[scrollColumns2.length - 1];
+          const index = children.findIndex((option) => value === getValue(option));
           scrollColumn.index = index === -1 ? 0 : index;
         }
         scrollTo(scrollColumn);
-        createChildren(scrollColumns2, (_a = scrollColumn.column[scrollColumn.index][getOptionKey("children")]) != null ? _a : []);
+        createChildren(
+          scrollColumns2,
+          (_a = scrollColumn.column[scrollColumn.index][getOptionKey("children")]) != null ? _a : [],
+          syncModelValue
+        );
       }
     }
     function rebuildChildren(scrollColumn) {
       var _a;
       scrollColumns.value.splice(scrollColumns.value.indexOf(scrollColumn) + 1);
-      createChildren(scrollColumns.value, (_a = scrollColumn.column[scrollColumn.index][getOptionKey("children")]) != null ? _a : []);
+      createChildren(
+        scrollColumns.value,
+        (_a = scrollColumn.column[scrollColumn.index][getOptionKey("children")]) != null ? _a : [],
+        false
+      );
     }
-    function buildScrollColumns() {
+    function initScrollColumns() {
       scrollColumns.value = props2.cascade ? normalizeCascadeMode(props2.columns) : normalizeNormalMode(props2.columns);
-      if (!props2.cascade) {
-        updateScrollColumnsIndex();
-      }
-    }
-    function updateScrollColumnsIndex() {
-      scrollColumns.value.forEach((scrollColumn, idx) => {
-        const index = scrollColumn.column.findIndex((option) => modelValue.value[idx] === getValue(option));
-        scrollColumn.index = index === -1 ? 0 : index;
-        scrollTo(scrollColumn);
-      });
       const { indexes } = getPicked();
       setPrevIndexes(indexes);
     }
@@ -413,23 +406,23 @@ const __sfc__ = defineComponent({
       scrollTo(scrollColumn, shouldMomentum ? MOMENTUM_TRANSITION_DURATION : TRANSITION_DURATION);
       scrollColumn.scrolling = scrollColumn.translate !== oldTranslate;
       if (!scrollColumn.scrolling) {
-        change(scrollColumn);
+        handleScrollColumnChange(scrollColumn);
       }
     }
     function handleTransitionend(scrollColumn) {
       scrollColumn.scrolling = false;
-      change(scrollColumn);
+      handleScrollColumnChange(scrollColumn);
     }
     function isSamePicked() {
       const { indexes } = getPicked();
       return indexes.every((index, idx) => index === prevIndexes[idx]);
     }
-    function change(scrollColumn) {
-      const { cascade, onChange } = props2;
+    function handleScrollColumnChange(scrollColumn) {
+      const { onChange, cascade } = props2;
       if (isSamePicked()) {
         return;
       }
-      if (cascade && !props2.modelValue.length) {
+      if (cascade) {
         rebuildChildren(scrollColumn);
       }
       const hasScrolling = scrollColumns.value.some((scrollColumn2) => scrollColumn2.scrolling);

package/es/popup/Popup.mjs

@@ -95,7 +95,7 @@ var stdin_default = defineComponent({
         "onAfterLeave": props2.onClosed
       }, {
         default: () => [_withDirectives(_createVNode("div", {
-          "class": classes(n("$--box"), n()),
+          "class": classes(n("$--box"), n(), [!props2.overlay, n("--pointer-events-none")]),
           "style": {
             zIndex: zIndex.value - 2
           }

package/es/popup/popup.css

@@ -1 +1 @@
-:root { --popup-content-background-color: #fff; --popup-overlay-background-color: rgba(0, 0, 0, 0.6);}.var-fade-enter-from,.var-fade-leave-to { opacity: 0;}.var-fade-enter-active,.var-fade-leave-active { transition: opacity 0.25s;}.var-pop-center-enter-from,.var-pop-center-leave-to { transform: scale(0.3);}.var-pop-center-enter-active,.var-pop-center-leave-active { transition: all 0.25s;}.var-pop-bottom-enter-from,.var-pop-bottom-leave-to { transform: translateY(100%);}.var-pop-bottom-enter-active,.var-pop-bottom-leave-active { transition: all 0.25s;}.var-pop-top-enter-from,.var-pop-top-leave-to { transform: translateY(-100%);}.var-pop-top-enter-active,.var-pop-top-leave-active { transition: all 0.25s;}.var-pop-left-enter-from,.var-pop-left-leave-to { transform: translateX(-100%);}.var-pop-left-enter-active,.var-pop-left-leave-active { transition: all 0.25s;}.var-pop-right-enter-from,.var-pop-right-leave-to { transform: translateX(100%);}.var-pop-right-enter-active,.var-pop-right-leave-active { transition: all 0.25s;}.var-popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto;}.var-popup__overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--popup-overlay-background-color); transition: all 0.25s;}.var-popup__content { overflow: auto; transition: all 0.25s;}.var-popup--content-background-color { background-color: var(--popup-content-background-color);}.var-popup--center { position: relative;}.var-popup--bottom { width: 100%; position: absolute; left: 0; bottom: 0;}.var-popup--top { width: 100%; position: absolute; left: 0; top: 0;}.var-popup--left { height: 100%; position: absolute; left: 0; top: 0;}.var-popup--right { height: 100%; position: absolute; right: 0; top: 0;}.var-popup--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}.var-popup--safe-area-top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);}
+:root { --popup-content-background-color: #fff; --popup-overlay-background-color: rgba(0, 0, 0, 0.6);}.var-fade-enter-from,.var-fade-leave-to { opacity: 0;}.var-fade-enter-active,.var-fade-leave-active { transition: opacity 0.25s;}.var-pop-center-enter-from,.var-pop-center-leave-to { transform: scale(0.3);}.var-pop-center-enter-active,.var-pop-center-leave-active { transition: all 0.25s;}.var-pop-bottom-enter-from,.var-pop-bottom-leave-to { transform: translateY(100%);}.var-pop-bottom-enter-active,.var-pop-bottom-leave-active { transition: all 0.25s;}.var-pop-top-enter-from,.var-pop-top-leave-to { transform: translateY(-100%);}.var-pop-top-enter-active,.var-pop-top-leave-active { transition: all 0.25s;}.var-pop-left-enter-from,.var-pop-left-leave-to { transform: translateX(-100%);}.var-pop-left-enter-active,.var-pop-left-leave-active { transition: all 0.25s;}.var-pop-right-enter-from,.var-pop-right-leave-to { transform: translateX(100%);}.var-pop-right-enter-active,.var-pop-right-leave-active { transition: all 0.25s;}.var-popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto;}.var-popup__overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--popup-overlay-background-color); transition: all 0.25s;}.var-popup__content { overflow: auto; transition: all 0.25s; pointer-events: auto;}.var-popup--content-background-color { background-color: var(--popup-content-background-color);}.var-popup--center { position: relative;}.var-popup--bottom { width: 100%; position: absolute; left: 0; bottom: 0;}.var-popup--top { width: 100%; position: absolute; left: 0; top: 0;}.var-popup--left { height: 100%; position: absolute; left: 0; top: 0;}.var-popup--right { height: 100%; position: absolute; right: 0; top: 0;}.var-popup--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}.var-popup--safe-area-top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);}.var-popup--pointer-events-none { pointer-events: none;}

package/es/snackbar/Snackbar.mjs

@@ -3,7 +3,7 @@ import { defineComponent } from "vue";
 import { createNamespace, useTeleport } from "../utils/components.mjs";
 import { props } from "./props.mjs";
 const { name, n } = createNamespace("snackbar");
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, mergeProps as _mergeProps, withCtx as _withCtx, createVNode as _createVNode, Transition as _Transition, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, mergeProps as _mergeProps, withCtx as _withCtx, createSlots as _createSlots, createVNode as _createVNode, Transition as _Transition, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 function __render__(_ctx, _cache) {
   const _component_var_snackbar_core = _resolveComponent("var-snackbar-core");
   return _openBlock(), _createBlock(_Teleport, {
@@ -18,25 +18,28 @@ function __render__(_ctx, _cache) {
       default: _withCtx(() => [
         _createVNode(_component_var_snackbar_core, _mergeProps(_ctx.$props, {
           class: _ctx.n("transition")
-        }), {
-          icon: _withCtx(() => [
-            _renderSlot(_ctx.$slots, "icon")
-          ]),
-          action: _withCtx(() => [
-            _renderSlot(_ctx.$slots, "action")
-          ]),
+        }), _createSlots({
           default: _withCtx(() => [
-            _renderSlot(_ctx.$slots, "default", {}, () => [
-              _createTextVNode(
-                _toDisplayString(_ctx.content),
-                1
-                /* TEXT */
-              )
-            ])
+            _renderSlot(_ctx.$slots, "default")
           ]),
-          _: 3
-          /* FORWARDED */
-        }, 16, ["class"])
+          _: 2
+          /* DYNAMIC */
+        }, [
+          _ctx.$slots.icon ? {
+            name: "icon",
+            fn: _withCtx(() => [
+              _renderSlot(_ctx.$slots, "icon")
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.$slots.action ? {
+            name: "action",
+            fn: _withCtx(() => [
+              _renderSlot(_ctx.$slots, "action")
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1040, ["class"])
       ]),
       _: 3
       /* FORWARDED */

package/es/snackbar/core.mjs

@@ -59,10 +59,11 @@ function __render__(_ctx, _cache) {
             2
             /* CLASS */
           ),
-          _createElementVNode(
+          _ctx.iconName || _ctx.type === "loading" || _ctx.$slots.icon ? (_openBlock(), _createElementBlock(
             "div",
             {
-              class: _normalizeClass([_ctx.n("icon")])
+              key: 0,
+              class: _normalizeClass(_ctx.n("icon"))
             },
             [
               _ctx.iconName ? (_openBlock(), _createBlock(_component_var_icon, {
@@ -80,11 +81,11 @@ function __render__(_ctx, _cache) {
             ],
             2
             /* CLASS */
-          ),
+          )) : _createCommentVNode("v-if", true),
           _ctx.$slots.action ? (_openBlock(), _createElementBlock(
             "div",
             {
-              key: 0,
+              key: 1,
               class: _normalizeClass(_ctx.n("action"))
             },
             [
@@ -118,24 +119,25 @@ const __sfc__ = defineComponent({
       () => props2.show,
       () => props2.lockScroll
     );
-    const isForbidClick = computed(() => props2.type === "loading" || props2.forbidClick);
-    const iconName = computed(() => {
-      if (!props2.type)
-        return "";
-      return ICON_TYPE_DICT[props2.type];
+    const isForbidClick = computed(() => {
+      const { type, forbidClick } = props2;
+      return type === "loading" || forbidClick;
     });
-    const updateAfterDuration = () => {
+    const iconName = computed(() => !props2.type ? "" : ICON_TYPE_DICT[props2.type]);
+    function updateAfterDuration() {
       timer.value = setTimeout(() => {
-        props2.type !== "loading" && call(props2["onUpdate:show"], false);
+        if (props2.type !== "loading") {
+          call(props2["onUpdate:show"], false);
+        }
       }, props2.duration);
-    };
+    }
     watch(
       () => props2.show,
       (show) => {
         if (show) {
           call(props2.onOpen);
           updateAfterDuration();
-        } else if (show === false) {
+        } else {
           clearTimeout(timer.value);
           call(props2.onClose);
         }
@@ -156,11 +158,11 @@ const __sfc__ = defineComponent({
     });
     return {
       SNACKBAR_TYPE,
-      n,
-      classes,
       zIndex,
       iconName,
-      isForbidClick
+      isForbidClick,
+      n,
+      classes
     };
   }
 });

package/es/snackbar/props.mjs

@@ -25,9 +25,7 @@ const props = {
     type: String,
     default: "top"
   },
-  content: {
-    type: [String, Function, Object]
-  },
+  content: [String, Function, Object],
   contentClass: String,
   duration: {
     type: Number,

package/es/snackbar/snackbar.css

@@ -1 +1 @@
-:root { --snackbar-width: 256px; --snackbar-color: rgba(255, 255, 255, 0.87); --snackbar-border-radius: 4px; --snackbar-background: #333; --snackbar-font-size: var(--font-size-md); --snackbar-margin: 6px 24px; --snackbar-border-color: currentColor; --snackbar-success-background: var(--color-success); --snackbar-info-background: var(--color-info); --snackbar-error-background: var(--color-danger); --snackbar-warning-background: var(--color-warning); --snackbar-content-padding: 14px 16px; --snackbar-action-margin: 0 8px 0; --snackbar-vertical-action-margin: 0 8px 8px 0;}.var-transition-group { position: fixed; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;}.var-pointer-auto { pointer-events: auto;}.var-snackbar { display: flex; justify-content: center; align-items: baseline; left: 0; right: 0; bottom: 0; transition: all 0.15s var(--cubic-bezier);}.var-snackbar__transition { top: 0; position: fixed;}.var-snackbar__transition .var-snackbar__wrapper { position: absolute;}.var-snackbar__transition .var-snackbar__wrapper-top { top: 5%;}.var-snackbar__transition .var-snackbar__wrapper-center { top: 45%;}.var-snackbar__transition .var-snackbar__wrapper-bottom { bottom: 5%;}.var-snackbar__wrapper { width: var(--snackbar-width); display: flex; border-radius: var(--snackbar-border-radius); color: var(--snackbar-color); background: var(--snackbar-background); font-size: var(--snackbar-font-size); margin: var(--snackbar-margin); align-items: center; border-color: var(--snackbar-border-color); pointer-events: auto; transition: 0.3s var(--cubic-bezier);}.var-snackbar__wrapper-success { background: var(--snackbar-success-background);}.var-snackbar__wrapper-info { background: var(--snackbar-info-background);}.var-snackbar__wrapper-warning { background: var(--snackbar-warning-background);}.var-snackbar__wrapper-error { background: var(--snackbar-error-background);}.var-snackbar__content { flex-grow: 1; padding: var(--snackbar-content-padding);}.var-snackbar__action { margin: var(--snackbar-action-margin); display: flex;}.var-snackbar__vertical { flex-direction: column; align-items: flex-start;}.var-snackbar__vertical .var-snackbar__action { align-self: flex-end; margin: var(--snackbar-vertical-action-margin);}.var-snackbar-fade-enter-from,.var-snackbar-fade-leave-to { opacity: 0; transform: translateY(-30px);}
+:root { --snackbar-width: 256px; --snackbar-color: rgba(255, 255, 255, 0.87); --snackbar-border-radius: 4px; --snackbar-background: #333; --snackbar-font-size: var(--font-size-md); --snackbar-margin: 6px 24px; --snackbar-border-color: currentColor; --snackbar-success-background: var(--color-success); --snackbar-info-background: var(--color-info); --snackbar-error-background: var(--color-danger); --snackbar-warning-background: var(--color-warning); --snackbar-content-padding: 14px 16px; --snackbar-action-margin: 0 8px; --snackbar-vertical-action-margin: 0 8px 8px 0; --snackbar-icon-margin: 0 8px;}.var-transition-group { position: fixed; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;}.var-pointer-auto { pointer-events: auto;}.var-snackbar { display: flex; justify-content: center; align-items: baseline; left: 0; right: 0; bottom: 0; transition: all 0.15s var(--cubic-bezier);}.var-snackbar__transition { top: 0; position: fixed;}.var-snackbar__transition .var-snackbar__wrapper { position: absolute;}.var-snackbar__transition .var-snackbar__wrapper-top { top: 5%;}.var-snackbar__transition .var-snackbar__wrapper-center { top: 45%;}.var-snackbar__transition .var-snackbar__wrapper-bottom { bottom: 5%;}.var-snackbar__wrapper { width: var(--snackbar-width); display: flex; border-radius: var(--snackbar-border-radius); color: var(--snackbar-color); background: var(--snackbar-background); font-size: var(--snackbar-font-size); margin: var(--snackbar-margin); align-items: center; border-color: var(--snackbar-border-color); pointer-events: auto; transition: 0.3s var(--cubic-bezier);}.var-snackbar__wrapper-success { background: var(--snackbar-success-background);}.var-snackbar__wrapper-info { background: var(--snackbar-info-background);}.var-snackbar__wrapper-warning { background: var(--snackbar-warning-background);}.var-snackbar__wrapper-error { background: var(--snackbar-error-background);}.var-snackbar__icon { margin: var(--snackbar-icon-margin);}.var-snackbar__content { flex-grow: 1; padding: var(--snackbar-content-padding);}.var-snackbar__action { margin: var(--snackbar-action-margin); display: flex;}.var-snackbar__vertical { flex-direction: column; align-items: flex-start;}.var-snackbar__vertical .var-snackbar__action { align-self: flex-end; margin: var(--snackbar-vertical-action-margin);}.var-snackbar-fade-enter-from,.var-snackbar-fade-leave-to { opacity: 0; transform: translateY(-30px);}

package/es/snackbar/style/index.mjs

@@ -1,8 +1,7 @@
 import '../../styles/common.css'
+import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
-import '../../button/button.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
-import '../SnackbarSfc.css'