@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system117.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system117.js","names":[],"sources":["../src/components/BInputNumber/BInputNumber.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BInputStatus, BInputVariant } from '@/components/BInput/types.ts';\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, ref, useSlots, watch } from 'vue';\nimport type { BInputNumberFocusOptions, BInputNumberStepInfo } from './types.ts';\n\ndefineOptions({ inheritAttrs: false });\n\nconst slots = useSlots();\n\nconst {\n  size = BCommonSize.Medium,\n  variant = BInputVariant.Outlined,\n  min = Number.MIN_SAFE_INTEGER,\n  max = Number.MAX_SAFE_INTEGER,\n  step = 1,\n  disabled = false,\n  readOnly = false,\n  controls = true,\n  keyboard = true,\n  changeOnBlur = true,\n  changeOnWheel = false,\n  placeholder,\n  id,\n  precision,\n  formatter,\n  parser,\n  decimalSeparator,\n  stringMode = false,\n  status,\n} = defineProps<{\n  /** The size of the input number. */\n  size?: `${BCommonSize}`;\n  /** Visual variant of the input number. */\n  variant?: `${BInputVariant}`;\n  /** Validation status. */\n  status?: `${BInputStatus}`;\n  /** Minimum value allowed. */\n  min?: number;\n  /** Maximum value allowed. */\n  max?: number;\n  /** Increment/decrement step amount. */\n  step?: number;\n  /** Whether the input number is disabled. */\n  disabled?: boolean;\n  /** Whether the input number is read-only. */\n  readOnly?: boolean;\n  /** Whether to show +/- controls. */\n  controls?: boolean;\n  /** Whether keyboard up/down changes value. */\n  keyboard?: boolean;\n  /** Whether to trigger change on blur (e.g. reset out-of-range). */\n  changeOnBlur?: boolean;\n  /** Whether mouse wheel changes value. */\n  changeOnWheel?: boolean;\n  /** Placeholder text. */\n  placeholder?: string;\n  /** HTML id attribute. */\n  id?: string;\n  /** Decimal precision for display. */\n  precision?: number;\n  /** Format the displayed value. */\n  formatter?: (value: string | number) => string;\n  /** Parse the formatted value back to a number. */\n  parser?: (displayValue: string) => string;\n  /** Custom decimal separator character. */\n  decimalSeparator?: string;\n  /** Use string mode for high-precision decimals. */\n  stringMode?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when value changes. */\n  change: [value: number | null];\n  /** Fired when Enter key is pressed. */\n  pressEnter: [event: KeyboardEvent];\n  /** Fired on step (button, keyboard, or wheel). */\n  step: [value: number | null, info: BInputNumberStepInfo];\n  /** Fired on input focus. */\n  focus: [event: FocusEvent];\n  /** Fired on input blur. */\n  blur: [event: FocusEvent];\n}>();\n\nconst model = defineModel<number | null>({ default: null });\n\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => id ?? `b-input-number-${componentUID.value}`);\n\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst isFocused = ref(false);\nconst displayValue = ref('');\n\nconst hasPrefix = computed(() => !!slots.prefix);\nconst hasSuffix = computed(() => !!slots.suffix);\n\nconst isUpDisabled = computed(() => {\n  if (disabled || readOnly) return true;\n  if (model.value === null) return false;\n  return model.value >= max;\n});\n\nconst isDownDisabled = computed(() => {\n  if (disabled || readOnly) return true;\n  if (model.value === null) return false;\n  return model.value <= min;\n});\n\nfunction toFixedPrecision(val: number): number {\n  if (precision !== undefined) {\n    return parseFloat(val.toFixed(precision));\n  }\n  const stepStr = String(step);\n  const stepDecimals = stepStr.includes('.') ? stepStr.split('.')[1].length : 0;\n  if (stepDecimals > 0) {\n    return parseFloat(val.toFixed(stepDecimals));\n  }\n  return val;\n}\n\nfunction clamp(val: number): number {\n  return Math.min(max, Math.max(min, val));\n}\n\nfunction formatValue(val: number | null): string {\n  if (val === null) return '';\n  let str: string;\n  if (precision !== undefined) {\n    str = val.toFixed(precision);\n  } else {\n    str = String(val);\n  }\n  if (decimalSeparator) {\n    str = str.replace('.', decimalSeparator);\n  }\n  if (formatter) {\n    return formatter(stringMode ? str : val);\n  }\n  return str;\n}\n\nfunction parseInput(input: string): number | null {\n  if (!input.trim()) return null;\n  let parsed = input;\n  if (parser) {\n    parsed = parser(input);\n  } else if (decimalSeparator) {\n    parsed = parsed.replace(decimalSeparator, '.');\n  }\n  const num = Number(parsed);\n  if (isNaN(num)) return model.value;\n  return num;\n}\n\nfunction syncDisplay() {\n  displayValue.value = formatValue(model.value);\n}\n\nfunction updateValue(newVal: number | null, triggerChange = true) {\n  if (newVal !== null) {\n    newVal = toFixedPrecision(clamp(newVal));\n  }\n  const changed = newVal !== model.value;\n  model.value = newVal;\n  syncDisplay();\n  if (changed && triggerChange) {\n    emit('change', newVal);\n  }\n}\n\nfunction stepValue(direction: 'up' | 'down') {\n  if (disabled || readOnly) return;\n  const current = model.value ?? 0;\n  const offset = direction === 'up' ? step : -step;\n  const next = toFixedPrecision(current + offset);\n  const clamped = clamp(next);\n  updateValue(clamped);\n  emit('step', clamped, { offset: step, type: direction });\n}\n\nconst handleInput = (e: Event) => {\n  const target = e.target as HTMLInputElement;\n  displayValue.value = target.value;\n};\n\nconst handleKeyDown = (e: KeyboardEvent) => {\n  if (e.key === 'Enter') {\n    commitValue();\n    emit('pressEnter', e);\n  }\n  if (!keyboard) return;\n  if (e.key === 'ArrowUp') {\n    e.preventDefault();\n    stepValue('up');\n  } else if (e.key === 'ArrowDown') {\n    e.preventDefault();\n    stepValue('down');\n  }\n};\n\nconst handleFocus = (e: FocusEvent) => {\n  isFocused.value = true;\n  emit('focus', e);\n};\n\nconst handleBlur = (e: FocusEvent) => {\n  isFocused.value = false;\n  if (changeOnBlur) {\n    commitValue();\n  }\n  emit('blur', e);\n};\n\nconst handleWheel = (e: WheelEvent) => {\n  if (!changeOnWheel || disabled || readOnly || !isFocused.value) return;\n  e.preventDefault();\n  if (e.deltaY < 0) {\n    stepValue('up');\n  } else if (e.deltaY > 0) {\n    stepValue('down');\n  }\n};\n\nfunction commitValue() {\n  const parsed = parseInput(displayValue.value);\n  if (parsed === null) {\n    updateValue(null);\n  } else {\n    updateValue(parsed);\n  }\n}\n\nconst focus = (options?: BInputNumberFocusOptions) => {\n  inputRef.value?.focus({ preventScroll: options?.preventScroll });\n  if (options?.cursor && inputRef.value) {\n    const len = inputRef.value.value.length;\n    switch (options.cursor) {\n      case 'start':\n        inputRef.value.setSelectionRange(0, 0);\n        break;\n      case 'end':\n        inputRef.value.setSelectionRange(len, len);\n        break;\n      case 'all':\n        inputRef.value.setSelectionRange(0, len);\n        break;\n    }\n  }\n};\n\nconst blur = () => {\n  inputRef.value?.blur();\n};\n\nwatch(\n  () => model.value,\n  () => {\n    if (!isFocused.value) {\n      syncDisplay();\n    }\n  },\n  { immediate: true },\n);\n\ndefineExpose({ focus, blur });\n</script>\n\n<template>\n  <span\n    class=\"b-input-number\"\n    :class=\"[\n      `b-input-number--${size}`,\n      `b-input-number--${variant}`,\n      {\n        'b-input-number--focused': isFocused,\n        'b-input-number--disabled': disabled,\n        'b-input-number--readonly': readOnly,\n        'b-input-number--error': status === BInputStatus.Error,\n        'b-input-number--warning': status === BInputStatus.Warning,\n        'b-input-number--has-controls': controls,\n      },\n    ]\"\n  >\n    <span class=\"b-input-number__wrapper\">\n      <span v-if=\"hasPrefix\" class=\"b-input-number__prefix\" aria-hidden=\"true\">\n        <slot name=\"prefix\" />\n      </span>\n\n      <input\n        :id=\"inputId\"\n        ref=\"inputRef\"\n        :value=\"displayValue\"\n        type=\"text\"\n        inputmode=\"decimal\"\n        role=\"spinbutton\"\n        :aria-valuenow=\"model ?? undefined\"\n        :aria-valuemin=\"min !== Number.MIN_SAFE_INTEGER ? min : undefined\"\n        :aria-valuemax=\"max !== Number.MAX_SAFE_INTEGER ? max : undefined\"\n        :aria-invalid=\"status === BInputStatus.Error ? true : undefined\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :readonly=\"readOnly\"\n        class=\"b-input-number__input\"\n        @input=\"handleInput\"\n        @keydown=\"handleKeyDown\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @wheel=\"handleWheel\"\n      />\n\n      <span v-if=\"hasSuffix\" class=\"b-input-number__suffix\" aria-hidden=\"true\">\n        <slot name=\"suffix\" />\n      </span>\n\n      <span v-if=\"controls\" class=\"b-input-number__handler-wrap\" aria-hidden=\"true\">\n        <span\n          class=\"b-input-number__handler b-input-number__handler--up\"\n          :class=\"{ 'b-input-number__handler--disabled': isUpDisabled }\"\n          role=\"button\"\n          tabindex=\"-1\"\n          aria-label=\"Increase value\"\n          :aria-disabled=\"isUpDisabled\"\n          @mousedown.prevent=\"!isUpDisabled && stepValue('up')\"\n        >\n          <svg\n            viewBox=\"0 0 1024 1024\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h286c2.1 0 4.2-.8 5.7-2.3l70.3-70.3 70.3 70.3c1.5 1.5 3.5 2.3 5.7 2.3h286c6.5 0 10.3-7.4 6.5-12.7z\"\n            />\n          </svg>\n        </span>\n        <span\n          class=\"b-input-number__handler b-input-number__handler--down\"\n          :class=\"{ 'b-input-number__handler--disabled': isDownDisabled }\"\n          role=\"button\"\n          tabindex=\"-1\"\n          aria-label=\"Decrease value\"\n          :aria-disabled=\"isDownDisabled\"\n          @mousedown.prevent=\"!isDownDisabled && stepValue('down')\"\n        >\n          <svg\n            viewBox=\"0 0 1024 1024\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z\"\n            />\n          </svg>\n        </span>\n      </span>\n    </span>\n  </span>\n</template>\n\n<style scoped>\n.b-input-number {\n  --b-input-number-active-bg: #ffffff;\n  --b-input-number-active-border-color: #1677ff;\n  --b-input-number-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-input-number-addon-bg: rgba(0, 0, 0, 0.02);\n  --b-input-number-control-width: 90px;\n  --b-input-number-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-input-number-filled-handle-bg: #f0f0f0;\n  --b-input-number-handle-active-bg: rgba(0, 0, 0, 0.02);\n  --b-input-number-handle-bg: #ffffff;\n  --b-input-number-handle-border-color: #d9d9d9;\n  --b-input-number-handle-font-size: 7px;\n  --b-input-number-handle-hover-color: #1677ff;\n  --b-input-number-handle-width: 22px;\n  --b-input-number-hover-bg: #ffffff;\n  --b-input-number-hover-border-color: #4096ff;\n  --b-input-number-font-size: 14px;\n  --b-input-number-font-size-lg: 16px;\n  --b-input-number-font-size-sm: 14px;\n  --b-input-number-padding-block: 4px;\n  --b-input-number-padding-block-lg: 7px;\n  --b-input-number-padding-block-sm: 0px;\n  --b-input-number-padding-inline: 11px;\n  --b-input-number-padding-inline-lg: 11px;\n  --b-input-number-padding-inline-sm: 7px;\n  --b-input-number-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-input-number-border-color: #d9d9d9;\n  --b-input-number-bg: #ffffff;\n  --b-input-number-color: rgba(0, 0, 0, 0.88);\n  --b-input-number-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-input-number-border-radius: 6px;\n  --b-input-number-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-input-number-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-input-number-error-border-color: #ff4d4f;\n  --b-input-number-error-hover-border-color: #ff7875;\n  --b-input-number-warning-border-color: #faad14;\n  --b-input-number-warning-hover-border-color: #ffc53d;\n  --b-input-number-filled-bg: rgba(0, 0, 0, 0.04);\n  --b-input-number-filled-hover-bg: rgba(0, 0, 0, 0.04);\n\n  display: inline-flex;\n  align-items: stretch;\n  width: var(--b-input-number-control-width);\n  font-size: var(--b-input-number-font-size);\n  color: var(--b-input-number-color);\n  line-height: 1.5714;\n}\n\n.b-input-number--lg {\n  font-size: var(--b-input-number-font-size-lg);\n}\n\n.b-input-number--sm {\n  font-size: var(--b-input-number-font-size-sm);\n}\n\n.b-input-number__wrapper {\n  display: inline-flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  position: relative;\n  transition: all 0.2s;\n}\n\n/* Outlined */\n.b-input-number--outlined .b-input-number__wrapper {\n  background: var(--b-input-number-bg);\n  border: 1px solid var(--b-input-number-border-color);\n  border-radius: var(--b-input-number-border-radius);\n}\n\n.b-input-number--outlined:not(.b-input-number--disabled):hover .b-input-number__wrapper {\n  border-color: var(--b-input-number-hover-border-color);\n  background: var(--b-input-number-hover-bg);\n}\n\n.b-input-number--outlined.b-input-number--focused .b-input-number__wrapper {\n  border-color: var(--b-input-number-active-border-color);\n  background: var(--b-input-number-active-bg);\n  box-shadow: var(--b-input-number-active-shadow);\n}\n\n/* Filled */\n.b-input-number--filled .b-input-number__wrapper {\n  background: var(--b-input-number-filled-bg);\n  border: 1px solid transparent;\n  border-radius: var(--b-input-number-border-radius);\n}\n\n.b-input-number--filled:not(.b-input-number--disabled):hover .b-input-number__wrapper {\n  background: var(--b-input-number-filled-hover-bg);\n}\n\n.b-input-number--filled.b-input-number--focused .b-input-number__wrapper {\n  background: var(--b-input-number-active-bg);\n  border-color: var(--b-input-number-active-border-color);\n  box-shadow: var(--b-input-number-active-shadow);\n}\n\n/* Borderless */\n.b-input-number--borderless .b-input-number__wrapper {\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--b-input-number-border-radius);\n}\n\n/* Underlined */\n.b-input-number--underlined .b-input-number__wrapper {\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--b-input-number-border-color);\n  border-radius: 0;\n}\n\n.b-input-number--underlined:not(.b-input-number--disabled):hover .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-hover-border-color);\n}\n\n.b-input-number--underlined.b-input-number--focused .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-active-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-number-active-border-color);\n}\n\n/* Error */\n.b-input-number--error.b-input-number--outlined .b-input-number__wrapper {\n  border-color: var(--b-input-number-error-border-color);\n}\n\n.b-input-number--error.b-input-number--outlined:not(.b-input-number--disabled):hover\n  .b-input-number__wrapper {\n  border-color: var(--b-input-number-error-hover-border-color);\n}\n\n.b-input-number--error.b-input-number--outlined.b-input-number--focused .b-input-number__wrapper,\n.b-input-number--error.b-input-number--filled.b-input-number--focused .b-input-number__wrapper {\n  border-color: var(--b-input-number-error-border-color);\n  box-shadow: var(--b-input-number-error-active-shadow);\n}\n\n.b-input-number--error.b-input-number--underlined .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-error-border-color);\n}\n\n.b-input-number--error.b-input-number--underlined.b-input-number--focused .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-error-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-number-error-border-color);\n}\n\n/* Warning */\n.b-input-number--warning.b-input-number--outlined .b-input-number__wrapper {\n  border-color: var(--b-input-number-warning-border-color);\n}\n\n.b-input-number--warning.b-input-number--outlined:not(.b-input-number--disabled):hover\n  .b-input-number__wrapper {\n  border-color: var(--b-input-number-warning-hover-border-color);\n}\n\n.b-input-number--warning.b-input-number--outlined.b-input-number--focused .b-input-number__wrapper,\n.b-input-number--warning.b-input-number--filled.b-input-number--focused .b-input-number__wrapper {\n  border-color: var(--b-input-number-warning-border-color);\n  box-shadow: var(--b-input-number-warning-active-shadow);\n}\n\n.b-input-number--warning.b-input-number--underlined .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-warning-border-color);\n}\n\n.b-input-number--warning.b-input-number--underlined.b-input-number--focused\n  .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-warning-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-number-warning-border-color);\n}\n\n/* Disabled */\n.b-input-number--disabled .b-input-number__wrapper {\n  background: var(--b-input-number-disabled-bg);\n  cursor: not-allowed;\n}\n\n.b-input-number--disabled .b-input-number__input {\n  color: var(--b-input-number-disabled-color);\n  cursor: not-allowed;\n}\n\n/* Input element */\n.b-input-number__input {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n  text-align: left;\n}\n\n.b-input-number--md .b-input-number__input {\n  padding: var(--b-input-number-padding-block) var(--b-input-number-padding-inline);\n}\n\n.b-input-number--lg .b-input-number__input {\n  padding: var(--b-input-number-padding-block-lg) var(--b-input-number-padding-inline-lg);\n}\n\n.b-input-number--sm .b-input-number__input {\n  padding: var(--b-input-number-padding-block-sm) var(--b-input-number-padding-inline-sm);\n}\n\n.b-input-number--has-controls .b-input-number__input {\n  padding-right: calc(var(--b-input-number-handle-width) + 2px);\n}\n\n.b-input-number__input::placeholder {\n  color: var(--b-input-number-placeholder-color);\n}\n\n/* Prefix & Suffix */\n.b-input-number__prefix,\n.b-input-number__suffix {\n  display: inline-flex;\n  align-items: center;\n  color: var(--b-input-number-color);\n  flex-shrink: 0;\n}\n\n.b-input-number__prefix {\n  margin-left: var(--b-input-number-padding-inline);\n}\n\n.b-input-number__suffix {\n  margin-right: var(--b-input-number-padding-inline);\n}\n\n.b-input-number__prefix ~ .b-input-number__input {\n  padding-left: 4px;\n}\n\n/* Handler (step buttons) */\n.b-input-number__handler-wrap {\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: var(--b-input-number-handle-width);\n  border-left: 1px solid var(--b-input-number-handle-border-color);\n  border-radius: 0 var(--b-input-number-border-radius) var(--b-input-number-border-radius) 0;\n  overflow: hidden;\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n.b-input-number:hover .b-input-number__handler-wrap,\n.b-input-number--focused .b-input-number__handler-wrap {\n  opacity: 1;\n}\n\n.b-input-number__handler {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  background: var(--b-input-number-handle-bg);\n  font-size: var(--b-input-number-handle-font-size);\n  color: rgba(0, 0, 0, 0.45);\n  user-select: none;\n  transition:\n    color 0.2s,\n    background 0.2s;\n}\n\n.b-input-number__handler:hover {\n  color: var(--b-input-number-handle-hover-color);\n  background: var(--b-input-number-handle-active-bg);\n}\n\n.b-input-number__handler--up {\n  border-bottom: 1px solid var(--b-input-number-handle-border-color);\n}\n\n.b-input-number__handler--disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n  pointer-events: none;\n}\n\n.b-input-number__handler svg {\n  width: 0.5em;\n  height: 0.5em;\n}\n\n/* Filled variant handler */\n.b-input-number--filled .b-input-number__handler {\n  background: var(--b-input-number-filled-handle-bg);\n}\n\n/* Borderless / underlined: hide handler border */\n.b-input-number--borderless .b-input-number__handler-wrap,\n.b-input-number--underlined .b-input-number__handler-wrap {\n  border-left-color: transparent;\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-input-number {\n  --b-input-number-active-bg: #141414;\n  --b-input-number-active-border-color: #1668dc;\n  --b-input-number-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-input-number-addon-bg: rgba(255, 255, 255, 0.04);\n  --b-input-number-error-active-shadow: 0 0 0 2px rgba(220, 56, 56, 0.1);\n  --b-input-number-filled-handle-bg: rgba(255, 255, 255, 0.12);\n  --b-input-number-handle-active-bg: rgba(255, 255, 255, 0.04);\n  --b-input-number-handle-bg: #1f1f1f;\n  --b-input-number-handle-border-color: #424242;\n  --b-input-number-handle-hover-color: #3c89e8;\n  --b-input-number-hover-bg: #141414;\n  --b-input-number-hover-border-color: #3c89e8;\n  --b-input-number-warning-active-shadow: 0 0 0 2px rgba(209, 163, 0, 0.1);\n  --b-input-number-border-color: #424242;\n  --b-input-number-bg: #141414;\n  --b-input-number-color: rgba(255, 255, 255, 0.88);\n  --b-input-number-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-input-number-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-input-number-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-input-number-error-border-color: #dc3838;\n  --b-input-number-error-hover-border-color: #e86e6e;\n  --b-input-number-warning-border-color: #d1a300;\n  --b-input-number-warning-hover-border-color: #e8c631;\n  --b-input-number-filled-bg: rgba(255, 255, 255, 0.08);\n  --b-input-number-filled-hover-bg: rgba(255, 255, 255, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-input-number {\n    --b-input-number-active-bg: #141414;\n    --b-input-number-active-border-color: #1668dc;\n    --b-input-number-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-input-number-addon-bg: rgba(255, 255, 255, 0.04);\n    --b-input-number-error-active-shadow: 0 0 0 2px rgba(220, 56, 56, 0.1);\n    --b-input-number-filled-handle-bg: rgba(255, 255, 255, 0.12);\n    --b-input-number-handle-active-bg: rgba(255, 255, 255, 0.04);\n    --b-input-number-handle-bg: #1f1f1f;\n    --b-input-number-handle-border-color: #424242;\n    --b-input-number-handle-hover-color: #3c89e8;\n    --b-input-number-hover-bg: #141414;\n    --b-input-number-hover-border-color: #3c89e8;\n    --b-input-number-warning-active-shadow: 0 0 0 2px rgba(209, 163, 0, 0.1);\n    --b-input-number-border-color: #424242;\n    --b-input-number-bg: #141414;\n    --b-input-number-color: rgba(255, 255, 255, 0.88);\n    --b-input-number-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-input-number-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-input-number-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-input-number-error-border-color: #dc3838;\n    --b-input-number-error-hover-border-color: #e86e6e;\n    --b-input-number-warning-border-color: #d1a300;\n    --b-input-number-warning-hover-border-color: #e8c631;\n    --b-input-number-filled-bg: rgba(255, 255, 255, 0.08);\n    --b-input-number-filled-hover-bg: rgba(255, 255, 255, 0.12);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-input-number__wrapper,\n  .b-input-number__handler-wrap,\n  .b-input-number__handler {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"design-system117.js","names":["$attrs"],"sources":["../src/components/BInput/BInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, ref, useSlots, watch } from 'vue';\nimport {\n  BInputStatus,\n  BInputVariant,\n  type BInputCountConfig,\n  type BInputFocusOptions,\n} from './types.ts';\n\ndefineOptions({ inheritAttrs: false });\n\nconst slots = useSlots();\n\nconst {\n  size = BCommonSize.Medium,\n  variant = BInputVariant.Outlined,\n  type = 'text',\n  allowClear = false,\n  showCount = false,\n  disabled = false,\n  readOnly = false,\n  placeholder,\n  maxLength,\n  id,\n  count,\n  status,\n} = defineProps<{\n  /** The size of the input. */\n  size?: `${BCommonSize}`;\n  /** Visual variant of the input. */\n  variant?: `${BInputVariant}`;\n  /** Whether the input is disabled. */\n  disabled?: boolean;\n  /** Whether the input is read-only. */\n  readOnly?: boolean;\n  /** Validation status. */\n  status?: `${BInputStatus}`;\n  /** HTML input type (text, password, email, etc.). */\n  type?: string;\n  /** Maximum number of characters. */\n  maxLength?: number;\n  /** Placeholder text. */\n  placeholder?: string;\n  /** HTML id attribute. */\n  id?: string;\n  /** Show clear button when input has value. */\n  allowClear?: boolean;\n  /** Display character count. Can be boolean or a formatter function. */\n  showCount?: boolean | ((args: { value: string; count: number; maxLength?: number }) => string);\n  /** Advanced character counting configuration. */\n  count?: BInputCountConfig;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when input value changes. */\n  change: [value: string, event: Event];\n  /** Fired when Enter key is pressed. */\n  pressEnter: [event: KeyboardEvent];\n  /** Fired when clear button is clicked. */\n  clear: [];\n  /** Fired on input focus. */\n  focus: [event: FocusEvent];\n  /** Fired on input blur. */\n  blur: [event: FocusEvent];\n}>();\n\nconst model = defineModel<string>({ default: '' });\n\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => id ?? `b-input-${componentUID.value}`);\n\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst isFocused = ref(false);\nconst passwordVisible = ref(false);\n\nconst hasAddonBefore = computed(() => !!slots.addonBefore);\nconst hasAddonAfter = computed(() => !!slots.addonAfter);\nconst hasPrefix = computed(() => !!slots.prefix);\nconst hasSuffix = computed(() => !!slots.suffix);\nconst isPasswordType = computed(() => type === 'password');\nconst showPasswordToggle = computed(() => isPasswordType.value);\nconst computedType = computed(() => {\n  if (isPasswordType.value) {\n    return passwordVisible.value ? 'text' : 'password';\n  }\n  return type;\n});\n\nconst charCount = computed(() => {\n  const val = model.value ?? '';\n  if (count?.strategy) return count.strategy(val);\n  return val.length;\n});\n\nconst countMax = computed(() => count?.max ?? maxLength);\n\nconst showCountIndicator = computed(() => {\n  if (count?.show === false) return false;\n  if (count?.show !== undefined) return true;\n  return !!showCount;\n});\n\nconst countText = computed(() => {\n  const val = model.value ?? '';\n  const currentCount = charCount.value;\n\n  if (typeof count?.show === 'function') {\n    return count.show({ value: val, count: currentCount, maxLength: countMax.value });\n  }\n  if (typeof showCount === 'function') {\n    return showCount({ value: val, count: currentCount, maxLength: countMax.value });\n  }\n  if (countMax.value !== undefined) {\n    return `${currentCount} / ${countMax.value}`;\n  }\n  return `${currentCount}`;\n});\n\nconst isOverCount = computed(() => {\n  if (countMax.value === undefined) return false;\n  return charCount.value > countMax.value;\n});\n\nconst showClearButton = computed(() => {\n  return allowClear && !!model.value && !disabled && !readOnly;\n});\n\nconst handleInput = (e: Event) => {\n  const target = e.target as HTMLInputElement;\n  let value = target.value;\n\n  if (count?.exceedFormatter && countMax.value !== undefined) {\n    const strategy = count.strategy ?? ((v: string) => v.length);\n    if (strategy(value) > countMax.value) {\n      value = count.exceedFormatter(value, { max: countMax.value });\n      target.value = value;\n    }\n  }\n\n  model.value = value;\n  emit('change', value, e);\n};\n\nconst handleKeyDown = (e: KeyboardEvent) => {\n  if (e.key === 'Enter') {\n    emit('pressEnter', e);\n  }\n};\n\nconst handleFocus = (e: FocusEvent) => {\n  isFocused.value = true;\n  emit('focus', e);\n};\n\nconst handleBlur = (e: FocusEvent) => {\n  isFocused.value = false;\n  emit('blur', e);\n};\n\nconst handleClear = () => {\n  model.value = '';\n  emit('clear');\n  emit('change', '', new Event('change'));\n  inputRef.value?.focus();\n};\n\nconst togglePasswordVisibility = () => {\n  passwordVisible.value = !passwordVisible.value;\n  inputRef.value?.focus();\n};\n\nconst focus = (options?: BInputFocusOptions) => {\n  inputRef.value?.focus({ preventScroll: options?.preventScroll });\n  if (options?.cursor && inputRef.value) {\n    const len = inputRef.value.value.length;\n    switch (options.cursor) {\n      case 'start':\n        inputRef.value.setSelectionRange(0, 0);\n        break;\n      case 'end':\n        inputRef.value.setSelectionRange(len, len);\n        break;\n      case 'all':\n        inputRef.value.setSelectionRange(0, len);\n        break;\n    }\n  }\n};\n\nconst blur = () => {\n  inputRef.value?.blur();\n};\n\nwatch(model, (val) => {\n  if (count?.exceedFormatter && countMax.value !== undefined) {\n    const strategy = count.strategy ?? ((v: string) => v.length);\n    if (strategy(val) > countMax.value) {\n      model.value = count.exceedFormatter(val, { max: countMax.value });\n    }\n  }\n});\n\ndefineExpose({ focus, blur });\n</script>\n\n<template>\n  <span\n    class=\"b-input\"\n    :class=\"[\n      `b-input--${size}`,\n      `b-input--${variant}`,\n      {\n        'b-input--focused': isFocused,\n        'b-input--disabled': disabled,\n        'b-input--readonly': readOnly,\n        'b-input--error': status === BInputStatus.Error,\n        'b-input--warning': status === BInputStatus.Warning,\n        'b-input--has-addon-before': hasAddonBefore,\n        'b-input--has-addon-after': hasAddonAfter,\n        'b-input--over-count': isOverCount,\n      },\n    ]\"\n  >\n    <span v-if=\"hasAddonBefore\" class=\"b-input__addon b-input__addon--before\">\n      <slot name=\"addonBefore\" />\n    </span>\n\n    <span class=\"b-input__wrapper\">\n      <span v-if=\"hasPrefix\" class=\"b-input__prefix\" aria-hidden=\"true\">\n        <slot name=\"prefix\" />\n      </span>\n\n      <input\n        v-bind=\"$attrs\"\n        :id=\"inputId\"\n        ref=\"inputRef\"\n        :value=\"model\"\n        :type=\"computedType\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :readonly=\"readOnly\"\n        :maxlength=\"maxLength && !count?.exceedFormatter ? maxLength : undefined\"\n        :aria-invalid=\"status === BInputStatus.Error ? true : undefined\"\n        :aria-describedby=\"showCountIndicator ? `${inputId}-count` : undefined\"\n        class=\"b-input__input\"\n        @input=\"handleInput\"\n        @keydown=\"handleKeyDown\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n      />\n\n      <span v-if=\"showClearButton\" class=\"b-input__clear-wrapper\">\n        <button\n          type=\"button\"\n          class=\"b-input__clear\"\n          aria-label=\"Clear input\"\n          tabindex=\"-1\"\n          @mousedown.prevent=\"handleClear\"\n        >\n          <svg\n            viewBox=\"64 64 896 896\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z\"\n            />\n          </svg>\n        </button>\n      </span>\n\n      <span v-if=\"showPasswordToggle\" class=\"b-input__password-toggle-wrapper\">\n        <button\n          type=\"button\"\n          class=\"b-input__password-toggle\"\n          :aria-label=\"passwordVisible ? 'Hide password' : 'Show password'\"\n          :aria-pressed=\"passwordVisible\"\n          tabindex=\"-1\"\n          @mousedown.prevent=\"togglePasswordVisibility\"\n        >\n          <svg\n            v-if=\"!passwordVisible\"\n            viewBox=\"64 64 896 896\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 730c-114.9 0-208-93.1-208-208s93.1-208 208-208 208 93.1 208 208-93.1 208-208 208zm0-319.8c-61.7 0-111.8 50.1-111.8 111.8S450.3 633.8 512 633.8 623.8 583.7 623.8 522 573.7 410.2 512 410.2z\"\n            />\n          </svg>\n          <svg\n            v-else\n            viewBox=\"64 64 896 896\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M942.2 486.2C847.4 286.5 704.1 186 512 186c-53.8 0-104.5 9.6-151.7 28.4L212.7 67.2a8.03 8.03 0 00-11.3 0L160 108.5a8.03 8.03 0 000 11.3l740.3 740.3a8.03 8.03 0 0011.3 0l41.3-41.3a8.03 8.03 0 000-11.3l-106.8-106.8c53.1-57.6 94.3-127.4 106.2-153a60.3 60.3 0 000-51.5zM512 730c-114.9 0-208-93.1-208-208 0-40.1 11.4-77.6 31-109.4L297 374.6C270.6 414.1 256 466 256 522c0 141.4 114.6 256 256 256 56 0 107.9-18 150.2-48.5l-38-38C597.6 714.6 556.1 730 512 730zm0-520c114.9 0 208 93.1 208 208 0 40.1-11.4 77.6-31 109.4L727 565.4C753.4 525.9 768 474 768 418c0-141.4-114.6-256-256-256-56 0-107.9 18-150.2 48.5l38 38C426.4 225.4 467.9 210 512 210z\"\n            />\n          </svg>\n        </button>\n      </span>\n\n      <span v-if=\"hasSuffix\" class=\"b-input__suffix\" aria-hidden=\"true\">\n        <slot name=\"suffix\" />\n      </span>\n\n      <span\n        v-if=\"showCountIndicator\"\n        :id=\"`${inputId}-count`\"\n        class=\"b-input__count\"\n        :class=\"{ 'b-input__count--over': isOverCount }\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n      >\n        {{ countText }}\n      </span>\n    </span>\n\n    <span v-if=\"hasAddonAfter\" class=\"b-input__addon b-input__addon--after\">\n      <slot name=\"addonAfter\" />\n    </span>\n  </span>\n</template>\n\n<style scoped>\n.b-input {\n  --b-input-active-bg: #ffffff;\n  --b-input-active-border-color: #1677ff;\n  --b-input-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-input-addon-bg: rgba(0, 0, 0, 0.02);\n  --b-input-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-input-hover-bg: #ffffff;\n  --b-input-hover-border-color: #4096ff;\n  --b-input-font-size: 14px;\n  --b-input-font-size-lg: 16px;\n  --b-input-font-size-sm: 14px;\n  --b-input-padding-block: 4px;\n  --b-input-padding-block-lg: 7px;\n  --b-input-padding-block-sm: 0px;\n  --b-input-padding-inline: 11px;\n  --b-input-padding-inline-lg: 11px;\n  --b-input-padding-inline-sm: 7px;\n  --b-input-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-input-border-color: #d9d9d9;\n  --b-input-bg: #ffffff;\n  --b-input-color: rgba(0, 0, 0, 0.88);\n  --b-input-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-input-border-radius: 6px;\n  --b-input-clear-color: rgba(0, 0, 0, 0.25);\n  --b-input-clear-hover-color: rgba(0, 0, 0, 0.45);\n  --b-input-count-color: rgba(0, 0, 0, 0.65);\n  --b-input-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-input-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-input-error-border-color: #ff4d4f;\n  --b-input-error-hover-border-color: #ff7875;\n  --b-input-warning-border-color: #faad14;\n  --b-input-warning-hover-border-color: #ffc53d;\n  --b-input-filled-bg: rgba(0, 0, 0, 0.04);\n  --b-input-filled-hover-bg: rgba(0, 0, 0, 0.04);\n\n  display: inline-flex;\n  align-items: stretch;\n  width: 100%;\n  font-size: var(--b-input-font-size);\n  color: var(--b-input-color);\n  line-height: 1.5714;\n}\n\n.b-input--lg {\n  font-size: var(--b-input-font-size-lg);\n}\n\n.b-input--sm {\n  font-size: var(--b-input-font-size-sm);\n}\n\n.b-input__wrapper {\n  display: inline-flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  position: relative;\n  transition: all 0.2s;\n}\n\n/* Outlined */\n.b-input--outlined .b-input__wrapper {\n  background: var(--b-input-bg);\n  border: 1px solid var(--b-input-border-color);\n  border-radius: var(--b-input-border-radius);\n}\n\n.b-input--outlined:not(.b-input--disabled):hover .b-input__wrapper {\n  border-color: var(--b-input-hover-border-color);\n  background: var(--b-input-hover-bg);\n}\n\n.b-input--outlined.b-input--focused .b-input__wrapper {\n  border-color: var(--b-input-active-border-color);\n  background: var(--b-input-active-bg);\n  box-shadow: var(--b-input-active-shadow);\n}\n\n/* Filled */\n.b-input--filled .b-input__wrapper {\n  background: var(--b-input-filled-bg);\n  border: 1px solid transparent;\n  border-radius: var(--b-input-border-radius);\n}\n\n.b-input--filled:not(.b-input--disabled):hover .b-input__wrapper {\n  background: var(--b-input-filled-hover-bg);\n}\n\n.b-input--filled.b-input--focused .b-input__wrapper {\n  background: var(--b-input-active-bg);\n  border-color: var(--b-input-active-border-color);\n  box-shadow: var(--b-input-active-shadow);\n}\n\n/* Borderless */\n.b-input--borderless .b-input__wrapper {\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--b-input-border-radius);\n}\n\n/* Underlined */\n.b-input--underlined .b-input__wrapper {\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--b-input-border-color);\n  border-radius: 0;\n}\n\n.b-input--underlined:not(.b-input--disabled):hover .b-input__wrapper {\n  border-bottom-color: var(--b-input-hover-border-color);\n}\n\n.b-input--underlined.b-input--focused .b-input__wrapper {\n  border-bottom-color: var(--b-input-active-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-active-border-color);\n}\n\n/* Error */\n.b-input--error.b-input--outlined .b-input__wrapper {\n  border-color: var(--b-input-error-border-color);\n}\n\n.b-input--error.b-input--outlined:not(.b-input--disabled):hover .b-input__wrapper {\n  border-color: var(--b-input-error-hover-border-color);\n}\n\n.b-input--error.b-input--outlined.b-input--focused .b-input__wrapper,\n.b-input--error.b-input--filled.b-input--focused .b-input__wrapper {\n  border-color: var(--b-input-error-border-color);\n  box-shadow: var(--b-input-error-active-shadow);\n}\n\n.b-input--error.b-input--underlined .b-input__wrapper {\n  border-bottom-color: var(--b-input-error-border-color);\n}\n\n.b-input--error.b-input--underlined.b-input--focused .b-input__wrapper {\n  border-bottom-color: var(--b-input-error-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-error-border-color);\n}\n\n/* Warning */\n.b-input--warning.b-input--outlined .b-input__wrapper {\n  border-color: var(--b-input-warning-border-color);\n}\n\n.b-input--warning.b-input--outlined:not(.b-input--disabled):hover .b-input__wrapper {\n  border-color: var(--b-input-warning-hover-border-color);\n}\n\n.b-input--warning.b-input--outlined.b-input--focused .b-input__wrapper,\n.b-input--warning.b-input--filled.b-input--focused .b-input__wrapper {\n  border-color: var(--b-input-warning-border-color);\n  box-shadow: var(--b-input-warning-active-shadow);\n}\n\n.b-input--warning.b-input--underlined .b-input__wrapper {\n  border-bottom-color: var(--b-input-warning-border-color);\n}\n\n.b-input--warning.b-input--underlined.b-input--focused .b-input__wrapper {\n  border-bottom-color: var(--b-input-warning-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-warning-border-color);\n}\n\n/* Disabled */\n.b-input--disabled .b-input__wrapper {\n  background: var(--b-input-disabled-bg);\n  cursor: not-allowed;\n}\n\n.b-input--disabled .b-input__input {\n  color: var(--b-input-disabled-color);\n  cursor: not-allowed;\n}\n\n/* Addon border radius */\n.b-input--has-addon-before .b-input__wrapper {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.b-input--has-addon-after .b-input__wrapper {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n/* Input element */\n.b-input__input {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n}\n\n.b-input--md .b-input__input {\n  padding: var(--b-input-padding-block) var(--b-input-padding-inline);\n}\n\n.b-input--lg .b-input__input {\n  padding: var(--b-input-padding-block-lg) var(--b-input-padding-inline-lg);\n}\n\n.b-input--sm .b-input__input {\n  padding: var(--b-input-padding-block-sm) var(--b-input-padding-inline-sm);\n}\n\n.b-input__input::placeholder {\n  color: var(--b-input-placeholder-color);\n}\n\n/* Prefix & Suffix */\n.b-input__prefix,\n.b-input__suffix {\n  display: inline-flex;\n  align-items: center;\n  color: var(--b-input-color);\n  flex-shrink: 0;\n}\n\n.b-input__prefix {\n  margin-left: var(--b-input-padding-inline);\n}\n\n.b-input__suffix {\n  margin-right: var(--b-input-padding-inline);\n}\n\n.b-input__prefix ~ .b-input__input {\n  padding-left: 4px;\n}\n\n/* Clear & password toggle */\n.b-input__clear-wrapper,\n.b-input__password-toggle-wrapper {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-right: var(--b-input-padding-inline);\n}\n\n.b-input__clear,\n.b-input__password-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  color: var(--b-input-clear-color);\n  font-size: 14px;\n  line-height: 1;\n  transition: color 0.2s;\n}\n\n.b-input__clear:hover,\n.b-input__password-toggle:hover {\n  color: var(--b-input-clear-hover-color);\n}\n\n/* Count */\n.b-input__count {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-right: var(--b-input-padding-inline);\n  color: var(--b-input-count-color);\n  font-size: 0.857em;\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n.b-input__count--over {\n  color: var(--b-input-error-border-color);\n}\n\n/* Addons */\n.b-input__addon {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 11px;\n  background: var(--b-input-addon-bg);\n  border: 1px solid var(--b-input-border-color);\n  color: var(--b-input-color);\n  font-size: inherit;\n  white-space: nowrap;\n}\n\n.b-input__addon--before {\n  border-right: none;\n  border-radius: var(--b-input-border-radius) 0 0 var(--b-input-border-radius);\n}\n\n.b-input__addon--after {\n  border-left: none;\n  border-radius: 0 var(--b-input-border-radius) var(--b-input-border-radius) 0;\n}\n\n/* Dark mode — activated via data attribute on ancestor */\n[data-prefers-color='dark'] .b-input {\n  --b-input-active-bg: #141414;\n  --b-input-active-border-color: #1668dc;\n  --b-input-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-input-addon-bg: rgba(255, 255, 255, 0.04);\n  --b-input-error-active-shadow: 0 0 0 2px rgba(220, 56, 56, 0.1);\n  --b-input-hover-bg: #141414;\n  --b-input-hover-border-color: #3c89e8;\n  --b-input-warning-active-shadow: 0 0 0 2px rgba(209, 163, 0, 0.1);\n  --b-input-border-color: #424242;\n  --b-input-bg: #141414;\n  --b-input-color: rgba(255, 255, 255, 0.88);\n  --b-input-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-input-clear-color: rgba(255, 255, 255, 0.25);\n  --b-input-clear-hover-color: rgba(255, 255, 255, 0.45);\n  --b-input-count-color: rgba(255, 255, 255, 0.65);\n  --b-input-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-input-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-input-error-border-color: #dc3838;\n  --b-input-error-hover-border-color: #e86e6e;\n  --b-input-warning-border-color: #d1a300;\n  --b-input-warning-hover-border-color: #e8c631;\n  --b-input-filled-bg: rgba(255, 255, 255, 0.08);\n  --b-input-filled-hover-bg: rgba(255, 255, 255, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-input {\n    --b-input-active-bg: #141414;\n    --b-input-active-border-color: #1668dc;\n    --b-input-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-input-addon-bg: rgba(255, 255, 255, 0.04);\n    --b-input-error-active-shadow: 0 0 0 2px rgba(220, 56, 56, 0.1);\n    --b-input-hover-bg: #141414;\n    --b-input-hover-border-color: #3c89e8;\n    --b-input-warning-active-shadow: 0 0 0 2px rgba(209, 163, 0, 0.1);\n    --b-input-border-color: #424242;\n    --b-input-bg: #141414;\n    --b-input-color: rgba(255, 255, 255, 0.88);\n    --b-input-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-input-clear-color: rgba(255, 255, 255, 0.25);\n    --b-input-clear-hover-color: rgba(255, 255, 255, 0.45);\n    --b-input-count-color: rgba(255, 255, 255, 0.65);\n    --b-input-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-input-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-input-error-border-color: #dc3838;\n    --b-input-error-hover-border-color: #e86e6e;\n    --b-input-warning-border-color: #d1a300;\n    --b-input-warning-hover-border-color: #e8c631;\n    --b-input-filled-bg: rgba(255, 255, 255, 0.08);\n    --b-input-filled-hover-bg: rgba(255, 255, 255, 0.12);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-input__wrapper,\n  .b-input__clear,\n  .b-input__password-toggle {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system119.js

@@ -1,8 +1,8 @@
 import e from "./design-system14.js";
 import t from "./design-system117.js";
 /* empty css                 */
-//#region src/components/BInputNumber/BInputNumber.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-64ad79ae"]]);
+//#region src/components/BInput/BInput.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-47c909d6"]]);
 //#endregion
 export { n as default };
 

package/dist/design-system119.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system119.js","names":[],"sources":["../src/components/BInputNumber/BInputNumber.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BInputStatus, BInputVariant } from '@/components/BInput/types.ts';\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, ref, useSlots, watch } from 'vue';\nimport type { BInputNumberFocusOptions, BInputNumberStepInfo } from './types.ts';\n\ndefineOptions({ inheritAttrs: false });\n\nconst slots = useSlots();\n\nconst {\n  size = BCommonSize.Medium,\n  variant = BInputVariant.Outlined,\n  min = Number.MIN_SAFE_INTEGER,\n  max = Number.MAX_SAFE_INTEGER,\n  step = 1,\n  disabled = false,\n  readOnly = false,\n  controls = true,\n  keyboard = true,\n  changeOnBlur = true,\n  changeOnWheel = false,\n  placeholder,\n  id,\n  precision,\n  formatter,\n  parser,\n  decimalSeparator,\n  stringMode = false,\n  status,\n} = defineProps<{\n  /** The size of the input number. */\n  size?: `${BCommonSize}`;\n  /** Visual variant of the input number. */\n  variant?: `${BInputVariant}`;\n  /** Validation status. */\n  status?: `${BInputStatus}`;\n  /** Minimum value allowed. */\n  min?: number;\n  /** Maximum value allowed. */\n  max?: number;\n  /** Increment/decrement step amount. */\n  step?: number;\n  /** Whether the input number is disabled. */\n  disabled?: boolean;\n  /** Whether the input number is read-only. */\n  readOnly?: boolean;\n  /** Whether to show +/- controls. */\n  controls?: boolean;\n  /** Whether keyboard up/down changes value. */\n  keyboard?: boolean;\n  /** Whether to trigger change on blur (e.g. reset out-of-range). */\n  changeOnBlur?: boolean;\n  /** Whether mouse wheel changes value. */\n  changeOnWheel?: boolean;\n  /** Placeholder text. */\n  placeholder?: string;\n  /** HTML id attribute. */\n  id?: string;\n  /** Decimal precision for display. */\n  precision?: number;\n  /** Format the displayed value. */\n  formatter?: (value: string | number) => string;\n  /** Parse the formatted value back to a number. */\n  parser?: (displayValue: string) => string;\n  /** Custom decimal separator character. */\n  decimalSeparator?: string;\n  /** Use string mode for high-precision decimals. */\n  stringMode?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when value changes. */\n  change: [value: number | null];\n  /** Fired when Enter key is pressed. */\n  pressEnter: [event: KeyboardEvent];\n  /** Fired on step (button, keyboard, or wheel). */\n  step: [value: number | null, info: BInputNumberStepInfo];\n  /** Fired on input focus. */\n  focus: [event: FocusEvent];\n  /** Fired on input blur. */\n  blur: [event: FocusEvent];\n}>();\n\nconst model = defineModel<number | null>({ default: null });\n\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => id ?? `b-input-number-${componentUID.value}`);\n\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst isFocused = ref(false);\nconst displayValue = ref('');\n\nconst hasPrefix = computed(() => !!slots.prefix);\nconst hasSuffix = computed(() => !!slots.suffix);\n\nconst isUpDisabled = computed(() => {\n  if (disabled || readOnly) return true;\n  if (model.value === null) return false;\n  return model.value >= max;\n});\n\nconst isDownDisabled = computed(() => {\n  if (disabled || readOnly) return true;\n  if (model.value === null) return false;\n  return model.value <= min;\n});\n\nfunction toFixedPrecision(val: number): number {\n  if (precision !== undefined) {\n    return parseFloat(val.toFixed(precision));\n  }\n  const stepStr = String(step);\n  const stepDecimals = stepStr.includes('.') ? stepStr.split('.')[1].length : 0;\n  if (stepDecimals > 0) {\n    return parseFloat(val.toFixed(stepDecimals));\n  }\n  return val;\n}\n\nfunction clamp(val: number): number {\n  return Math.min(max, Math.max(min, val));\n}\n\nfunction formatValue(val: number | null): string {\n  if (val === null) return '';\n  let str: string;\n  if (precision !== undefined) {\n    str = val.toFixed(precision);\n  } else {\n    str = String(val);\n  }\n  if (decimalSeparator) {\n    str = str.replace('.', decimalSeparator);\n  }\n  if (formatter) {\n    return formatter(stringMode ? str : val);\n  }\n  return str;\n}\n\nfunction parseInput(input: string): number | null {\n  if (!input.trim()) return null;\n  let parsed = input;\n  if (parser) {\n    parsed = parser(input);\n  } else if (decimalSeparator) {\n    parsed = parsed.replace(decimalSeparator, '.');\n  }\n  const num = Number(parsed);\n  if (isNaN(num)) return model.value;\n  return num;\n}\n\nfunction syncDisplay() {\n  displayValue.value = formatValue(model.value);\n}\n\nfunction updateValue(newVal: number | null, triggerChange = true) {\n  if (newVal !== null) {\n    newVal = toFixedPrecision(clamp(newVal));\n  }\n  const changed = newVal !== model.value;\n  model.value = newVal;\n  syncDisplay();\n  if (changed && triggerChange) {\n    emit('change', newVal);\n  }\n}\n\nfunction stepValue(direction: 'up' | 'down') {\n  if (disabled || readOnly) return;\n  const current = model.value ?? 0;\n  const offset = direction === 'up' ? step : -step;\n  const next = toFixedPrecision(current + offset);\n  const clamped = clamp(next);\n  updateValue(clamped);\n  emit('step', clamped, { offset: step, type: direction });\n}\n\nconst handleInput = (e: Event) => {\n  const target = e.target as HTMLInputElement;\n  displayValue.value = target.value;\n};\n\nconst handleKeyDown = (e: KeyboardEvent) => {\n  if (e.key === 'Enter') {\n    commitValue();\n    emit('pressEnter', e);\n  }\n  if (!keyboard) return;\n  if (e.key === 'ArrowUp') {\n    e.preventDefault();\n    stepValue('up');\n  } else if (e.key === 'ArrowDown') {\n    e.preventDefault();\n    stepValue('down');\n  }\n};\n\nconst handleFocus = (e: FocusEvent) => {\n  isFocused.value = true;\n  emit('focus', e);\n};\n\nconst handleBlur = (e: FocusEvent) => {\n  isFocused.value = false;\n  if (changeOnBlur) {\n    commitValue();\n  }\n  emit('blur', e);\n};\n\nconst handleWheel = (e: WheelEvent) => {\n  if (!changeOnWheel || disabled || readOnly || !isFocused.value) return;\n  e.preventDefault();\n  if (e.deltaY < 0) {\n    stepValue('up');\n  } else if (e.deltaY > 0) {\n    stepValue('down');\n  }\n};\n\nfunction commitValue() {\n  const parsed = parseInput(displayValue.value);\n  if (parsed === null) {\n    updateValue(null);\n  } else {\n    updateValue(parsed);\n  }\n}\n\nconst focus = (options?: BInputNumberFocusOptions) => {\n  inputRef.value?.focus({ preventScroll: options?.preventScroll });\n  if (options?.cursor && inputRef.value) {\n    const len = inputRef.value.value.length;\n    switch (options.cursor) {\n      case 'start':\n        inputRef.value.setSelectionRange(0, 0);\n        break;\n      case 'end':\n        inputRef.value.setSelectionRange(len, len);\n        break;\n      case 'all':\n        inputRef.value.setSelectionRange(0, len);\n        break;\n    }\n  }\n};\n\nconst blur = () => {\n  inputRef.value?.blur();\n};\n\nwatch(\n  () => model.value,\n  () => {\n    if (!isFocused.value) {\n      syncDisplay();\n    }\n  },\n  { immediate: true },\n);\n\ndefineExpose({ focus, blur });\n</script>\n\n<template>\n  <span\n    class=\"b-input-number\"\n    :class=\"[\n      `b-input-number--${size}`,\n      `b-input-number--${variant}`,\n      {\n        'b-input-number--focused': isFocused,\n        'b-input-number--disabled': disabled,\n        'b-input-number--readonly': readOnly,\n        'b-input-number--error': status === BInputStatus.Error,\n        'b-input-number--warning': status === BInputStatus.Warning,\n        'b-input-number--has-controls': controls,\n      },\n    ]\"\n  >\n    <span class=\"b-input-number__wrapper\">\n      <span v-if=\"hasPrefix\" class=\"b-input-number__prefix\" aria-hidden=\"true\">\n        <slot name=\"prefix\" />\n      </span>\n\n      <input\n        :id=\"inputId\"\n        ref=\"inputRef\"\n        :value=\"displayValue\"\n        type=\"text\"\n        inputmode=\"decimal\"\n        role=\"spinbutton\"\n        :aria-valuenow=\"model ?? undefined\"\n        :aria-valuemin=\"min !== Number.MIN_SAFE_INTEGER ? min : undefined\"\n        :aria-valuemax=\"max !== Number.MAX_SAFE_INTEGER ? max : undefined\"\n        :aria-invalid=\"status === BInputStatus.Error ? true : undefined\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :readonly=\"readOnly\"\n        class=\"b-input-number__input\"\n        @input=\"handleInput\"\n        @keydown=\"handleKeyDown\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @wheel=\"handleWheel\"\n      />\n\n      <span v-if=\"hasSuffix\" class=\"b-input-number__suffix\" aria-hidden=\"true\">\n        <slot name=\"suffix\" />\n      </span>\n\n      <span v-if=\"controls\" class=\"b-input-number__handler-wrap\" aria-hidden=\"true\">\n        <span\n          class=\"b-input-number__handler b-input-number__handler--up\"\n          :class=\"{ 'b-input-number__handler--disabled': isUpDisabled }\"\n          role=\"button\"\n          tabindex=\"-1\"\n          aria-label=\"Increase value\"\n          :aria-disabled=\"isUpDisabled\"\n          @mousedown.prevent=\"!isUpDisabled && stepValue('up')\"\n        >\n          <svg\n            viewBox=\"0 0 1024 1024\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h286c2.1 0 4.2-.8 5.7-2.3l70.3-70.3 70.3 70.3c1.5 1.5 3.5 2.3 5.7 2.3h286c6.5 0 10.3-7.4 6.5-12.7z\"\n            />\n          </svg>\n        </span>\n        <span\n          class=\"b-input-number__handler b-input-number__handler--down\"\n          :class=\"{ 'b-input-number__handler--disabled': isDownDisabled }\"\n          role=\"button\"\n          tabindex=\"-1\"\n          aria-label=\"Decrease value\"\n          :aria-disabled=\"isDownDisabled\"\n          @mousedown.prevent=\"!isDownDisabled && stepValue('down')\"\n        >\n          <svg\n            viewBox=\"0 0 1024 1024\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z\"\n            />\n          </svg>\n        </span>\n      </span>\n    </span>\n  </span>\n</template>\n\n<style scoped>\n.b-input-number {\n  --b-input-number-active-bg: #ffffff;\n  --b-input-number-active-border-color: #1677ff;\n  --b-input-number-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-input-number-addon-bg: rgba(0, 0, 0, 0.02);\n  --b-input-number-control-width: 90px;\n  --b-input-number-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-input-number-filled-handle-bg: #f0f0f0;\n  --b-input-number-handle-active-bg: rgba(0, 0, 0, 0.02);\n  --b-input-number-handle-bg: #ffffff;\n  --b-input-number-handle-border-color: #d9d9d9;\n  --b-input-number-handle-font-size: 7px;\n  --b-input-number-handle-hover-color: #1677ff;\n  --b-input-number-handle-width: 22px;\n  --b-input-number-hover-bg: #ffffff;\n  --b-input-number-hover-border-color: #4096ff;\n  --b-input-number-font-size: 14px;\n  --b-input-number-font-size-lg: 16px;\n  --b-input-number-font-size-sm: 14px;\n  --b-input-number-padding-block: 4px;\n  --b-input-number-padding-block-lg: 7px;\n  --b-input-number-padding-block-sm: 0px;\n  --b-input-number-padding-inline: 11px;\n  --b-input-number-padding-inline-lg: 11px;\n  --b-input-number-padding-inline-sm: 7px;\n  --b-input-number-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-input-number-border-color: #d9d9d9;\n  --b-input-number-bg: #ffffff;\n  --b-input-number-color: rgba(0, 0, 0, 0.88);\n  --b-input-number-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-input-number-border-radius: 6px;\n  --b-input-number-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-input-number-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-input-number-error-border-color: #ff4d4f;\n  --b-input-number-error-hover-border-color: #ff7875;\n  --b-input-number-warning-border-color: #faad14;\n  --b-input-number-warning-hover-border-color: #ffc53d;\n  --b-input-number-filled-bg: rgba(0, 0, 0, 0.04);\n  --b-input-number-filled-hover-bg: rgba(0, 0, 0, 0.04);\n\n  display: inline-flex;\n  align-items: stretch;\n  width: var(--b-input-number-control-width);\n  font-size: var(--b-input-number-font-size);\n  color: var(--b-input-number-color);\n  line-height: 1.5714;\n}\n\n.b-input-number--lg {\n  font-size: var(--b-input-number-font-size-lg);\n}\n\n.b-input-number--sm {\n  font-size: var(--b-input-number-font-size-sm);\n}\n\n.b-input-number__wrapper {\n  display: inline-flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  position: relative;\n  transition: all 0.2s;\n}\n\n/* Outlined */\n.b-input-number--outlined .b-input-number__wrapper {\n  background: var(--b-input-number-bg);\n  border: 1px solid var(--b-input-number-border-color);\n  border-radius: var(--b-input-number-border-radius);\n}\n\n.b-input-number--outlined:not(.b-input-number--disabled):hover .b-input-number__wrapper {\n  border-color: var(--b-input-number-hover-border-color);\n  background: var(--b-input-number-hover-bg);\n}\n\n.b-input-number--outlined.b-input-number--focused .b-input-number__wrapper {\n  border-color: var(--b-input-number-active-border-color);\n  background: var(--b-input-number-active-bg);\n  box-shadow: var(--b-input-number-active-shadow);\n}\n\n/* Filled */\n.b-input-number--filled .b-input-number__wrapper {\n  background: var(--b-input-number-filled-bg);\n  border: 1px solid transparent;\n  border-radius: var(--b-input-number-border-radius);\n}\n\n.b-input-number--filled:not(.b-input-number--disabled):hover .b-input-number__wrapper {\n  background: var(--b-input-number-filled-hover-bg);\n}\n\n.b-input-number--filled.b-input-number--focused .b-input-number__wrapper {\n  background: var(--b-input-number-active-bg);\n  border-color: var(--b-input-number-active-border-color);\n  box-shadow: var(--b-input-number-active-shadow);\n}\n\n/* Borderless */\n.b-input-number--borderless .b-input-number__wrapper {\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--b-input-number-border-radius);\n}\n\n/* Underlined */\n.b-input-number--underlined .b-input-number__wrapper {\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--b-input-number-border-color);\n  border-radius: 0;\n}\n\n.b-input-number--underlined:not(.b-input-number--disabled):hover .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-hover-border-color);\n}\n\n.b-input-number--underlined.b-input-number--focused .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-active-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-number-active-border-color);\n}\n\n/* Error */\n.b-input-number--error.b-input-number--outlined .b-input-number__wrapper {\n  border-color: var(--b-input-number-error-border-color);\n}\n\n.b-input-number--error.b-input-number--outlined:not(.b-input-number--disabled):hover\n  .b-input-number__wrapper {\n  border-color: var(--b-input-number-error-hover-border-color);\n}\n\n.b-input-number--error.b-input-number--outlined.b-input-number--focused .b-input-number__wrapper,\n.b-input-number--error.b-input-number--filled.b-input-number--focused .b-input-number__wrapper {\n  border-color: var(--b-input-number-error-border-color);\n  box-shadow: var(--b-input-number-error-active-shadow);\n}\n\n.b-input-number--error.b-input-number--underlined .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-error-border-color);\n}\n\n.b-input-number--error.b-input-number--underlined.b-input-number--focused .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-error-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-number-error-border-color);\n}\n\n/* Warning */\n.b-input-number--warning.b-input-number--outlined .b-input-number__wrapper {\n  border-color: var(--b-input-number-warning-border-color);\n}\n\n.b-input-number--warning.b-input-number--outlined:not(.b-input-number--disabled):hover\n  .b-input-number__wrapper {\n  border-color: var(--b-input-number-warning-hover-border-color);\n}\n\n.b-input-number--warning.b-input-number--outlined.b-input-number--focused .b-input-number__wrapper,\n.b-input-number--warning.b-input-number--filled.b-input-number--focused .b-input-number__wrapper {\n  border-color: var(--b-input-number-warning-border-color);\n  box-shadow: var(--b-input-number-warning-active-shadow);\n}\n\n.b-input-number--warning.b-input-number--underlined .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-warning-border-color);\n}\n\n.b-input-number--warning.b-input-number--underlined.b-input-number--focused\n  .b-input-number__wrapper {\n  border-bottom-color: var(--b-input-number-warning-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-number-warning-border-color);\n}\n\n/* Disabled */\n.b-input-number--disabled .b-input-number__wrapper {\n  background: var(--b-input-number-disabled-bg);\n  cursor: not-allowed;\n}\n\n.b-input-number--disabled .b-input-number__input {\n  color: var(--b-input-number-disabled-color);\n  cursor: not-allowed;\n}\n\n/* Input element */\n.b-input-number__input {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n  text-align: left;\n}\n\n.b-input-number--md .b-input-number__input {\n  padding: var(--b-input-number-padding-block) var(--b-input-number-padding-inline);\n}\n\n.b-input-number--lg .b-input-number__input {\n  padding: var(--b-input-number-padding-block-lg) var(--b-input-number-padding-inline-lg);\n}\n\n.b-input-number--sm .b-input-number__input {\n  padding: var(--b-input-number-padding-block-sm) var(--b-input-number-padding-inline-sm);\n}\n\n.b-input-number--has-controls .b-input-number__input {\n  padding-right: calc(var(--b-input-number-handle-width) + 2px);\n}\n\n.b-input-number__input::placeholder {\n  color: var(--b-input-number-placeholder-color);\n}\n\n/* Prefix & Suffix */\n.b-input-number__prefix,\n.b-input-number__suffix {\n  display: inline-flex;\n  align-items: center;\n  color: var(--b-input-number-color);\n  flex-shrink: 0;\n}\n\n.b-input-number__prefix {\n  margin-left: var(--b-input-number-padding-inline);\n}\n\n.b-input-number__suffix {\n  margin-right: var(--b-input-number-padding-inline);\n}\n\n.b-input-number__prefix ~ .b-input-number__input {\n  padding-left: 4px;\n}\n\n/* Handler (step buttons) */\n.b-input-number__handler-wrap {\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: var(--b-input-number-handle-width);\n  border-left: 1px solid var(--b-input-number-handle-border-color);\n  border-radius: 0 var(--b-input-number-border-radius) var(--b-input-number-border-radius) 0;\n  overflow: hidden;\n  opacity: 0;\n  transition: opacity 0.2s;\n}\n\n.b-input-number:hover .b-input-number__handler-wrap,\n.b-input-number--focused .b-input-number__handler-wrap {\n  opacity: 1;\n}\n\n.b-input-number__handler {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  cursor: pointer;\n  background: var(--b-input-number-handle-bg);\n  font-size: var(--b-input-number-handle-font-size);\n  color: rgba(0, 0, 0, 0.45);\n  user-select: none;\n  transition:\n    color 0.2s,\n    background 0.2s;\n}\n\n.b-input-number__handler:hover {\n  color: var(--b-input-number-handle-hover-color);\n  background: var(--b-input-number-handle-active-bg);\n}\n\n.b-input-number__handler--up {\n  border-bottom: 1px solid var(--b-input-number-handle-border-color);\n}\n\n.b-input-number__handler--disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n  pointer-events: none;\n}\n\n.b-input-number__handler svg {\n  width: 0.5em;\n  height: 0.5em;\n}\n\n/* Filled variant handler */\n.b-input-number--filled .b-input-number__handler {\n  background: var(--b-input-number-filled-handle-bg);\n}\n\n/* Borderless / underlined: hide handler border */\n.b-input-number--borderless .b-input-number__handler-wrap,\n.b-input-number--underlined .b-input-number__handler-wrap {\n  border-left-color: transparent;\n}\n\n/* Dark mode */\n[data-prefers-color='dark'] .b-input-number {\n  --b-input-number-active-bg: #141414;\n  --b-input-number-active-border-color: #1668dc;\n  --b-input-number-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-input-number-addon-bg: rgba(255, 255, 255, 0.04);\n  --b-input-number-error-active-shadow: 0 0 0 2px rgba(220, 56, 56, 0.1);\n  --b-input-number-filled-handle-bg: rgba(255, 255, 255, 0.12);\n  --b-input-number-handle-active-bg: rgba(255, 255, 255, 0.04);\n  --b-input-number-handle-bg: #1f1f1f;\n  --b-input-number-handle-border-color: #424242;\n  --b-input-number-handle-hover-color: #3c89e8;\n  --b-input-number-hover-bg: #141414;\n  --b-input-number-hover-border-color: #3c89e8;\n  --b-input-number-warning-active-shadow: 0 0 0 2px rgba(209, 163, 0, 0.1);\n  --b-input-number-border-color: #424242;\n  --b-input-number-bg: #141414;\n  --b-input-number-color: rgba(255, 255, 255, 0.88);\n  --b-input-number-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-input-number-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-input-number-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-input-number-error-border-color: #dc3838;\n  --b-input-number-error-hover-border-color: #e86e6e;\n  --b-input-number-warning-border-color: #d1a300;\n  --b-input-number-warning-hover-border-color: #e8c631;\n  --b-input-number-filled-bg: rgba(255, 255, 255, 0.08);\n  --b-input-number-filled-hover-bg: rgba(255, 255, 255, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-input-number {\n    --b-input-number-active-bg: #141414;\n    --b-input-number-active-border-color: #1668dc;\n    --b-input-number-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-input-number-addon-bg: rgba(255, 255, 255, 0.04);\n    --b-input-number-error-active-shadow: 0 0 0 2px rgba(220, 56, 56, 0.1);\n    --b-input-number-filled-handle-bg: rgba(255, 255, 255, 0.12);\n    --b-input-number-handle-active-bg: rgba(255, 255, 255, 0.04);\n    --b-input-number-handle-bg: #1f1f1f;\n    --b-input-number-handle-border-color: #424242;\n    --b-input-number-handle-hover-color: #3c89e8;\n    --b-input-number-hover-bg: #141414;\n    --b-input-number-hover-border-color: #3c89e8;\n    --b-input-number-warning-active-shadow: 0 0 0 2px rgba(209, 163, 0, 0.1);\n    --b-input-number-border-color: #424242;\n    --b-input-number-bg: #141414;\n    --b-input-number-color: rgba(255, 255, 255, 0.88);\n    --b-input-number-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-input-number-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-input-number-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-input-number-error-border-color: #dc3838;\n    --b-input-number-error-hover-border-color: #e86e6e;\n    --b-input-number-warning-border-color: #d1a300;\n    --b-input-number-warning-hover-border-color: #e8c631;\n    --b-input-number-filled-bg: rgba(255, 255, 255, 0.08);\n    --b-input-number-filled-hover-bg: rgba(255, 255, 255, 0.12);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-input-number__wrapper,\n  .b-input-number__handler-wrap,\n  .b-input-number__handler {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system119.js","names":[],"sources":["../src/components/BInput/BInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, ref, useSlots, watch } from 'vue';\nimport {\n  BInputStatus,\n  BInputVariant,\n  type BInputCountConfig,\n  type BInputFocusOptions,\n} from './types.ts';\n\ndefineOptions({ inheritAttrs: false });\n\nconst slots = useSlots();\n\nconst {\n  size = BCommonSize.Medium,\n  variant = BInputVariant.Outlined,\n  type = 'text',\n  allowClear = false,\n  showCount = false,\n  disabled = false,\n  readOnly = false,\n  placeholder,\n  maxLength,\n  id,\n  count,\n  status,\n} = defineProps<{\n  /** The size of the input. */\n  size?: `${BCommonSize}`;\n  /** Visual variant of the input. */\n  variant?: `${BInputVariant}`;\n  /** Whether the input is disabled. */\n  disabled?: boolean;\n  /** Whether the input is read-only. */\n  readOnly?: boolean;\n  /** Validation status. */\n  status?: `${BInputStatus}`;\n  /** HTML input type (text, password, email, etc.). */\n  type?: string;\n  /** Maximum number of characters. */\n  maxLength?: number;\n  /** Placeholder text. */\n  placeholder?: string;\n  /** HTML id attribute. */\n  id?: string;\n  /** Show clear button when input has value. */\n  allowClear?: boolean;\n  /** Display character count. Can be boolean or a formatter function. */\n  showCount?: boolean | ((args: { value: string; count: number; maxLength?: number }) => string);\n  /** Advanced character counting configuration. */\n  count?: BInputCountConfig;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when input value changes. */\n  change: [value: string, event: Event];\n  /** Fired when Enter key is pressed. */\n  pressEnter: [event: KeyboardEvent];\n  /** Fired when clear button is clicked. */\n  clear: [];\n  /** Fired on input focus. */\n  focus: [event: FocusEvent];\n  /** Fired on input blur. */\n  blur: [event: FocusEvent];\n}>();\n\nconst model = defineModel<string>({ default: '' });\n\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => id ?? `b-input-${componentUID.value}`);\n\nconst inputRef = ref<HTMLInputElement | null>(null);\nconst isFocused = ref(false);\nconst passwordVisible = ref(false);\n\nconst hasAddonBefore = computed(() => !!slots.addonBefore);\nconst hasAddonAfter = computed(() => !!slots.addonAfter);\nconst hasPrefix = computed(() => !!slots.prefix);\nconst hasSuffix = computed(() => !!slots.suffix);\nconst isPasswordType = computed(() => type === 'password');\nconst showPasswordToggle = computed(() => isPasswordType.value);\nconst computedType = computed(() => {\n  if (isPasswordType.value) {\n    return passwordVisible.value ? 'text' : 'password';\n  }\n  return type;\n});\n\nconst charCount = computed(() => {\n  const val = model.value ?? '';\n  if (count?.strategy) return count.strategy(val);\n  return val.length;\n});\n\nconst countMax = computed(() => count?.max ?? maxLength);\n\nconst showCountIndicator = computed(() => {\n  if (count?.show === false) return false;\n  if (count?.show !== undefined) return true;\n  return !!showCount;\n});\n\nconst countText = computed(() => {\n  const val = model.value ?? '';\n  const currentCount = charCount.value;\n\n  if (typeof count?.show === 'function') {\n    return count.show({ value: val, count: currentCount, maxLength: countMax.value });\n  }\n  if (typeof showCount === 'function') {\n    return showCount({ value: val, count: currentCount, maxLength: countMax.value });\n  }\n  if (countMax.value !== undefined) {\n    return `${currentCount} / ${countMax.value}`;\n  }\n  return `${currentCount}`;\n});\n\nconst isOverCount = computed(() => {\n  if (countMax.value === undefined) return false;\n  return charCount.value > countMax.value;\n});\n\nconst showClearButton = computed(() => {\n  return allowClear && !!model.value && !disabled && !readOnly;\n});\n\nconst handleInput = (e: Event) => {\n  const target = e.target as HTMLInputElement;\n  let value = target.value;\n\n  if (count?.exceedFormatter && countMax.value !== undefined) {\n    const strategy = count.strategy ?? ((v: string) => v.length);\n    if (strategy(value) > countMax.value) {\n      value = count.exceedFormatter(value, { max: countMax.value });\n      target.value = value;\n    }\n  }\n\n  model.value = value;\n  emit('change', value, e);\n};\n\nconst handleKeyDown = (e: KeyboardEvent) => {\n  if (e.key === 'Enter') {\n    emit('pressEnter', e);\n  }\n};\n\nconst handleFocus = (e: FocusEvent) => {\n  isFocused.value = true;\n  emit('focus', e);\n};\n\nconst handleBlur = (e: FocusEvent) => {\n  isFocused.value = false;\n  emit('blur', e);\n};\n\nconst handleClear = () => {\n  model.value = '';\n  emit('clear');\n  emit('change', '', new Event('change'));\n  inputRef.value?.focus();\n};\n\nconst togglePasswordVisibility = () => {\n  passwordVisible.value = !passwordVisible.value;\n  inputRef.value?.focus();\n};\n\nconst focus = (options?: BInputFocusOptions) => {\n  inputRef.value?.focus({ preventScroll: options?.preventScroll });\n  if (options?.cursor && inputRef.value) {\n    const len = inputRef.value.value.length;\n    switch (options.cursor) {\n      case 'start':\n        inputRef.value.setSelectionRange(0, 0);\n        break;\n      case 'end':\n        inputRef.value.setSelectionRange(len, len);\n        break;\n      case 'all':\n        inputRef.value.setSelectionRange(0, len);\n        break;\n    }\n  }\n};\n\nconst blur = () => {\n  inputRef.value?.blur();\n};\n\nwatch(model, (val) => {\n  if (count?.exceedFormatter && countMax.value !== undefined) {\n    const strategy = count.strategy ?? ((v: string) => v.length);\n    if (strategy(val) > countMax.value) {\n      model.value = count.exceedFormatter(val, { max: countMax.value });\n    }\n  }\n});\n\ndefineExpose({ focus, blur });\n</script>\n\n<template>\n  <span\n    class=\"b-input\"\n    :class=\"[\n      `b-input--${size}`,\n      `b-input--${variant}`,\n      {\n        'b-input--focused': isFocused,\n        'b-input--disabled': disabled,\n        'b-input--readonly': readOnly,\n        'b-input--error': status === BInputStatus.Error,\n        'b-input--warning': status === BInputStatus.Warning,\n        'b-input--has-addon-before': hasAddonBefore,\n        'b-input--has-addon-after': hasAddonAfter,\n        'b-input--over-count': isOverCount,\n      },\n    ]\"\n  >\n    <span v-if=\"hasAddonBefore\" class=\"b-input__addon b-input__addon--before\">\n      <slot name=\"addonBefore\" />\n    </span>\n\n    <span class=\"b-input__wrapper\">\n      <span v-if=\"hasPrefix\" class=\"b-input__prefix\" aria-hidden=\"true\">\n        <slot name=\"prefix\" />\n      </span>\n\n      <input\n        v-bind=\"$attrs\"\n        :id=\"inputId\"\n        ref=\"inputRef\"\n        :value=\"model\"\n        :type=\"computedType\"\n        :placeholder=\"placeholder\"\n        :disabled=\"disabled\"\n        :readonly=\"readOnly\"\n        :maxlength=\"maxLength && !count?.exceedFormatter ? maxLength : undefined\"\n        :aria-invalid=\"status === BInputStatus.Error ? true : undefined\"\n        :aria-describedby=\"showCountIndicator ? `${inputId}-count` : undefined\"\n        class=\"b-input__input\"\n        @input=\"handleInput\"\n        @keydown=\"handleKeyDown\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n      />\n\n      <span v-if=\"showClearButton\" class=\"b-input__clear-wrapper\">\n        <button\n          type=\"button\"\n          class=\"b-input__clear\"\n          aria-label=\"Clear input\"\n          tabindex=\"-1\"\n          @mousedown.prevent=\"handleClear\"\n        >\n          <svg\n            viewBox=\"64 64 896 896\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z\"\n            />\n          </svg>\n        </button>\n      </span>\n\n      <span v-if=\"showPasswordToggle\" class=\"b-input__password-toggle-wrapper\">\n        <button\n          type=\"button\"\n          class=\"b-input__password-toggle\"\n          :aria-label=\"passwordVisible ? 'Hide password' : 'Show password'\"\n          :aria-pressed=\"passwordVisible\"\n          tabindex=\"-1\"\n          @mousedown.prevent=\"togglePasswordVisibility\"\n        >\n          <svg\n            v-if=\"!passwordVisible\"\n            viewBox=\"64 64 896 896\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 730c-114.9 0-208-93.1-208-208s93.1-208 208-208 208 93.1 208 208-93.1 208-208 208zm0-319.8c-61.7 0-111.8 50.1-111.8 111.8S450.3 633.8 512 633.8 623.8 583.7 623.8 522 573.7 410.2 512 410.2z\"\n            />\n          </svg>\n          <svg\n            v-else\n            viewBox=\"64 64 896 896\"\n            width=\"1em\"\n            height=\"1em\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M942.2 486.2C847.4 286.5 704.1 186 512 186c-53.8 0-104.5 9.6-151.7 28.4L212.7 67.2a8.03 8.03 0 00-11.3 0L160 108.5a8.03 8.03 0 000 11.3l740.3 740.3a8.03 8.03 0 0011.3 0l41.3-41.3a8.03 8.03 0 000-11.3l-106.8-106.8c53.1-57.6 94.3-127.4 106.2-153a60.3 60.3 0 000-51.5zM512 730c-114.9 0-208-93.1-208-208 0-40.1 11.4-77.6 31-109.4L297 374.6C270.6 414.1 256 466 256 522c0 141.4 114.6 256 256 256 56 0 107.9-18 150.2-48.5l-38-38C597.6 714.6 556.1 730 512 730zm0-520c114.9 0 208 93.1 208 208 0 40.1-11.4 77.6-31 109.4L727 565.4C753.4 525.9 768 474 768 418c0-141.4-114.6-256-256-256-56 0-107.9 18-150.2 48.5l38 38C426.4 225.4 467.9 210 512 210z\"\n            />\n          </svg>\n        </button>\n      </span>\n\n      <span v-if=\"hasSuffix\" class=\"b-input__suffix\" aria-hidden=\"true\">\n        <slot name=\"suffix\" />\n      </span>\n\n      <span\n        v-if=\"showCountIndicator\"\n        :id=\"`${inputId}-count`\"\n        class=\"b-input__count\"\n        :class=\"{ 'b-input__count--over': isOverCount }\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n      >\n        {{ countText }}\n      </span>\n    </span>\n\n    <span v-if=\"hasAddonAfter\" class=\"b-input__addon b-input__addon--after\">\n      <slot name=\"addonAfter\" />\n    </span>\n  </span>\n</template>\n\n<style scoped>\n.b-input {\n  --b-input-active-bg: #ffffff;\n  --b-input-active-border-color: #1677ff;\n  --b-input-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-input-addon-bg: rgba(0, 0, 0, 0.02);\n  --b-input-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-input-hover-bg: #ffffff;\n  --b-input-hover-border-color: #4096ff;\n  --b-input-font-size: 14px;\n  --b-input-font-size-lg: 16px;\n  --b-input-font-size-sm: 14px;\n  --b-input-padding-block: 4px;\n  --b-input-padding-block-lg: 7px;\n  --b-input-padding-block-sm: 0px;\n  --b-input-padding-inline: 11px;\n  --b-input-padding-inline-lg: 11px;\n  --b-input-padding-inline-sm: 7px;\n  --b-input-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-input-border-color: #d9d9d9;\n  --b-input-bg: #ffffff;\n  --b-input-color: rgba(0, 0, 0, 0.88);\n  --b-input-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-input-border-radius: 6px;\n  --b-input-clear-color: rgba(0, 0, 0, 0.25);\n  --b-input-clear-hover-color: rgba(0, 0, 0, 0.45);\n  --b-input-count-color: rgba(0, 0, 0, 0.65);\n  --b-input-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-input-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-input-error-border-color: #ff4d4f;\n  --b-input-error-hover-border-color: #ff7875;\n  --b-input-warning-border-color: #faad14;\n  --b-input-warning-hover-border-color: #ffc53d;\n  --b-input-filled-bg: rgba(0, 0, 0, 0.04);\n  --b-input-filled-hover-bg: rgba(0, 0, 0, 0.04);\n\n  display: inline-flex;\n  align-items: stretch;\n  width: 100%;\n  font-size: var(--b-input-font-size);\n  color: var(--b-input-color);\n  line-height: 1.5714;\n}\n\n.b-input--lg {\n  font-size: var(--b-input-font-size-lg);\n}\n\n.b-input--sm {\n  font-size: var(--b-input-font-size-sm);\n}\n\n.b-input__wrapper {\n  display: inline-flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  position: relative;\n  transition: all 0.2s;\n}\n\n/* Outlined */\n.b-input--outlined .b-input__wrapper {\n  background: var(--b-input-bg);\n  border: 1px solid var(--b-input-border-color);\n  border-radius: var(--b-input-border-radius);\n}\n\n.b-input--outlined:not(.b-input--disabled):hover .b-input__wrapper {\n  border-color: var(--b-input-hover-border-color);\n  background: var(--b-input-hover-bg);\n}\n\n.b-input--outlined.b-input--focused .b-input__wrapper {\n  border-color: var(--b-input-active-border-color);\n  background: var(--b-input-active-bg);\n  box-shadow: var(--b-input-active-shadow);\n}\n\n/* Filled */\n.b-input--filled .b-input__wrapper {\n  background: var(--b-input-filled-bg);\n  border: 1px solid transparent;\n  border-radius: var(--b-input-border-radius);\n}\n\n.b-input--filled:not(.b-input--disabled):hover .b-input__wrapper {\n  background: var(--b-input-filled-hover-bg);\n}\n\n.b-input--filled.b-input--focused .b-input__wrapper {\n  background: var(--b-input-active-bg);\n  border-color: var(--b-input-active-border-color);\n  box-shadow: var(--b-input-active-shadow);\n}\n\n/* Borderless */\n.b-input--borderless .b-input__wrapper {\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--b-input-border-radius);\n}\n\n/* Underlined */\n.b-input--underlined .b-input__wrapper {\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--b-input-border-color);\n  border-radius: 0;\n}\n\n.b-input--underlined:not(.b-input--disabled):hover .b-input__wrapper {\n  border-bottom-color: var(--b-input-hover-border-color);\n}\n\n.b-input--underlined.b-input--focused .b-input__wrapper {\n  border-bottom-color: var(--b-input-active-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-active-border-color);\n}\n\n/* Error */\n.b-input--error.b-input--outlined .b-input__wrapper {\n  border-color: var(--b-input-error-border-color);\n}\n\n.b-input--error.b-input--outlined:not(.b-input--disabled):hover .b-input__wrapper {\n  border-color: var(--b-input-error-hover-border-color);\n}\n\n.b-input--error.b-input--outlined.b-input--focused .b-input__wrapper,\n.b-input--error.b-input--filled.b-input--focused .b-input__wrapper {\n  border-color: var(--b-input-error-border-color);\n  box-shadow: var(--b-input-error-active-shadow);\n}\n\n.b-input--error.b-input--underlined .b-input__wrapper {\n  border-bottom-color: var(--b-input-error-border-color);\n}\n\n.b-input--error.b-input--underlined.b-input--focused .b-input__wrapper {\n  border-bottom-color: var(--b-input-error-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-error-border-color);\n}\n\n/* Warning */\n.b-input--warning.b-input--outlined .b-input__wrapper {\n  border-color: var(--b-input-warning-border-color);\n}\n\n.b-input--warning.b-input--outlined:not(.b-input--disabled):hover .b-input__wrapper {\n  border-color: var(--b-input-warning-hover-border-color);\n}\n\n.b-input--warning.b-input--outlined.b-input--focused .b-input__wrapper,\n.b-input--warning.b-input--filled.b-input--focused .b-input__wrapper {\n  border-color: var(--b-input-warning-border-color);\n  box-shadow: var(--b-input-warning-active-shadow);\n}\n\n.b-input--warning.b-input--underlined .b-input__wrapper {\n  border-bottom-color: var(--b-input-warning-border-color);\n}\n\n.b-input--warning.b-input--underlined.b-input--focused .b-input__wrapper {\n  border-bottom-color: var(--b-input-warning-border-color);\n  box-shadow: 0 1px 0 0 var(--b-input-warning-border-color);\n}\n\n/* Disabled */\n.b-input--disabled .b-input__wrapper {\n  background: var(--b-input-disabled-bg);\n  cursor: not-allowed;\n}\n\n.b-input--disabled .b-input__input {\n  color: var(--b-input-disabled-color);\n  cursor: not-allowed;\n}\n\n/* Addon border radius */\n.b-input--has-addon-before .b-input__wrapper {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n.b-input--has-addon-after .b-input__wrapper {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n/* Input element */\n.b-input__input {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  line-height: inherit;\n}\n\n.b-input--md .b-input__input {\n  padding: var(--b-input-padding-block) var(--b-input-padding-inline);\n}\n\n.b-input--lg .b-input__input {\n  padding: var(--b-input-padding-block-lg) var(--b-input-padding-inline-lg);\n}\n\n.b-input--sm .b-input__input {\n  padding: var(--b-input-padding-block-sm) var(--b-input-padding-inline-sm);\n}\n\n.b-input__input::placeholder {\n  color: var(--b-input-placeholder-color);\n}\n\n/* Prefix & Suffix */\n.b-input__prefix,\n.b-input__suffix {\n  display: inline-flex;\n  align-items: center;\n  color: var(--b-input-color);\n  flex-shrink: 0;\n}\n\n.b-input__prefix {\n  margin-left: var(--b-input-padding-inline);\n}\n\n.b-input__suffix {\n  margin-right: var(--b-input-padding-inline);\n}\n\n.b-input__prefix ~ .b-input__input {\n  padding-left: 4px;\n}\n\n/* Clear & password toggle */\n.b-input__clear-wrapper,\n.b-input__password-toggle-wrapper {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-right: var(--b-input-padding-inline);\n}\n\n.b-input__clear,\n.b-input__password-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  background: none;\n  padding: 0;\n  cursor: pointer;\n  color: var(--b-input-clear-color);\n  font-size: 14px;\n  line-height: 1;\n  transition: color 0.2s;\n}\n\n.b-input__clear:hover,\n.b-input__password-toggle:hover {\n  color: var(--b-input-clear-hover-color);\n}\n\n/* Count */\n.b-input__count {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-right: var(--b-input-padding-inline);\n  color: var(--b-input-count-color);\n  font-size: 0.857em;\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n.b-input__count--over {\n  color: var(--b-input-error-border-color);\n}\n\n/* Addons */\n.b-input__addon {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 11px;\n  background: var(--b-input-addon-bg);\n  border: 1px solid var(--b-input-border-color);\n  color: var(--b-input-color);\n  font-size: inherit;\n  white-space: nowrap;\n}\n\n.b-input__addon--before {\n  border-right: none;\n  border-radius: var(--b-input-border-radius) 0 0 var(--b-input-border-radius);\n}\n\n.b-input__addon--after {\n  border-left: none;\n  border-radius: 0 var(--b-input-border-radius) var(--b-input-border-radius) 0;\n}\n\n/* Dark mode — activated via data attribute on ancestor */\n[data-prefers-color='dark'] .b-input {\n  --b-input-active-bg: #141414;\n  --b-input-active-border-color: #1668dc;\n  --b-input-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-input-addon-bg: rgba(255, 255, 255, 0.04);\n  --b-input-error-active-shadow: 0 0 0 2px rgba(220, 56, 56, 0.1);\n  --b-input-hover-bg: #141414;\n  --b-input-hover-border-color: #3c89e8;\n  --b-input-warning-active-shadow: 0 0 0 2px rgba(209, 163, 0, 0.1);\n  --b-input-border-color: #424242;\n  --b-input-bg: #141414;\n  --b-input-color: rgba(255, 255, 255, 0.88);\n  --b-input-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-input-clear-color: rgba(255, 255, 255, 0.25);\n  --b-input-clear-hover-color: rgba(255, 255, 255, 0.45);\n  --b-input-count-color: rgba(255, 255, 255, 0.65);\n  --b-input-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-input-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-input-error-border-color: #dc3838;\n  --b-input-error-hover-border-color: #e86e6e;\n  --b-input-warning-border-color: #d1a300;\n  --b-input-warning-hover-border-color: #e8c631;\n  --b-input-filled-bg: rgba(255, 255, 255, 0.08);\n  --b-input-filled-hover-bg: rgba(255, 255, 255, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-input {\n    --b-input-active-bg: #141414;\n    --b-input-active-border-color: #1668dc;\n    --b-input-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-input-addon-bg: rgba(255, 255, 255, 0.04);\n    --b-input-error-active-shadow: 0 0 0 2px rgba(220, 56, 56, 0.1);\n    --b-input-hover-bg: #141414;\n    --b-input-hover-border-color: #3c89e8;\n    --b-input-warning-active-shadow: 0 0 0 2px rgba(209, 163, 0, 0.1);\n    --b-input-border-color: #424242;\n    --b-input-bg: #141414;\n    --b-input-color: rgba(255, 255, 255, 0.88);\n    --b-input-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-input-clear-color: rgba(255, 255, 255, 0.25);\n    --b-input-clear-hover-color: rgba(255, 255, 255, 0.45);\n    --b-input-count-color: rgba(255, 255, 255, 0.65);\n    --b-input-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-input-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-input-error-border-color: #dc3838;\n    --b-input-error-hover-border-color: #e86e6e;\n    --b-input-warning-border-color: #d1a300;\n    --b-input-warning-hover-border-color: #e8c631;\n    --b-input-filled-bg: rgba(255, 255, 255, 0.08);\n    --b-input-filled-hover-bg: rgba(255, 255, 255, 0.12);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-input__wrapper,\n  .b-input__clear,\n  .b-input__password-toggle {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}