@fy-/fws-vue-core 3.0.3 → 3.0.5

package/src/components/ui/DefaultInput.vue

@@ -0,0 +1,768 @@
+<script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core'
+import { computed, shallowRef, toRef } from 'vue'
+import DefaultTagInput from './DefaultTagInput.vue'
+
+type modelValueType = string | number | string[] | number[] | Record<string, any> | undefined
+type checkboxValueType = any[] | Set<any> | undefined | boolean
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    showLabel?: boolean
+    label?: string
+    type?: string
+    placeholder?: string
+    autocomplete?: string
+    checkboxTrueValue?: string | boolean
+    checkboxFalseValue?: string | boolean
+    req?: boolean
+    modelValue?: modelValueType
+    checkboxValue?: checkboxValueType
+    options?: string[][]
+    dpOptions?: Record<string, any>
+    help?: string
+    error?: string
+    color?: string
+    disabled?: boolean
+    maxLengthPerTag?: number
+    copyButton?: boolean
+    maxRange?: number
+    minRange?: number
+    maxTags?: number
+  }>(),
+  {
+    showLabel: true,
+    type: 'text',
+    req: false,
+    options: () => [],
+    checkboxTrueValue: true,
+    checkboxFalseValue: false,
+    disabled: false,
+    maxLengthPerTag: 0,
+    maxRange: 100,
+    minRange: 0,
+    copyButton: false,
+    dpOptions: () => ({}),
+  },
+)
+
+const inputRef = shallowRef<HTMLInputElement>()
+const errorProp = toRef(props, 'error')
+
+const checkErrors = computed(() => errorProp.value || null)
+
+function focus() { inputRef.value?.focus() }
+function blur() { inputRef.value?.blur() }
+function getInputRef() { return inputRef.value }
+
+const emit = defineEmits([
+  'update:modelValue',
+  'update:checkboxValue',
+  'focus',
+  'blur',
+])
+
+const handleFocus = useDebounceFn(() => { emit('focus', props.id) }, 50)
+const handleBlur = useDebounceFn(() => { emit('blur', props.id) }, 50)
+
+const copyToClipboard = useDebounceFn(() => {
+  if (props.modelValue) navigator.clipboard.writeText(props.modelValue.toString())
+}, 200)
+
+const model = computed<modelValueType>({
+  get: () => props.modelValue,
+  set: (v) => { emit('update:modelValue', v) },
+})
+
+const modelCheckbox = computed<checkboxValueType>({
+  get: () => props.checkboxValue,
+  set: (v) => { emit('update:checkboxValue', v) },
+})
+
+const rangePercent = computed(() => {
+  const val = (model.value as number || props.minRange) - props.minRange
+  return (val / (props.maxRange - props.minRange)) * 100
+})
+
+defineExpose({ focus, blur, getInputRef })
+</script>
+
+<template>
+  <div class="fv-input-wrap">
+    <!-- TEXT, PASSWORD, EMAIL, SEARCH, DATE, DATETIME, URL, TEXTAREA, SELECT, PHONE, TEL, RANGE, CHIPS, TAGS -->
+    <template
+      v-if="[
+        'text', 'password', 'email', 'search', 'date', 'datetime', 'url',
+        'textarea', 'textarea-grow', 'select', 'phone', 'tel', 'range',
+        'chips', 'tags',
+      ].includes(type)"
+    >
+      <div class="fv-input-group">
+        <!-- Standard input types -->
+        <div
+          v-if="[
+            'text', 'phone', 'tel', 'password', 'range', 'email',
+            'search', 'url', 'date', 'datetime',
+          ].includes(type)"
+        >
+          <label
+            v-if="showLabel && label"
+            :for="id"
+            :class="['fv-input__label', { 'fv-input__label--error': checkErrors }]"
+          >
+            {{ label }}
+            <template v-if="type === 'range'">({{ model }})</template>
+          </label>
+
+          <div class="fv-input__field-wrap">
+            <input
+              :id="id"
+              ref="inputRef"
+              v-model="model"
+              :type="type === 'phone' ? 'tel' : type"
+              :name="id"
+              :class="['fv-input__field', { 'fv-input__field--error': checkErrors, 'fv-input__field--range': type === 'range', 'fv-input__field--copy': copyButton }]"
+              :autocomplete="autocomplete"
+              :min="type === 'range' ? minRange : undefined"
+              :max="type === 'range' ? maxRange : undefined"
+              :placeholder="placeholder"
+              :disabled="disabled"
+              :aria-describedby="help ? `${id}-help` : undefined"
+              :required="req"
+              :aria-invalid="checkErrors ? 'true' : 'false'"
+              @focus="handleFocus"
+              @blur="handleBlur"
+            >
+            <button
+              v-if="copyButton && model"
+              type="button"
+              aria-label="Copy to clipboard"
+              class="fv-input__copy-btn"
+              @click="copyToClipboard"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
+                <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Range ticks -->
+          <template v-if="type === 'range'">
+            <div class="fv-input__range-meta">
+              <div class="fv-input__range-labels">
+                <span>{{ minRange }}</span>
+                <span>{{ ((maxRange - minRange) / 3 + minRange).toFixed(0) }}</span>
+                <span>{{ (((maxRange - minRange) / 3) * 2 + minRange).toFixed(0) }}</span>
+                <span>{{ maxRange }}</span>
+              </div>
+              <div class="fv-input__range-track">
+                <div class="fv-input__range-fill" :style="{ width: `${rangePercent}%` }" />
+              </div>
+            </div>
+          </template>
+        </div>
+
+        <!-- CHIPS / TAGS -->
+        <div v-if="type === 'chips' || type === 'tags'">
+          <label
+            v-if="showLabel && (label || placeholder)"
+            :for="id"
+            class="fv-input__label"
+          >
+            {{ label || placeholder }}
+          </label>
+          <!-- @vue-skip -->
+          <DefaultTagInput
+            :id="id"
+            v-model="model"
+            :disabled="disabled"
+            :color="color"
+            :error="checkErrors"
+            :max-tags="maxTags"
+            :copy-button="copyButton"
+            :help="help"
+            :max-lenght-per-tag="maxLengthPerTag"
+          />
+        </div>
+
+        <!-- TEXTAREA AUTO-GROW -->
+        <div v-else-if="type === 'textarea-grow'">
+          <label v-if="showLabel && label" :for="id" class="fv-input__label">{{ label }}</label>
+          <div class="fv-input__grow-wrap" :data-replicated-value="model?.toString() || ''">
+            <!-- @vue-skip -->
+            <textarea
+              :id="id"
+              ref="inputRef"
+              v-model="model"
+              :name="id"
+              :class="['fv-input__textarea', { 'fv-input__field--error': checkErrors }]"
+              :placeholder="placeholder"
+              :disabled="disabled"
+              :aria-describedby="help ? `${id}-help` : undefined"
+              :required="req"
+              :aria-invalid="checkErrors ? 'true' : 'false'"
+              @focus="handleFocus"
+              @blur="handleBlur"
+            />
+          </div>
+          <div
+            v-if="dpOptions.counterMax && model"
+            :class="['fv-input__counter', { 'fv-input__counter--over': model.toString().length > dpOptions.counterMax }]"
+          >
+            {{ model.toString().length }} / {{ dpOptions.counterMax }}
+          </div>
+        </div>
+
+        <!-- TEXTAREA REGULAR -->
+        <div v-else-if="type === 'textarea'">
+          <label v-if="showLabel && label" :for="id" class="fv-input__label">{{ label }}</label>
+          <!-- @vue-skip -->
+          <textarea
+            :id="id"
+            ref="inputRef"
+            v-model="model"
+            :name="id"
+            :class="['fv-input__textarea fv-input__textarea--fixed', { 'fv-input__field--error': checkErrors }]"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            :aria-describedby="help ? `${id}-help` : undefined"
+            :required="req"
+            :aria-invalid="checkErrors ? 'true' : 'false'"
+            @focus="handleFocus"
+            @blur="handleBlur"
+          />
+          <div
+            v-if="dpOptions.counterMax && model"
+            :class="['fv-input__counter', { 'fv-input__counter--over': model.toString().length > dpOptions.counterMax }]"
+          >
+            {{ model.toString().length }} / {{ dpOptions.counterMax }}
+          </div>
+        </div>
+
+        <!-- SELECT -->
+        <div v-else-if="type === 'select'">
+          <label v-if="showLabel && label" :for="id" class="fv-input__label">{{ label }}</label>
+          <select
+            :id="id"
+            ref="inputRef"
+            v-model="model"
+            :name="id"
+            :disabled="disabled"
+            :aria-describedby="help ? `${id}-help` : undefined"
+            :required="req"
+            :class="['fv-input__select', { 'fv-input__field--error': checkErrors }]"
+            :aria-invalid="checkErrors ? 'true' : 'false'"
+            @focus="handleFocus"
+            @blur="handleBlur"
+          >
+            <option
+              v-for="opt in (options || [])"
+              :key="opt[0]?.toString()"
+              :value="opt[0]"
+            >
+              {{ opt[1] }}
+            </option>
+          </select>
+        </div>
+      </div>
+    </template>
+
+    <!-- TOGGLE -->
+    <template v-else-if="type === 'toggle'">
+      <label :class="['fv-toggle', { 'fv-toggle--disabled': disabled }]">
+        <input
+          v-model="modelCheckbox"
+          type="checkbox"
+          :true-value="checkboxTrueValue"
+          :false-value="checkboxFalseValue"
+          :disabled="disabled"
+          class="fv-toggle__input"
+          :aria-invalid="checkErrors ? 'true' : 'false'"
+          :aria-describedby="help ? `${id}-help` : undefined"
+          :aria-checked="modelCheckbox ? 'true' : 'false'"
+          role="switch"
+          @focus="handleFocus"
+          @blur="handleBlur"
+        >
+        <div class="fv-toggle__track" />
+        <span class="fv-toggle__label">
+          {{ label }}
+          <p v-if="help" :id="`${id}-help`" class="fv-toggle__help">{{ help }}</p>
+        </span>
+      </label>
+    </template>
+
+    <!-- CHECKBOX / RADIO -->
+    <template v-else-if="type === 'checkbox' || type === 'radio'">
+      <div :class="['fv-check', { 'fv-check--disabled': disabled }]">
+        <div class="fv-check__box">
+          <input
+            :id="id"
+            ref="inputRef"
+            v-model="modelCheckbox"
+            :class="['fv-check__input', { 'fv-input__field--error': checkErrors }]"
+            :aria-describedby="help ? `${id}-help` : undefined"
+            :type="type"
+            :true-value="checkboxTrueValue"
+            :false-value="checkboxFalseValue"
+            :disabled="disabled"
+            :aria-invalid="checkErrors ? 'true' : 'false'"
+            @focus="handleFocus"
+            @blur="handleBlur"
+          >
+        </div>
+        <div class="fv-check__content">
+          <label :for="id" class="fv-check__label">{{ label }}</label>
+          <p v-if="help" :id="`${id}-help`" class="fv-check__help">{{ help }}</p>
+        </div>
+      </div>
+    </template>
+
+    <!-- Error message -->
+    <p v-if="checkErrors" class="fv-input__error" role="alert" aria-live="assertive">
+      <svg class="fv-input__error-icon" fill="currentColor" viewBox="0 0 20 20">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+      </svg>
+      {{ checkErrors }}
+    </p>
+
+    <!-- Help text -->
+    <p
+      v-if="help && !['checkbox', 'radio', 'toggle'].includes(type)"
+      :id="`${id}-help`"
+      class="fv-input__help"
+    >
+      {{ help }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+/* ═══ Input system — Modern focus rings, clean labels ═══ */
+.fv-input-wrap { width: 100%; }
+.fv-input-group { display: flex; flex-direction: column; gap: 0.125rem; }
+
+/* Label */
+.fv-input__label {
+  display: block;
+  margin-bottom: 0.375rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: #171717;
+}
+:is(.dark) .fv-input__label { color: #f5f5f5; }
+/* Superhuman/Cursor warm crimson for errors — not cold red */
+.fv-input__label--error { color: #cf2d56; }
+:is(.dark) .fv-input__label--error { color: #FF6363; }
+
+/* Field wrapper */
+.fv-input__field-wrap { position: relative; }
+
+/* Standard input field — Vercel shadow-as-border + Stripe focus ring */
+.fv-input__field {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border-radius: 6px;
+  border: none;
+  background: #ffffff;
+  color: #171717;
+  transition: box-shadow 200ms;
+  outline: none;
+
+  /* Vercel: shadow-as-border — smoother than CSS border at radius edges */
+  box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+}
+.fv-input__field::placeholder { color: #a3a3a3; opacity: 0.8; }
+
+/* Vercel/Stripe dual-mechanism focus: outline (visible) + shadow (glow) */
+.fv-input__field:focus {
+  box-shadow:
+    0 0 0 1px var(--color-fv-primary-500, #7c3aed),
+    0 0 0 4px rgba(124, 58, 237, 0.1);
+}
+
+:is(.dark) .fv-input__field {
+  background: rgba(255, 255, 255, 0.02);
+  color: #f5f5f5;
+  box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px;
+  color-scheme: dark;
+}
+:is(.dark) .fv-input__field::placeholder { color: #6a6b6c; }
+:is(.dark) .fv-input__field:focus {
+  box-shadow:
+    0 0 0 1px var(--color-fv-primary-400, #a78bfa),
+    0 0 0 4px rgba(167, 139, 250, 0.15);
+}
+
+/* Raycast two-layer error: border shift + translucent tint */
+.fv-input__field--error {
+  box-shadow: 0 0 0 1px #FF6363 !important;
+  background: hsla(0, 100%, 69%, 0.04) !important;
+}
+.fv-input__field--error:focus {
+  box-shadow:
+    0 0 0 1px #FF6363,
+    0 0 0 4px hsla(0, 100%, 69%, 0.12) !important;
+}
+
+.fv-input__field--copy { padding-right: 2.5rem; }
+
+/* Range input */
+.fv-input__field--range {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 0.75rem;
+  cursor: pointer;
+}
+
+/* Copy button */
+.fv-input__copy-btn {
+  position: absolute;
+  top: 50%;
+  right: 0.5rem;
+  transform: translateY(-50%);
+  padding: 0.25rem;
+  color: #737373;
+  background: none;
+  border: none;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  transition: color 150ms;
+}
+.fv-input__copy-btn:hover { color: var(--color-fv-primary-600, #7c3aed); }
+:is(.dark) .fv-input__copy-btn { color: #a3a3a3; }
+:is(.dark) .fv-input__copy-btn:hover { color: var(--color-fv-primary-400, #a78bfa); }
+
+/* Range meta */
+.fv-input__range-meta { margin-top: 0.5rem; }
+.fv-input__range-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.6875rem;
+  color: #737373;
+  padding: 0 0.125rem;
+}
+:is(.dark) .fv-input__range-labels { color: #a3a3a3; }
+
+.fv-input__range-track {
+  width: 100%;
+  height: 0.25rem;
+  background: #e5e5e5;
+  border-radius: 9999px;
+  margin-top: 0.25rem;
+  overflow: hidden;
+}
+:is(.dark) .fv-input__range-track { background: rgba(255, 255, 255, 0.1); }
+
+.fv-input__range-fill {
+  height: 100%;
+  background: var(--color-fv-primary-500, #7c3aed);
+  border-radius: 9999px;
+  transition: width 100ms;
+}
+:is(.dark) .fv-input__range-fill { background: var(--color-fv-primary-400, #a78bfa); }
+
+/* Textarea — same shadow-as-border system */
+.fv-input__textarea {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border-radius: 6px;
+  border: none;
+  background: #ffffff;
+  color: #171717;
+  transition: box-shadow 200ms;
+  outline: none;
+  resize: vertical;
+  box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+}
+.fv-input__textarea:focus {
+  box-shadow:
+    0 0 0 1px var(--color-fv-primary-500, #7c3aed),
+    0 0 0 4px rgba(124, 58, 237, 0.1);
+}
+:is(.dark) .fv-input__textarea {
+  background: rgba(255, 255, 255, 0.02);
+  color: #f5f5f5;
+  box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px;
+}
+:is(.dark) .fv-input__textarea:focus {
+  box-shadow:
+    0 0 0 1px var(--color-fv-primary-400, #a78bfa),
+    0 0 0 4px rgba(167, 139, 250, 0.15);
+}
+.fv-input__textarea--fixed {
+  min-height: 100px;
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+/* Auto-grow textarea */
+.fv-input__grow-wrap { display: grid; }
+.fv-input__grow-wrap::after {
+  content: attr(data-replicated-value) " ";
+  white-space: pre-wrap;
+  visibility: hidden;
+  max-height: 50vh;
+  overflow: hidden;
+  grid-area: 1 / 1 / 2 / 2;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border: 1px solid transparent;
+}
+.fv-input__grow-wrap > textarea {
+  resize: none;
+  overflow-y: auto;
+  max-height: 50vh;
+  grid-area: 1 / 1 / 2 / 2;
+}
+
+/* Counter */
+.fv-input__counter {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #737373;
+  text-align: right;
+}
+:is(.dark) .fv-input__counter { color: #a3a3a3; }
+.fv-input__counter--over { color: #ef4444; }
+:is(.dark) .fv-input__counter--over { color: #f87171; }
+
+/* Select — Notion whisper-border light, shadow-as-border system */
+.fv-input__select {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border-radius: 6px;
+  border: none;
+  background: #ffffff;
+  color: #171717;
+  -webkit-appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.25rem;
+  transition: box-shadow 200ms;
+  outline: none;
+  cursor: pointer;
+  box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+}
+.fv-input__select:focus {
+  box-shadow:
+    0 0 0 1px var(--color-fv-primary-500, #7c3aed),
+    0 0 0 4px rgba(124, 58, 237, 0.1);
+}
+:is(.dark) .fv-input__select {
+  background-color: rgba(255, 255, 255, 0.02);
+  color: #f5f5f5;
+  box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  /* Force dark native dropdown popup (Chrome renders white otherwise) */
+  color-scheme: dark;
+}
+:is(.dark) .fv-input__select option {
+  background: #1a1a1e;
+  color: #f5f5f5;
+}
+:is(.dark) .fv-input__select:focus {
+  box-shadow:
+    0 0 0 1px var(--color-fv-primary-400, #a78bfa),
+    0 0 0 4px rgba(167, 139, 250, 0.15);
+}
+
+/* ═══ Toggle — Modern iOS-style switch ═══ */
+.fv-toggle {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+.fv-toggle--disabled { opacity: 0.6; cursor: not-allowed; }
+
+.fv-toggle__input { position: absolute; width: 0; height: 0; opacity: 0; }
+
+.fv-toggle__track {
+  position: relative;
+  flex-shrink: 0;
+  width: 2.75rem;
+  height: 1.5rem;
+  border-radius: 9999px;
+  background: #d4d4d8;
+  transition: background-color 200ms;
+}
+.fv-toggle__track::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  background: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+:is(.dark) .fv-toggle__track { background: rgba(255, 255, 255, 0.1); }
+
+.fv-toggle__input:checked + .fv-toggle__track {
+  background: var(--color-fv-primary-600, #7c3aed);
+}
+.fv-toggle__input:checked + .fv-toggle__track::after {
+  transform: translateX(1.25rem);
+}
+.fv-toggle__input:focus-visible + .fv-toggle__track {
+  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
+}
+
+.fv-toggle__label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #171717;
+}
+:is(.dark) .fv-toggle__label { color: #d4d4d4; }
+
+.fv-toggle__help {
+  font-size: 0.75rem;
+  color: #737373;
+  margin-top: 0.125rem;
+}
+:is(.dark) .fv-toggle__help { color: #a3a3a3; }
+
+/* ═══ Checkbox / Radio ═══ */
+.fv-check {
+  display: flex;
+  margin-bottom: 0.75rem;
+  gap: 0.5rem;
+}
+.fv-check--disabled { opacity: 0.6; cursor: not-allowed; }
+
+.fv-check__box {
+  display: flex;
+  align-items: center;
+  padding-top: 0.125rem;
+}
+.fv-check__input {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.25rem;
+  border: 1.5px solid #d4d4d8;
+  background: #fafafa;
+  color: var(--color-fv-primary-600, #7c3aed);
+  cursor: pointer;
+  transition: border-color 150ms, box-shadow 150ms;
+}
+.fv-check__input:focus {
+  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
+}
+:is(.dark) .fv-check__input {
+  background: rgba(38, 38, 42, 0.8);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+.fv-check__input[type="radio"] { border-radius: 50%; }
+
+.fv-check__label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #171717;
+  cursor: pointer;
+}
+:is(.dark) .fv-check__label { color: #d4d4d4; }
+.fv-check--disabled .fv-check__label { cursor: not-allowed; }
+
+.fv-check__help {
+  font-size: 0.75rem;
+  color: #737373;
+  margin-top: 0.125rem;
+}
+:is(.dark) .fv-check__help { color: #a3a3a3; }
+
+/* ═══ Error & Help ═══ */
+.fv-input__error {
+  display: flex;
+  align-items: center;
+  margin-top: 0.25rem;
+  font-size: 0.8125rem;
+  color: #dc2626;
+}
+:is(.dark) .fv-input__error { color: #f87171; }
+
+.fv-input__error-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  margin-right: 0.375rem;
+  flex-shrink: 0;
+}
+
+.fv-input__help {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #737373;
+}
+:is(.dark) .fv-input__help { color: #a3a3a3; }
+
+/* ═══ Range slider thumb ═══ */
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  background: var(--color-fv-primary-500, #7c3aed);
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  margin-top: -0.375rem;
+}
+input[type="range"]::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  background: var(--color-fv-primary-500, #7c3aed);
+  cursor: pointer;
+  border: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+input[type="range"]::-webkit-slider-runnable-track {
+  height: 0.375rem;
+  border-radius: 9999px;
+  background: #e5e5e5;
+}
+:is(.dark) input[type="range"]::-webkit-slider-runnable-track {
+  background: rgba(255, 255, 255, 0.1);
+}
+input[type="range"]::-moz-range-track {
+  height: 0.375rem;
+  border-radius: 9999px;
+  background: #e5e5e5;
+}
+:is(.dark) input[type="range"]::-moz-range-track {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Disabled state */
+.fv-input__field:disabled,
+.fv-input__textarea:disabled,
+.fv-input__select:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fv-toggle__track::after { transition: none; }
+}
+</style>