@varlet/ui 3.3.6 → 3.3.7-alpha.1721326819975

package/lib/varlet.cjs.js

@@ -711,7 +711,9 @@ function mount$1(component) {
     instance: app.mount(host),
     unmount() {
       app.unmount();
-      document.body.removeChild(host);
+      if (host.parentNode) {
+        document.body.removeChild(host);
+      }
     }
   };
 }
@@ -836,7 +838,7 @@ var __spreadValues$v = (a, b) => {
   return a;
 };
 var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
-const { n: n$1q } = createNamespace("ripple");
+const { n: n$1r } = createNamespace("ripple");
 const ANIMATION_DURATION$1 = 250;
 function setStyles(element) {
   const { zIndex, position } = getStyle$1(element);
@@ -872,7 +874,7 @@ function createRipple(event) {
     _ripple.tasker = null;
     const { x, y, centerX, centerY, size } = computeRippleStyles(this, event);
     const ripple = document.createElement("div");
-    ripple.classList.add(n$1q());
+    ripple.classList.add(n$1r());
     ripple.style.opacity = `0`;
     ripple.style.transform = `translate(${x}px, ${y}px) scale3d(.3, .3, .3)`;
     ripple.style.width = `${size}px`;
@@ -891,7 +893,7 @@ function createRipple(event) {
 function removeRipple() {
   const _ripple = this._ripple;
   const task = () => {
-    const ripples = this.querySelectorAll(`.${n$1q()}`);
+    const ripples = this.querySelectorAll(`.${n$1r()}`);
     if (!ripples.length) {
       return;
     }
@@ -1027,9 +1029,10 @@ const props$1h = {
   // internal for Dialog
   onRouteChange: defineListenerProp()
 };
+const { n: n$1q } = createNamespace("");
 function resolveLock() {
   const lockCounts = Object.keys(stdin_default$5X.locks).length;
-  lockCounts <= 0 ? document.body.classList.remove("var--lock") : document.body.classList.add("var--lock");
+  lockCounts <= 0 ? document.body.classList.remove(n$1q("$--lock")) : document.body.classList.add(n$1q("$--lock"));
 }
 function addLock(uid) {
   stdin_default$5X.locks[uid] = 1;
@@ -4637,6 +4640,18 @@ function __render__$17(_ctx, _cache) {
                   /* TEXT, CLASS */
                 )) : vue.createCommentVNode("v-if", true)
               ]),
+              _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock(
+                "div",
+                {
+                  key: 0,
+                  class: vue.normalizeClass(_ctx.n("content"))
+                },
+                [
+                  vue.renderSlot(_ctx.$slots, "default")
+                ],
+                2
+                /* CLASS */
+              )) : vue.createCommentVNode("v-if", true),
               vue.renderSlot(_ctx.$slots, "subtitle", {
                 slotClass: _ctx.n("subtitle")
               }, () => [
@@ -4668,7 +4683,7 @@ function __render__$17(_ctx, _cache) {
               _ctx.$slots.extra ? (vue.openBlock(), vue.createElementBlock(
                 "div",
                 {
-                  key: 0,
+                  key: 1,
                   class: vue.normalizeClass(_ctx.n("footer"))
                 },
                 [
@@ -4680,7 +4695,7 @@ function __render__$17(_ctx, _cache) {
               _ctx.$slots["floating-content"] && !_ctx.isRow ? (vue.openBlock(), vue.createElementBlock(
                 "div",
                 {
-                  key: 1,
+                  key: 2,
                   class: vue.normalizeClass(_ctx.n("floating-content")),
                   style: vue.normalizeStyle({
                     height: _ctx.contentHeight,
@@ -17800,12 +17815,15 @@ const props$u = {
   ripple: {
     type: Boolean,
     default: true
-  }
+  },
+  // internal
+  option: Object
 };
 const { name: name$u, n: n$x, classes: classes$r } = createNamespace("menu-option");
 const _hoisted_1$h = ["tabindex"];
 function __render__$z(_ctx, _cache) {
   const _component_var_checkbox = vue.resolveComponent("var-checkbox");
+  const _component_maybe_v_node = vue.resolveComponent("maybe-v-node");
   const _component_var_hover_overlay = vue.resolveComponent("var-hover-overlay");
   const _directive_ripple = vue.resolveDirective("ripple");
   const _directive_hover = vue.resolveDirective("hover");
@@ -17844,9 +17862,11 @@ function __render__$z(_ctx, _cache) {
         {
           class: vue.normalizeClass(_ctx.classes(_ctx.n("text"), _ctx.n("$--ellipsis")))
         },
-        vue.toDisplayString(_ctx.label),
-        3
-        /* TEXT, CLASS */
+        [
+          vue.createVNode(_component_maybe_v_node, { is: _ctx.labelVNode }, null, 8, ["is"])
+        ],
+        2
+        /* CLASS */
       )
     ]),
     vue.createVNode(_component_var_hover_overlay, {
@@ -17863,7 +17883,8 @@ const __sfc__$A = vue.defineComponent({
   directives: { Ripple: stdin_default$5W, Hover: stdin_default$5P },
   components: {
     VarCheckbox: stdin_default$59,
-    VarHoverOverlay: stdin_default$5Q
+    VarHoverOverlay: stdin_default$5Q,
+    MaybeVNode
   },
   props: props$u,
   setup(props2) {
@@ -17871,13 +17892,26 @@ const __sfc__$A = vue.defineComponent({
     const isFocusing = vue.ref(false);
     const optionSelected = vue.ref(false);
     const selected = vue.computed(() => optionSelected.value);
-    const label = vue.computed(() => props2.label);
+    const labelVNode = vue.computed(
+      () => {
+        var _a;
+        return isFunction(props2.label) ? props2.label(
+          (_a = props2.option) != null ? _a : {
+            label: props2.label,
+            value: props2.value,
+            disabled: props2.disabled,
+            ripple: props2.ripple
+          },
+          optionSelected.value
+        ) : props2.label;
+      }
+    );
     const value = vue.computed(() => props2.value);
     const { menuSelect, bindMenuSelect } = useMenuSelect();
     const { size, multiple, onSelect, computeLabel } = menuSelect;
     const { hovering, handleHovering } = useHoverOverlay();
     const menuOptionProvider = {
-      label,
+      label: labelVNode,
       value,
       selected,
       sync
@@ -17928,6 +17962,7 @@ const __sfc__$A = vue.defineComponent({
       multiple,
       hovering,
       isFocusing,
+      labelVNode,
       n: n$x,
       classes: classes$r,
       handleHovering,
@@ -17963,6 +17998,15 @@ const props$t = __spreadValues$8({
     type: [String, Number, Boolean, Array],
     default: void 0
   },
+  options: Array,
+  labelKey: {
+    type: String,
+    default: "label"
+  },
+  valueKey: {
+    type: String,
+    default: "value"
+  },
   size: {
     type: String,
     default: "normal"
@@ -18057,6 +18101,7 @@ function useSelectController(options) {
 }
 const { name: name$t, n: n$w, classes: classes$q } = createNamespace("menu-select");
 function __render__$y(_ctx, _cache) {
+  const _component_var_menu_option = vue.resolveComponent("var-menu-option");
   const _component_var_menu = vue.resolveComponent("var-menu");
   return vue.openBlock(), vue.createBlock(_component_var_menu, {
     ref: "menu",
@@ -18092,6 +18137,22 @@ function __render__$y(_ctx, _cache) {
           class: vue.normalizeClass(_ctx.classes(_ctx.n("menu"), _ctx.formatElevation(_ctx.elevation, 3), [_ctx.scrollable, _ctx.n("--scrollable")]))
         },
         [
+          _ctx.menuSelectOptions.length ? (vue.openBlock(true), vue.createElementBlock(
+            vue.Fragment,
+            { key: 0 },
+            vue.renderList(_ctx.menuSelectOptions, (option) => {
+              return vue.openBlock(), vue.createBlock(_component_var_menu_option, {
+                key: option[_ctx.valueKey],
+                label: option[_ctx.labelKey],
+                value: option[_ctx.valueKey],
+                option,
+                ripple: option.ripple,
+                disabled: option.disabled
+              }, null, 8, ["label", "value", "option", "ripple", "disabled"]);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          )) : vue.createCommentVNode("v-if", true),
           vue.renderSlot(_ctx.$slots, "options")
         ],
         2
@@ -18107,12 +18168,13 @@ function __render__$y(_ctx, _cache) {
 }
 const __sfc__$z = vue.defineComponent({
   name: name$t,
-  components: { VarMenu: stdin_default$47 },
+  components: { VarMenu: stdin_default$47, VarMenuOption: stdin_default$45 },
   props: props$t,
   setup(props2) {
     const menu = vue.ref(null);
     const menuOptionsRef = vue.ref(null);
     const show = useVModel(props2, "show");
+    const menuSelectOptions = vue.computed(() => isArray(props2.options) ? props2.options : []);
     const { menuOptions, length, bindMenuOptions } = useMenuOptions();
     const { computeLabel, getSelectedValue } = useSelectController({
       modelValue: () => props2.modelValue,
@@ -18169,6 +18231,7 @@ const __sfc__$z = vue.defineComponent({
       show,
       menu,
       menuOptionsRef,
+      menuSelectOptions,
       n: n$w,
       classes: classes$q,
       formatElevation,
@@ -24479,6 +24542,11 @@ var stdin_default$34 = {
   "--card-title-padding": "0 12px",
   "--card-title-margin": "15px 0 0 0",
   "--card-title-row-margin": "12px 0",
+  "--card-content-padding": "0 16px",
+  "--card-content-margin": "16px 0 0 0",
+  "--card-content-color": "var(--color-on-surface-variant)",
+  "--card-content-font-size": "14px",
+  "--card-content-row-margin": "16px 0 0 0",
   "--card-subtitle-font-size": "14px",
   "--card-subtitle-padding": "0 12px",
   "--card-subtitle-margin": "10px 0 0 0",
@@ -25297,37 +25365,68 @@ var stdin_default$28 = __spreadValues$3(__spreadValues$3(__spreadValues$3(__spre
   "--icon-size-sm": "18px",
   "--icon-size-md": "20px",
   "--icon-size-lg": "22px",
-  "--color-body": "#1e1e1e",
-  "--color-text": "#fff",
-  "--color-primary": "#4a7afe",
-  "--color-info": "#10afef",
-  "--color-success": "#10c48f",
-  "--color-warning": "#ff8800",
-  "--color-danger": "#ef5350",
-  "--color-on-primary": "#fff",
-  "--color-on-info": "#fff",
-  "--color-on-success": "#fff",
-  "--color-on-warning": "#fff",
-  "--color-on-danger": "#fff",
-  "--color-primary-container": "#4a7afe",
-  "--color-info-container": "#10afef",
-  "--color-success-container": "#10c48f",
-  "--color-warning-container": "#ff8800",
-  "--color-danger-container": "#ef5350",
-  "--color-on-primary-container": "#fff",
-  "--color-on-info-container": "#fff",
-  "--color-on-success-container": "#fff",
-  "--color-on-warning-container": "#fff",
-  "--color-on-danger-container": "#fff",
-  "--color-disabled": "#404040",
-  "--color-text-disabled": "#757575",
-  "--color-surface-container": "#1e1e1e",
-  "--color-surface-container-low": "#1e1e1e",
-  "--color-surface-container-high": "#272727",
-  "--color-surface-container-highest": "#303030",
-  "--color-inverse-surface": "#fff",
-  "--color-outline": "rgba(255, 255, 255, 0.2)",
-  "--color-on-surface-variant": "#fff",
+  "--hsl-body": "0, 0%, 12%",
+  "--color-body": "hsla(var(--hsl-body), 1)",
+  "--hsl-text": "0, 0%, 100%",
+  "--color-text": "hsla(var(--hsl-text), 1)",
+  "--hsl-primary": "224, 99%, 64%",
+  "--color-primary": "hsla(var(--hsl-primary), 1)",
+  "--hsl-info": "197, 87%, 50%",
+  "--color-info": "hsla(var(--hsl-info), 1)",
+  "--hsl-success": "162, 85%, 42%",
+  "--color-success": "hsla(var(--hsl-success), 1)",
+  "--hsl-warning": "32, 100%, 50%",
+  "--color-warning": "hsla(var(--hsl-warning), 1)",
+  "--hsl-danger": "1, 83%, 63%",
+  "--color-danger": "hsla(var(--hsl-danger), 1)",
+  "--hsl-on-primary": "0, 0%, 100%",
+  "--color-on-primary": "hsla(var(--hsl-on-primary), 1)",
+  "--hsl-on-info": "0, 0%, 100%",
+  "--color-on-info": "hsla(var(--hsl-on-info), 1)",
+  "--hsl-on-success": "0, 0%, 100%",
+  "--color-on-success": "hsla(var(--hsl-on-success), 1)",
+  "--hsl-on-warning": "0, 0%, 100%",
+  "--color-on-warning": "hsla(var(--hsl-on-warning), 1)",
+  "--hsl-on-danger": "0, 0%, 100%",
+  "--color-on-danger": "hsla(var(--hsl-on-danger), 1)",
+  "--hsl-primary-container": "224, 99%, 64%",
+  "--color-primary-container": "hsla(var(--hsl-primary-container), 1)",
+  "--hsl-info-container": "197, 87%, 50%",
+  "--color-info-container": "hsla(var(--hsl-info-container), 1)",
+  "--hsl-success-container": "162, 85%, 42%",
+  "--color-success-container": "hsla(var(--hsl-success-container), 1)",
+  "--hsl-warning-container": "32, 100%, 50%",
+  "--color-warning-container": "hsla(var(--hsl-warning-container), 1)",
+  "--hsl-danger-container": "1, 83%, 63%",
+  "--color-danger-container": "hsla(var(--hsl-danger-container), 1)",
+  "--hsl-on-primary-container": "0, 0%, 100%",
+  "--color-on-primary-container": "hsla(var(--hsl-on-primary-container), 1)",
+  "--hsl-on-info-container": "0, 0%, 100%",
+  "--color-on-info-container": "hsla(var(--hsl-on-info-container), 1)",
+  "--hsl-on-success-container": "0, 0%, 100%",
+  "--color-on-success-container": "hsla(var(--hsl-on-success-container), 1)",
+  "--hsl-on-warning-container": "0, 0%, 100%",
+  "--color-on-warning-container": "hsla(var(--hsl-on-warning-container), 1)",
+  "--hsl-on-danger-container": "0, 0%, 100%",
+  "--color-on-danger-container": "hsla(var(--hsl-on-danger-container), 1)",
+  "--hsl-disabled": "0, 0%, 25%",
+  "--color-disabled": "hsla(var(--hsl-disabled), 1)",
+  "--hsl-text-disabled": "0, 0%, 46%",
+  "--color-text-disabled": "hsla(var(--hsl-text-disabled), 1)",
+  "--hsl-surface-container": "0, 0%, 12%",
+  "--color-surface-container": "hsla(var(--hsl-surface-container), 1)",
+  "--hsl-surface-container-low": "0, 0%, 12%",
+  "--color-surface-container-low": "hsla(var(--hsl-surface-container-low), 1)",
+  "--hsl-surface-container-high": "0, 0%, 15%",
+  "--color-surface-container-high": "hsla(var(--hsl-surface-container-high), 1)",
+  "--hsl-surface-container-highest": "0, 0%, 19%",
+  "--color-surface-container-highest": "hsla(var(--hsl-surface-container-highest), 1)",
+  "--hsl-inverse-surface": "0, 0%, 100%",
+  "--color-inverse-surface": "hsla(var(--hsl-inverse-surface), 1)",
+  "--hsl-outline": "0, 0%, 100%",
+  "--color-outline": "hsla(var(--hsl-outline), 0.2)",
+  "--hsl-on-surface-variant": "0, 0%, 100%",
+  "--color-on-surface-variant": "hsla(var(--hsl-on-surface-variant), 1)",
   "--opacity-disabled": "0.6",
   "--opacity-hover": "0.15",
   "--opacity-focus": "0.2",
@@ -25522,6 +25621,11 @@ var stdin_default$1V = {
   "--card-title-font-size": "16px",
   "--card-title-padding": "0 16px",
   "--card-title-margin": "16px 0 0 0",
+  "--card-content-padding": "0 16px",
+  "--card-content-margin": "16px 0 0 0",
+  "--card-content-color": "var(--color-on-surface-variant)",
+  "--card-content-font-size": "14px",
+  "--card-content-row-margin": "16px 0 0 0",
   "--card-subtitle-color": "var(--color-on-surface-variant)",
   "--card-subtitle-padding": "0 16px",
   "--card-subtitle-margin": "4px 0 0 0",
@@ -26229,37 +26333,68 @@ var stdin_default$18 = __spreadValues$2(__spreadValues$2(__spreadValues$2(__spre
   "--icon-size-sm": "18px",
   "--icon-size-md": "20px",
   "--icon-size-lg": "22px",
-  "--color-body": "#fef7ff",
-  "--color-text": "#000",
-  "--color-primary": "#6750A4",
-  "--color-info": "#625B71",
-  "--color-success": "#536525",
-  "--color-warning": "#7D5260",
-  "--color-danger": "#B3261E",
-  "--color-on-primary": "#fff",
-  "--color-on-info": "#fff",
-  "--color-on-success": "#fff",
-  "--color-on-warning": "#fff",
-  "--color-on-danger": "#fff",
-  "--color-primary-container": "#EADDFF",
-  "--color-info-container": "#E8DEF8",
-  "--color-success-container": "#D5EC9C",
-  "--color-warning-container": "#FFD8E4",
-  "--color-danger-container": "#F9DEDC",
-  "--color-on-primary-container": "#21005D",
-  "--color-on-info-container": "#1D192B",
-  "--color-on-success-container": "#151F00",
-  "--color-on-warning-container": "#31111D",
-  "--color-on-danger-container": "#410E0B",
-  "--color-disabled": "#e0e0e0",
-  "--color-text-disabled": "#aaa",
-  "--color-surface-container": "#F3EDF7",
-  "--color-surface-container-low": "#F7F2FA",
-  "--color-surface-container-high": "#ECE6F0",
-  "--color-surface-container-highest": "#E6E0E9",
-  "--color-inverse-surface": "#322F35",
-  "--color-outline": "#CAC4D0",
-  "--color-on-surface-variant": "#49454F",
+  "--hsl-body": "293, 100%, 98%",
+  "--color-body": "hsla(var(--hsl-body), 1)",
+  "--hsl-text": "0, 0%, 0%",
+  "--color-text": "hsla(var(--hsl-text), 1)",
+  "--hsl-primary": "256, 34%, 48%",
+  "--color-primary": "hsla(var(--hsl-primary), 1)",
+  "--hsl-info": "259, 11%, 40%",
+  "--color-info": "hsla(var(--hsl-info), 1)",
+  "--hsl-success": "77, 46%, 27%",
+  "--color-success": "hsla(var(--hsl-success), 1)",
+  "--hsl-warning": "340, 21%, 41%",
+  "--color-warning": "hsla(var(--hsl-warning), 1)",
+  "--hsl-danger": "3, 71%, 41%",
+  "--color-danger": "hsla(var(--hsl-danger), 1)",
+  "--hsl-on-primary": "0, 0%, 100%",
+  "--color-on-primary": "hsla(var(--hsl-on-primary), 1)",
+  "--hsl-on-info": "0, 0%, 100%",
+  "--color-on-info": "hsla(var(--hsl-on-info), 1)",
+  "--hsl-on-success": "0, 0%, 100%",
+  "--color-on-success": "hsla(var(--hsl-on-success), 1)",
+  "--hsl-on-warning": "0, 0%, 100%",
+  "--color-on-warning": "hsla(var(--hsl-on-warning), 1)",
+  "--hsl-on-danger": "0, 0%, 100%",
+  "--color-on-danger": "hsla(var(--hsl-on-danger), 1)",
+  "--hsl-primary-container": "263, 100%, 93%",
+  "--color-primary-container": "hsla(var(--hsl-primary-container), 1)",
+  "--hsl-info-container": "263, 65%, 92%",
+  "--color-info-container": "hsla(var(--hsl-info-container), 1)",
+  "--hsl-success-container": "77, 68%, 77%",
+  "--color-success-container": "hsla(var(--hsl-success-container), 1)",
+  "--hsl-warning-container": "342, 100%, 92%",
+  "--color-warning-container": "hsla(var(--hsl-warning-container), 1)",
+  "--hsl-danger-container": "4, 71%, 92%",
+  "--color-danger-container": "hsla(var(--hsl-danger-container), 1)",
+  "--hsl-on-primary-container": "261, 100%, 18%",
+  "--color-on-primary-container": "hsla(var(--hsl-on-primary-container), 1)",
+  "--hsl-on-info-container": "253, 26%, 13%",
+  "--color-on-info-container": "hsla(var(--hsl-on-info-container), 1)",
+  "--hsl-on-success-container": "79, 100%, 6%",
+  "--color-on-success-container": "hsla(var(--hsl-on-success-container), 1)",
+  "--hsl-on-warning-container": "338, 48%, 13%",
+  "--color-on-warning-container": "hsla(var(--hsl-on-warning-container), 1)",
+  "--hsl-on-danger-container": "3, 71%, 15%",
+  "--color-on-danger-container": "hsla(var(--hsl-on-danger-container), 1)",
+  "--hsl-disabled": "0, 0%, 88%",
+  "--color-disabled": "hsla(var(--hsl-disabled), 1)",
+  "--hsl-text-disabled": "0, 0%, 67%",
+  "--color-text-disabled": "hsla(var(--hsl-text-disabled), 1)",
+  "--hsl-surface-container": "276, 38%, 95%",
+  "--color-surface-container": "hsla(var(--hsl-surface-container), 1)",
+  "--hsl-surface-container-low": "278, 44%, 96%",
+  "--color-surface-container-low": "hsla(var(--hsl-surface-container-low), 1)",
+  "--hsl-surface-container-high": "276, 25%, 92%",
+  "--color-surface-container-high": "hsla(var(--hsl-surface-container-high), 1)",
+  "--hsl-surface-container-highest": "280, 17%, 90%",
+  "--color-surface-container-highest": "hsla(var(--hsl-surface-container-highest), 1)",
+  "--hsl-inverse-surface": "270, 6%, 20%",
+  "--color-inverse-surface": "hsla(var(--hsl-inverse-surface), 1)",
+  "--hsl-outline": "270, 11%, 79%",
+  "--color-outline": "hsla(var(--hsl-outline), 1)",
+  "--hsl-on-surface-variant": "264, 7%, 29%",
+  "--color-on-surface-variant": "hsla(var(--hsl-on-surface-variant), 1)",
   "--opacity-disabled": "0.6",
   "--opacity-hover": "0.12",
   "--opacity-focus": "0.2",
@@ -26461,6 +26596,11 @@ var stdin_default$V = {
   "--card-title-font-size": "16px",
   "--card-title-padding": "0 16px",
   "--card-title-margin": "16px 0 0 0",
+  "--card-content-padding": "0 16px",
+  "--card-content-margin": "16px 0 0 0",
+  "--card-content-color": "var(--color-on-surface-variant)",
+  "--card-content-font-size": "14px",
+  "--card-content-row-margin": "16px 0 0 0",
   "--card-subtitle-color": "var(--color-on-surface-variant)",
   "--card-subtitle-padding": "0 16px",
   "--card-subtitle-margin": "4px 0 0 0",
@@ -27178,37 +27318,68 @@ var stdin_default$8 = __spreadValues$1(__spreadValues$1(__spreadValues$1(__sprea
   "--icon-size-sm": "18px",
   "--icon-size-md": "20px",
   "--icon-size-lg": "22px",
-  "--color-body": "#141218",
-  "--color-text": "#fff",
-  "--color-primary": "#D0BCFF",
-  "--color-info": "#CCC2DC",
-  "--color-success": "#BACF83",
-  "--color-warning": "#EFB8C8",
-  "--color-danger": "#F2B8B5",
-  "--color-on-primary": "#381E72",
-  "--color-on-info": "#332D41",
-  "--color-on-success": "#273500",
-  "--color-on-warning": "#492532",
-  "--color-on-danger": "#601410",
-  "--color-primary-container": "#5B4494",
-  "--color-info-container": "#575065",
-  "--color-success-container": "#485A19",
-  "--color-warning-container": "#6F4854",
-  "--color-danger-container": "#9D3A37",
-  "--color-on-primary-container": "#EADDFF",
-  "--color-on-info-container": "#E8DEF8",
-  "--color-on-success-container": "#D5EC9C",
-  "--color-on-warning-container": "#FFD8E4",
-  "--color-on-danger-container": "#F9DEDC",
-  "--color-disabled": "#404040",
-  "--color-text-disabled": "#757575",
-  "--color-surface-container": "#211F26",
-  "--color-surface-container-low": "#1D1B20",
-  "--color-surface-container-high": "#2B2930",
-  "--color-surface-container-highest": "#36343B",
-  "--color-inverse-surface": "#e6e0e9",
-  "--color-outline": "#49454F",
-  "--color-on-surface-variant": "#CAC4D0",
+  "--hsl-body": "260, 14%, 8%",
+  "--color-body": "hsla(var(--hsl-body), 1)",
+  "--hsl-text": "0, 0%, 100%",
+  "--color-text": "hsla(var(--hsl-text), 1)",
+  "--hsl-primary": "258, 100%, 87%",
+  "--color-primary": "hsla(var(--hsl-primary), 1)",
+  "--hsl-info": "263, 27%, 81%",
+  "--color-info": "hsla(var(--hsl-info), 1)",
+  "--hsl-success": "77, 44%, 66%",
+  "--color-success": "hsla(var(--hsl-success), 1)",
+  "--hsl-warning": "343, 63%, 83%",
+  "--color-warning": "hsla(var(--hsl-warning), 1)",
+  "--hsl-danger": "3, 70%, 83%",
+  "--color-danger": "hsla(var(--hsl-danger), 1)",
+  "--hsl-on-primary": "259, 58%, 28%",
+  "--color-on-primary": "hsla(var(--hsl-on-primary), 1)",
+  "--hsl-on-info": "258, 18%, 22%",
+  "--color-on-info": "hsla(var(--hsl-on-info), 1)",
+  "--hsl-on-success": "76, 100%, 10%",
+  "--color-on-success": "hsla(var(--hsl-on-success), 1)",
+  "--hsl-on-warning": "338, 33%, 22%",
+  "--color-on-warning": "hsla(var(--hsl-on-warning), 1)",
+  "--hsl-on-danger": "3, 71%, 22%",
+  "--color-on-danger": "hsla(var(--hsl-on-danger), 1)",
+  "--hsl-primary-container": "257, 37%, 42%",
+  "--color-primary-container": "hsla(var(--hsl-primary-container), 1)",
+  "--hsl-info-container": "260, 12%, 35%",
+  "--color-info-container": "hsla(var(--hsl-info-container), 1)",
+  "--hsl-success-container": "77, 57%, 23%",
+  "--color-success-container": "hsla(var(--hsl-success-container), 1)",
+  "--hsl-warning-container": "342, 21%, 36%",
+  "--color-warning-container": "hsla(var(--hsl-warning-container), 1)",
+  "--hsl-danger-container": "2, 48%, 42%",
+  "--color-danger-container": "hsla(var(--hsl-danger-container), 1)",
+  "--hsl-on-primary-container": "263, 100%, 93%",
+  "--color-on-primary-container": "hsla(var(--hsl-on-primary-container), 1)",
+  "--hsl-on-info-container": "263, 65%, 92%",
+  "--color-on-info-container": "hsla(var(--hsl-on-info-container), 1)",
+  "--hsl-on-success-container": "77, 68%, 77%",
+  "--color-on-success-container": "hsla(var(--hsl-on-success-container), 1)",
+  "--hsl-on-warning-container": "342, 100%, 92%",
+  "--color-on-warning-container": "hsla(var(--hsl-on-warning-container), 1)",
+  "--hsl-on-danger-container": "4, 71%, 92%",
+  "--color-on-danger-container": "hsla(var(--hsl-on-danger-container), 1)",
+  "--hsl-disabled": "0, 0%, 25%",
+  "--color-disabled": "hsla(var(--hsl-disabled), 1)",
+  "--hsl-text-disabled": "0, 0%, 46%",
+  "--color-text-disabled": "hsla(var(--hsl-text-disabled), 1)",
+  "--hsl-surface-container": "257, 10%, 14%",
+  "--color-surface-container": "hsla(var(--hsl-surface-container), 1)",
+  "--hsl-surface-container-low": "264, 8%, 12%",
+  "--color-surface-container-low": "hsla(var(--hsl-surface-container-low), 1)",
+  "--hsl-surface-container-high": "257, 8%, 17%",
+  "--color-surface-container-high": "hsla(var(--hsl-surface-container-high), 1)",
+  "--hsl-surface-container-highest": "257, 6%, 22%",
+  "--color-surface-container-highest": "hsla(var(--hsl-surface-container-highest), 1)",
+  "--hsl-inverse-surface": "280, 17%, 90%",
+  "--color-inverse-surface": "hsla(var(--hsl-inverse-surface), 1)",
+  "--hsl-outline": "264, 7%, 29%",
+  "--color-outline": "hsla(var(--hsl-outline), 1)",
+  "--hsl-on-surface-variant": "270, 11%, 79%",
+  "--color-on-surface-variant": "hsla(var(--hsl-on-surface-variant), 1)",
   "--opacity-disabled": "0.6",
   "--opacity-hover": "0.12",
   "--opacity-focus": "0.2",
@@ -28938,7 +29109,7 @@ withInstall(stdin_default$1);
 withPropsDefaultsSetter(stdin_default$1, props);
 const _WatermarkComponent = stdin_default$1;
 var stdin_default = stdin_default$1;
-const version = "3.3.6";
+const version = "3.3.7-alpha.1721326819975";
 function install(app) {
   stdin_default$5G.install && app.use(stdin_default$5G);
   stdin_default$5E.install && app.use(stdin_default$5E);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "3.3.6",
+  "version": "3.3.7-alpha.1721326819975",
   "description": "A material like components library",
   "main": "lib/varlet.cjs.js",
   "module": "es/index.mjs",
@@ -48,9 +48,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/icons": "3.3.6",
-    "@varlet/shared": "3.3.6",
-    "@varlet/use": "3.3.6"
+    "@varlet/icons": "3.3.7-alpha.1721326819975",
+    "@varlet/shared": "3.3.7-alpha.1721326819975",
+    "@varlet/use": "3.3.7-alpha.1721326819975"
   },
   "devDependencies": {
     "@vue/runtime-core": "3.4.21",
@@ -64,9 +64,9 @@
     "typescript": "^5.1.5",
     "vue": "3.4.21",
     "vue-router": "4.2.0",
-    "@varlet/ui": "3.3.6",
-    "@varlet/cli": "3.3.6",
-    "@varlet/touch-emulator": "3.3.6"
+    "@varlet/ui": "3.3.7-alpha.1721326819975",
+    "@varlet/cli": "3.3.7-alpha.1721326819975",
+    "@varlet/touch-emulator": "3.3.7-alpha.1721326819975"
   },
   "scripts": {
     "dev": "varlet-cli dev",

package/types/card.d.ts

@@ -44,6 +44,7 @@ export class Card extends VarComponent {
 
   $slots: {
     image(): VNode[]
+    default(): VNode[]
     title(data: CardTitleData): VNode[]
     subtitle(data: CardSubtitleData): VNode[]
     description(data: CardDescriptionData): VNode[]

package/types/menuSelect.d.ts

@@ -24,6 +24,15 @@ export type MenuSelectStrategy = PositioningStrategy
 
 export type MenuSelectSize = 'normal' | 'mini' | 'small' | 'large'
 
+export type MenuSelectOptionLabelRender = (option: MenuSelectOption, checked: boolean) => VNodeChild
+
+export interface MenuSelectOption {
+  label?: string | VNode | MenuSelectOptionLabelRender
+  disabled?: boolean
+  value?: any
+  ripple?: boolean
+}
+
 export interface MenuSelectProps extends BasicAttributes {
   modelValue?: any
   size?: MenuSelectSize