@yh-ui/components 0.1.0

package/dist/input/src/input.vue

@@ -0,0 +1,1312 @@
+<script setup>
+import { computed, ref, watch, nextTick, useSlots, onMounted } from "vue";
+import { useNamespace, useFormItem, useLocale, useConfig } from "@yh-ui/hooks";
+import { useComponentTheme } from "@yh-ui/theme";
+import { calcTextareaHeight } from "./utils";
+defineOptions({
+  name: "YhInput"
+});
+const props = defineProps({
+  modelValue: { type: [String, Number], required: false },
+  type: { type: null, required: false, default: "text" },
+  size: { type: null, required: false, default: void 0 },
+  variant: { type: null, required: false, default: "default" },
+  status: { type: null, required: false, default: "" },
+  loading: { type: Boolean, required: false, default: false },
+  placeholder: { type: String, required: false },
+  disabled: { type: Boolean, required: false, default: false },
+  readonly: { type: Boolean, required: false, default: false },
+  clearable: { type: Boolean, required: false, default: false },
+  clearOnEscape: { type: Boolean, required: false, default: false },
+  selectOnFocus: { type: Boolean, required: false, default: false },
+  showPassword: { type: Boolean, required: false, default: false },
+  showWordLimit: { type: Boolean, required: false, default: false },
+  countConfig: { type: Object, required: false },
+  maxlength: { type: [Number, String], required: false },
+  minlength: { type: [Number, String], required: false },
+  prefixIcon: { type: null, required: false },
+  suffixIcon: { type: null, required: false },
+  clearIcon: { type: null, required: false },
+  prefix: { type: String, required: false },
+  suffix: { type: String, required: false },
+  list: { type: String, required: false },
+  autofocus: { type: Boolean, required: false, default: false },
+  autocomplete: { type: String, required: false, default: "off" },
+  name: { type: String, required: false },
+  form: { type: String, required: false },
+  id: { type: String, required: false },
+  tabindex: { type: [String, Number], required: false },
+  ariaLabel: { type: String, required: false, default: void 0 },
+  label: { type: String, required: false, default: void 0 },
+  inputmode: { type: String, required: false, default: void 0 },
+  modelModifiers: { type: Object, required: false, default: () => ({}) },
+  validateEvent: { type: Boolean, required: false, default: true },
+  inputStyle: { type: [String, Object], required: false },
+  formatter: { type: Function, required: false },
+  parser: { type: Function, required: false },
+  rows: { type: Number, required: false, default: 2 },
+  autosize: { type: [Boolean, Object], required: false },
+  resize: { type: String, required: false },
+  themeOverrides: { type: null, required: false }
+});
+const emit = defineEmits(["update:modelValue", "input", "change", "focus", "blur", "clear", "keydown", "keyup", "compositionstart", "compositionupdate", "compositionend"]);
+const slots = useSlots();
+const ns = useNamespace("input");
+const { t } = useLocale();
+const inputRef = ref();
+const textareaRef = ref();
+const wrapperRef = ref();
+const { form, formItem, validate: triggerValidate } = useFormItem();
+const { themeStyle } = useComponentTheme(
+  "input",
+  computed(() => props.themeOverrides)
+);
+const { globalSize } = useConfig();
+const inputSize = computed(
+  () => props.size || formItem?.size || form?.size || globalSize.value || "default"
+);
+const focused = ref(false);
+const hovering = ref(false);
+const isComposing = ref(false);
+const passwordVisible = ref(false);
+const textareaCalcStyle = ref({});
+const inputOrTextarea = computed(() => inputRef.value || textareaRef.value);
+const isTextarea = computed(() => props.type === "textarea");
+const nativeInputValue = computed(() => {
+  const value = props.modelValue === null || props.modelValue === void 0 ? "" : String(props.modelValue);
+  if (props.formatter && !isTextarea.value) {
+    return props.formatter(value);
+  }
+  return value;
+});
+const showClear = computed(
+  () => props.clearable && !props.disabled && !props.readonly && !!nativeInputValue.value && (focused.value || hovering.value)
+);
+const showPasswordIcon = computed(
+  () => props.showPassword && !props.disabled && !props.readonly && !!nativeInputValue.value
+);
+const textLength = computed(() => {
+  const value = props.modelValue === null || props.modelValue === void 0 ? "" : String(props.modelValue);
+  if (props.countConfig?.calculate) {
+    return props.countConfig.calculate(value);
+  }
+  return value.length;
+});
+const showWordLimitCount = computed(
+  () => props.showWordLimit && !!props.maxlength && (props.type === "text" || props.type === "textarea") && !props.disabled && !props.readonly
+);
+const inputExceed = computed(
+  () => showWordLimitCount.value && textLength.value > Number(props.maxlength)
+);
+const isLoading = computed(() => props.loading && !props.disabled);
+const hasPrepend = computed(() => !!slots.prepend);
+const hasAppend = computed(() => !!slots.append);
+const hasPrefix = computed(() => !!slots.prefix || !!props.prefixIcon || !!props.prefix);
+const hasSuffix = computed(
+  () => !!slots.suffix || !!props.suffixIcon || !!props.suffix || showClear.value || showPasswordIcon.value || isLoading.value
+);
+const mergedStatus = computed(() => {
+  if (props.status) return props.status;
+  if (formItem?.validateStatus === "error") return "error";
+  if (formItem?.validateStatus === "success") return "success";
+  return "";
+});
+const wrapperClasses = computed(() => [
+  ns.b(),
+  ns.m(inputSize.value),
+  ns.is("disabled", props.disabled),
+  ns.is("focused", focused.value),
+  ns.is("textarea", isTextarea.value),
+  ns.is("exceed", inputExceed.value),
+  ns.is("loading", isLoading.value),
+  // Feature 1: Variant
+  props.variant && props.variant !== "default" ? ns.m(`variant-${props.variant}`) : "",
+  // Feature 3: Status
+  mergedStatus.value ? ns.m(`status-${mergedStatus.value}`) : "",
+  {
+    [ns.b("group")]: hasPrepend.value || hasAppend.value,
+    [ns.is("prepend")]: hasPrepend.value,
+    [ns.is("append")]: hasAppend.value
+  }
+]);
+const wrapperStyle = computed(() => ({
+  ...themeStyle.value
+}));
+const inputClasses = computed(() => [ns.e("inner"), ns.is("disabled", props.disabled)]);
+const textareaStyle = computed(() => {
+  return [props.inputStyle, textareaCalcStyle.value, { resize: props.resize }];
+});
+const setNativeInputValue = () => {
+  const input = inputOrTextarea.value;
+  if (!input || input.value === nativeInputValue.value) return;
+  input.value = nativeInputValue.value;
+};
+const handleInput = (event) => {
+  const target = event.target;
+  let value = target.value;
+  if (isComposing.value) return;
+  if (props.parser) {
+    value = props.parser(value);
+  }
+  if (props.modelModifiers?.trim) {
+    value = value.trim();
+  }
+  if (props.modelModifiers?.number) {
+    const n = parseFloat(value);
+    emit("update:modelValue", isNaN(n) ? value : n);
+    emit("input", isNaN(n) ? value : n);
+  } else {
+    emit("update:modelValue", value);
+    emit("input", value);
+  }
+};
+const handleChange = (event) => {
+  const target = event.target;
+  emit("change", target.value);
+  if (props.validateEvent) {
+    nextTick(() => {
+      triggerValidate("change");
+    });
+  }
+};
+const handleFocus = (event) => {
+  focused.value = true;
+  emit("focus", event);
+  if (props.selectOnFocus) {
+    nextTick(() => {
+      inputOrTextarea.value?.select();
+    });
+  }
+};
+const handleBlur = (event) => {
+  focused.value = false;
+  emit("blur", event);
+  if (props.validateEvent) {
+    nextTick(() => {
+      triggerValidate("blur");
+    });
+  }
+};
+const handleMouseEnter = () => {
+  hovering.value = true;
+};
+const handleMouseLeave = () => {
+  hovering.value = false;
+};
+const handleClear = () => {
+  emit("update:modelValue", "");
+  emit("change", "");
+  emit("clear");
+  emit("input", "");
+  const input = inputOrTextarea.value;
+  if (input) {
+    input.value = "";
+  }
+  nextTick(() => {
+    focus();
+  });
+};
+const handleKeydown = (event) => {
+  if (props.clearOnEscape && event.key === "Escape" && !props.disabled && !props.readonly) {
+    handleClear();
+  }
+  emit("keydown", event);
+};
+const handleKeyup = (event) => {
+  emit("keyup", event);
+};
+const handlePasswordToggle = () => {
+  passwordVisible.value = !passwordVisible.value;
+  nextTick(() => {
+    focus();
+  });
+};
+const handleCompositionStart = (event) => {
+  isComposing.value = true;
+  emit("compositionstart", event);
+};
+const handleCompositionUpdate = (event) => {
+  emit("compositionupdate", event);
+};
+const handleCompositionEnd = (event) => {
+  if (isComposing.value) {
+    isComposing.value = false;
+    handleInput(event);
+  }
+  emit("compositionend", event);
+};
+const focus = () => {
+  inputOrTextarea.value?.focus();
+};
+const blur = () => {
+  inputOrTextarea.value?.blur();
+};
+const select = () => {
+  inputOrTextarea.value?.select();
+};
+const clear = () => {
+  handleClear();
+};
+const resizeTextarea = () => {
+  const { type, autosize } = props;
+  if (type !== "textarea") return;
+  if (!autosize) {
+    textareaCalcStyle.value = {};
+    return;
+  }
+  const minRows = typeof autosize === "object" ? autosize.minRows : void 0;
+  const maxRows = typeof autosize === "object" ? autosize.maxRows : void 0;
+  const textarea = textareaRef.value;
+  if (!textarea) return;
+  const style = calcTextareaHeight(textarea, minRows, maxRows);
+  textareaCalcStyle.value = {
+    height: style.height,
+    minHeight: style.minHeight
+  };
+};
+watch(
+  () => props.modelValue,
+  () => {
+    nextTick(() => {
+      setNativeInputValue();
+      resizeTextarea();
+    });
+  }
+);
+onMounted(() => {
+  setNativeInputValue();
+  resizeTextarea();
+  if (props.autofocus) {
+    focus();
+  }
+});
+defineExpose({
+  ref: inputOrTextarea.value,
+  wrapperRef: wrapperRef.value,
+  focus,
+  blur,
+  select,
+  clear,
+  get textLength() {
+    return textLength.value;
+  }
+});
+</script>
+
+<template>
+  <div
+    ref="wrapperRef"
+    :class="wrapperClasses"
+    :style="wrapperStyle"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <!-- 前置元素 -->
+    <div v-if="hasPrepend" :class="ns.e('prepend')">
+      <slot name="prepend" />
+    </div>
+
+    <!-- 输入框包装器 -->
+    <div :class="ns.e('wrapper')">
+      <!-- 前置图标/文本/内容 -->
+      <span v-if="hasPrefix" :class="ns.e('prefix')">
+        <slot name="prefix">
+          <!-- Feature 6: prefix string prop -->
+          <span v-if="prefix" :class="ns.e('prefix-text')">{{ prefix }}</span>
+          <component
+            v-else-if="prefixIcon && typeof prefixIcon !== 'string'"
+            :is="prefixIcon"
+            :class="ns.e('icon')"
+          />
+          <span v-else-if="prefixIcon" :class="ns.e('icon')">{{ prefixIcon }}</span>
+        </slot>
+      </span>
+
+      <!-- 文本域 -->
+      <textarea
+        v-if="isTextarea"
+        ref="textareaRef"
+        :class="inputClasses"
+        :value="nativeInputValue"
+        :placeholder="placeholder || t('input.placeholder')"
+        :disabled="disabled"
+        :readonly="readonly"
+        :maxlength="maxlength"
+        :minlength="minlength"
+        :rows="rows"
+        :name="name"
+        :id="id"
+        :tabindex="tabindex"
+        :autocomplete="autocomplete"
+        :autofocus="autofocus"
+        :aria-label="ariaLabel || label"
+        :inputmode="inputmode"
+        :style="textareaStyle"
+        @input="handleInput"
+        @change="handleChange"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @keydown="handleKeydown"
+        @keyup="handleKeyup"
+        @compositionstart="handleCompositionStart"
+        @compositionupdate="handleCompositionUpdate"
+        @compositionend="handleCompositionEnd"
+      />
+
+      <!-- 普通输入框 -->
+      <input
+        v-else
+        ref="inputRef"
+        :class="inputClasses"
+        :type="showPassword ? passwordVisible ? 'text' : 'password' : type"
+        :value="nativeInputValue"
+        :placeholder="placeholder || t('input.placeholder')"
+        :disabled="disabled"
+        :readonly="readonly"
+        :maxlength="maxlength"
+        :minlength="minlength"
+        :name="name"
+        :id="id"
+        :tabindex="tabindex"
+        :list="list"
+        :autocomplete="autocomplete"
+        :autofocus="autofocus"
+        :style="inputStyle"
+        :aria-label="ariaLabel || label"
+        :inputmode="inputmode"
+        :aria-invalid="mergedStatus === 'error'"
+        :aria-describedby="mergedStatus === 'error' ? formItem?.errorId : void 0"
+        @input="handleInput"
+        @change="handleChange"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @keydown="handleKeydown"
+        @keyup="handleKeyup"
+        @compositionstart="handleCompositionStart"
+        @compositionupdate="handleCompositionUpdate"
+        @compositionend="handleCompositionEnd"
+      />
+
+      <!-- 后置图标/文本/内容 -->
+      <span v-if="hasSuffix" :class="ns.e('suffix')">
+        <!-- Feature 2: 加载状态图标 -->
+        <span v-if="isLoading" :class="[ns.e('icon'), ns.e('loading')]">
+          <slot name="loadingIcon">
+            <svg
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              class="yh-input__loading-spin"
+            >
+              <path
+                fill="currentColor"
+                d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
+              />
+            </svg>
+          </slot>
+        </span>
+
+        <!-- 清空按钮 -->
+        <span
+          v-if="showClear && !isLoading"
+          :class="[ns.e('icon'), ns.e('clear')]"
+          @mousedown.prevent
+          @click.stop="handleClear"
+        >
+          <slot name="clearIcon">
+            <svg
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+            >
+              <path
+                fill="currentColor"
+                d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512zM512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 1 0 0-768 384 384 0 0 0 0 768z"
+              />
+            </svg>
+          </slot>
+        </span>
+
+        <!-- 密码切换按钮 -->
+        <span
+          v-if="showPasswordIcon"
+          :class="[ns.e('icon'), ns.e('password')]"
+          @click.stop="handlePasswordToggle"
+        >
+          <svg
+            v-if="passwordVisible"
+            viewBox="0 0 24 24"
+            width="1em"
+            height="1em"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            style="overflow: visible"
+          >
+            <path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z" />
+            <circle cx="12" cy="12" r="3" />
+          </svg>
+          <svg
+            v-else
+            viewBox="0 0 24 24"
+            width="1em"
+            height="1em"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            style="overflow: visible"
+          >
+            <path
+              d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
+            />
+            <line x1="3" y1="3" x2="21" y2="21" />
+          </svg>
+        </span>
+
+        <!-- 后置图标/文本插槽 -->
+        <slot name="suffix">
+          <!-- Feature 6: suffix string prop -->
+          <span v-if="suffix" :class="ns.e('suffix-text')">{{ suffix }}</span>
+          <component
+            v-else-if="suffixIcon && typeof suffixIcon !== 'string'"
+            :is="suffixIcon"
+            :class="ns.e('icon')"
+          />
+          <span v-else-if="suffixIcon" :class="ns.e('icon')">{{ suffixIcon }}</span>
+        </slot>
+      </span>
+
+      <!-- 字数统计 (输入框内部，仅针对 type=text) -->
+      <span v-if="showWordLimitCount && !isTextarea" :class="ns.e('count')">
+        {{ textLength }} / {{ maxlength }}
+      </span>
+    </div>
+
+    <!-- 后置元素 -->
+    <div v-if="hasAppend" :class="ns.e('append')">
+      <slot name="append" />
+    </div>
+
+    <!-- 字数统计 (Textarea 外部右下角) -->
+    <span
+      v-if="showWordLimitCount && isTextarea"
+      :class="[ns.e('count'), ns.em('count', 'textarea')]"
+    >
+      {{ textLength }} / {{ maxlength }}
+    </span>
+  </div>
+</template>
+
+<style>
+@charset "UTF-8";
+/**
+ * YH-UI CSS Variables
+ * 全局 CSS 变量定义 - 业内最佳主题系统
+ */
+:root {
+  /* ==================== 密度/紧凑度系统 ==================== */
+  --yh-density-factor: 1;
+  --yh-component-size-default: 32px;
+  --yh-component-size-small: 24px;
+  --yh-component-size-large: 40px;
+  --yh-padding-default: 12px 16px;
+  --yh-padding-small: 8px 12px;
+  --yh-padding-large: 16px 20px;
+  --yh-spacing-unit: 8px;
+  /* ==================== 基础颜色 ==================== */
+  --yh-color-white: #ffffff;
+  --yh-color-black: #000000;
+  /* ==================== 颜色系统 ==================== */
+  /* 主色 */
+  --yh-color-primary: #409eff;
+  --yh-color-primary-light-1: #53a8ff;
+  --yh-color-primary-light-2: #66b1ff;
+  --yh-color-primary-light-3: #79bbff;
+  --yh-color-primary-light-4: #8cc5ff;
+  --yh-color-primary-light-5: #a0cfff;
+  --yh-color-primary-light-6: #b3d8ff;
+  --yh-color-primary-light-7: #c6e2ff;
+  --yh-color-primary-light-8: #d9ecff;
+  --yh-color-primary-light-9: #ecf5ff;
+  --yh-color-primary-dark-2: #337ecc;
+  /* 成功色 */
+  --yh-color-success: #67c23a;
+  --yh-color-success-light-3: #95d475;
+  --yh-color-success-light-5: #b3e19d;
+  --yh-color-success-light-7: #d1edc4;
+  --yh-color-success-light-9: #f0f9eb;
+  --yh-color-success-dark-2: #529b2e;
+  /* 警告色 */
+  --yh-color-warning: #e6a23c;
+  --yh-color-warning-light-3: #eebe77;
+  --yh-color-warning-light-5: #f3d19e;
+  --yh-color-warning-light-7: #f8e3c5;
+  --yh-color-warning-light-9: #fdf6ec;
+  --yh-color-warning-dark-2: #b88230;
+  /* 危险色 */
+  --yh-color-danger: #f56c6c;
+  --yh-color-danger-light-3: #f89898;
+  --yh-color-danger-light-5: #fab6b6;
+  --yh-color-danger-light-7: #fcd3d3;
+  --yh-color-danger-light-9: #fef0f0;
+  --yh-color-danger-dark-2: #c45656;
+  /* 信息色 */
+  --yh-color-info: #909399;
+  --yh-color-info-light-3: #b1b3b8;
+  --yh-color-info-light-5: #c8c9cc;
+  --yh-color-info-light-7: #dedfe0;
+  --yh-color-info-light-9: #f4f4f5;
+  --yh-color-info-dark-2: #73767a;
+  /* 文字颜色 */
+  --yh-text-color-primary: #303133;
+  --yh-text-color-regular: #606266;
+  --yh-text-color-secondary: #909399;
+  --yh-text-color-placeholder: #a8abb2;
+  --yh-text-color-disabled: #c0c4cc;
+  /* 边框颜色 */
+  --yh-border-color: #dcdfe6;
+  --yh-border-color-hover: var(--yh-color-primary);
+  --yh-border-color-light: #e4e7ed;
+  --yh-border-color-lighter: #ebeef5;
+  --yh-border-color-extra-light: #f2f6fc;
+  --yh-border-color-dark: #d4d7de;
+  --yh-border-color-darker: #cdd0d6;
+  /* 填充颜色 */
+  --yh-fill-color: #f0f2f5;
+  --yh-fill-color-light: #f5f7fa;
+  --yh-fill-color-lighter: #fafafa;
+  --yh-fill-color-extra-light: #fafcff;
+  --yh-fill-color-dark: #ebedf0;
+  --yh-fill-color-darker: #e6e8eb;
+  --yh-fill-color-blank: #ffffff;
+  /* 背景颜色 */
+  --yh-bg-color: #ffffff;
+  --yh-bg-color-page: #f2f3f5;
+  --yh-bg-color-overlay: #ffffff;
+  /* ==================== 间距系统 ==================== */
+  --yh-spacing-none: 0;
+  --yh-spacing-xs: 4px;
+  --yh-spacing-sm: 8px;
+  --yh-spacing-md: 16px;
+  --yh-spacing-lg: 24px;
+  --yh-spacing-xl: 32px;
+  --yh-spacing-xxl: 48px;
+  /* ==================== 圆角系统 ==================== */
+  --yh-radius-none: 0;
+  --yh-radius-sm: 2px;
+  --yh-radius-base: 4px;
+  --yh-radius-md: 8px;
+  --yh-radius-lg: 12px;
+  --yh-radius-xl: 16px;
+  --yh-radius-round: 20px;
+  --yh-radius-circle: 50%;
+  /* ==================== 字体系统 ==================== */
+  --yh-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  /* 字号 */
+  --yh-font-size-xs: 12px;
+  --yh-font-size-sm: 13px;
+  --yh-font-size-base: 14px;
+  --yh-font-size-md: 16px;
+  --yh-font-size-lg: 18px;
+  --yh-font-size-xl: 20px;
+  --yh-font-size-xxl: 24px;
+  /* 行高 */
+  --yh-line-height-none: 1;
+  --yh-line-height-tight: 1.25;
+  --yh-line-height-snug: 1.375;
+  --yh-line-height-normal: 1.5;
+  --yh-line-height-relaxed: 1.625;
+  --yh-line-height-loose: 2;
+  /* 字重 */
+  --yh-font-weight-light: 300;
+  --yh-font-weight-normal: 400;
+  --yh-font-weight-medium: 500;
+  --yh-font-weight-semibold: 600;
+  --yh-font-weight-bold: 700;
+  /* ==================== 阴影系统 ==================== */
+  --yh-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --yh-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --yh-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --yh-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --yh-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  /* ==================== 过渡动效 ==================== */
+  --yh-duration-fast: 150ms;
+  --yh-duration-base: 200ms;
+  --yh-duration-slow: 300ms;
+  --yh-timing-ease: ease;
+  --yh-timing-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --yh-timing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --yh-timing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --yh-timing-linear: linear;
+  --yh-transition-base: all var(--yh-duration-base) var(--yh-timing-ease-in-out);
+  --yh-transition-fast: all var(--yh-duration-fast) var(--yh-timing-ease-in-out);
+  --yh-transition-slow: all var(--yh-duration-slow) var(--yh-timing-ease-in-out);
+  /* ==================== 层级系统 ==================== */
+  --yh-z-index-normal: 1;
+  --yh-z-index-top: 1000;
+  --yh-z-index-popper: 2000;
+  --yh-z-index-overlay: 2001;
+  --yh-z-index-modal: 2002;
+  --yh-z-index-popover: 2003;
+  --yh-z-index-tooltip: 2004;
+  --yh-z-index-loading: 2005;
+  /* ==================== 组件尺寸 ==================== */
+  /* Large */
+  --yh-component-size-large: 40px;
+  --yh-component-size-large-font: 14px;
+  --yh-component-size-large-padding: 20px;
+  /* Default */
+  --yh-component-size-default: 32px;
+  --yh-component-size-default-font: 14px;
+  --yh-component-size-default-padding: 16px;
+  /* Small */
+  --yh-component-size-small: 24px;
+  --yh-component-size-small-font: 12px;
+  --yh-component-size-small-padding: 12px;
+  /* ==================== 组件语义化变量 ==================== */
+  --yh-border-radius-base: var(--yh-radius-base);
+  --yh-border-radius-small: var(--yh-radius-sm);
+  --yh-border-radius-round: var(--yh-radius-round);
+  /* Message 消息提示 */
+  --yh-message-bg-color: var(--yh-bg-color-overlay);
+  --yh-message-border-color: var(--yh-border-color-lighter);
+  --yh-message-shadow: var(--yh-shadow-lg);
+  --yh-message-text-color: var(--yh-text-color-primary);
+  --yh-message-close-color: var(--yh-text-color-secondary);
+  --yh-message-close-hover-color: var(--yh-text-color-primary);
+  /* Notification 通知 */
+  --yh-notification-bg-color: var(--yh-bg-color-overlay);
+  --yh-notification-border-color: var(--yh-border-color-lighter);
+  --yh-notification-shadow: var(--yh-shadow-lg);
+  --yh-notification-title-color: var(--yh-text-color-primary);
+  --yh-notification-content-color: var(--yh-text-color-regular);
+  /* Badge 徽标 */
+  --yh-badge-bg-color: var(--yh-color-danger);
+  --yh-badge-text-color: #ffffff;
+  --yh-badge-border-color: var(--yh-bg-color);
+  /* Card 卡片 */
+  --yh-card-bg-color: var(--yh-bg-color-overlay);
+  --yh-card-border-color: var(--yh-border-color-lighter);
+  --yh-card-shadow: var(--yh-shadow-base);
+  --yh-card-header-padding: 18px 20px;
+  --yh-card-body-padding: 20px;
+  /* Input 输入框 */
+  --yh-input-bg-color: var(--yh-fill-color-blank);
+  --yh-input-text-color: var(--yh-text-color-regular);
+  --yh-input-border-color: var(--yh-border-color);
+  --yh-input-hover-border-color: var(--yh-color-primary);
+  --yh-input-focus-border-color: var(--yh-color-primary);
+  --yh-input-placeholder-color: var(--yh-text-color-placeholder);
+  --yh-input-icon-color: var(--yh-text-color-placeholder);
+  --yh-input-disabled-bg-color: var(--yh-fill-color-light);
+  --yh-input-disabled-text-color: var(--yh-text-color-disabled);
+  --yh-input-disabled-border-color: var(--yh-border-color-light);
+  /* Image 图片 */
+  --yh-image-placeholder-bg-color: var(--yh-fill-color-light);
+  --yh-image-placeholder-text-color: var(--yh-text-color-placeholder);
+  --yh-image-error-bg-color: var(--yh-fill-color-extra-light);
+  --yh-image-error-text-color: var(--yh-text-color-placeholder);
+  /* Image Viewer 预览器 */
+  --yh-image-viewer-mask-bg-color: rgba(0, 0, 0, 0.5);
+  --yh-image-viewer-btn-bg-color: var(--yh-text-color-regular);
+  --yh-image-viewer-btn-color: #ffffff;
+  --yh-image-viewer-btn-hover-bg-color: var(--yh-color-primary);
+  /* Calendar 日历 */
+  --yh-calendar-bg: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  --yh-calendar-border-color: rgba(0, 0, 0, 0.06);
+  --yh-calendar-border-radius: var(--yh-radius-xl);
+  --yh-calendar-header-bg: rgba(255, 255, 255, 0.95);
+  --yh-calendar-header-border: rgba(0, 0, 0, 0.04);
+  --yh-calendar-header-padding: 18px 22px;
+  --yh-calendar-body-padding: 14px 18px 18px;
+  /* Calendar 尺寸 */
+  --yh-calendar-cell-height: 85px;
+  --yh-calendar-cell-height-small: 52px;
+  --yh-calendar-cell-height-large: 110px;
+  --yh-calendar-cell-radius: 10px;
+  --yh-calendar-cell-radius-small: 6px;
+  --yh-calendar-cell-radius-large: 12px;
+  /* Calendar 颜色 */
+  --yh-calendar-primary: var(--yh-color-primary);
+  --yh-calendar-primary-light: rgba(59, 130, 246, 0.1);
+  --yh-calendar-selected-bg: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+  --yh-calendar-selected-border: rgba(59, 130, 246, 0.4);
+  --yh-calendar-today-dot: var(--yh-color-primary);
+  --yh-calendar-weekend-color: #f97316;
+  --yh-calendar-disabled-color: var(--yh-text-color-disabled);
+  --yh-calendar-other-month-opacity: 0.35;
+  /* Calendar 假日 */
+  --yh-calendar-holiday-color: var(--yh-color-success);
+  --yh-calendar-holiday-bg: rgba(16, 185, 129, 0.12);
+  --yh-calendar-holiday-border: rgba(16, 185, 129, 0.25);
+  --yh-calendar-workday-color: var(--yh-color-warning);
+  --yh-calendar-workday-bg: rgba(245, 158, 11, 0.12);
+  --yh-calendar-workday-border: rgba(245, 158, 11, 0.25);
+  /* Calendar 范围选择 */
+  --yh-calendar-range-bg: rgba(59, 130, 246, 0.08);
+  --yh-calendar-range-border: rgba(59, 130, 246, 0.2);
+  /* Calendar 字体 */
+  --yh-calendar-weekday-font-size: var(--yh-font-size-sm);
+  --yh-calendar-weekday-color: var(--yh-text-color-secondary);
+  --yh-calendar-day-font-size: 15px;
+  --yh-calendar-day-color: var(--yh-text-color-primary);
+  --yh-calendar-badge-font-size: 9px;
+  /* Table 表格 */
+  --yh-table-border-color: var(--yh-border-color-lighter);
+  --yh-table-header-bg: var(--yh-fill-color-light);
+  --yh-table-header-text-color: var(--yh-text-color-primary);
+  --yh-table-header-font-weight: var(--yh-font-weight-semibold);
+  --yh-table-row-bg: var(--yh-bg-color);
+  --yh-table-row-hover-bg: var(--yh-fill-color-light);
+  --yh-table-row-stripe-bg: var(--yh-fill-color-lighter);
+  --yh-table-row-current-bg: var(--yh-color-primary-light-9);
+  --yh-table-row-selected-bg: var(--yh-color-primary-light-8);
+  --yh-table-row-success-bg: var(--yh-color-success-light-9);
+  --yh-table-row-warning-bg: var(--yh-color-warning-light-9);
+  --yh-table-text-color: var(--yh-text-color-regular);
+  --yh-table-empty-text-color: var(--yh-text-color-secondary);
+  --yh-table-font-size: var(--yh-font-size-base);
+  --yh-table-cell-padding: 12px 0;
+  --yh-table-cell-spacing: 12px;
+  --yh-table-fixed-left-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
+  --yh-table-fixed-right-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15);
+  /* ==================== 边框基础 ==================== */
+  --yh-border-width: 1px;
+  --yh-border-style: solid;
+  --yh-border: var(--yh-border-width) var(--yh-border-style) var(--yh-border-color);
+  /* ==================== 断点系统 ==================== */
+  --yh-breakpoint-xs: 0;
+  --yh-breakpoint-sm: 576px;
+  --yh-breakpoint-md: 768px;
+  --yh-breakpoint-lg: 992px;
+  --yh-breakpoint-xl: 1200px;
+  --yh-breakpoint-xxl: 1400px;
+  /* ==================== 字体系统扩展 ==================== */
+  --yh-font-family-monospace:
+    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  --yh-font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
+  /* ==================== 无障碍/聚焦系统 ==================== */
+  --yh-focus-ring-color: var(--yh-color-primary);
+  --yh-focus-ring-width: 2px;
+  --yh-focus-ring-offset: 2px;
+  --yh-focus-ring-opacity: 0.2;
+  --yh-focus-ring:
+    0 0 0 var(--yh-focus-ring-offset) var(--yh-bg-color),
+    0 0 0 calc(var(--yh-focus-ring-offset) + var(--yh-focus-ring-width)) var(--yh-focus-ring-color);
+  /* 高对比度模式支持 */
+  --yh-high-contrast-outline: 2px solid transparent;
+  --yh-high-contrast-outline-offset: 2px;
+  /* ==================== 滚动条样式 ==================== */
+  --yh-scrollbar-width: 6px;
+  --yh-scrollbar-thumb-color: var(--yh-text-color-disabled);
+  --yh-scrollbar-thumb-hover-color: var(--yh-text-color-secondary);
+  --yh-scrollbar-track-color: transparent;
+  --yh-scrollbar-thumb-radius: 3px;
+  /* ==================== 遮罩层 ==================== */
+  --yh-mask-color: rgba(0, 0, 0, 0.5);
+  --yh-mask-color-light: rgba(0, 0, 0, 0.3);
+  --yh-mask-color-extra-light: rgba(0, 0, 0, 0.1);
+}
+
+/* ==================== 暗黑模式 ==================== */
+html.dark {
+  --yh-color-primary: #409eff;
+  --yh-color-primary-light-3: #3375b9;
+  --yh-color-primary-light-5: #2a598a;
+  --yh-color-primary-light-7: #213d5b;
+  --yh-color-primary-light-9: #18222c;
+  --yh-color-primary-dark-2: #66b1ff;
+  --yh-color-success: #67c23a;
+  --yh-color-success-light-3: #4e8e2f;
+  --yh-color-success-light-5: #3e6b27;
+  --yh-color-success-light-7: #2d481f;
+  --yh-color-success-light-9: #1d2518;
+  --yh-color-warning: #e6a23c;
+  --yh-color-warning-light-3: #a77730;
+  --yh-color-warning-light-5: #7d5b28;
+  --yh-color-warning-light-7: #533f20;
+  --yh-color-warning-light-9: #292218;
+  --yh-color-danger: #f56c6c;
+  --yh-color-danger-light-3: #b25252;
+  --yh-color-danger-light-5: #854040;
+  --yh-color-danger-light-7: #582e2e;
+  --yh-color-danger-light-9: #2b1d1d;
+  --yh-color-info: #909399;
+  --yh-color-info-light-3: #6b6d71;
+  --yh-color-info-light-5: #525457;
+  --yh-color-info-light-7: #393b3e;
+  --yh-color-info-light-9: #202124;
+  --yh-text-color-primary: #e5eaf3;
+  --yh-text-color-regular: #cfd3dc;
+  --yh-text-color-secondary: #a3a6ad;
+  --yh-text-color-placeholder: #8d9095;
+  --yh-text-color-disabled: #6c6e72;
+  --yh-border-color: #4c4d4f;
+  --yh-border-color-light: #414243;
+  --yh-border-color-lighter: #363637;
+  --yh-border-color-extra-light: #2b2b2c;
+  --yh-border-color-dark: #58585b;
+  --yh-border-color-darker: #636466;
+  --yh-fill-color: #303030;
+  --yh-fill-color-light: #262727;
+  --yh-fill-color-lighter: #1d1d1d;
+  --yh-fill-color-extra-light: #191919;
+  --yh-fill-color-dark: #39393a;
+  --yh-fill-color-darker: #424243;
+  --yh-fill-color-blank: transparent;
+  --yh-bg-color: #141414;
+  --yh-bg-color-page: #0a0a0a;
+  --yh-bg-color-overlay: #1d1e1f;
+  /* 组件暗色模式覆盖 */
+  --yh-message-bg-color: var(--yh-bg-color-overlay);
+  --yh-message-border-color: var(--yh-border-color-lighter);
+  --yh-notification-bg-color: var(--yh-bg-color-overlay);
+  --yh-notification-border-color: var(--yh-border-color-lighter);
+  --yh-badge-border-color: var(--yh-bg-color);
+  --yh-card-bg-color: var(--yh-bg-color-overlay);
+  --yh-card-border-color: var(--yh-border-color-lighter);
+  /* Calendar 暗黑模式 */
+  --yh-calendar-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  --yh-calendar-border-color: rgba(255, 255, 255, 0.08);
+  --yh-calendar-header-bg: rgba(30, 30, 30, 0.95);
+  --yh-calendar-header-border: rgba(255, 255, 255, 0.06);
+  --yh-calendar-day-color: var(--yh-text-color-primary);
+  --yh-calendar-weekday-color: var(--yh-text-color-secondary);
+  --yh-calendar-selected-bg: linear-gradient(
+    135deg,
+    rgba(59, 130, 246, 0.2) 0%,
+    rgba(59, 130, 246, 0.1) 100%
+  );
+  /* Table 暗黑模式 */
+  --yh-table-border-color: var(--yh-border-color-lighter);
+  --yh-table-header-bg: var(--yh-fill-color-dark);
+  --yh-table-header-text-color: var(--yh-text-color-primary);
+  --yh-table-row-bg: var(--yh-bg-color);
+  --yh-table-row-hover-bg: var(--yh-fill-color);
+  --yh-table-row-stripe-bg: var(--yh-fill-color-light);
+  --yh-table-row-current-bg: var(--yh-color-primary-light-9);
+  --yh-table-row-selected-bg: var(--yh-color-primary-light-9);
+  --yh-table-row-success-bg: var(--yh-color-success-light-9);
+  --yh-table-row-warning-bg: var(--yh-color-warning-light-9);
+  --yh-table-fixed-left-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.3);
+  --yh-table-fixed-right-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.3);
+  /* 遮罩层暗黑模式 */
+  --yh-mask-color: rgba(0, 0, 0, 0.7);
+  --yh-mask-color-light: rgba(0, 0, 0, 0.5);
+  --yh-mask-color-extra-light: rgba(0, 0, 0, 0.3);
+  /* 滚动条暗黑模式 */
+  --yh-scrollbar-thumb-color: var(--yh-fill-color-darker);
+  --yh-scrollbar-thumb-hover-color: var(--yh-text-color-placeholder);
+}
+
+/* ==================== 减少动画偏好支持 ==================== */
+@media (prefers-reduced-motion: reduce) {
+  :root,
+  html.dark {
+    --yh-duration-fast: 0ms;
+    --yh-duration-base: 0ms;
+    --yh-duration-slow: 0ms;
+    --yh-transition-base: none;
+    --yh-transition-fast: none;
+    --yh-transition-slow: none;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+/* ==================== 高对比度模式支持 ==================== */
+@media (prefers-contrast: high) {
+  :root {
+    --yh-border-color: #000000;
+    --yh-border-color-light: #333333;
+    --yh-text-color-primary: #000000;
+    --yh-text-color-regular: #1a1a1a;
+    --yh-focus-ring-width: 3px;
+    --yh-focus-ring-color: #000000;
+  }
+  html.dark {
+    --yh-border-color: #ffffff;
+    --yh-border-color-light: #cccccc;
+    --yh-text-color-primary: #ffffff;
+    --yh-text-color-regular: #e5e5e5;
+    --yh-focus-ring-color: #ffffff;
+  }
+}
+/* ==================== 强制颜色模式支持 (Windows 高对比度) ==================== */
+@media (forced-colors: active) {
+  :root {
+    --yh-color-primary: LinkText;
+    --yh-border-color: ButtonBorder;
+    --yh-bg-color: Canvas;
+    --yh-text-color-primary: CanvasText;
+    --yh-focus-ring-color: Highlight;
+  }
+}
+@keyframes yh-input-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.yh-input {
+  --yh-input-height: var(--yh-component-size-default);
+  --yh-input-font-size: var(--yh-font-size-base);
+  --yh-input-padding: 0 var(--yh-spacing-md);
+  --yh-input-border-color: var(--yh-border-color);
+  --yh-input-hover-border-color: var(--yh-input-focus-border-color);
+  --yh-input-focus-border-color: var(--yh-color-primary);
+  --yh-input-bg-color: var(--yh-fill-color-blank);
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  vertical-align: middle;
+  box-sizing: border-box;
+  font-size: var(--yh-input-font-size);
+}
+.yh-input__wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  padding: var(--yh-input-padding);
+  background-color: var(--yh-input-bg-color);
+  border: 1px solid var(--yh-input-border-color);
+  border-radius: var(--yh-radius-base);
+  transition: var(--yh-transition-base);
+  box-sizing: border-box;
+  position: relative;
+}
+.yh-input__wrapper:hover {
+  border-color: var(--yh-input-hover-border-color);
+}
+
+.yh-input.is-focused .yh-input__wrapper {
+  border-color: var(--yh-input-focus-border-color);
+  box-shadow: 0 0 0 2px var(--yh-color-primary-light-8);
+  z-index: 2;
+}
+
+.yh-input.is-disabled .yh-input__wrapper {
+  background-color: var(--yh-fill-color-light);
+  border-color: var(--yh-border-color-light);
+  cursor: not-allowed;
+}
+
+.yh-input.is-disabled .yh-input__inner {
+  color: var(--yh-text-color-disabled);
+  cursor: not-allowed;
+}
+
+.yh-input--variant-filled .yh-input__wrapper {
+  background-color: var(--yh-fill-color-light);
+  border-color: transparent;
+}
+.yh-input--variant-filled .yh-input__wrapper:hover {
+  background-color: var(--yh-fill-color);
+  border-color: transparent;
+}
+
+.yh-input--variant-filled.is-focused .yh-input__wrapper {
+  background-color: var(--yh-fill-color-blank);
+  border-color: var(--yh-input-focus-border-color);
+  box-shadow: 0 0 0 2px var(--yh-color-primary-light-8);
+}
+
+.yh-input--variant-borderless .yh-input__wrapper {
+  border-color: transparent !important;
+  box-shadow: none !important;
+  background-color: transparent;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.yh-input--variant-underlined .yh-input__wrapper {
+  border-top-color: transparent;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-radius: 0;
+  background-color: transparent;
+  padding-left: 0;
+  padding-right: 0;
+}
+.yh-input--variant-underlined .yh-input__wrapper:hover {
+  border-bottom-color: var(--yh-input-hover-border-color);
+  border-top-color: transparent;
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+
+.yh-input--variant-underlined.is-focused .yh-input__wrapper {
+  border-bottom-color: var(--yh-input-focus-border-color);
+  border-top-color: transparent;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  box-shadow: 0 2px 0 0 var(--yh-color-primary-light-8);
+}
+
+.yh-input--status-success > .yh-input__wrapper, .yh-input--status-success > .yh-input__wrapper:hover {
+  border-color: var(--yh-color-success) !important;
+}
+.yh-input--status-success.is-focused > .yh-input__wrapper {
+  box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.2);
+}
+
+.yh-input--status-warning > .yh-input__wrapper, .yh-input--status-warning > .yh-input__wrapper:hover {
+  border-color: var(--yh-color-warning) !important;
+}
+.yh-input--status-warning.is-focused > .yh-input__wrapper {
+  box-shadow: 0 0 0 2px rgba(230, 162, 60, 0.2);
+}
+
+.yh-input--status-error > .yh-input__wrapper, .yh-input--status-error > .yh-input__wrapper:hover {
+  border-color: var(--yh-color-danger) !important;
+}
+.yh-input--status-error.is-focused > .yh-input__wrapper {
+  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
+}
+
+.yh-input.is-loading {
+  cursor: wait;
+}
+.yh-input.is-loading .yh-input__inner {
+  cursor: wait;
+}
+
+.yh-input__loading {
+  color: var(--yh-text-color-placeholder);
+  font-size: 16px;
+  display: inline-flex;
+  align-items: center;
+}
+.yh-input__loading .yh-input__loading-spin {
+  animation: yh-input-spin 1s linear infinite;
+}
+
+.yh-input__prefix-text {
+  color: var(--yh-text-color-secondary);
+  font-size: inherit;
+  white-space: nowrap;
+  margin-right: 4px;
+  user-select: none;
+  pointer-events: none;
+}
+
+.yh-input__suffix-text {
+  color: var(--yh-text-color-secondary);
+  font-size: inherit;
+  white-space: nowrap;
+  margin-left: 4px;
+  user-select: none;
+  pointer-events: none;
+}
+
+.yh-input__inner {
+  flex: 1;
+  height: calc(var(--yh-input-height) - 2px);
+  line-height: calc(var(--yh-input-height) - 2px);
+  color: var(--yh-text-color-regular);
+  font-size: inherit;
+  background: none;
+  border: none;
+  outline: none;
+  padding: 0;
+  box-sizing: border-box;
+  appearance: none;
+}
+.yh-input__inner::placeholder {
+  color: var(--yh-text-color-placeholder);
+}
+
+.yh-input.is-textarea {
+  flex-direction: column;
+  align-items: stretch;
+  display: inline-flex;
+  vertical-align: bottom;
+}
+.yh-input.is-textarea .yh-input__wrapper {
+  padding: 0;
+  border: none;
+  box-shadow: none;
+  background-color: transparent;
+}
+.yh-input.is-textarea .yh-input__inner {
+  border: 1px solid var(--yh-input-border-color);
+  border-radius: var(--yh-radius-base);
+  transition: var(--yh-transition-base);
+  padding: 8px 12px;
+  line-height: 1.5;
+  height: auto;
+  min-height: 32px;
+  width: 100%;
+  box-sizing: border-box;
+}
+.yh-input.is-textarea .yh-input__inner:hover {
+  border-color: var(--yh-input-hover-border-color);
+}
+.yh-input.is-textarea.is-focused .yh-input__inner {
+  border-color: var(--yh-input-focus-border-color);
+  box-shadow: 0 0 0 2px var(--yh-color-primary-light-8);
+}
+.yh-input.is-textarea.yh-input--status-success .yh-input__inner {
+  border-color: var(--yh-color-success) !important;
+}
+.yh-input.is-textarea.yh-input--status-warning .yh-input__inner {
+  border-color: var(--yh-color-warning) !important;
+}
+.yh-input.is-textarea.yh-input--status-error .yh-input__inner {
+  border-color: var(--yh-color-danger) !important;
+}
+.yh-input__suffix {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 100%;
+  margin-left: 8px;
+  flex-shrink: 0;
+}
+
+.yh-input__prefix {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.yh-input__icon {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color var(--yh-duration-base);
+  color: var(--yh-text-color-placeholder);
+  font-size: 16px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.yh-input__icon.yh-input__clear, .yh-input__icon.yh-input__password {
+  cursor: pointer;
+}
+.yh-input__icon.yh-input__clear:hover, .yh-input__icon.yh-input__password:hover {
+  color: var(--yh-text-color-regular);
+}
+
+.yh-input__count {
+  display: inline-flex;
+  align-items: center;
+  color: var(--yh-text-color-placeholder);
+  font-size: 12px;
+  margin-left: 8px;
+  white-space: nowrap;
+  user-select: none;
+  pointer-events: none;
+}
+.yh-input__count--textarea {
+  display: block;
+  text-align: right;
+  margin-top: 4px;
+  margin-left: 0;
+  padding: 0;
+  line-height: 1;
+  background: transparent;
+}
+
+.yh-input--large {
+  --yh-input-height: var(--yh-component-size-large);
+}
+
+.yh-input--small {
+  --yh-input-height: var(--yh-component-size-small);
+  font-size: var(--yh-font-size-xs);
+}
+
+.yh-input.yh-input-group {
+  display: inline-flex;
+  align-items: stretch;
+}
+.yh-input.yh-input-group > .yh-input__prepend,
+.yh-input.yh-input-group > .yh-input__append {
+  padding: 0 16px;
+  white-space: nowrap;
+  background-color: var(--yh-fill-color-light);
+  color: var(--yh-text-color-secondary);
+  border: 1px solid var(--yh-input-border-color);
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  transition: border-color var(--yh-duration-base);
+}
+.yh-input.yh-input-group > .yh-input__prepend .yh-button,
+.yh-input.yh-input-group > .yh-input__prepend .yh-select,
+.yh-input.yh-input-group > .yh-input__append .yh-button,
+.yh-input.yh-input-group > .yh-input__append .yh-select {
+  margin: -1px -16px;
+  border-radius: 0;
+  height: var(--yh-input-height, 32px);
+}
+.yh-input.yh-input-group > .yh-input__prepend .yh-button > .yh-input__wrapper,
+.yh-input.yh-input-group > .yh-input__prepend .yh-button > .yh-select__wrapper,
+.yh-input.yh-input-group > .yh-input__prepend .yh-select > .yh-input__wrapper,
+.yh-input.yh-input-group > .yh-input__prepend .yh-select > .yh-select__wrapper,
+.yh-input.yh-input-group > .yh-input__append .yh-button > .yh-input__wrapper,
+.yh-input.yh-input-group > .yh-input__append .yh-button > .yh-select__wrapper,
+.yh-input.yh-input-group > .yh-input__append .yh-select > .yh-input__wrapper,
+.yh-input.yh-input-group > .yh-input__append .yh-select > .yh-select__wrapper {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  border-radius: 0;
+}
+.yh-input.yh-input-group > .yh-input__prepend {
+  border-right: none;
+  border-radius: var(--yh-radius-base) 0 0 var(--yh-radius-base);
+}
+.yh-input.yh-input-group > .yh-input__append {
+  border-left: none;
+  border-radius: 0 var(--yh-radius-base) var(--yh-radius-base) 0;
+}
+.yh-input.yh-input-group > .yh-input__wrapper {
+  flex: 1;
+  border-radius: 0;
+  z-index: 1;
+  transition: border-color var(--yh-duration-base), box-shadow var(--yh-duration-base);
+}
+.yh-input.yh-input-group > .yh-input__wrapper:hover, .yh-input.yh-input-group > .yh-input__wrapper:focus-within {
+  z-index: 2;
+}
+.yh-input.yh-input-group.is-prepend:not(.is-append) > .yh-input__wrapper {
+  border-radius: 0 var(--yh-radius-base) var(--yh-radius-base) 0;
+}
+.yh-input.yh-input-group.is-append:not(.is-prepend) > .yh-input__wrapper {
+  border-radius: var(--yh-radius-base) 0 0 var(--yh-radius-base);
+}
+.yh-input.yh-input-group:hover > .yh-input__prepend,
+.yh-input.yh-input-group:hover > .yh-input__append {
+  border-color: var(--yh-input-hover-border-color);
+}
+.yh-input.yh-input-group:hover > .yh-input__wrapper {
+  border-color: var(--yh-input-hover-border-color);
+}
+.yh-input.yh-input-group.is-focused > .yh-input__wrapper {
+  z-index: 3;
+}
+</style>