@7pmlabs/design-system 1.0.10 → 1.0.11

package/dist/design-system204.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system204.js","names":[],"sources":["../src/components/BSplitter/BSplitter.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderList as _renderList, unref as _unref, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveDynamicComponent as _resolveDynamicComponent, createBlock as _createBlock, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderSlot as _renderSlot, withModifiers as _withModifiers, createCommentVNode as _createCommentVNode } from \"vue\"\n\nconst _hoisted_1 = [\"data-orientation\"]\nconst _hoisted_2 = [\"id\"]\nconst _hoisted_3 = [\"tabindex\", \"aria-orientation\", \"aria-controls\", \"aria-valuenow\", \"aria-disabled\", \"aria-label\", \"onMousedown\", \"onTouchstart\", \"onKeydown\", \"onDblclick\"]\nconst _hoisted_4 = {\n  \"aria-hidden\": \"true\",\n  class: \"b-splitter__handle\"\n}\nconst _hoisted_5 = [\"aria-label\", \"aria-expanded\", \"onClick\"]\nconst _hoisted_6 = [\"aria-label\", \"aria-expanded\", \"onClick\"]\n\nimport type { CSSProperties, PropType, VNode } from 'vue';\nimport { Fragment, camelize, computed, defineComponent, h, onBeforeUnmount, onMounted, provide, ref, useSlots, watch } from 'vue';\nimport { useComponentId } from '../../composables/useComponentId';\nimport BSplitterPanel from './BSplitterPanel.vue';\nimport {\n  BSplitterContextKey,\n  type BSplitterCollapsible,\n  type BSplitterOrientation,\n  type BSplitterPanelCollapsible,\n  type BSplitterPanelConfig,\n} from './types';\n\nconst DRAGGER_PX = 6; // matches --b-splitter-dragger-size default\n\n/** Pixel sizes for each panel, kept in sync with container size + props. */\ninterface DragState {\n  draggerIndex: number;\n  startCoord: number;\n  startSizes: number[];\n  /** In lazy mode, the preview offset (pixels relative to original divider). */\n  previewDelta: number;\n}\nconst KEY_STEP = 10;\n\n\nexport default /*@__PURE__*/_defineComponent({\n  ...{ name: 'BSplitter', inheritAttrs: false },\n  __name: 'BSplitter',\n  props: {\n    vertical: { type: Boolean, default: false },\n    orientation: {},\n    lazy: { type: Boolean, default: false },\n    collapsible: {}\n  },\n  emits: [\"resize\", \"resizeStart\", \"resizeEnd\", \"collapse\", \"draggerDoubleClick\"],\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n/**\n * BSplitter\n * ---------\n * A flex container that lets the user resize the size of its panels by\n * dragging the bars between them.\n *\n * Mirrors the AntD `<Splitter>` API. Children must be `<BSplitterPanel>`\n * components.\n */\n\n\n/**\n * Internal helper component that renders an array of pre-built VNodes inside\n * a panel. Declared inline to keep the SFC self-contained.\n */\nconst VNodeRenderer = defineComponent({\n  name: 'BSplitterVNodeRenderer',\n  props: {\n    nodes: {\n      type: Array as PropType<VNode[] | undefined | null>,\n      default: () => [],\n    },\n  },\n  setup(props) {\n    return () => (props.nodes && props.nodes.length ? h(Fragment, null, props.nodes) : null);\n  },\n});\n\n//#region Props / Emits / Slots\n\n\nconst emit = __emit;\n\nconst slots = useSlots();\nconst { componentUID } = useComponentId();\n//#endregion\n\n//#region Orientation\nconst resolvedOrientation = computed<BSplitterOrientation>(() =>\n  __props.orientation ?? (__props.vertical ? 'vertical' : 'horizontal'),\n);\nconst isVertical = computed(() => resolvedOrientation.value === 'vertical');\n\nprovide(BSplitterContextKey, {\n  orientation: resolvedOrientation.value,\n});\n//#endregion\n\n//#region Slot inspection — extract panel configs from default slot\nfunction flattenChildren(children: VNode[]): VNode[] {\n  const out: VNode[] = [];\n  for (const vn of children) {\n    if (vn.type === Fragment && Array.isArray(vn.children)) {\n      out.push(...flattenChildren(vn.children as VNode[]));\n    } else {\n      out.push(vn);\n    }\n  }\n  return out;\n}\n\nconst panelConfigs = computed<BSplitterPanelConfig[]>(() => {\n  const raw = slots.default?.();\n  if (!raw) return [];\n  const flat = flattenChildren(raw);\n  const result: BSplitterPanelConfig[] = [];\n  let idx = 0;\n  for (const vnode of flat) {\n    if (vnode.type !== BSplitterPanel) continue;\n    // Normalize prop keys to camelCase — Vue keeps the original (often\n    // kebab-case) keys on the raw vnode.props.\n    const rawProps = (vnode.props ?? {}) as Record<string, unknown>;\n    const props: Record<string, unknown> = {};\n    for (const k in rawProps) props[camelize(k)] = rawProps[k];\n\n    const slotChildren = vnode.children as\n      | { default?: () => VNode | VNode[] }\n      | null\n      | undefined;\n    const rawDefault = slotChildren?.default?.();\n    const content: VNode[] | undefined = rawDefault\n      ? Array.isArray(rawDefault)\n        ? rawDefault\n        : [rawDefault]\n      : undefined;\n\n    let collapsible: BSplitterPanelCollapsible | false = false;\n    const c = props.collapsible;\n    if (c === true || c === '' || c === 'true') {\n      collapsible = { start: true, end: true };\n    } else if (c && typeof c === 'object') {\n      collapsible = c as BSplitterPanelCollapsible;\n    }\n\n    const resizableRaw = props.resizable;\n    const resizable =\n      resizableRaw === undefined\n        ? true\n        : resizableRaw === false || resizableRaw === 'false'\n          ? false\n          : true;\n\n    const destroyRaw = props.destroyOnHidden;\n    const destroyOnHidden =\n      destroyRaw === true || destroyRaw === '' || destroyRaw === 'true';\n\n    result.push({\n      index: idx++,\n      size: props.size as number | string | undefined,\n      defaultSize: props.defaultSize as number | string | undefined,\n      min: props.min as number | string | undefined,\n      max: props.max as number | string | undefined,\n      resizable,\n      collapsible,\n      destroyOnHidden,\n      content,\n    });\n  }\n  return result;\n});\n//#endregion\n\n//#region Sizing internals\nconst rootRef = ref<HTMLElement | null>(null);\nconst containerSize = ref(0);\nconst sizesPx = ref<number[]>([]);\n/** Per-panel collapsed flag (true → forced size 0). */\nconst collapsedFlags = ref<boolean[]>([]);\n/** Per-panel sizes saved before collapsing (so we can restore). */\nconst savedSizes = ref<(number | null)[]>([]);\n/**\n * Per-panel record of how it was collapsed:\n * - 'start': collapsed via the `<` button on the dragger AFTER the panel\n *   (neighbor that absorbed = panel + 1)\n * - 'end':   collapsed via the `>` button on the dragger BEFORE the panel\n *   (neighbor that absorbed = panel - 1)\n * Used to decide which dragger should expose the restore button.\n */\nconst collapsedDirection = ref<('start' | 'end' | null)[]>([]);\n\nfunction parseLength(\n  value: number | string | undefined,\n  total: number,\n  fallback = NaN,\n): number {\n  if (value === undefined || value === null) return fallback;\n  if (typeof value === 'number') return value;\n  const s = value.trim();\n  if (s.endsWith('%')) {\n    const pct = parseFloat(s);\n    return isFinite(pct) ? (pct / 100) * total : fallback;\n  }\n  if (s.endsWith('px')) return parseFloat(s);\n  const n = parseFloat(s);\n  return isFinite(n) ? n : fallback;\n}\n\nfunction availableSize(): number {\n  const total = containerSize.value;\n  const dividers = Math.max(panelConfigs.value.length - 1, 0) * DRAGGER_PX;\n  return Math.max(total - dividers, 0);\n}\n\nfunction computeInitialSizes(): number[] {\n  const panels = panelConfigs.value;\n  const avail = availableSize();\n  if (panels.length === 0 || avail <= 0) return panels.map(() => 0);\n\n  const result: number[] = Array.from({ length: panels.length }, () => NaN);\n  let assigned = 0;\n  // First pass: explicit `size` and `defaultSize`.\n  panels.forEach((p, i) => {\n    const v = parseLength(p.size ?? p.defaultSize, avail);\n    if (!isNaN(v)) {\n      result[i] = v;\n      assigned += v;\n    }\n  });\n  // Distribute remainder evenly among the rest.\n  const remainingIdx = result.map((v, i) => (isNaN(v) ? i : -1)).filter((i) => i >= 0);\n  if (remainingIdx.length > 0) {\n    const remainder = Math.max(avail - assigned, 0);\n    const each = remainder / remainingIdx.length;\n    remainingIdx.forEach((i) => (result[i] = each));\n  }\n  // Clamp to min/max and re-normalize so they sum to avail.\n  return clampAndNormalize(result, avail);\n}\n\nfunction clampAndNormalize(input: number[], avail: number): number[] {\n  const panels = panelConfigs.value;\n  const out = input.map((v, i) => {\n    const min = parseLength(panels[i]?.min, avail, 0);\n    const max = parseLength(panels[i]?.max, avail, Infinity);\n    return Math.min(Math.max(v, min), max);\n  });\n  // Normalize to fit avail.\n  const sum = out.reduce((a, b) => a + b, 0);\n  if (sum === 0 || avail === 0) return out;\n  const scale = avail / sum;\n  return out.map((v) => v * scale);\n}\n\nfunction syncFromProps() {\n  const panels = panelConfigs.value;\n  // Ensure collapsedFlags / savedSizes have correct length.\n  if (collapsedFlags.value.length !== panels.length) {\n    collapsedFlags.value = panels.map(() => false);\n    savedSizes.value = panels.map(() => null);\n    collapsedDirection.value = panels.map(() => null);\n  }\n  // Re-derive sizes when container or panel configs change.\n  sizesPx.value = computeInitialSizes();\n}\n\n/**\n * Inspect controlled `size` props — when provided, reflect them into sizesPx.\n * AntD-style: when `size` is set, it acts as a controlled value.\n */\nwatch(\n  () => panelConfigs.value.map((p) => `${p.size ?? ''}`).join('|'),\n  () => {\n    if (containerSize.value > 0) syncFromProps();\n  },\n);\n\nwatch(\n  () => panelConfigs.value.length,\n  () => {\n    if (containerSize.value > 0) syncFromProps();\n  },\n);\n//#endregion\n\n//#region ResizeObserver — track container size\nlet resizeObserver: ResizeObserver | null = null;\n\nonMounted(() => {\n  if (!rootRef.value) return;\n  measureContainer();\n  syncFromProps();\n  if (typeof ResizeObserver !== 'undefined') {\n    resizeObserver = new ResizeObserver(() => {\n      const prev = containerSize.value;\n      measureContainer();\n      // Re-scale sizes proportionally on container resize.\n      if (prev > 0 && containerSize.value > 0 && sizesPx.value.length > 0) {\n        const ratio = availableSize() / Math.max(prev - DRAGGER_PX * (sizesPx.value.length - 1), 1);\n        sizesPx.value = clampAndNormalize(\n          sizesPx.value.map((v) => v * ratio),\n          availableSize(),\n        );\n      } else {\n        syncFromProps();\n      }\n    });\n    resizeObserver.observe(rootRef.value);\n  }\n});\n\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect();\n  resizeObserver = null;\n  removeDragListeners();\n});\n\nfunction measureContainer() {\n  if (!rootRef.value) return;\n  containerSize.value = isVertical.value\n    ? rootRef.value.clientHeight\n    : rootRef.value.clientWidth;\n}\n//#endregion\n\n//#region Dragging\nconst dragState = ref<DragState | null>(null);\nconst lazyPreviewDelta = ref<number | null>(null);\n\nfunction getCoord(e: MouseEvent | TouchEvent): number {\n  if ('touches' in e) {\n    const t = e.touches[0] ?? e.changedTouches[0];\n    return isVertical.value ? t.clientY : t.clientX;\n  }\n  return isVertical.value ? e.clientY : e.clientX;\n}\n\nfunction onDraggerPointerDown(index: number, e: MouseEvent | TouchEvent) {\n  if (!isResizable(index)) return;\n  e.preventDefault();\n  dragState.value = {\n    draggerIndex: index,\n    startCoord: getCoord(e),\n    startSizes: [...sizesPx.value],\n    previewDelta: 0,\n  };\n  lazyPreviewDelta.value = __props.lazy ? 0 : null;\n  emit('resizeStart', [...sizesPx.value]);\n\n  document.addEventListener('mousemove', onDragMove);\n  document.addEventListener('mouseup', onDragEnd);\n  document.addEventListener('touchmove', onDragMove, { passive: false });\n  document.addEventListener('touchend', onDragEnd);\n}\n\nfunction applyDelta(startSizes: number[], index: number, delta: number): number[] {\n  const panels = panelConfigs.value;\n  const avail = availableSize();\n  const next = [...startSizes];\n  const a = index;\n  const b = index + 1;\n\n  const aMin = parseLength(panels[a]?.min, avail, 0);\n  const aMax = parseLength(panels[a]?.max, avail, Infinity);\n  const bMin = parseLength(panels[b]?.min, avail, 0);\n  const bMax = parseLength(panels[b]?.max, avail, Infinity);\n\n  let newA = next[a] + delta;\n  let newB = next[b] - delta;\n\n  // Clamp so neither side violates its constraints.\n  if (newA < aMin) {\n    newB -= aMin - newA;\n    newA = aMin;\n  }\n  if (newA > aMax) {\n    newB += newA - aMax;\n    newA = aMax;\n  }\n  if (newB < bMin) {\n    newA -= bMin - newB;\n    newB = bMin;\n  }\n  if (newB > bMax) {\n    newA += newB - bMax;\n    newB = bMax;\n  }\n  // Final clamp on `a` again in case `b` clamping pushed it out.\n  newA = Math.min(Math.max(newA, aMin), aMax);\n  newB = Math.min(Math.max(newB, bMin), bMax);\n  next[a] = newA;\n  next[b] = newB;\n  return next;\n}\n\nfunction onDragMove(e: MouseEvent | TouchEvent) {\n  if (!dragState.value) return;\n  if ('touches' in e) e.preventDefault();\n  const coord = getCoord(e);\n  const delta = coord - dragState.value.startCoord;\n\n  if (__props.lazy) {\n    // Update preview indicator only.\n    lazyPreviewDelta.value = delta;\n    return;\n  }\n  const next = applyDelta(dragState.value.startSizes, dragState.value.draggerIndex, delta);\n  sizesPx.value = next;\n  emit('resize', [...next]);\n}\n\nfunction onDragEnd(e: MouseEvent | TouchEvent) {\n  if (!dragState.value) return;\n  const coord = 'changedTouches' in e ? getCoord(e) : getCoord(e);\n  const delta = coord - dragState.value.startCoord;\n\n  if (__props.lazy) {\n    const next = applyDelta(dragState.value.startSizes, dragState.value.draggerIndex, delta);\n    sizesPx.value = next;\n    emit('resize', [...next]);\n  }\n  emit('resizeEnd', [...sizesPx.value]);\n  dragState.value = null;\n  lazyPreviewDelta.value = null;\n  removeDragListeners();\n}\n\nfunction removeDragListeners() {\n  document.removeEventListener('mousemove', onDragMove);\n  document.removeEventListener('mouseup', onDragEnd);\n  document.removeEventListener('touchmove', onDragMove);\n  document.removeEventListener('touchend', onDragEnd);\n}\n\nfunction isResizable(draggerIndex: number): boolean {\n  const a = panelConfigs.value[draggerIndex];\n  const b = panelConfigs.value[draggerIndex + 1];\n  return !!(a?.resizable && b?.resizable);\n}\n\nfunction onDraggerDoubleClick(i: number) {\n  emit('draggerDoubleClick', i);\n}\n//#endregion\n\n//#region Keyboard\nfunction onDraggerKeyDown(index: number, e: KeyboardEvent) {\n  if (!isResizable(index)) return;\n  let delta = 0;\n  switch (e.key) {\n    case 'ArrowLeft':\n      delta = isVertical.value ? 0 : -KEY_STEP;\n      break;\n    case 'ArrowRight':\n      delta = isVertical.value ? 0 : KEY_STEP;\n      break;\n    case 'ArrowUp':\n      delta = isVertical.value ? -KEY_STEP : 0;\n      break;\n    case 'ArrowDown':\n      delta = isVertical.value ? KEY_STEP : 0;\n      break;\n    case 'Home': {\n      // collapse the panel before the dragger to its minimum.\n      const avail = availableSize();\n      const a = panelConfigs.value[index];\n      delta = -(sizesPx.value[index] - parseLength(a?.min, avail, 0));\n      break;\n    }\n    case 'End': {\n      const avail = availableSize();\n      const b = panelConfigs.value[index + 1];\n      delta = sizesPx.value[index + 1] - parseLength(b?.min, avail, 0);\n      break;\n    }\n    case 'Enter':\n    case ' ':\n      // Toggle: collapse the smaller adjacent panel toward the larger one.\n      e.preventDefault();\n      toggleCollapseAtDragger(index);\n      return;\n    default:\n      return;\n  }\n  if (delta === 0) return;\n  e.preventDefault();\n  emit('resizeStart', [...sizesPx.value]);\n  const next = applyDelta(sizesPx.value, index, delta);\n  sizesPx.value = next;\n  emit('resize', [...next]);\n  emit('resizeEnd', [...next]);\n}\n//#endregion\n\n//#region Collapse / Expand\nfunction toggleCollapseAtDragger(index: number) {\n  // Default keyboard behaviour: collapse the start side if it has more room than 0.\n  const a = panelConfigs.value[index];\n  const b = panelConfigs.value[index + 1];\n  if (a?.collapsible) collapsePanel(index, 'start');\n  else if (b?.collapsible) collapsePanel(index + 1, 'end');\n}\n\n/**\n * Collapse a panel toward the previous (`'start'`) or next (`'end'`) panel.\n * If already collapsed, restore the saved size.\n */\nfunction collapsePanel(panelIndex: number, direction: 'start' | 'end') {\n  const panel = panelConfigs.value[panelIndex];\n  if (!panel) return;\n  const avail = availableSize();\n  const sizes = [...sizesPx.value];\n\n  // The neighbor that absorbs / returns the collapsed panel's space.\n  // - direction='start': panel collapses toward start ⇒ space goes to panelIndex + 1\n  // - direction='end':   panel collapses toward end   ⇒ space goes to panelIndex - 1\n  const neighbor = direction === 'start' ? panelIndex + 1 : panelIndex - 1;\n\n  if (collapsedFlags.value[panelIndex]) {\n    // Restore: take saved size back from the same neighbor that absorbed it.\n    const saved = savedSizes.value[panelIndex] ?? avail / panelConfigs.value.length;\n    if (neighbor >= 0 && neighbor < sizes.length) {\n      const give = Math.min(saved, sizes[neighbor]);\n      sizes[panelIndex] = give;\n      sizes[neighbor] -= give;\n    } else {\n      sizes[panelIndex] = saved;\n    }\n    collapsedFlags.value = collapsedFlags.value.map((v, i) => (i === panelIndex ? false : v));\n    savedSizes.value = savedSizes.value.map((v, i) => (i === panelIndex ? null : v));\n    collapsedDirection.value = collapsedDirection.value.map((v, i) =>\n      i === panelIndex ? null : v,\n    );\n  } else {\n    // Collapse: dump current size into the neighbor.\n    savedSizes.value = savedSizes.value.map((v, i) =>\n      i === panelIndex ? sizes[panelIndex] : v,\n    );\n    if (neighbor >= 0 && neighbor < sizes.length) {\n      sizes[neighbor] += sizes[panelIndex];\n    }\n    sizes[panelIndex] = 0;\n    collapsedFlags.value = collapsedFlags.value.map((v, i) => (i === panelIndex ? true : v));\n    collapsedDirection.value = collapsedDirection.value.map((v, i) =>\n      i === panelIndex ? direction : v,\n    );\n  }\n  sizesPx.value = sizes;\n  emit('resize', [...sizes]);\n  emit('resizeEnd', [...sizes]);\n  emit('collapse', [...collapsedFlags.value], [...sizes]);\n}\n\n/**\n * Helpers for the two collapse buttons rendered on each dragger between\n * panel `i` (prev) and panel `i + 1` (next). Mirrors AntD's logic:\n * the START (`<`) button can either collapse prev or expand a previously-\n * collapsed next; the END (`>`) button is symmetric.\n */\nfunction startBtnPanelCfg(i: number) {\n  return panelConfigs.value[i]?.collapsible\n    ? (panelConfigs.value[i].collapsible as BSplitterPanelCollapsible)\n    : null;\n}\nfunction endBtnPanelCfg(i: number) {\n  return panelConfigs.value[i + 1]?.collapsible\n    ? (panelConfigs.value[i + 1].collapsible as BSplitterPanelCollapsible)\n    : null;\n}\nfunction canShowStartBtn(i: number): boolean {\n  const sizes = sizesPx.value;\n  const prevSize = sizes[i] ?? 0;\n  const nextSize = sizes[i + 1] ?? 0;\n  // Mode A — collapse prev (panel i).\n  const prevCfg = startBtnPanelCfg(i);\n  const collapsePrev = !!prevCfg?.start && prevSize > 0 && nextSize > 0;\n  // Mode B — restore next (panel i + 1) if it was collapsed via THIS dragger.\n  const restoreNext =\n    !!collapsedFlags.value[i + 1] &&\n    collapsedDirection.value[i + 1] === 'end' &&\n    prevSize > 0;\n  return collapsePrev || restoreNext;\n}\nfunction canShowEndBtn(i: number): boolean {\n  const sizes = sizesPx.value;\n  const prevSize = sizes[i] ?? 0;\n  const nextSize = sizes[i + 1] ?? 0;\n  // Mode A — collapse next (panel i + 1).\n  const nextCfg = endBtnPanelCfg(i);\n  const collapseNext = !!nextCfg?.end && nextSize > 0 && prevSize > 0;\n  // Mode B — restore prev (panel i) if it was collapsed via THIS dragger.\n  const restorePrev =\n    !!collapsedFlags.value[i] &&\n    collapsedDirection.value[i] === 'start' &&\n    nextSize > 0;\n  return collapseNext || restorePrev;\n}\nfunction onClickStartBtn(i: number) {\n  if (\n    collapsedFlags.value[i + 1] &&\n    collapsedDirection.value[i + 1] === 'end'\n  ) {\n    // Restore next, taking space back from prev.\n    collapsePanel(i + 1, 'end');\n  } else {\n    collapsePanel(i, 'start');\n  }\n}\nfunction onClickEndBtn(i: number) {\n  if (collapsedFlags.value[i] && collapsedDirection.value[i] === 'start') {\n    // Restore prev, taking space back from next.\n    collapsePanel(i, 'start');\n  } else {\n    collapsePanel(i + 1, 'end');\n  }\n}\nfunction startBtnAriaLabel(i: number): string {\n  if (\n    collapsedFlags.value[i + 1] &&\n    collapsedDirection.value[i + 1] === 'end'\n  ) {\n    return `Expand panel ${i + 2}`;\n  }\n  return `Collapse panel ${i + 1}`;\n}\nfunction endBtnAriaLabel(i: number): string {\n  if (collapsedFlags.value[i] && collapsedDirection.value[i] === 'start') {\n    return `Expand panel ${i + 1}`;\n  }\n  return `Collapse panel ${i + 2}`;\n}\n//#endregion\n\n//#region Style helpers\nconst motion = computed(() => __props.collapsible?.motion !== false);\n\nfunction panelStyle(i: number): CSSProperties {\n  const sz = sizesPx.value[i] ?? 0;\n  const sizeStr = `${sz}px`;\n  return isVertical.value\n    ? { height: sizeStr, flex: `0 0 ${sizeStr}` }\n    : { width: sizeStr, flex: `0 0 ${sizeStr}` };\n}\n\nfunction draggerAriaValueNow(i: number): number {\n  const avail = availableSize();\n  if (avail === 0) return 0;\n  const accumulated = sizesPx.value.slice(0, i + 1).reduce((a, b) => a + b, 0);\n  return Math.round((accumulated / avail) * 100);\n}\n\nconst lazyIndicatorStyle = computed<CSSProperties | undefined>(() => {\n  if (!__props.lazy || !dragState.value || lazyPreviewDelta.value === null) return undefined;\n  const idx = dragState.value.draggerIndex;\n  const before = dragState.value.startSizes.slice(0, idx + 1).reduce((a, b) => a + b, 0);\n  const offset = before + idx * DRAGGER_PX + lazyPreviewDelta.value;\n  return isVertical.value ? { top: `${offset}px` } : { left: `${offset}px` };\n});\n//#endregion\n\n//#region Expose\nfunction getSizes(): number[] {\n  return [...sizesPx.value];\n}\nfunction setSizes(next: number[]) {\n  if (next.length !== sizesPx.value.length) return;\n  sizesPx.value = clampAndNormalize(next, availableSize());\n  emit('resize', [...sizesPx.value]);\n}\n__expose({ getSizes, setSizes });\n//#endregion\n\n//#region Render-time per-panel render helper\n/**\n * Returns the panel's slot content as VNodes, honoring `destroyOnHidden`.\n */\nfunction panelContent(panel: BSplitterPanelConfig, i: number): VNode[] | null {\n  const collapsed = (sizesPx.value[i] ?? 0) <= 0;\n  if (panel.destroyOnHidden && collapsed) return null;\n  return panel.content ?? null;\n}\n//#endregion\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", {\n    ref_key: \"rootRef\",\n    ref: rootRef,\n    class: _normalizeClass([\"b-splitter\", {\n      'b-splitter--horizontal': !isVertical.value,\n      'b-splitter--vertical': isVertical.value,\n      'b-splitter--lazy': __props.lazy,\n      'b-splitter--motion': motion.value,\n      'b-splitter--dragging': dragState.value !== null,\n    }]),\n    \"data-orientation\": resolvedOrientation.value\n  }, [\n    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(panelConfigs.value, (panel, i) => {\n      return (_openBlock(), _createElementBlock(_Fragment, {\n        key: `panel-${_unref(componentUID)}-${i}`\n      }, [\n        _createElementVNode(\"div\", {\n          id: `b-splitter-${_unref(componentUID)}-panel-${i}`,\n          class: _normalizeClass([\"b-splitter__panel\", { 'b-splitter__panel--collapsed': (sizesPx.value[i] ?? 0) <= 0 }]),\n          style: _normalizeStyle(panelStyle(i)),\n          role: \"group\"\n        }, [\n          (_openBlock(), _createBlock(_resolveDynamicComponent(_unref(VNodeRenderer)), {\n            nodes: panelContent(panel, i)\n          }, null, 8, [\"nodes\"]))\n        ], 14, _hoisted_2),\n        (i < panelConfigs.value.length - 1)\n          ? (_openBlock(), _createElementBlock(\"div\", {\n              key: 0,\n              class: _normalizeClass([\"b-splitter__divider\", { 'b-splitter__divider--disabled': !isResizable(i) }])\n            }, [\n              _createElementVNode(\"div\", {\n                class: _normalizeClass([\"b-splitter__dragger\", {\n            'b-splitter__dragger--disabled': !isResizable(i),\n            'b-splitter__dragger--active': dragState.value && dragState.value.draggerIndex === i,\n          }]),\n                role: \"separator\",\n                tabindex: isResizable(i) ? 0 : -1,\n                \"aria-orientation\": isVertical.value ? 'horizontal' : 'vertical',\n                \"aria-controls\": `b-splitter-${_unref(componentUID)}-panel-${i} b-splitter-${_unref(componentUID)}-panel-${i + 1}`,\n                \"aria-valuenow\": draggerAriaValueNow(i),\n                \"aria-valuemin\": \"0\",\n                \"aria-valuemax\": \"100\",\n                \"aria-disabled\": !isResizable(i) || undefined,\n                \"aria-label\": `Resize panel ${i + 1}`,\n                onMousedown: ($event: any) => (onDraggerPointerDown(i, $event)),\n                onTouchstart: ($event: any) => (onDraggerPointerDown(i, $event)),\n                onKeydown: ($event: any) => (onDraggerKeyDown(i, $event)),\n                onDblclick: ($event: any) => (onDraggerDoubleClick(i))\n              }, [\n                _createElementVNode(\"span\", _hoisted_4, [\n                  _renderSlot(_ctx.$slots, \"draggerIcon\")\n                ])\n              ], 42, _hoisted_3),\n              (canShowStartBtn(i))\n                ? (_openBlock(), _createElementBlock(\"button\", {\n                    key: 0,\n                    type: \"button\",\n                    class: \"b-splitter__collapse-btn b-splitter__collapse-btn--start\",\n                    \"aria-label\": startBtnAriaLabel(i),\n                    \"aria-expanded\": \n            collapsedFlags.value[i + 1] && collapsedDirection.value[i + 1] === 'end'\n              ? false\n              : true\n          ,\n                    onMousedown: _cache[0] || (_cache[0] = _withModifiers(() => {}, [\"stop\"])),\n                    onTouchstart: _cache[1] || (_cache[1] = _withModifiers(() => {}, [\"stop\"])),\n                    onClick: _withModifiers(($event: any) => (onClickStartBtn(i)), [\"stop\"])\n                  }, [\n                    _renderSlot(_ctx.$slots, \"collapseIconStart\", {}, () => [\n                      _cache[4] || (_cache[4] = _createElementVNode(\"svg\", {\n                        \"aria-hidden\": \"true\",\n                        class: \"b-splitter__chevron b-splitter__chevron--start\",\n                        viewBox: \"0 0 8 8\",\n                        width: \"8\",\n                        height: \"8\"\n                      }, [\n                        _createElementVNode(\"polyline\", {\n                          points: \"5,1 2,4 5,7\",\n                          fill: \"none\",\n                          stroke: \"currentColor\",\n                          \"stroke-width\": \"1.5\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\"\n                        })\n                      ], -1))\n                    ])\n                  ], 40, _hoisted_5))\n                : _createCommentVNode(\"\", true),\n              (canShowEndBtn(i))\n                ? (_openBlock(), _createElementBlock(\"button\", {\n                    key: 1,\n                    type: \"button\",\n                    class: \"b-splitter__collapse-btn b-splitter__collapse-btn--end\",\n                    \"aria-label\": endBtnAriaLabel(i),\n                    \"aria-expanded\": \n            collapsedFlags.value[i] && collapsedDirection.value[i] === 'start'\n              ? false\n              : true\n          ,\n                    onMousedown: _cache[2] || (_cache[2] = _withModifiers(() => {}, [\"stop\"])),\n                    onTouchstart: _cache[3] || (_cache[3] = _withModifiers(() => {}, [\"stop\"])),\n                    onClick: _withModifiers(($event: any) => (onClickEndBtn(i)), [\"stop\"])\n                  }, [\n                    _renderSlot(_ctx.$slots, \"collapseIconEnd\", {}, () => [\n                      _cache[5] || (_cache[5] = _createElementVNode(\"svg\", {\n                        \"aria-hidden\": \"true\",\n                        class: \"b-splitter__chevron b-splitter__chevron--end\",\n                        viewBox: \"0 0 8 8\",\n                        width: \"8\",\n                        height: \"8\"\n                      }, [\n                        _createElementVNode(\"polyline\", {\n                          points: \"3,1 6,4 3,7\",\n                          fill: \"none\",\n                          stroke: \"currentColor\",\n                          \"stroke-width\": \"1.5\",\n                          \"stroke-linecap\": \"round\",\n                          \"stroke-linejoin\": \"round\"\n                        })\n                      ], -1))\n                    ])\n                  ], 40, _hoisted_6))\n                : _createCommentVNode(\"\", true)\n            ], 2))\n          : _createCommentVNode(\"\", true)\n      ], 64))\n    }), 128)),\n    (__props.lazy && dragState.value && lazyPreviewDelta.value !== null)\n      ? (_openBlock(), _createElementBlock(\"div\", {\n          key: 0,\n          class: \"b-splitter__lazy-indicator\",\n          style: _normalizeStyle(lazyIndicatorStyle.value),\n          \"aria-hidden\": \"true\"\n        }, null, 4))\n      : _createCommentVNode(\"\", true)\n  ], 10, _hoisted_1))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system204.js","names":[],"sources":["../src/components/BSpin/BSpin.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BSpinSize } from '@/types.ts';\nimport { computed, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  spinning = true,\n  size = BSpinSize.Default,\n  tip = '',\n  delay = 0,\n  fullscreen = false,\n} = defineProps<{\n  /**\n   * Whether the Spin indicator is active.\n   * @default true\n   */\n  spinning?: boolean;\n  /**\n   * Size of the spinner - small, default, or large.\n   * @default 'default'\n   */\n  size?: `${BSpinSize}`;\n  /**\n   * Descriptive text displayed below the spinning indicator.\n   */\n  tip?: string;\n  /**\n   * Delay in milliseconds before the spinner shows after `spinning` becomes true.\n   * Prevents flicker for fast operations. Does not apply to hiding.\n   * @default 0\n   */\n  delay?: number;\n  /**\n   * Display as fullscreen overlay (fixed, covers the entire viewport).\n   * @default false\n   */\n  fullscreen?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = defineSlots<{\n  /** Content to wrap with a spinning overlay. */\n  default?(): unknown;\n  /** Custom spinner indicator (replaces the default dots). */\n  indicator?(): unknown;\n  /** Custom tip content (replaces the `tip` prop text). */\n  tip?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst tipId = useId();\n\n/** Delayed spinning state - respects `delay` prop. */\nconst shouldShow = ref(false);\nlet delayTimer: ReturnType<typeof setTimeout> | undefined;\n\nfunction applySpinning(value: boolean) {\n  clearTimeout(delayTimer);\n  if (value && delay > 0) {\n    delayTimer = setTimeout(() => {\n      shouldShow.value = true;\n    }, delay);\n  } else {\n    shouldShow.value = value;\n  }\n}\n\n// Run immediately on mount, then watch for changes\napplySpinning(spinning);\n\nwatch(() => spinning, applySpinning);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isNested = computed(() => Boolean(slots.default));\nconst hasTip = computed(() => Boolean(tip || slots.tip));\n\nconst rootClasses = computed(() => [\n  'b-spin',\n  `b-spin--${size}`,\n  {\n    'b-spin--spinning': shouldShow.value,\n    'b-spin--nested': isNested.value,\n    'b-spin--has-tip': hasTip.value,\n    'b-spin--fullscreen': fullscreen,\n  },\n]);\n</script>\n\n<template>\n  <!-- Fullscreen mode: uses Teleport to <body> -->\n  <Teleport v-if=\"fullscreen\" to=\"body\">\n    <Transition name=\"b-spin-fade\">\n      <div\n        v-if=\"shouldShow\"\n        class=\"b-spin b-spin--fullscreen\"\n        :class=\"[`b-spin--${size}`, { 'b-spin--spinning': shouldShow, 'b-spin--has-tip': hasTip }]\"\n        role=\"status\"\n        :aria-label=\"hasTip ? undefined : 'Loading'\"\n        :aria-describedby=\"hasTip ? tipId : undefined\"\n      >\n        <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n          <slot name=\"indicator\">\n            <span class=\"b-spin__dot\">\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n            </span>\n          </slot>\n        </div>\n        <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n          <slot name=\"tip\">{{ tip }}</slot>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n\n  <!-- Standalone (no children) -->\n  <template v-else-if=\"!isNested\">\n    <div\n      v-if=\"shouldShow\"\n      :class=\"rootClasses\"\n      role=\"status\"\n      :aria-label=\"hasTip ? undefined : 'Loading'\"\n      :aria-describedby=\"hasTip ? tipId : undefined\"\n    >\n      <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\">\n          <span class=\"b-spin__dot\">\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n          </span>\n        </slot>\n      </div>\n      <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n        <slot name=\"tip\">{{ tip }}</slot>\n      </div>\n    </div>\n  </template>\n\n  <!-- Nested (wraps children) -->\n  <div v-else :class=\"rootClasses\">\n    <div\n      v-if=\"shouldShow\"\n      class=\"b-spin__overlay-container\"\n      role=\"status\"\n      :aria-label=\"hasTip ? undefined : 'Loading'\"\n      :aria-describedby=\"hasTip ? tipId : undefined\"\n    >\n      <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\">\n          <span class=\"b-spin__dot\">\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n          </span>\n        </slot>\n      </div>\n      <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n        <slot name=\"tip\">{{ tip }}</slot>\n      </div>\n    </div>\n    <div\n      class=\"b-spin__content\"\n      :class=\"{ 'b-spin__content--blurred': shouldShow }\"\n      :aria-busy=\"shouldShow\"\n      :inert=\"shouldShow\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-spin {\n  /* Dot sizes per variant */\n  --b-spin-dot-size-small: 14px;\n  --b-spin-dot-size-default: 20px;\n  --b-spin-dot-size-large: 32px;\n\n  /* Dot colour */\n  --b-spin-dot-color: oklch(50% 0.169 237.323); /* primary – darkened for AA contrast */\n\n  /* Tip text */\n  --b-spin-tip-color: oklch(50% 0.169 237.323);\n  --b-spin-tip-font-size: 0.875rem;\n\n  /* Overlay */\n  --b-spin-overlay-bg: oklch(100% 0 0 / 0.6);\n  --b-spin-content-blur: 0.5px;\n\n  /* Fullscreen */\n  --b-spin-fullscreen-bg: oklch(100% 0 0 / 0.75);\n\n  /* Animation */\n  --b-spin-animation-duration: 1.2s;\n  --b-spin-transition-duration: 300ms;\n}\n\n/* ── Dark mode ───────────────────────────────── */\n[data-prefers-color='dark'] .b-spin {\n  --b-spin-dot-color: oklch(72% 0.14 237);\n  --b-spin-tip-color: oklch(72% 0.14 237);\n  --b-spin-overlay-bg: oklch(15% 0 0 / 0.6);\n  --b-spin-fullscreen-bg: oklch(15% 0 0 / 0.75);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-spin {\n    --b-spin-dot-color: oklch(72% 0.14 237);\n    --b-spin-tip-color: oklch(72% 0.14 237);\n    --b-spin-overlay-bg: oklch(15% 0 0 / 0.6);\n    --b-spin-fullscreen-bg: oklch(15% 0 0 / 0.75);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-spin {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  font-family: inherit;\n}\n\n/* Nested wrapper needs relative positioning for overlay */\n.b-spin--nested {\n  position: relative;\n  display: block;\n}\n\n/* ── Overlay container (nested mode) ── */\n.b-spin__overlay-container {\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  background: var(--b-spin-overlay-bg);\n  border-radius: inherit;\n  transition: opacity var(--b-spin-transition-duration) ease;\n}\n\n/* ── Content (nested) ── */\n.b-spin__content {\n  transition:\n    opacity var(--b-spin-transition-duration) ease,\n    filter var(--b-spin-transition-duration) ease;\n}\n\n.b-spin__content--blurred {\n  opacity: 0.5;\n  filter: blur(var(--b-spin-content-blur));\n  pointer-events: none;\n  user-select: none;\n}\n\n/* ── Fullscreen ── */\n.b-spin--fullscreen {\n  position: fixed;\n  inset: 0;\n  z-index: 1070;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  background: var(--b-spin-fullscreen-bg);\n}\n\n/* ── Dot indicator ── */\n.b-spin__indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.b-spin__dot {\n  position: relative;\n  display: inline-block;\n  font-size: var(--b-spin-dot-size-default);\n  width: 1em;\n  height: 1em;\n  animation: b-spin-rotate var(--b-spin-animation-duration) linear infinite;\n}\n\n.b-spin--small .b-spin__dot {\n  font-size: var(--b-spin-dot-size-small);\n}\n\n.b-spin--large .b-spin__dot {\n  font-size: var(--b-spin-dot-size-large);\n}\n\n.b-spin__dot-item {\n  position: absolute;\n  display: block;\n  width: calc(1em * 0.45);\n  height: calc(1em * 0.45);\n  background-color: var(--b-spin-dot-color);\n  border-radius: 50%;\n  opacity: 0.3;\n  animation: b-spin-bounce var(--b-spin-animation-duration) ease-in-out infinite;\n  transform: scale(0.75);\n}\n\n.b-spin__dot-item:nth-child(1) {\n  top: 0;\n  left: 0;\n}\n\n.b-spin__dot-item:nth-child(2) {\n  top: 0;\n  right: 0;\n  animation-delay: 0.4s;\n}\n\n.b-spin__dot-item:nth-child(3) {\n  right: 0;\n  bottom: 0;\n  animation-delay: 0.8s;\n}\n\n.b-spin__dot-item:nth-child(4) {\n  bottom: 0;\n  left: 0;\n  animation-delay: 1.2s;\n}\n\n/* ── Tip ── */\n.b-spin__tip {\n  color: var(--b-spin-tip-color);\n  font-size: var(--b-spin-tip-font-size);\n  text-align: center;\n}\n\n/* ─────────────────────────────────────────────\n   Keyframes\n   ───────────────────────────────────────────── */\n@keyframes b-spin-rotate {\n  to {\n    transform: rotate(405deg);\n  }\n}\n\n@keyframes b-spin-bounce {\n  0%,\n  100% {\n    opacity: 0.3;\n    transform: scale(0.75);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Fade transition (fullscreen)\n   ───────────────────────────────────────────── */\n.b-spin-fade-enter-active,\n.b-spin-fade-leave-active {\n  transition: opacity var(--b-spin-transition-duration) ease;\n}\n\n.b-spin-fade-enter-from,\n.b-spin-fade-leave-to {\n  opacity: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-spin__dot {\n    animation: none;\n  }\n\n  .b-spin__dot-item {\n    animation: none;\n    opacity: 0.8;\n    transform: scale(1);\n  }\n\n  .b-spin-fade-enter-active,\n  .b-spin-fade-leave-active {\n    transition: none;\n  }\n\n  .b-spin__content {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/design-system206.js

@@ -1,6 +1,6 @@
 import e from "./design-system204.js";
 /* empty css                 */
-//#region src/components/BSplitter/BSplitter.vue
+//#region src/components/BSpin/BSpin.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/design-system206.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system206.js","names":[],"sources":["../src/components/BSplitter/BSplitter.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * BSplitter\n * ---------\n * A flex container that lets the user resize the size of its panels by\n * dragging the bars between them.\n *\n * Mirrors the AntD `<Splitter>` API. Children must be `<BSplitterPanel>`\n * components.\n */\nimport type { CSSProperties, PropType, VNode } from 'vue';\nimport { Fragment, camelize, computed, defineComponent, h, onBeforeUnmount, onMounted, provide, ref, useSlots, watch } from 'vue';\nimport { useComponentId } from '../../composables/useComponentId';\nimport BSplitterPanel from './BSplitterPanel.vue';\nimport {\n  BSplitterContextKey,\n  type BSplitterCollapsible,\n  type BSplitterOrientation,\n  type BSplitterPanelCollapsible,\n  type BSplitterPanelConfig,\n} from './types';\n\ndefineOptions({ name: 'BSplitter', inheritAttrs: false });\n\n/**\n * Internal helper component that renders an array of pre-built VNodes inside\n * a panel. Declared inline to keep the SFC self-contained.\n */\nconst VNodeRenderer = defineComponent({\n  name: 'BSplitterVNodeRenderer',\n  props: {\n    nodes: {\n      type: Array as PropType<VNode[] | undefined | null>,\n      default: () => [],\n    },\n  },\n  setup(props) {\n    return () => (props.nodes && props.nodes.length ? h(Fragment, null, props.nodes) : null);\n  },\n});\n\n//#region Props / Emits / Slots\nconst {\n  vertical = false,\n  orientation,\n  lazy = false,\n  collapsible: collapsibleConfig,\n} = defineProps<{\n  /** Convenience boolean for vertical orientation. @default false */\n  vertical?: boolean;\n  /** Layout orientation. Takes precedence over `vertical` when set. */\n  orientation?: BSplitterOrientation;\n  /** Whether resize is committed only on release (preview line during drag). @default false */\n  lazy?: boolean;\n  /** Splitter-level collapsible config (motion + custom icons). */\n  collapsible?: BSplitterCollapsible;\n}>();\n\nconst emit = defineEmits<{\n  /** Fires while the user drags. Reports current pixel sizes of every panel. */\n  resize: [sizes: number[]];\n  /** Fires when the user starts dragging. */\n  resizeStart: [sizes: number[]];\n  /** Fires when the user releases the dragger. */\n  resizeEnd: [sizes: number[]];\n  /** Fires when a panel is collapsed/uncollapsed via a collapse button. */\n  collapse: [collapsed: boolean[], sizes: number[]];\n  /** Fires when the user double-clicks a dragger. Receives the dragger index. */\n  draggerDoubleClick: [index: number];\n}>();\n\nconst slots = useSlots();\nconst { componentUID } = useComponentId();\n//#endregion\n\n//#region Orientation\nconst resolvedOrientation = computed<BSplitterOrientation>(() =>\n  orientation ?? (vertical ? 'vertical' : 'horizontal'),\n);\nconst isVertical = computed(() => resolvedOrientation.value === 'vertical');\n\nprovide(BSplitterContextKey, {\n  orientation: resolvedOrientation.value,\n});\n//#endregion\n\n//#region Slot inspection — extract panel configs from default slot\nfunction flattenChildren(children: VNode[]): VNode[] {\n  const out: VNode[] = [];\n  for (const vn of children) {\n    if (vn.type === Fragment && Array.isArray(vn.children)) {\n      out.push(...flattenChildren(vn.children as VNode[]));\n    } else {\n      out.push(vn);\n    }\n  }\n  return out;\n}\n\nconst panelConfigs = computed<BSplitterPanelConfig[]>(() => {\n  const raw = slots.default?.();\n  if (!raw) return [];\n  const flat = flattenChildren(raw);\n  const result: BSplitterPanelConfig[] = [];\n  let idx = 0;\n  for (const vnode of flat) {\n    if (vnode.type !== BSplitterPanel) continue;\n    // Normalize prop keys to camelCase — Vue keeps the original (often\n    // kebab-case) keys on the raw vnode.props.\n    const rawProps = (vnode.props ?? {}) as Record<string, unknown>;\n    const props: Record<string, unknown> = {};\n    for (const k in rawProps) props[camelize(k)] = rawProps[k];\n\n    const slotChildren = vnode.children as\n      | { default?: () => VNode | VNode[] }\n      | null\n      | undefined;\n    const rawDefault = slotChildren?.default?.();\n    const content: VNode[] | undefined = rawDefault\n      ? Array.isArray(rawDefault)\n        ? rawDefault\n        : [rawDefault]\n      : undefined;\n\n    let collapsible: BSplitterPanelCollapsible | false = false;\n    const c = props.collapsible;\n    if (c === true || c === '' || c === 'true') {\n      collapsible = { start: true, end: true };\n    } else if (c && typeof c === 'object') {\n      collapsible = c as BSplitterPanelCollapsible;\n    }\n\n    const resizableRaw = props.resizable;\n    const resizable =\n      resizableRaw === undefined\n        ? true\n        : resizableRaw === false || resizableRaw === 'false'\n          ? false\n          : true;\n\n    const destroyRaw = props.destroyOnHidden;\n    const destroyOnHidden =\n      destroyRaw === true || destroyRaw === '' || destroyRaw === 'true';\n\n    result.push({\n      index: idx++,\n      size: props.size as number | string | undefined,\n      defaultSize: props.defaultSize as number | string | undefined,\n      min: props.min as number | string | undefined,\n      max: props.max as number | string | undefined,\n      resizable,\n      collapsible,\n      destroyOnHidden,\n      content,\n    });\n  }\n  return result;\n});\n//#endregion\n\n//#region Sizing internals\nconst rootRef = ref<HTMLElement | null>(null);\nconst containerSize = ref(0);\nconst DRAGGER_PX = 6; // matches --b-splitter-dragger-size default\n\n/** Pixel sizes for each panel, kept in sync with container size + props. */\nconst sizesPx = ref<number[]>([]);\n/** Per-panel collapsed flag (true → forced size 0). */\nconst collapsedFlags = ref<boolean[]>([]);\n/** Per-panel sizes saved before collapsing (so we can restore). */\nconst savedSizes = ref<(number | null)[]>([]);\n/**\n * Per-panel record of how it was collapsed:\n * - 'start': collapsed via the `<` button on the dragger AFTER the panel\n *   (neighbor that absorbed = panel + 1)\n * - 'end':   collapsed via the `>` button on the dragger BEFORE the panel\n *   (neighbor that absorbed = panel - 1)\n * Used to decide which dragger should expose the restore button.\n */\nconst collapsedDirection = ref<('start' | 'end' | null)[]>([]);\n\nfunction parseLength(\n  value: number | string | undefined,\n  total: number,\n  fallback = NaN,\n): number {\n  if (value === undefined || value === null) return fallback;\n  if (typeof value === 'number') return value;\n  const s = value.trim();\n  if (s.endsWith('%')) {\n    const pct = parseFloat(s);\n    return isFinite(pct) ? (pct / 100) * total : fallback;\n  }\n  if (s.endsWith('px')) return parseFloat(s);\n  const n = parseFloat(s);\n  return isFinite(n) ? n : fallback;\n}\n\nfunction availableSize(): number {\n  const total = containerSize.value;\n  const dividers = Math.max(panelConfigs.value.length - 1, 0) * DRAGGER_PX;\n  return Math.max(total - dividers, 0);\n}\n\nfunction computeInitialSizes(): number[] {\n  const panels = panelConfigs.value;\n  const avail = availableSize();\n  if (panels.length === 0 || avail <= 0) return panels.map(() => 0);\n\n  const result: number[] = Array.from({ length: panels.length }, () => NaN);\n  let assigned = 0;\n  // First pass: explicit `size` and `defaultSize`.\n  panels.forEach((p, i) => {\n    const v = parseLength(p.size ?? p.defaultSize, avail);\n    if (!isNaN(v)) {\n      result[i] = v;\n      assigned += v;\n    }\n  });\n  // Distribute remainder evenly among the rest.\n  const remainingIdx = result.map((v, i) => (isNaN(v) ? i : -1)).filter((i) => i >= 0);\n  if (remainingIdx.length > 0) {\n    const remainder = Math.max(avail - assigned, 0);\n    const each = remainder / remainingIdx.length;\n    remainingIdx.forEach((i) => (result[i] = each));\n  }\n  // Clamp to min/max and re-normalize so they sum to avail.\n  return clampAndNormalize(result, avail);\n}\n\nfunction clampAndNormalize(input: number[], avail: number): number[] {\n  const panels = panelConfigs.value;\n  const out = input.map((v, i) => {\n    const min = parseLength(panels[i]?.min, avail, 0);\n    const max = parseLength(panels[i]?.max, avail, Infinity);\n    return Math.min(Math.max(v, min), max);\n  });\n  // Normalize to fit avail.\n  const sum = out.reduce((a, b) => a + b, 0);\n  if (sum === 0 || avail === 0) return out;\n  const scale = avail / sum;\n  return out.map((v) => v * scale);\n}\n\nfunction syncFromProps() {\n  const panels = panelConfigs.value;\n  // Ensure collapsedFlags / savedSizes have correct length.\n  if (collapsedFlags.value.length !== panels.length) {\n    collapsedFlags.value = panels.map(() => false);\n    savedSizes.value = panels.map(() => null);\n    collapsedDirection.value = panels.map(() => null);\n  }\n  // Re-derive sizes when container or panel configs change.\n  sizesPx.value = computeInitialSizes();\n}\n\n/**\n * Inspect controlled `size` props — when provided, reflect them into sizesPx.\n * AntD-style: when `size` is set, it acts as a controlled value.\n */\nwatch(\n  () => panelConfigs.value.map((p) => `${p.size ?? ''}`).join('|'),\n  () => {\n    if (containerSize.value > 0) syncFromProps();\n  },\n);\n\nwatch(\n  () => panelConfigs.value.length,\n  () => {\n    if (containerSize.value > 0) syncFromProps();\n  },\n);\n//#endregion\n\n//#region ResizeObserver — track container size\nlet resizeObserver: ResizeObserver | null = null;\n\nonMounted(() => {\n  if (!rootRef.value) return;\n  measureContainer();\n  syncFromProps();\n  if (typeof ResizeObserver !== 'undefined') {\n    resizeObserver = new ResizeObserver(() => {\n      const prev = containerSize.value;\n      measureContainer();\n      // Re-scale sizes proportionally on container resize.\n      if (prev > 0 && containerSize.value > 0 && sizesPx.value.length > 0) {\n        const ratio = availableSize() / Math.max(prev - DRAGGER_PX * (sizesPx.value.length - 1), 1);\n        sizesPx.value = clampAndNormalize(\n          sizesPx.value.map((v) => v * ratio),\n          availableSize(),\n        );\n      } else {\n        syncFromProps();\n      }\n    });\n    resizeObserver.observe(rootRef.value);\n  }\n});\n\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect();\n  resizeObserver = null;\n  removeDragListeners();\n});\n\nfunction measureContainer() {\n  if (!rootRef.value) return;\n  containerSize.value = isVertical.value\n    ? rootRef.value.clientHeight\n    : rootRef.value.clientWidth;\n}\n//#endregion\n\n//#region Dragging\ninterface DragState {\n  draggerIndex: number;\n  startCoord: number;\n  startSizes: number[];\n  /** In lazy mode, the preview offset (pixels relative to original divider). */\n  previewDelta: number;\n}\nconst dragState = ref<DragState | null>(null);\nconst lazyPreviewDelta = ref<number | null>(null);\n\nfunction getCoord(e: MouseEvent | TouchEvent): number {\n  if ('touches' in e) {\n    const t = e.touches[0] ?? e.changedTouches[0];\n    return isVertical.value ? t.clientY : t.clientX;\n  }\n  return isVertical.value ? e.clientY : e.clientX;\n}\n\nfunction onDraggerPointerDown(index: number, e: MouseEvent | TouchEvent) {\n  if (!isResizable(index)) return;\n  e.preventDefault();\n  dragState.value = {\n    draggerIndex: index,\n    startCoord: getCoord(e),\n    startSizes: [...sizesPx.value],\n    previewDelta: 0,\n  };\n  lazyPreviewDelta.value = lazy ? 0 : null;\n  emit('resizeStart', [...sizesPx.value]);\n\n  document.addEventListener('mousemove', onDragMove);\n  document.addEventListener('mouseup', onDragEnd);\n  document.addEventListener('touchmove', onDragMove, { passive: false });\n  document.addEventListener('touchend', onDragEnd);\n}\n\nfunction applyDelta(startSizes: number[], index: number, delta: number): number[] {\n  const panels = panelConfigs.value;\n  const avail = availableSize();\n  const next = [...startSizes];\n  const a = index;\n  const b = index + 1;\n\n  const aMin = parseLength(panels[a]?.min, avail, 0);\n  const aMax = parseLength(panels[a]?.max, avail, Infinity);\n  const bMin = parseLength(panels[b]?.min, avail, 0);\n  const bMax = parseLength(panels[b]?.max, avail, Infinity);\n\n  let newA = next[a] + delta;\n  let newB = next[b] - delta;\n\n  // Clamp so neither side violates its constraints.\n  if (newA < aMin) {\n    newB -= aMin - newA;\n    newA = aMin;\n  }\n  if (newA > aMax) {\n    newB += newA - aMax;\n    newA = aMax;\n  }\n  if (newB < bMin) {\n    newA -= bMin - newB;\n    newB = bMin;\n  }\n  if (newB > bMax) {\n    newA += newB - bMax;\n    newB = bMax;\n  }\n  // Final clamp on `a` again in case `b` clamping pushed it out.\n  newA = Math.min(Math.max(newA, aMin), aMax);\n  newB = Math.min(Math.max(newB, bMin), bMax);\n  next[a] = newA;\n  next[b] = newB;\n  return next;\n}\n\nfunction onDragMove(e: MouseEvent | TouchEvent) {\n  if (!dragState.value) return;\n  if ('touches' in e) e.preventDefault();\n  const coord = getCoord(e);\n  const delta = coord - dragState.value.startCoord;\n\n  if (lazy) {\n    // Update preview indicator only.\n    lazyPreviewDelta.value = delta;\n    return;\n  }\n  const next = applyDelta(dragState.value.startSizes, dragState.value.draggerIndex, delta);\n  sizesPx.value = next;\n  emit('resize', [...next]);\n}\n\nfunction onDragEnd(e: MouseEvent | TouchEvent) {\n  if (!dragState.value) return;\n  const coord = 'changedTouches' in e ? getCoord(e) : getCoord(e);\n  const delta = coord - dragState.value.startCoord;\n\n  if (lazy) {\n    const next = applyDelta(dragState.value.startSizes, dragState.value.draggerIndex, delta);\n    sizesPx.value = next;\n    emit('resize', [...next]);\n  }\n  emit('resizeEnd', [...sizesPx.value]);\n  dragState.value = null;\n  lazyPreviewDelta.value = null;\n  removeDragListeners();\n}\n\nfunction removeDragListeners() {\n  document.removeEventListener('mousemove', onDragMove);\n  document.removeEventListener('mouseup', onDragEnd);\n  document.removeEventListener('touchmove', onDragMove);\n  document.removeEventListener('touchend', onDragEnd);\n}\n\nfunction isResizable(draggerIndex: number): boolean {\n  const a = panelConfigs.value[draggerIndex];\n  const b = panelConfigs.value[draggerIndex + 1];\n  return !!(a?.resizable && b?.resizable);\n}\n\nfunction onDraggerDoubleClick(i: number) {\n  emit('draggerDoubleClick', i);\n}\n//#endregion\n\n//#region Keyboard\nconst KEY_STEP = 10;\n\nfunction onDraggerKeyDown(index: number, e: KeyboardEvent) {\n  if (!isResizable(index)) return;\n  let delta = 0;\n  switch (e.key) {\n    case 'ArrowLeft':\n      delta = isVertical.value ? 0 : -KEY_STEP;\n      break;\n    case 'ArrowRight':\n      delta = isVertical.value ? 0 : KEY_STEP;\n      break;\n    case 'ArrowUp':\n      delta = isVertical.value ? -KEY_STEP : 0;\n      break;\n    case 'ArrowDown':\n      delta = isVertical.value ? KEY_STEP : 0;\n      break;\n    case 'Home': {\n      // collapse the panel before the dragger to its minimum.\n      const avail = availableSize();\n      const a = panelConfigs.value[index];\n      delta = -(sizesPx.value[index] - parseLength(a?.min, avail, 0));\n      break;\n    }\n    case 'End': {\n      const avail = availableSize();\n      const b = panelConfigs.value[index + 1];\n      delta = sizesPx.value[index + 1] - parseLength(b?.min, avail, 0);\n      break;\n    }\n    case 'Enter':\n    case ' ':\n      // Toggle: collapse the smaller adjacent panel toward the larger one.\n      e.preventDefault();\n      toggleCollapseAtDragger(index);\n      return;\n    default:\n      return;\n  }\n  if (delta === 0) return;\n  e.preventDefault();\n  emit('resizeStart', [...sizesPx.value]);\n  const next = applyDelta(sizesPx.value, index, delta);\n  sizesPx.value = next;\n  emit('resize', [...next]);\n  emit('resizeEnd', [...next]);\n}\n//#endregion\n\n//#region Collapse / Expand\nfunction toggleCollapseAtDragger(index: number) {\n  // Default keyboard behaviour: collapse the start side if it has more room than 0.\n  const a = panelConfigs.value[index];\n  const b = panelConfigs.value[index + 1];\n  if (a?.collapsible) collapsePanel(index, 'start');\n  else if (b?.collapsible) collapsePanel(index + 1, 'end');\n}\n\n/**\n * Collapse a panel toward the previous (`'start'`) or next (`'end'`) panel.\n * If already collapsed, restore the saved size.\n */\nfunction collapsePanel(panelIndex: number, direction: 'start' | 'end') {\n  const panel = panelConfigs.value[panelIndex];\n  if (!panel) return;\n  const avail = availableSize();\n  const sizes = [...sizesPx.value];\n\n  // The neighbor that absorbs / returns the collapsed panel's space.\n  // - direction='start': panel collapses toward start ⇒ space goes to panelIndex + 1\n  // - direction='end':   panel collapses toward end   ⇒ space goes to panelIndex - 1\n  const neighbor = direction === 'start' ? panelIndex + 1 : panelIndex - 1;\n\n  if (collapsedFlags.value[panelIndex]) {\n    // Restore: take saved size back from the same neighbor that absorbed it.\n    const saved = savedSizes.value[panelIndex] ?? avail / panelConfigs.value.length;\n    if (neighbor >= 0 && neighbor < sizes.length) {\n      const give = Math.min(saved, sizes[neighbor]);\n      sizes[panelIndex] = give;\n      sizes[neighbor] -= give;\n    } else {\n      sizes[panelIndex] = saved;\n    }\n    collapsedFlags.value = collapsedFlags.value.map((v, i) => (i === panelIndex ? false : v));\n    savedSizes.value = savedSizes.value.map((v, i) => (i === panelIndex ? null : v));\n    collapsedDirection.value = collapsedDirection.value.map((v, i) =>\n      i === panelIndex ? null : v,\n    );\n  } else {\n    // Collapse: dump current size into the neighbor.\n    savedSizes.value = savedSizes.value.map((v, i) =>\n      i === panelIndex ? sizes[panelIndex] : v,\n    );\n    if (neighbor >= 0 && neighbor < sizes.length) {\n      sizes[neighbor] += sizes[panelIndex];\n    }\n    sizes[panelIndex] = 0;\n    collapsedFlags.value = collapsedFlags.value.map((v, i) => (i === panelIndex ? true : v));\n    collapsedDirection.value = collapsedDirection.value.map((v, i) =>\n      i === panelIndex ? direction : v,\n    );\n  }\n  sizesPx.value = sizes;\n  emit('resize', [...sizes]);\n  emit('resizeEnd', [...sizes]);\n  emit('collapse', [...collapsedFlags.value], [...sizes]);\n}\n\n/**\n * Helpers for the two collapse buttons rendered on each dragger between\n * panel `i` (prev) and panel `i + 1` (next). Mirrors AntD's logic:\n * the START (`<`) button can either collapse prev or expand a previously-\n * collapsed next; the END (`>`) button is symmetric.\n */\nfunction startBtnPanelCfg(i: number) {\n  return panelConfigs.value[i]?.collapsible\n    ? (panelConfigs.value[i].collapsible as BSplitterPanelCollapsible)\n    : null;\n}\nfunction endBtnPanelCfg(i: number) {\n  return panelConfigs.value[i + 1]?.collapsible\n    ? (panelConfigs.value[i + 1].collapsible as BSplitterPanelCollapsible)\n    : null;\n}\nfunction canShowStartBtn(i: number): boolean {\n  const sizes = sizesPx.value;\n  const prevSize = sizes[i] ?? 0;\n  const nextSize = sizes[i + 1] ?? 0;\n  // Mode A — collapse prev (panel i).\n  const prevCfg = startBtnPanelCfg(i);\n  const collapsePrev = !!prevCfg?.start && prevSize > 0 && nextSize > 0;\n  // Mode B — restore next (panel i + 1) if it was collapsed via THIS dragger.\n  const restoreNext =\n    !!collapsedFlags.value[i + 1] &&\n    collapsedDirection.value[i + 1] === 'end' &&\n    prevSize > 0;\n  return collapsePrev || restoreNext;\n}\nfunction canShowEndBtn(i: number): boolean {\n  const sizes = sizesPx.value;\n  const prevSize = sizes[i] ?? 0;\n  const nextSize = sizes[i + 1] ?? 0;\n  // Mode A — collapse next (panel i + 1).\n  const nextCfg = endBtnPanelCfg(i);\n  const collapseNext = !!nextCfg?.end && nextSize > 0 && prevSize > 0;\n  // Mode B — restore prev (panel i) if it was collapsed via THIS dragger.\n  const restorePrev =\n    !!collapsedFlags.value[i] &&\n    collapsedDirection.value[i] === 'start' &&\n    nextSize > 0;\n  return collapseNext || restorePrev;\n}\nfunction onClickStartBtn(i: number) {\n  if (\n    collapsedFlags.value[i + 1] &&\n    collapsedDirection.value[i + 1] === 'end'\n  ) {\n    // Restore next, taking space back from prev.\n    collapsePanel(i + 1, 'end');\n  } else {\n    collapsePanel(i, 'start');\n  }\n}\nfunction onClickEndBtn(i: number) {\n  if (collapsedFlags.value[i] && collapsedDirection.value[i] === 'start') {\n    // Restore prev, taking space back from next.\n    collapsePanel(i, 'start');\n  } else {\n    collapsePanel(i + 1, 'end');\n  }\n}\nfunction startBtnAriaLabel(i: number): string {\n  if (\n    collapsedFlags.value[i + 1] &&\n    collapsedDirection.value[i + 1] === 'end'\n  ) {\n    return `Expand panel ${i + 2}`;\n  }\n  return `Collapse panel ${i + 1}`;\n}\nfunction endBtnAriaLabel(i: number): string {\n  if (collapsedFlags.value[i] && collapsedDirection.value[i] === 'start') {\n    return `Expand panel ${i + 1}`;\n  }\n  return `Collapse panel ${i + 2}`;\n}\n//#endregion\n\n//#region Style helpers\nconst motion = computed(() => collapsibleConfig?.motion !== false);\n\nfunction panelStyle(i: number): CSSProperties {\n  const sz = sizesPx.value[i] ?? 0;\n  const sizeStr = `${sz}px`;\n  return isVertical.value\n    ? { height: sizeStr, flex: `0 0 ${sizeStr}` }\n    : { width: sizeStr, flex: `0 0 ${sizeStr}` };\n}\n\nfunction draggerAriaValueNow(i: number): number {\n  const avail = availableSize();\n  if (avail === 0) return 0;\n  const accumulated = sizesPx.value.slice(0, i + 1).reduce((a, b) => a + b, 0);\n  return Math.round((accumulated / avail) * 100);\n}\n\nconst lazyIndicatorStyle = computed<CSSProperties | undefined>(() => {\n  if (!lazy || !dragState.value || lazyPreviewDelta.value === null) return undefined;\n  const idx = dragState.value.draggerIndex;\n  const before = dragState.value.startSizes.slice(0, idx + 1).reduce((a, b) => a + b, 0);\n  const offset = before + idx * DRAGGER_PX + lazyPreviewDelta.value;\n  return isVertical.value ? { top: `${offset}px` } : { left: `${offset}px` };\n});\n//#endregion\n\n//#region Expose\nfunction getSizes(): number[] {\n  return [...sizesPx.value];\n}\nfunction setSizes(next: number[]) {\n  if (next.length !== sizesPx.value.length) return;\n  sizesPx.value = clampAndNormalize(next, availableSize());\n  emit('resize', [...sizesPx.value]);\n}\ndefineExpose({ getSizes, setSizes });\n//#endregion\n\n//#region Render-time per-panel render helper\n/**\n * Returns the panel's slot content as VNodes, honoring `destroyOnHidden`.\n */\nfunction panelContent(panel: BSplitterPanelConfig, i: number): VNode[] | null {\n  const collapsed = (sizesPx.value[i] ?? 0) <= 0;\n  if (panel.destroyOnHidden && collapsed) return null;\n  return panel.content ?? null;\n}\n//#endregion\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    class=\"b-splitter\"\n    :class=\"{\n      'b-splitter--horizontal': !isVertical,\n      'b-splitter--vertical': isVertical,\n      'b-splitter--lazy': lazy,\n      'b-splitter--motion': motion,\n      'b-splitter--dragging': dragState !== null,\n    }\"\n    :data-orientation=\"resolvedOrientation\"\n  >\n    <template v-for=\"(panel, i) in panelConfigs\" :key=\"`panel-${componentUID}-${i}`\">\n      <div\n        :id=\"`b-splitter-${componentUID}-panel-${i}`\"\n        class=\"b-splitter__panel\"\n        :class=\"{ 'b-splitter__panel--collapsed': (sizesPx[i] ?? 0) <= 0 }\"\n        :style=\"panelStyle(i)\"\n        role=\"group\"\n      >\n        <component :is=\"VNodeRenderer\" :nodes=\"panelContent(panel, i)\" />\n      </div>\n\n      <!-- Divider wrapper holds the dragger + collapse buttons as siblings\n           so we don't nest interactive controls (a11y: nested-interactive). -->\n      <div\n        v-if=\"i < panelConfigs.length - 1\"\n        class=\"b-splitter__divider\"\n        :class=\"{ 'b-splitter__divider--disabled': !isResizable(i) }\"\n      >\n        <div\n          class=\"b-splitter__dragger\"\n          :class=\"{\n            'b-splitter__dragger--disabled': !isResizable(i),\n            'b-splitter__dragger--active': dragState && dragState.draggerIndex === i,\n          }\"\n          role=\"separator\"\n          :tabindex=\"isResizable(i) ? 0 : -1\"\n          :aria-orientation=\"isVertical ? 'horizontal' : 'vertical'\"\n          :aria-controls=\"`b-splitter-${componentUID}-panel-${i} b-splitter-${componentUID}-panel-${i + 1}`\"\n          :aria-valuenow=\"draggerAriaValueNow(i)\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          :aria-disabled=\"!isResizable(i) || undefined\"\n          :aria-label=\"`Resize panel ${i + 1}`\"\n          @mousedown=\"onDraggerPointerDown(i, $event)\"\n          @touchstart=\"onDraggerPointerDown(i, $event)\"\n          @keydown=\"onDraggerKeyDown(i, $event)\"\n          @dblclick=\"onDraggerDoubleClick(i)\"\n        >\n          <span aria-hidden=\"true\" class=\"b-splitter__handle\">\n            <slot name=\"draggerIcon\" />\n          </span>\n        </div>\n\n        <!--\n          Collapse \"start\" button (LEFT half of dragger). Two modes:\n          - Collapse prev (panel i)        when prev is visible.\n          - Restore next  (panel i + 1)    when next was collapsed via the `>`\n                                           button on THIS dragger.\n        -->\n        <button\n          v-if=\"canShowStartBtn(i)\"\n          type=\"button\"\n          class=\"b-splitter__collapse-btn b-splitter__collapse-btn--start\"\n          :aria-label=\"startBtnAriaLabel(i)\"\n          :aria-expanded=\"\n            collapsedFlags[i + 1] && collapsedDirection[i + 1] === 'end'\n              ? false\n              : true\n          \"\n          @mousedown.stop\n          @touchstart.stop\n          @click.stop=\"onClickStartBtn(i)\"\n        >\n          <slot name=\"collapseIconStart\">\n            <svg\n              aria-hidden=\"true\"\n              class=\"b-splitter__chevron b-splitter__chevron--start\"\n              viewBox=\"0 0 8 8\"\n              width=\"8\"\n              height=\"8\"\n            >\n              <polyline\n                points=\"5,1 2,4 5,7\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </slot>\n        </button>\n\n        <!--\n          Collapse \"end\" button (RIGHT half of dragger). Two modes:\n          - Collapse next (panel i + 1)    when next is visible.\n          - Restore prev  (panel i)        when prev was collapsed via the `<`\n                                           button on THIS dragger.\n        -->\n        <button\n          v-if=\"canShowEndBtn(i)\"\n          type=\"button\"\n          class=\"b-splitter__collapse-btn b-splitter__collapse-btn--end\"\n          :aria-label=\"endBtnAriaLabel(i)\"\n          :aria-expanded=\"\n            collapsedFlags[i] && collapsedDirection[i] === 'start'\n              ? false\n              : true\n          \"\n          @mousedown.stop\n          @touchstart.stop\n          @click.stop=\"onClickEndBtn(i)\"\n        >\n          <slot name=\"collapseIconEnd\">\n            <svg\n              aria-hidden=\"true\"\n              class=\"b-splitter__chevron b-splitter__chevron--end\"\n              viewBox=\"0 0 8 8\"\n              width=\"8\"\n              height=\"8\"\n            >\n              <polyline\n                points=\"3,1 6,4 3,7\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </slot>\n        </button>\n      </div>\n    </template>\n\n    <!-- Lazy preview indicator -->\n    <div\n      v-if=\"lazy && dragState && lazyPreviewDelta !== null\"\n      class=\"b-splitter__lazy-indicator\"\n      :style=\"lazyIndicatorStyle\"\n      aria-hidden=\"true\"\n    />\n  </div>\n</template>\n\n<style>\n.b-splitter {\n  /* Component design tokens (AntD parity) */\n  --b-splitter-split-bar-size: 2px;\n  --b-splitter-dragger-size: 6px;\n  --b-splitter-dragger-draggable-size: 20px;\n  --b-splitter-bg: oklch(94% 0 0); /* colorFill */\n  --b-splitter-bg-hover: oklch(85% 0 0); /* colorFillSecondary */\n  --b-splitter-bg-active: oklch(60% 0.18 264); /* colorPrimary */\n  --b-splitter-text-color: oklch(40% 0 0);\n  --b-splitter-color-bg-elevated: #fff;\n  --b-splitter-collapse-bar-bg: oklch(94% 0 0);\n  --b-splitter-collapse-bar-bg-hover: oklch(60% 0.18 264);\n  --b-splitter-collapse-icon-color: oklch(60% 0 0);\n  --b-splitter-collapse-icon-color-hover: #fff;\n  --b-splitter-motion-duration: 0.2s;\n  --b-splitter-z-index-base: 1;\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  min-width: 0;\n}\n\n.b-splitter--horizontal {\n  flex-direction: row;\n}\n.b-splitter--vertical {\n  flex-direction: column;\n}\n\n/* Panel */\n.b-splitter__panel {\n  position: relative;\n  overflow: auto;\n  min-width: 0;\n  min-height: 0;\n  box-sizing: border-box;\n}\n.b-splitter--motion .b-splitter__panel {\n  transition:\n    width var(--b-splitter-motion-duration) ease,\n    height var(--b-splitter-motion-duration) ease,\n    flex-basis var(--b-splitter-motion-duration) ease;\n}\n.b-splitter--dragging .b-splitter__panel {\n  transition: none;\n}\n.b-splitter__panel--collapsed {\n  overflow: hidden;\n}\n\n/* Divider — non-interactive wrapper holding the dragger + collapse buttons.\n   It is the flex item that occupies the dragger size; the dragger and the\n   collapse buttons sit inside as siblings (avoids nested-interactive a11y\n   violation). */\n.b-splitter__divider {\n  position: relative;\n  flex: 0 0 var(--b-splitter-dragger-size);\n  align-self: stretch;\n  box-sizing: border-box;\n  z-index: var(--b-splitter-z-index-base);\n}\n.b-splitter--horizontal .b-splitter__divider {\n  width: var(--b-splitter-dragger-size);\n  height: 100%;\n}\n.b-splitter--vertical .b-splitter__divider {\n  width: 100%;\n  height: var(--b-splitter-dragger-size);\n}\n\n/* Dragger — fills the divider and is the focusable separator. */\n.b-splitter__dragger {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  outline: none;\n  box-sizing: border-box;\n  user-select: none;\n  touch-action: none;\n}\n.b-splitter--horizontal .b-splitter__dragger {\n  cursor: col-resize;\n}\n.b-splitter--vertical .b-splitter__dragger {\n  cursor: row-resize;\n}\n.b-splitter__dragger--disabled {\n  cursor: default;\n}\n\n/* Visible bar via ::before — sits in centre of dragger */\n.b-splitter__dragger::before {\n  content: '';\n  position: absolute;\n  background: var(--b-splitter-bg);\n  border-radius: 2px;\n  transition: background var(--b-splitter-motion-duration) ease;\n}\n.b-splitter--horizontal .b-splitter__dragger::before {\n  top: 0;\n  bottom: 0;\n  left: calc(50% - var(--b-splitter-split-bar-size) / 2);\n  width: var(--b-splitter-split-bar-size);\n}\n.b-splitter--vertical .b-splitter__dragger::before {\n  left: 0;\n  right: 0;\n  top: calc(50% - var(--b-splitter-split-bar-size) / 2);\n  height: var(--b-splitter-split-bar-size);\n}\n.b-splitter__dragger:not(.b-splitter__dragger--disabled):hover::before,\n.b-splitter__dragger:focus-visible::before,\n.b-splitter__dragger--active::before {\n  background: var(--b-splitter-bg-active);\n}\n\n/* Visible draggable indicator (grip) — `splitBarDraggableSize` long, slightly\n   thicker than the split bar to give the user a clear hit-target hint. */\n.b-splitter__dragger::after {\n  content: '';\n  position: absolute;\n  background: var(--b-splitter-bg);\n  border-radius: 2px;\n  pointer-events: none;\n  transition: background var(--b-splitter-motion-duration) ease;\n}\n.b-splitter--horizontal .b-splitter__dragger::after {\n  width: 4px;\n  height: var(--b-splitter-dragger-draggable-size);\n  top: calc(50% - var(--b-splitter-dragger-draggable-size) / 2);\n  left: calc(50% - 2px);\n}\n.b-splitter--vertical .b-splitter__dragger::after {\n  width: var(--b-splitter-dragger-draggable-size);\n  height: 4px;\n  left: calc(50% - var(--b-splitter-dragger-draggable-size) / 2);\n  top: calc(50% - 2px);\n}\n.b-splitter__dragger--disabled::after {\n  display: none;\n}\n.b-splitter__dragger:not(.b-splitter__dragger--disabled):hover::after,\n.b-splitter__dragger:focus-visible::after,\n.b-splitter__dragger--active::after {\n  background: var(--b-splitter-bg-active);\n}\n\n.b-splitter__dragger:focus-visible {\n  outline: 2px solid var(--b-splitter-bg-active);\n  outline-offset: -2px;\n}\n\n/* Drag handle (decorative) */\n.b-splitter__handle {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n/* Collapse button */\n.b-splitter__collapse-btn {\n  position: absolute;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 18px;\n  padding: 0;\n  border: none;\n  border-radius: 2px;\n  background: var(--b-splitter-collapse-bar-bg);\n  color: var(--b-splitter-collapse-icon-color);\n  cursor: pointer;\n  transition:\n    background var(--b-splitter-motion-duration) ease,\n    color var(--b-splitter-motion-duration) ease;\n  z-index: calc(var(--b-splitter-z-index-base) + 1);\n}\n.b-splitter__collapse-btn:hover,\n.b-splitter__collapse-btn:focus-visible {\n  background: var(--b-splitter-collapse-bar-bg-hover);\n  color: var(--b-splitter-collapse-icon-color-hover);\n}\n.b-splitter__collapse-btn:focus-visible {\n  outline: 2px solid var(--b-splitter-bg-active);\n  outline-offset: 1px;\n}\n.b-splitter--horizontal .b-splitter__collapse-btn--start,\n.b-splitter--horizontal .b-splitter__collapse-btn--end {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.b-splitter--horizontal .b-splitter__collapse-btn--start {\n  right: calc(50% + 2px);\n}\n.b-splitter--horizontal .b-splitter__collapse-btn--end {\n  left: calc(50% + 2px);\n}\n.b-splitter--vertical .b-splitter__collapse-btn {\n  width: 18px;\n  height: 14px;\n}\n.b-splitter--vertical .b-splitter__collapse-btn--start,\n.b-splitter--vertical .b-splitter__collapse-btn--end {\n  left: 50%;\n  transform: translateX(-50%);\n}\n.b-splitter--vertical .b-splitter__collapse-btn--start {\n  bottom: calc(50% + 2px);\n}\n.b-splitter--vertical .b-splitter__collapse-btn--end {\n  top: calc(50% + 2px);\n}\n\n/* Chevron icon (SVG) */\n.b-splitter__chevron {\n  display: block;\n  width: 8px;\n  height: 8px;\n}\n.b-splitter--vertical .b-splitter__chevron--start {\n  transform: rotate(90deg);\n}\n.b-splitter--vertical .b-splitter__chevron--end {\n  transform: rotate(-90deg);\n}\n\n/* Lazy preview indicator */\n.b-splitter__lazy-indicator {\n  position: absolute;\n  background: var(--b-splitter-bg-active);\n  pointer-events: none;\n  z-index: calc(var(--b-splitter-z-index-base) + 2);\n}\n.b-splitter--horizontal .b-splitter__lazy-indicator {\n  top: 0;\n  bottom: 0;\n  width: var(--b-splitter-split-bar-size);\n}\n.b-splitter--vertical .b-splitter__lazy-indicator {\n  left: 0;\n  right: 0;\n  height: var(--b-splitter-split-bar-size);\n}\n\n/* Dark mode — reassign tokens, no new vars */\n[data-prefers-color='dark'] .b-splitter {\n  --b-splitter-bg: oklch(30% 0 0);\n  --b-splitter-bg-hover: oklch(40% 0 0);\n  --b-splitter-bg-active: oklch(70% 0.18 264);\n  --b-splitter-text-color: oklch(85% 0 0);\n  --b-splitter-color-bg-elevated: oklch(20% 0 0);\n  --b-splitter-collapse-bar-bg: oklch(30% 0 0);\n  --b-splitter-collapse-bar-bg-hover: oklch(70% 0.18 264);\n  --b-splitter-collapse-icon-color: oklch(70% 0 0);\n  --b-splitter-collapse-icon-color-hover: oklch(15% 0 0);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-splitter {\n    --b-splitter-bg: oklch(30% 0 0);\n    --b-splitter-bg-hover: oklch(40% 0 0);\n    --b-splitter-bg-active: oklch(70% 0.18 264);\n    --b-splitter-text-color: oklch(85% 0 0);\n    --b-splitter-color-bg-elevated: oklch(20% 0 0);\n    --b-splitter-collapse-bar-bg: oklch(30% 0 0);\n    --b-splitter-collapse-bar-bg-hover: oklch(70% 0.18 264);\n    --b-splitter-collapse-icon-color: oklch(70% 0 0);\n    --b-splitter-collapse-icon-color-hover: oklch(15% 0 0);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-splitter__panel,\n  .b-splitter__dragger::before,\n  .b-splitter__collapse-btn {\n    transition: none !important;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system206.js","names":[],"sources":["../src/components/BSpin/BSpin.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BSpinSize } from '@/types.ts';\nimport { computed, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  spinning = true,\n  size = BSpinSize.Default,\n  tip = '',\n  delay = 0,\n  fullscreen = false,\n} = defineProps<{\n  /**\n   * Whether the Spin indicator is active.\n   * @default true\n   */\n  spinning?: boolean;\n  /**\n   * Size of the spinner - small, default, or large.\n   * @default 'default'\n   */\n  size?: `${BSpinSize}`;\n  /**\n   * Descriptive text displayed below the spinning indicator.\n   */\n  tip?: string;\n  /**\n   * Delay in milliseconds before the spinner shows after `spinning` becomes true.\n   * Prevents flicker for fast operations. Does not apply to hiding.\n   * @default 0\n   */\n  delay?: number;\n  /**\n   * Display as fullscreen overlay (fixed, covers the entire viewport).\n   * @default false\n   */\n  fullscreen?: boolean;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\nconst slots = defineSlots<{\n  /** Content to wrap with a spinning overlay. */\n  default?(): unknown;\n  /** Custom spinner indicator (replaces the default dots). */\n  indicator?(): unknown;\n  /** Custom tip content (replaces the `tip` prop text). */\n  tip?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst tipId = useId();\n\n/** Delayed spinning state - respects `delay` prop. */\nconst shouldShow = ref(false);\nlet delayTimer: ReturnType<typeof setTimeout> | undefined;\n\nfunction applySpinning(value: boolean) {\n  clearTimeout(delayTimer);\n  if (value && delay > 0) {\n    delayTimer = setTimeout(() => {\n      shouldShow.value = true;\n    }, delay);\n  } else {\n    shouldShow.value = value;\n  }\n}\n\n// Run immediately on mount, then watch for changes\napplySpinning(spinning);\n\nwatch(() => spinning, applySpinning);\n\n// ─────────────────────────────────────────────\n// Derived state\n// ─────────────────────────────────────────────\nconst isNested = computed(() => Boolean(slots.default));\nconst hasTip = computed(() => Boolean(tip || slots.tip));\n\nconst rootClasses = computed(() => [\n  'b-spin',\n  `b-spin--${size}`,\n  {\n    'b-spin--spinning': shouldShow.value,\n    'b-spin--nested': isNested.value,\n    'b-spin--has-tip': hasTip.value,\n    'b-spin--fullscreen': fullscreen,\n  },\n]);\n</script>\n\n<template>\n  <!-- Fullscreen mode: uses Teleport to <body> -->\n  <Teleport v-if=\"fullscreen\" to=\"body\">\n    <Transition name=\"b-spin-fade\">\n      <div\n        v-if=\"shouldShow\"\n        class=\"b-spin b-spin--fullscreen\"\n        :class=\"[`b-spin--${size}`, { 'b-spin--spinning': shouldShow, 'b-spin--has-tip': hasTip }]\"\n        role=\"status\"\n        :aria-label=\"hasTip ? undefined : 'Loading'\"\n        :aria-describedby=\"hasTip ? tipId : undefined\"\n      >\n        <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n          <slot name=\"indicator\">\n            <span class=\"b-spin__dot\">\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n              <i class=\"b-spin__dot-item\" />\n            </span>\n          </slot>\n        </div>\n        <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n          <slot name=\"tip\">{{ tip }}</slot>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n\n  <!-- Standalone (no children) -->\n  <template v-else-if=\"!isNested\">\n    <div\n      v-if=\"shouldShow\"\n      :class=\"rootClasses\"\n      role=\"status\"\n      :aria-label=\"hasTip ? undefined : 'Loading'\"\n      :aria-describedby=\"hasTip ? tipId : undefined\"\n    >\n      <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\">\n          <span class=\"b-spin__dot\">\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n          </span>\n        </slot>\n      </div>\n      <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n        <slot name=\"tip\">{{ tip }}</slot>\n      </div>\n    </div>\n  </template>\n\n  <!-- Nested (wraps children) -->\n  <div v-else :class=\"rootClasses\">\n    <div\n      v-if=\"shouldShow\"\n      class=\"b-spin__overlay-container\"\n      role=\"status\"\n      :aria-label=\"hasTip ? undefined : 'Loading'\"\n      :aria-describedby=\"hasTip ? tipId : undefined\"\n    >\n      <div class=\"b-spin__indicator\" aria-hidden=\"true\">\n        <slot name=\"indicator\">\n          <span class=\"b-spin__dot\">\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n            <i class=\"b-spin__dot-item\" />\n          </span>\n        </slot>\n      </div>\n      <div v-if=\"hasTip\" :id=\"tipId\" class=\"b-spin__tip\">\n        <slot name=\"tip\">{{ tip }}</slot>\n      </div>\n    </div>\n    <div\n      class=\"b-spin__content\"\n      :class=\"{ 'b-spin__content--blurred': shouldShow }\"\n      :aria-busy=\"shouldShow\"\n      :inert=\"shouldShow\"\n    >\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n.b-spin {\n  /* Dot sizes per variant */\n  --b-spin-dot-size-small: 14px;\n  --b-spin-dot-size-default: 20px;\n  --b-spin-dot-size-large: 32px;\n\n  /* Dot colour */\n  --b-spin-dot-color: oklch(50% 0.169 237.323); /* primary – darkened for AA contrast */\n\n  /* Tip text */\n  --b-spin-tip-color: oklch(50% 0.169 237.323);\n  --b-spin-tip-font-size: 0.875rem;\n\n  /* Overlay */\n  --b-spin-overlay-bg: oklch(100% 0 0 / 0.6);\n  --b-spin-content-blur: 0.5px;\n\n  /* Fullscreen */\n  --b-spin-fullscreen-bg: oklch(100% 0 0 / 0.75);\n\n  /* Animation */\n  --b-spin-animation-duration: 1.2s;\n  --b-spin-transition-duration: 300ms;\n}\n\n/* ── Dark mode ───────────────────────────────── */\n[data-prefers-color='dark'] .b-spin {\n  --b-spin-dot-color: oklch(72% 0.14 237);\n  --b-spin-tip-color: oklch(72% 0.14 237);\n  --b-spin-overlay-bg: oklch(15% 0 0 / 0.6);\n  --b-spin-fullscreen-bg: oklch(15% 0 0 / 0.75);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-spin {\n    --b-spin-dot-color: oklch(72% 0.14 237);\n    --b-spin-tip-color: oklch(72% 0.14 237);\n    --b-spin-overlay-bg: oklch(15% 0 0 / 0.6);\n    --b-spin-fullscreen-bg: oklch(15% 0 0 / 0.75);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Base layout\n   ───────────────────────────────────────────── */\n.b-spin {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  font-family: inherit;\n}\n\n/* Nested wrapper needs relative positioning for overlay */\n.b-spin--nested {\n  position: relative;\n  display: block;\n}\n\n/* ── Overlay container (nested mode) ── */\n.b-spin__overlay-container {\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  background: var(--b-spin-overlay-bg);\n  border-radius: inherit;\n  transition: opacity var(--b-spin-transition-duration) ease;\n}\n\n/* ── Content (nested) ── */\n.b-spin__content {\n  transition:\n    opacity var(--b-spin-transition-duration) ease,\n    filter var(--b-spin-transition-duration) ease;\n}\n\n.b-spin__content--blurred {\n  opacity: 0.5;\n  filter: blur(var(--b-spin-content-blur));\n  pointer-events: none;\n  user-select: none;\n}\n\n/* ── Fullscreen ── */\n.b-spin--fullscreen {\n  position: fixed;\n  inset: 0;\n  z-index: 1070;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  background: var(--b-spin-fullscreen-bg);\n}\n\n/* ── Dot indicator ── */\n.b-spin__indicator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n}\n\n.b-spin__dot {\n  position: relative;\n  display: inline-block;\n  font-size: var(--b-spin-dot-size-default);\n  width: 1em;\n  height: 1em;\n  animation: b-spin-rotate var(--b-spin-animation-duration) linear infinite;\n}\n\n.b-spin--small .b-spin__dot {\n  font-size: var(--b-spin-dot-size-small);\n}\n\n.b-spin--large .b-spin__dot {\n  font-size: var(--b-spin-dot-size-large);\n}\n\n.b-spin__dot-item {\n  position: absolute;\n  display: block;\n  width: calc(1em * 0.45);\n  height: calc(1em * 0.45);\n  background-color: var(--b-spin-dot-color);\n  border-radius: 50%;\n  opacity: 0.3;\n  animation: b-spin-bounce var(--b-spin-animation-duration) ease-in-out infinite;\n  transform: scale(0.75);\n}\n\n.b-spin__dot-item:nth-child(1) {\n  top: 0;\n  left: 0;\n}\n\n.b-spin__dot-item:nth-child(2) {\n  top: 0;\n  right: 0;\n  animation-delay: 0.4s;\n}\n\n.b-spin__dot-item:nth-child(3) {\n  right: 0;\n  bottom: 0;\n  animation-delay: 0.8s;\n}\n\n.b-spin__dot-item:nth-child(4) {\n  bottom: 0;\n  left: 0;\n  animation-delay: 1.2s;\n}\n\n/* ── Tip ── */\n.b-spin__tip {\n  color: var(--b-spin-tip-color);\n  font-size: var(--b-spin-tip-font-size);\n  text-align: center;\n}\n\n/* ─────────────────────────────────────────────\n   Keyframes\n   ───────────────────────────────────────────── */\n@keyframes b-spin-rotate {\n  to {\n    transform: rotate(405deg);\n  }\n}\n\n@keyframes b-spin-bounce {\n  0%,\n  100% {\n    opacity: 0.3;\n    transform: scale(0.75);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Fade transition (fullscreen)\n   ───────────────────────────────────────────── */\n.b-spin-fade-enter-active,\n.b-spin-fade-leave-active {\n  transition: opacity var(--b-spin-transition-duration) ease;\n}\n\n.b-spin-fade-enter-from,\n.b-spin-fade-leave-to {\n  opacity: 0;\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-spin__dot {\n    animation: none;\n  }\n\n  .b-spin__dot-item {\n    animation: none;\n    opacity: 0.8;\n    transform: scale(1);\n  }\n\n  .b-spin-fade-enter-active,\n  .b-spin-fade-leave-active {\n    transition: none;\n  }\n\n  .b-spin__content {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system207.js

@@ -1,111 +1,22 @@
-import { BCommonSize as e, BIconSize as t, BStepsDirection as n, BStepsLabelPlacement as r, BStepsStatus as i, BStepsType as a } from "./design-system3.js";
-import o from "./design-system27.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, defineComponent as p, mergeModels as m, normalizeClass as h, normalizeStyle as g, openBlock as _, renderList as v, toDisplayString as y, toRefs as b, unref as x, useModel as S } from "vue";
-//#region src/components/BSteps/BSteps.vue?vue&type=script&setup=true&lang.ts
-var C = ["data-status"], w = [
-	"role",
-	"tabindex",
-	"aria-disabled",
-	"aria-current",
-	"onClick",
-	"onKeydown"
-], T = { class: "b:flex b:items-center b:gap-x-2" }, E = {
-	key: 0,
-	"aria-hidden": "true",
-	class: "b-steps__tail"
-}, D = /* @__PURE__ */ p({
-	__name: "BSteps",
-	props: /* @__PURE__ */ m({
-		items: { default: () => [] },
-		status: { default: i.Process },
-		direction: { default: n.Horizontal },
-		size: { default: e.Medium },
-		labelPlacement: { default: r.Horizontal },
-		type: { default: a.Default }
-	}, {
-		modelValue: { default: 0 },
-		modelModifiers: {}
-	}),
-	emits: /* @__PURE__ */ m(["change"], ["update:modelValue"]),
-	setup(p, { emit: m }) {
-		let { items: D, status: O, direction: k, size: A, labelPlacement: j, type: M } = b(p), N = S(p, "modelValue"), P = m, F = c(() => A.value === e.Small ? e.Small : e.Medium), I = c(() => F.value === e.Small ? t.Small : t.Medium), L = c(() => ({
-			"--b-steps-icon-size": F.value === e.Small ? "1.5rem" : "2rem",
-			"--b-steps-gap": F.value === e.Small ? "0.5rem" : "0.75rem"
-		})), R = c(() => F.value === e.Small ? "b:text-sm" : "b:text-base"), z = c(() => F.value === e.Small ? "b:text-xs" : "b:text-sm"), B = c(() => M.value === a.Navigation), V = (e, t) => e.status ? e.status : t === N.value ? O.value || i.Process : t < N.value ? i.Finish : i.Wait, H = (e) => {
-			switch (e) {
-				case i.Finish:
-				case i.Process: return "var(--b-color-primary)";
-				case i.Error: return "var(--b-color-failure)";
-				case i.Wait:
-				default: return "var(--b-color-zinc-200)";
-			}
-		}, U = (e, t) => {
-			!B.value || e.disabled || (N.value = t, P("change", t));
-		}, W = (e, t, n) => {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), U(t, n));
-		}, G = (e) => ({
-			"b:border-secondary b:bg-white b:text-secondary": e === i.Wait,
-			"b:border-primary b:bg-primary b:text-white": e === i.Process,
-			"b:border-primary b:bg-white b:text-primary": e === i.Finish,
-			"b:border-failure b:bg-white b:text-failure": e === i.Error
-		}), K = (e) => ({
-			"b:text-black-base": e === i.Process || e === i.Finish,
-			"b:text-failure": e === i.Error,
-			"b:text-black/65": e === i.Wait
-		}), q = (e) => ({
-			"b:text-black/65": e !== i.Error,
-			"b:text-failure": e === i.Error
-		});
-		return (t, c) => (_(), d("ol", {
-			class: h(["b-steps", [{
-				"b-steps--horizontal": x(k) === x(n).Horizontal,
-				"b-steps--vertical": x(k) === x(n).Vertical,
-				"b-steps--label-vertical": x(k) === x(n).Horizontal && x(j) === x(r).Vertical,
-				"b-steps--navigation": x(M) === x(a).Navigation,
-				"b-steps--inline": x(M) === x(a).Inline
-			}]]),
-			style: g(L.value)
-		}, [(_(!0), d(s, null, v(x(D), (t, a) => (_(), d("li", {
-			key: `${t.title}-${a}`,
-			class: h(["b-steps__item", [{ "b:opacity-50": t.disabled }, { "b-steps__item--clickable": B.value && !t.disabled }]]),
-			"data-status": V(t, a),
-			style: g({ "--b-steps-tail-color": H(V(t, a)) })
-		}, [f("div", {
-			class: "b-steps__item-inner",
-			role: B.value && !t.disabled ? "button" : void 0,
-			tabindex: B.value && !t.disabled ? 0 : void 0,
-			"aria-disabled": t.disabled ? "true" : void 0,
-			"aria-current": a === N.value ? "step" : void 0,
-			onClick: (e) => U(t, a),
-			onKeydown: (e) => W(e, t, a)
-		}, [f("div", { class: h(["b-steps__icon b:flex b:items-center b:justify-center b:rounded-full b:border", [G(V(t, a)), {
-			"b:h-6 b:w-6": F.value === x(e).Small,
-			"b:h-8 b:w-8": F.value === x(e).Medium
-		}]]) }, [t.icon ? (_(), l(o, {
-			key: 0,
-			icon: t.icon,
-			size: I.value
-		}, null, 8, ["icon", "size"])) : V(t, a) === x(i).Finish ? (_(), l(o, {
-			key: 1,
-			icon: "check",
-			size: I.value
-		}, null, 8, ["size"])) : V(t, a) === x(i).Error ? (_(), l(o, {
-			key: 2,
-			icon: "xmark",
-			size: I.value
-		}, null, 8, ["size"])) : (_(), d("span", {
-			key: 3,
-			class: h(R.value)
-		}, y(a + 1), 3))], 2), f("div", { class: h(["b-steps__content b:flex b:flex-col b:gap-y-1", [{ "b:items-center b:text-center": x(k) === x(n).Horizontal && x(j) === x(r).Vertical }]]) }, [f("div", T, [f("span", { class: h(["b:font-medium", [R.value, K(V(t, a))]]) }, y(t.title), 3), t.subTitle ? (_(), d("span", {
-			key: 0,
-			class: h(["b:text-xs b:text-black/65", K(V(t, a))])
-		}, y(t.subTitle), 3)) : u("", !0)]), t.description ? (_(), d("p", {
-			key: 0,
-			class: h(["b:leading-snug", [z.value, q(V(t, a))]])
-		}, y(t.description), 3)) : u("", !0)], 2)], 40, w), x(k) === x(n).Horizontal && a < x(D).length - 1 ? (_(), d("span", E)) : u("", !0)], 14, C))), 128))], 6));
+import { defineComponent as e, renderSlot as t } from "vue";
+//#region src/components/BSplitter/BSplitterPanel.vue?vue&type=script&setup=true&lang.ts
+var n = /* @__PURE__ */ e({
+	name: "BSplitterPanel",
+	__name: "BSplitterPanel",
+	props: {
+		size: {},
+		defaultSize: {},
+		min: {},
+		max: {},
+		resizable: { type: Boolean },
+		collapsible: { type: [Boolean, Object] },
+		destroyOnHidden: { type: Boolean }
+	},
+	setup(e) {
+		return (e, n) => t(e.$slots, "default");
 	}
 });
 //#endregion
-export { D as default };
+export { n as default };
 
 //# sourceMappingURL=design-system207.js.map

package/dist/design-system207.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system207.js","names":[],"sources":["../src/components/BSteps/BSteps.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { useModel as _useModel, mergeModels as _mergeModels, defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle } from \"vue\"\n\nconst _hoisted_1 = [\"data-status\"]\nconst _hoisted_2 = [\"role\", \"tabindex\", \"aria-disabled\", \"aria-current\", \"onClick\", \"onKeydown\"]\nconst _hoisted_3 = { class: \"b:flex b:items-center b:gap-x-2\" }\nconst _hoisted_4 = {\n  key: 0,\n  \"aria-hidden\": \"true\",\n  class: \"b-steps__tail\"\n}\n\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport {\n  BCommonSize,\n  BIconSize,\n  BStepsDirection,\n  BStepsLabelPlacement,\n  BStepsStatus,\n  BStepsType,\n  type BStepItem,\n} from '@/types.ts';\nimport { computed, toRefs } from 'vue';\n\nexport interface BStepsProps {\n  /**\n   * The step items to render.\n   */\n  items?: BStepItem[];\n  /**\n   * Status applied to the current step if not overridden by the item.\n   */\n  status?: `${BStepsStatus}`;\n  /**\n   * Layout direction.\n   */\n  direction?: `${BStepsDirection}`;\n  /**\n   * Size of the step icons and text.\n   */\n  size?: `${BCommonSize}`;\n  /**\n   * Placement of labels for horizontal steps.\n   */\n  labelPlacement?: `${BStepsLabelPlacement}`;\n  /**\n   * Step type styling.\n   */\n  type?: `${BStepsType}`;\n}\n\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BSteps',\n  props: /*@__PURE__*/_mergeModels({\n    items: { default: () => [] },\n    status: { default: BStepsStatus.Process },\n    direction: { default: BStepsDirection.Horizontal },\n    size: { default: BCommonSize.Medium },\n    labelPlacement: { default: BStepsLabelPlacement.Horizontal },\n    type: { default: BStepsType.Default }\n  }, {\n    \"modelValue\": { default: 0 },\n    \"modelModifiers\": {},\n  }),\n  emits: /*@__PURE__*/_mergeModels([\"change\"], [\"update:modelValue\"]),\n  setup(__props: any, { emit: __emit }) {\n\nconst props = __props;\nconst { items, status, direction, size, labelPlacement, type } = toRefs(props);\nconst model = _useModel<number>(__props, \"modelValue\");\n\nconst emit = __emit;\n\nconst normalizedSize = computed(() =>\n  size.value === BCommonSize.Small ? BCommonSize.Small : BCommonSize.Medium,\n);\nconst iconSize = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? BIconSize.Small : BIconSize.Medium,\n);\n\nconst rootStyle = computed(() => ({\n  '--b-steps-icon-size': normalizedSize.value === BCommonSize.Small ? '1.5rem' : '2rem',\n  '--b-steps-gap': normalizedSize.value === BCommonSize.Small ? '0.5rem' : '0.75rem',\n}));\n\nconst titleSizeClass = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? 'b:text-sm' : 'b:text-base',\n);\nconst descriptionSizeClass = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? 'b:text-xs' : 'b:text-sm',\n);\n\nconst isClickable = computed(() => type.value === BStepsType.Navigation);\n\nconst getStepStatus = (item: BStepItem, index: number) => {\n  if (item.status) {\n    return item.status;\n  }\n  if (index === model.value) {\n    return status.value || BStepsStatus.Process;\n  }\n  if (index < model.value) {\n    return BStepsStatus.Finish;\n  }\n  return BStepsStatus.Wait;\n};\n\nconst getTailColor = (status: `${BStepsStatus}`) => {\n  switch (status) {\n    case BStepsStatus.Finish:\n    case BStepsStatus.Process:\n      return 'var(--b-color-primary)';\n    case BStepsStatus.Error:\n      return 'var(--b-color-failure)';\n    case BStepsStatus.Wait:\n    default:\n      return 'var(--b-color-zinc-200)';\n  }\n};\n\nconst onStepClick = (item: BStepItem, index: number) => {\n  if (!isClickable.value || item.disabled) {\n    return;\n  }\n  model.value = index;\n  emit('change', index);\n};\n\nconst onStepKeydown = (event: KeyboardEvent, item: BStepItem, index: number) => {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    onStepClick(item, index);\n  }\n};\n\nconst iconClass = (status: `${BStepsStatus}`) => ({\n  'b:border-secondary b:bg-white b:text-secondary': status === BStepsStatus.Wait,\n  'b:border-primary b:bg-primary b:text-white': status === BStepsStatus.Process,\n  'b:border-primary b:bg-white b:text-primary': status === BStepsStatus.Finish,\n  'b:border-failure b:bg-white b:text-failure': status === BStepsStatus.Error,\n});\nconst titleClass = (status: `${BStepsStatus}`) => ({\n  'b:text-black-base': status === BStepsStatus.Process || status === BStepsStatus.Finish,\n  'b:text-failure': status === BStepsStatus.Error,\n  'b:text-black/65': status === BStepsStatus.Wait,\n});\nconst descriptionClass = (status: `${BStepsStatus}`) => ({\n  'b:text-black/65': status !== BStepsStatus.Error,\n  'b:text-failure': status === BStepsStatus.Error,\n});\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"ol\", {\n    class: _normalizeClass([\"b-steps\", [\n      {\n        'b-steps--horizontal': _unref(direction) === _unref(BStepsDirection).Horizontal,\n        'b-steps--vertical': _unref(direction) === _unref(BStepsDirection).Vertical,\n        'b-steps--label-vertical':\n          _unref(direction) === _unref(BStepsDirection).Horizontal &&\n          _unref(labelPlacement) === _unref(BStepsLabelPlacement).Vertical,\n        'b-steps--navigation': _unref(type) === _unref(BStepsType).Navigation,\n        'b-steps--inline': _unref(type) === _unref(BStepsType).Inline,\n      },\n    ]]),\n    style: _normalizeStyle(rootStyle.value)\n  }, [\n    (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_unref(items), (item, index) => {\n      return (_openBlock(), _createElementBlock(\"li\", {\n        key: `${item.title}-${index}`,\n        class: _normalizeClass([\"b-steps__item\", [\n        { 'b:opacity-50': item.disabled },\n        { 'b-steps__item--clickable': isClickable.value && !item.disabled },\n      ]]),\n        \"data-status\": getStepStatus(item, index),\n        style: _normalizeStyle({ '--b-steps-tail-color': getTailColor(getStepStatus(item, index)) })\n      }, [\n        _createElementVNode(\"div\", {\n          class: \"b-steps__item-inner\",\n          role: isClickable.value && !item.disabled ? 'button' : undefined,\n          tabindex: isClickable.value && !item.disabled ? 0 : undefined,\n          \"aria-disabled\": item.disabled ? 'true' : undefined,\n          \"aria-current\": index === model.value ? 'step' : undefined,\n          onClick: ($event: any) => (onStepClick(item, index)),\n          onKeydown: ($event: any) => (onStepKeydown($event, item, index))\n        }, [\n          _createElementVNode(\"div\", {\n            class: _normalizeClass([\"b-steps__icon b:flex b:items-center b:justify-center b:rounded-full b:border\", [\n            iconClass(getStepStatus(item, index)),\n            {\n              'b:h-6 b:w-6': normalizedSize.value === _unref(BCommonSize).Small,\n              'b:h-8 b:w-8': normalizedSize.value === _unref(BCommonSize).Medium,\n            },\n          ]])\n          }, [\n            (item.icon)\n              ? (_openBlock(), _createBlock(BIcon, {\n                  key: 0,\n                  icon: item.icon,\n                  size: iconSize.value\n                }, null, 8, [\"icon\", \"size\"]))\n              : (getStepStatus(item, index) === _unref(BStepsStatus).Finish)\n                ? (_openBlock(), _createBlock(BIcon, {\n                    key: 1,\n                    icon: \"check\",\n                    size: iconSize.value\n                  }, null, 8, [\"size\"]))\n                : (getStepStatus(item, index) === _unref(BStepsStatus).Error)\n                  ? (_openBlock(), _createBlock(BIcon, {\n                      key: 2,\n                      icon: \"xmark\",\n                      size: iconSize.value\n                    }, null, 8, [\"size\"]))\n                  : (_openBlock(), _createElementBlock(\"span\", {\n                      key: 3,\n                      class: _normalizeClass(titleSizeClass.value)\n                    }, _toDisplayString(index + 1), 3))\n          ], 2),\n          _createElementVNode(\"div\", {\n            class: _normalizeClass([\"b-steps__content b:flex b:flex-col b:gap-y-1\", [\n            {\n              'b:items-center b:text-center':\n                _unref(direction) === _unref(BStepsDirection).Horizontal &&\n                _unref(labelPlacement) === _unref(BStepsLabelPlacement).Vertical,\n            },\n          ]])\n          }, [\n            _createElementVNode(\"div\", _hoisted_3, [\n              _createElementVNode(\"span\", {\n                class: _normalizeClass([\"b:font-medium\", [titleSizeClass.value, titleClass(getStepStatus(item, index))]])\n              }, _toDisplayString(item.title), 3),\n              (item.subTitle)\n                ? (_openBlock(), _createElementBlock(\"span\", {\n                    key: 0,\n                    class: _normalizeClass([\"b:text-xs b:text-black/65\", titleClass(getStepStatus(item, index))])\n                  }, _toDisplayString(item.subTitle), 3))\n                : _createCommentVNode(\"\", true)\n            ]),\n            (item.description)\n              ? (_openBlock(), _createElementBlock(\"p\", {\n                  key: 0,\n                  class: _normalizeClass([\"b:leading-snug\", [descriptionSizeClass.value, descriptionClass(getStepStatus(item, index))]])\n                }, _toDisplayString(item.description), 3))\n              : _createCommentVNode(\"\", true)\n          ], 2)\n        ], 40, _hoisted_2),\n        (_unref(direction) === _unref(BStepsDirection).Horizontal && index < _unref(items).length - 1)\n          ? (_openBlock(), _createElementBlock(\"span\", _hoisted_4))\n          : _createCommentVNode(\"\", true)\n      ], 14, _hoisted_1))\n    }), 128))\n  ], 6))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system207.js","names":[],"sources":["../src/components/BSplitter/BSplitterPanel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * BSplitterPanel\n * --------------\n * A pure data/marker component used inside <BSplitter>.\n *\n * It does not render any wrapper element of its own — <BSplitter> reads the\n * VNode's props and default-slot content and renders the panel <div>\n * itself, so that draggers can be interspersed correctly between panels.\n *\n * Props mirror AntD's `Splitter.Panel` API.\n */\nimport type { BSplitterPanelCollapsible } from './types';\n\ndefineOptions({ name: 'BSplitterPanel' });\n\ndefineProps<{\n  /** Controlled size (px number or any CSS unit string e.g. '50%'). */\n  size?: number | string;\n  /** Initial size for uncontrolled mode (px number or CSS string). */\n  defaultSize?: number | string;\n  /** Minimum size (px or CSS string). */\n  min?: number | string;\n  /** Maximum size (px or CSS string). */\n  max?: number | string;\n  /** Whether the dragger adjacent to this panel can resize it. @default true */\n  resizable?: boolean;\n  /** Collapsible config — `true` enables both directions, or pass an object. */\n  collapsible?: boolean | BSplitterPanelCollapsible;\n  /** Destroy panel content from the DOM when its size collapses to 0. @default false */\n  destroyOnHidden?: boolean;\n}>();\n\ndefineSlots<{\n  default?(): unknown;\n}>();\n</script>\n\n<template>\n  <!-- Render only the slot content. BSplitter wraps it in a panel div. -->\n  <slot />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;mBAwCE,EAAQ,EAAA,QAAA,UAAA"}

package/dist/{design-system202.js → design-system208.js}

@@ -1,7 +1,7 @@
-import e from "./design-system201.js";
+import e from "./design-system207.js";
 //#region src/components/BSplitter/BSplitterPanel.vue
 var t = e;
 //#endregion
 export { t as default };
 
-//# sourceMappingURL=design-system202.js.map
+//# sourceMappingURL=design-system208.js.map

package/dist/{design-system202.js.map → design-system208.js.map}

@@ -1 +1 @@
-{"version":3,"file":"design-system202.js","names":[],"sources":["../src/components/BSplitter/BSplitterPanel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * BSplitterPanel\n * --------------\n * A pure data/marker component used inside <BSplitter>.\n *\n * It does not render any wrapper element of its own — <BSplitter> reads the\n * VNode's props and default-slot content and renders the panel <div>\n * itself, so that draggers can be interspersed correctly between panels.\n *\n * Props mirror AntD's `Splitter.Panel` API.\n */\nimport type { BSplitterPanelCollapsible } from './types';\n\ndefineOptions({ name: 'BSplitterPanel' });\n\ndefineProps<{\n  /** Controlled size (px number or any CSS unit string e.g. '50%'). */\n  size?: number | string;\n  /** Initial size for uncontrolled mode (px number or CSS string). */\n  defaultSize?: number | string;\n  /** Minimum size (px or CSS string). */\n  min?: number | string;\n  /** Maximum size (px or CSS string). */\n  max?: number | string;\n  /** Whether the dragger adjacent to this panel can resize it. @default true */\n  resizable?: boolean;\n  /** Collapsible config — `true` enables both directions, or pass an object. */\n  collapsible?: boolean | BSplitterPanelCollapsible;\n  /** Destroy panel content from the DOM when its size collapses to 0. @default false */\n  destroyOnHidden?: boolean;\n}>();\n\ndefineSlots<{\n  default?(): unknown;\n}>();\n</script>\n\n<template>\n  <!-- Render only the slot content. BSplitter wraps it in a panel div. -->\n  <slot />\n</template>\n"],"mappings":""}
+{"version":3,"file":"design-system208.js","names":[],"sources":["../src/components/BSplitter/BSplitterPanel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * BSplitterPanel\n * --------------\n * A pure data/marker component used inside <BSplitter>.\n *\n * It does not render any wrapper element of its own — <BSplitter> reads the\n * VNode's props and default-slot content and renders the panel <div>\n * itself, so that draggers can be interspersed correctly between panels.\n *\n * Props mirror AntD's `Splitter.Panel` API.\n */\nimport type { BSplitterPanelCollapsible } from './types';\n\ndefineOptions({ name: 'BSplitterPanel' });\n\ndefineProps<{\n  /** Controlled size (px number or any CSS unit string e.g. '50%'). */\n  size?: number | string;\n  /** Initial size for uncontrolled mode (px number or CSS string). */\n  defaultSize?: number | string;\n  /** Minimum size (px or CSS string). */\n  min?: number | string;\n  /** Maximum size (px or CSS string). */\n  max?: number | string;\n  /** Whether the dragger adjacent to this panel can resize it. @default true */\n  resizable?: boolean;\n  /** Collapsible config — `true` enables both directions, or pass an object. */\n  collapsible?: boolean | BSplitterPanelCollapsible;\n  /** Destroy panel content from the DOM when its size collapses to 0. @default false */\n  destroyOnHidden?: boolean;\n}>();\n\ndefineSlots<{\n  default?(): unknown;\n}>();\n</script>\n\n<template>\n  <!-- Render only the slot content. BSplitter wraps it in a panel div. -->\n  <slot />\n</template>\n"],"mappings":""}

package/dist/design-system209.js

@@ -1,9 +1,6 @@
-import e from "./design-system14.js";
-import t from "./design-system207.js";
-/* empty css                 */
-//#region src/components/BSteps/BSteps.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-75d0dd09"]]);
+//#region src/components/BSplitter/types.ts
+var e = Symbol("BSplitterContext");
 //#endregion
-export { n as default };
+export { e as BSplitterContextKey };
 
 //# sourceMappingURL=design-system209.js.map

package/dist/design-system209.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system209.js","names":[],"sources":["../src/components/BSteps/BSteps.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport BIcon from '@/components/BIcon/BIcon.vue';\nimport {\n  BCommonSize,\n  BIconSize,\n  BStepsDirection,\n  BStepsLabelPlacement,\n  BStepsStatus,\n  BStepsType,\n  type BStepItem,\n} from '@/types.ts';\nimport { computed, toRefs } from 'vue';\n\nexport interface BStepsProps {\n  /**\n   * The step items to render.\n   */\n  items?: BStepItem[];\n  /**\n   * Status applied to the current step if not overridden by the item.\n   */\n  status?: `${BStepsStatus}`;\n  /**\n   * Layout direction.\n   */\n  direction?: `${BStepsDirection}`;\n  /**\n   * Size of the step icons and text.\n   */\n  size?: `${BCommonSize}`;\n  /**\n   * Placement of labels for horizontal steps.\n   */\n  labelPlacement?: `${BStepsLabelPlacement}`;\n  /**\n   * Step type styling.\n   */\n  type?: `${BStepsType}`;\n}\n\nconst props = withDefaults(defineProps<BStepsProps>(), {\n  items: () => [],\n  status: BStepsStatus.Process,\n  direction: BStepsDirection.Horizontal,\n  size: BCommonSize.Medium,\n  labelPlacement: BStepsLabelPlacement.Horizontal,\n  type: BStepsType.Default,\n});\nconst { items, status, direction, size, labelPlacement, type } = toRefs(props);\nconst model = defineModel<number>({ default: 0 });\n\nconst emit = defineEmits<{\n  /**\n   * Emitted when the current step changes via user interaction.\n   */\n  change: [value: number];\n}>();\n\nconst normalizedSize = computed(() =>\n  size.value === BCommonSize.Small ? BCommonSize.Small : BCommonSize.Medium,\n);\nconst iconSize = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? BIconSize.Small : BIconSize.Medium,\n);\n\nconst rootStyle = computed(() => ({\n  '--b-steps-icon-size': normalizedSize.value === BCommonSize.Small ? '1.5rem' : '2rem',\n  '--b-steps-gap': normalizedSize.value === BCommonSize.Small ? '0.5rem' : '0.75rem',\n}));\n\nconst titleSizeClass = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? 'b:text-sm' : 'b:text-base',\n);\nconst descriptionSizeClass = computed(() =>\n  normalizedSize.value === BCommonSize.Small ? 'b:text-xs' : 'b:text-sm',\n);\n\nconst isClickable = computed(() => type.value === BStepsType.Navigation);\n\nconst getStepStatus = (item: BStepItem, index: number) => {\n  if (item.status) {\n    return item.status;\n  }\n  if (index === model.value) {\n    return status.value || BStepsStatus.Process;\n  }\n  if (index < model.value) {\n    return BStepsStatus.Finish;\n  }\n  return BStepsStatus.Wait;\n};\n\nconst getTailColor = (status: `${BStepsStatus}`) => {\n  switch (status) {\n    case BStepsStatus.Finish:\n    case BStepsStatus.Process:\n      return 'var(--b-color-primary)';\n    case BStepsStatus.Error:\n      return 'var(--b-color-failure)';\n    case BStepsStatus.Wait:\n    default:\n      return 'var(--b-color-zinc-200)';\n  }\n};\n\nconst onStepClick = (item: BStepItem, index: number) => {\n  if (!isClickable.value || item.disabled) {\n    return;\n  }\n  model.value = index;\n  emit('change', index);\n};\n\nconst onStepKeydown = (event: KeyboardEvent, item: BStepItem, index: number) => {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    onStepClick(item, index);\n  }\n};\n\nconst iconClass = (status: `${BStepsStatus}`) => ({\n  'b:border-secondary b:bg-white b:text-secondary': status === BStepsStatus.Wait,\n  'b:border-primary b:bg-primary b:text-white': status === BStepsStatus.Process,\n  'b:border-primary b:bg-white b:text-primary': status === BStepsStatus.Finish,\n  'b:border-failure b:bg-white b:text-failure': status === BStepsStatus.Error,\n});\nconst titleClass = (status: `${BStepsStatus}`) => ({\n  'b:text-black-base': status === BStepsStatus.Process || status === BStepsStatus.Finish,\n  'b:text-failure': status === BStepsStatus.Error,\n  'b:text-black/65': status === BStepsStatus.Wait,\n});\nconst descriptionClass = (status: `${BStepsStatus}`) => ({\n  'b:text-black/65': status !== BStepsStatus.Error,\n  'b:text-failure': status === BStepsStatus.Error,\n});\n</script>\n\n<template>\n  <ol\n    class=\"b-steps\"\n    :class=\"[\n      {\n        'b-steps--horizontal': direction === BStepsDirection.Horizontal,\n        'b-steps--vertical': direction === BStepsDirection.Vertical,\n        'b-steps--label-vertical':\n          direction === BStepsDirection.Horizontal &&\n          labelPlacement === BStepsLabelPlacement.Vertical,\n        'b-steps--navigation': type === BStepsType.Navigation,\n        'b-steps--inline': type === BStepsType.Inline,\n      },\n    ]\"\n    :style=\"rootStyle\"\n  >\n    <li\n      v-for=\"(item, index) in items\"\n      :key=\"`${item.title}-${index}`\"\n      class=\"b-steps__item\"\n      :class=\"[\n        { 'b:opacity-50': item.disabled },\n        { 'b-steps__item--clickable': isClickable && !item.disabled },\n      ]\"\n      :data-status=\"getStepStatus(item, index)\"\n      :style=\"{ '--b-steps-tail-color': getTailColor(getStepStatus(item, index)) }\"\n    >\n      <div\n        class=\"b-steps__item-inner\"\n        :role=\"isClickable && !item.disabled ? 'button' : undefined\"\n        :tabindex=\"isClickable && !item.disabled ? 0 : undefined\"\n        :aria-disabled=\"item.disabled ? 'true' : undefined\"\n        :aria-current=\"index === model ? 'step' : undefined\"\n        @click=\"onStepClick(item, index)\"\n        @keydown=\"onStepKeydown($event, item, index)\"\n      >\n        <div\n          class=\"b-steps__icon b:flex b:items-center b:justify-center b:rounded-full b:border\"\n          :class=\"[\n            iconClass(getStepStatus(item, index)),\n            {\n              'b:h-6 b:w-6': normalizedSize === BCommonSize.Small,\n              'b:h-8 b:w-8': normalizedSize === BCommonSize.Medium,\n            },\n          ]\"\n        >\n          <template v-if=\"item.icon\">\n            <BIcon :icon=\"item.icon\" :size=\"iconSize\" />\n          </template>\n          <template v-else-if=\"getStepStatus(item, index) === BStepsStatus.Finish\">\n            <BIcon icon=\"check\" :size=\"iconSize\" />\n          </template>\n          <template v-else-if=\"getStepStatus(item, index) === BStepsStatus.Error\">\n            <BIcon icon=\"xmark\" :size=\"iconSize\" />\n          </template>\n          <template v-else>\n            <span :class=\"titleSizeClass\">{{ index + 1 }}</span>\n          </template>\n        </div>\n\n        <div\n          class=\"b-steps__content b:flex b:flex-col b:gap-y-1\"\n          :class=\"[\n            {\n              'b:items-center b:text-center':\n                direction === BStepsDirection.Horizontal &&\n                labelPlacement === BStepsLabelPlacement.Vertical,\n            },\n          ]\"\n        >\n          <div class=\"b:flex b:items-center b:gap-x-2\">\n            <span\n              class=\"b:font-medium\"\n              :class=\"[titleSizeClass, titleClass(getStepStatus(item, index))]\"\n            >\n              {{ item.title }}\n            </span>\n            <span\n              v-if=\"item.subTitle\"\n              class=\"b:text-xs b:text-black/65\"\n              :class=\"titleClass(getStepStatus(item, index))\"\n            >\n              {{ item.subTitle }}\n            </span>\n          </div>\n          <p\n            v-if=\"item.description\"\n            class=\"b:leading-snug\"\n            :class=\"[descriptionSizeClass, descriptionClass(getStepStatus(item, index))]\"\n          >\n            {{ item.description }}\n          </p>\n        </div>\n      </div>\n      <span\n        v-if=\"direction === BStepsDirection.Horizontal && index < items.length - 1\"\n        aria-hidden=\"true\"\n        class=\"b-steps__tail\"\n      />\n    </li>\n  </ol>\n</template>\n\n<style scoped>\n.b-steps {\n  display: flex;\n  gap: var(--b-steps-gap);\n}\n\n.b-steps--vertical {\n  flex-direction: column;\n}\n\n.b-steps__item {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n}\n\n.b-steps__item-inner {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--b-steps-gap);\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.b-steps__icon {\n  flex-shrink: 0;\n}\n\n.b-steps__content {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.b-steps--label-vertical .b-steps__item-inner {\n  flex-direction: column;\n  align-items: center;\n}\n\n.b-steps--inline .b-steps__item-inner {\n  align-items: center;\n}\n\n.b-steps--inline .b-steps__content {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--b-steps-gap);\n}\n\n.b-steps--inline .b-steps__content p {\n  display: none;\n}\n\n.b-steps__item--clickable .b-steps__item-inner {\n  cursor: pointer;\n}\n\n.b-steps--horizontal .b-steps__item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--b-steps-gap);\n}\n\n.b-steps--vertical .b-steps__item {\n  padding-bottom: var(--b-steps-gap);\n}\n\n.b-steps--vertical .b-steps__item::after {\n  content: '';\n  position: absolute;\n  top: calc(var(--b-steps-icon-size) + var(--b-steps-gap));\n  left: calc(var(--b-steps-icon-size) / 2);\n  bottom: 0;\n  width: 1px;\n  background-color: var(--b-steps-tail-color);\n}\n\n.b-steps--vertical .b-steps__item:last-child::after {\n  display: none;\n}\n\n.b-steps__tail {\n  flex: 1 1 0;\n  min-width: 1.5rem;\n  height: 1px;\n  margin-top: calc(var(--b-steps-icon-size) / 2);\n  background-color: var(--b-steps-tail-color);\n}\n\n.b-steps--navigation .b-steps__item--clickable .b-steps__content {\n  transition: color 0.2s ease;\n}\n\n.b-steps--navigation .b-steps__item--clickable:hover .b-steps__content {\n  color: var(--b-color-primary);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system209.js","names":[],"sources":["../src/components/BSplitter/types.ts"],"sourcesContent":["import type { InjectionKey, VNode } from 'vue';\n\nexport type BSplitterOrientation = 'horizontal' | 'vertical';\n\n/**\n * Per-side collapsible config on a panel.\n * `start` = collapse toward the previous (left/top) panel.\n * `end`   = collapse toward the next (right/bottom) panel.\n */\nexport interface BSplitterPanelCollapsible {\n  start?: boolean;\n  end?: boolean;\n}\n\n/**\n * Splitter-level collapsible config (motion + custom icons).\n */\nexport interface BSplitterCollapsible {\n  /** Whether the size change should animate (CSS transition). @default true */\n  motion?: boolean;\n  /** Custom icon nodes for the collapse buttons. */\n  icon?: {\n    start?: VNode | string;\n    end?: VNode | string;\n  };\n}\n\n/** Resolved per-panel configuration extracted from slot VNodes. */\nexport interface BSplitterPanelConfig {\n  /** Panel index (0-based). */\n  index: number;\n  size?: number | string;\n  defaultSize?: number | string;\n  min?: number | string;\n  max?: number | string;\n  resizable: boolean;\n  collapsible: BSplitterPanelCollapsible | false;\n  destroyOnHidden: boolean;\n  /** Default slot content for the panel. */\n  content?: VNode[];\n}\n\n/** Context provided by BSplitter to its children (currently unused; kept for future). */\nexport interface BSplitterContext {\n  orientation: 'horizontal' | 'vertical';\n}\n\nexport const BSplitterContextKey: InjectionKey<BSplitterContext> = Symbol('BSplitterContext');\n"],"mappings":";AA+CA,IAAa,IAAsD,OAAO,mBAAmB"}