@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system101.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system101.js","names":[],"sources":["../src/components/BImage/BImage.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, createElementVNode as _createElementVNode, vShow as _vShow, withDirectives as _withDirectives, createTextVNode as _createTextVNode, normalizeStyle as _normalizeStyle, toDisplayString as _toDisplayString, withModifiers as _withModifiers, normalizeClass as _normalizeClass, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = [\"src\", \"alt\"]\nconst _hoisted_2 = {\n  key: 1,\n  class: \"b-image__placeholder\",\n  \"aria-hidden\": \"true\"\n}\nconst _hoisted_3 = [\"src\", \"alt\", \"width\", \"height\", \"loading\", \"crossorigin\", \"decoding\", \"referrerpolicy\"]\nconst _hoisted_4 = [\"aria-label\"]\nconst _hoisted_5 = [\"aria-label\"]\nconst _hoisted_6 = [\"aria-label\"]\nconst _hoisted_7 = { class: \"b-image-preview__body\" }\nconst _hoisted_8 = [\"src\", \"alt\"]\nconst _hoisted_9 = [\"aria-pressed\"]\nconst _hoisted_10 = [\"aria-pressed\"]\nconst _hoisted_11 = [\"disabled\"]\nconst _hoisted_12 = {\n  class: \"b-image-preview__scale\",\n  \"aria-live\": \"polite\",\n  \"aria-atomic\": \"true\"\n}\nconst _hoisted_13 = [\"disabled\"]\n\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// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BImage',\n  props: {\n    src: { default: undefined },\n    alt: { default: '' },\n    width: { default: undefined },\n    height: { default: undefined },\n    fallback: { default: undefined },\n    placeholder: { type: Boolean, default: false },\n    placeholderSrc: { default: undefined },\n    preview: { type: Boolean, default: true },\n    mask: { type: Boolean, default: true },\n    previewSrc: { default: undefined },\n    previewVisible: { type: Boolean, default: undefined },\n    scaleStep: { default: 0.5 },\n    minScale: { default: 1 },\n    maxScale: { default: 50 },\n    movable: { type: Boolean, default: true },\n    loading: { default: undefined },\n    crossOrigin: { default: undefined },\n    decoding: { default: undefined },\n    referrerPolicy: { default: undefined }\n  },\n  emits: [\"error\", \"update:previewVisible\", \"transform\"],\n  setup(__props: any, { emit: __emit }) {\n\nconst props = __props;\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = __emit;\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\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\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", {\n    class: _normalizeClass([\"b-image\", {\n      'b-image--error': loadStatus.value === 'error' && !__props.fallback,\n      'b-image--preview': __props.preview,\n    }]),\n    style: _normalizeStyle(dimensionStyle.value)\n  }, [\n    (showProgressivePlaceholder.value)\n      ? (_openBlock(), _createElementBlock(\"img\", {\n          key: 0,\n          class: \"b-image__progressive-placeholder\",\n          src: __props.placeholderSrc,\n          alt: __props.alt,\n          \"aria-hidden\": \"true\"\n        }, null, 8, _hoisted_1))\n      : _createCommentVNode(\"\", true),\n    ((__props.placeholder || _ctx.$slots.placeholder) && loadStatus.value === 'loading' && !__props.placeholderSrc)\n      ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, [\n          _renderSlot(_ctx.$slots, \"placeholder\", {}, () => [\n            _cache[0] || (_cache[0] = _createElementVNode(\"div\", { class: \"b-image__placeholder-shimmer\" }, null, -1))\n          ])\n        ]))\n      : _createCommentVNode(\"\", true),\n    _withDirectives(_createElementVNode(\"img\", {\n      class: \"b-image__img\",\n      src: displaySrc.value,\n      alt: __props.alt,\n      width: typeof __props.width === 'number' ? __props.width : undefined,\n      height: typeof __props.height === 'number' ? __props.height : undefined,\n      loading: __props.loading,\n      crossorigin: __props.crossOrigin,\n      decoding: __props.decoding,\n      referrerpolicy: __props.referrerPolicy,\n      onLoad: handleLoad,\n      onError: handleError\n    }, null, 40, _hoisted_3), [\n      [_vShow, loadStatus.value !== 'loading' || (!__props.placeholder && !_ctx.$slots.placeholder && !__props.placeholderSrc)]\n    ]),\n    (showMask.value)\n      ? (_openBlock(), _createElementBlock(\"div\", {\n          key: 2,\n          ref_key: \"triggerRef\",\n          ref: triggerRef,\n          class: \"b-image__mask\",\n          role: \"button\",\n          tabindex: \"0\",\n          \"aria-label\": `Preview image${__props.alt ? ': ' + __props.alt : ''}`,\n          onClick: openPreview,\n          onKeydown: handleTriggerKeydown\n        }, [\n          _renderSlot(_ctx.$slots, \"preview-mask\", {}, () => [\n            _cache[1] || (_cache[1] = _createElementVNode(\"span\", {\n              class: \"b-image__mask-text\",\n              \"aria-hidden\": \"true\"\n            }, [\n              _createElementVNode(\"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                _createElementVNode(\"path\", { d: \"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" }),\n                _createElementVNode(\"circle\", {\n                  cx: \"12\",\n                  cy: \"12\",\n                  r: \"3\"\n                })\n              ]),\n              _createTextVNode(\" Preview \")\n            ], -1))\n          ])\n        ], 40, _hoisted_4))\n      : (__props.preview && !__props.mask && loadStatus.value === 'loaded')\n        ? (_openBlock(), _createElementBlock(\"div\", {\n            key: 3,\n            ref_key: \"triggerRef\",\n            ref: triggerRef,\n            class: \"b-image__click-target\",\n            role: \"button\",\n            tabindex: \"0\",\n            \"aria-label\": `Preview image${__props.alt ? ': ' + __props.alt : ''}`,\n            onClick: openPreview,\n            onKeydown: handleTriggerKeydown\n          }, null, 40, _hoisted_5))\n        : _createCommentVNode(\"\", true),\n    (_openBlock(), _createBlock(_Teleport, { to: \"body\" }, [\n      _createVNode(_Transition, { name: \"b-image-preview\" }, {\n        default: _withCtx(() => [\n          (previewOpen.value)\n            ? (_openBlock(), _createElementBlock(\"div\", {\n                key: 0,\n                ref_key: \"overlayRef\",\n                ref: overlayRef,\n                class: _normalizeClass([\"b-image-preview\", { 'b-image-preview--dragging': isDragging.value }]),\n                role: \"dialog\",\n                \"aria-modal\": \"true\",\n                \"aria-label\": `Image preview${__props.alt ? ': ' + __props.alt : ''}`,\n                onKeydown: handleOverlayKeydown,\n                onWheel: _withModifiers(handlePreviewWheel, [\"prevent\"]),\n                onPointerdown: handlePreviewPointerDown,\n                onPointermove: handlePreviewPointerMove,\n                onPointerup: handlePreviewPointerUp,\n                onPointercancel: handlePreviewPointerUp\n              }, [\n                _createElementVNode(\"div\", {\n                  class: \"b-image-preview__backdrop\",\n                  onClick: closePreview\n                }),\n                _createElementVNode(\"button\", {\n                  class: \"b-image-preview__close\",\n                  type: \"button\",\n                  \"aria-label\": \"Close preview\",\n                  onClick: closePreview\n                }, [...(_cache[2] || (_cache[2] = [\n                  _createElementVNode(\"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                    _createElementVNode(\"line\", {\n                      x1: \"18\",\n                      y1: \"6\",\n                      x2: \"6\",\n                      y2: \"18\"\n                    }),\n                    _createElementVNode(\"line\", {\n                      x1: \"6\",\n                      y1: \"6\",\n                      x2: \"18\",\n                      y2: \"18\"\n                    })\n                  ], -1)\n                ]))]),\n                _createElementVNode(\"div\", _hoisted_7, [\n                  _createElementVNode(\"img\", {\n                    class: \"b-image-preview__img\",\n                    src: previewImageSrc.value,\n                    alt: __props.alt,\n                    style: _normalizeStyle({ transform: previewTransform.value }),\n                    draggable: \"false\"\n                  }, null, 12, _hoisted_8)\n                ]),\n                _createElementVNode(\"div\", {\n                  class: \"b-image-preview__toolbar\",\n                  role: \"toolbar\",\n                  \"aria-label\": \"Image preview controls\",\n                  onKeydown: handleToolbarKeydown\n                }, [\n                  _createElementVNode(\"button\", {\n                    type: \"button\",\n                    \"aria-label\": \"Flip horizontal\",\n                    \"aria-pressed\": flipX.value,\n                    onClick: toggleFlipX\n                  }, [...(_cache[3] || (_cache[3] = [\n                    _createElementVNode(\"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                      _createElementVNode(\"path\", { d: \"M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3\" }),\n                      _createElementVNode(\"path\", { d: \"M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3\" }),\n                      _createElementVNode(\"line\", {\n                        x1: \"12\",\n                        y1: \"1\",\n                        x2: \"12\",\n                        y2: \"23\",\n                        \"stroke-dasharray\": \"2 2\"\n                      })\n                    ], -1)\n                  ]))], 8, _hoisted_9),\n                  _createElementVNode(\"button\", {\n                    type: \"button\",\n                    \"aria-label\": \"Flip vertical\",\n                    \"aria-pressed\": flipY.value,\n                    onClick: toggleFlipY\n                  }, [...(_cache[4] || (_cache[4] = [\n                    _createElementVNode(\"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                      _createElementVNode(\"path\", { d: \"M3 8V5a2 2 0 0 1 2-2h14c1.1 0 2 .9 2 2v3\" }),\n                      _createElementVNode(\"path\", { d: \"M3 16v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3\" }),\n                      _createElementVNode(\"line\", {\n                        x1: \"1\",\n                        y1: \"12\",\n                        x2: \"23\",\n                        y2: \"12\",\n                        \"stroke-dasharray\": \"2 2\"\n                      })\n                    ], -1)\n                  ]))], 8, _hoisted_10),\n                  _createElementVNode(\"button\", {\n                    type: \"button\",\n                    \"aria-label\": \"Rotate left\",\n                    onClick: rotateLeft\n                  }, [...(_cache[5] || (_cache[5] = [\n                    _createElementVNode(\"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                      _createElementVNode(\"polyline\", { points: \"1 4 1 10 7 10\" }),\n                      _createElementVNode(\"path\", { d: \"M3.51 15a9 9 0 1 0 2.13-9.36L1 10\" })\n                    ], -1)\n                  ]))]),\n                  _createElementVNode(\"button\", {\n                    type: \"button\",\n                    \"aria-label\": \"Rotate right\",\n                    onClick: rotateRight\n                  }, [...(_cache[6] || (_cache[6] = [\n                    _createElementVNode(\"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                      _createElementVNode(\"polyline\", { points: \"23 4 23 10 17 10\" }),\n                      _createElementVNode(\"path\", { d: \"M20.49 15a9 9 0 1 1-2.13-9.36L23 10\" })\n                    ], -1)\n                  ]))]),\n                  _createElementVNode(\"button\", {\n                    type: \"button\",\n                    \"aria-label\": \"Zoom out\",\n                    disabled: scale.value <= __props.minScale,\n                    onClick: zoomOut\n                  }, [...(_cache[7] || (_cache[7] = [\n                    _createElementVNode(\"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                      _createElementVNode(\"circle\", {\n                        cx: \"11\",\n                        cy: \"11\",\n                        r: \"8\"\n                      }),\n                      _createElementVNode(\"line\", {\n                        x1: \"21\",\n                        y1: \"21\",\n                        x2: \"16.65\",\n                        y2: \"16.65\"\n                      }),\n                      _createElementVNode(\"line\", {\n                        x1: \"8\",\n                        y1: \"11\",\n                        x2: \"14\",\n                        y2: \"11\"\n                      })\n                    ], -1)\n                  ]))], 8, _hoisted_11),\n                  _createElementVNode(\"span\", _hoisted_12, _toDisplayString(Math.round(scale.value * 100)) + \"% \", 1),\n                  _createElementVNode(\"button\", {\n                    type: \"button\",\n                    \"aria-label\": \"Zoom in\",\n                    disabled: scale.value >= __props.maxScale,\n                    onClick: zoomIn\n                  }, [...(_cache[8] || (_cache[8] = [\n                    _createElementVNode(\"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                      _createElementVNode(\"circle\", {\n                        cx: \"11\",\n                        cy: \"11\",\n                        r: \"8\"\n                      }),\n                      _createElementVNode(\"line\", {\n                        x1: \"21\",\n                        y1: \"21\",\n                        x2: \"16.65\",\n                        y2: \"16.65\"\n                      }),\n                      _createElementVNode(\"line\", {\n                        x1: \"11\",\n                        y1: \"8\",\n                        x2: \"11\",\n                        y2: \"14\"\n                      }),\n                      _createElementVNode(\"line\", {\n                        x1: \"8\",\n                        y1: \"11\",\n                        x2: \"14\",\n                        y2: \"11\"\n                      })\n                    ], -1)\n                  ]))], 8, _hoisted_13),\n                  _createElementVNode(\"button\", {\n                    type: \"button\",\n                    \"aria-label\": \"Reset to original size\",\n                    onClick: doResetTransform\n                  }, [...(_cache[9] || (_cache[9] = [\n                    _createElementVNode(\"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                      _createElementVNode(\"rect\", {\n                        x: \"3\",\n                        y: \"3\",\n                        width: \"18\",\n                        height: \"18\",\n                        rx: \"2\",\n                        ry: \"2\"\n                      }),\n                      _createElementVNode(\"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                      }, \" 1:1 \")\n                    ], -1)\n                  ]))])\n                ], 32)\n              ], 42, _hoisted_6))\n            : _createCommentVNode(\"\", true)\n        ]),\n        _: 1\n      })\n    ]))\n  ], 6))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system101.js","names":[],"sources":["../src/composables/useValidation.ts"],"sourcesContent":["import {\n  computed,\n  inject,\n  onBeforeUnmount,\n  provide,\n  ref,\n  watch,\n  type ComputedRef,\n  type InjectionKey,\n  type Ref,\n} from 'vue';\nimport type { ZodType } from 'zod';\n\n/**\n * Types\n */\nexport interface ValidationFieldState<T = unknown> {\n  fieldValue: Ref<T>;\n  errors: string[];\n  isValid: boolean;\n  dirty: boolean;\n  touched: boolean;\n  validate: () => boolean;\n  reset: () => void;\n  markTouched: () => void;\n}\n\nexport const PIKey = {\n  FormValidation: Symbol() as InjectionKey<Record<string, Ref<ValidationFieldState>>>,\n};\n\n/**\n * Form-level validation composable.\n * Creates or injects a shared validation registry, providing\n * methods to validate/reset all registered fields.\n */\nexport function useValidationForm() {\n  let fields = inject(PIKey.FormValidation, undefined);\n  if (!fields) {\n    fields = {};\n    provide(PIKey.FormValidation, fields);\n  }\n\n  const validateAll = (): boolean => {\n    if (!fields) return false;\n    return Object.values(fields)\n      .map((field) => field.value.validate())\n      .every((valid) => valid);\n  };\n\n  const resetAll = () => {\n    if (!fields) return;\n    Object.values(fields).forEach((field) => field.value.reset());\n  };\n\n  const isValid = computed(() => {\n    if (!fields) return true;\n    return Object.values(fields).every((field) => field.value.isValid);\n  });\n\n  return {\n    fields,\n    validateAll,\n    resetAll,\n    isValid,\n  };\n}\n\n/**\n * Field-level validation composable.\n * Registers the field into the form's validation registry,\n * validates using the provided Zod schema, and tracks dirty/touched state.\n */\nexport function useValidationField<T>(key: string, fieldValue: Ref<T>, schema: ZodType<T>) {\n  const initialValue = structuredClone(fieldValue.value);\n\n  const fieldState = ref<ValidationFieldState<T>>({\n    fieldValue,\n    errors: [],\n    isValid: true,\n    dirty: false,\n    touched: false,\n    validate,\n    reset,\n    markTouched,\n  });\n\n  watch(\n    fieldValue,\n    (newVal) => {\n      fieldState.value.dirty = !Object.is(newVal, initialValue);\n    },\n    { deep: true },\n  );\n\n  function validate(): boolean {\n    const result = schema.safeParse(fieldValue.value);\n\n    if (result.success) {\n      fieldState.value.errors = [];\n      fieldState.value.isValid = true;\n    } else {\n      fieldState.value.errors = result.error.issues.map((issue) => issue.message);\n      fieldState.value.isValid = false;\n    }\n\n    return fieldState.value.isValid;\n  }\n\n  function reset() {\n    fieldState.value.errors = [];\n    fieldState.value.isValid = true;\n    fieldState.value.dirty = false;\n    fieldState.value.touched = false;\n  }\n\n  function markTouched() {\n    fieldState.value.touched = true;\n  }\n\n  // Register into form\n  const formFields = inject(PIKey.FormValidation, undefined);\n  if (formFields) {\n    formFields[key] = fieldState as Ref<ValidationFieldState>;\n  }\n\n  onBeforeUnmount(() => {\n    if (formFields) {\n      delete formFields[key];\n    }\n  });\n\n  const errors = computed(() => fieldState.value.errors);\n  const isValid = computed(() => fieldState.value.isValid);\n  const dirty = computed(() => fieldState.value.dirty);\n  const touched = computed(() => fieldState.value.touched);\n\n  return {\n    errors,\n    isValid,\n    dirty,\n    touched,\n    validate,\n    reset,\n    markTouched,\n  } as {\n    errors: ComputedRef<string[]>;\n    isValid: ComputedRef<boolean>;\n    dirty: ComputedRef<boolean>;\n    touched: ComputedRef<boolean>;\n    validate: () => boolean;\n    reset: () => void;\n    markTouched: () => void;\n  };\n}\n"],"mappings":";;AA2BA,IAAa,IAAQ,EACnB,gBAAgB,QAAQ,EACzB;AAOD,SAAgB,IAAoB;CAClC,IAAI,IAAS,EAAO,EAAM,gBAAgB,KAAA,EAAU;AACpD,CAAK,MACH,IAAS,EAAE,EACX,EAAQ,EAAM,gBAAgB,EAAO;CAGvC,IAAM,UACC,IACE,OAAO,OAAO,EAAO,CACzB,KAAK,MAAU,EAAM,MAAM,UAAU,CAAC,CACtC,OAAO,MAAU,EAAM,GAHN,IAMhB,UAAiB;AAChB,OACL,OAAO,OAAO,EAAO,CAAC,SAAS,MAAU,EAAM,MAAM,OAAO,CAAC;IAGzD,IAAU,QACT,IACE,OAAO,OAAO,EAAO,CAAC,OAAO,MAAU,EAAM,MAAM,QAAQ,GAD9C,GAEpB;AAEF,QAAO;EACL;EACA;EACA;EACA;EACD;;AAQH,SAAgB,EAAsB,GAAa,GAAoB,GAAoB;CACzF,IAAM,IAAe,gBAAgB,EAAW,MAAM,EAEhD,IAAa,EAA6B;EAC9C;EACA,QAAQ,EAAE;EACV,SAAS;EACT,OAAO;EACP,SAAS;EACT;EACA;EACA;EACD,CAAC;AAEF,GACE,IACC,MAAW;AACV,IAAW,MAAM,QAAQ,CAAC,OAAO,GAAG,GAAQ,EAAa;IAE3D,EAAE,MAAM,IAAM,CACf;CAED,SAAS,IAAoB;EAC3B,IAAM,IAAS,EAAO,UAAU,EAAW,MAAM;AAUjD,SARI,EAAO,WACT,EAAW,MAAM,SAAS,EAAE,EAC5B,EAAW,MAAM,UAAU,OAE3B,EAAW,MAAM,SAAS,EAAO,MAAM,OAAO,KAAK,MAAU,EAAM,QAAQ,EAC3E,EAAW,MAAM,UAAU,KAGtB,EAAW,MAAM;;CAG1B,SAAS,IAAQ;AAIf,EAHA,EAAW,MAAM,SAAS,EAAE,EAC5B,EAAW,MAAM,UAAU,IAC3B,EAAW,MAAM,QAAQ,IACzB,EAAW,MAAM,UAAU;;CAG7B,SAAS,IAAc;AACrB,IAAW,MAAM,UAAU;;CAI7B,IAAM,IAAa,EAAO,EAAM,gBAAgB,KAAA,EAAU;AAgB1D,QAfI,MACF,EAAW,KAAO,IAGpB,QAAsB;AACpB,EAAI,KACF,OAAO,EAAW;GAEpB,EAOK;EACL,QANa,QAAe,EAAW,MAAM,OAAO;EAOpD,SANc,QAAe,EAAW,MAAM,QAAQ;EAOtD,OANY,QAAe,EAAW,MAAM,MAAM;EAOlD,SANc,QAAe,EAAW,MAAM,QAAQ;EAOtD;EACA;EACA;EACD"}

package/dist/{design-system93.js → design-system102.js}

@@ -3,4 +3,4 @@ var e = Symbol("BFormContext");
 //#endregion
 export { e as BFormContextKey };
 
-//# sourceMappingURL=design-system93.js.map
+//# sourceMappingURL=design-system102.js.map

package/dist/design-system102.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system102.js","names":[],"sources":["../src/components/BForm/context.ts"],"sourcesContent":["import type { InjectionKey } from 'vue';\nimport type { BFormItemContext } from './types.ts';\n\nexport const BFormContextKey = Symbol('BFormContext') as InjectionKey<BFormItemContext>;\n"],"mappings":";AAGA,IAAa,IAAkB,OAAO,eAAe"}

package/dist/design-system103.js

@@ -1,8 +1,16 @@
-import e from "./design-system101.js";
-/* empty css                 */
-//#region src/components/BImage/BImage.vue
-var t = e;
+//#region src/components/BForm/types.ts
+var e = /* @__PURE__ */ function(e) {
+	return e.Horizontal = "horizontal", e.Vertical = "vertical", e.Inline = "inline", e;
+}({}), t = /* @__PURE__ */ function(e) {
+	return e.Left = "left", e.Right = "right", e;
+}({}), n = /* @__PURE__ */ function(e) {
+	return e.Success = "success", e.Warning = "warning", e.Error = "error", e.Validating = "validating", e;
+}({}), r = /* @__PURE__ */ function(e) {
+	return e.Required = "required", e.Optional = "optional", e;
+}({}), i = /* @__PURE__ */ function(e) {
+	return e.Change = "change", e.Blur = "blur", e.Submit = "submit", e;
+}({});
 //#endregion
-export { t as default };
+export { t as BFormLabelAlign, e as BFormLayout, r as BFormRequiredMark, n as BFormValidateStatus, i as BFormValidateTrigger };
 
 //# sourceMappingURL=design-system103.js.map

package/dist/design-system103.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system103.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":""}
+{"version":3,"file":"design-system103.js","names":[],"sources":["../src/components/BForm/types.ts"],"sourcesContent":["export enum BFormLayout {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical',\n  Inline = 'inline',\n}\n\nexport enum BFormLabelAlign {\n  Left = 'left',\n  Right = 'right',\n}\n\nexport enum BFormValidateStatus {\n  Success = 'success',\n  Warning = 'warning',\n  Error = 'error',\n  Validating = 'validating',\n}\n\nexport enum BFormRequiredMark {\n  Required = 'required',\n  Optional = 'optional',\n}\n\nexport enum BFormValidateTrigger {\n  Change = 'change',\n  Blur = 'blur',\n  Submit = 'submit',\n}\n\nexport interface BFormFieldError {\n  name: string;\n  errors: string[];\n}\n\nexport interface BFormValidateResult {\n  values: Record<string, unknown>;\n  errorFields: BFormFieldError[];\n}\n\nexport interface BFormItemContext {\n  layout: `${BFormLayout}`;\n  labelAlign: `${BFormLabelAlign}`;\n  labelWidth: string | undefined;\n  colon: boolean;\n  disabled: boolean;\n  requiredMark: boolean | `${BFormRequiredMark}`;\n  validateTrigger: `${BFormValidateTrigger}` | `${BFormValidateTrigger}`[];\n  model: Record<string, unknown> | undefined;\n}\n\nexport interface BFormInstance {\n  validate: () => boolean;\n  resetFields: (names?: string[]) => void;\n  scrollToField: (name: string, options?: ScrollIntoViewOptions) => void;\n  isValid: boolean;\n}\n"],"mappings":";AAAA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,aAAA,cACA,EAAA,WAAA,YACA,EAAA,SAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,OAAA,QACA,EAAA,QAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,UAAA,WACA,EAAA,UAAA,WACA,EAAA,QAAA,SACA,EAAA,aAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,WAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,SAAA,UACA,EAAA,OAAA,QACA,EAAA,SAAA;KACD"}

package/dist/design-system104.js

@@ -1,10 +1,112 @@
-//#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;
-}({});
+import { useValidationForm as e } from "./design-system101.js";
+import { BFormContextKey as t } from "./design-system102.js";
+import { BFormLabelAlign as n, BFormLayout as r, BFormValidateTrigger as i } from "./design-system103.js";
+import { computed as a, createElementBlock as o, defineComponent as s, normalizeClass as c, openBlock as l, provide as u, ref as d, renderSlot as f } from "vue";
+//#region src/components/BForm/BForm.vue?vue&type=script&setup=true&lang.ts
+var p = [
+	"name",
+	"novalidate",
+	"aria-label"
+], m = /* @__PURE__ */ s({
+	__name: "BForm",
+	props: {
+		layout: { default: () => r.Horizontal },
+		labelAlign: { default: () => n.Left },
+		labelWidth: {},
+		colon: {
+			type: Boolean,
+			default: !0
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		requiredMark: {
+			type: Boolean,
+			default: !0
+		},
+		name: {},
+		model: {},
+		scrollToFirstError: {
+			type: Boolean,
+			default: !1
+		},
+		validateTrigger: { default: () => i.Change },
+		noHtml5Validate: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["finish", "finishFailed"],
+	setup(n, { expose: r, emit: i }) {
+		let s = i, m = d(null), { fields: h, validateAll: g, resetAll: _, isValid: v } = e();
+		u(t, a(() => ({
+			layout: n.layout,
+			labelAlign: n.labelAlign,
+			labelWidth: n.labelWidth,
+			colon: n.colon,
+			disabled: n.disabled,
+			requiredMark: n.requiredMark,
+			validateTrigger: n.validateTrigger,
+			model: n.model
+		})).value);
+		let y = () => g(), b = () => {
+			let e = [], t = {};
+			for (let [r, i] of Object.entries(h)) t[r] = n.model?.[r], i.value.isValid || e.push({
+				name: r,
+				errors: i.value.errors
+			});
+			return {
+				values: t,
+				errorFields: e
+			};
+		}, x = (e) => {
+			if (!e) {
+				_();
+				return;
+			}
+			for (let t of e) h[t] && h[t].value.reset();
+		}, S = (e, t) => {
+			let n = m.value?.querySelector(`[data-form-field="${e}"]`);
+			n && n.scrollIntoView(t ?? {
+				behavior: "smooth",
+				block: "center"
+			});
+		}, C = (e) => {
+			e.preventDefault();
+			let t = y(), r = b();
+			if (t) s("finish", r.values);
+			else if (s("finishFailed", r), n.scrollToFirstError && r.errorFields.length > 0) {
+				let e = typeof n.scrollToFirstError == "object" ? n.scrollToFirstError : {
+					behavior: "smooth",
+					block: "center"
+				};
+				S(r.errorFields[0].name, e);
+			}
+		}, w = a(() => [
+			"b-form",
+			`b-form--${n.layout}`,
+			`b-form--label-${n.labelAlign}`,
+			{ "b-form--disabled": n.disabled }
+		]);
+		return r({
+			validate: y,
+			resetFields: x,
+			scrollToField: S,
+			isValid: v
+		}), (e, t) => (l(), o("form", {
+			ref_key: "formEl",
+			ref: m,
+			class: c(w.value),
+			name: n.name,
+			novalidate: n.noHtml5Validate,
+			role: "form",
+			"aria-label": n.name,
+			onSubmit: C
+		}, [f(e.$slots, "default", {}, void 0, !0)], 42, p));
+	}
+});
 //#endregion
-export { t as BInputStatus, e as BInputVariant };
+export { m as default };
 
 //# sourceMappingURL=design-system104.js.map

package/dist/design-system104.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system104.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"}
+{"version":3,"file":"design-system104.js","names":[],"sources":["../src/components/BForm/BForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useValidationForm } from '@/composables/useValidation.ts';\nimport { computed, provide, ref } from 'vue';\nimport { BFormContextKey } from './context.ts';\nimport {\n  BFormLayout,\n  BFormLabelAlign,\n  BFormRequiredMark,\n  BFormValidateTrigger,\n  type BFormFieldError,\n  type BFormItemContext,\n  type BFormValidateResult,\n} from './types.ts';\n\nconst {\n  layout = BFormLayout.Horizontal,\n  labelAlign = BFormLabelAlign.Left,\n  labelWidth,\n  colon = true,\n  disabled = false,\n  requiredMark = true,\n  name,\n  model,\n  scrollToFirstError = false,\n  validateTrigger = BFormValidateTrigger.Change,\n  noHtml5Validate = false,\n} = defineProps<{\n  /** Form layout mode. */\n  layout?: `${BFormLayout}`;\n  /** Label text alignment. */\n  labelAlign?: `${BFormLabelAlign}`;\n  /** Fixed width for all labels. */\n  labelWidth?: string;\n  /** Display colon after label (horizontal layout only). */\n  colon?: boolean;\n  /** Whether all form controls are disabled. */\n  disabled?: boolean;\n  /** How required/optional marks are displayed. */\n  requiredMark?: boolean | `${BFormRequiredMark}`;\n  /** Form name, used as field id prefix. */\n  name?: string;\n  /** Form data model object. Fields read their value from model[fieldName]. */\n  model?: Record<string, unknown>;\n  /** Auto-scroll to first validation error on submit failure. */\n  scrollToFirstError?: boolean | ScrollIntoViewOptions;\n  /** Default field validation trigger. */\n  validateTrigger?: `${BFormValidateTrigger}` | `${BFormValidateTrigger}`[];\n  /** Disable native HTML5 validation. */\n  noHtml5Validate?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Called after successful validation on submit. */\n  finish: [values: Record<string, unknown>];\n  /** Called when validation fails on submit. */\n  finishFailed: [result: BFormValidateResult];\n}>();\n\nconst formEl = ref<HTMLFormElement | null>(null);\n\nconst { fields, validateAll, resetAll, isValid } = useValidationForm();\n\nconst formContext = computed<BFormItemContext>(() => ({\n  layout,\n  labelAlign,\n  labelWidth,\n  colon,\n  disabled,\n  requiredMark,\n  validateTrigger,\n  model,\n}));\n\nprovide(BFormContextKey, formContext.value);\n\nconst validate = (): boolean => {\n  return validateAll();\n};\n\nconst buildResult = (): BFormValidateResult => {\n  const errorFields: BFormFieldError[] = [];\n  const values: Record<string, unknown> = {};\n\n  for (const [key, fieldState] of Object.entries(fields)) {\n    values[key] = model?.[key];\n    if (!fieldState.value.isValid) {\n      errorFields.push({ name: key, errors: fieldState.value.errors });\n    }\n  }\n\n  return { values, errorFields };\n};\n\nconst resetFields = (names?: string[]) => {\n  if (!names) {\n    resetAll();\n    return;\n  }\n  for (const fieldName of names) {\n    if (fields[fieldName]) {\n      fields[fieldName].value.reset();\n    }\n  }\n};\n\nconst scrollToField = (fieldName: string, options?: ScrollIntoViewOptions) => {\n  const el = formEl.value?.querySelector(`[data-form-field=\"${fieldName}\"]`);\n  if (el) {\n    el.scrollIntoView(options ?? { behavior: 'smooth', block: 'center' });\n  }\n};\n\nconst handleSubmit = (e: Event) => {\n  e.preventDefault();\n  const allValid = validate();\n  const result = buildResult();\n\n  if (allValid) {\n    emit('finish', result.values);\n  } else {\n    emit('finishFailed', result);\n    if (scrollToFirstError && result.errorFields.length > 0) {\n      const opts =\n        typeof scrollToFirstError === 'object' ? scrollToFirstError : { behavior: 'smooth' as const, block: 'center' as const };\n      scrollToField(result.errorFields[0].name, opts);\n    }\n  }\n};\n\nconst formClasses = computed(() => [\n  'b-form',\n  `b-form--${layout}`,\n  `b-form--label-${labelAlign}`,\n  {\n    'b-form--disabled': disabled,\n  },\n]);\n\ndefineExpose({\n  validate,\n  resetFields,\n  scrollToField,\n  isValid,\n});\n</script>\n\n<template>\n  <form\n    ref=\"formEl\"\n    :class=\"formClasses\"\n    :name=\"name\"\n    :novalidate=\"noHtml5Validate\"\n    role=\"form\"\n    :aria-label=\"name\"\n    @submit=\"handleSubmit\"\n  >\n    <slot />\n  </form>\n</template>\n\n<style scoped>\n.b-form {\n  --b-form-item-margin-bottom: 24px;\n  --b-form-inline-item-margin-bottom: 0;\n  --b-form-label-color: rgba(0, 0, 0, 0.88);\n  --b-form-label-font-size: 14px;\n  --b-form-label-height: 32px;\n  --b-form-label-colon-margin-inline-start: 2px;\n  --b-form-label-colon-margin-inline-end: 8px;\n  --b-form-label-required-mark-color: #cf1322;\n  --b-form-vertical-label-margin: 0;\n  --b-form-vertical-label-padding: 0 0 8px;\n  --b-form-help-color: rgba(0, 0, 0, 0.65);\n  --b-form-error-color: #cf1322;\n  --b-form-warning-color: #874d00;\n  --b-form-success-color: #52c41a;\n\n  margin: 0;\n  padding: 0;\n  font-size: var(--b-form-label-font-size);\n  color: var(--b-form-label-color);\n}\n\n.b-form--inline {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 16px;\n  align-items: flex-end;\n}\n\n[data-prefers-color='dark'] .b-form {\n  --b-form-label-color: rgba(255, 255, 255, 0.88);\n  --b-form-label-required-mark-color: #dc3838;\n  --b-form-help-color: rgba(255, 255, 255, 0.65);\n  --b-form-error-color: #dc3838;\n  --b-form-warning-color: #d1a300;\n  --b-form-success-color: #49aa19;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-form {\n    --b-form-label-color: rgba(255, 255, 255, 0.88);\n    --b-form-label-required-mark-color: #dc3838;\n    --b-form-help-color: rgba(255, 255, 255, 0.65);\n    --b-form-error-color: #dc3838;\n    --b-form-warning-color: #d1a300;\n    --b-form-success-color: #49aa19;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-form :deep(.b-form-item__help) {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDA,IAAM,IAAO,GAOP,IAAS,EAA4B,KAAK,EAE1C,EAAE,WAAQ,gBAAa,aAAU,eAAY,GAAmB;AAatE,IAAQ,GAXY,SAAkC;GACpD,QAAK,EAAA;GACL,YAAS,EAAA;GACT,YAAS,EAAA;GACT,OAAI,EAAA;GACJ,UAAO,EAAA;GACP,cAAW,EAAA;GACX,iBAAc,EAAA;GACd,OAAI,EAAA;GACL,EAAE,CAEkC,MAAM;EAE3C,IAAM,UACG,GAAa,EAGhB,UAAyC;GAC7C,IAAM,IAAiC,EAAE,EACnC,IAAkC,EAAE;AAE1C,QAAK,IAAM,CAAC,GAAK,MAAe,OAAO,QAAQ,EAAO,CAEpD,CADA,EAAO,KAAO,EAAA,QAAQ,IACjB,EAAW,MAAM,WACpB,EAAY,KAAK;IAAE,MAAM;IAAK,QAAQ,EAAW,MAAM;IAAQ,CAAC;AAIpE,UAAO;IAAE;IAAQ;IAAa;KAG1B,KAAe,MAAqB;AACxC,OAAI,CAAC,GAAO;AACV,OAAU;AACV;;AAEF,QAAK,IAAM,KAAa,EACtB,CAAI,EAAO,MACT,EAAO,GAAW,MAAM,OAAO;KAK/B,KAAiB,GAAmB,MAAoC;GAC5E,IAAM,IAAK,EAAO,OAAO,cAAc,qBAAqB,EAAU,IAAI;AAC1E,GAAI,KACF,EAAG,eAAe,KAAW;IAAE,UAAU;IAAU,OAAO;IAAU,CAAC;KAInE,KAAgB,MAAa;AACjC,KAAE,gBAAgB;GAClB,IAAM,IAAW,GAAU,EACrB,IAAS,GAAa;AAE5B,OAAI,EACF,GAAK,UAAU,EAAO,OAAO;YAE7B,EAAK,gBAAgB,EAAO,EACxB,EAAA,sBAAsB,EAAO,YAAY,SAAS,GAAG;IACvD,IAAM,IACJ,OAAO,EAAA,sBAAuB,WAAW,EAAA,qBAAqB;KAAE,UAAU;KAAmB,OAAO;KAAmB;AACzH,MAAc,EAAO,YAAY,GAAG,MAAM,EAAK;;KAK/C,IAAc,QAAe;GACjC;GACA,WAAW,EAAA;GACX,iBAAiB,EAAA;GACjB,EACE,oBAAoB,EAAA,UACrB;GACF,CAAC;SAEF,EAAa;GACX;GACA;GACA;GACA;GACD,CAAC,kBAIA,EAUO,QAAA;YATD;GAAJ,KAAI;GACH,OAAK,EAAE,EAAA,MAAW;GAClB,MAAM,EAAA;GACN,YAAY,EAAA;GACb,MAAK;GACJ,cAAY,EAAA;GACZ,UAAQ;MAET,EAAQ,EAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,GAAA,CAAA,EAAA,IAAA,EAAA"}

package/dist/design-system106.js

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

package/dist/design-system106.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system106.js","names":[],"sources":["../src/components/BForm/BForm.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useValidationForm } from '@/composables/useValidation.ts';\nimport { computed, provide, ref } from 'vue';\nimport { BFormContextKey } from './context.ts';\nimport {\n  BFormLayout,\n  BFormLabelAlign,\n  BFormRequiredMark,\n  BFormValidateTrigger,\n  type BFormFieldError,\n  type BFormItemContext,\n  type BFormValidateResult,\n} from './types.ts';\n\nconst {\n  layout = BFormLayout.Horizontal,\n  labelAlign = BFormLabelAlign.Left,\n  labelWidth,\n  colon = true,\n  disabled = false,\n  requiredMark = true,\n  name,\n  model,\n  scrollToFirstError = false,\n  validateTrigger = BFormValidateTrigger.Change,\n  noHtml5Validate = false,\n} = defineProps<{\n  /** Form layout mode. */\n  layout?: `${BFormLayout}`;\n  /** Label text alignment. */\n  labelAlign?: `${BFormLabelAlign}`;\n  /** Fixed width for all labels. */\n  labelWidth?: string;\n  /** Display colon after label (horizontal layout only). */\n  colon?: boolean;\n  /** Whether all form controls are disabled. */\n  disabled?: boolean;\n  /** How required/optional marks are displayed. */\n  requiredMark?: boolean | `${BFormRequiredMark}`;\n  /** Form name, used as field id prefix. */\n  name?: string;\n  /** Form data model object. Fields read their value from model[fieldName]. */\n  model?: Record<string, unknown>;\n  /** Auto-scroll to first validation error on submit failure. */\n  scrollToFirstError?: boolean | ScrollIntoViewOptions;\n  /** Default field validation trigger. */\n  validateTrigger?: `${BFormValidateTrigger}` | `${BFormValidateTrigger}`[];\n  /** Disable native HTML5 validation. */\n  noHtml5Validate?: boolean;\n}>();\n\nconst emit = defineEmits<{\n  /** Called after successful validation on submit. */\n  finish: [values: Record<string, unknown>];\n  /** Called when validation fails on submit. */\n  finishFailed: [result: BFormValidateResult];\n}>();\n\nconst formEl = ref<HTMLFormElement | null>(null);\n\nconst { fields, validateAll, resetAll, isValid } = useValidationForm();\n\nconst formContext = computed<BFormItemContext>(() => ({\n  layout,\n  labelAlign,\n  labelWidth,\n  colon,\n  disabled,\n  requiredMark,\n  validateTrigger,\n  model,\n}));\n\nprovide(BFormContextKey, formContext.value);\n\nconst validate = (): boolean => {\n  return validateAll();\n};\n\nconst buildResult = (): BFormValidateResult => {\n  const errorFields: BFormFieldError[] = [];\n  const values: Record<string, unknown> = {};\n\n  for (const [key, fieldState] of Object.entries(fields)) {\n    values[key] = model?.[key];\n    if (!fieldState.value.isValid) {\n      errorFields.push({ name: key, errors: fieldState.value.errors });\n    }\n  }\n\n  return { values, errorFields };\n};\n\nconst resetFields = (names?: string[]) => {\n  if (!names) {\n    resetAll();\n    return;\n  }\n  for (const fieldName of names) {\n    if (fields[fieldName]) {\n      fields[fieldName].value.reset();\n    }\n  }\n};\n\nconst scrollToField = (fieldName: string, options?: ScrollIntoViewOptions) => {\n  const el = formEl.value?.querySelector(`[data-form-field=\"${fieldName}\"]`);\n  if (el) {\n    el.scrollIntoView(options ?? { behavior: 'smooth', block: 'center' });\n  }\n};\n\nconst handleSubmit = (e: Event) => {\n  e.preventDefault();\n  const allValid = validate();\n  const result = buildResult();\n\n  if (allValid) {\n    emit('finish', result.values);\n  } else {\n    emit('finishFailed', result);\n    if (scrollToFirstError && result.errorFields.length > 0) {\n      const opts =\n        typeof scrollToFirstError === 'object' ? scrollToFirstError : { behavior: 'smooth' as const, block: 'center' as const };\n      scrollToField(result.errorFields[0].name, opts);\n    }\n  }\n};\n\nconst formClasses = computed(() => [\n  'b-form',\n  `b-form--${layout}`,\n  `b-form--label-${labelAlign}`,\n  {\n    'b-form--disabled': disabled,\n  },\n]);\n\ndefineExpose({\n  validate,\n  resetFields,\n  scrollToField,\n  isValid,\n});\n</script>\n\n<template>\n  <form\n    ref=\"formEl\"\n    :class=\"formClasses\"\n    :name=\"name\"\n    :novalidate=\"noHtml5Validate\"\n    role=\"form\"\n    :aria-label=\"name\"\n    @submit=\"handleSubmit\"\n  >\n    <slot />\n  </form>\n</template>\n\n<style scoped>\n.b-form {\n  --b-form-item-margin-bottom: 24px;\n  --b-form-inline-item-margin-bottom: 0;\n  --b-form-label-color: rgba(0, 0, 0, 0.88);\n  --b-form-label-font-size: 14px;\n  --b-form-label-height: 32px;\n  --b-form-label-colon-margin-inline-start: 2px;\n  --b-form-label-colon-margin-inline-end: 8px;\n  --b-form-label-required-mark-color: #cf1322;\n  --b-form-vertical-label-margin: 0;\n  --b-form-vertical-label-padding: 0 0 8px;\n  --b-form-help-color: rgba(0, 0, 0, 0.65);\n  --b-form-error-color: #cf1322;\n  --b-form-warning-color: #874d00;\n  --b-form-success-color: #52c41a;\n\n  margin: 0;\n  padding: 0;\n  font-size: var(--b-form-label-font-size);\n  color: var(--b-form-label-color);\n}\n\n.b-form--inline {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 16px;\n  align-items: flex-end;\n}\n\n[data-prefers-color='dark'] .b-form {\n  --b-form-label-color: rgba(255, 255, 255, 0.88);\n  --b-form-label-required-mark-color: #dc3838;\n  --b-form-help-color: rgba(255, 255, 255, 0.65);\n  --b-form-error-color: #dc3838;\n  --b-form-warning-color: #d1a300;\n  --b-form-success-color: #49aa19;\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-form {\n    --b-form-label-color: rgba(255, 255, 255, 0.88);\n    --b-form-label-required-mark-color: #dc3838;\n    --b-form-help-color: rgba(255, 255, 255, 0.65);\n    --b-form-error-color: #dc3838;\n    --b-form-warning-color: #d1a300;\n    --b-form-success-color: #49aa19;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-form :deep(.b-form-item__help) {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}