@7pmlabs/design-system 1.0.10 → 2.0.0

package/dist/design-system114.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system114.js","names":[],"sources":["../src/components/BMentions/types.ts"],"sourcesContent":["export interface BMentionsOption {\n  /** Display label for the mention suggestion. Falls back to `value` if omitted. */\n  label?: string;\n  /** The value inserted when this option is selected. */\n  value: string;\n  /** Whether this option is disabled. */\n  disabled?: boolean;\n}\n\nexport enum BMentionsStatus {\n  Error = 'error',\n  Warning = 'warning',\n}\n\nexport enum BMentionsVariant {\n  Outlined = 'outlined',\n  Filled = 'filled',\n  Borderless = 'borderless',\n}\n\nexport enum BMentionsPlacement {\n  Top = 'top',\n  Bottom = 'bottom',\n}\n"],"mappings":";AASA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,UAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,SAAA,UACA,EAAA,aAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,MAAA,OACA,EAAA,SAAA;KACD"}
+{"version":3,"file":"design-system114.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        :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-system116.js

@@ -0,0 +1,9 @@
+import e from "./design-system14.js";
+import t from "./design-system114.js";
+/* empty css                 */
+//#region src/components/BInput/BInput.vue
+var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-4221495b"]]);
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=design-system116.js.map

package/dist/design-system116.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system116.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        :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":""}

package/dist/design-system117.js

@@ -1,9 +1,227 @@
-import e from "./design-system14.js";
-import t from "./design-system115.js";
-/* empty css                 */
-//#region src/components/BMentions/BMentions.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-8c92c351"]]);
+import { BCommonSize as e } from "./design-system3.js";
+import { useComponentId as t } from "./design-system10.js";
+import { BInputStatus as n, BInputVariant as r } from "./design-system113.js";
+import { computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, openBlock as d, ref as f, renderSlot as p, unref as m, useModel as h, useSlots as g, watch as _, withModifiers as v } from "vue";
+//#region src/components/BInputNumber/BInputNumber.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "b-input-number__wrapper" }, b = {
+	key: 0,
+	class: "b-input-number__prefix",
+	"aria-hidden": "true"
+}, x = [
+	"id",
+	"value",
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-invalid",
+	"placeholder",
+	"disabled",
+	"readonly"
+], S = {
+	key: 1,
+	class: "b-input-number__suffix",
+	"aria-hidden": "true"
+}, C = {
+	key: 2,
+	class: "b-input-number__handler-wrap",
+	"aria-hidden": "true"
+}, w = ["aria-disabled"], T = ["aria-disabled"], E = /* @__PURE__ */ c({
+	inheritAttrs: !1,
+	__name: "BInputNumber",
+	props: /* @__PURE__ */ l({
+		size: { default: () => e.Medium },
+		variant: { default: () => r.Outlined },
+		status: {},
+		min: { default: () => -(2 ** 53 - 1) },
+		max: { default: () => 2 ** 53 - 1 },
+		step: { default: 1 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readOnly: {
+			type: Boolean,
+			default: !1
+		},
+		controls: {
+			type: Boolean,
+			default: !0
+		},
+		keyboard: {
+			type: Boolean,
+			default: !0
+		},
+		changeOnBlur: {
+			type: Boolean,
+			default: !0
+		},
+		changeOnWheel: {
+			type: Boolean,
+			default: !1
+		},
+		placeholder: {},
+		id: {},
+		precision: {},
+		formatter: { type: Function },
+		parser: { type: Function },
+		decimalSeparator: {},
+		stringMode: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ l([
+		"change",
+		"pressEnter",
+		"step",
+		"focus",
+		"blur"
+	], ["update:modelValue"]),
+	setup(e, { expose: r, emit: c }) {
+		let l = g(), E = c, D = h(e, "modelValue"), { componentUID: O } = t(), k = i(() => e.id ?? `b-input-number-${O.value}`), A = f(null), j = f(!1), M = f(""), N = i(() => !!l.prefix), P = i(() => !!l.suffix), F = i(() => e.disabled || e.readOnly ? !0 : D.value === null ? !1 : D.value >= e.max), I = i(() => e.disabled || e.readOnly ? !0 : D.value === null ? !1 : D.value <= e.min);
+		function L(t) {
+			if (e.precision !== void 0) return parseFloat(t.toFixed(e.precision));
+			let n = String(e.step), r = n.includes(".") ? n.split(".")[1].length : 0;
+			return r > 0 ? parseFloat(t.toFixed(r)) : t;
+		}
+		function R(t) {
+			return Math.min(e.max, Math.max(e.min, t));
+		}
+		function z(t) {
+			if (t === null) return "";
+			let n;
+			return n = e.precision === void 0 ? String(t) : t.toFixed(e.precision), e.decimalSeparator && (n = n.replace(".", e.decimalSeparator)), e.formatter ? e.formatter(e.stringMode ? n : t) : n;
+		}
+		function B(t) {
+			if (!t.trim()) return null;
+			let n = t;
+			e.parser ? n = e.parser(t) : e.decimalSeparator && (n = n.replace(e.decimalSeparator, "."));
+			let r = Number(n);
+			return isNaN(r) ? D.value : r;
+		}
+		function V() {
+			M.value = z(D.value);
+		}
+		function H(e, t = !0) {
+			e !== null && (e = L(R(e)));
+			let n = e !== D.value;
+			D.value = e, V(), n && t && E("change", e);
+		}
+		function U(t) {
+			if (e.disabled || e.readOnly) return;
+			let n = R(L((D.value ?? 0) + (t === "up" ? e.step : -e.step)));
+			H(n), E("step", n, {
+				offset: e.step,
+				type: t
+			});
+		}
+		let W = (e) => {
+			M.value = e.target.value;
+		}, G = (t) => {
+			t.key === "Enter" && (Y(), E("pressEnter", t)), e.keyboard && (t.key === "ArrowUp" ? (t.preventDefault(), U("up")) : t.key === "ArrowDown" && (t.preventDefault(), U("down")));
+		}, K = (e) => {
+			j.value = !0, E("focus", e);
+		}, q = (t) => {
+			j.value = !1, e.changeOnBlur && Y(), E("blur", t);
+		}, J = (t) => {
+			!e.changeOnWheel || e.disabled || e.readOnly || !j.value || (t.preventDefault(), t.deltaY < 0 ? U("up") : t.deltaY > 0 && U("down"));
+		};
+		function Y() {
+			let e = B(M.value);
+			H(e === null ? null : e);
+		}
+		return _(() => D.value, () => {
+			j.value || V();
+		}, { immediate: !0 }), r({
+			focus: (e) => {
+				if (A.value?.focus({ preventScroll: e?.preventScroll }), e?.cursor && A.value) {
+					let t = A.value.value.length;
+					switch (e.cursor) {
+						case "start":
+							A.value.setSelectionRange(0, 0);
+							break;
+						case "end":
+							A.value.setSelectionRange(t, t);
+							break;
+						case "all":
+							A.value.setSelectionRange(0, t);
+							break;
+					}
+				}
+			},
+			blur: () => {
+				A.value?.blur();
+			}
+		}), (t, r) => (d(), o("span", { class: u(["b-input-number", [
+			`b-input-number--${e.size}`,
+			`b-input-number--${e.variant}`,
+			{
+				"b-input-number--focused": j.value,
+				"b-input-number--disabled": e.disabled,
+				"b-input-number--readonly": e.readOnly,
+				"b-input-number--error": e.status === m(n).Error,
+				"b-input-number--warning": e.status === m(n).Warning,
+				"b-input-number--has-controls": e.controls
+			}
+		]]) }, [s("span", y, [
+			N.value ? (d(), o("span", b, [p(t.$slots, "prefix", {}, void 0, !0)])) : a("", !0),
+			s("input", {
+				id: k.value,
+				ref_key: "inputRef",
+				ref: A,
+				value: M.value,
+				type: "text",
+				inputmode: "decimal",
+				role: "spinbutton",
+				"aria-valuenow": D.value ?? void 0,
+				"aria-valuemin": e.min === -(2 ** 53 - 1) ? void 0 : e.min,
+				"aria-valuemax": e.max === 2 ** 53 - 1 ? void 0 : e.max,
+				"aria-invalid": e.status === m(n).Error ? !0 : void 0,
+				placeholder: e.placeholder,
+				disabled: e.disabled,
+				readonly: e.readOnly,
+				class: "b-input-number__input",
+				onInput: W,
+				onKeydown: G,
+				onFocus: K,
+				onBlur: q,
+				onWheel: J
+			}, null, 40, x),
+			P.value ? (d(), o("span", S, [p(t.$slots, "suffix", {}, void 0, !0)])) : a("", !0),
+			e.controls ? (d(), o("span", C, [s("span", {
+				class: u(["b-input-number__handler b-input-number__handler--up", { "b-input-number__handler--disabled": F.value }]),
+				role: "button",
+				tabindex: "-1",
+				"aria-label": "Increase value",
+				"aria-disabled": F.value,
+				onMousedown: r[0] ||= v((e) => !F.value && U("up"), ["prevent"])
+			}, [...r[2] ||= [s("svg", {
+				viewBox: "0 0 1024 1024",
+				width: "1em",
+				height: "1em",
+				fill: "currentColor",
+				"aria-hidden": "true"
+			}, [s("path", { 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" })], -1)]], 42, w), s("span", {
+				class: u(["b-input-number__handler b-input-number__handler--down", { "b-input-number__handler--disabled": I.value }]),
+				role: "button",
+				tabindex: "-1",
+				"aria-label": "Decrease value",
+				"aria-disabled": I.value,
+				onMousedown: r[1] ||= v((e) => !I.value && U("down"), ["prevent"])
+			}, [...r[3] ||= [s("svg", {
+				viewBox: "0 0 1024 1024",
+				width: "1em",
+				height: "1em",
+				fill: "currentColor",
+				"aria-hidden": "true"
+			}, [s("path", { 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" })], -1)]], 42, T)])) : a("", !0)
+		])], 2));
+	}
+});
 //#endregion
-export { n as default };
+export { E as default };
 
 //# sourceMappingURL=design-system117.js.map

package/dist/design-system117.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system117.js","names":[],"sources":["../src/components/BMentions/BMentions.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BCommonSize } from '@/types.ts';\nimport { computed, nextTick, ref, useAttrs, watch } from 'vue';\n\nimport { BMentionsStatus, BMentionsVariant, type BMentionsOption } from './types.ts';\n\ndefineOptions({ inheritAttrs: false });\n\nconst attrs = useAttrs();\n\nconst {\n  options = [],\n  size = BCommonSize.Medium,\n  variant = BMentionsVariant.Outlined,\n  prefix = '@',\n  split = ' ',\n  autoSize = false,\n  allowClear = false,\n  filterOption = true,\n  notFoundContent = 'Not Found',\n  placeholder,\n  rows = 3,\n} = defineProps<{\n  /** Data source for mention suggestions. */\n  options?: BMentionsOption[];\n  /** Size of the textarea. */\n  size?: `${BCommonSize}`;\n  /** Visual variant. */\n  variant?: `${BMentionsVariant}`;\n  /** Popup positioning relative to cursor. */\n  placement?: 'top' | 'bottom';\n  /** Trigger character(s) for mention lookup. */\n  prefix?: string | string[];\n  /** Delimiter character(s) inserted before/after mention. */\n  split?: string;\n  /** Auto-resize the textarea height. Can be boolean or { minRows, maxRows }. */\n  autoSize?: boolean | { minRows?: number; maxRows?: number };\n  /** Show clear button when there is content. */\n  allowClear?: boolean;\n  /** Filter options by search text. `true` for default filter, function for custom. */\n  filterOption?: boolean | ((search: string, option: BMentionsOption) => boolean);\n  /** Content shown when no results match. Set to `null` to hide dropdown when empty. */\n  notFoundContent?: string | null;\n  /** Whether the textarea is disabled. */\n  disabled?: boolean;\n  /** Whether the textarea is read-only. */\n  readOnly?: boolean;\n  /** Validation status. */\n  status?: `${BMentionsStatus}`;\n  /** Placeholder text. */\n  placeholder?: string;\n  /** Number of visible text lines (when autoSize is false). */\n  rows?: number;\n}>();\n\nconst emit = defineEmits<{\n  /** Fired when the input value changes. */\n  change: [value: string];\n  /** Fired when an option is selected. */\n  select: [option: BMentionsOption, prefix: string];\n  /** Fired when a prefix character is typed and search begins. */\n  search: [text: string, prefix: string];\n  /** Fired when input gains focus. */\n  focus: [event: FocusEvent];\n  /** Fired when input loses focus. */\n  blur: [event: FocusEvent];\n  /** Fired when the clear button is clicked. */\n  clear: [];\n  /** Fired on textarea resize (when autoSize is active). */\n  resize: [size: { width: number; height: number }];\n  /** Fired during popup scroll. */\n  popupScroll: [event: Event];\n}>();\n\nconst model = defineModel<string>({ default: '' });\n\nconst { componentUID } = useComponentId();\nconst anchorName = computed(() => `--b-mentions-anchor-${componentUID.value}`);\nconst listboxId = computed(() => `b-mentions-listbox-${componentUID.value}`);\n\nconst textareaRef = ref<HTMLTextAreaElement | null>(null);\nconst menuRef = ref<HTMLElement | null>(null);\nconst isFocused = ref(false);\nconst isOpen = ref(false);\nconst activeIndex = ref(-1);\nconst measuring = ref(false);\nconst measurePrefix = ref('');\nconst measureText = ref('');\nconst measureStart = ref(0);\n\nconst prefixes = computed(() => (Array.isArray(prefix) ? prefix : [prefix]));\n\nconst filteredOptions = computed(() => {\n  const search = measureText.value.toLowerCase();\n  if (!filterOption) return options;\n  if (typeof filterOption === 'function') {\n    return options.filter((opt) => filterOption(search, opt));\n  }\n  if (!search) return options;\n  return options.filter((opt) => {\n    const text = (opt.label ?? opt.value).toLowerCase();\n    return text.includes(search);\n  });\n});\n\nconst showDropdown = computed(() => {\n  if (!measuring.value) return false;\n  if (filteredOptions.value.length === 0 && notFoundContent === null) return false;\n  return isOpen.value;\n});\n\nconst getOptionLabel = (opt: BMentionsOption) => opt.label ?? opt.value;\n\nfunction openMenu() {\n  if (isOpen.value) return;\n  menuRef.value?.showPopover();\n}\n\nfunction closeMenu() {\n  if (!isOpen.value) return;\n  menuRef.value?.hidePopover();\n}\n\nfunction handleToggle({ newState }: ToggleEvent) {\n  const nowOpen = newState === 'open';\n  isOpen.value = nowOpen;\n  if (nowOpen && filteredOptions.value.length > 0) {\n    activeIndex.value = 0;\n  } else if (!nowOpen) {\n    activeIndex.value = -1;\n    measuring.value = false;\n  }\n}\n\nfunction getLastMeasureIndex(\n  text: string,\n  cursorPos: number,\n): { start: number; prefix: string } | null {\n  for (const p of prefixes.value) {\n    const beforeCursor = text.slice(0, cursorPos);\n    const lastPrefixIdx = beforeCursor.lastIndexOf(p);\n    if (lastPrefixIdx < 0) continue;\n    const afterPrefix = beforeCursor.slice(lastPrefixIdx + p.length);\n    if (/\\s/.test(afterPrefix)) continue;\n    if (\n      lastPrefixIdx === 0 ||\n      text[lastPrefixIdx - 1] === split ||\n      /\\s/.test(text[lastPrefixIdx - 1])\n    ) {\n      return { start: lastPrefixIdx, prefix: p };\n    }\n  }\n  return null;\n}\n\nfunction startMeasure(text: string, cursorPos: number) {\n  const measure = getLastMeasureIndex(text, cursorPos);\n  if (measure) {\n    measuring.value = true;\n    measurePrefix.value = measure.prefix;\n    measureStart.value = measure.start;\n    measureText.value = text.slice(measure.start + measure.prefix.length, cursorPos);\n    emit('search', measureText.value, measure.prefix);\n    nextTick(() => openMenu());\n  } else {\n    stopMeasure();\n  }\n}\n\nfunction stopMeasure() {\n  closeMenu();\n  measuring.value = false;\n  measureText.value = '';\n  measurePrefix.value = '';\n  measureStart.value = 0;\n}\n\nfunction selectOption(opt: BMentionsOption) {\n  if (opt.disabled) return;\n\n  const textarea = textareaRef.value;\n  if (!textarea) return;\n\n  const value = model.value ?? '';\n  const cursorPos = textarea.selectionStart;\n  const beforeMention = value.slice(0, measureStart.value);\n  const afterMention = value.slice(cursorPos);\n\n  const mentionValue = `${measurePrefix.value}${opt.value}`;\n  const needsTrailingSplit = afterMention && !afterMention.startsWith(split) && split;\n  const newValue = `${beforeMention}${mentionValue}${needsTrailingSplit ? split : ''}${afterMention}`;\n\n  model.value = newValue;\n  emit('change', newValue);\n  emit('select', opt, measurePrefix.value);\n\n  stopMeasure();\n\n  const newCursorPos =\n    beforeMention.length + mentionValue.length + (needsTrailingSplit ? split.length : 0);\n  nextTick(() => {\n    textarea.focus();\n    textarea.setSelectionRange(newCursorPos, newCursorPos);\n  });\n}\n\nfunction handleInput(e: Event) {\n  const target = e.target as HTMLTextAreaElement;\n  const value = target.value;\n  model.value = value;\n  emit('change', value);\n\n  const cursorPos = target.selectionStart;\n  startMeasure(value, cursorPos);\n  adjustHeight();\n}\n\nfunction handleFocus(e: FocusEvent) {\n  isFocused.value = true;\n  emit('focus', e);\n}\n\nfunction handleBlur(e: FocusEvent) {\n  const related = e.relatedTarget as HTMLElement | null;\n  if (menuRef.value?.contains(related)) return;\n  isFocused.value = false;\n  emit('blur', e);\n  stopMeasure();\n}\n\nfunction handleKeyDown(e: KeyboardEvent) {\n  if (!showDropdown.value) return;\n\n  switch (e.key) {\n    case 'ArrowDown': {\n      e.preventDefault();\n      const opts = filteredOptions.value;\n      if (opts.length === 0) return;\n      const next = activeIndex.value + 1;\n      for (let i = 0; i < opts.length; i++) {\n        const idx = (next + i) % opts.length;\n        if (!opts[idx].disabled) {\n          activeIndex.value = idx;\n          break;\n        }\n      }\n      break;\n    }\n    case 'ArrowUp': {\n      e.preventDefault();\n      const opts = filteredOptions.value;\n      if (opts.length === 0) return;\n      const prev = activeIndex.value - 1;\n      for (let i = 0; i < opts.length; i++) {\n        const idx = (((prev - i) % opts.length) + opts.length) % opts.length;\n        if (!opts[idx].disabled) {\n          activeIndex.value = idx;\n          break;\n        }\n      }\n      break;\n    }\n    case 'Enter': {\n      e.preventDefault();\n      if (activeIndex.value >= 0) {\n        const opt = filteredOptions.value[activeIndex.value];\n        if (opt && !opt.disabled) {\n          selectOption(opt);\n        }\n      }\n      break;\n    }\n    case 'Escape': {\n      e.preventDefault();\n      stopMeasure();\n      break;\n    }\n  }\n}\n\nfunction handleClear() {\n  model.value = '';\n  emit('change', '');\n  emit('clear');\n  stopMeasure();\n  textareaRef.value?.focus();\n}\n\nfunction handlePopupScroll(e: Event) {\n  emit('popupScroll', e);\n}\n\nfunction adjustHeight() {\n  if (!autoSize || !textareaRef.value) return;\n  const textarea = textareaRef.value;\n  textarea.style.height = 'auto';\n\n  const config = typeof autoSize === 'object' ? autoSize : {};\n  const lineHeight = parseFloat(getComputedStyle(textarea).lineHeight) || 20;\n\n  let newHeight = textarea.scrollHeight;\n  if (config.minRows) {\n    newHeight = Math.max(newHeight, config.minRows * lineHeight);\n  }\n  if (config.maxRows) {\n    newHeight = Math.min(newHeight, config.maxRows * lineHeight);\n  }\n\n  textarea.style.height = `${newHeight}px`;\n  emit('resize', { width: textarea.offsetWidth, height: newHeight });\n}\n\nconst scrollActiveIntoView = () => {\n  nextTick(() => {\n    const active = menuRef.value?.querySelector('[data-active=\"true\"]');\n    active?.scrollIntoView({ block: 'nearest' });\n  });\n};\n\nwatch(activeIndex, scrollActiveIntoView);\n\nwatch(model, (val) => {\n  if (textareaRef.value && textareaRef.value.value !== val) {\n    textareaRef.value.value = val ?? '';\n  }\n});\n\ndefineExpose({\n  focus: () => textareaRef.value?.focus(),\n  blur: () => textareaRef.value?.blur(),\n});\n</script>\n\n<template>\n  <div\n    class=\"b-mentions\"\n    :class=\"[\n      `b-mentions--${size}`,\n      `b-mentions--${variant}`,\n      {\n        'b-mentions--focused': isFocused,\n        'b-mentions--disabled': disabled,\n        'b-mentions--error': status === BMentionsStatus.Error,\n        'b-mentions--warning': status === BMentionsStatus.Warning,\n        'b-mentions--has-clear': allowClear,\n      },\n    ]\"\n    role=\"combobox\"\n    :aria-label=\"placeholder || 'Mentions input'\"\n    :aria-expanded=\"showDropdown\"\n    :aria-haspopup=\"'listbox'\"\n    :aria-controls=\"showDropdown ? listboxId : undefined\"\n  >\n    <textarea\n      ref=\"textareaRef\"\n      v-bind=\"attrs\"\n      :value=\"model\"\n      class=\"b-mentions__textarea\"\n      :placeholder=\"placeholder\"\n      :disabled=\"disabled\"\n      :readonly=\"readOnly\"\n      :rows=\"autoSize ? undefined : rows\"\n      :aria-label=\"placeholder || 'Mentions input'\"\n      autocomplete=\"off\"\n      :aria-activedescendant=\"activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined\"\n      aria-autocomplete=\"list\"\n      @input=\"handleInput\"\n      @focus=\"handleFocus\"\n      @blur=\"handleBlur\"\n      @keydown=\"handleKeyDown\"\n    />\n\n    <button\n      v-if=\"allowClear && model && !disabled\"\n      type=\"button\"\n      class=\"b-mentions__clear\"\n      aria-label=\"Clear input\"\n      tabindex=\"-1\"\n      @mousedown.prevent=\"handleClear\"\n    ></button>\n\n    <div\n      v-if=\"measuring || isOpen\"\n      ref=\"menuRef\"\n      :id=\"listboxId\"\n      class=\"b-mentions__dropdown\"\n      popover=\"manual\"\n      role=\"listbox\"\n      :aria-label=\"`Mention suggestions for ${measurePrefix}`\"\n      @toggle=\"handleToggle\"\n      @scroll=\"handlePopupScroll\"\n    >\n      <ul v-if=\"filteredOptions.length > 0\" class=\"b-mentions__options\">\n        <li\n          v-for=\"(opt, idx) in filteredOptions\"\n          :key=\"opt.value\"\n          :id=\"`${listboxId}-option-${idx}`\"\n          class=\"b-mentions__option\"\n          :class=\"{\n            'b-mentions__option--active': idx === activeIndex && !opt.disabled,\n            'b-mentions__option--disabled': opt.disabled,\n          }\"\n          :data-active=\"idx === activeIndex\"\n          :aria-selected=\"idx === activeIndex\"\n          :aria-disabled=\"opt.disabled ?? false\"\n          role=\"option\"\n          @mousedown.prevent=\"selectOption(opt)\"\n          @mouseenter=\"activeIndex = idx\"\n        >\n          <slot name=\"option\" :option=\"opt\" :index=\"idx\">\n            {{ getOptionLabel(opt) }}\n          </slot>\n        </li>\n      </ul>\n      <div v-else-if=\"notFoundContent\" class=\"b-mentions__not-found\">\n        <slot name=\"notFoundContent\">\n          {{ notFoundContent }}\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.b-mentions {\n  --b-mentions-active-bg: #ffffff;\n  --b-mentions-active-border-color: #1677ff;\n  --b-mentions-active-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);\n  --b-mentions-hover-bg: #ffffff;\n  --b-mentions-hover-border-color: #4096ff;\n  --b-mentions-border-color: #d9d9d9;\n  --b-mentions-bg: #ffffff;\n  --b-mentions-color: rgba(0, 0, 0, 0.88);\n  --b-mentions-placeholder-color: rgba(0, 0, 0, 0.25);\n  --b-mentions-font-size: 14px;\n  --b-mentions-font-size-lg: 16px;\n  --b-mentions-font-size-sm: 14px;\n  --b-mentions-padding-block: 4px;\n  --b-mentions-padding-block-lg: 7px;\n  --b-mentions-padding-block-sm: 0px;\n  --b-mentions-padding-inline: 11px;\n  --b-mentions-padding-inline-lg: 11px;\n  --b-mentions-padding-inline-sm: 7px;\n  --b-mentions-border-radius: 6px;\n  --b-mentions-disabled-bg: rgba(0, 0, 0, 0.04);\n  --b-mentions-disabled-color: rgba(0, 0, 0, 0.25);\n  --b-mentions-error-border-color: #ff4d4f;\n  --b-mentions-error-hover-border-color: #ff7875;\n  --b-mentions-error-active-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);\n  --b-mentions-warning-border-color: #faad14;\n  --b-mentions-warning-hover-border-color: #ffc53d;\n  --b-mentions-warning-active-shadow: 0 0 0 2px rgba(255, 215, 5, 0.1);\n  --b-mentions-dropdown-bg: #ffffff;\n  --b-mentions-dropdown-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  --b-mentions-dropdown-height: 250px;\n  --b-mentions-option-active-bg: rgba(0, 0, 0, 0.04);\n  --b-mentions-option-selected-bg: #e6f4ff;\n  --b-mentions-option-font-size: 14px;\n  --b-mentions-option-padding-x: 12px;\n  --b-mentions-option-padding-y: 5px;\n  --b-mentions-clear-color: rgba(0, 0, 0, 0.25);\n  --b-mentions-clear-hover-color: rgba(0, 0, 0, 0.45);\n  --b-mentions-z-index-popup: 1050;\n\n  display: flex;\n  width: 100%;\n}\n\n.b-mentions--has-clear {\n  position: relative;\n}\n\n/* ── Textarea ── */\n.b-mentions__textarea {\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  outline: none;\n  resize: vertical;\n  font-family: inherit;\n  line-height: 1.5714;\n  color: var(--b-mentions-color);\n  background-color: var(--b-mentions-bg);\n  border: 1px solid var(--b-mentions-border-color);\n  border-radius: var(--b-mentions-border-radius);\n  transition:\n    border-color 0.2s,\n    box-shadow 0.2s,\n    background-color 0.2s;\n  anchor-name: v-bind('anchorName');\n}\n\n.b-mentions__textarea::placeholder {\n  color: var(--b-mentions-placeholder-color);\n}\n\n/* ── Sizes ── */\n.b-mentions--sm .b-mentions__textarea {\n  padding: var(--b-mentions-padding-block-sm) var(--b-mentions-padding-inline-sm);\n  font-size: var(--b-mentions-font-size-sm);\n}\n\n.b-mentions--md .b-mentions__textarea {\n  padding: var(--b-mentions-padding-block) var(--b-mentions-padding-inline);\n  font-size: var(--b-mentions-font-size);\n}\n\n.b-mentions--lg .b-mentions__textarea {\n  padding: var(--b-mentions-padding-block-lg) var(--b-mentions-padding-inline-lg);\n  font-size: var(--b-mentions-font-size-lg);\n}\n\n/* ── Variants ── */\n.b-mentions--outlined .b-mentions__textarea {\n  border-color: var(--b-mentions-border-color);\n}\n\n.b-mentions--filled .b-mentions__textarea {\n  border-color: transparent;\n  background-color: var(--b-mentions-disabled-bg);\n}\n\n.b-mentions--borderless .b-mentions__textarea {\n  border-color: transparent;\n  background-color: transparent;\n  box-shadow: none;\n}\n\n/* ── States ── */\n.b-mentions--focused:not(.b-mentions--disabled) .b-mentions__textarea {\n  border-color: var(--b-mentions-active-border-color);\n  box-shadow: var(--b-mentions-active-shadow);\n  background-color: var(--b-mentions-active-bg);\n}\n\n.b-mentions:not(.b-mentions--focused):not(.b-mentions--disabled):hover .b-mentions__textarea {\n  border-color: var(--b-mentions-hover-border-color);\n  background-color: var(--b-mentions-hover-bg);\n}\n\n.b-mentions--borderless.b-mentions--focused .b-mentions__textarea {\n  box-shadow: none;\n}\n\n/* ── Disabled ── */\n.b-mentions--disabled .b-mentions__textarea {\n  cursor: not-allowed;\n  background-color: var(--b-mentions-disabled-bg);\n  color: var(--b-mentions-disabled-color);\n}\n\n/* ── Error status ── */\n.b-mentions--error .b-mentions__textarea {\n  border-color: var(--b-mentions-error-border-color);\n}\n\n.b-mentions--error:not(.b-mentions--disabled):hover .b-mentions__textarea {\n  border-color: var(--b-mentions-error-hover-border-color);\n}\n\n.b-mentions--error.b-mentions--focused .b-mentions__textarea {\n  border-color: var(--b-mentions-error-border-color);\n  box-shadow: var(--b-mentions-error-active-shadow);\n}\n\n/* ── Warning status ── */\n.b-mentions--warning .b-mentions__textarea {\n  border-color: var(--b-mentions-warning-border-color);\n}\n\n.b-mentions--warning:not(.b-mentions--disabled):hover .b-mentions__textarea {\n  border-color: var(--b-mentions-warning-hover-border-color);\n}\n\n.b-mentions--warning.b-mentions--focused .b-mentions__textarea {\n  border-color: var(--b-mentions-warning-border-color);\n  box-shadow: var(--b-mentions-warning-active-shadow);\n}\n\n/* ── Clear button ── */\n.b-mentions__clear {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--b-mentions-clear-color);\n  font-size: 10px;\n  cursor: pointer;\n  transition: color 0.2s;\n}\n\n.b-mentions__clear::after {\n  content: '\\2715';\n}\n\n.b-mentions__clear:hover {\n  color: var(--b-mentions-clear-hover-color);\n}\n\n/* ── Dropdown ── */\n.b-mentions__dropdown {\n  margin: 0;\n  padding: 4px;\n  border: none;\n  border-radius: var(--b-mentions-border-radius);\n  background: var(--b-mentions-dropdown-bg);\n  box-shadow: var(--b-mentions-dropdown-shadow);\n  max-height: var(--b-mentions-dropdown-height);\n  overflow-y: auto;\n  z-index: var(--b-mentions-z-index-popup);\n\n  position: absolute;\n  position-anchor: v-bind('anchorName');\n  inset: auto;\n  top: anchor(bottom);\n  left: anchor(left);\n  width: anchor-size(width);\n  position-try-fallbacks: --b-mentions-top;\n\n  opacity: 0;\n  transition:\n    display 0.2s allow-discrete,\n    opacity 0.2s;\n}\n\n.b-mentions__dropdown:popover-open {\n  opacity: 1;\n\n  @starting-style {\n    opacity: 0;\n  }\n}\n\n@position-try --b-mentions-top {\n  inset: auto;\n  bottom: anchor(top);\n  left: anchor(left);\n}\n\n/* ── Options list ── */\n.b-mentions__options {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.b-mentions__option {\n  padding: var(--b-mentions-option-padding-y) var(--b-mentions-option-padding-x);\n  font-size: var(--b-mentions-option-font-size);\n  line-height: 1.5714;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.15s;\n}\n\n.b-mentions__option--active {\n  background: var(--b-mentions-option-active-bg);\n}\n\n.b-mentions__option:hover:not(.b-mentions__option--disabled) {\n  background: var(--b-mentions-option-active-bg);\n}\n\n.b-mentions__option--disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n/* ── Not found ── */\n.b-mentions__not-found {\n  padding: var(--b-mentions-option-padding-y) var(--b-mentions-option-padding-x);\n  font-size: var(--b-mentions-option-font-size);\n  color: var(--b-mentions-disabled-color);\n  text-align: center;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-mentions {\n  --b-mentions-active-bg: #1f1f1f;\n  --b-mentions-active-border-color: #1668dc;\n  --b-mentions-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n  --b-mentions-hover-bg: #1f1f1f;\n  --b-mentions-hover-border-color: #3c89e8;\n  --b-mentions-border-color: #424242;\n  --b-mentions-bg: #1f1f1f;\n  --b-mentions-color: rgba(255, 255, 255, 0.88);\n  --b-mentions-placeholder-color: rgba(255, 255, 255, 0.25);\n  --b-mentions-disabled-bg: rgba(255, 255, 255, 0.08);\n  --b-mentions-disabled-color: rgba(255, 255, 255, 0.25);\n  --b-mentions-dropdown-bg: #2a2a2a;\n  --b-mentions-dropdown-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  --b-mentions-option-active-bg: rgba(255, 255, 255, 0.08);\n  --b-mentions-option-selected-bg: #111a2c;\n  --b-mentions-clear-color: rgba(255, 255, 255, 0.25);\n  --b-mentions-clear-hover-color: rgba(255, 255, 255, 0.45);\n  --b-mentions-error-border-color: #d32029;\n  --b-mentions-error-hover-border-color: #e84749;\n  --b-mentions-error-active-shadow: 0 0 0 2px rgba(211, 32, 41, 0.1);\n  --b-mentions-warning-border-color: #d89614;\n  --b-mentions-warning-hover-border-color: #e8b339;\n  --b-mentions-warning-active-shadow: 0 0 0 2px rgba(216, 150, 20, 0.1);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-mentions {\n    --b-mentions-active-bg: #1f1f1f;\n    --b-mentions-active-border-color: #1668dc;\n    --b-mentions-active-shadow: 0 0 0 2px rgba(22, 104, 220, 0.15);\n    --b-mentions-hover-bg: #1f1f1f;\n    --b-mentions-hover-border-color: #3c89e8;\n    --b-mentions-border-color: #424242;\n    --b-mentions-bg: #1f1f1f;\n    --b-mentions-color: rgba(255, 255, 255, 0.88);\n    --b-mentions-placeholder-color: rgba(255, 255, 255, 0.25);\n    --b-mentions-disabled-bg: rgba(255, 255, 255, 0.08);\n    --b-mentions-disabled-color: rgba(255, 255, 255, 0.25);\n    --b-mentions-dropdown-bg: #2a2a2a;\n    --b-mentions-dropdown-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 3px 6px -4px rgba(0, 0, 0, 0.48),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n    --b-mentions-option-active-bg: rgba(255, 255, 255, 0.08);\n    --b-mentions-option-selected-bg: #111a2c;\n    --b-mentions-clear-color: rgba(255, 255, 255, 0.25);\n    --b-mentions-clear-hover-color: rgba(255, 255, 255, 0.45);\n    --b-mentions-error-border-color: #d32029;\n    --b-mentions-error-hover-border-color: #e84749;\n    --b-mentions-error-active-shadow: 0 0 0 2px rgba(211, 32, 41, 0.1);\n    --b-mentions-warning-border-color: #d89614;\n    --b-mentions-warning-hover-border-color: #e8b339;\n    --b-mentions-warning-active-shadow: 0 0 0 2px rgba(216, 150, 20, 0.1);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-mentions__textarea,\n  .b-mentions__dropdown,\n  .b-mentions__option,\n  .b-mentions__clear {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"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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"}

package/dist/design-system119.js

@@ -0,0 +1,9 @@
+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"]]);
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=design-system119.js.map

package/dist/design-system119.js.map

@@ -0,0 +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":""}