@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system115.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system115.js","names":[],"sources":["../src/components/BImage/BImage.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Types\n// ─────────────────────────────────────────────\nexport type BImageTransformAction =\n  | 'flipX'\n  | 'flipY'\n  | 'rotateLeft'\n  | 'rotateRight'\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'reset'\n  | 'wheel'\n  | 'dragStart'\n  | 'dragEnd';\n\nexport interface BImageTransform {\n  scale: number;\n  rotate: number;\n  flipX: boolean;\n  flipY: boolean;\n  x: number;\n  y: number;\n}\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /** Image source URL. */\n    src?: string;\n    /** Alt text for the image. */\n    alt?: string;\n    /** Image width (px or CSS value). */\n    width?: string | number;\n    /** Image height (px or CSS value). */\n    height?: string | number;\n    /** Fallback source when loading fails. */\n    fallback?: string;\n    /**\n     * Show loading placeholder. Set to `true` for built-in shimmer,\n     * or use the `placeholder` slot for custom content.\n     */\n    placeholder?: boolean;\n    /**\n     * Low-resolution source for progressive loading.\n     * Shown blurred while the full image loads.\n     */\n    placeholderSrc?: string;\n    /** Enable image preview on click. */\n    preview?: boolean;\n    /** Show the hover mask overlay over the image. Set `false` to hide the mask entirely while keeping preview on click. */\n    mask?: boolean;\n    /** Custom source for preview (defaults to `src`). */\n    previewSrc?: string;\n    /** Controlled preview visibility (v-model:previewVisible). */\n    previewVisible?: boolean;\n    /** Zoom scale step for preview controls. */\n    scaleStep?: number;\n    /** Min zoom scale. */\n    minScale?: number;\n    /** Max zoom scale. */\n    maxScale?: number;\n    /** Allow dragging/panning the image inside the preview. */\n    movable?: boolean;\n    /** Native `loading` attribute - `'lazy'` for below-the-fold images. */\n    loading?: 'lazy' | 'eager';\n    /** CORS setting for the image. */\n    crossOrigin?: '' | 'anonymous' | 'use-credentials';\n    /** Decoding hint for the browser. */\n    decoding?: 'async' | 'auto' | 'sync';\n    /** Referrer policy for the image request. */\n    referrerPolicy?:\n      | ''\n      | 'no-referrer'\n      | 'no-referrer-when-downgrade'\n      | 'origin'\n      | 'origin-when-cross-origin'\n      | 'same-origin'\n      | 'strict-origin'\n      | 'strict-origin-when-cross-origin'\n      | 'unsafe-url';\n  }>(),\n  {\n    src: undefined,\n    alt: '',\n    width: undefined,\n    height: undefined,\n    fallback: undefined,\n    placeholder: false,\n    placeholderSrc: undefined,\n    preview: true,\n    mask: true,\n    previewSrc: undefined,\n    previewVisible: undefined,\n    scaleStep: 0.5,\n    minScale: 1,\n    maxScale: 50,\n    movable: true,\n    loading: undefined,\n    crossOrigin: undefined,\n    decoding: undefined,\n    referrerPolicy: undefined,\n  },\n);\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires when the <img> fails to load. */\n  (e: 'error', event: Event): void;\n  /** Fires when controlled preview visibility changes. */\n  (e: 'update:previewVisible', visible: boolean): void;\n  /** Fires on every preview transform change (zoom, rotate, flip, drag). */\n  (e: 'transform', payload: { transform: BImageTransform; action: BImageTransformAction }): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Custom loading placeholder content. */\n  placeholder?(): unknown;\n  /** Custom preview mask overlay. */\n  'preview-mask'?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Image loading state\n// ─────────────────────────────────────────────\nconst loadStatus = ref<'loading' | 'loaded' | 'error'>('loading');\nconst useFallback = ref(false);\n\nfunction handleLoad() {\n  loadStatus.value = 'loaded';\n}\n\nfunction handleError(event: Event) {\n  if (props.fallback && !useFallback.value) {\n    useFallback.value = true;\n    loadStatus.value = 'loading';\n  } else {\n    loadStatus.value = 'error';\n  }\n  emit('error', event);\n}\n\nconst displaySrc = computed(() => {\n  if (useFallback.value && props.fallback) return props.fallback;\n  return props.src;\n});\n\n// Reset state when src changes\nwatch(\n  () => props.src,\n  () => {\n    loadStatus.value = 'loading';\n    useFallback.value = false;\n  },\n);\n\n// ─────────────────────────────────────────────\n// Progressive loading (low-res blurry placeholder)\n// ─────────────────────────────────────────────\nconst showProgressivePlaceholder = computed(\n  () => props.placeholderSrc && loadStatus.value === 'loading',\n);\n\n// ─────────────────────────────────────────────\n// Dimension helpers\n// ─────────────────────────────────────────────\nconst dimensionStyle = computed(() => {\n  const s: Record<string, string> = {};\n  if (props.width != null) {\n    s.width = typeof props.width === 'number' ? `${props.width}px` : props.width;\n  }\n  if (props.height != null) {\n    s.height = typeof props.height === 'number' ? `${props.height}px` : props.height;\n  }\n  return s;\n});\n\n// ─────────────────────────────────────────────\n// Show mask logic\n// ─────────────────────────────────────────────\nconst showMask = computed(() => props.preview && props.mask && loadStatus.value === 'loaded');\n\n// ─────────────────────────────────────────────\n// Preview overlay\n// ─────────────────────────────────────────────\nconst internalPreviewOpen = ref(false);\nconst isControlled = computed(() => props.previewVisible !== undefined);\n\nconst previewOpen = computed(() =>\n  isControlled.value ? props.previewVisible : internalPreviewOpen.value,\n);\n\nfunction openPreview() {\n  if (!props.preview) return;\n  if (isControlled.value) {\n    emit('update:previewVisible', true);\n  } else {\n    internalPreviewOpen.value = true;\n  }\n  nextTick(() => {\n    trapFocusInPreview();\n  });\n}\n\nfunction closePreview() {\n  if (isControlled.value) {\n    emit('update:previewVisible', false);\n  } else {\n    internalPreviewOpen.value = false;\n  }\n  // Return focus to trigger\n  nextTick(() => {\n    triggerRef.value?.focus();\n  });\n}\n\n// ─────────────────────────────────────────────\n// Preview transform state\n// ─────────────────────────────────────────────\nconst scale = ref(1);\nconst rotate = ref(0);\nconst flipX = ref(false);\nconst flipY = ref(false);\nconst dragX = ref(0);\nconst dragY = ref(0);\n\nfunction currentTransform(): BImageTransform {\n  return {\n    scale: scale.value,\n    rotate: rotate.value,\n    flipX: flipX.value,\n    flipY: flipY.value,\n    x: dragX.value,\n    y: dragY.value,\n  };\n}\n\nfunction emitTransform(action: BImageTransformAction) {\n  emit('transform', { transform: currentTransform(), action });\n}\n\nfunction resetTransform() {\n  scale.value = 1;\n  rotate.value = 0;\n  flipX.value = false;\n  flipY.value = false;\n  dragX.value = 0;\n  dragY.value = 0;\n}\n\nfunction doResetTransform() {\n  resetTransform();\n  emitTransform('reset');\n}\n\nfunction zoomIn() {\n  const next = scale.value + props.scaleStep;\n  scale.value = Math.min(next, props.maxScale);\n  emitTransform('zoomIn');\n}\n\nfunction zoomOut() {\n  const next = scale.value - props.scaleStep;\n  scale.value = Math.max(next, props.minScale);\n  emitTransform('zoomOut');\n}\n\nfunction rotateLeft() {\n  rotate.value -= 90;\n  emitTransform('rotateLeft');\n}\n\nfunction rotateRight() {\n  rotate.value += 90;\n  emitTransform('rotateRight');\n}\n\nfunction toggleFlipX() {\n  flipX.value = !flipX.value;\n  emitTransform('flipX');\n}\n\nfunction toggleFlipY() {\n  flipY.value = !flipY.value;\n  emitTransform('flipY');\n}\n\nconst previewTransform = computed(() => {\n  const parts: string[] = [];\n  parts.push(`translate(${dragX.value}px, ${dragY.value}px)`);\n  parts.push(`scale(${flipX.value ? -1 : 1}, ${flipY.value ? -1 : 1})`);\n  parts.push(`scale(${scale.value})`);\n  parts.push(`rotate(${rotate.value}deg)`);\n  return parts.join(' ');\n});\n\n// Reset transform when preview is opened\nwatch(previewOpen, (open) => {\n  if (open) {\n    resetTransform();\n  }\n});\n\nconst previewImageSrc = computed(() => props.previewSrc || props.src);\n\n// ─────────────────────────────────────────────\n// Drag-to-pan (movable)\n// ─────────────────────────────────────────────\nconst isDragging = ref(false);\nconst dragStartX = ref(0);\nconst dragStartY = ref(0);\nconst dragStartTranslateX = ref(0);\nconst dragStartTranslateY = ref(0);\n\nfunction handlePreviewPointerDown(event: PointerEvent) {\n  if (!props.movable) return;\n  // Only initiate drag on the image body (not toolbar/close)\n  const target = event.target as HTMLElement;\n  if (target.closest('.b-image-preview__toolbar') || target.closest('.b-image-preview__close')) {\n    return;\n  }\n\n  isDragging.value = true;\n  dragStartX.value = event.clientX;\n  dragStartY.value = event.clientY;\n  dragStartTranslateX.value = dragX.value;\n  dragStartTranslateY.value = dragY.value;\n\n  (event.currentTarget as HTMLElement)?.setPointerCapture(event.pointerId);\n  emitTransform('dragStart');\n}\n\nfunction handlePreviewPointerMove(event: PointerEvent) {\n  if (!isDragging.value) return;\n  const dx = event.clientX - dragStartX.value;\n  const dy = event.clientY - dragStartY.value;\n  dragX.value = dragStartTranslateX.value + dx;\n  dragY.value = dragStartTranslateY.value + dy;\n}\n\nfunction handlePreviewPointerUp() {\n  if (!isDragging.value) return;\n  isDragging.value = false;\n  emitTransform('dragEnd');\n}\n\n// ─────────────────────────────────────────────\n// Focus management\n// ─────────────────────────────────────────────\nconst triggerRef = ref<HTMLElement | null>(null);\nconst overlayRef = ref<HTMLElement | null>(null);\n\nfunction trapFocusInPreview() {\n  nextTick(() => {\n    if (!overlayRef.value) return;\n    const focusable = overlayRef.value.querySelectorAll<HTMLElement>(\n      'button, [tabindex]:not([tabindex=\"-1\"])',\n    );\n    if (focusable.length > 0) {\n      focusable[0].focus();\n    }\n  });\n}\n\nfunction handleOverlayKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') {\n    event.stopPropagation();\n    closePreview();\n    return;\n  }\n\n  if (event.key === 'Tab' && overlayRef.value) {\n    const focusable = Array.from(\n      overlayRef.value.querySelectorAll<HTMLElement>('button, [tabindex]:not([tabindex=\"-1\"])'),\n    );\n    if (focusable.length === 0) return;\n\n    const first = focusable[0];\n    const last = focusable[focusable.length - 1];\n\n    if (event.shiftKey && document.activeElement === first) {\n      event.preventDefault();\n      last.focus();\n    } else if (!event.shiftKey && document.activeElement === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n}\n\nfunction handleTriggerKeydown(event: KeyboardEvent) {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    openPreview();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Body scroll lock\n// ─────────────────────────────────────────────\nwatch(previewOpen, (open) => {\n  if (typeof document === 'undefined') return;\n  if (open) {\n    document.body.style.overflow = 'hidden';\n  } else {\n    document.body.style.overflow = '';\n  }\n});\n\nonBeforeUnmount(() => {\n  if (typeof document !== 'undefined') {\n    document.body.style.overflow = '';\n  }\n});\n\n// ─────────────────────────────────────────────\n// Zoom with mouse wheel in preview\n// ─────────────────────────────────────────────\nfunction handlePreviewWheel(event: WheelEvent) {\n  event.preventDefault();\n  if (event.deltaY < 0) {\n    const next = scale.value + props.scaleStep;\n    scale.value = Math.min(next, props.maxScale);\n  } else {\n    const next = scale.value - props.scaleStep;\n    scale.value = Math.max(next, props.minScale);\n  }\n  emitTransform('wheel');\n}\n\n// ─────────────────────────────────────────────\n// Toolbar keyboard support\n// ─────────────────────────────────────────────\nfunction handleToolbarKeydown(event: KeyboardEvent) {\n  const target = event.target as HTMLElement;\n  if (target.tagName !== 'BUTTON') return;\n\n  const toolbar = target.closest('.b-image-preview__toolbar');\n  if (!toolbar) return;\n  const buttons = Array.from(toolbar.querySelectorAll<HTMLElement>('button:not(:disabled)'));\n  const index = buttons.indexOf(target);\n\n  let nextIndex = -1;\n  if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n    event.preventDefault();\n    nextIndex = (index + 1) % buttons.length;\n  } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n    event.preventDefault();\n    nextIndex = (index - 1 + buttons.length) % buttons.length;\n  } else if (event.key === 'Home') {\n    event.preventDefault();\n    nextIndex = 0;\n  } else if (event.key === 'End') {\n    event.preventDefault();\n    nextIndex = buttons.length - 1;\n  }\n\n  if (nextIndex >= 0) {\n    buttons[nextIndex].focus();\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"b-image\"\n    :class=\"{\n      'b-image--error': loadStatus === 'error' && !fallback,\n      'b-image--preview': preview,\n    }\"\n    :style=\"dimensionStyle\"\n  >\n    <!-- Progressive placeholder (blurred low-res image) -->\n    <img\n      v-if=\"showProgressivePlaceholder\"\n      class=\"b-image__progressive-placeholder\"\n      :src=\"placeholderSrc\"\n      :alt=\"alt\"\n      aria-hidden=\"true\"\n    />\n\n    <!-- Placeholder (shimmer or slot) -->\n    <div\n      v-if=\"(placeholder || $slots.placeholder) && loadStatus === 'loading' && !placeholderSrc\"\n      class=\"b-image__placeholder\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"placeholder\">\n        <div class=\"b-image__placeholder-shimmer\" />\n      </slot>\n    </div>\n\n    <!-- Image -->\n    <img\n      v-show=\"loadStatus !== 'loading' || (!placeholder && !$slots.placeholder && !placeholderSrc)\"\n      class=\"b-image__img\"\n      :src=\"displaySrc\"\n      :alt=\"alt\"\n      :width=\"typeof width === 'number' ? width : undefined\"\n      :height=\"typeof height === 'number' ? height : undefined\"\n      :loading=\"loading\"\n      :crossorigin=\"crossOrigin\"\n      :decoding=\"decoding\"\n      :referrerpolicy=\"referrerPolicy\"\n      @load=\"handleLoad\"\n      @error=\"handleError\"\n    />\n\n    <!-- Preview mask overlay (clickable) -->\n    <div\n      v-if=\"showMask\"\n      ref=\"triggerRef\"\n      class=\"b-image__mask\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-label=\"`Preview image${alt ? ': ' + alt : ''}`\"\n      @click=\"openPreview\"\n      @keydown=\"handleTriggerKeydown\"\n    >\n      <slot name=\"preview-mask\">\n        <span class=\"b-image__mask-text\" aria-hidden=\"true\">\n          <!-- Eye icon -->\n          <svg\n            class=\"b-image__mask-icon\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n            <circle cx=\"12\" cy=\"12\" r=\"3\" />\n          </svg>\n          Preview\n        </span>\n      </slot>\n    </div>\n\n    <!-- Invisible click target when mask is hidden but preview is enabled -->\n    <div\n      v-else-if=\"preview && !mask && loadStatus === 'loaded'\"\n      ref=\"triggerRef\"\n      class=\"b-image__click-target\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-label=\"`Preview image${alt ? ': ' + alt : ''}`\"\n      @click=\"openPreview\"\n      @keydown=\"handleTriggerKeydown\"\n    />\n\n    <!-- Preview overlay (teleported to body) -->\n    <Teleport to=\"body\">\n      <Transition name=\"b-image-preview\">\n        <div\n          v-if=\"previewOpen\"\n          ref=\"overlayRef\"\n          class=\"b-image-preview\"\n          :class=\"{ 'b-image-preview--dragging': isDragging }\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"`Image preview${alt ? ': ' + alt : ''}`\"\n          @keydown=\"handleOverlayKeydown\"\n          @wheel.prevent=\"handlePreviewWheel\"\n          @pointerdown=\"handlePreviewPointerDown\"\n          @pointermove=\"handlePreviewPointerMove\"\n          @pointerup=\"handlePreviewPointerUp\"\n          @pointercancel=\"handlePreviewPointerUp\"\n        >\n          <!-- Backdrop -->\n          <div class=\"b-image-preview__backdrop\" @click=\"closePreview\" />\n\n          <!-- Close button -->\n          <button\n            class=\"b-image-preview__close\"\n            type=\"button\"\n            aria-label=\"Close preview\"\n            @click=\"closePreview\"\n          >\n            <svg\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            >\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n            </svg>\n          </button>\n\n          <!-- Preview image -->\n          <div class=\"b-image-preview__body\">\n            <img\n              class=\"b-image-preview__img\"\n              :src=\"previewImageSrc\"\n              :alt=\"alt\"\n              :style=\"{ transform: previewTransform }\"\n              draggable=\"false\"\n            />\n          </div>\n\n          <!-- Toolbar -->\n          <div\n            class=\"b-image-preview__toolbar\"\n            role=\"toolbar\"\n            aria-label=\"Image preview controls\"\n            @keydown=\"handleToolbarKeydown\"\n          >\n            <!-- Flip Horizontal -->\n            <button\n              type=\"button\"\n              aria-label=\"Flip horizontal\"\n              :aria-pressed=\"flipX\"\n              @click=\"toggleFlipX\"\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <path d=\"M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3\" />\n                <path d=\"M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3\" />\n                <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"23\" stroke-dasharray=\"2 2\" />\n              </svg>\n            </button>\n\n            <!-- Flip Vertical -->\n            <button\n              type=\"button\"\n              aria-label=\"Flip vertical\"\n              :aria-pressed=\"flipY\"\n              @click=\"toggleFlipY\"\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <path d=\"M3 8V5a2 2 0 0 1 2-2h14c1.1 0 2 .9 2 2v3\" />\n                <path d=\"M3 16v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3\" />\n                <line x1=\"1\" y1=\"12\" x2=\"23\" y2=\"12\" stroke-dasharray=\"2 2\" />\n              </svg>\n            </button>\n\n            <!-- Rotate Left -->\n            <button type=\"button\" aria-label=\"Rotate left\" @click=\"rotateLeft\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <polyline points=\"1 4 1 10 7 10\" />\n                <path d=\"M3.51 15a9 9 0 1 0 2.13-9.36L1 10\" />\n              </svg>\n            </button>\n\n            <!-- Rotate Right -->\n            <button type=\"button\" aria-label=\"Rotate right\" @click=\"rotateRight\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <polyline points=\"23 4 23 10 17 10\" />\n                <path d=\"M20.49 15a9 9 0 1 1-2.13-9.36L23 10\" />\n              </svg>\n            </button>\n\n            <!-- Zoom Out -->\n            <button\n              type=\"button\"\n              aria-label=\"Zoom out\"\n              :disabled=\"scale <= minScale\"\n              @click=\"zoomOut\"\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <circle cx=\"11\" cy=\"11\" r=\"8\" />\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n                <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\" />\n              </svg>\n            </button>\n\n            <!-- Scale indicator -->\n            <span class=\"b-image-preview__scale\" aria-live=\"polite\" aria-atomic=\"true\">\n              {{ Math.round(scale * 100) }}%\n            </span>\n\n            <!-- Zoom In -->\n            <button\n              type=\"button\"\n              aria-label=\"Zoom in\"\n              :disabled=\"scale >= maxScale\"\n              @click=\"zoomIn\"\n            >\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <circle cx=\"11\" cy=\"11\" r=\"8\" />\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n                <line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\" />\n                <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\" />\n              </svg>\n            </button>\n\n            <!-- Reset (1:1) -->\n            <button type=\"button\" aria-label=\"Reset to original size\" @click=\"doResetTransform\">\n              <svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n                focusable=\"false\"\n              >\n                <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n                <text\n                  x=\"12\"\n                  y=\"16\"\n                  text-anchor=\"middle\"\n                  fill=\"currentColor\"\n                  stroke=\"none\"\n                  font-size=\"10\"\n                  font-weight=\"600\"\n                  font-family=\"system-ui\"\n                >\n                  1:1\n                </text>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </Transition>\n    </Teleport>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-image {\n  /* Layout */\n  --b-image-border-radius: 8px;\n  --b-image-bg: oklch(95% 0.003 260);\n  --b-image-object-fit: cover;\n\n  /* Placeholder */\n  --b-image-placeholder-bg: oklch(93% 0.005 260);\n  --b-image-placeholder-shimmer: linear-gradient(\n    90deg,\n    oklch(93% 0.005 260) 25%,\n    oklch(96% 0.003 260) 50%,\n    oklch(93% 0.005 260) 75%\n  );\n  --b-image-progressive-blur: 20px;\n\n  /* Mask */\n  --b-image-mask-bg: oklch(0% 0 0 / 50%);\n  --b-image-mask-color: oklch(100% 0 0);\n  --b-image-mask-font-size: 14px;\n  --b-image-mask-icon-size: 20px;\n\n  /* Error */\n  --b-image-error-bg: oklch(95% 0.003 260);\n  --b-image-error-color: oklch(55% 0.01 260);\n  --b-image-error-icon-size: 32px;\n\n  /* Animation */\n  --b-image-transition-duration: 200ms;\n\n  /* Focus */\n  --b-image-focus-ring: 2px solid oklch(54.6% 0.245 262.881);\n  --b-image-focus-ring-offset: 2px;\n}\n\n/* Preview overlay tokens */\n.b-image-preview {\n  --b-image-preview-backdrop-bg: oklch(0% 0 0 / 65%);\n  --b-image-preview-toolbar-bg: oklch(15% 0.005 260 / 85%);\n  --b-image-preview-toolbar-color: oklch(95% 0.005 260);\n  --b-image-preview-toolbar-btn-size: 40px;\n  --b-image-preview-toolbar-icon-size: 20px;\n  --b-image-preview-toolbar-gap: 8px;\n  --b-image-preview-toolbar-radius: 24px;\n  --b-image-preview-toolbar-padding: 4px 16px;\n  --b-image-preview-close-size: 40px;\n  --b-image-preview-close-color: oklch(90% 0.005 260);\n  --b-image-preview-close-hover-bg: oklch(100% 0 0 / 12%);\n  --b-image-preview-transition-duration: 250ms;\n  --b-image-preview-scale-font-size: 13px;\n  --b-image-preview-scale-min-width: 52px;\n}\n\n/* ── Dark mode ─────────────────────────────── */\n[data-prefers-color='dark'] .b-image {\n  --b-image-bg: oklch(22% 0.005 260);\n  --b-image-placeholder-bg: oklch(25% 0.005 260);\n  --b-image-placeholder-shimmer: linear-gradient(\n    90deg,\n    oklch(25% 0.005 260) 25%,\n    oklch(30% 0.003 260) 50%,\n    oklch(25% 0.005 260) 75%\n  );\n  --b-image-error-bg: oklch(22% 0.005 260);\n  --b-image-error-color: oklch(70% 0.01 260);\n}\n\n[data-prefers-color='dark'] .b-image-preview {\n  --b-image-preview-backdrop-bg: oklch(0% 0 0 / 80%);\n  --b-image-preview-toolbar-bg: oklch(10% 0.005 260 / 90%);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-image {\n    --b-image-bg: oklch(22% 0.005 260);\n    --b-image-placeholder-bg: oklch(25% 0.005 260);\n    --b-image-placeholder-shimmer: linear-gradient(\n      90deg,\n      oklch(25% 0.005 260) 25%,\n      oklch(30% 0.003 260) 50%,\n      oklch(25% 0.005 260) 75%\n    );\n    --b-image-error-bg: oklch(22% 0.005 260);\n    --b-image-error-color: oklch(70% 0.01 260);\n  }\n  [data-prefers-color='system'] .b-image-preview {\n    --b-image-preview-backdrop-bg: oklch(0% 0 0 / 80%);\n    --b-image-preview-toolbar-bg: oklch(10% 0.005 260 / 90%);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-image {\n  position: relative;\n  display: inline-block;\n  overflow: hidden;\n  border-radius: var(--b-image-border-radius);\n  background-color: var(--b-image-bg);\n  line-height: 0;\n  box-sizing: border-box;\n}\n\n.b-image__img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--b-image-object-fit);\n  border-radius: var(--b-image-border-radius);\n}\n\n/* ─────────────────────────────────────────────\n   Progressive placeholder (blurred low-res)\n   ───────────────────────────────────────────── */\n.b-image__progressive-placeholder {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: var(--b-image-object-fit);\n  border-radius: var(--b-image-border-radius);\n  filter: blur(var(--b-image-progressive-blur));\n  transform: scale(1.1);\n  z-index: 1;\n}\n\n/* ─────────────────────────────────────────────\n   Placeholder\n   ───────────────────────────────────────────── */\n.b-image__placeholder {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--b-image-placeholder-bg);\n  border-radius: var(--b-image-border-radius);\n  z-index: 1;\n}\n\n.b-image__placeholder-shimmer {\n  width: 100%;\n  height: 100%;\n  background: var(--b-image-placeholder-shimmer);\n  background-size: 200% 100%;\n  animation: b-image-shimmer 1.5s infinite;\n  border-radius: var(--b-image-border-radius);\n}\n\n@keyframes b-image-shimmer {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Preview mask\n   ───────────────────────────────────────────── */\n.b-image__mask {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--b-image-mask-bg);\n  color: var(--b-image-mask-color);\n  font-size: var(--b-image-mask-font-size);\n  border-radius: var(--b-image-border-radius);\n  opacity: 0;\n  cursor: pointer;\n  transition: opacity var(--b-image-transition-duration) ease;\n  z-index: 2;\n  outline: none;\n}\n\n.b-image--preview:hover .b-image__mask,\n.b-image__mask:focus-visible {\n  opacity: 1;\n}\n\n.b-image__mask:focus-visible {\n  outline: var(--b-image-focus-ring);\n  outline-offset: var(--b-image-focus-ring-offset);\n}\n\n.b-image__mask-text {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n  user-select: none;\n}\n\n.b-image__mask-icon {\n  width: var(--b-image-mask-icon-size);\n  height: var(--b-image-mask-icon-size);\n}\n\n/* Invisible click target (mask=false, preview=true) */\n.b-image__click-target {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  cursor: pointer;\n  outline: none;\n}\n\n.b-image__click-target:focus-visible {\n  outline: var(--b-image-focus-ring);\n  outline-offset: var(--b-image-focus-ring-offset);\n}\n\n/* ─────────────────────────────────────────────\n   Error state\n   ───────────────────────────────────────────── */\n.b-image--error {\n  background-color: var(--b-image-error-bg);\n}\n\n/* ─────────────────────────────────────────────\n   Preview overlay\n   ───────────────────────────────────────────── */\n.b-image-preview {\n  position: fixed;\n  inset: 0;\n  z-index: 1080;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  touch-action: none;\n}\n\n.b-image-preview--dragging {\n  cursor: grabbing;\n}\n\n.b-image-preview__backdrop {\n  position: absolute;\n  inset: 0;\n  background-color: var(--b-image-preview-backdrop-bg);\n}\n\n.b-image-preview__close {\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-image-preview-close-size);\n  height: var(--b-image-preview-close-size);\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--b-image-preview-close-color);\n  cursor: pointer;\n  padding: 0;\n  transition: background-color var(--b-image-preview-transition-duration) ease;\n}\n\n.b-image-preview__close:hover,\n.b-image-preview__close:focus-visible {\n  background-color: var(--b-image-preview-close-hover-bg);\n}\n\n.b-image-preview__close:focus-visible {\n  outline: var(--b-image-focus-ring);\n  outline-offset: var(--b-image-focus-ring-offset);\n}\n\n.b-image-preview__close svg {\n  width: 20px;\n  height: 20px;\n}\n\n.b-image-preview__body {\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n  max-height: 100%;\n  padding: 40px;\n  box-sizing: border-box;\n  cursor: grab;\n}\n\n.b-image-preview--dragging .b-image-preview__body {\n  cursor: grabbing;\n}\n\n.b-image-preview__img {\n  max-width: 100%;\n  max-height: calc(100vh - 120px);\n  object-fit: contain;\n  transition: transform var(--b-image-preview-transition-duration) ease;\n  user-select: none;\n  -webkit-user-drag: none;\n  pointer-events: none;\n}\n\n.b-image-preview--dragging .b-image-preview__img {\n  transition: none;\n}\n\n/* ─────────────────────────────────────────────\n   Toolbar\n   ───────────────────────────────────────────── */\n.b-image-preview__toolbar {\n  position: absolute;\n  bottom: 24px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  gap: var(--b-image-preview-toolbar-gap);\n  padding: var(--b-image-preview-toolbar-padding);\n  background-color: var(--b-image-preview-toolbar-bg);\n  color: var(--b-image-preview-toolbar-color);\n  border-radius: var(--b-image-preview-toolbar-radius);\n  backdrop-filter: blur(8px);\n}\n\n.b-image-preview__toolbar button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--b-image-preview-toolbar-btn-size);\n  height: var(--b-image-preview-toolbar-btn-size);\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  padding: 0;\n  transition: background-color var(--b-image-preview-transition-duration) ease;\n}\n\n.b-image-preview__toolbar button:hover:not(:disabled),\n.b-image-preview__toolbar button:focus-visible {\n  background-color: var(--b-image-preview-close-hover-bg);\n}\n\n.b-image-preview__toolbar button:focus-visible {\n  outline: var(--b-image-focus-ring);\n  outline-offset: var(--b-image-focus-ring-offset);\n}\n\n.b-image-preview__toolbar button:disabled {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n\n.b-image-preview__toolbar button svg {\n  width: var(--b-image-preview-toolbar-icon-size);\n  height: var(--b-image-preview-toolbar-icon-size);\n}\n\n.b-image-preview__scale {\n  font-size: var(--b-image-preview-scale-font-size);\n  min-width: var(--b-image-preview-scale-min-width);\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n  user-select: none;\n}\n\n/* ─────────────────────────────────────────────\n   Preview transitions\n   ───────────────────────────────────────────── */\n.b-image-preview-enter-active,\n.b-image-preview-leave-active {\n  transition: opacity var(--b-image-preview-transition-duration) ease;\n}\n\n.b-image-preview-enter-from,\n.b-image-preview-leave-to {\n  opacity: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-image {\n    --b-image-transition-duration: 0ms;\n  }\n\n  .b-image-preview {\n    --b-image-preview-transition-duration: 0ms;\n  }\n\n  .b-image__placeholder-shimmer {\n    animation: none;\n  }\n\n  .b-image-preview-enter-active,\n  .b-image-preview-leave-active {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system116.js

@@ -1,9 +1,10 @@
-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"]]);
+//#region src/components/BInput/types.ts
+var e = /* @__PURE__ */ function(e) {
+	return e.Outlined = "outlined", e.Filled = "filled", e.Borderless = "borderless", e.Underlined = "underlined", e;
+}({}), t = /* @__PURE__ */ function(e) {
+	return e.Error = "error", e.Warning = "warning", e;
+}({});
 //#endregion
-export { n as default };
+export { t as BInputStatus, e as BInputVariant };
 
 //# sourceMappingURL=design-system116.js.map

package/dist/design-system116.js.map

@@ -1 +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":""}
+{"version":3,"file":"design-system116.js","names":[],"sources":["../src/components/BInput/types.ts"],"sourcesContent":["export enum BInputVariant {\n  Outlined = 'outlined',\n  Filled = 'filled',\n  Borderless = 'borderless',\n  Underlined = 'underlined',\n}\n\nexport enum BInputStatus {\n  Error = 'error',\n  Warning = 'warning',\n}\n\nexport interface BInputCountConfig {\n  /** Custom character count strategy (e.g., for emoji or CJK). */\n  strategy?: (value: string) => number;\n  /** Maximum count to display. Triggers exceedFormatter when exceeded. */\n  max?: number;\n  /** Formatter when count exceeds max. */\n  exceedFormatter?: (value: string, config: { max: number }) => string;\n  /** Whether to show the count indicator. */\n  show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => string);\n}\n\nexport interface BInputFocusOptions {\n  preventScroll?: boolean;\n  cursor?: 'start' | 'end' | 'all';\n}\n"],"mappings":";AAAA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,SAAA,UACA,EAAA,aAAA,cACA,EAAA,aAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,UAAA;KACD"}

package/dist/design-system117.js

@@ -1,40 +1,58 @@
 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 = {
+import { BInputStatus as n, BInputVariant as r } from "./design-system116.js";
+import { computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, mergeModels as l, mergeProps as u, normalizeClass as d, openBlock as f, ref as p, renderSlot as m, toDisplayString as h, unref as g, useModel as _, useSlots as v, watch as y, withModifiers as b } from "vue";
+//#region src/components/BInput/BInput.vue?vue&type=script&setup=true&lang.ts
+var x = {
 	key: 0,
-	class: "b-input-number__prefix",
+	class: "b-input__addon b-input__addon--before"
+}, S = { class: "b-input__wrapper" }, C = {
+	key: 0,
+	class: "b-input__prefix",
 	"aria-hidden": "true"
-}, x = [
+}, w = [
 	"id",
 	"value",
-	"aria-valuenow",
-	"aria-valuemin",
-	"aria-valuemax",
-	"aria-invalid",
+	"type",
 	"placeholder",
 	"disabled",
-	"readonly"
-], S = {
+	"readonly",
+	"maxlength",
+	"aria-invalid",
+	"aria-describedby"
+], T = {
 	key: 1,
-	class: "b-input-number__suffix",
-	"aria-hidden": "true"
-}, C = {
+	class: "b-input__clear-wrapper"
+}, E = {
 	key: 2,
-	class: "b-input-number__handler-wrap",
+	class: "b-input__password-toggle-wrapper"
+}, D = ["aria-label", "aria-pressed"], O = {
+	key: 0,
+	viewBox: "64 64 896 896",
+	width: "1em",
+	height: "1em",
+	fill: "currentColor",
+	"aria-hidden": "true"
+}, k = {
+	key: 1,
+	viewBox: "64 64 896 896",
+	width: "1em",
+	height: "1em",
+	fill: "currentColor",
+	"aria-hidden": "true"
+}, A = {
+	key: 3,
+	class: "b-input__suffix",
 	"aria-hidden": "true"
-}, w = ["aria-disabled"], T = ["aria-disabled"], E = /* @__PURE__ */ c({
+}, j = ["id"], M = {
+	key: 1,
+	class: "b-input__addon b-input__addon--after"
+}, N = /* @__PURE__ */ c({
 	inheritAttrs: !1,
-	__name: "BInputNumber",
+	__name: "BInput",
 	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
@@ -43,185 +61,152 @@ var y = { class: "b-input-number__wrapper" }, b = {
 			type: Boolean,
 			default: !1
 		},
-		controls: {
-			type: Boolean,
-			default: !0
-		},
-		keyboard: {
-			type: Boolean,
-			default: !0
-		},
-		changeOnBlur: {
-			type: Boolean,
-			default: !0
-		},
-		changeOnWheel: {
-			type: Boolean,
-			default: !1
-		},
+		status: {},
+		type: { default: "text" },
+		maxLength: {},
 		placeholder: {},
 		id: {},
-		precision: {},
-		formatter: { type: Function },
-		parser: { type: Function },
-		decimalSeparator: {},
-		stringMode: {
+		allowClear: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		showCount: {
+			type: [Boolean, Function],
+			default: !1
+		},
+		count: {}
 	}, {
-		modelValue: { default: null },
+		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
 	emits: /* @__PURE__ */ l([
 		"change",
 		"pressEnter",
-		"step",
+		"clear",
 		"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"));
+		let l = v(), N = c, P = _(e, "modelValue"), { componentUID: F } = t(), I = i(() => e.id ?? `b-input-${F.value}`), L = p(null), R = p(!1), z = p(!1), B = i(() => !!l.addonBefore), V = i(() => !!l.addonAfter), H = i(() => !!l.prefix), U = i(() => !!l.suffix), W = i(() => e.type === "password"), G = i(() => W.value), K = i(() => W.value ? z.value ? "text" : "password" : e.type), q = i(() => {
+			let t = P.value ?? "";
+			return e.count?.strategy ? e.count.strategy(t) : t.length;
+		}), J = i(() => e.count?.max ?? e.maxLength), Y = i(() => e.count?.show === !1 ? !1 : e.count?.show === void 0 ? !!e.showCount : !0), X = i(() => {
+			let t = P.value ?? "", n = q.value;
+			return typeof e.count?.show == "function" ? e.count.show({
+				value: t,
+				count: n,
+				maxLength: J.value
+			}) : typeof e.showCount == "function" ? e.showCount({
+				value: t,
+				count: n,
+				maxLength: J.value
+			}) : J.value === void 0 ? `${n}` : `${n} / ${J.value}`;
+		}), Z = i(() => J.value === void 0 ? !1 : q.value > J.value), Q = i(() => e.allowClear && !!P.value && !e.disabled && !e.readOnly), $ = (t) => {
+			let n = t.target, r = n.value;
+			e.count?.exceedFormatter && J.value !== void 0 && (e.count.strategy ?? ((e) => e.length))(r) > J.value && (r = e.count.exceedFormatter(r, { max: J.value }), n.value = r), P.value = r, N("change", r, t);
+		}, ee = (e) => {
+			e.key === "Enter" && N("pressEnter", e);
+		}, te = (e) => {
+			R.value = !0, N("focus", e);
+		}, ne = (e) => {
+			R.value = !1, N("blur", e);
+		}, re = () => {
+			P.value = "", N("clear"), N("change", "", new Event("change")), L.value?.focus();
+		}, ie = () => {
+			z.value = !z.value, L.value?.focus();
 		};
-		function Y() {
-			let e = B(M.value);
-			H(e === null ? null : e);
-		}
-		return _(() => D.value, () => {
-			j.value || V();
-		}, { immediate: !0 }), r({
+		return y(P, (t) => {
+			e.count?.exceedFormatter && J.value !== void 0 && (e.count.strategy ?? ((e) => e.length))(t) > J.value && (P.value = e.count.exceedFormatter(t, { max: J.value }));
+		}), r({
 			focus: (e) => {
-				if (A.value?.focus({ preventScroll: e?.preventScroll }), e?.cursor && A.value) {
-					let t = A.value.value.length;
+				if (L.value?.focus({ preventScroll: e?.preventScroll }), e?.cursor && L.value) {
+					let t = L.value.value.length;
 					switch (e.cursor) {
 						case "start":
-							A.value.setSelectionRange(0, 0);
+							L.value.setSelectionRange(0, 0);
 							break;
 						case "end":
-							A.value.setSelectionRange(t, t);
+							L.value.setSelectionRange(t, t);
 							break;
 						case "all":
-							A.value.setSelectionRange(0, t);
+							L.value.setSelectionRange(0, t);
 							break;
 					}
 				}
 			},
 			blur: () => {
-				A.value?.blur();
+				L.value?.blur();
 			}
-		}), (t, r) => (d(), o("span", { class: u(["b-input-number", [
-			`b-input-number--${e.size}`,
-			`b-input-number--${e.variant}`,
+		}), (t, r) => (f(), o("span", { class: d(["b-input", [
+			`b-input--${e.size}`,
+			`b-input--${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
+				"b-input--focused": R.value,
+				"b-input--disabled": e.disabled,
+				"b-input--readonly": e.readOnly,
+				"b-input--error": e.status === g(n).Error,
+				"b-input--warning": e.status === g(n).Warning,
+				"b-input--has-addon-before": B.value,
+				"b-input--has-addon-after": V.value,
+				"b-input--over-count": Z.value
 			}
-		]]) }, [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));
+		]]) }, [
+			B.value ? (f(), o("span", x, [m(t.$slots, "addonBefore", {}, void 0, !0)])) : a("", !0),
+			s("span", S, [
+				H.value ? (f(), o("span", C, [m(t.$slots, "prefix", {}, void 0, !0)])) : a("", !0),
+				s("input", u(t.$attrs, {
+					id: I.value,
+					ref_key: "inputRef",
+					ref: L,
+					value: P.value,
+					type: K.value,
+					placeholder: e.placeholder,
+					disabled: e.disabled,
+					readonly: e.readOnly,
+					maxlength: e.maxLength && !e.count?.exceedFormatter ? e.maxLength : void 0,
+					"aria-invalid": e.status === g(n).Error ? !0 : void 0,
+					"aria-describedby": Y.value ? `${I.value}-count` : void 0,
+					class: "b-input__input",
+					onInput: $,
+					onKeydown: ee,
+					onFocus: te,
+					onBlur: ne
+				}), null, 16, w),
+				Q.value ? (f(), o("span", T, [s("button", {
+					type: "button",
+					class: "b-input__clear",
+					"aria-label": "Clear input",
+					tabindex: "-1",
+					onMousedown: b(re, ["prevent"])
+				}, [...r[0] ||= [s("svg", {
+					viewBox: "64 64 896 896",
+					width: "1em",
+					height: "1em",
+					fill: "currentColor",
+					"aria-hidden": "true"
+				}, [s("path", { 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" })], -1)]], 32)])) : a("", !0),
+				G.value ? (f(), o("span", E, [s("button", {
+					type: "button",
+					class: "b-input__password-toggle",
+					"aria-label": z.value ? "Hide password" : "Show password",
+					"aria-pressed": z.value,
+					tabindex: "-1",
+					onMousedown: b(ie, ["prevent"])
+				}, [z.value ? (f(), o("svg", k, [...r[2] ||= [s("path", { 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" }, null, -1)]])) : (f(), o("svg", O, [...r[1] ||= [s("path", { 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" }, null, -1)]]))], 40, D)])) : a("", !0),
+				U.value ? (f(), o("span", A, [m(t.$slots, "suffix", {}, void 0, !0)])) : a("", !0),
+				Y.value ? (f(), o("span", {
+					key: 4,
+					id: `${I.value}-count`,
+					class: d(["b-input__count", { "b-input__count--over": Z.value }]),
+					"aria-live": "polite",
+					"aria-atomic": "true"
+				}, h(X.value), 11, j)) : a("", !0)
+			]),
+			V.value ? (f(), o("span", M, [m(t.$slots, "addonAfter", {}, void 0, !0)])) : a("", !0)
+		], 2));
 	}
 });
 //#endregion
-export { E as default };
+export { N as default };
 
 //# sourceMappingURL=design-system117.js.map