@varlet/ui 3.15.2 → 3.16.0-alpha.1778498431663

package/es/otp-input/OtpInput.mjs

@@ -0,0 +1,424 @@
+import { call, clamp, toNumber } from "@varlet/shared";
+import { onSmartMounted } from "@varlet/use";
+import { computed, defineComponent, nextTick, ref, useSlots } from "vue";
+import VarFormDetails from "../form-details/index.mjs";
+import { useForm } from "../form/provide.mjs";
+import VarInput from "../input/Input.mjs";
+import { createNamespace, flatFragment, useValidation } from "../utils/components.mjs";
+import { toSizeUnit } from "../utils/elements.mjs";
+import { props } from "./props.mjs";
+const { name, n, classes } = createNamespace("otp-input");
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, renderSlot as _renderSlot, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle } from "vue";
+const _hoisted_1 = ["data-index"];
+function __render__(_ctx, _cache) {
+  const _component_var_input = _resolveComponent("var-input");
+  const _component_var_form_details = _resolveComponent("var-form-details");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      ref: "rootEl",
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
+      style: _normalizeStyle({
+        "--otp-input-gutter": _ctx.gutterStyle,
+        "--otp-input-cell-height": _ctx.cellHeightStyle,
+        "--otp-input-cell-max-width": _ctx.cellMaxWidthStyle
+      }),
+      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+      onKeydown: _cache[2] || (_cache[2] = (...args) => _ctx.handleKeydown && _ctx.handleKeydown(...args)),
+      onPaste: _cache[3] || (_cache[3] = (...args) => _ctx.handlePaste && _ctx.handlePaste(...args))
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          class: _normalizeClass(_ctx.n("cells"))
+        },
+        [
+          (_openBlock(true), _createElementBlock(
+            _Fragment,
+            null,
+            _renderList(_ctx.cellIndexes, (_, index) => {
+              return _openBlock(), _createElementBlock(
+                _Fragment,
+                { key: index },
+                [
+                  _createElementVNode("div", {
+                    class: _normalizeClass(_ctx.n("cell")),
+                    "data-index": index
+                  }, [
+                    _createVNode(_component_var_input, {
+                      ref_for: true,
+                      ref: (el) => _ctx.setInputRef(el, index),
+                      "model-value": _ctx.getDisplayChar(index),
+                      type: _ctx.nativeInputType,
+                      maxlength: 1,
+                      autocomplete: "one-time-code",
+                      placeholder: "",
+                      hint: false,
+                      variant: _ctx.variant,
+                      "text-color": _ctx.textColor,
+                      "focus-color": _ctx.focusColor,
+                      "blur-color": _ctx.blurColor,
+                      disabled: _ctx.formDisabled || _ctx.disabled,
+                      readonly: _ctx.formReadonly || _ctx.readonly,
+                      inputmode: _ctx.resolvedInputmode,
+                      "is-force-focusing-effect": _ctx.activeIndex === index,
+                      "is-force-error-effect": !!_ctx.errorMessage,
+                      "is-show-form-details": false,
+                      onFocus: () => _ctx.handleFocus(index),
+                      onBlur: _cache[0] || (_cache[0] = (event) => _ctx.handleBlur(event)),
+                      onInput: (value) => _ctx.handleCellInput(index, value)
+                    }, null, 8, ["model-value", "type", "variant", "text-color", "focus-color", "blur-color", "disabled", "readonly", "inputmode", "is-force-focusing-effect", "is-force-error-effect", "onFocus", "onInput"])
+                  ], 10, _hoisted_1),
+                  _ctx.shouldRenderSeparator(index) ? (_openBlock(), _createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      class: _normalizeClass(_ctx.n("separator"))
+                    },
+                    [
+                      _renderSlot(_ctx.$slots, "separator", { index })
+                    ],
+                    2
+                    /* CLASS */
+                  )) : _createCommentVNode("v-if", true)
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              );
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ],
+        2
+        /* CLASS */
+      ),
+      _createVNode(_component_var_form_details, {
+        class: _normalizeClass(_ctx.n("details")),
+        "var-otp-input-cover": "",
+        "error-message": _ctx.errorMessage
+      }, null, 8, ["class", "error-message"])
+    ],
+    38
+    /* CLASS, STYLE, NEED_HYDRATION */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarFormDetails,
+    VarInput
+  },
+  props,
+  setup(props2) {
+    const slots = useSlots();
+    const rootEl = ref(null);
+    const inputRefs = ref([]);
+    const activeIndex = ref(-1);
+    const { errorMessage, validateWithTrigger: vt, validate: v, resetValidation } = useValidation();
+    const { bindForm, form } = useForm();
+    const normalizedLength = computed(() => toNumber(props2.length));
+    const normalizedMaskSymbol = computed(() => {
+      var _a;
+      return (_a = splitChars(props2.maskSymbol)[0]) != null ? _a : "\u2022";
+    });
+    const normalizedValue = computed(() => normalizeValue(props2.modelValue));
+    const cellIndexes = computed(() => Array.from({ length: normalizedLength.value }));
+    const gutterStyle = computed(() => toSizeUnit(props2.gutter));
+    const cellHeightStyle = computed(() => toSizeUnit(props2.cellHeight));
+    const cellMaxWidthStyle = computed(() => toSizeUnit(props2.cellMaxWidth));
+    const resolvedInputmode = computed(() => props2.type === "digit" ? "numeric" : void 0);
+    const nativeInputType = computed(() => props2.type === "digit" ? "tel" : "text");
+    const formDisabled = computed(() => {
+      var _a;
+      return (_a = form == null ? void 0 : form.disabled.value) != null ? _a : false;
+    });
+    const formReadonly = computed(() => {
+      var _a;
+      return (_a = form == null ? void 0 : form.readonly.value) != null ? _a : false;
+    });
+    let pendingFocusIndex = null;
+    let focusEffectQueued = false;
+    bindForm == null ? void 0 : bindForm({ validate, resetValidation, reset });
+    onSmartMounted(() => {
+      if (props2.autofocus) {
+        focus();
+      }
+    });
+    function splitChars(value) {
+      return Array.from(value);
+    }
+    function normalizeValue(value) {
+      return transformByType(value).slice(0, normalizedLength.value);
+    }
+    function transformByType(value) {
+      switch (props2.type) {
+        case "digit":
+          return value.replace(/\D+/g, "");
+        case "alphanumeric":
+          return splitChars(value).filter((char) => /[A-Za-z0-9]/.test(char)).join("");
+        default:
+          return value;
+      }
+    }
+    function getValueChars() {
+      return splitChars(normalizedValue.value);
+    }
+    function getDisplayChar(index) {
+      var _a;
+      const char = (_a = getValueChars()[index]) != null ? _a : "";
+      if (!char) {
+        return "";
+      }
+      return props2.mask ? normalizedMaskSymbol.value : char;
+    }
+    function setInputRef(el, index) {
+      inputRefs.value[index] = el && "$" in el ? el : null;
+    }
+    function shouldRenderSeparator(index) {
+      if (index >= normalizedLength.value - 1 || !slots.separator) {
+        return false;
+      }
+      const vNodes = slots.separator({ index });
+      return flatFragment(vNodes).length > 0;
+    }
+    function validateWithTrigger(trigger, value = normalizedValue.value) {
+      nextTick(() => {
+        vt(props2.validateTrigger, trigger, props2.rules, value);
+      });
+    }
+    function maybeEmitComplete(value) {
+      if (splitChars(value).length !== normalizedLength.value) {
+        return;
+      }
+      call(props2.onComplete, value);
+      validateWithTrigger("onComplete", value);
+    }
+    function updateValue(value, index) {
+      if (value === normalizedValue.value) {
+        syncCellDisplayValue(index);
+        return;
+      }
+      call(props2["onUpdate:modelValue"], value);
+      call(props2.onInput, value);
+      validateWithTrigger("onInput", value);
+      maybeEmitComplete(value);
+    }
+    function focusCell(index) {
+      var _a, _b;
+      const targetIndex = clamp(index, 0, normalizedLength.value - 1);
+      (_b = (_a = inputRefs.value[targetIndex]) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+    }
+    function focus(index) {
+      const targetIndex = index == null ? Math.min(getValueChars().length, normalizedLength.value - 1) : index;
+      focusCell(targetIndex);
+    }
+    function blur() {
+      inputRefs.value.forEach((inputRef) => {
+        var _a;
+        (_a = inputRef == null ? void 0 : inputRef.blur) == null ? void 0 : _a.call(inputRef);
+      });
+    }
+    function validate() {
+      return v(props2.rules, normalizedValue.value);
+    }
+    function reset() {
+      if (normalizedValue.value !== "") {
+        call(props2["onUpdate:modelValue"], "");
+      }
+      resetValidation();
+    }
+    function syncCellDisplayValue(index) {
+      var _a;
+      const inputEl = (_a = inputRefs.value[index]) == null ? void 0 : _a.el;
+      if (inputEl) {
+        inputEl.value = getDisplayChar(index);
+      }
+    }
+    function syncAllCellDisplayValues() {
+      cellIndexes.value.forEach((_, index) => {
+        syncCellDisplayValue(index);
+      });
+    }
+    function scheduleFocusEffect(index) {
+      pendingFocusIndex = index;
+      if (focusEffectQueued) {
+        return;
+      }
+      focusEffectQueued = true;
+      nextTick(() => {
+        focusEffectQueued = false;
+        if (pendingFocusIndex == null) {
+          return;
+        }
+        activeIndex.value = pendingFocusIndex;
+        focusCell(pendingFocusIndex);
+        pendingFocusIndex = null;
+      });
+    }
+    function replaceChars(index, chars) {
+      const valueChars = getValueChars();
+      const targetIndex = clamp(index, 0, valueChars.length);
+      const nextChars = [...valueChars];
+      const processedChars = chars.slice(0, normalizedLength.value - targetIndex);
+      processedChars.forEach((char, offset) => {
+        nextChars[targetIndex + offset] = char;
+      });
+      const nextValue = nextChars.join("").slice(0, normalizedLength.value);
+      updateValue(nextValue, targetIndex);
+      const nextFocusIndex = clamp(targetIndex + processedChars.length, 0, normalizedLength.value - 1);
+      scheduleFocusEffect(nextFocusIndex);
+    }
+    function removeAt(index, focusIndex = clamp(index, 0, normalizedLength.value - 1)) {
+      const valueChars = getValueChars();
+      valueChars.splice(index, 1);
+      const nextValue = valueChars.join("");
+      updateValue(nextValue, index);
+      scheduleFocusEffect(focusIndex);
+    }
+    function removeWithBackspace(index) {
+      const valueChars = getValueChars();
+      if (!valueChars[index]) {
+        if (index <= 0) {
+          syncAllCellDisplayValues();
+          return;
+        }
+        removeAt(index - 1, index - 1);
+        return;
+      }
+      const isLastCell = index === valueChars.length - 1;
+      const nextFocusIndex = !isLastCell && index > 0 ? index - 1 : clamp(index, 0, normalizedLength.value - 1);
+      removeAt(index, nextFocusIndex);
+    }
+    function handleClick(event) {
+      if (props2.disabled || formDisabled.value) {
+        return;
+      }
+      call(props2.onClick, event);
+      validateWithTrigger("onClick");
+    }
+    function handleFocus(index) {
+      const valueChars = getValueChars();
+      activeIndex.value = index;
+      if (valueChars[index]) {
+        nextTick(() => {
+          var _a, _b;
+          (_b = (_a = inputRefs.value[index]) == null ? void 0 : _a.select) == null ? void 0 : _b.call(_a);
+        });
+      }
+    }
+    function handleBlur(event) {
+      var _a;
+      const relatedTarget = event.relatedTarget;
+      const isLeavingComponent = !relatedTarget || !((_a = rootEl.value) == null ? void 0 : _a.contains(relatedTarget));
+      if (isLeavingComponent) {
+        activeIndex.value = -1;
+      }
+    }
+    function handleCellInput(index, value) {
+      const inputChars = splitChars(transformByType(value));
+      const valueChars = getValueChars();
+      const crossTargetIndex = index > valueChars.length;
+      if (inputChars.length === 0) {
+        if (crossTargetIndex) {
+          scheduleFocusEffect(valueChars.length);
+          syncCellDisplayValue(index);
+          return;
+        }
+        if (value === "") {
+          removeAt(index);
+        } else {
+          syncCellDisplayValue(index);
+        }
+        return;
+      }
+      if (crossTargetIndex) {
+        replaceChars(valueChars.length, inputChars);
+        return;
+      }
+      replaceChars(index, inputChars);
+    }
+    function handlePaste(event) {
+      var _a, _b;
+      if (!props2.allowPaste || formDisabled.value || formReadonly.value || props2.disabled || props2.readonly) {
+        return;
+      }
+      const text = (_b = (_a = event.clipboardData) == null ? void 0 : _a.getData("text")) != null ? _b : "";
+      if (!text) {
+        return;
+      }
+      event.preventDefault();
+      const transformedValue = props2.pasteTransform ? props2.pasteTransform(text) : text;
+      const result = transformByType(transformedValue);
+      call(props2.onPaste, result, event);
+      validateWithTrigger("onPaste", result);
+      if (!result) {
+        syncAllCellDisplayValues();
+        return;
+      }
+      replaceChars(0, splitChars(result));
+    }
+    function handleKeydown(event) {
+      if (formDisabled.value || formReadonly.value || props2.disabled || props2.readonly) {
+        return;
+      }
+      const target = event.target;
+      const cell = target == null ? void 0 : target.closest(`.${n("cell")}`);
+      const indexAttr = cell == null ? void 0 : cell.dataset.index;
+      if (indexAttr == null) {
+        return;
+      }
+      const index = Number(indexAttr);
+      if (event.key === "Backspace" && getValueChars().length > 0) {
+        event.preventDefault();
+        removeWithBackspace(index);
+        return;
+      }
+      if (event.key === "ArrowLeft" && index > 0) {
+        event.preventDefault();
+        focusCell(index - 1);
+        return;
+      }
+      if (event.key === "ArrowRight" && index < normalizedLength.value - 1) {
+        event.preventDefault();
+        focusCell(index + 1);
+        return;
+      }
+    }
+    return {
+      rootEl,
+      activeIndex,
+      errorMessage,
+      formDisabled,
+      formReadonly,
+      cellIndexes,
+      gutterStyle,
+      cellHeightStyle,
+      cellMaxWidthStyle,
+      resolvedInputmode,
+      nativeInputType,
+      n,
+      classes,
+      setInputRef,
+      getDisplayChar,
+      shouldRenderSeparator,
+      handleClick,
+      handleFocus,
+      handleBlur,
+      handleCellInput,
+      handleKeydown,
+      handlePaste,
+      focus,
+      blur,
+      reset,
+      validate,
+      resetValidation
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/otp-input/index.mjs

@@ -0,0 +1,12 @@
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import OtpInput from "./OtpInput.mjs";
+import { props as otpInputProps } from "./props.mjs";
+withInstall(OtpInput);
+withPropsDefaultsSetter(OtpInput, otpInputProps);
+const _OtpInputComponent = OtpInput;
+var stdin_default = OtpInput;
+export {
+  _OtpInputComponent,
+  stdin_default as default,
+  otpInputProps
+};

package/es/otp-input/otpInput.css

@@ -0,0 +1 @@
+:root { --otp-input-gutter: 8px; --otp-input-cell-height: 48px; --otp-input-cell-max-width: 48px; --otp-input-input-font-size: 20px; --otp-input-separator-color: var(--color-text-disabled);}.var-otp-input { display: inline-flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 100%;}.var-otp-input__cells { display: flex; align-items: center; justify-content: center; gap: var(--otp-input-gutter); width: 100%; max-width: 100%;}.var-otp-input__cell { flex: 1 1 0; min-width: 0; height: var(--otp-input-cell-height); max-width: var(--otp-input-cell-max-width);}.var-otp-input__separator { flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--otp-input-separator-color); white-space: nowrap;}.var-otp-input__details { width: 100%;}.var-otp-input .var-input__input { text-align: center; font-size: var(--otp-input-input-font-size); text-transform: none; height: 100%;}.var-otp-input .var-field-decorator__middle { justify-content: center;}.var-otp-input .var-field-decorator--standard .var-field-decorator__controller,.var-otp-input .var-field-decorator--standard .var-field-decorator__middle { height: 100%;}.var-otp-input .var-field-decorator--standard .var-field-decorator__middle,.var-otp-input .var-field-decorator--standard .var-field-decorator__icon,.var-otp-input .var-field-decorator--standard .var-field-decorator--middle-non-hint,.var-otp-input .var-field-decorator--standard .var-field-decorator--icon-non-hint { margin-top: 0; margin-bottom: 0;}.var-otp-input .var-field-decorator--outlined .var-field-decorator__controller,.var-otp-input .var-field-decorator--outlined .var-field-decorator__middle { height: 100%;}.var-otp-input .var-field-decorator--outlined .var-field-decorator__middle,.var-otp-input .var-field-decorator--outlined .var-field-decorator__icon { margin-top: 0; margin-bottom: 0;}.var-otp-input .var-field-decorator--filled .var-field-decorator__controller,.var-otp-input .var-field-decorator--filled .var-field-decorator__middle { height: 100%;}.var-otp-input .var-field-decorator--filled .var-field-decorator__middle,.var-otp-input .var-field-decorator--filled .var-field-decorator__icon,.var-otp-input .var-field-decorator--filled .var-field-decorator--middle-non-hint,.var-otp-input .var-field-decorator--filled .var-field-decorator--icon-non-hint { margin-top: 0; margin-bottom: 0;}.var-otp-input .var-input,.var-otp-input .var-field-decorator,.var-otp-input .var-field-decorator__container,.var-otp-input .var-field-decorator__main,.var-otp-input .var-field-decorator__body { height: 100%;}

package/es/otp-input/props.mjs

@@ -0,0 +1,78 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { fieldDecoratorProps } from "../field-decorator/index.mjs";
+import { defineListenerProp, pickProps } from "../utils/components.mjs";
+const props = __spreadProps(__spreadValues({
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  length: {
+    type: [String, Number],
+    default: 6
+  },
+  type: {
+    type: String,
+    default: "digit"
+  },
+  mask: Boolean,
+  maskSymbol: {
+    type: String,
+    default: "\u2022"
+  },
+  cellHeight: {
+    type: [String, Number],
+    default: 48
+  },
+  cellMaxWidth: {
+    type: [String, Number],
+    default: 48
+  },
+  disabled: Boolean,
+  readonly: Boolean,
+  autofocus: Boolean,
+  gutter: {
+    type: [String, Number],
+    default: 8
+  },
+  validateTrigger: {
+    type: Array,
+    default: () => ["onInput", "onComplete"]
+  },
+  rules: [Array, Function, Object],
+  allowPaste: {
+    type: Boolean,
+    default: true
+  },
+  pasteTransform: Function,
+  onInput: defineListenerProp(),
+  onClick: defineListenerProp(),
+  onPaste: defineListenerProp(),
+  onComplete: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp()
+}, pickProps(fieldDecoratorProps, ["textColor", "focusColor", "blurColor"])), {
+  variant: {
+    type: String,
+    default: "outlined"
+  }
+});
+export {
+  props
+};

package/es/otp-input/style/index.mjs

@@ -0,0 +1,7 @@
+import '../../styles/common.css'
+import '../../icon/icon.css'
+import '../../field-decorator/fieldDecorator.css'
+import '../../form-details/formDetails.css'
+import '../../input/input.css'
+import '../otpInput.css'
+import '../OtpInputSfc.css'

package/es/paper/Paper.mjs

@@ -1,13 +1,17 @@
 import { call } from "@varlet/shared";
-import { defineComponent } from "vue";
+import { computed, defineComponent } from "vue";
+import Hover from "../hover/index.mjs";
+import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
 import Ripple from "../ripple/index.mjs";
 import { createNamespace, formatElevation } from "../utils/components.mjs";
 import { toSizeUnit } from "../utils/elements.mjs";
 import { props } from "./props.mjs";
 const { name, n, classes } = createNamespace("paper");
-import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
 function __render__(_ctx, _cache) {
+  const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
   const _directive_ripple = _resolveDirective("ripple");
+  const _directive_hover = _resolveDirective("hover");
   return _withDirectives((_openBlock(), _createElementBlock(
     "div",
     {
@@ -16,8 +20,9 @@ function __render__(_ctx, _cache) {
           _ctx.n(),
           _ctx.n("$--box"),
           _ctx.formatElevation(_ctx.elevation, 2),
-          [_ctx.onClick, _ctx.n("--cursor")],
+          [_ctx.onClick || _ctx.hoverable, _ctx.n("--cursor")],
           [_ctx.round, _ctx.n("--round")],
+          [_ctx.surfaceLow, _ctx.n("--surface-low")],
           [_ctx.inline, _ctx.n("$--inline-flex")]
         )
       ),
@@ -29,19 +34,28 @@ function __render__(_ctx, _cache) {
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
     },
     [
-      _renderSlot(_ctx.$slots, "default")
+      _renderSlot(_ctx.$slots, "default"),
+      _createVNode(_component_var_hover_overlay, {
+        hovering: _ctx.hoverable ? _ctx.hovering : false
+      }, null, 8, ["hovering"])
     ],
     6
     /* CLASS, STYLE */
   )), [
-    [_directive_ripple, { disabled: !_ctx.ripple }]
+    [_directive_ripple, { disabled: !_ctx.ripple }],
+    [_directive_hover, _ctx.handleHovering, "desktop"]
   ]);
 }
 const __sfc__ = defineComponent({
   name,
-  directives: { Ripple },
+  directives: { Ripple, Hover },
+  components: {
+    VarHoverOverlay
+  },
   props,
   setup(props2) {
+    const surfaceLow = computed(() => props2.surface === "low");
+    const { hovering, handleHovering } = useHoverOverlay();
     function handleClick(e) {
       call(props2.onClick, e);
     }
@@ -49,6 +63,9 @@ const __sfc__ = defineComponent({
       n,
       classes,
       formatElevation,
+      surfaceLow,
+      hovering,
+      handleHovering,
       toSizeUnit,
       handleClick
     };

package/es/paper/paper.css

@@ -1 +1 @@
-:root { --paper-background: var(--color-surface-container-highest); --paper-border-radius: 4px;}.var-paper { background: var(--paper-background); transition: background-color 0.25s; overflow: hidden; border-radius: var(--paper-border-radius); -webkit-tap-highlight-color: transparent;}.var-paper--round { border-radius: 50%;}.var-paper--cursor { cursor: pointer;}
+:root { --paper-background: var(--color-surface-container-highest); --paper-surface-low-background: var(--color-surface-container-highest); --paper-border-radius: 4px;}.var-paper { position: relative; background: var(--paper-background); transition: background-color 0.25s; overflow: hidden; border-radius: var(--paper-border-radius); -webkit-tap-highlight-color: transparent;}.var-paper--round { border-radius: 50%;}.var-paper--cursor { cursor: pointer;}.var-paper--surface-low { background: var(--paper-surface-low-background);}

package/es/paper/props.mjs

@@ -10,6 +10,8 @@ const props = {
   height: [Number, String],
   round: Boolean,
   inline: Boolean,
+  surface: String,
+  hoverable: Boolean,
   onClick: defineListenerProp()
 };
 export {

package/es/paper/style/index.mjs

@@ -1,5 +1,6 @@
 import '../../styles/common.css'
 import '../../styles/elevation.css'
+import '../../hover-overlay/hoverOverlay.css'
 import '../../ripple/ripple.css'
 import '../paper.css'
 import '../PaperSfc.css'

package/es/style.mjs

@@ -56,6 +56,7 @@ import './menu/style/index.mjs'
 import './menu-option/style/index.mjs'
 import './menu-select/style/index.mjs'
 import './option/style/index.mjs'
+import './otp-input/style/index.mjs'
 import './overlay/style/index.mjs'
 import './pagination/style/index.mjs'
 import './paper/style/index.mjs'

package/es/themes/dark/index.mjs

@@ -53,6 +53,7 @@ import menu from "./menu.mjs";
 import menuOption from "./menuOption.mjs";
 import menuSelect from "./menuSelect.mjs";
 import option from "./option.mjs";
+import otpInput from "./otpInput.mjs";
 import overlay from "./overlay.mjs";
 import pagination from "./pagination.mjs";
 import paper from "./paper.mjs";
@@ -80,7 +81,7 @@ import timePicker from "./timePicker.mjs";
 import tooltip from "./tooltip.mjs";
 import uploader from "./uploader.mjs";
 import watermark from "./watermark.mjs";
-var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
   "--color-scheme": "dark",
   "--font-size-xs": "10px",
   "--font-size-sm": "12px",
@@ -159,7 +160,7 @@ var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(
   "--shadow-key-umbra-opacity": "rgba(0, 0, 0, 0.2)",
   "--shadow-key-penumbra-opacity": "rgba(0, 0, 0, 0.14)",
   "--shadow-key-ambient-opacity": "rgba(0, 0, 0, 0.12)"
-}, button), alert), cell), card), timePicker), datePicker), skeleton), tabs), tab), popup), dialog), actionSheet), chip), badge), uploader), collapse), pullRefresh), switchThemes), step), pagination), table), fieldDecorator), radio), checkbox), divider), picker), appBar), bottomNavigationItem), menu), result), breadcrumb), avatar), link), progress), option), watermark), menuSelect), menuOption), avatarGroup), backTop), bottomNavigation), countdown), counter), fab), floatingPanel), formDetails), hoverOverlay), icon), imagePreview), indexBar), input), list), loading), loadingBar), overlay), paper), rate), ripple), slider), snackbar), space), swipe), tooltip), select), code), signature);
+}, button), alert), cell), card), timePicker), datePicker), skeleton), tabs), tab), popup), dialog), actionSheet), chip), badge), uploader), collapse), pullRefresh), switchThemes), step), pagination), table), fieldDecorator), radio), checkbox), divider), picker), appBar), bottomNavigationItem), menu), result), breadcrumb), avatar), link), progress), option), watermark), menuSelect), menuOption), avatarGroup), backTop), bottomNavigation), countdown), counter), fab), floatingPanel), formDetails), hoverOverlay), icon), imagePreview), indexBar), input), otpInput), list), loading), loadingBar), overlay), paper), rate), ripple), slider), snackbar), space), swipe), tooltip), select), code), signature);
 export {
   stdin_default as default
 };

package/es/themes/dark/otpInput.mjs

@@ -0,0 +1,10 @@
+var stdin_default = {
+  "--otp-input-gutter": "8px",
+  "--otp-input-cell-height": "48px",
+  "--otp-input-cell-max-width": "48px",
+  "--otp-input-input-font-size": "20px",
+  "--otp-input-separator-color": "var(--color-text-disabled)"
+};
+export {
+  stdin_default as default
+};